diff --git a/.env.example b/.env.example
index e56bd6211b..4b1cc9e280 100644
--- a/.env.example
+++ b/.env.example
@@ -7,3 +7,4 @@ NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN=xxx
 NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY=xxx
 NEXT_PUBLIC_AUTH0_CLIENT_ID=xxx
 FAVICON_GENERATOR_API_KEY=xxx
+NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY=xxx
diff --git a/.eslintrc.js b/.eslintrc.js
index 20881d308f..49e2ad4c43 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -4,9 +4,20 @@ const RESTRICTED_MODULES = {
     { name: '@chakra-ui/icons', message: 'Using @chakra-ui/icons is prohibited. Please use regular svg-icon instead (see examples in "icons/" folder)' },
     { name: '@metamask/providers', message: 'Please lazy-load @metamask/providers or use useProvider hook instead' },
     { name: '@metamask/post-message-stream', message: 'Please lazy-load @metamask/post-message-stream or use useProvider hook instead' },
+    { name: 'playwright/TestApp', message: 'Please use render() fixture from test() function of playwright/lib module' },
+    {
+      name: '@chakra-ui/react',
+      importNames: [ 'Popover', 'Menu', 'useToast' ],
+      message: 'Please use corresponding component or hook from ui/shared/chakra component instead',
+    },
+    {
+      name: 'lodash',
+      message: 'Please use `import [package] from \'lodash/[package]\'` instead.',
+    },
   ],
   patterns: [
     'icons/*',
+    '!lodash/*',
   ],
 };
 
diff --git a/.github/workflows/chakra-npm-publisher.yml b/.github/workflows/chakra-npm-publisher.yml
new file mode 100644
index 0000000000..1a63a30a3d
--- /dev/null
+++ b/.github/workflows/chakra-npm-publisher.yml
@@ -0,0 +1,51 @@
+name: Publish Chakra theme package to NPM
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: Package version
+        type: string
+        required: true
+  workflow_call:
+    inputs:
+      version:
+        description: Package version
+        type: string
+        required: true
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    name: Publish package to NPM registry
+    permissions:
+      id-token: write
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      # Also it will setup .npmrc file to publish to npm
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Update package version
+        run: |
+          cd ./theme
+          npm version ${{ inputs.version }}
+    
+      - name: Build the package
+        run: |
+          cd ./theme
+          yarn
+          yarn build
+    
+      - name: Publish to NPM registry
+        run: |
+          cd ./theme
+          npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/copy-issues-labels.yml b/.github/workflows/copy-issues-labels.yml
new file mode 100644
index 0000000000..e05b6e88ee
--- /dev/null
+++ b/.github/workflows/copy-issues-labels.yml
@@ -0,0 +1,116 @@
+name: Copy issues labels to pull request
+
+on:
+    workflow_dispatch:
+        inputs:
+            pr_number:
+                description: Pull request number
+                required: true
+                type: string
+            issues:
+                description: JSON encoded list of issue ids
+                required: true
+                type: string
+    workflow_call:
+        inputs:
+            pr_number:
+                description: Pull request number
+                required: true
+                type: string
+            issues:
+                description: JSON encoded list of issue ids
+                required: true
+                type: string
+
+jobs:
+    run:
+        name: Run
+        runs-on: ubuntu-latest
+        steps:
+        -   name: Find unique labels
+            id: find_unique_labels
+            uses: actions/github-script@v7
+            env:
+                ISSUES: ${{ inputs.issues }}
+            with:
+                script: |
+                    const issues = JSON.parse(process.env.ISSUES);
+
+                    const WHITE_LISTED_LABELS = [
+                        'client feature',
+                        'feature',
+
+                        'bug',
+
+                        'dependencies',
+                        'performance',
+
+                        'chore',
+                        'enhancement',
+                        'refactoring',
+                        'tech',
+                        'ENVs',
+                    ]
+
+                    const labels = await Promise.all(issues.map(getIssueLabels));
+                    const uniqueLabels = uniqueStringArray(labels.flat().filter((label) => WHITE_LISTED_LABELS.includes(label)));
+
+                    if (uniqueLabels.length === 0) {
+                        core.info('No labels found.\n');
+                        return [];
+                    }
+
+                    core.info(`Found following labels: ${ uniqueLabels.join(', ') }.\n`);
+                    return uniqueLabels;
+
+                    async function getIssueLabels(issue) {
+                        core.info(`Obtaining labels list for the issue #${ issue }...`);
+                    
+                        try {
+                            const response = await github.request('GET /repos/{owner}/{repo}/issues/{issue_number}/labels', {
+                                owner: 'blockscout',
+                                repo: 'frontend',
+                                issue_number: issue,
+                            });
+                            return response.data.map(({ name }) => name);
+                        } catch (error) {
+                            core.error(`Failed to obtain labels for the issue #${ issue }: ${ error.message }`);
+                            return [];
+                        }
+                    }
+
+                    function uniqueStringArray(array) {
+                        return Array.from(new Set(array));
+                    }
+
+        -   name: Update pull request labels
+            id: update_pr_labels
+            uses: actions/github-script@v7
+            env:
+                LABELS: ${{ steps.find_unique_labels.outputs.result }}
+                PR_NUMBER: ${{ inputs.pr_number }}
+            with:
+                script: |
+                    const labels = JSON.parse(process.env.LABELS);
+                    const prNumber = Number(process.env.PR_NUMBER);
+
+                    if (labels.length === 0) {
+                        core.info('Nothing to update.\n');
+                        return;
+                    }
+
+                    for (const label of labels) {
+                        await addLabelToPr(prNumber, label);
+                    }
+                    core.info('Done.\n');
+
+                    async function addLabelToPr(prNumber, label) {
+                        console.log(`Adding label to the pull request #${ prNumber }...`);
+                    
+                        return await github.request('POST /repos/{owner}/{repo}/issues/{issue_number}/labels', {
+                            owner: 'blockscout',
+                            repo: 'frontend',
+                            issue_number: prNumber,
+                            labels: [ label ],
+                        });
+                    }
\ No newline at end of file
diff --git a/.github/workflows/deploy-main.yml b/.github/workflows/deploy-main.yml
index 087934c334..73bdd72cf7 100644
--- a/.github/workflows/deploy-main.yml
+++ b/.github/workflows/deploy-main.yml
@@ -4,6 +4,16 @@ on:
   push:
     branches:
       - main
+    paths-ignore:
+      - '.github/ISSUE_TEMPLATE/**'
+      - '.husky/**'
+      - '.vscode/**'
+      - 'docs/**'
+      - 'jest/**'
+      - 'mocks/**'
+      - 'playwright/**'
+      - 'stubs/**'
+      - 'tools/**'
   workflow_dispatch:
 
 concurrency:
@@ -15,27 +25,3 @@ jobs:
     name: Publish Docker image
     uses: './.github/workflows/publish-image.yml'
     secrets: inherit
-
-  deploy_main:
-    name: Deploy frontend
-    needs: publish_image
-    uses: blockscout/blockscout-ci-cd/.github/workflows/deploy_helmfile.yaml@master
-    with:
-      appName: front
-      globalEnv: main
-      helmfileDir: deploy
-      kubeConfigSecret: ci/data/dev/kubeconfig/k8s-dev
-      vaultRole: ci-dev
-    secrets: inherit
-
-  deploy_l2:
-    name: Deploy frontend (L2)
-    needs: publish_image
-    uses: blockscout/blockscout-ci-cd/.github/workflows/deploy_helmfile.yaml@master
-    with:
-      appName: l2-optimism-goerli
-      globalEnv: optimism-goerli
-      helmfileDir: deploy
-      kubeConfigSecret: ci/data/dev/kubeconfig/k8s-dev
-      vaultRole: ci-dev
-    secrets: inherit
diff --git a/.github/workflows/deploy-review-l2.yml b/.github/workflows/deploy-review-l2.yml
index 02feb3ce64..28e2af1e9a 100644
--- a/.github/workflows/deploy-review-l2.yml
+++ b/.github/workflows/deploy-review-l2.yml
@@ -2,6 +2,31 @@ name: Deploy review environment (L2)
 
 on:
   workflow_dispatch:
+    inputs:
+      envs_preset:
+          description: ENVs preset
+          required: false
+          default: ""
+          type: choice
+          options:
+            - none
+            - arbitrum
+            - arbitrum_nova
+            - base
+            - celo_alfajores
+            - garnet
+            - gnosis
+            - eth
+            - eth_sepolia
+            - eth_goerli
+            - optimism
+            - optimism_celestia
+            - optimism_sepolia
+            - polygon
+            - rootstock
+            - stability
+            - zkevm
+            - zksync
 
 jobs:
   make_slug:
@@ -23,6 +48,7 @@ jobs:
     uses: './.github/workflows/publish-image.yml'
     with:
         tags: ghcr.io/blockscout/frontend:review-${{ needs.make_slug.outputs.REF_SLUG }}
+        build_args: ENVS_PRESET=${{ inputs.envs_preset }}
     secrets: inherit
 
   deploy_review_l2:
diff --git a/.github/workflows/deploy-review.yml b/.github/workflows/deploy-review.yml
index c5edbc8c50..935c52b432 100644
--- a/.github/workflows/deploy-review.yml
+++ b/.github/workflows/deploy-review.yml
@@ -2,6 +2,31 @@ name: Deploy review environment
 
 on:
   workflow_dispatch:
+    inputs:
+      envs_preset:
+          description: ENVs preset
+          required: false
+          default: ""
+          type: choice
+          options:
+            - none
+            - arbitrum
+            - arbitrum_nova
+            - base
+            - celo_alfajores
+            - garnet
+            - gnosis
+            - eth
+            - eth_sepolia
+            - eth_goerli
+            - optimism
+            - optimism_celestia
+            - optimism_sepolia
+            - polygon
+            - rootstock
+            - stability
+            - zkevm
+            - zksync
 
 jobs:
   make_slug:
@@ -23,6 +48,7 @@ jobs:
     uses: './.github/workflows/publish-image.yml'
     with:
         tags: ghcr.io/blockscout/frontend:review-${{ needs.make_slug.outputs.REF_SLUG }}
+        build_args: ENVS_PRESET=${{ inputs.envs_preset }}
     secrets: inherit
 
   deploy_review:
diff --git a/.github/workflows/pre-release.yml b/.github/workflows/pre-release.yml
index c45cb9249d..05155cbd32 100644
--- a/.github/workflows/pre-release.yml
+++ b/.github/workflows/pre-release.yml
@@ -55,7 +55,10 @@ jobs:
             label_description: Tasks in pre-release right now
         secrets: inherit
 
+    # Temporary disable this step because it is broken
+    # There is an issue with building web3modal deps
     upload_source_maps:
         name: Upload source maps to Sentry
+        if: false
         uses: './.github/workflows/upload-source-maps.yml'
         secrets: inherit
diff --git a/.github/workflows/project-management.yml b/.github/workflows/project-management.yml
index ce53245267..1da733baeb 100644
--- a/.github/workflows/project-management.yml
+++ b/.github/workflows/project-management.yml
@@ -28,7 +28,7 @@ jobs:
             issues: "[${{ github.event.issue.number }}]"
         secrets: inherit
 
-    review_requested_issues:
+    pr_linked_issues:
         name: Get issues linked to PR
         runs-on: ubuntu-latest
         if: ${{ github.event.pull_request && github.event.action == 'review_requested' }}
@@ -76,14 +76,24 @@ jobs:
 
                     return issues;
 
-    review_requested_tasks:
+    issues_in_review:
         name: Update status for issues in review
-        needs: [ review_requested_issues ]
-        if: ${{ needs.review_requested_issues.outputs.issues }}
+        needs: [ pr_linked_issues ]
+        if: ${{ needs.pr_linked_issues.outputs.issues }}
         uses: './.github/workflows/update-project-cards.yml'
         secrets: inherit
         with:
             project_name: ${{ vars.PROJECT_NAME }}
             field_name: Status
             field_value: Review
-            issues: ${{ needs.review_requested_issues.outputs.issues }}
+            issues: ${{ needs.pr_linked_issues.outputs.issues }}
+
+    copy_labels:
+        name: Copy issues labels to pull request
+        needs: [ pr_linked_issues ]
+        if: ${{ needs.pr_linked_issues.outputs.issues }}
+        uses: './.github/workflows/copy-issues-labels.yml'
+        secrets: inherit
+        with:
+            pr_number: ${{ github.event.pull_request.number }}
+            issues: ${{ needs.pr_linked_issues.outputs.issues }}
diff --git a/.github/workflows/publish-image.yml b/.github/workflows/publish-image.yml
index ba0382b078..6895728156 100644
--- a/.github/workflows/publish-image.yml
+++ b/.github/workflows/publish-image.yml
@@ -7,6 +7,10 @@ on:
                 description: Image tags
                 required: false
                 type: string
+            build_args:
+                description: Build-time variables
+                required: false
+                type: string
             platforms:
                 description: Image platforms (you can specify multiple platforms separated by comma)
                 required: false
@@ -18,6 +22,10 @@ on:
                 description: Image tags
                 required: false
                 type: string
+            build_args:
+                description: Build-time variables
+                required: false
+                type: string
             platforms:
                 description: Image platforms (you can specify multiple platforms separated by comma)
                 required: false
@@ -72,4 +80,5 @@ jobs:
                     labels: ${{ steps.meta.outputs.labels }}
                     build-args: |
                         GIT_COMMIT_SHA=${{ env.SHORT_SHA }}
-                        GIT_TAG=${{ github.ref_type == 'tag' && github.ref_name || '' }}
\ No newline at end of file
+                        GIT_TAG=${{ github.ref_type == 'tag' && github.ref_name || '' }}
+                        ${{ inputs.build_args }}
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index fb0c863799..df2c0433b1 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -81,8 +81,11 @@ jobs:
         with:
             platforms: linux/amd64,linux/arm64/v8
 
+    # Temporary disable this step because it is broken
+    # There is an issue with building web3modal deps
     upload_source_maps:
         name: Upload source maps to Sentry
+        if: false
         needs: publish_image
         uses: './.github/workflows/upload-source-maps.yml'
         secrets: inherit
diff --git a/.gitignore b/.gitignore
index 4ee6adeee0..d1d6685c18 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,8 +15,8 @@
 # next.js
 /.next/
 /out/
-/public/assets/
-/public/envs.js
+/public/assets/envs.js
+/public/assets/configs
 /public/icons/sprite.svg
 /public/icons/README.md
 /analyze
@@ -28,6 +28,7 @@
 .DS_Store
 *.pem
 .tools
+grafana
 
 # debug
 npm-debug.log*
@@ -56,4 +57,7 @@ yarn-error.log*
 /playwright/envs.js
 /playwright/affected-tests.txt
 
-**.dec**
\ No newline at end of file
+**.dec**
+
+# build outputs
+/tools/preset-sync/index.js
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index ad9f96bd7f..b1d379bf3b 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -25,6 +25,27 @@
                 "instanceLimit": 1
             }
         },
+        {
+            "type": "shell",
+            "command": "yarn dev:preset:sync --name=${input:dev_config_preset}",
+            "problemMatcher": [],
+            "label": "dev preset sync",
+            "detail": "syncronize dev preset",
+            "presentation": {
+                "reveal": "always",
+                "panel": "shared",
+                "focus": true,
+                "close": false,
+                "revealProblems": "onProblem",
+            },
+            "icon": {
+                "color": "terminal.ansiMagenta",
+                "id": "repo-sync"
+            },
+            "runOptions": {
+                "instanceLimit": 1
+            }
+        },
 
         // CODE CHECKS
         {
@@ -337,20 +358,25 @@
             "description": "Choose dev server config preset:",
             "options": [
               "main",
-              "main.L2",
+              "localhost",
+              "arbitrum",
+              "base",
+              "celo_alfajores",
+              "garnet",
+              "gnosis",
               "eth",
               "eth_goerli",
-              "sepolia",
+              "eth_sepolia",
+              "optimism",
+              "optimism_celestia",
+              "optimism_sepolia",
               "polygon",
+              "rootstock_testnet",
+              "stability_testnet",
               "zkevm",
               "zksync",
-              "gnosis",
-              "rootstock",
-              "stability",
-              "poa_core",
-              "localhost",
             ],
             "default": "main"
         },
     ],
-}
\ No newline at end of file
+}
diff --git a/Dockerfile b/Dockerfile
index f38d68ebaa..a325403e92 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -3,7 +3,8 @@
 # *****************************
 FROM node:20.11.0-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
-RUN apk add --no-cache libc6-compat
+RUN apk add --no-cache libc6-compat python3 make g++
+RUN ln -sf /usr/bin/python3 /usr/bin/python
 
 ### APP
 # Install dependencies
@@ -33,11 +34,13 @@ RUN yarn --frozen-lockfile
 FROM node:20.11.0-alpine AS builder
 RUN apk add --no-cache --upgrade libc6-compat bash
 
-# pass commit sha and git tag to the app image
+# pass build args to env variables
 ARG GIT_COMMIT_SHA
 ENV NEXT_PUBLIC_GIT_COMMIT_SHA=$GIT_COMMIT_SHA
 ARG GIT_TAG
 ENV NEXT_PUBLIC_GIT_TAG=$GIT_TAG
+ARG NEXT_OPEN_TELEMETRY_ENABLED
+ENV NEXT_OPEN_TELEMETRY_ENABLED=$NEXT_OPEN_TELEMETRY_ENABLED
 
 ENV NODE_ENV production
 
@@ -48,7 +51,7 @@ COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
 # Generate .env.registry with ENVs list and save build args into .env file
-COPY --chmod=+x ./deploy/scripts/collect_envs.sh ./
+COPY --chmod=755 ./deploy/scripts/collect_envs.sh ./
 RUN ./collect_envs.sh ./docs/ENVS.md
 
 # Next.js collects completely anonymous telemetry data about general usage.
@@ -57,8 +60,8 @@ RUN ./collect_envs.sh ./docs/ENVS.md
 # ENV NEXT_TELEMETRY_DISABLED 1
 
 # Build app for production
-RUN yarn build
 RUN yarn svg:build-sprite
+RUN yarn build
 
 
 ### FEATURE REPORTER
@@ -102,14 +105,14 @@ COPY --from=builder /app/deploy/tools/feature-reporter/index.js ./feature-report
 
 # Copy scripts
 ## Entripoint
-COPY --chmod=+x ./deploy/scripts/entrypoint.sh .
+COPY --chmod=755 ./deploy/scripts/entrypoint.sh .
 ## ENV validator and client script maker
-COPY --chmod=+x ./deploy/scripts/validate_envs.sh .
-COPY --chmod=+x ./deploy/scripts/make_envs_script.sh .
+COPY --chmod=755 ./deploy/scripts/validate_envs.sh .
+COPY --chmod=755 ./deploy/scripts/make_envs_script.sh .
 ## Assets downloader
-COPY --chmod=+x ./deploy/scripts/download_assets.sh .
+COPY --chmod=755 ./deploy/scripts/download_assets.sh .
 ## Favicon generator
-COPY --chmod=+x ./deploy/scripts/favicon_generator.sh .
+COPY --chmod=755 ./deploy/scripts/favicon_generator.sh .
 COPY ./deploy/tools/favicon-generator ./deploy/tools/favicon-generator
 RUN ["chmod", "-R", "777", "./deploy/tools/favicon-generator"]
 RUN ["chmod", "-R", "777", "./public"]
@@ -118,6 +121,11 @@ RUN ["chmod", "-R", "777", "./public"]
 COPY --from=builder /app/.env.registry .
 COPY --from=builder /app/.env .
 
+# Copy ENVs presets
+ARG ENVS_PRESET
+ENV ENVS_PRESET=$ENVS_PRESET
+COPY ./configs/envs ./configs/envs
+
 # Automatically leverage output traces to reduce image size
 # https://nextjs.org/docs/advanced-features/output-file-tracing
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
new file mode 100644
index 0000000000..30ec4f8b6f
--- /dev/null
+++ b/RELEASE_NOTES.md
@@ -0,0 +1,33 @@
+## 🚀 New Features
+-  Description of the new feature 1.
+-  Description of the new feature 2.
+
+## 🐛 Bug Fixes
+-  Description of the bug fix 1.
+-  Description of the bug fix 2.
+
+## ⚡ Performance Improvements
+-  Description of the performance improvement 1.
+-  Description of the performance improvement 2.
+
+## 📦 Dependencies updates
+-  Updated dependency: PackageName 1 to version x.x.x.
+-  Updated dependency: PackageName 2 to version x.x.x.
+
+## ✨ Other Changes
+- Another minor change 1.
+- Another minor change 2.
+
+## 🚨 Changes in ENV variables
+-  Added new environment variable: ENV_VARIABLE_NAME with value.
+-  Updated existing environment variable: ENV_VARIABLE_NAME to new value.
+
+**Full list of the ENV variables**: [v1.2.3](https://github.com/blockscout/frontend/blob/v1.2.3/docs/ENVS.md)
+
+## 🦄 New Contributors
+- @contributor1 made their first contribution in https://github.com/blockscout/frontend/pull/1
+- @contributor2 made their first contribution in https://github.com/blockscout/frontend/pull/2
+
+---
+
+**Full Changelog**: https://github.com/blockscout/frontend/compare/v1.2.2...v1.2.3
diff --git a/configs/app/chain.ts b/configs/app/chain.ts
index 1ec156e4e0..56971abda6 100644
--- a/configs/app/chain.ts
+++ b/configs/app/chain.ts
@@ -1,7 +1,22 @@
+import type { RollupType } from 'types/client/rollup';
+import type { NetworkVerificationType, NetworkVerificationTypeEnvs } from 'types/networks';
+
 import { getEnvValue } from './utils';
 
 const DEFAULT_CURRENCY_DECIMALS = 18;
 
+const rollupType = getEnvValue('NEXT_PUBLIC_ROLLUP_TYPE') as RollupType;
+
+const verificationType: NetworkVerificationType = (() => {
+  if (rollupType === 'arbitrum') {
+    return 'posting';
+  }
+  if (rollupType === 'zkEvm') {
+    return 'sequencing';
+  }
+  return getEnvValue('NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE') as NetworkVerificationTypeEnvs || 'mining';
+})();
+
 const chain = Object.freeze({
   id: getEnvValue('NEXT_PUBLIC_NETWORK_ID'),
   name: getEnvValue('NEXT_PUBLIC_NETWORK_NAME'),
@@ -12,12 +27,14 @@ const chain = Object.freeze({
     symbol: getEnvValue('NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL'),
     decimals: Number(getEnvValue('NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS')) || DEFAULT_CURRENCY_DECIMALS,
   },
-  governanceToken: {
-    symbol: getEnvValue('NEXT_PUBLIC_NETWORK_GOVERNANCE_TOKEN_SYMBOL'),
+  secondaryCoin: {
+    symbol: getEnvValue('NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL'),
   },
+  hasMultipleGasCurrencies: getEnvValue('NEXT_PUBLIC_NETWORK_MULTIPLE_GAS_CURRENCIES') === 'true',
+  tokenStandard: getEnvValue('NEXT_PUBLIC_NETWORK_TOKEN_STANDARD_NAME') || 'ERC',
   rpcUrl: getEnvValue('NEXT_PUBLIC_NETWORK_RPC_URL'),
   isTestnet: getEnvValue('NEXT_PUBLIC_IS_TESTNET') === 'true',
-  verificationType: getEnvValue('NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE') || 'mining',
+  verificationType,
 });
 
 export default chain;
diff --git a/configs/app/features/addressMetadata.ts b/configs/app/features/addressMetadata.ts
new file mode 100644
index 0000000000..5ca5b78ada
--- /dev/null
+++ b/configs/app/features/addressMetadata.ts
@@ -0,0 +1,27 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+
+const apiHost = getEnvValue('NEXT_PUBLIC_METADATA_SERVICE_API_HOST');
+
+const title = 'Address metadata';
+
+const config: Feature<{ api: { endpoint: string; basePath: string } }> = (() => {
+  if (apiHost) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      api: {
+        endpoint: apiHost,
+        basePath: '',
+      },
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/deFiDropdown.ts b/configs/app/features/deFiDropdown.ts
new file mode 100644
index 0000000000..62b8fdcd14
--- /dev/null
+++ b/configs/app/features/deFiDropdown.ts
@@ -0,0 +1,21 @@
+import type { Feature } from './types';
+import type { DeFiDropdownItem } from 'types/client/deFiDropdown';
+
+import { getEnvValue, parseEnvJson } from '../utils';
+
+const items = parseEnvJson<Array<DeFiDropdownItem>>(getEnvValue('NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS')) || [];
+
+const title = 'DeFi dropdown';
+
+const config: Feature<{ items: Array<DeFiDropdownItem> }> = items.length > 0 ?
+  Object.freeze({
+    title,
+    isEnabled: true,
+    items,
+  }) :
+  Object.freeze({
+    title,
+    isEnabled: false,
+  });
+
+export default config;
diff --git a/configs/app/features/faultProofSystem.ts b/configs/app/features/faultProofSystem.ts
new file mode 100644
index 0000000000..38a8f021db
--- /dev/null
+++ b/configs/app/features/faultProofSystem.ts
@@ -0,0 +1,22 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+import rollup from './rollup';
+
+const title = 'Fault proof system';
+
+const config: Feature<{ isEnabled: true }> = (() => {
+  if (rollup.isEnabled && rollup.type === 'optimistic' && getEnvValue('NEXT_PUBLIC_FAULT_PROOF_ENABLED') === 'true') {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/getGasButton.ts b/configs/app/features/getGasButton.ts
new file mode 100644
index 0000000000..db392f3c9a
--- /dev/null
+++ b/configs/app/features/getGasButton.ts
@@ -0,0 +1,35 @@
+import type { Feature } from './types';
+import type { GasRefuelProviderConfig } from 'types/client/gasRefuelProviderConfig';
+
+import chain from '../chain';
+import { getEnvValue, parseEnvJson } from '../utils';
+import marketplace from './marketplace';
+
+const value = parseEnvJson<GasRefuelProviderConfig>(getEnvValue('NEXT_PUBLIC_GAS_REFUEL_PROVIDER_CONFIG'));
+
+const title = 'Get gas button';
+
+const config: Feature<{
+  name: string;
+  logoUrl?: string;
+  url: string;
+  dappId?: string;
+}> = (() => {
+  if (value) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      name: value.name,
+      logoUrl: value.logo,
+      url: value.url_template.replace('{chainId}', chain.id || ''),
+      dappId: marketplace.isEnabled ? value.dapp_id : undefined,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/graphqlApiDocs.ts b/configs/app/features/graphqlApiDocs.ts
index 09285ac898..d26c3bfde3 100644
--- a/configs/app/features/graphqlApiDocs.ts
+++ b/configs/app/features/graphqlApiDocs.ts
@@ -7,6 +7,14 @@ const defaultTxHash = getEnvValue('NEXT_PUBLIC_GRAPHIQL_TRANSACTION');
 const title = 'GraphQL API documentation';
 
 const config: Feature<{ defaultTxHash: string | undefined }> = (() => {
+
+  if (defaultTxHash === 'none') {
+    return Object.freeze({
+      title,
+      isEnabled: false,
+    });
+  }
+
   return Object.freeze({
     title,
     isEnabled: true,
diff --git a/configs/app/features/index.ts b/configs/app/features/index.ts
index fbe1a6a949..24ea0a2088 100644
--- a/configs/app/features/index.ts
+++ b/configs/app/features/index.ts
@@ -1,5 +1,6 @@
 export { default as account } from './account';
 export { default as addressVerification } from './addressVerification';
+export { default as addressMetadata } from './addressMetadata';
 export { default as adsBanner } from './adsBanner';
 export { default as adsText } from './adsText';
 export { default as beaconChain } from './beaconChain';
@@ -7,17 +8,24 @@ export { default as bridgedTokens } from './bridgedTokens';
 export { default as blockchainInteraction } from './blockchainInteraction';
 export { default as csvExport } from './csvExport';
 export { default as dataAvailability } from './dataAvailability';
+export { default as deFiDropdown } from './deFiDropdown';
+export { default as faultProofSystem } from './faultProofSystem';
 export { default as gasTracker } from './gasTracker';
+export { default as getGasButton } from './getGasButton';
 export { default as googleAnalytics } from './googleAnalytics';
 export { default as graphqlApiDocs } from './graphqlApiDocs';
 export { default as growthBook } from './growthBook';
 export { default as marketplace } from './marketplace';
 export { default as metasuites } from './metasuites';
 export { default as mixpanel } from './mixpanel';
+export { default as mudFramework } from './mudFramework';
+export { default as multichainButton } from './multichainButton';
 export { default as nameService } from './nameService';
+export { default as publicTagsSubmission } from './publicTagsSubmission';
 export { default as restApiDocs } from './restApiDocs';
 export { default as rollup } from './rollup';
 export { default as safe } from './safe';
+export { default as saveOnGas } from './saveOnGas';
 export { default as sentry } from './sentry';
 export { default as sol2uml } from './sol2uml';
 export { default as stats } from './stats';
diff --git a/configs/app/features/marketplace.ts b/configs/app/features/marketplace.ts
index b136ce0d09..72f5d1ebde 100644
--- a/configs/app/features/marketplace.ts
+++ b/configs/app/features/marketplace.ts
@@ -11,6 +11,11 @@ const suggestIdeasFormUrl = getEnvValue('NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_F
 const categoriesUrl = getExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL');
 const adminServiceApiHost = getEnvValue('NEXT_PUBLIC_ADMIN_SERVICE_API_HOST');
 const securityReportsUrl = getExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL');
+const featuredApp = getEnvValue('NEXT_PUBLIC_MARKETPLACE_FEATURED_APP');
+const bannerContentUrl = getExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL');
+const bannerLinkUrl = getEnvValue('NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL');
+const ratingAirtableApiKey = getEnvValue('NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY');
+const ratingAirtableBaseId = getEnvValue('NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID');
 
 const title = 'Marketplace';
 
@@ -22,31 +27,43 @@ const config: Feature<(
   categoriesUrl: string | undefined;
   suggestIdeasFormUrl: string | undefined;
   securityReportsUrl: string | undefined;
-}
-> = (() => {
+  featuredApp: string | undefined;
+  banner: { contentUrl: string; linkUrl: string } | undefined;
+  rating: { airtableApiKey: string; airtableBaseId: string } | undefined;
+}> = (() => {
   if (enabled === 'true' && chain.rpcUrl && submitFormUrl) {
+    const props = {
+      submitFormUrl,
+      categoriesUrl,
+      suggestIdeasFormUrl,
+      securityReportsUrl,
+      featuredApp,
+      banner: bannerContentUrl && bannerLinkUrl ? {
+        contentUrl: bannerContentUrl,
+        linkUrl: bannerLinkUrl,
+      } : undefined,
+      rating: ratingAirtableApiKey && ratingAirtableBaseId ? {
+        airtableApiKey: ratingAirtableApiKey,
+        airtableBaseId: ratingAirtableBaseId,
+      } : undefined,
+    };
+
     if (configUrl) {
       return Object.freeze({
         title,
         isEnabled: true,
         configUrl,
-        submitFormUrl,
-        categoriesUrl,
-        suggestIdeasFormUrl,
-        securityReportsUrl,
+        ...props,
       });
     } else if (adminServiceApiHost) {
       return Object.freeze({
         title,
         isEnabled: true,
-        submitFormUrl,
-        categoriesUrl,
-        suggestIdeasFormUrl,
-        securityReportsUrl,
         api: {
           endpoint: adminServiceApiHost,
           basePath: '',
         },
+        ...props,
       });
     }
   }
diff --git a/configs/app/features/mudFramework.ts b/configs/app/features/mudFramework.ts
new file mode 100644
index 0000000000..86df2af34a
--- /dev/null
+++ b/configs/app/features/mudFramework.ts
@@ -0,0 +1,22 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+import rollup from './rollup';
+
+const title = 'MUD framework';
+
+const config: Feature<{ isEnabled: true }> = (() => {
+  if (rollup.isEnabled && rollup.type === 'optimistic' && getEnvValue('NEXT_PUBLIC_HAS_MUD_FRAMEWORK') === 'true') {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/multichainButton.ts b/configs/app/features/multichainButton.ts
new file mode 100644
index 0000000000..47b1433d05
--- /dev/null
+++ b/configs/app/features/multichainButton.ts
@@ -0,0 +1,29 @@
+import type { Feature } from './types';
+import type { MultichainProviderConfig } from 'types/client/multichainProviderConfig';
+
+import { getEnvValue, parseEnvJson } from '../utils';
+import marketplace from './marketplace';
+
+const value = parseEnvJson<MultichainProviderConfig>(getEnvValue('NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG'));
+
+const title = 'Multichain balance';
+
+const config: Feature<{name: string; logoUrl?: string; urlTemplate: string; dappId?: string }> = (() => {
+  if (value) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      name: value.name,
+      logoUrl: value.logo,
+      urlTemplate: value.url_template,
+      dappId: marketplace.isEnabled ? value.dapp_id : undefined,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/publicTagsSubmission.ts b/configs/app/features/publicTagsSubmission.ts
new file mode 100644
index 0000000000..296d5e143a
--- /dev/null
+++ b/configs/app/features/publicTagsSubmission.ts
@@ -0,0 +1,29 @@
+import type { Feature } from './types';
+
+import services from '../services';
+import { getEnvValue } from '../utils';
+import addressMetadata from './addressMetadata';
+
+const apiHost = getEnvValue('NEXT_PUBLIC_ADMIN_SERVICE_API_HOST');
+
+const title = 'Public tag submission';
+
+const config: Feature<{ api: { endpoint: string; basePath: string } }> = (() => {
+  if (services.reCaptcha.siteKey && addressMetadata.isEnabled && apiHost) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      api: {
+        endpoint: apiHost,
+        basePath: '',
+      },
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/restApiDocs.ts b/configs/app/features/restApiDocs.ts
index 281282ab05..ae25f05c0a 100644
--- a/configs/app/features/restApiDocs.ts
+++ b/configs/app/features/restApiDocs.ts
@@ -2,15 +2,23 @@ import type { Feature } from './types';
 
 import { getEnvValue } from '../utils';
 
-const specUrl = getEnvValue('NEXT_PUBLIC_API_SPEC_URL') || `https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml`;
+const DEFAULT_URL = `https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml`;
+const envValue = getEnvValue('NEXT_PUBLIC_API_SPEC_URL');
 
 const title = 'REST API documentation';
 
 const config: Feature<{ specUrl: string }> = (() => {
+  if (envValue === 'none') {
+    return Object.freeze({
+      title,
+      isEnabled: false,
+    });
+  }
+
   return Object.freeze({
     title,
     isEnabled: true,
-    specUrl,
+    specUrl: envValue || DEFAULT_URL,
   });
 })();
 
diff --git a/configs/app/features/rollup.ts b/configs/app/features/rollup.ts
index 2560734097..48c5422270 100644
--- a/configs/app/features/rollup.ts
+++ b/configs/app/features/rollup.ts
@@ -2,6 +2,8 @@ import type { Feature } from './types';
 import type { RollupType } from 'types/client/rollup';
 import { ROLLUP_TYPES } from 'types/client/rollup';
 
+import stripTrailingSlash from 'lib/stripTrailingSlash';
+
 import { getEnvValue } from '../utils';
 
 const type = (() => {
@@ -21,7 +23,7 @@ const config: Feature<{ type: RollupType; L1BaseUrl: string; L2WithdrawalUrl?: s
       title,
       isEnabled: true,
       type,
-      L1BaseUrl,
+      L1BaseUrl: stripTrailingSlash(L1BaseUrl),
       L2WithdrawalUrl,
     });
   }
diff --git a/configs/app/features/saveOnGas.ts b/configs/app/features/saveOnGas.ts
new file mode 100644
index 0000000000..64d24ed56f
--- /dev/null
+++ b/configs/app/features/saveOnGas.ts
@@ -0,0 +1,25 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+import marketplace from './marketplace';
+
+const title = 'Save on gas with GasHawk';
+
+const config: Feature<{
+  apiUrlTemplate: string;
+}> = (() => {
+  if (getEnvValue('NEXT_PUBLIC_SAVE_ON_GAS_ENABLED') === 'true' && marketplace.isEnabled) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      apiUrlTemplate: 'https://core.gashawk.io/apiv2/stats/address/<address>/savingsPotential/0x1',
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;
diff --git a/configs/app/features/sol2uml.ts b/configs/app/features/sol2uml.ts
index 06853e62d8..5a0ac2d4be 100644
--- a/configs/app/features/sol2uml.ts
+++ b/configs/app/features/sol2uml.ts
@@ -1,5 +1,7 @@
 import type { Feature } from './types';
 
+import stripTrailingSlash from 'lib/stripTrailingSlash';
+
 import { getEnvValue } from '../utils';
 
 const apiEndpoint = getEnvValue('NEXT_PUBLIC_VISUALIZE_API_HOST');
@@ -13,7 +15,7 @@ const config: Feature<{ api: { endpoint: string; basePath: string } }> = (() =>
       isEnabled: true,
       api: {
         endpoint: apiEndpoint,
-        basePath: '',
+        basePath: stripTrailingSlash(getEnvValue('NEXT_PUBLIC_VISUALIZE_API_BASE_PATH') || ''),
       },
     });
   }
diff --git a/configs/app/features/stats.ts b/configs/app/features/stats.ts
index b05f2f9659..d3a90ce061 100644
--- a/configs/app/features/stats.ts
+++ b/configs/app/features/stats.ts
@@ -1,5 +1,7 @@
 import type { Feature } from './types';
 
+import stripTrailingSlash from 'lib/stripTrailingSlash';
+
 import { getEnvValue } from '../utils';
 
 const apiEndpoint = getEnvValue('NEXT_PUBLIC_STATS_API_HOST');
@@ -13,7 +15,7 @@ const config: Feature<{ api: { endpoint: string; basePath: string } }> = (() =>
       isEnabled: true,
       api: {
         endpoint: apiEndpoint,
-        basePath: '',
+        basePath: stripTrailingSlash(getEnvValue('NEXT_PUBLIC_STATS_API_BASE_PATH') || ''),
       },
     });
   }
diff --git a/configs/app/meta.ts b/configs/app/meta.ts
index cf0f309534..3d7b777e03 100644
--- a/configs/app/meta.ts
+++ b/configs/app/meta.ts
@@ -1,13 +1,17 @@
 import app from './app';
 import { getEnvValue, getExternalAssetFilePath } from './utils';
 
-const defaultImageUrl = app.baseUrl + '/static/og_placeholder.png';
+const defaultImageUrl = '/static/og_placeholder.png';
 
 const meta = Object.freeze({
-  promoteBlockscoutInTitle: getEnvValue('NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE') || 'true',
+  promoteBlockscoutInTitle: getEnvValue('NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE') === 'false' ? false : true,
   og: {
     description: getEnvValue('NEXT_PUBLIC_OG_DESCRIPTION') || '',
-    imageUrl: getExternalAssetFilePath('NEXT_PUBLIC_OG_IMAGE_URL') || defaultImageUrl,
+    imageUrl: app.baseUrl + (getExternalAssetFilePath('NEXT_PUBLIC_OG_IMAGE_URL') || defaultImageUrl),
+    enhancedDataEnabled: getEnvValue('NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED') === 'true',
+  },
+  seo: {
+    enhancedDataEnabled: getEnvValue('NEXT_PUBLIC_SEO_ENHANCED_DATA_ENABLED') === 'true',
   },
 });
 
diff --git a/configs/app/ui.ts b/configs/app/ui.ts
index 7f6832bf1f..674580d944 100644
--- a/configs/app/ui.ts
+++ b/configs/app/ui.ts
@@ -1,8 +1,13 @@
 import type { ContractCodeIde } from 'types/client/contract';
-import { NAVIGATION_LINK_IDS, type NavItemExternal, type NavigationLinkId } from 'types/client/navigation-items';
-import type { ChainIndicatorId } from 'types/homepage';
+import { NAVIGATION_LINK_IDS, type NavItemExternal, type NavigationLinkId, type NavigationLayout } from 'types/client/navigation';
+import { HOME_STATS_WIDGET_IDS, type ChainIndicatorId, type HeroBannerConfig, type HomeStatsWidgetId } from 'types/homepage';
 import type { NetworkExplorer } from 'types/networks';
+import type { ColorThemeId } from 'types/settings';
+import type { FontFamily } from 'types/ui';
 
+import { COLOR_THEMES } from 'lib/settings/colorTheme';
+
+import * as features from './features';
 import * as views from './ui/views';
 import { getEnvValue, getExternalAssetFilePath, parseEnvJson } from './utils';
 
@@ -21,11 +26,34 @@ const hiddenLinks = (() => {
   return result;
 })();
 
-// eslint-disable-next-line max-len
-const HOMEPAGE_PLATE_BACKGROUND_DEFAULT = 'radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%), var(--chakra-colors-blue-400)';
+const homePageStats: Array<HomeStatsWidgetId> = (() => {
+  const parsedValue = parseEnvJson<Array<HomeStatsWidgetId>>(getEnvValue('NEXT_PUBLIC_HOMEPAGE_STATS'));
+
+  if (!Array.isArray(parsedValue)) {
+    const rollupFeature = features.rollup;
+
+    if (rollupFeature.isEnabled && [ 'zkEvm', 'zkSync', 'arbitrum' ].includes(rollupFeature.type)) {
+      return [ 'latest_batch', 'average_block_time', 'total_txs', 'wallet_addresses', 'gas_tracker' ];
+    }
+
+    return [ 'total_blocks', 'average_block_time', 'total_txs', 'wallet_addresses', 'gas_tracker' ];
+  }
+
+  return parsedValue.filter((item) => HOME_STATS_WIDGET_IDS.includes(item));
+})();
+
+const highlightedRoutes = (() => {
+  const parsedValue = parseEnvJson<Array<NavigationLinkId>>(getEnvValue('NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES'));
+  return Array.isArray(parsedValue) ? parsedValue : [];
+})();
+
+const defaultColorTheme = (() => {
+  const envValue = getEnvValue('NEXT_PUBLIC_COLOR_THEME_DEFAULT') as ColorThemeId | undefined;
+  return COLOR_THEMES.find((theme) => theme.id === envValue);
+})();
 
 const UI = Object.freeze({
-  sidebar: {
+  navigation: {
     logo: {
       'default': getExternalAssetFilePath('NEXT_PUBLIC_NETWORK_LOGO'),
       dark: getExternalAssetFilePath('NEXT_PUBLIC_NETWORK_LOGO_DARK'),
@@ -35,8 +63,10 @@ const UI = Object.freeze({
       dark: getExternalAssetFilePath('NEXT_PUBLIC_NETWORK_ICON_DARK'),
     },
     hiddenLinks,
+    highlightedRoutes,
     otherLinks: parseEnvJson<Array<NavItemExternal>>(getEnvValue('NEXT_PUBLIC_OTHER_LINKS')) || [],
     featuredNetworks: getExternalAssetFilePath('NEXT_PUBLIC_FEATURED_NETWORKS'),
+    layout: (getEnvValue('NEXT_PUBLIC_NAVIGATION_LAYOUT') || 'vertical') as NavigationLayout,
   },
   footer: {
     links: getExternalAssetFilePath('NEXT_PUBLIC_FOOTER_LINKS'),
@@ -45,11 +75,13 @@ const UI = Object.freeze({
   },
   homepage: {
     charts: parseEnvJson<Array<ChainIndicatorId>>(getEnvValue('NEXT_PUBLIC_HOMEPAGE_CHARTS')) || [],
+    stats: homePageStats,
+    heroBanner: parseEnvJson<HeroBannerConfig>(getEnvValue('NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG')),
+    // !!! DEPRECATED !!!
     plate: {
-      background: getEnvValue('NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND') || HOMEPAGE_PLATE_BACKGROUND_DEFAULT,
-      textColor: getEnvValue('NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR') || 'white',
+      background: getEnvValue('NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND'),
+      textColor: getEnvValue('NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR'),
     },
-    showAvgBlockTime: getEnvValue('NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME') === 'false' ? false : true,
   },
   views,
   indexingAlert: {
@@ -70,6 +102,14 @@ const UI = Object.freeze({
     items: parseEnvJson<Array<ContractCodeIde>>(getEnvValue('NEXT_PUBLIC_CONTRACT_CODE_IDES')) || [],
   },
   hasContractAuditReports: getEnvValue('NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS') === 'true' ? true : false,
+  colorTheme: {
+    'default': defaultColorTheme,
+  },
+  fonts: {
+    heading: parseEnvJson<FontFamily>(getEnvValue('NEXT_PUBLIC_FONT_FAMILY_HEADING')),
+    body: parseEnvJson<FontFamily>(getEnvValue('NEXT_PUBLIC_FONT_FAMILY_BODY')),
+  },
+  maxContentWidth: getEnvValue('NEXT_PUBLIC_MAX_CONTENT_WIDTH_ENABLED') === 'false' ? false : true,
 });
 
 export default UI;
diff --git a/configs/app/ui/views/address.ts b/configs/app/ui/views/address.ts
index 376708f729..fcc88c557b 100644
--- a/configs/app/ui/views/address.ts
+++ b/configs/app/ui/views/address.ts
@@ -1,3 +1,5 @@
+import type { SmartContractVerificationMethodExtra } from 'types/client/contract';
+import { SMART_CONTRACT_EXTRA_VERIFICATION_METHODS } from 'types/client/contract';
 import type { AddressViewId, IdenticonType } from 'types/views/address';
 import { ADDRESS_VIEWS_IDS, IDENTICON_TYPES } from 'types/views/address';
 
@@ -27,10 +29,26 @@ const hiddenViews = (() => {
   return result;
 })();
 
+const extraVerificationMethods: Array<SmartContractVerificationMethodExtra> = (() => {
+  const envValue = getEnvValue('NEXT_PUBLIC_VIEWS_CONTRACT_EXTRA_VERIFICATION_METHODS');
+  if (envValue === 'none') {
+    return [];
+  }
+
+  if (!envValue) {
+    return SMART_CONTRACT_EXTRA_VERIFICATION_METHODS;
+  }
+
+  const parsedMethods = parseEnvJson<Array<SmartContractVerificationMethodExtra>>(getEnvValue('NEXT_PUBLIC_VIEWS_CONTRACT_EXTRA_VERIFICATION_METHODS')) || [];
+
+  return SMART_CONTRACT_EXTRA_VERIFICATION_METHODS.filter((method) => parsedMethods.includes(method));
+})();
+
 const config = Object.freeze({
   identiconType,
   hiddenViews,
   solidityscanEnabled: getEnvValue('NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED') === 'true',
+  extraVerificationMethods,
 });
 
 export default config;
diff --git a/configs/app/utils.ts b/configs/app/utils.ts
index 5f24c8829f..b188d14e8d 100644
--- a/configs/app/utils.ts
+++ b/configs/app/utils.ts
@@ -5,7 +5,7 @@ export const replaceQuotes = (value: string | undefined) => value?.replaceAll('\
 
 export const getEnvValue = (envName: string) => {
   // eslint-disable-next-line no-restricted-properties
-  const envs = isBrowser() ? window.__envs : process.env;
+  const envs = (isBrowser() ? window.__envs : process.env) ?? {};
 
   if (isBrowser() && envs.NEXT_PUBLIC_APP_INSTANCE === 'pw') {
     const storageValue = localStorage.getItem(envName);
@@ -39,10 +39,22 @@ export const getExternalAssetFilePath = (envName: string) => {
 export const buildExternalAssetFilePath = (name: string, value: string) => {
   try {
     const fileName = name.replace(/^NEXT_PUBLIC_/, '').replace(/_URL$/, '').toLowerCase();
-    const url = new URL(value);
-    const fileExtension = url.pathname.match(regexp.FILE_EXTENSION)?.[1];
-    return `/assets/${ fileName }.${ fileExtension }`;
+
+    const fileExtension = getAssetFileExtension(value);
+    if (!fileExtension) {
+      throw new Error('Cannot get file path');
+    }
+    return `/assets/configs/${ fileName }.${ fileExtension }`;
   } catch (error) {
     return;
   }
 };
+
+function getAssetFileExtension(value: string) {
+  try {
+    const url = new URL(value);
+    return url.pathname.match(regexp.FILE_EXTENSION)?.[1];
+  } catch (error) {
+    return parseEnvJson(value) ? 'json' : undefined;
+  }
+}
diff --git a/configs/envs/.env.arbitrum b/configs/envs/.env.arbitrum
new file mode 100644
index 0000000000..a1ec2fef59
--- /dev/null
+++ b/configs/envs/.env.arbitrum
@@ -0,0 +1,44 @@
+# Set of ENVs for Arbitrum One network explorer
+# https://arbitrum.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn preset:sync --name=arbitrum"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=arbitrum.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x37c798810d49ba132b40efe7f4fdf6806a8fc58226bb5e185ddc91f896577abf
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgba(27, 74, 221, 1)
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_LOGOUT_URL=https://blockscout-arbitrum.us.auth0.com/v2/logout
+NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=ETH
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/arbitrum/pools'}}]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/arbitrum-one-icon-light.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/arbitrum-one-icon-dark.svg
+NEXT_PUBLIC_NETWORK_ID=42161
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/arbitrum-one-logo-light.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/arbitrum-one-logo-dark.svg
+NEXT_PUBLIC_NETWORK_NAME=Arbitrum One
+NEXT_PUBLIC_NETWORK_RPC_URL=https://arbitrum.llamarpc.com
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Arbitrum One
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/arbitrum-one.png
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth.blockscout.com
+NEXT_PUBLIC_ROLLUP_TYPE=arbitrum
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
\ No newline at end of file
diff --git a/configs/envs/.env.arbitrum_nova b/configs/envs/.env.arbitrum_nova
new file mode 100644
index 0000000000..c07ded0b8a
--- /dev/null
+++ b/configs/envs/.env.arbitrum_nova
@@ -0,0 +1,42 @@
+# Set of ENVs for Arbitrum One network explorer
+# https://arbitrum.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn preset:sync --name=arbitrum"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=arbitrum-nova.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x37c798810d49ba132b40efe7f4fdf6806a8fc58226bb5e185ddc91f896577abf
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgba(27, 74, 221, 1)
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_LOGOUT_URL=https://blockscout-arbitrum.us.auth0.com/v2/logout
+NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=ETH
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/arbitrum/pools'}}]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/arbitrum-nova-icon.svg
+NEXT_PUBLIC_NETWORK_ID=42170
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/arbitrum-nova.svg
+NEXT_PUBLIC_NETWORK_NAME=Arbitrum Nova
+NEXT_PUBLIC_NETWORK_RPC_URL=https://arbitrum.llamarpc.com
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Arbitrum Nova
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/arbitrum-nova.png
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth.blockscout.com
+NEXT_PUBLIC_ROLLUP_TYPE=arbitrum
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
\ No newline at end of file
diff --git a/configs/envs/.env.base b/configs/envs/.env.base
new file mode 100644
index 0000000000..2c9cdf6699
--- /dev/null
+++ b/configs/envs/.env.base
@@ -0,0 +1,66 @@
+# Set of ENVs for Base Mainnet network explorer
+# https://base.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn preset:sync --name=base"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={ "id": "728301", "width": "728", "height": "90" }
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={ "id": "728302", "width": "320", "height": "100" }
+NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER=adbutler
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=base.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swap','icon':'swap','dappId':'aerodrome'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'},{'text':'Get gas','icon':'gas','dappId':'smol-refuel'}]
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/base-mainnet.json
+NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/base-mainnet.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xfd5c5dae7b69fe29e61d19b9943e688aa0f1be1e983c4fba8fe985f90ff69d5f
+NEXT_PUBLIC_HAS_USER_OPS=true
+NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS=true
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=linear-gradient(136.9deg,rgb(107 94 236) 1.5%,rgb(0 82 255) 56.84%,rgb(82 62 231) 98.54%)
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_LOGOUT_URL=https://basechain.us.auth0.com/v2/logout
+NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/maxaleks/0d18fc309ff499075127b364cc69306d/raw/2a51f961a8c1b9f884f2ab7eed79d4b69330e1ae/peanut_protocol_banner.html
+NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://base.blockscout.com/apps/peanut-protocol
+NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
+NEXT_PUBLIC_MARKETPLACE_ENABLED=true
+NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-security-reports/default.json
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_METASUITES_ENABLED=true
+NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG={'name': 'zerion', 'dapp_id': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview?utm_source=blockscout&utm_medium=address', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'}
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/apps']
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/base/pools'}},{'title':'L2scan','baseUrl':'https://base.l2scan.co/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}},{'title':'Tenderly','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/base'}},{'title':'3xpl','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/3xpl.png','baseUrl':'https://3xpl.com/','paths':{'tx':'/base/transaction','address':'/base/address'}}]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/base.svg
+NEXT_PUBLIC_NETWORK_ID=8453
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/base.svg
+NEXT_PUBLIC_NETWORK_NAME=Base Mainnet
+NEXT_PUBLIC_NETWORK_RPC_URL=https://mainnet.base.org/
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Mainnet
+NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/base-mainnet.png
+NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://base.drpc.org?ref=559183','text':'Public RPC'}]
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth.blockscout.com/
+NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://bridge.base.org/withdraw
+NEXT_PUBLIC_ROLLUP_TYPE=optimistic
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-base.safe.global
+NEXT_PUBLIC_STATS_API_HOST=https://stats-l2-base-mainnet.k8s-prod-1.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE=gradient_avatar
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
\ No newline at end of file
diff --git a/configs/envs/.env.blackfort_testnet b/configs/envs/.env.blackfort_testnet
new file mode 100644
index 0000000000..eeaad00054
--- /dev/null
+++ b/configs/envs/.env.blackfort_testnet
@@ -0,0 +1,44 @@
+# Set of ENVs for BXN Testnet network explorer
+# https://blackfort-testnet.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=blackfort_testnet"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=blackfort-testnet.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/blackfort-testnet.json
+NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/blackfort.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xcb4140e22cde3412eb5aecdedf2403032c7a251f5c96b11122aca5b1b88ed953
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=linear-gradient(92deg, rgb(3, 150, 254) 0.24%, rgb(36, 209, 245) 98.31%)
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=TBXN
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=TBXN
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/blackfort.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/blackfort-dark.svg
+NEXT_PUBLIC_NETWORK_ID=4777
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/blackfort.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/blackfort-dark.svg
+NEXT_PUBLIC_NETWORK_NAME=BXN Testnet
+NEXT_PUBLIC_NETWORK_RPC_URL=https://testnet.blackfort.network/rpc
+NEXT_PUBLIC_NETWORK_SHORT_NAME=BXN Testnet
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/blackfort.png
+NEXT_PUBLIC_STATS_API_HOST=https://stats-blackfort-testnet.k8s.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE=blackfort
\ No newline at end of file
diff --git a/configs/envs/.env.celo_alfajores b/configs/envs/.env.celo_alfajores
new file mode 100644
index 0000000000..2934345c90
--- /dev/null
+++ b/configs/envs/.env.celo_alfajores
@@ -0,0 +1,40 @@
+# Set of ENVs for Celo Alfajores network explorer
+# https://celo-alfajores.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn preset:sync --name=celo_alfajores"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=celo-alfajores.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_GAS_TRACKER_ENABLED=false
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgba(252, 255, 82, 1)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgba(0, 0, 0, 1)
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=CELO
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=CELO
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/celo-icon-light.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/celo-icon-dark.svg
+NEXT_PUBLIC_NETWORK_ID=44787
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/celo-logo-light.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/celo-logo-dark.svg
+NEXT_PUBLIC_NETWORK_NAME=Celo Alfajores
+NEXT_PUBLIC_NETWORK_RPC_URL=https://alfajores-forno.celo-testnet.org
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Alfajores
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/celo.png
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_HOMEPAGE_STATS=['total_blocks','average_block_time','total_txs','wallet_addresses','gas_tracker','current_epoch']
\ No newline at end of file
diff --git a/configs/envs/.env.eth b/configs/envs/.env.eth
index 2715974d4b..0ea799c9a3 100644
--- a/configs/envs/.env.eth
+++ b/configs/envs/.env.eth
@@ -1,57 +1,65 @@
 # Set of ENVs for Ethereum network explorer
-# https://eth.blockscout.com/
+# https://eth.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn preset:sync --name=eth"
 
-# app configuration
+# Local ENVs
 NEXT_PUBLIC_APP_PROTOCOL=http
 NEXT_PUBLIC_APP_HOST=localhost
 NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
-# blockchain parameters
-NEXT_PUBLIC_NETWORK_NAME=Ethereum
-NEXT_PUBLIC_NETWORK_SHORT_NAME=ETH
-NEXT_PUBLIC_NETWORK_ID=1
-NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
-NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
-NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
-NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
-NEXT_PUBLIC_NETWORK_RPC_URL=https://eth.llamarpc.com
-
-# api configuration
-NEXT_PUBLIC_API_HOST=eth.blockscout.com
+# Instance ENVs
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={ "id": "728471", "width": "728", "height": "90" }
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={ "id": "728470", "width": "320", "height": "100" }
+NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER=adbutler
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
 NEXT_PUBLIC_API_BASE_PATH=/
-
-# ui config
-## homepage
-NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs', 'coin_price', 'market_cap']
-## sidebar
-NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/eth.json
-## footer
-##views
-NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES=[{'name':'OpenSea','collection_url':'https://opensea.io/assets/ethereum/{hash}','instance_url':'https://opensea.io/assets/ethereum/{hash}/{id}','logo_url':'https://opensea.io/static/images/logos/opensea-logo.svg'},{'name':'LooksRare','collection_url':'https://looksrare.org/collections/{hash}','instance_url':'https://looksrare.org/collections/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/looks-rare.png'}]
-## misc
-NEXT_PUBLIC_NETWORK_EXPLORERS="[{'title':'Etherscan','logo':'https://github.com/blockscout/frontend-configs/blob/main/configs/explorer-logos/etherscan.png?raw=true','baseUrl':'https://etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}, {'title':'Blockchair','logo':'https://github.com/blockscout/frontend-configs/blob/main/configs/explorer-logos/blockchair.png?raw=true','baseUrl':'https://blockchair.com/','paths':{'tx':'/ethereum/transaction','address':'/ethereum/address','token':'/ethereum/erc-20/token','block':'/ethereum/block'}},{'title':'Sentio','logo':'https://github.com/blockscout/frontend-configs/blob/main/configs/explorer-logos/sentio.png?raw=true','baseUrl':'https://app.sentio.xyz/','paths':{'tx':'/tx/1','address':'/contract/1'}}, {'title':'Tenderly','logo':'https://github.com/blockscout/frontend-configs/blob/main/configs/explorer-logos/tenderly.png?raw=true','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/mainnet'}}, {'title':'0xPPL','logo':'https://github.com/blockscout/frontend-configs/blob/main/configs/explorer-logos/0xPPl.png?raw=true','baseUrl':'https://0xppl.com','paths':{'tx':'/Ethereum/tx','address':'/','token':'/c/Ethereum'}}, {'title':'3xpl','logo':'https://github.com/blockscout/frontend-configs/blob/main/configs/explorer-logos/3xpl.png?raw=true','baseUrl':'https://3xpl.com/','paths':{'tx':'/ethereum/transaction','address':'/ethereum/address'}} ]"
-
-# app features
-NEXT_PUBLIC_APP_ENV=development
-NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
+NEXT_PUBLIC_API_HOST=eth.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED=true
+NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swap','icon':'swap','dappId':'cow-swap'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'},{'text':'Get gas','icon':'gas','dappId':'smol-refuel'}]
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/eth.json
+NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/eth-mainnet.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xd01175f1efa23f36c5579b3c13e2bbd0885017643a7efef5cbcb6b474384dfa8
 NEXT_PUBLIC_HAS_BEACON_CHAIN=true
+NEXT_PUBLIC_HAS_USER_OPS=true
+NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS=true
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs', 'coin_price', 'market_cap']
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
-NEXT_PUBLIC_AUTH_URL=http://localhost:3000
-NEXT_PUBLIC_LOGOUT_URL=https://blockscoutcom.us.auth0.com/v2/logout
-NEXT_PUBLIC_STATS_API_HOST=https://stats-eth-main.k8s-prod-1.blockscout.com
-NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
-NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
-NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
-NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
-NEXT_PUBLIC_AD_BANNER_PROVIDER=hype
-NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-mainnet.safe.global
-NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
-NEXT_PUBLIC_MARKETPLACE_ENABLED=true
-NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
+NEXT_PUBLIC_LOGOUT_URL=https://ethereum-mainnet.us.auth0.com/v2/logout
 NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
+NEXT_PUBLIC_MARKETPLACE_ENABLED=true
+NEXT_PUBLIC_MARKETPLACE_FEATURED_APP=gearbox-protocol
+NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-security-reports/default.json
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
 NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
+NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID=appGkvtmKI7fXE4Vs
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_METASUITES_ENABLED=true
+NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG={'name': 'zerion', 'dapp_id': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview?utm_source=blockscout&utm_medium=address', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'}
+NEXT_PUBLIC_GAS_REFUEL_PROVIDER_CONFIG={'name': 'Need gas?', 'dapp_id': 'smol-refuel', 'url_template': 'https://smolrefuel.com/?outboundChain={chainId}&partner=blockscout&utm_source=blockscout&utm_medium=address&disableBridges=true', 'logo': 'https://blockscout-content.s3.amazonaws.com/smolrefuel-logo-action-button.png'}
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/apps']
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/eth/pools'}},{'title':'Etherscan','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/etherscan.png','baseUrl':'https://etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}, {'title':'blockchair','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/blockchair.png','baseUrl':'https://blockchair.com/','paths':{'tx':'/ethereum/transaction','address':'/ethereum/address','token':'/ethereum/erc-20/token','block':'/ethereum/block'}},{'title':'sentio','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/sentio.png','baseUrl':'https://app.sentio.xyz/','paths':{'tx':'/tx/1','address':'/contract/1'}}, {'title':'Tenderly','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/mainnet'}}, {'title':'0xPPL','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/0xPPL.png','baseUrl':'https://0xppl.com','paths':{'tx':'/Ethereum/tx','address':'/','token':'/c/Ethereum'}}, {'title':'3xpl','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/3xpl.png','baseUrl':'https://3xpl.com/','paths':{'tx':'/ethereum/transaction','address':'/ethereum/address'}} ]
+NEXT_PUBLIC_NETWORK_ID=1
+NEXT_PUBLIC_NETWORK_NAME=Ethereum
+NEXT_PUBLIC_NETWORK_RPC_URL=https://eth.drpc.org
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Ethereum
+NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/eth.jpg
+NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://eth.drpc.org?ref=559183','text':'Public RPC'}]
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-mainnet.safe.global
+NEXT_PUBLIC_SENTRY_ENABLE_TRACING=true
+NEXT_PUBLIC_SEO_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_STATS_API_HOST=https://stats-eth-main.k8s-prod-1.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
 NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
-
-#meta
-NEXT_PUBLIC_OG_IMAGE_URL=https://github.com/blockscout/frontend-configs/blob/main/configs/og-images/eth.jpg?raw=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_SAVE_ON_GAS_ENABLED=true
diff --git a/configs/envs/.env.eth_sepolia b/configs/envs/.env.eth_sepolia
new file mode 100644
index 0000000000..1304b37c72
--- /dev/null
+++ b/configs/envs/.env.eth_sepolia
@@ -0,0 +1,65 @@
+# Set of ENVs for Sepolia network explorer
+# https://eth-sepolia.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn preset:sync --name=eth_sepolia"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={ "id": "632019", "width": "728", "height": "90" }
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={ "id": "632018", "width": "320", "height": "100" }
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=eth-sepolia.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED=true
+NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swap','icon':'swap','dappId':'cow-swap'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'},{'text':'Get gas','icon':'gas','dappId':'smol-refuel'}]
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/eth-sepolia.json
+NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/sepolia.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xbf69c7abc4fee283b59a9633dadfdaedde5c5ee0fba3e80a08b5b8a3acbd4363
+NEXT_PUBLIC_HAS_BEACON_CHAIN=true
+NEXT_PUBLIC_HAS_USER_OPS=true
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgba(51, 53, 67, 1)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgba(165, 252, 122, 1)
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_LOGOUT_URL=https://blockscout-goerli.us.auth0.com/v2/logout
+NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
+NEXT_PUBLIC_MARKETPLACE_ENABLED=true
+NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-security-reports/default.json
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_METASUITES_ENABLED=true
+NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG={'name': 'zerion', 'dapp_id': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview?utm_source=blockscout&utm_medium=address', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'}
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/apps']
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/sepolia-testnet/pools'}},{'title':'Etherscan','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/etherscan.png','baseUrl':'https://sepolia.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}, {'title':'Tenderly','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/sepolia'}} ]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/sepolia.png
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/sepolia.png
+NEXT_PUBLIC_NETWORK_ID=11155111
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/sepolia.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/sepolia.svg
+NEXT_PUBLIC_NETWORK_NAME=Sepolia
+NEXT_PUBLIC_NETWORK_RPC_URL=https://eth-sepolia.public.blastapi.io
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Sepolia
+NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/sepolia-testnet.png
+NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://sepolia.drpc.org?ref=559183','text':'Public RPC'}]
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-sepolia.safe.global
+NEXT_PUBLIC_SENTRY_ENABLE_TRACING=true
+NEXT_PUBLIC_STATS_API_HOST=https://stats-sepolia.k8s.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=noves
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
\ No newline at end of file
diff --git a/configs/envs/.env.garnet b/configs/envs/.env.garnet
new file mode 100644
index 0000000000..a6763934bc
--- /dev/null
+++ b/configs/envs/.env.garnet
@@ -0,0 +1,50 @@
+# Set of ENVs for Garnet (dev only)
+# https://https://explorer.garnetchain.com//
+
+# app configuration
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+
+# blockchain parameters
+NEXT_PUBLIC_NETWORK_NAME="Garnet Testnet"
+NEXT_PUBLIC_NETWORK_ID=17069
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_RPC_URL=https://partner-rpc.garnetchain.com/tireless-strand-dreamt-overcome
+
+# api configuration
+NEXT_PUBLIC_API_HOST=explorer.garnetchain.com
+NEXT_PUBLIC_API_BASE_PATH=/
+
+# ui config
+## homepage
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+## views
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+# app features
+NEXT_PUBLIC_APP_INSTANCE=local
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_AUTH_URL=http://localhost:3000/login
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+NEXT_PUBLIC_LOGOUT_URL=https://blockscoutcom.us.auth0.com/v2/logout
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/redstone-testnet.json
+NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/redstone.json
+NEXT_PUBLIC_AD_BANNER_PROVIDER=none
+## sidebar
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/garnet.svg
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/garnet.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/garnet-dark.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/garnet-dark.svg
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgb(169, 31, 47)
+NEXT_PUBLIC_OG_DESCRIPTION="Redstone is the home for onchain games, worlds, and other MUD applications"
+# rollup
+NEXT_PUBLIC_ROLLUP_TYPE=optimistic
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth-holesky.blockscout.com/
+NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://garnet.qry.live/withdraw
+NEXT_PUBLIC_HAS_MUD_FRAMEWORK=true
\ No newline at end of file
diff --git a/configs/envs/.env.gnosis b/configs/envs/.env.gnosis
index 1e20f6c303..fad2dde745 100644
--- a/configs/envs/.env.gnosis
+++ b/configs/envs/.env.gnosis
@@ -1,53 +1,69 @@
-# Set of ENVs for Gnosis network explorer
-# https://gnosis.blockscout.com/
+# Set of ENVs for Gnosis chain network explorer
+# https://gnosis.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn preset:sync --name=gnosis"
 
-# app configuration
+# Local ENVs
 NEXT_PUBLIC_APP_PROTOCOL=http
 NEXT_PUBLIC_APP_HOST=localhost
 NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
-# blockchain parameters
-NEXT_PUBLIC_NETWORK_NAME=Gnosis
-NEXT_PUBLIC_NETWORK_SHORT_NAME=Gnosis
-NEXT_PUBLIC_NETWORK_ID=100
-NEXT_PUBLIC_NETWORK_CURRENCY_NAME=xDAI
-NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=xDAI
-NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
-NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
-NEXT_PUBLIC_NETWORK_RPC_URL=https://rpc.gnosischain.com
-
-# api configuration
-NEXT_PUBLIC_API_HOST=gnosis.blockscout.com
+# Instance ENVs
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={'id':'523705','width':'728','height':'90'}
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={'id':'539876','width':'320','height':'100'}
+NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER=adbutler
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
 NEXT_PUBLIC_API_BASE_PATH=/
-
-# ui config
-## homepage
-NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
-NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND="rgb(46, 74, 60)"
-NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR="rgb(255, 255, 255)"
-## sidebar
+NEXT_PUBLIC_API_HOST=gnosis.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_BEACON_CHAIN_CURRENCY_SYMBOL=GNO
+NEXT_PUBLIC_BRIDGED_TOKENS_BRIDGES=[{'type':'omni','title':'OmniBridge','short_title':'OMNI'},{'type':'amb','title':'Arbitrary Message Bridge','short_title':'AMB'}]
+NEXT_PUBLIC_BRIDGED_TOKENS_CHAINS=[{'id':'1','title':'Ethereum','short_title':'ETH','base_url':'https://eth.blockscout.com/token/'},{'id':'56','title':'Binance Smart Chain','short_title':'BSC','base_url':'https://bscscan.com/token/'},{'id':'99','title':'POA','short_title':'POA','base_url':'https://blockscout.com/poa/core/token/'}]
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED=true
+NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swap','icon':'swap','dappId':'cow-swap'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'},{'text':'Get gas','icon':'gas','dappId':'smol-refuel'}]
 NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/gnosis-chain-mainnet.json
-NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/gnosis.svg
-NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/gnosis.svg
-## footer
 NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/gnosis.json
-## views
-## misc
-
-# app features
-NEXT_PUBLIC_APP_ENV=development
 NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x082762f95047d39d612daafec832f88163f3815fde4ddd8944f2a5198a396e0f
-# NEXT_PUBLIC_BEACON_CHAIN_CURRENCY_SYMBOL=GNO
+NEXT_PUBLIC_HAS_BEACON_CHAIN=true
+NEXT_PUBLIC_HAS_USER_OPS=true
+NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS=true
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs', 'tvl']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgb(46, 74, 60)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgb(255, 255, 255)
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
-NEXT_PUBLIC_LOGOUT_URL=https://blockscoutcom.us.auth0.com/v2/logout
-NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace/gnosis-chain.json
-NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/shrmiO9mDGJoPNmJe
-NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
-NEXT_PUBLIC_WEB3_WALLETS=['token_pocket','metamask']
-NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
-NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
-NEXT_PUBLIC_BRIDGED_TOKENS_CHAINS=[{'id':'1','title':'Ethereum','short_title':'ETH','base_url':'https://eth.blockscout.com/token/'},{'id':'56','title':'Binance Smart Chain','short_title':'BSC','base_url':'https://bscscan.com/token/'},{'id':'99','title':'POA','short_title':'POA','base_url':'https://blockscout.com/poa/core/token/'}]
-NEXT_PUBLIC_BRIDGED_TOKENS_BRIDGES=[{'type':'omni','title':'OmniBridge','short_title':'OMNI'},{'type':'amb','title':'Arbitrary Message Bridge','short_title':'AMB'}]
-
-#meta
-NEXT_PUBLIC_OG_IMAGE_URL=https://github.com/blockscout/frontend-configs/blob/main/configs/og-images/polygon-mainnet.png?raw=true
+NEXT_PUBLIC_LOGOUT_URL=https://login.blockscout.com/v2/logout
+NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/maxaleks/0d18fc309ff499075127b364cc69306d/raw/2a51f961a8c1b9f884f2ab7eed79d4b69330e1ae/peanut_protocol_banner.html
+NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://gnosis.blockscout.com/apps/peanut-protocol
+NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
+NEXT_PUBLIC_MARKETPLACE_ENABLED=true
+NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-security-reports/default.json
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_METASUITES_ENABLED=true
+NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG={'name': 'zerion', 'dapp_id': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview?utm_source=blockscout&utm_medium=address', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'}
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/apps']
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=XDAI
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=XDAI
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/xdai/pools'}},{'title':'Tenderly','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/gnosis-chain'}},{'title':'3xpl','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/3xpl.png','baseUrl':'https://3xpl.com/','paths':{'tx':'/gnosis-chain/transaction','address':'/gnosis-chain/address'}}]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/gnosis.svg
+NEXT_PUBLIC_NETWORK_ID=100
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/gnosis.svg
+NEXT_PUBLIC_NETWORK_NAME=Gnosis chain
+NEXT_PUBLIC_NETWORK_RPC_URL=https://rpc.gnosischain.com
+NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL=GNO
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Gnosis chain
+NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/gnosis-chain-mainnet.png
+NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://gnosis.drpc.org?ref=559183','text':'Public RPC'}]
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-gnosis-chain.safe.global
+NEXT_PUBLIC_STATS_API_HOST=https://stats-gnosis-mainnet.k8s-prod-1.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
\ No newline at end of file
diff --git a/configs/envs/.env.jest b/configs/envs/.env.jest
index e1f80c7e75..abe2107a80 100644
--- a/configs/envs/.env.jest
+++ b/configs/envs/.env.jest
@@ -24,7 +24,6 @@ NEXT_PUBLIC_API_BASE_PATH=/
 # ui config
 ## homepage
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cap']
-NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME=true
 NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=
 ## sidebar
 NEXT_PUBLIC_NETWORK_LOGO=
diff --git a/configs/envs/.env.main b/configs/envs/.env.main
index 48eee58328..8303446fc1 100644
--- a/configs/envs/.env.main
+++ b/configs/envs/.env.main
@@ -1,58 +1,68 @@
-# Set of ENVs for Develompent network explorer
-# https://blockscout-main.k8s-dev.blockscout.com/
+# Set of ENVs for Sepolia network explorer
+# https://eth-sepolia.k8s-dev.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn preset:sync --name=main"
 
-# app configuration
+# Local ENVs
 NEXT_PUBLIC_APP_PROTOCOL=http
 NEXT_PUBLIC_APP_HOST=localhost
 NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
-# blockchain parameters
-NEXT_PUBLIC_NETWORK_NAME=Goerli
-NEXT_PUBLIC_NETWORK_SHORT_NAME=Goerli
-NEXT_PUBLIC_NETWORK_ID=5
-NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
-NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
-NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
-NEXT_PUBLIC_NETWORK_GOVERNANCE_TOKEN_SYMBOL=ETH
-NEXT_PUBLIC_NETWORK_RPC_URL=https://rpc.ankr.com/eth_goerli
-NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
-NEXT_PUBLIC_IS_TESTNET=true
-
-# api configuration
-NEXT_PUBLIC_API_HOST=blockscout-main.k8s-dev.blockscout.com
+# Instance ENVs
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={ "id": "632019", "width": "728", "height": "90" }
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={ "id": "632018", "width": "320", "height": "100" }
+NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER=adbutler
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs-test.k8s-dev.blockscout.com
 NEXT_PUBLIC_API_BASE_PATH=/
-
-# ui config
-## homepage
+NEXT_PUBLIC_API_HOST=eth-sepolia.k8s-dev.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info-test.k8s-dev.blockscout.com
+NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED=true
+NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swap','icon':'swap','dappId':'uniswap'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'},{'text':'Get gas','icon':'gas','dappId':'smol-refuel'}]
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/eth-sepolia.json
+NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/sepolia.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xbf69c7abc4fee283b59a9633dadfdaedde5c5ee0fba3e80a08b5b8a3acbd4363
+NEXT_PUBLIC_HAS_BEACON_CHAIN=true
+NEXT_PUBLIC_HAS_USER_OPS=true
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
-## sidebar
-NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/eth-goerli.json
-NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-logos/goerli.svg
-NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-icons/goerli.svg
-## footer
-##views
-NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES=[{'name':'LooksRare','collection_url':'https://goerli.looksrare.org/collections/{hash}','instance_url':'https://goerli.looksrare.org/collections/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/looks-rare.png'}]
-## misc
-NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Bitquery','baseUrl':'https://explorer.bitquery.io/','paths':{'tx':'/goerli/tx','address':'/goerli/address','token':'/goerli/token','block':'/goerli/block'}},{'title':'Etherscan','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]
-## views
-# NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS=['top_accounts']
-# NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS=['value','fee_currency','gas_price','tx_fee','gas_fees','burnt_fees']
-# NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS=['fee_per_gas']
-
-# app features
-NEXT_PUBLIC_APP_ENV=development
-NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgba(51, 53, 67, 1)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgba(165, 252, 122, 1)
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
-NEXT_PUBLIC_AUTH_URL=http://localhost:3000
-NEXT_PUBLIC_LOGOUT_URL=https://blockscoutcom.us.auth0.com/v2/logout
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_LOGOUT_URL=https://blockscout-goerli.us.auth0.com/v2/logout
+NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
 NEXT_PUBLIC_MARKETPLACE_ENABLED=true
-NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/eth-goerli.json
-NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace-categories/default.json
-NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL=https://gist.githubusercontent.com/maxaleks/ce5c7e3de53e8f5b240b88265daf5839/raw/328383c958a8f7ecccf6d50c953bcdf8ab3faa0a/security_reports_goerli_test.json
-NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/shrqUAcjgGJ4jU88C
+NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/test-configs/marketplace-security-report-mock.json
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
 NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
-NEXT_PUBLIC_STATS_API_HOST=https://stats-goerli.k8s-dev.blockscout.com
-NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.k8s-dev.blockscout.com
-NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info-test.k8s-dev.blockscout.com
-NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs-test.k8s-dev.blockscout.com
-NEXT_PUBLIC_SWAP_BUTTON_URL=uniswap
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata-test.k8s-dev.blockscout.com
+NEXT_PUBLIC_METASUITES_ENABLED=true
+NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG={'name': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'}
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens-rs-test.k8s-dev.blockscout.com
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/blocks','/apps']
+NEXT_PUBLIC_NAVIGATION_LAYOUT=horizontal
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Etherscan','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/etherscan.png', 'baseUrl':'https://sepolia.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}, {'title':'Tenderly','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/sepolia'}} ]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/sepolia.png
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/sepolia.png
+NEXT_PUBLIC_NETWORK_ID=11155111
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/sepolia.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/sepolia.svg
+NEXT_PUBLIC_NETWORK_NAME=Sepolia
+NEXT_PUBLIC_NETWORK_RPC_URL=https://eth-sepolia.public.blastapi.io
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Sepolia
+NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/sepolia-testnet.png
+NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://sepolia.drpc.org?ref=559183','text':'Public RPC'}]
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-sepolia.safe.global
+NEXT_PUBLIC_SENTRY_ENABLE_TRACING=true
+NEXT_PUBLIC_SEO_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_STATS_API_HOST=https://stats-sepolia.k8s-dev.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer-test.k8s-dev.blockscout.com
diff --git a/configs/envs/.env.main.L2 b/configs/envs/.env.main.L2
deleted file mode 100644
index e410b29b8e..0000000000
--- a/configs/envs/.env.main.L2
+++ /dev/null
@@ -1,52 +0,0 @@
-# Set of ENVs for Develompent L2 network explorer
-# https://blockscout-optimism-goerli.k8s-dev.blockscout.com/
-
-# app configuration
-NEXT_PUBLIC_APP_PROTOCOL=http
-NEXT_PUBLIC_APP_HOST=localhost
-NEXT_PUBLIC_APP_PORT=3000
-
-# blockchain parameters
-NEXT_PUBLIC_NETWORK_NAME=Base Göerli
-NEXT_PUBLIC_NETWORK_SHORT_NAME=Base
-NEXT_PUBLIC_NETWORK_ID=84531
-NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
-NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
-NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
-NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
-NEXT_PUBLIC_NETWORK_RPC_URL=https://goerli.base.org
-NEXT_PUBLIC_IS_TESTNET=true
-
-# api configuration
-NEXT_PUBLIC_API_HOST=blockscout-optimism-goerli.k8s-dev.blockscout.com
-NEXT_PUBLIC_API_BASE_PATH=/
-
-# ui config
-## homepage
-NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=linear-gradient(136.9deg,rgb(107 94 236) 1.5%,rgb(0 82 255) 56.84%,rgb(82 62 231) 98.54%)
-NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
-## sidebar
-NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/base-goerli.json
-NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-logos/base.svg
-NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-icons/base.svg
-## footer
-## misc
-## views
-NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE=gradient_avatar
-
-# app features
-NEXT_PUBLIC_APP_ENV=development
-NEXT_PUBLIC_AD_BANNER_PROVIDER=adbutler
-NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP='{ "id": "632019", "width": "728", "height": "90" }'
-NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE="{ 'id': '632018', 'width': '320', 'height': '100' }"
-NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x4a0ed8ddf751a7cb5297f827699117b0f6d21a0b2907594d300dc9fed75c7e62
-NEXT_PUBLIC_WEB3_WALLETS=['coinbase']
-NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET=true
-NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
-NEXT_PUBLIC_LOGOUT_URL=https://blockscoutcom.us.auth0.com/v2/logout
-NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/base-goerli.json
-NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/shrqUAcjgGJ4jU88C
-NEXT_PUBLIC_STATS_API_HOST=https://stats-optimism-goerli.k8s-dev.blockscout.com
-NEXT_PUBLIC_ROLLUP_TYPE=optimistic
-NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://blockscout-main.k8s-dev.blockscout.com
-NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://app.optimism.io/bridge/withdraw
diff --git a/configs/envs/.env.optimism b/configs/envs/.env.optimism
new file mode 100644
index 0000000000..f23300e95f
--- /dev/null
+++ b/configs/envs/.env.optimism
@@ -0,0 +1,69 @@
+# Set of ENVs for OP Mainnet network explorer
+# https://optimism.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn preset:sync --name=optimism"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={ "id": "749780", "width": "728", "height": "90" }
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={ "id": "749779", "width": "320", "height": "100" }
+NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER=adbutler
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=optimism.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swap','icon':'swap','dappId':'velodrome'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'},{'text':'Get gas','icon':'gas','dappId':'smol-refuel'}]
+NEXT_PUBLIC_FAULT_PROOF_ENABLED=true
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/optimism-mainnet.json
+NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/optimism.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x97f34a4cf685e365460dd38dbe16e092d8e4cc4b6ac779e3abcf4c18df6b1329
+NEXT_PUBLIC_HAS_USER_OPS=true
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs', 'coin_price', 'market_cap', 'secondary_coin_price']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=linear-gradient(90deg, rgb(232, 52, 53) 0%, rgb(139, 28, 232) 100%)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgb(255, 255, 255)
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_LOGOUT_URL=https://optimism-goerli.us.auth0.com/v2/logout
+NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/maxaleks/0d18fc309ff499075127b364cc69306d/raw/2a51f961a8c1b9f884f2ab7eed79d4b69330e1ae/peanut_protocol_banner.html
+NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://optimism.blockscout.com/apps/peanut-protocol
+NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
+NEXT_PUBLIC_MARKETPLACE_ENABLED=true
+NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-security-reports/default.json
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_METASUITES_ENABLED=true
+NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG={'name': 'zerion', 'dapp_id': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview?utm_source=blockscout&utm_medium=address', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'}
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/apps']
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/optimism/pools'}}, {'title':'Tenderly','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/optimistic'}},{'title':'3xpl','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/3xpl.png','baseUrl':'https://3xpl.com/','paths':{'tx':'/optimism/transaction','address':'/optimism/address'}}]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism.svg
+NEXT_PUBLIC_NETWORK_ID=10
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/optimism.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/optimism.svg
+NEXT_PUBLIC_NETWORK_NAME=OP Mainnet
+NEXT_PUBLIC_NETWORK_RPC_URL=https://mainnet.optimism.io
+NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL=OP
+NEXT_PUBLIC_NETWORK_SHORT_NAME=OP Mainnet
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/optimism-mainnet.png
+NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://optimism.drpc.org?ref=559183','text':'Public RPC'}]
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth.blockscout.com/
+NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://app.optimism.io/bridge/withdraw
+NEXT_PUBLIC_ROLLUP_TYPE=optimistic
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-optimism.safe.global
+NEXT_PUBLIC_STATS_API_HOST=https://stats-optimism-mainnet.k8s-prod-1.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_WEB3_WALLETS=['token_pocket', 'metamask']
\ No newline at end of file
diff --git a/configs/envs/.env.optimism_celestia b/configs/envs/.env.optimism_celestia
new file mode 100644
index 0000000000..cb66ee2c0b
--- /dev/null
+++ b/configs/envs/.env.optimism_celestia
@@ -0,0 +1,46 @@
+# Set of ENVs for OP Celestia Raspberry network explorer
+# https://opcelestia-raspberry.gelatoscout.com
+# This is an auto-generated file. To update all values, run "yarn preset:sync --name=optimism_celestia"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={'id':'721628','width':'728','height':'90'}
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={'id':'721627','width':'300','height':'100'}
+NEXT_PUBLIC_AD_BANNER_PROVIDER=adbutler
+NEXT_PUBLIC_AD_TEXT_PROVIDER=none
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=opcelestia-raspberry.gelatoscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/opcelestia-raspberry.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x0f5b54de81848d8d8baa02c69030037218a2b4df622d64a2a429e11721606656
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgba(255, 0, 0, 1)
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=ETH
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism.svg
+NEXT_PUBLIC_NETWORK_ID=123420111
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/optimism.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/optimism.svg
+NEXT_PUBLIC_NETWORK_NAME=OP Celestia Raspberry
+NEXT_PUBLIC_NETWORK_RPC_URL=https://rpc.opcelestia-raspberry.gelato.digital
+NEXT_PUBLIC_NETWORK_SHORT_NAME=opcelestia-raspberry
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth-sepolia.blockscout.com/
+NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://bridge.gelato.network/bridge/opcelestia-raspberry
+NEXT_PUBLIC_ROLLUP_TYPE=optimistic
+NEXT_PUBLIC_STATS_API_HOST=https://stats-opcelestia-raspberry.k8s.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_WEB3_WALLETS=none
\ No newline at end of file
diff --git a/configs/envs/.env.optimism_sepolia b/configs/envs/.env.optimism_sepolia
new file mode 100644
index 0000000000..8636924480
--- /dev/null
+++ b/configs/envs/.env.optimism_sepolia
@@ -0,0 +1,54 @@
+# Set of ENVs for OP Sepolia network explorer
+# https://optimism-sepolia.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn preset:sync --name=optimism_sepolia"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=optimism-sepolia.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_FAULT_PROOF_ENABLED=true
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/optimism-sepolia.json
+NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/optimism.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x59d26836041ab35169bdce431d68d070b7b8acb589fa52e126e6c828b6ece5e9
+NEXT_PUBLIC_HAS_USER_OPS=true
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=linear-gradient(90deg, rgb(232, 52, 53) 0%, rgb(139, 28, 232) 100%)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgb(255, 255, 255)
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_LOGOUT_URL=https://optimism-goerli.us.auth0.com/v2/logout
+NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE=<p>Build faster with the <a href="https://console.optimism.io" target="_blank">Superchain Dev Console</a>: Get testnet ETH and tools to help you build, launch, and grow your app on the Superchain</p>
+NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Tenderly','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/optimistic-sepolia'}}]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism.svg
+NEXT_PUBLIC_NETWORK_ID=11155420
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/optimism.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/optimism.svg
+NEXT_PUBLIC_NETWORK_NAME=OP Sepolia
+NEXT_PUBLIC_NETWORK_RPC_URL=https://sepolia.optimism.io
+NEXT_PUBLIC_NETWORK_SHORT_NAME=OP Sepolia
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth-sepolia.blockscout.com/
+NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://app.optimism.io/bridge/withdraw
+NEXT_PUBLIC_ROLLUP_TYPE=optimistic
+NEXT_PUBLIC_STATS_API_HOST=https://stats-optimism-sepolia.k8s.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_WEB3_WALLETS=['token_pocket', 'metamask']
\ No newline at end of file
diff --git a/configs/envs/.env.poa_core b/configs/envs/.env.poa_core
deleted file mode 100644
index f874d89f5d..0000000000
--- a/configs/envs/.env.poa_core
+++ /dev/null
@@ -1,40 +0,0 @@
-# Set of ENVs for POA network explorer
-# https://blockscout.com/poa/core/
-
-# app configuration
-NEXT_PUBLIC_APP_PROTOCOL=http
-NEXT_PUBLIC_APP_HOST=localhost
-NEXT_PUBLIC_APP_PORT=3000
-
-# blockchain parameters
-NEXT_PUBLIC_NETWORK_NAME=POA
-NEXT_PUBLIC_NETWORK_SHORT_NAME=POA
-NEXT_PUBLIC_NETWORK_ID=99
-NEXT_PUBLIC_NETWORK_CURRENCY_NAME=POA
-NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=POA
-NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
-
-# api configuration
-NEXT_PUBLIC_API_HOST=blockscout.com
-NEXT_PUBLIC_API_BASE_PATH=/poa/core
-
-# ui config
-## homepage
-NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cap']
-NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND='no-repeat bottom 20% right 0px/100% url(https://neon-labs.org/images/index/banner.jpg)'
-NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=\#DCFE76
-## sidebar
-NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/eth-goerli.json
-NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-logos/poa.svg
-NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-icons/poa.svg
-## footer
-## misc
-NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/poa/core/transaction','address':'/ethereum/poa/core/address','block':'/ethereum/poa/core/block'}}]
-
-# app features
-NEXT_PUBLIC_APP_ENV=development
-NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
-NEXT_PUBLIC_AUTH_URL=http://localhost:3000
-NEXT_PUBLIC_LOGOUT_URL=https://blockscoutcom.us.auth0.com/v2/logout
-NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
-NEXT_PUBLIC_NETWORK_RPC_URL=https://core.poa.network
diff --git a/configs/envs/.env.polygon b/configs/envs/.env.polygon
index 2cc023145d..4fe0631ac0 100644
--- a/configs/envs/.env.polygon
+++ b/configs/envs/.env.polygon
@@ -1,45 +1,47 @@
-# Set of ENVs for Ethereum network explorer
-# https://polygon.blockscout.com/
+# Set of ENVs for Polygon Mainnet network explorer
+# https://polygon.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn preset:sync --name=polygon"
 
-# app configuration
+# Local ENVs
 NEXT_PUBLIC_APP_PROTOCOL=http
 NEXT_PUBLIC_APP_HOST=localhost
 NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
-# blockchain parameters
-NEXT_PUBLIC_NETWORK_NAME=Polygon
-NEXT_PUBLIC_NETWORK_SHORT_NAME=Polygon
-NEXT_PUBLIC_NETWORK_ID=137
-NEXT_PUBLIC_NETWORK_CURRENCY_NAME=MATIC
-NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=MATIC
-NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
-NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
-NEXT_PUBLIC_NETWORK_RPC_URL=https://polygon.blockpi.network/v1/rpc/public
-
-# api configuration
-NEXT_PUBLIC_API_HOST=polygon.blockscout.com
+# Instance ENVs
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={ "id": "632019", "width": "728", "height": "90" }
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={ "id": "632018", "width": "320", "height": "100" }
+NEXT_PUBLIC_AD_BANNER_PROVIDER=adbutler
 NEXT_PUBLIC_API_BASE_PATH=/
-
-# ui config
-## homepage
-NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
-NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND="linear-gradient(122deg, rgba(162, 41, 197, 1) 0%, rgba(123, 63, 228, 1) 100%)"
-NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR="rgba(255, 255, 255, 1)"
-## sidebar
+NEXT_PUBLIC_API_HOST=polygon.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
 NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/polygon-mainnet.json
-NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/polygon.svg
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x25fcb396fc8652dcd0040f677a1dcc6fecff390ecafc815894379a3f254f1aa9
+NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS=true
+NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS=true
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=linear-gradient(122deg, rgba(162, 41, 197, 1) 0%, rgba(123, 63, 228, 1) 100%)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgba(255, 255, 255, 1)
+NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_METASUITES_ENABLED=true
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=MATIC
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=MATIC
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/polygon_pos/pools'}}]
 NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/polygon-short.svg
-## footer
-## views
-## misc
-
-# app features
-NEXT_PUBLIC_APP_ENV=development
-# NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x97fa753626b8d44011d0b9f9a947c735f20b6e895efdee49d7cda76a50001017
-NEXT_PUBLIC_HAS_BEACON_CHAIN=false
-# NEXT_PUBLIC_STATS_API_HOST=https://stats-rsk-testnet.k8s.blockscout.com
+NEXT_PUBLIC_NETWORK_ID=137
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/polygon.svg
+NEXT_PUBLIC_NETWORK_NAME=Polygon Mainnet
+NEXT_PUBLIC_NETWORK_RPC_URL=https://polygon.blockpi.network/v1/rpc/public
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Polygon
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/polygon-mainnet.png
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-polygon.safe.global
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
 NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
-NEXT_PUBLIC_WEB3_WALLETS=['token_pocket','metamask']
-
-#meta
-NEXT_PUBLIC_OG_IMAGE_URL=https://github.com/blockscout/frontend-configs/blob/main/configs/og-images/polygon-mainnet.png?raw=true
+NEXT_PUBLIC_WEB3_WALLETS=['token_pocket', 'metamask']
\ No newline at end of file
diff --git a/configs/envs/.env.pw b/configs/envs/.env.pw
index 223abf5f32..dec30c09fe 100644
--- a/configs/envs/.env.pw
+++ b/configs/envs/.env.pw
@@ -25,7 +25,6 @@ NEXT_PUBLIC_API_BASE_PATH=/
 # ui config
 ## homepage
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cap']
-NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME=true
 ## sidebar
 ## footer
 NEXT_PUBLIC_GIT_TAG=v1.0.11
@@ -51,5 +50,7 @@ NEXT_PUBLIC_AUTH0_CLIENT_ID=xxx
 NEXT_PUBLIC_STATS_API_HOST=http://localhost:3004
 NEXT_PUBLIC_CONTRACT_INFO_API_HOST=http://localhost:3005
 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=http://localhost:3006
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=http://localhost:3007
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=http://localhost:3008
 NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=xxx
-NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=xxx
\ No newline at end of file
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=xxx
diff --git a/configs/envs/.env.rootstock b/configs/envs/.env.rootstock
deleted file mode 100644
index ad4bcfb880..0000000000
--- a/configs/envs/.env.rootstock
+++ /dev/null
@@ -1,45 +0,0 @@
-# Set of ENVs for Ethereum network explorer
-# https://eth.blockscout.com/
-
-# app configuration
-NEXT_PUBLIC_APP_PROTOCOL=http
-NEXT_PUBLIC_APP_HOST=localhost
-NEXT_PUBLIC_APP_PORT=3000
-
-# blockchain parameters
-NEXT_PUBLIC_NETWORK_NAME=Rootstock Testnet
-NEXT_PUBLIC_NETWORK_SHORT_NAME=Rootstock
-NEXT_PUBLIC_NETWORK_ID=31
-NEXT_PUBLIC_NETWORK_CURRENCY_NAME=tRBTC
-NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=tRBTC
-NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
-NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
-NEXT_PUBLIC_NETWORK_RPC_URL=https://public-node.testnet.rsk.co
-
-# api configuration
-NEXT_PUBLIC_API_HOST=rootstock-testnet.blockscout.com
-NEXT_PUBLIC_API_BASE_PATH=/
-
-# ui config
-## homepage
-NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
-NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND="rgb(255, 145, 0)"
-## sidebar
-NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/rsk-testnet.json
-NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/rootstock.svg
-NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/rootstock-short.svg
-## footer
-NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/rootstock.json
-## views
-NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS=['burnt_fees','total_reward','nonce']
-## misc
-
-# app features
-NEXT_PUBLIC_APP_ENV=development
-NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x97fa753626b8d44011d0b9f9a947c735f20b6e895efdee49d7cda76a50001017
-NEXT_PUBLIC_HAS_BEACON_CHAIN=false
-NEXT_PUBLIC_STATS_API_HOST=https://stats-rsk-testnet.k8s.blockscout.com
-NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
-
-#meta
-NEXT_PUBLIC_OG_IMAGE_URL=https://github.com/blockscout/frontend-configs/blob/main/configs/og-images/rootstock-testnet.png?raw=true
diff --git a/configs/envs/.env.rootstock_testnet b/configs/envs/.env.rootstock_testnet
new file mode 100644
index 0000000000..a4218a2fac
--- /dev/null
+++ b/configs/envs/.env.rootstock_testnet
@@ -0,0 +1,46 @@
+# Set of ENVs for Rootstock Testnet network explorer
+# https://rootstock-testnet.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn preset:sync --name=rootstock_testnet"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=rootstock-testnet.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/rsk-testnet.json
+NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/rootstock.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x98b25020fa6551a439dfee58fb16ca11d9e93d4cdf15f3f07b697cf08cf11643
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgb(255, 145, 0)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgb(255, 255, 255)
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_LOGOUT_URL=https://rootstock.us.auth0.com/v2/logout
+NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=tRBTC
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=tRBTC
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Tenderly','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/rsk-testnet'}}]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/rootstock-short.svg
+NEXT_PUBLIC_NETWORK_ID=31
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/rootstock.svg
+NEXT_PUBLIC_NETWORK_NAME=Rootstock Testnet
+NEXT_PUBLIC_NETWORK_RPC_URL=https://public-node.testnet.rsk.co
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Rootstock
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/rootstock-testnet.png
+NEXT_PUBLIC_STATS_API_HOST=https://stats-rsk-testnet.k8s.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS=['burnt_fees','total_reward','nonce']
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_HOMEPAGE_STATS=['total_blocks','average_block_time','total_txs','wallet_addresses','gas_tracker','btc_locked']
\ No newline at end of file
diff --git a/configs/envs/.env.sepolia b/configs/envs/.env.sepolia
deleted file mode 100644
index 72a98f40a4..0000000000
--- a/configs/envs/.env.sepolia
+++ /dev/null
@@ -1,63 +0,0 @@
-# Set of ENVs for Sepolia testnet network explorer
-# https://eth-sepolia.blockscout.com/
-
-# app configuration
-NEXT_PUBLIC_APP_PROTOCOL=http
-NEXT_PUBLIC_APP_HOST=localhost
-NEXT_PUBLIC_APP_PORT=3000
-
-# blockchain parameters
-NEXT_PUBLIC_NETWORK_NAME=Sepolia
-NEXT_PUBLIC_NETWORK_SHORT_NAME=Sepolia
-NEXT_PUBLIC_NETWORK_ID=11155111
-NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
-NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
-NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
-NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
-NEXT_PUBLIC_NETWORK_RPC_URL=https://eth-sepolia.public.blastapi.io
-NEXT_PUBLIC_IS_TESTNET=true
-
-# api configuration
-NEXT_PUBLIC_API_HOST=eth-sepolia.blockscout.com
-NEXT_PUBLIC_API_BASE_PATH=/
-
-# ui config
-## homepage
-NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
-NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND='rgba(51, 53, 67, 1)'
-NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR='rgba(165, 252, 122, 1)'
-## sidebar
-NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/eth-sepolia.json
-NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/sepolia.svg
-NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/sepolia.svg
-NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/sepolia.png
-NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/sepolia.png
-NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://sepolia.drpc.org?ref=559183','text':'Public RPC'}]
-## footer
-NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/sepolia.json
-##views
-NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES=[{'name':'LooksRare','collection_url':'https://sepolia.looksrare.org/collections/{hash}','instance_url':'https://sepolia.looksrare.org/collections/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/looks-rare.png'}]
-## misc
-NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Etherscan','baseUrl':'https://sepolia.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}},{'title':'Tenderly','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/sepolia'}}]
-
-# app features
-NEXT_PUBLIC_APP_ENV=development
-NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xbf69c7abc4fee283b59a9633dadfdaedde5c5ee0fba3e80a08b5b8a3acbd4363
-NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
-NEXT_PUBLIC_AUTH_URL=http://localhost:3000
-NEXT_PUBLIC_LOGOUT_URL=https://blockscout-goerli.us.auth0.com/v2/logout
-NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/eth-goerli.json
-NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/shrqUAcjgGJ4jU88C
-NEXT_PUBLIC_STATS_API_HOST=https://stats-sepolia.k8s-dev.blockscout.com
-NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
-NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
-NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
-NEXT_PUBLIC_WEB3_WALLETS=['token_pocket','metamask']
-NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
-NEXT_PUBLIC_HAS_BEACON_CHAIN=true
-NEXT_PUBLIC_HAS_USER_OPS=true
-NEXT_PUBLIC_AD_BANNER_PROVIDER=getit
-NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED=true
-
-#meta
-NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/sepolia-testnet.png
diff --git a/configs/envs/.env.stability_testnet b/configs/envs/.env.stability_testnet
new file mode 100644
index 0000000000..c057fda27c
--- /dev/null
+++ b/configs/envs/.env.stability_testnet
@@ -0,0 +1,55 @@
+# Set of ENVs for Stability Testnet network explorer
+# https://stability-testnet.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn preset:sync --name=stability_testnet"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=stability-testnet.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com/
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/stability-testnet.json
+NEXT_PUBLIC_GAS_TRACKER_ENABLED=false
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x38125475465a4113a216448af2c9570d0e2c25ef313f8cfbef74f1daad7a97b5
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgba(46, 51, 81, 1)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgba(122, 235, 246, 1)
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_LOGOUT_URL=https://blockscout-stability.us.auth0.com/v2/logout
+NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
+NEXT_PUBLIC_MARKETPLACE_ENABLED=true
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=FREE
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=FREE
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/stability-short.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/stability-short-dark.svg
+NEXT_PUBLIC_NETWORK_ID=20180427
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/stability.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/stability-dark.svg
+NEXT_PUBLIC_NETWORK_NAME=Stability Testnet
+NEXT_PUBLIC_NETWORK_RPC_URL=https://free.testnet.stabilityprotocol.com
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Stability Testnet
+NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/stability.png
+NEXT_PUBLIC_STATS_API_HOST=https://stats-stability-testnet.k8s.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE=stability
+NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS=['top_accounts']
+NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS=['burnt_fees','total_reward']
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS=['fee_per_gas']
+NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS=['value','fee_currency','gas_price','gas_fees','burnt_fees']
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
\ No newline at end of file
diff --git a/configs/envs/.env.zkevm b/configs/envs/.env.zkevm
index 9d1ef2487a..1bc614e2d7 100644
--- a/configs/envs/.env.zkevm
+++ b/configs/envs/.env.zkevm
@@ -1,51 +1,48 @@
-# Set of ENVs for zkevm (dev only)
-# https://eth.blockscout.com/
+# Set of ENVs for Polygon zkEVM network explorer
+# https://zkevm.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn preset:sync --name=zkevm"
 
-# app configuration
+# Local ENVs
 NEXT_PUBLIC_APP_PROTOCOL=http
 NEXT_PUBLIC_APP_HOST=localhost
 NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
-# blockchain parameters
-NEXT_PUBLIC_NETWORK_NAME=zkEVM
-NEXT_PUBLIC_NETWORK_SHORT_NAME=zkEVM
-NEXT_PUBLIC_NETWORK_ID=1
-NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
-NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
-NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
-NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
-NEXT_PUBLIC_NETWORK_RPC_URL=https://zkevm-rpc.com
-
-# api configuration
-NEXT_PUBLIC_API_HOST=zkevm.blockscout.com
-NEXT_PUBLIC_API_PORT=80
-NEXT_PUBLIC_API_PROTOCOL=http
+# Instance ENVs
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={ "id": "632019", "width": "728", "height": "90" }
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={ "id": "632018", "width": "320", "height": "100" }
+NEXT_PUBLIC_AD_BANNER_PROVIDER=adbutler
 NEXT_PUBLIC_API_BASE_PATH=/
-
-# ui config
-## homepage
+NEXT_PUBLIC_API_HOST=zkevm.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/zkevm.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x25fcb396fc8652dcd0040f677a1dcc6fecff390ecafc815894379a3f254f1aa9
+NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS=true
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
-## sidebar
-NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/polygon-mainnet.json
-NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/polygon.svg
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=linear-gradient(122deg, rgba(162, 41, 197, 1) 0%, rgba(123, 63, 228, 1) 100%)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgba(255, 255, 255, 1)
+NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_METASUITES_ENABLED=true
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=MATIC
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=MATIC
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/polygon-zkevm/pools'}}]
 NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/polygon-short.svg
-NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND='linear-gradient(122deg, rgba(162, 41, 197, 1) 0%, rgba(123, 63, 228, 1) 100%)'
-NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR='rgba(255, 255, 255, 1)'
-## footer
-## misc
-NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Etherscan','baseUrl':'https://etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]
-# app features
-NEXT_PUBLIC_APP_INSTANCE=local
-NEXT_PUBLIC_APP_ENV=development
-NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
-NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
-# NEXT_PUBLIC_AUTH_URL=http://localhost:3000
-NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
-NEXT_PUBLIC_LOGOUT_URL=https://blockscoutcom.us.auth0.com/v2/logout
-NEXT_PUBLIC_STATS_API_HOST=https://stats-eth-main.k8s.blockscout.com
-NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
-NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
-NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
-# rollup
+NEXT_PUBLIC_NETWORK_ID=1101
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/polygon.svg
+NEXT_PUBLIC_NETWORK_NAME=Polygon zkEVM
+NEXT_PUBLIC_NETWORK_RPC_URL=https://zkevm-rpc.com
+NEXT_PUBLIC_NETWORK_SHORT_NAME=zkEVM
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth.blockscout.com/
 NEXT_PUBLIC_ROLLUP_TYPE=zkEvm
-NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://polygon.blockscout.com
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-zkevm.safe.global
+NEXT_PUBLIC_STATS_API_HOST=https://stats-polygon-zkevm.k8s-prod-1.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_WEB3_WALLETS=['token_pocket', 'metamask']
diff --git a/configs/envs/.env.zksync b/configs/envs/.env.zksync
index 6693f0ca4e..19d27abd49 100644
--- a/configs/envs/.env.zksync
+++ b/configs/envs/.env.zksync
@@ -1,59 +1,52 @@
-# Set of ENVs for zkSync (dev only)
-# https://zksync.blockscout.com/
+# Set of ENVs for ZkSync Era network explorer
+# https://zksync.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn preset:sync --name=zksync"
 
-# app configuration
+# Local ENVs
 NEXT_PUBLIC_APP_PROTOCOL=http
 NEXT_PUBLIC_APP_HOST=localhost
 NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
-# blockchain parameters
-NEXT_PUBLIC_NETWORK_NAME=ZkSync Era
-NEXT_PUBLIC_NETWORK_SHORT_NAME=ZkSync Era
-NEXT_PUBLIC_NETWORK_ID=324
-NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
-NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
-NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
-NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
-NEXT_PUBLIC_NETWORK_RPC_URL=https://mainnet.era.zksync.io
+# Instance ENVs
+NEXT_PUBLIC_VIEWS_CONTRACT_EXTRA_VERIFICATION_METHODS=none
 
-# api configuration
-NEXT_PUBLIC_API_HOST=zksync.blockscout.com
-NEXT_PUBLIC_API_PORT=80
-NEXT_PUBLIC_API_PROTOCOL=http
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
 NEXT_PUBLIC_API_BASE_PATH=/
-
-# ui config
-## homepage
-NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
-## sidebar
-NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/polygon-mainnet.json
-NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/zksync.svg
-NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/zksync-dark.svg
-NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/zksync-short.svg
-NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/zksync-short-dark.svg
-NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND='rgba(53, 103, 246, 1)'
-NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR='rgba(255, 255, 255, 1)'
-NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://zksync.drpc.org?ref=559183','text':'Public RPC'}]
-## footer
+NEXT_PUBLIC_API_HOST=zksync.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/zksync.json
 NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/zksync.json
-## views
-NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=false
-## misc
-NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'l2scan','baseUrl':'https://zksync-era.l2scan.co/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]
-NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/zksync.png
-# app features
-NEXT_PUBLIC_APP_INSTANCE=local
-NEXT_PUBLIC_APP_ENV=development
 NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x79c7802ccdf3be5a49c47cc751aad351b0027e8275f6f54878eda50ee559a648
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgba(53, 103, 246, 1)
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgba(255, 255, 255, 1)
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
-# NEXT_PUBLIC_AUTH_URL=http://localhost:3000
-NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 NEXT_PUBLIC_LOGOUT_URL=https://zksync.us.auth0.com/v2/logout
-NEXT_PUBLIC_STATS_API_HOST=https://stats-eth-main.k8s.blockscout.com
-NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
-NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
-NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
-NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-zksync.safe.global
-# rollup
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_METASUITES_ENABLED=true
+NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG={'name': 'zerion', 'dapp_id': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview?utm_source=blockscout&utm_medium=address', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'}
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=ETH
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/zksync/pools'}},{'title':'L2scan','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/zksync.png','baseUrl':'https://zksync-era.l2scan.co/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/zksync-short.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/zksync-short-dark.svg
+NEXT_PUBLIC_NETWORK_ID=324
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/zksync.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/zksync-dark.svg
+NEXT_PUBLIC_NETWORK_NAME=ZkSync Era
+NEXT_PUBLIC_NETWORK_RPC_URL=https://mainnet.era.zksync.io
+NEXT_PUBLIC_NETWORK_SHORT_NAME=ZkSync Era
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/zksync.png
+NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://zksync.drpc.org?ref=559183','text':'Public RPC'}]
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth.blockscout.com/
 NEXT_PUBLIC_ROLLUP_TYPE=zkSync
-NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth.blockscout.com
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-zksync.safe.global
+NEXT_PUBLIC_STATS_API_HOST=https://stats-zksync-era-mainnet.k8s-prod-2.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
diff --git a/deploy/helmfile.yaml b/deploy/helmfile.yaml
index 0e401dce3d..6052eda969 100644
--- a/deploy/helmfile.yaml
+++ b/deploy/helmfile.yaml
@@ -16,28 +16,6 @@ repositories:
     url: https://bedag.github.io/helm-charts
 
 releases:
-  # Deploy front-main
-  - name: bs-stack
-    chart: blockscout/blockscout-stack
-    version: 1.2.*
-    namespace: front-main
-    labels:
-      app: front
-    values:
-    - values/main/values.yaml
-    - global:
-        env: "main"
-  # Deploy l2-optimism-goerli
-  - name: bs-stack
-    chart: blockscout/blockscout-stack
-    version: 1.2.*
-    namespace: l2-optimism-goerli
-    labels:
-      app: l2-optimism-goerli
-    values:
-    - values/l2-optimism-goerli/values.yaml
-    - global:
-        env: "optimism-goerli"
   # Deploy review L2
   - name: reg-secret
     chart: bedag/raw
@@ -55,7 +33,7 @@ releases:
           type: kubernetes.io/dockerconfigjson
   - name: bs-stack
     chart: blockscout/blockscout-stack
-    version: 1.2.*
+    version: 1.*.*
     namespace: review-l2-{{ requiredEnv "GITHUB_REF_NAME_SLUG" }}
     labels:
       app: review-l2-{{ requiredEnv "GITHUB_REF_NAME_SLUG" }}
@@ -80,7 +58,7 @@ releases:
           type: kubernetes.io/dockerconfigjson
   - name: bs-stack
     chart: blockscout/blockscout-stack
-    version: 1.2.*
+    version: 1.*.*
     namespace: review-{{ requiredEnv "GITHUB_REF_NAME_SLUG" }}
     labels:
       app: review-{{ requiredEnv "GITHUB_REF_NAME_SLUG" }}
diff --git a/deploy/scripts/download_assets.sh b/deploy/scripts/download_assets.sh
index cc9f4a09a7..d21e63482d 100755
--- a/deploy/scripts/download_assets.sh
+++ b/deploy/scripts/download_assets.sh
@@ -17,6 +17,7 @@ ASSETS_ENVS=(
     "NEXT_PUBLIC_MARKETPLACE_CONFIG_URL"
     "NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL"
     "NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL"
+    "NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL"
     "NEXT_PUBLIC_FEATURED_NETWORKS"
     "NEXT_PUBLIC_FOOTER_LINKS"
     "NEXT_PUBLIC_NETWORK_LOGO"
@@ -48,10 +49,14 @@ get_target_filename() {
         # Extract the extension from the filename
         local extension="${filename##*.}"
     else
-        # Remove query parameters from the URL and get the filename
-        local filename=$(basename "${url%%\?*}")
-        # Extract the extension from the filename
-        local extension="${filename##*.}"
+        if [[ "$url" == http* ]]; then
+            # Remove query parameters from the URL and get the filename
+            local filename=$(basename "${url%%\?*}")
+            # Extract the extension from the filename
+            local extension="${filename##*.}"
+        else
+            local extension="json"
+        fi
     fi
 
     # Convert the extension to lowercase
@@ -79,16 +84,31 @@ download_and_save_asset() {
         # Copy the local file to the destination
         cp "${url#file://}" "$destination"
     else
-        # Download the asset using curl
-        curl -s -o "$destination" "$url"
+        # Check if the value is a URL
+        if [[ "$url" == http* ]]; then
+            # Download the asset using curl
+            curl -s -o "$destination" "$url"
+        else
+            # Convert single-quoted JSON-like content to valid JSON
+            json_content=$(echo "${!env_var}" | sed "s/'/\"/g")
+
+            # Save the JSON content to a file
+            echo "$json_content" > "$destination"
+        fi
+    fi
+
+    if [[ "$url" == file://* ]] || [[ "$url" == http* ]]; then
+        local source_name=$url
+    else
+        local source_name="raw input"
     fi
 
     # Check if the download was successful
     if [ $? -eq 0 ]; then
-        echo "   [+] $env_var: Successfully saved file from $url to $destination."
+        echo "   [+] $env_var: Successfully saved file from $source_name to $destination."
         return 0
     else
-        echo "   [-] $env_var: Failed to save file from $url."
+        echo "   [-] $env_var: Failed to save file from $source_name."
         return 1
     fi
 }
diff --git a/deploy/scripts/entrypoint.sh b/deploy/scripts/entrypoint.sh
index 2924f09189..298303c7a0 100755
--- a/deploy/scripts/entrypoint.sh
+++ b/deploy/scripts/entrypoint.sh
@@ -1,7 +1,42 @@
 #!/bin/bash
 
+
+export_envs_from_preset() {
+  if [ -z "$ENVS_PRESET" ]; then
+      return
+  fi
+
+  if [ "$ENVS_PRESET" = "none" ]; then
+      return
+  fi
+
+  local preset_file="./configs/envs/.env.$ENVS_PRESET"
+
+  if [ ! -f "$preset_file" ]; then
+      return
+  fi
+
+  local blacklist=(
+    "NEXT_PUBLIC_APP_PROTOCOL" 
+    "NEXT_PUBLIC_APP_HOST"
+    "NEXT_PUBLIC_APP_PORT"
+    "NEXT_PUBLIC_APP_ENV"
+    "NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL"
+  )
+
+  while IFS='=' read -r name value; do
+      name="${name#"${name%%[![:space:]]*}"}"  # Trim leading whitespace
+      if [[ -n $name && $name == "NEXT_PUBLIC_"* && ! "${blacklist[*]}" =~ "$name" ]]; then
+          export "$name"="$value"
+      fi
+  done < <(grep "^[^#;]" "$preset_file")
+}
+
+# If there is a preset, load the environment variables from the its file
+export_envs_from_preset
+
 # Download external assets
-./download_assets.sh ./public/assets
+./download_assets.sh ./public/assets/configs
 
 # Check run-time ENVs values
 ./validate_envs.sh
diff --git a/deploy/scripts/favicon_generator.sh b/deploy/scripts/favicon_generator.sh
index 4f153dcb0b..0cfc9f7f8a 100755
--- a/deploy/scripts/favicon_generator.sh
+++ b/deploy/scripts/favicon_generator.sh
@@ -10,7 +10,7 @@ if [ $? -ne 0 ]; then
     exit 1
 else
     cd ../../../
-    favicon_folder="./public/favicon/"
+    favicon_folder="./public/assets/favicon/"
 
     echo "⏳ Replacing default favicons with freshly generated pack..."
     if [ -d "$favicon_folder" ]; then
diff --git a/deploy/scripts/make_envs_script.sh b/deploy/scripts/make_envs_script.sh
index 1124a1a77c..b3548cb207 100755
--- a/deploy/scripts/make_envs_script.sh
+++ b/deploy/scripts/make_envs_script.sh
@@ -3,7 +3,7 @@
 echo "🌀 Creating client script with ENV values..."
 
 # Define the output file name
-output_file="${1:-./public/envs.js}"
+output_file="${1:-./public/assets/envs.js}"
 
 touch $output_file;
 truncate -s 0 $output_file;
@@ -18,6 +18,12 @@ echo "window.__envs = {" >> $output_file;
 
 # Iterate through all environment variables
 for var in $(env | grep '^NEXT_PUBLIC_' | cut -d= -f1); do
+  # Skip variables that start with NEXT_PUBLIC_VERCEL. Vercel injects these
+  # and they can cause runtime errors, particularly when commit messages wrap lines.
+  if [[ $var == NEXT_PUBLIC_VERCEL* ]]; then
+    continue
+  fi
+
   # Get the value of the variable
   value="${!var}"
 
diff --git a/deploy/tools/affected-tests/yarn.lock b/deploy/tools/affected-tests/yarn.lock
index e160e0a2c6..385918d425 100644
--- a/deploy/tools/affected-tests/yarn.lock
+++ b/deploy/tools/affected-tests/yarn.lock
@@ -91,11 +91,11 @@ brace-expansion@^1.1.7:
     concat-map "0.0.1"
 
 braces@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
-  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
   dependencies:
-    fill-range "^7.0.1"
+    fill-range "^7.1.1"
 
 color-name@^1.1.4:
   version "1.1.4"
@@ -276,10 +276,10 @@ filing-cabinet@^4.1.6:
     tsconfig-paths "^4.2.0"
     typescript "^5.0.4"
 
-fill-range@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
-  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
   dependencies:
     to-regex-range "^5.0.1"
 
diff --git a/deploy/tools/envs-validator/index.ts b/deploy/tools/envs-validator/index.ts
index 9770ea6399..d2c35ba50a 100644
--- a/deploy/tools/envs-validator/index.ts
+++ b/deploy/tools/envs-validator/index.ts
@@ -20,6 +20,7 @@ async function run() {
         return result;
       }, {} as Record<string, string>);
 
+    printDeprecationWarning(appEnvs);
     await checkPlaceholdersCongruity(appEnvs);
     await validateEnvs(appEnvs);
 
@@ -135,3 +136,15 @@ function getEnvsPlaceholders(filePath: string): Promise<Array<string>> {
     });
   });
 }
+
+function printDeprecationWarning(envsMap: Record<string, string>) {
+  if (
+    envsMap.NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR ||
+    envsMap.NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND
+  ) {
+    console.log('❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗');
+    // eslint-disable-next-line max-len
+    console.warn('The NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR and NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND variables are now deprecated and will be removed in the next release. Please migrate to the NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG variable.');
+    console.log('❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗\n');
+  }
+}
diff --git a/deploy/tools/envs-validator/schema.ts b/deploy/tools/envs-validator/schema.ts
index c9e3bf5aa5..77992c3b41 100644
--- a/deploy/tools/envs-validator/schema.ts
+++ b/deploy/tools/envs-validator/schema.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 declare module 'yup' {
   interface StringSchema {
     // Yup's URL validator is not perfect so we made our own
@@ -11,12 +12,15 @@ import * as yup from 'yup';
 import type { AdButlerConfig } from '../../../types/client/adButlerConfig';
 import { SUPPORTED_AD_TEXT_PROVIDERS, SUPPORTED_AD_BANNER_PROVIDERS, SUPPORTED_AD_BANNER_ADDITIONAL_PROVIDERS } from '../../../types/client/adProviders';
 import type { AdTextProviders, AdBannerProviders, AdBannerAdditionalProviders } from '../../../types/client/adProviders';
-import type { ContractCodeIde } from '../../../types/client/contract';
+import { SMART_CONTRACT_EXTRA_VERIFICATION_METHODS, type ContractCodeIde, type SmartContractVerificationMethodExtra } from '../../../types/client/contract';
+import type { DeFiDropdownItem } from '../../../types/client/deFiDropdown';
+import type { GasRefuelProviderConfig } from '../../../types/client/gasRefuelProviderConfig';
 import { GAS_UNITS } from '../../../types/client/gasTracker';
 import type { GasUnit } from '../../../types/client/gasTracker';
 import type { MarketplaceAppOverview, MarketplaceAppSecurityReportRaw, MarketplaceAppSecurityReport } from '../../../types/client/marketplace';
-import { NAVIGATION_LINK_IDS } from '../../../types/client/navigation-items';
-import type { NavItemExternal, NavigationLinkId } from '../../../types/client/navigation-items';
+import type { MultichainProviderConfig } from '../../../types/client/multichainProviderConfig';
+import { NAVIGATION_LINK_IDS } from '../../../types/client/navigation';
+import type { NavItemExternal, NavigationLinkId, NavigationLayout } from '../../../types/client/navigation';
 import { ROLLUP_TYPES } from '../../../types/client/rollup';
 import type { BridgedTokenChain, TokenBridge } from '../../../types/client/token';
 import { PROVIDERS as TX_INTERPRETATION_PROVIDERS } from '../../../types/client/txInterpretation';
@@ -25,8 +29,11 @@ import type { ValidatorsChainType } from '../../../types/client/validators';
 import type { WalletType } from '../../../types/client/wallets';
 import { SUPPORTED_WALLETS } from '../../../types/client/wallets';
 import type { CustomLink, CustomLinksGroup } from '../../../types/footerLinks';
-import type { ChainIndicatorId } from '../../../types/homepage';
-import { type NetworkVerificationType, type NetworkExplorer, type FeaturedNetwork, NETWORK_GROUPS } from '../../../types/networks';
+import { CHAIN_INDICATOR_IDS, HOME_STATS_WIDGET_IDS } from '../../../types/homepage';
+import type { ChainIndicatorId, HeroBannerButtonState, HeroBannerConfig, HomeStatsWidgetId } from '../../../types/homepage';
+import { type NetworkVerificationTypeEnvs, type NetworkExplorer, type FeaturedNetwork, NETWORK_GROUPS } from '../../../types/networks';
+import { COLOR_THEME_IDS } from '../../../types/settings';
+import type { FontFamily } from '../../../types/ui';
 import type { AddressViewId } from '../../../types/views/address';
 import { ADDRESS_VIEWS_IDS, IDENTICON_TYPES } from '../../../types/views/address';
 import { BLOCK_FIELDS_IDS } from '../../../types/views/block';
@@ -37,6 +44,7 @@ import { TX_ADDITIONAL_FIELDS_IDS, TX_FIELDS_IDS } from '../../../types/views/tx
 
 import { replaceQuotes } from '../../../configs/app/utils';
 import * as regexp from '../../../lib/regexp';
+import type { IconName } from '../../../ui/shared/IconSvg';
 
 const protocols = [ 'http', 'https' ];
 
@@ -194,6 +202,46 @@ const marketplaceSchema = yup
         // eslint-disable-next-line max-len
         otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL cannot not be used without NEXT_PUBLIC_MARKETPLACE_ENABLED'),
       }),
+    NEXT_PUBLIC_MARKETPLACE_FEATURED_APP: yup
+      .string()
+      .when('NEXT_PUBLIC_MARKETPLACE_ENABLED', {
+        is: true,
+        then: (schema) => schema,
+        // eslint-disable-next-line max-len
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_MARKETPLACE_FEATURED_APP cannot not be used without NEXT_PUBLIC_MARKETPLACE_ENABLED'),
+      }),
+    NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL: yup
+      .string()
+      .when('NEXT_PUBLIC_MARKETPLACE_ENABLED', {
+        is: true,
+        then: (schema) => schema.test(urlTest),
+        // eslint-disable-next-line max-len
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL cannot not be used without NEXT_PUBLIC_MARKETPLACE_ENABLED'),
+      }),
+    NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL: yup
+      .string()
+      .when('NEXT_PUBLIC_MARKETPLACE_ENABLED', {
+        is: true,
+        then: (schema) => schema.test(urlTest),
+        // eslint-disable-next-line max-len
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL cannot not be used without NEXT_PUBLIC_MARKETPLACE_ENABLED'),
+      }),
+    NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY: yup
+      .string()
+      .when('NEXT_PUBLIC_MARKETPLACE_ENABLED', {
+        is: true,
+        then: (schema) => schema,
+        // eslint-disable-next-line max-len
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY cannot not be used without NEXT_PUBLIC_MARKETPLACE_ENABLED'),
+      }),
+    NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID: yup
+      .string()
+      .when('NEXT_PUBLIC_MARKETPLACE_ENABLED', {
+        is: true,
+        then: (schema) => schema,
+        // eslint-disable-next-line max-len
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID cannot not be used without NEXT_PUBLIC_MARKETPLACE_ENABLED'),
+      }),
   });
 
 const beaconChainSchema = yup
@@ -228,7 +276,7 @@ const rollupSchema = yup
       .when('NEXT_PUBLIC_ROLLUP_TYPE', {
         is: (value: string) => value === 'optimistic',
         then: (schema) => schema.test(urlTest).required(),
-        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL cannot not be used if NEXT_PUBLIC_ROLLUP_TYPE is not defined'),
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL can be used only if NEXT_PUBLIC_ROLLUP_TYPE is set to \'optimistic\' '),
       }),
   });
 
@@ -324,13 +372,6 @@ const accountSchema = yup
         then: (schema) => schema.test(urlTest).required(),
         otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_LOGOUT_URL cannot not be used if NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED is not set to "true"'),
       }),
-    NEXT_PUBLIC_ADMIN_SERVICE_API_HOST: yup
-      .string()
-      .when('NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED', {
-        is: (value: boolean) => value,
-        then: (schema) => schema.test(urlTest),
-        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_ADMIN_SERVICE_API_HOST cannot not be used if NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED is not set to "true"'),
-      }),
   });
 
 const featuredNetworkSchema: yup.ObjectSchema<FeaturedNetwork> = yup
@@ -350,6 +391,34 @@ const navItemExternalSchema: yup.ObjectSchema<NavItemExternal> = yup
     url: yup.string().test(urlTest).required(),
   });
 
+const fontFamilySchema: yup.ObjectSchema<FontFamily> = yup
+  .object()
+  .transform(replaceQuotes)
+  .json()
+  .shape({
+    name: yup.string().required(),
+    url: yup.string().test(urlTest).required(),
+  });
+
+const heroBannerButtonStateSchema: yup.ObjectSchema<HeroBannerButtonState> = yup.object({
+  background: yup.array().max(2).of(yup.string()),
+  text_color: yup.array().max(2).of(yup.string()),
+});
+
+const heroBannerSchema: yup.ObjectSchema<HeroBannerConfig> = yup.object()
+  .transform(replaceQuotes)
+  .json()
+  .shape({
+    background: yup.array().max(2).of(yup.string()),
+    text_color: yup.array().max(2).of(yup.string()),
+    border: yup.array().max(2).of(yup.string()),
+    button: yup.object({
+      _default: heroBannerButtonStateSchema,
+      _hover: heroBannerButtonStateSchema,
+      _selected: heroBannerButtonStateSchema,
+    }),
+  });
+
 const footerLinkSchema: yup.ObjectSchema<CustomLink> = yup
   .object({
     text: yup.string().required(),
@@ -430,6 +499,17 @@ const bridgedTokensSchema = yup
       }),
   });
 
+const deFiDropdownItemSchema: yup.ObjectSchema<DeFiDropdownItem> = yup
+  .object({
+    text: yup.string().required(),
+    icon: yup.string<IconName>().required(),
+    dappId: yup.string(),
+    url: yup.string().test(urlTest),
+  })
+  .test('oneOfRequired', 'NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS: Either dappId or url is required', function(value) {
+    return Boolean(value.dappId) || Boolean(value.url);
+  }) as yup.ObjectSchema<DeFiDropdownItem>;
+
 const schema = yup
   .object()
   .noUnknown(true, (params) => {
@@ -457,8 +537,20 @@ const schema = yup
     NEXT_PUBLIC_NETWORK_CURRENCY_WEI_NAME: yup.string(),
     NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL: yup.string(),
     NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS: yup.number().integer().positive(),
-    NEXT_PUBLIC_NETWORK_GOVERNANCE_TOKEN_SYMBOL: yup.string(),
-    NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE: yup.string<NetworkVerificationType>().oneOf([ 'validation', 'mining' ]),
+    NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL: yup.string(),
+    NEXT_PUBLIC_NETWORK_MULTIPLE_GAS_CURRENCIES: yup.boolean(),
+    NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE: yup
+      .string<NetworkVerificationTypeEnvs>().oneOf([ 'validation', 'mining' ])
+      .when('NEXT_PUBLIC_ROLLUP_TYPE', {
+        is: (value: string) => value === 'arbitrum' || value === 'zkEvm',
+        then: (schema) => schema.test(
+          'not-exist',
+          'NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE can not be set for Arbitrum and ZkEVM rollups',
+          value => value === undefined,
+        ),
+        otherwise: (schema) => schema,
+      }),
+    NEXT_PUBLIC_NETWORK_TOKEN_STANDARD_NAME: yup.string(),
     NEXT_PUBLIC_IS_TESTNET: yup.boolean(),
 
     // 3. API configuration
@@ -474,10 +566,31 @@ const schema = yup
       .array()
       .transform(replaceQuotes)
       .json()
-      .of(yup.string<ChainIndicatorId>().oneOf([ 'daily_txs', 'coin_price', 'market_cap', 'tvl' ])),
+      .of(yup.string<ChainIndicatorId>().oneOf(CHAIN_INDICATOR_IDS)),
+    NEXT_PUBLIC_HOMEPAGE_STATS: yup
+      .array()
+      .transform(replaceQuotes)
+      .json()
+      .of(yup.string<HomeStatsWidgetId>().oneOf(HOME_STATS_WIDGET_IDS)),
     NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR: yup.string(),
     NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND: yup.string(),
-    NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME: yup.boolean(),
+    NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG: yup
+      .mixed()
+      .test(
+        'shape',
+        (ctx) => {
+          try {
+            heroBannerSchema.validateSync(ctx.originalValue);
+            throw new Error('Unknown validation error');
+          } catch (error: unknown) {
+            const message = typeof error === 'object' && error !== null && 'errors' in error && Array.isArray(error.errors) ? error.errors.join(', ') : '';
+            return 'Invalid schema were provided for NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG' + (message ? `: ${ message }` : '');
+          }
+        },
+        (data) => {
+          const isUndefined = data === undefined;
+          return isUndefined || heroBannerSchema.isValidSync(data);
+        }),
 
     //     b. sidebar
     NEXT_PUBLIC_FEATURED_NETWORKS: yup
@@ -494,6 +607,12 @@ const schema = yup
       .transform(replaceQuotes)
       .json()
       .of(yup.string<NavigationLinkId>().oneOf(NAVIGATION_LINK_IDS)),
+    NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES: yup
+      .array()
+      .transform(replaceQuotes)
+      .json()
+      .of(yup.string()),
+    NEXT_PUBLIC_NAVIGATION_LAYOUT: yup.string<NavigationLayout>().oneOf([ 'horizontal', 'vertical' ]),
     NEXT_PUBLIC_NETWORK_LOGO: yup.string().test(urlTest),
     NEXT_PUBLIC_NETWORK_LOGO_DARK: yup.string().test(urlTest),
     NEXT_PUBLIC_NETWORK_ICON: yup.string().test(urlTest),
@@ -518,6 +637,21 @@ const schema = yup
       .json()
       .of(yup.string<AddressViewId>().oneOf(ADDRESS_VIEWS_IDS)),
     NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED: yup.boolean(),
+    NEXT_PUBLIC_VIEWS_CONTRACT_EXTRA_VERIFICATION_METHODS: yup
+      .mixed()
+      .test(
+        'shape',
+        'Invalid schema were provided for NEXT_PUBLIC_VIEWS_CONTRACT_EXTRA_VERIFICATION_METHODS, it should be either array of method ids or "none" string literal',
+        (data) => {
+          const isNoneSchema = yup.string().oneOf([ 'none' ]);
+          const isArrayOfMethodsSchema = yup
+            .array()
+            .transform(replaceQuotes)
+            .json()
+            .of(yup.string<SmartContractVerificationMethodExtra>().oneOf(SMART_CONTRACT_EXTRA_VERIFICATION_METHODS));
+
+          return isNoneSchema.isValidSync(data) || isArrayOfMethodsSchema.isValidSync(data);
+        }),
     NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS: yup
       .array()
       .transform(replaceQuotes)
@@ -549,14 +683,46 @@ const schema = yup
     NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS: yup.boolean(),
     NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS: yup.boolean(),
     NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE: yup.string(),
+    NEXT_PUBLIC_COLOR_THEME_DEFAULT: yup.string().oneOf(COLOR_THEME_IDS),
+    NEXT_PUBLIC_FONT_FAMILY_HEADING: yup
+      .mixed()
+      .test('shape', 'Invalid schema were provided for NEXT_PUBLIC_FONT_FAMILY_HEADING', (data) => {
+        const isUndefined = data === undefined;
+        return isUndefined || fontFamilySchema.isValidSync(data);
+      }),
+    NEXT_PUBLIC_FONT_FAMILY_BODY: yup
+      .mixed()
+      .test('shape', 'Invalid schema were provided for NEXT_PUBLIC_FONT_FAMILY_BODY', (data) => {
+        const isUndefined = data === undefined;
+        return isUndefined || fontFamilySchema.isValidSync(data);
+      }),
+    NEXT_PUBLIC_MAX_CONTENT_WIDTH_ENABLED: yup.boolean(),
 
     // 5. Features configuration
-    NEXT_PUBLIC_API_SPEC_URL: yup.string().test(urlTest),
+    NEXT_PUBLIC_API_SPEC_URL: yup
+      .mixed()
+      .test('shape', 'Invalid schema were provided for NEXT_PUBLIC_API_SPEC_URL, it should be either URL-string or "none" string literal', (data) => {
+        const isNoneSchema = yup.string().oneOf([ 'none' ]);
+        const isUrlStringSchema = yup.string().test(urlTest);
+
+        return isNoneSchema.isValidSync(data) || isUrlStringSchema.isValidSync(data);
+      }),
     NEXT_PUBLIC_STATS_API_HOST: yup.string().test(urlTest),
+    NEXT_PUBLIC_STATS_API_BASE_PATH: yup.string(),
     NEXT_PUBLIC_VISUALIZE_API_HOST: yup.string().test(urlTest),
+    NEXT_PUBLIC_VISUALIZE_API_BASE_PATH: yup.string(),
     NEXT_PUBLIC_CONTRACT_INFO_API_HOST: yup.string().test(urlTest),
     NEXT_PUBLIC_NAME_SERVICE_API_HOST: yup.string().test(urlTest),
-    NEXT_PUBLIC_GRAPHIQL_TRANSACTION: yup.string().matches(regexp.HEX_REGEXP),
+    NEXT_PUBLIC_METADATA_SERVICE_API_HOST: yup.string().test(urlTest),
+    NEXT_PUBLIC_ADMIN_SERVICE_API_HOST: yup.string().test(urlTest),
+    NEXT_PUBLIC_GRAPHIQL_TRANSACTION: yup
+      .mixed()
+      .test('shape', 'Invalid schema were provided for NEXT_PUBLIC_GRAPHIQL_TRANSACTION, it should be either Hex-string or "none" string literal', (data) => {
+        const isNoneSchema = yup.string().oneOf([ 'none' ]);
+        const isHashStringSchema = yup.string().matches(regexp.HEX_REGEXP);
+
+        return isNoneSchema.isValidSync(data) || isHashStringSchema.isValidSync(data);
+      }),
     NEXT_PUBLIC_WEB3_WALLETS: yup
       .mixed()
       .test('shape', 'Invalid schema were provided for NEXT_PUBLIC_WEB3_WALLETS, it should be either array or "none" string literal', (data) => {
@@ -575,15 +741,68 @@ const schema = yup
     NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE: yup.boolean(),
     NEXT_PUBLIC_OG_DESCRIPTION: yup.string(),
     NEXT_PUBLIC_OG_IMAGE_URL: yup.string().test(urlTest),
+    NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED: yup.boolean(),
+    NEXT_PUBLIC_SEO_ENHANCED_DATA_ENABLED: yup.boolean(),
     NEXT_PUBLIC_SAFE_TX_SERVICE_URL: yup.string().test(urlTest),
     NEXT_PUBLIC_IS_SUAVE_CHAIN: yup.boolean(),
     NEXT_PUBLIC_HAS_USER_OPS: yup.boolean(),
     NEXT_PUBLIC_METASUITES_ENABLED: yup.boolean(),
-    NEXT_PUBLIC_SWAP_BUTTON_URL: yup.string(),
+    NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG: yup
+      .mixed()
+      .test('shape', 'Invalid schema were provided for NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG, it should have name and url template', (data) => {
+        const isUndefined = data === undefined;
+        const valueSchema = yup.object<MultichainProviderConfig>().transform(replaceQuotes).json().shape({
+          name: yup.string().required(),
+          url_template: yup.string().required(),
+          logo: yup.string(),
+          dapp_id: yup.string(),
+        });
+
+        return isUndefined || valueSchema.isValidSync(data);
+      }),
+    NEXT_PUBLIC_GAS_REFUEL_PROVIDER_CONFIG: yup
+      .mixed()
+      .test('shape', 'Invalid schema were provided for NEXT_PUBLIC_GAS_REFUEL_PROVIDER_CONFIG, it should have name and url template', (data) => {
+        const isUndefined = data === undefined;
+        const valueSchema = yup.object<GasRefuelProviderConfig>().transform(replaceQuotes).json().shape({
+          name: yup.string().required(),
+          url_template: yup.string().required(),
+          logo: yup.string(),
+          dapp_id: yup.string(),
+        });
+
+        return isUndefined || valueSchema.isValidSync(data);
+      }),
     NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE: yup.string<ValidatorsChainType>().oneOf(VALIDATORS_CHAIN_TYPE),
     NEXT_PUBLIC_GAS_TRACKER_ENABLED: yup.boolean(),
     NEXT_PUBLIC_GAS_TRACKER_UNITS: yup.array().transform(replaceQuotes).json().of(yup.string<GasUnit>().oneOf(GAS_UNITS)),
     NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED: yup.boolean(),
+    NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS: yup
+      .array()
+      .transform(replaceQuotes)
+      .json()
+      .of(deFiDropdownItemSchema),
+    NEXT_PUBLIC_FAULT_PROOF_ENABLED: yup.boolean()
+      .when('NEXT_PUBLIC_ROLLUP_TYPE', {
+        is: 'optimistic',
+        then: (schema) => schema,
+        otherwise: (schema) => schema.test(
+          'not-exist',
+          'NEXT_PUBLIC_FAULT_PROOF_ENABLED can only be used with NEXT_PUBLIC_ROLLUP_TYPE=optimistic',
+          value => value === undefined,
+        ),
+      }),
+    NEXT_PUBLIC_HAS_MUD_FRAMEWORK: yup.boolean()
+      .when('NEXT_PUBLIC_ROLLUP_TYPE', {
+        is: 'optimistic',
+        then: (schema) => schema,
+        otherwise: (schema) => schema.test(
+          'not-exist',
+          'NEXT_PUBLIC_HAS_MUD_FRAMEWORK can only be used with NEXT_PUBLIC_ROLLUP_TYPE=optimistic',
+          value => value === undefined,
+        ),
+      }),
+    NEXT_PUBLIC_SAVE_ON_GAS_ENABLED: yup.boolean(),
 
     // 6. External services envs
     NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: yup.string(),
diff --git a/deploy/tools/envs-validator/test.sh b/deploy/tools/envs-validator/test.sh
index 179ef25bc9..46d3ea3fca 100755
--- a/deploy/tools/envs-validator/test.sh
+++ b/deploy/tools/envs-validator/test.sh
@@ -1,6 +1,5 @@
 #!/bin/bash
 
-secrets_file=".env.secrets"
 test_folder="./test"
 common_file="${test_folder}/.env.common"
 
@@ -8,10 +7,9 @@ common_file="${test_folder}/.env.common"
 export NEXT_PUBLIC_GIT_COMMIT_SHA=$(git rev-parse --short HEAD)
 export NEXT_PUBLIC_GIT_TAG=$(git describe --tags --abbrev=0)
 ../../scripts/collect_envs.sh ../../../docs/ENVS.md
-cp ../../../.env.example ${secrets_file}
 
 # Copy test assets
-mkdir -p "./public/assets"
+mkdir -p "./public/assets/configs"
 cp -r ${test_folder}/assets ./public/
 
 # Build validator script
@@ -26,7 +24,6 @@ validate_file() {
     dotenv \
         -e $test_file \
         -e $common_file \
-        -e $secrets_file \
             yarn run validate -- --silent
 
     if [ $? -eq 0 ]; then
@@ -46,4 +43,4 @@ for file in "${test_files[@]}"; do
     if [ $? -eq 1 ]; then
         exit 1
     fi
-done
\ No newline at end of file
+done
diff --git a/deploy/tools/envs-validator/test/.env.alt b/deploy/tools/envs-validator/test/.env.alt
new file mode 100644
index 0000000000..6482ea4197
--- /dev/null
+++ b/deploy/tools/envs-validator/test/.env.alt
@@ -0,0 +1,4 @@
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=none
+NEXT_PUBLIC_API_SPEC_URL=none
+NEXT_PUBLIC_VIEWS_CONTRACT_EXTRA_VERIFICATION_METHODS=none
+NEXT_PUBLIC_HOMEPAGE_STATS=[]
\ No newline at end of file
diff --git a/deploy/tools/envs-validator/test/.env.base b/deploy/tools/envs-validator/test/.env.base
index 559c63fc79..f5231bdb0e 100644
--- a/deploy/tools/envs-validator/test/.env.base
+++ b/deploy/tools/envs-validator/test/.env.base
@@ -1,3 +1,15 @@
+NEXT_PUBLIC_SENTRY_DSN=https://sentry.io
+NEXT_PUBLIC_AUTH_URL=https://example.com
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_LOGOUT_URL=https://example.com
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=xxx
+NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=xxx
+NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID=UA-XXXXXX-X
+NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN=xxx
+NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY=xxx
+NEXT_PUBLIC_AUTH0_CLIENT_ID=xxx
+FAVICON_GENERATOR_API_KEY=xxx
+NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY=xxx
 NEXT_PUBLIC_AD_TEXT_PROVIDER=coinzilla
 NEXT_PUBLIC_AD_BANNER_PROVIDER=slise
 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://example.com
@@ -9,28 +21,38 @@ NEXT_PUBLIC_APP_PORT=3000
 NEXT_PUBLIC_APP_PROTOCOL=http
 NEXT_PUBLIC_BRIDGED_TOKENS_CHAINS=[{'id':'1','title':'Ethereum','short_title':'ETH','base_url':'https://example.com'}]
 NEXT_PUBLIC_BRIDGED_TOKENS_BRIDGES=[{'type':'omni','title':'OmniBridge','short_title':'OMNI'}]
+NEXT_PUBLIC_COLOR_THEME_DEFAULT=dim
 NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.blockscout.com/?address={hash}&blockscout={domain}','icon_url':'https://example.com/icon.svg'}]
 NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://example.com
 NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED=true
 NEXT_PUBLIC_FEATURED_NETWORKS=https://example.com
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/accounts','/apps']
+NEXT_PUBLIC_NAVIGATION_LAYOUT=horizontal
+NEXT_PUBLIC_FONT_FAMILY_HEADING={'name':'Montserrat','url':'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap'}
+NEXT_PUBLIC_FONT_FAMILY_BODY={'name':'Raleway','url':'https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap'}
 NEXT_PUBLIC_FOOTER_LINKS=https://example.com
 NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
 NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS=false
 NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS=false
+NEXT_PUBLIC_MAX_CONTENT_WIDTH_ENABLED=false
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_STATS=['total_blocks','average_block_time','total_txs','wallet_addresses','gas_tracker','current_epoch']
 NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR='#fff'
 NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND='rgb(255, 145, 0)'
-NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME=true
+NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG={'background':['lightpink'],'text_color':['deepskyblue','white'],'border':['3px solid black']}
 NEXT_PUBLIC_GAS_TRACKER_ENABLED=true
 NEXT_PUBLIC_GAS_TRACKER_UNITS=['gwei']
 NEXT_PUBLIC_IS_TESTNET=true
 NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE='<a href="#">Hello</a>'
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://example.com
 NEXT_PUBLIC_METASUITES_ENABLED=true
+NEXT_PUBLIC_NAVIGATION_HIDDEN_LINKS=['eth_rpc_api','rpc_api']
 NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
 NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
 NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Explorer','baseUrl':'https://example.com/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]
-NEXT_PUBLIC_NETWORK_GOVERNANCE_TOKEN_SYMBOL=gETH
+NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL=GNO
+NEXT_PUBLIC_NETWORK_MULTIPLE_GAS_CURRENCIES=true
 NEXT_PUBLIC_NETWORK_ICON=https://example.com/icon.png
 NEXT_PUBLIC_NETWORK_ICON_DARK=https://example.com/icon.png
 NEXT_PUBLIC_NETWORK_LOGO=https://example.com/logo.png
@@ -40,19 +62,27 @@ NEXT_PUBLIC_NETWORK_SHORT_NAME=Test
 NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
 NEXT_PUBLIC_OG_DESCRIPTION='Hello world!'
 NEXT_PUBLIC_OG_IMAGE_URL=https://example.com/image.png
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_SEO_ENHANCED_DATA_ENABLED=true
 NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://blockscout.com','text':'Blockscout'}]
 NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE=true
 NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-mainnet.safe.global
 NEXT_PUBLIC_STATS_API_HOST=https://example.com
+NEXT_PUBLIC_STATS_API_BASE_PATH=/
 NEXT_PUBLIC_USE_NEXT_JS_PROXY=false
 NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE=gradient_avatar
 NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS=['top_accounts']
+NEXT_PUBLIC_VIEWS_CONTRACT_EXTRA_VERIFICATION_METHODS=['solidity-hardhat','solidity-foundry']
 NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS=['burnt_fees','total_reward']
 NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES=[{'name':'NFT Marketplace','collection_url':'https://example.com/{hash}','instance_url':'https://example.com/{hash}/{id}','logo_url':'https://example.com/logo.png'}]
 NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS=['fee_per_gas']
 NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS=['value','fee_currency','gas_price','tx_fee','gas_fees','burnt_fees']
 NEXT_PUBLIC_VISUALIZE_API_HOST=https://example.com
+NEXT_PUBLIC_VISUALIZE_API_BASE_PATH=https://example.com
 NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET=false
 NEXT_PUBLIC_WEB3_WALLETS=['coinbase','metamask','token_pocket']
-NEXT_PUBLIC_SWAP_BUTTON_URL=uniswap
-NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE=stability
\ No newline at end of file
+NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE=stability
+NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swap','icon':'swap','dappId':'uniswap'},{'text':'Payment link','icon':'payment_link','url':'https://example.com'}]
+NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG={'name': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'}
+NEXT_PUBLIC_GAS_REFUEL_PROVIDER_CONFIG={'name': 'Need gas?', 'dapp_id': 'smol-refuel', 'url_template': 'https://smolrefuel.com/?outboundChain={chainId}&partner=blockscout&utm_source=blockscout&utm_medium=address&disableBridges=true', 'logo': 'https://blockscout-content.s3.amazonaws.com/smolrefuel-logo-action-button.png'}
+NEXT_PUBLIC_SAVE_ON_GAS_ENABLED=true
diff --git a/deploy/tools/envs-validator/test/.env.common b/deploy/tools/envs-validator/test/.env.common
index 1f900840ff..5788f392d3 100644
--- a/deploy/tools/envs-validator/test/.env.common
+++ b/deploy/tools/envs-validator/test/.env.common
@@ -1,7 +1,4 @@
 NEXT_PUBLIC_API_HOST=blockscout.com
 NEXT_PUBLIC_APP_HOST=localhost
-NEXT_PUBLIC_AUTH_URL=https://example.com
-NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
-NEXT_PUBLIC_LOGOUT_URL=https://example.com
 NEXT_PUBLIC_NETWORK_ID=1
 NEXT_PUBLIC_NETWORK_NAME=Testnet
diff --git a/deploy/tools/envs-validator/test/.env.marketplace b/deploy/tools/envs-validator/test/.env.marketplace
index eaf12c6dc9..6cc6b1f839 100644
--- a/deploy/tools/envs-validator/test/.env.marketplace
+++ b/deploy/tools/envs-validator/test/.env.marketplace
@@ -5,3 +5,8 @@ NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://example.com
 NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://example.com
 NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL=https://example.com
 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://example.com
+NEXT_PUBLIC_MARKETPLACE_FEATURED_APP=aave
+NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/maxaleks/36f779fd7d74877b57ec7a25a9a3a6c9/raw/746a8a59454c0537235ee44616c4690ce3bbf3c8/banner.html
+NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://www.basename.app
+NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY=test
+NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID=test
diff --git a/deploy/tools/envs-validator/test/.env.rollup b/deploy/tools/envs-validator/test/.env.rollup
index 1cb3e1af88..4cff2bb371 100644
--- a/deploy/tools/envs-validator/test/.env.rollup
+++ b/deploy/tools/envs-validator/test/.env.rollup
@@ -1,3 +1,4 @@
 NEXT_PUBLIC_ROLLUP_TYPE=optimistic
 NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://example.com
-NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://example.com
\ No newline at end of file
+NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://example.com
+NEXT_PUBLIC_FAULT_PROOF_ENABLED=true
diff --git a/deploy/tools/envs-validator/test/assets/featured_networks.json b/deploy/tools/envs-validator/test/assets/configs/featured_networks.json
similarity index 100%
rename from deploy/tools/envs-validator/test/assets/featured_networks.json
rename to deploy/tools/envs-validator/test/assets/configs/featured_networks.json
diff --git a/deploy/tools/envs-validator/test/assets/footer_links.json b/deploy/tools/envs-validator/test/assets/configs/footer_links.json
similarity index 100%
rename from deploy/tools/envs-validator/test/assets/footer_links.json
rename to deploy/tools/envs-validator/test/assets/configs/footer_links.json
diff --git a/deploy/tools/envs-validator/test/assets/configs/marketplace_categories.json b/deploy/tools/envs-validator/test/assets/configs/marketplace_categories.json
new file mode 100644
index 0000000000..15b31a5557
--- /dev/null
+++ b/deploy/tools/envs-validator/test/assets/configs/marketplace_categories.json
@@ -0,0 +1,5 @@
+[
+  "Swaps",
+  "Bridges",
+  "NFT"
+]
diff --git a/deploy/tools/envs-validator/test/assets/marketplace_config.json b/deploy/tools/envs-validator/test/assets/configs/marketplace_config.json
similarity index 100%
rename from deploy/tools/envs-validator/test/assets/marketplace_config.json
rename to deploy/tools/envs-validator/test/assets/configs/marketplace_config.json
diff --git a/deploy/tools/envs-validator/test/assets/configs/marketplace_security_reports.json b/deploy/tools/envs-validator/test/assets/configs/marketplace_security_reports.json
new file mode 100644
index 0000000000..cf0f481ae3
--- /dev/null
+++ b/deploy/tools/envs-validator/test/assets/configs/marketplace_security_reports.json
@@ -0,0 +1,1073 @@
+[
+  {
+    "appName": "paraswap",
+    "doc": "https://developers.paraswap.network/smart-contracts",
+    "chainsData": {
+      "1": {
+        "overallInfo": {
+          "verifiedNumber": 4,
+          "totalContractsNumber": 4,
+          "solidityScanContractsNumber": 4,
+          "securityScore": 77.41749999999999,
+          "issueSeverityDistribution": {
+            "critical": 5,
+            "gas": 58,
+            "high": 9,
+            "informational": 27,
+            "low": 41,
+            "medium": 5
+          }
+        },
+        "contractsData": [
+          {
+            "address": "0xDEF171Fe48CF0115B1d80b88dc8eAB59176FEe57",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0xDEF171Fe48CF0115B1d80b88dc8eAB59176FEe57",
+              "contract_chain": "optimism",
+              "contract_platform": "blockscout",
+              "contract_url": "https://optimism.blockscout.com/address/0xDEF171Fe48CF0115B1d80b88dc8eAB59176FEe57",
+              "contractname": "AugustusSwapper",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0xDEF171Fe48CF0115B1d80b88dc8eAB59176FEe57/blockscout/eth?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 8,
+                  "high": 4,
+                  "informational": 7,
+                  "low": 8,
+                  "medium": 1
+                },
+                "lines_analyzed_count": 180,
+                "scan_time_taken": 1,
+                "score": "3.61",
+                "score_v2": "72.22",
+                "threat_score": "73.68"
+              }
+            }
+          },
+          {
+            "address": "0x216b4b4ba9f3e719726886d34a177484278bfcae",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x216b4b4ba9f3e719726886d34a177484278bfcae",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0x216b4b4ba9f3e719726886d34a177484278bfcae",
+              "contractname": "TokenTransferProxy",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x216b4b4ba9f3e719726886d34a177484278bfcae/blockscout/eth?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 1,
+                  "gas": 29,
+                  "high": 5,
+                  "informational": 14,
+                  "low": 21,
+                  "medium": 3
+                },
+                "lines_analyzed_count": 553,
+                "scan_time_taken": 1,
+                "score": "3.92",
+                "score_v2": "78.48",
+                "threat_score": "78.95"
+              }
+            }
+          },
+          {
+            "address": "0xa68bEA62Dc4034A689AA0F58A76681433caCa663",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0xa68bEA62Dc4034A689AA0F58A76681433caCa663",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0xa68bEA62Dc4034A689AA0F58A76681433caCa663",
+              "contractname": "AugustusRegistry",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0xa68bEA62Dc4034A689AA0F58A76681433caCa663/blockscout/eth?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 3,
+                  "high": 0,
+                  "informational": 5,
+                  "low": 4,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 103,
+                "scan_time_taken": 0,
+                "score": "4.22",
+                "score_v2": "84.47",
+                "threat_score": "88.89"
+              }
+            }
+          },
+          {
+            "address": "0xeF13101C5bbD737cFb2bF00Bbd38c626AD6952F7",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0xeF13101C5bbD737cFb2bF00Bbd38c626AD6952F7",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0xeF13101C5bbD737cFb2bF00Bbd38c626AD6952F7",
+              "contractname": "FeeClaimer",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0xeF13101C5bbD737cFb2bF00Bbd38c626AD6952F7/blockscout/eth?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 18,
+                  "high": 0,
+                  "informational": 1,
+                  "low": 8,
+                  "medium": 1
+                },
+                "lines_analyzed_count": 149,
+                "scan_time_taken": 0,
+                "score": "3.72",
+                "score_v2": "74.50",
+                "threat_score": "94.74"
+              }
+            }
+          }
+        ]
+      },
+      "10": {
+        "overallInfo": {
+          "verifiedNumber": 3,
+          "totalContractsNumber": 4,
+          "solidityScanContractsNumber": 3,
+          "securityScore": 75.44333333333333,
+          "issueSeverityDistribution": {
+            "critical": 4,
+            "gas": 29,
+            "high": 4,
+            "informational": 20,
+            "low": 20,
+            "medium": 2
+          }
+        },
+        "contractsData": [
+          {
+            "address": "0xDEF171Fe48CF0115B1d80b88dc8eAB59176FEe57",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0xDEF171Fe48CF0115B1d80b88dc8eAB59176FEe57",
+              "contract_chain": "optimism",
+              "contract_platform": "blockscout",
+              "contract_url": "https://optimism.blockscout.com/address/0xDEF171Fe48CF0115B1d80b88dc8eAB59176FEe57",
+              "contractname": "AugustusSwapper",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0xDEF171Fe48CF0115B1d80b88dc8eAB59176FEe57/blockscout/optimism?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 8,
+                  "high": 4,
+                  "informational": 7,
+                  "low": 8,
+                  "medium": 1
+                },
+                "lines_analyzed_count": 180,
+                "scan_time_taken": 1,
+                "score": "3.61",
+                "score_v2": "72.22",
+                "threat_score": "73.68"
+              }
+            }
+          },
+          {
+            "address": "0x216B4B4Ba9F3e719726886d34a177484278Bfcae",
+            "isVerified": false,
+            "solidityScanReport": null
+          },
+          {
+            "address": "0x6e7bE86000dF697facF4396efD2aE2C322165dC3",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x6e7bE86000dF697facF4396efD2aE2C322165dC3",
+              "contract_chain": "optimism",
+              "contract_platform": "blockscout",
+              "contract_url": "https://optimism.blockscout.com/address/0x6e7bE86000dF697facF4396efD2aE2C322165dC3",
+              "contractname": "AugustusRegistry",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x6e7bE86000dF697facF4396efD2aE2C322165dC3/blockscout/optimism?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 3,
+                  "high": 0,
+                  "informational": 5,
+                  "low": 4,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 102,
+                "scan_time_taken": 0,
+                "score": "4.22",
+                "score_v2": "84.31",
+                "threat_score": "88.89"
+              }
+            }
+          },
+          {
+            "address": "0xA7465CCD97899edcf11C56D2d26B49125674e45F",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0xA7465CCD97899edcf11C56D2d26B49125674e45F",
+              "contract_chain": "optimism",
+              "contract_platform": "blockscout",
+              "contract_url": "https://optimism.blockscout.com/address/0xA7465CCD97899edcf11C56D2d26B49125674e45F",
+              "contractname": "FeeClaimer",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0xA7465CCD97899edcf11C56D2d26B49125674e45F/blockscout/optimism?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 18,
+                  "high": 0,
+                  "informational": 8,
+                  "low": 8,
+                  "medium": 1
+                },
+                "lines_analyzed_count": 149,
+                "scan_time_taken": 1,
+                "score": "3.49",
+                "score_v2": "69.80",
+                "threat_score": "94.74"
+              }
+            }
+          }
+        ]
+      },
+      "8453": {
+        "overallInfo": {
+          "verifiedNumber": 1,
+          "totalContractsNumber": 4,
+          "solidityScanContractsNumber": 1,
+          "securityScore": 73.33,
+          "issueSeverityDistribution": {
+            "critical": 4,
+            "gas": 8,
+            "high": 4,
+            "informational": 5,
+            "low": 8,
+            "medium": 1
+          }
+        },
+        "contractsData": [
+          {
+            "address": "0x59C7C832e96D2568bea6db468C1aAdcbbDa08A52",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x59C7C832e96D2568bea6db468C1aAdcbbDa08A52",
+              "contract_chain": "base",
+              "contract_platform": "blockscout",
+              "contract_url": "https://base.blockscout.com/address/0x59C7C832e96D2568bea6db468C1aAdcbbDa08A52",
+              "contractname": "AugustusSwapper",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x59C7C832e96D2568bea6db468C1aAdcbbDa08A52/blockscout/base?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 8,
+                  "high": 4,
+                  "informational": 5,
+                  "low": 8,
+                  "medium": 1
+                },
+                "lines_analyzed_count": 180,
+                "scan_time_taken": 1,
+                "score": "3.67",
+                "score_v2": "73.33",
+                "threat_score": "73.68"
+              }
+            }
+          },
+          {
+            "address": "0x93aAAe79a53759cD164340E4C8766E4Db5331cD7",
+            "isVerified": false,
+            "solidityScanReport": null
+          },
+          {
+            "address": "0x7e31b336f9e8ba52ba3c4ac861b033ba90900bb3",
+            "isVerified": false,
+            "solidityScanReport": null
+          },
+          {
+            "address": "0x9aaB4B24541af30fD72784ED98D8756ac0eFb3C7",
+            "isVerified": false,
+            "solidityScanReport": null
+          }
+        ]
+      }
+    }
+  },
+  {
+    "appName": "mean-finance",
+    "doc": "https://docs.mean.finance/guides/smart-contract-registry",
+    "chainsData": {
+      "1": {
+        "overallInfo": {
+          "verifiedNumber": 4,
+          "totalContractsNumber": 6,
+          "solidityScanContractsNumber": 4,
+          "securityScore": 61.36750000000001,
+          "issueSeverityDistribution": {
+            "critical": 6,
+            "gas": 25,
+            "high": 1,
+            "informational": 10,
+            "low": 20,
+            "medium": 3
+          }
+        },
+        "contractsData": [
+          {
+            "address": "0xA5AdC5484f9997fBF7D405b9AA62A7d88883C345",
+            "isVerified": false,
+            "solidityScanReport": null
+          },
+          {
+            "address": "0x20bdAE1413659f47416f769a4B27044946bc9923",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x20bdAE1413659f47416f769a4B27044946bc9923",
+              "contract_chain": "optimism",
+              "contract_platform": "blockscout",
+              "contract_url": "https://optimism.blockscout.com/address/0x20bdAE1413659f47416f769a4B27044946bc9923",
+              "contractname": "DCAPermissionsManager",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x20bdAE1413659f47416f769a4B27044946bc9923/blockscout/eth?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 2,
+                  "gas": 22,
+                  "high": 0,
+                  "informational": 8,
+                  "low": 11,
+                  "medium": 3
+                },
+                "lines_analyzed_count": 314,
+                "scan_time_taken": 1,
+                "score": "3.87",
+                "score_v2": "77.39",
+                "threat_score": "88.89"
+              }
+            }
+          },
+          {
+            "address": "0xDf0dbc66f85979a1d54671c4D9e439F306Be27EE",
+            "isVerified": false,
+            "solidityScanReport": null
+          },
+          {
+            "address": "0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b",
+              "contractname": "DCAHubPositionDescriptor",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b/blockscout/eth?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 1,
+                  "high": 1,
+                  "informational": 2,
+                  "low": 3,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 280,
+                "scan_time_taken": 1,
+                "score": "4.77",
+                "score_v2": "95.36",
+                "threat_score": "100.00"
+              }
+            }
+          },
+          {
+            "address": "0x49c590F6a2dfB0f809E82B9e2BF788C0Dd1c31f9",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x49c590F6a2dfB0f809E82B9e2BF788C0Dd1c31f9",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0x49c590F6a2dfB0f809E82B9e2BF788C0Dd1c31f9",
+              "contractname": "DCAHubCompanion",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x49c590F6a2dfB0f809E82B9e2BF788C0Dd1c31f9/blockscout/eth?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 1,
+                  "high": 0,
+                  "informational": 0,
+                  "low": 3,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 11,
+                "scan_time_taken": 0,
+                "score": "1.82",
+                "score_v2": "36.36",
+                "threat_score": "100.00"
+              }
+            }
+          },
+          {
+            "address": "0x5ad2fED59E8DF461c6164c31B4267Efb7cBaF9C0",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x5ad2fED59E8DF461c6164c31B4267Efb7cBaF9C0",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0x5ad2fED59E8DF461c6164c31B4267Efb7cBaF9C0",
+              "contractname": "DCAHubCompanion",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x5ad2fED59E8DF461c6164c31B4267Efb7cBaF9C0/blockscout/eth?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 1,
+                  "high": 0,
+                  "informational": 0,
+                  "low": 3,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 11,
+                "scan_time_taken": 0,
+                "score": "1.82",
+                "score_v2": "36.36",
+                "threat_score": "100.00"
+              }
+            }
+          }
+        ]
+      },
+      "10": {
+        "overallInfo": {
+          "verifiedNumber": 5,
+          "totalContractsNumber": 6,
+          "solidityScanContractsNumber": 5,
+          "securityScore": 66.986,
+          "issueSeverityDistribution": {
+            "critical": 6,
+            "gas": 26,
+            "high": 1,
+            "informational": 10,
+            "low": 23,
+            "medium": 3
+          }
+        },
+        "contractsData": [
+          {
+            "address": "0xA5AdC5484f9997fBF7D405b9AA62A7d88883C345",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0xA5AdC5484f9997fBF7D405b9AA62A7d88883C345",
+              "contract_chain": "optimism",
+              "contract_platform": "blockscout",
+              "contract_url": "https://optimism.blockscout.com/address/0xA5AdC5484f9997fBF7D405b9AA62A7d88883C345",
+              "contractname": "DCAHub",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0xA5AdC5484f9997fBF7D405b9AA62A7d88883C345/blockscout/optimism?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 1,
+                  "high": 0,
+                  "informational": 0,
+                  "low": 3,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 23,
+                "scan_time_taken": 0,
+                "score": "3.48",
+                "score_v2": "69.57",
+                "threat_score": "94.44"
+              }
+            }
+          },
+          {
+            "address": "0x20bdAE1413659f47416f769a4B27044946bc9923",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x20bdAE1413659f47416f769a4B27044946bc9923",
+              "contract_chain": "optimism",
+              "contract_platform": "blockscout",
+              "contract_url": "https://optimism.blockscout.com/address/0x20bdAE1413659f47416f769a4B27044946bc9923",
+              "contractname": "DCAPermissionsManager",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x20bdAE1413659f47416f769a4B27044946bc9923/blockscout/optimism?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 2,
+                  "gas": 22,
+                  "high": 0,
+                  "informational": 8,
+                  "low": 11,
+                  "medium": 3
+                },
+                "lines_analyzed_count": 314,
+                "scan_time_taken": 1,
+                "score": "3.87",
+                "score_v2": "77.39",
+                "threat_score": "88.89"
+              }
+            }
+          },
+          {
+            "address": "0xDf0dbc66f85979a1d54671c4D9e439F306Be27EE",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0xDf0dbc66f85979a1d54671c4D9e439F306Be27EE",
+              "contract_chain": "optimism",
+              "contract_platform": "blockscout",
+              "contract_url": "https://optimism.blockscout.com/address/0xDf0dbc66f85979a1d54671c4D9e439F306Be27EE",
+              "contractname": "DCAHubCompanion",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0xDf0dbc66f85979a1d54671c4D9e439F306Be27EE/blockscout/optimism?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 1,
+                  "high": 0,
+                  "informational": 0,
+                  "low": 3,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 16,
+                "scan_time_taken": 0,
+                "score": "2.81",
+                "score_v2": "56.25",
+                "threat_score": "100.00"
+              }
+            }
+          },
+          {
+            "address": "0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b",
+              "contractname": "DCAHubPositionDescriptor",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b/blockscout/optimism?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 1,
+                  "high": 1,
+                  "informational": 2,
+                  "low": 3,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 280,
+                "scan_time_taken": 1,
+                "score": "4.77",
+                "score_v2": "95.36",
+                "threat_score": "100.00"
+              }
+            }
+          },
+          {
+            "address": "0x49c590F6a2dfB0f809E82B9e2BF788C0Dd1c31f9",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x49c590F6a2dfB0f809E82B9e2BF788C0Dd1c31f9",
+              "contract_chain": "optimism",
+              "contract_platform": "blockscout",
+              "contract_url": "https://optimism.blockscout.com/address/0x49c590F6a2dfB0f809E82B9e2BF788C0Dd1c31f9",
+              "contractname": "DCAHubCompanion",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x49c590F6a2dfB0f809E82B9e2BF788C0Dd1c31f9/blockscout/optimism?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 1,
+                  "high": 0,
+                  "informational": 0,
+                  "low": 3,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 11,
+                "scan_time_taken": 0,
+                "score": "1.82",
+                "score_v2": "36.36",
+                "threat_score": "100.00"
+              }
+            }
+          },
+          {
+            "address": "0x5ad2fED59E8DF461c6164c31B4267Efb7cBaF9C0",
+            "isVerified": false,
+            "solidityScanReport": null
+          }
+        ]
+      },
+      "8453": {
+        "overallInfo": {
+          "verifiedNumber": 4,
+          "totalContractsNumber": 6,
+          "solidityScanContractsNumber": 4,
+          "securityScore": 74.88,
+          "issueSeverityDistribution": {
+            "critical": 6,
+            "gas": 25,
+            "high": 1,
+            "informational": 7,
+            "low": 20,
+            "medium": 3
+          }
+        },
+        "contractsData": [
+          {
+            "address": "0xA5AdC5484f9997fBF7D405b9AA62A7d88883C345",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0xA5AdC5484f9997fBF7D405b9AA62A7d88883C345",
+              "contract_chain": "base",
+              "contract_platform": "blockscout",
+              "contract_url": "https://base.blockscout.com/address/0xA5AdC5484f9997fBF7D405b9AA62A7d88883C345",
+              "contractname": "DCAHub",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0xA5AdC5484f9997fBF7D405b9AA62A7d88883C345/blockscout/base?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 1,
+                  "high": 0,
+                  "informational": 0,
+                  "low": 3,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 23,
+                "scan_time_taken": 0,
+                "score": "3.48",
+                "score_v2": "69.57",
+                "threat_score": "94.44"
+              }
+            }
+          },
+          {
+            "address": "0x20bdAE1413659f47416f769a4B27044946bc9923",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x20bdAE1413659f47416f769a4B27044946bc9923",
+              "contract_chain": "base",
+              "contract_platform": "blockscout",
+              "contract_url": "https://base.blockscout.com/address/0x20bdAE1413659f47416f769a4B27044946bc9923",
+              "contractname": "DCAPermissionsManager",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x20bdAE1413659f47416f769a4B27044946bc9923/blockscout/base?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 2,
+                  "gas": 22,
+                  "high": 0,
+                  "informational": 5,
+                  "low": 11,
+                  "medium": 3
+                },
+                "lines_analyzed_count": 314,
+                "scan_time_taken": 1,
+                "score": "3.92",
+                "score_v2": "78.34",
+                "threat_score": "88.89"
+              }
+            }
+          },
+          {
+            "address": "0xDf0dbc66f85979a1d54671c4D9e439F306Be27EE",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0xDf0dbc66f85979a1d54671c4D9e439F306Be27EE",
+              "contract_chain": "base",
+              "contract_platform": "blockscout",
+              "contract_url": "https://base.blockscout.com/address/0xDf0dbc66f85979a1d54671c4D9e439F306Be27EE",
+              "contractname": "DCAHubCompanion",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0xDf0dbc66f85979a1d54671c4D9e439F306Be27EE/blockscout/base?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 1,
+                  "high": 0,
+                  "informational": 0,
+                  "low": 3,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 16,
+                "scan_time_taken": 0,
+                "score": "2.81",
+                "score_v2": "56.25",
+                "threat_score": "100.00"
+              }
+            }
+          },
+          {
+            "address": "0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b",
+              "contractname": "DCAHubPositionDescriptor",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x4ACd4BC402bc8e6BA8aBDdcA639d8011ef0b8a4b/blockscout/base?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 1,
+                  "high": 1,
+                  "informational": 2,
+                  "low": 3,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 280,
+                "scan_time_taken": 1,
+                "score": "4.77",
+                "score_v2": "95.36",
+                "threat_score": "100.00"
+              }
+            }
+          },
+          {
+            "address": "0x49c590F6a2dfB0f809E82B9e2BF788C0Dd1c31f9",
+            "isVerified": false,
+            "solidityScanReport": null
+          },
+          {
+            "address": "0x5ad2fED59E8DF461c6164c31B4267Efb7cBaF9C0",
+            "isVerified": false,
+            "solidityScanReport": null
+          }
+        ]
+      }
+    }
+  },
+  {
+    "appName": "cow-swap",
+    "doc": "https://docs.cow.fi/cow-protocol/reference/contracts/core#deployments",
+    "chainsData": {
+      "1": {
+        "overallInfo": {
+          "verifiedNumber": 3,
+          "totalContractsNumber": 3,
+          "solidityScanContractsNumber": 3,
+          "securityScore": 87.60000000000001,
+          "issueSeverityDistribution": {
+            "critical": 4,
+            "gas": 18,
+            "high": 0,
+            "informational": 13,
+            "low": 14,
+            "medium": 3
+          }
+        },
+        "contractsData": [
+          {
+            "address": "0x9008D19f58AAbD9eD0D60971565AA8510560ab41",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x9008D19f58AAbD9eD0D60971565AA8510560ab41",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0x9008D19f58AAbD9eD0D60971565AA8510560ab41",
+              "contractname": "GPv2Settlement",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x9008D19f58AAbD9eD0D60971565AA8510560ab41/blockscout/eth?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 16,
+                  "high": 0,
+                  "informational": 7,
+                  "low": 5,
+                  "medium": 3
+                },
+                "lines_analyzed_count": 493,
+                "scan_time_taken": 1,
+                "score": "4.57",
+                "score_v2": "91.48",
+                "threat_score": "94.74"
+              }
+            }
+          },
+          {
+            "address": "0x2c4c28DDBdAc9C5E7055b4C863b72eA0149D8aFE",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x2c4c28DDBdAc9C5E7055b4C863b72eA0149D8aFE",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0x2c4c28DDBdAc9C5E7055b4C863b72eA0149D8aFE",
+              "contractname": "EIP173Proxy",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x2c4c28DDBdAc9C5E7055b4C863b72eA0149D8aFE/blockscout/eth?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 0,
+                  "high": 0,
+                  "informational": 4,
+                  "low": 5,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 94,
+                "scan_time_taken": 0,
+                "score": "4.26",
+                "score_v2": "85.11",
+                "threat_score": "88.89"
+              }
+            }
+          },
+          {
+            "address": "0xC92E8bdf79f0507f65a392b0ab4667716BFE0110",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0xC92E8bdf79f0507f65a392b0ab4667716BFE0110",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0xC92E8bdf79f0507f65a392b0ab4667716BFE0110",
+              "contractname": "GPv2VaultRelayer",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0xC92E8bdf79f0507f65a392b0ab4667716BFE0110/blockscout/eth?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 2,
+                  "high": 0,
+                  "informational": 2,
+                  "low": 4,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 87,
+                "scan_time_taken": 0,
+                "score": "4.31",
+                "score_v2": "86.21",
+                "threat_score": "94.74"
+              }
+            }
+          }
+        ]
+      },
+      "100": {
+        "overallInfo": {
+          "verifiedNumber": 3,
+          "totalContractsNumber": 3,
+          "solidityScanContractsNumber": 3,
+          "securityScore": 87.60000000000001,
+          "issueSeverityDistribution": {
+            "critical": 4,
+            "gas": 18,
+            "high": 0,
+            "informational": 13,
+            "low": 14,
+            "medium": 3
+          }
+        },
+        "contractsData": [
+          {
+            "address": "0x9008D19f58AAbD9eD0D60971565AA8510560ab41",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x9008D19f58AAbD9eD0D60971565AA8510560ab41",
+              "contract_chain": "gnosis",
+              "contract_platform": "blockscout",
+              "contract_url": "https://gnosis.blockscout.com/address/0x9008D19f58AAbD9eD0D60971565AA8510560ab41",
+              "contractname": "GPv2Settlement",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x9008D19f58AAbD9eD0D60971565AA8510560ab41/blockscout/gnosis?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 16,
+                  "high": 0,
+                  "informational": 7,
+                  "low": 5,
+                  "medium": 3
+                },
+                "lines_analyzed_count": 493,
+                "scan_time_taken": 1,
+                "score": "4.57",
+                "score_v2": "91.48",
+                "threat_score": "94.74"
+              }
+            }
+          },
+          {
+            "address": "0x2c4c28DDBdAc9C5E7055b4C863b72eA0149D8aFE",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0x2c4c28DDBdAc9C5E7055b4C863b72eA0149D8aFE",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0x2c4c28DDBdAc9C5E7055b4C863b72eA0149D8aFE",
+              "contractname": "EIP173Proxy",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0x2c4c28DDBdAc9C5E7055b4C863b72eA0149D8aFE/blockscout/gnosis?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 0,
+                  "high": 0,
+                  "informational": 4,
+                  "low": 5,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 94,
+                "scan_time_taken": 0,
+                "score": "4.26",
+                "score_v2": "85.11",
+                "threat_score": "88.89"
+              }
+            }
+          },
+          {
+            "address": "0xC92E8bdf79f0507f65a392b0ab4667716BFE0110",
+            "isVerified": true,
+            "solidityScanReport": {
+              "connection_id": "",
+              "contract_address": "0xC92E8bdf79f0507f65a392b0ab4667716BFE0110",
+              "contract_chain": "eth",
+              "contract_platform": "blockscout",
+              "contract_url": "https://eth.blockscout.com/address/0xC92E8bdf79f0507f65a392b0ab4667716BFE0110",
+              "contractname": "GPv2VaultRelayer",
+              "is_quick_scan": true,
+              "node_reference_id": null,
+              "request_type": "threat_scan",
+              "scanner_reference_url": "https://solidityscan.com/quickscan/0xC92E8bdf79f0507f65a392b0ab4667716BFE0110/blockscout/gnosis?ref=blockscout",
+              "scan_status": "scan_done",
+              "scan_summary": {
+                "issue_severity_distribution": {
+                  "critical": 0,
+                  "gas": 2,
+                  "high": 0,
+                  "informational": 2,
+                  "low": 4,
+                  "medium": 0
+                },
+                "lines_analyzed_count": 87,
+                "scan_time_taken": 0,
+                "score": "4.31",
+                "score_v2": "86.21",
+                "threat_score": "94.74"
+              }
+            }
+          }
+        ]
+      }
+    }
+  }
+]
diff --git a/deploy/tools/envs-validator/yarn.lock b/deploy/tools/envs-validator/yarn.lock
index ab1bf0f2b4..6ea4de04cf 100644
--- a/deploy/tools/envs-validator/yarn.lock
+++ b/deploy/tools/envs-validator/yarn.lock
@@ -262,11 +262,11 @@ ansi-styles@^4.1.0:
     color-convert "^2.0.1"
 
 braces@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
-  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
   dependencies:
-    fill-range "^7.0.1"
+    fill-range "^7.1.1"
 
 browserslist@^4.14.5:
   version "4.21.9"
@@ -439,10 +439,10 @@ fastest-levenshtein@^1.0.12:
   resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5"
   integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==
 
-fill-range@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
-  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
   dependencies:
     to-regex-range "^5.0.1"
 
diff --git a/deploy/tools/favicon-generator/script.sh b/deploy/tools/favicon-generator/script.sh
index 69145399ed..444932c723 100755
--- a/deploy/tools/favicon-generator/script.sh
+++ b/deploy/tools/favicon-generator/script.sh
@@ -33,9 +33,12 @@ CONFIG_TEMPLATE_FILE="config.template.json"
 # Path to the generated config JSON file
 CONFIG_FILE="config.json"
 
+# Escape special characters in MASTER_URL for sed
+ESCAPED_MASTER_URL=$(printf '%s\n' "$MASTER_URL" | sed -e 's/[\/&]/\\&/g')
+
 # Replace <api_key> and <master_url> placeholders in the JSON template file
 API_KEY_VALUE="$FAVICON_GENERATOR_API_KEY"
-sed -e "s|<api_key>|$API_KEY_VALUE|" -e "s|<master_url>|$MASTER_URL|" "$CONFIG_TEMPLATE_FILE" > "$CONFIG_FILE"
+sed -e "s|<api_key>|$API_KEY_VALUE|" -e "s|<master_url>|$ESCAPED_MASTER_URL|" "$CONFIG_TEMPLATE_FILE" > "$CONFIG_FILE"
 
 # Make the API POST request with JSON data from the config file
 echo "⏳ Making request to API..."
diff --git a/deploy/tools/feature-reporter/yarn.lock b/deploy/tools/feature-reporter/yarn.lock
index eaf396937e..502e97507e 100644
--- a/deploy/tools/feature-reporter/yarn.lock
+++ b/deploy/tools/feature-reporter/yarn.lock
@@ -289,11 +289,11 @@ binary-extensions@^2.0.0:
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
 braces@^3.0.2, braces@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
-  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
   dependencies:
-    fill-range "^7.0.1"
+    fill-range "^7.1.1"
 
 browserslist@^4.14.5:
   version "4.21.10"
@@ -491,10 +491,10 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
-fill-range@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
-  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
   dependencies:
     to-regex-range "^5.0.1"
 
diff --git a/deploy/values/l2-optimism-goerli/values.yaml b/deploy/values/l2-optimism-goerli/values.yaml
deleted file mode 100644
index afd8dcc1a0..0000000000
--- a/deploy/values/l2-optimism-goerli/values.yaml
+++ /dev/null
@@ -1,206 +0,0 @@
-fullNameOverride: bs-stack
-nameOverride: bs-stack
-imagePullSecrets:
-  - name: regcred
-config:
-  network:
-    id: 420
-    name: "Base Göerli"
-    shortname: Base
-    currency:
-      name: Ether
-      symbol: ETH
-      decimals: 18
-  account:
-    enabled: true
-  testnet: true
-
-blockscout:
-  enabled: true
-  image:
-    repository: blockscout/blockscout-optimism
-    imagePullPolicy: Always
-    tag: latest
-  replicaCount: 1
-  ingress:
-    enabled: true
-    annotations:
-      kubernetes.io/ingress.class: internal-and-public
-      nginx.ingress.kubernetes.io/proxy-body-size: "500m"
-      nginx.ingress.kubernetes.io/client-max-body-size: "500M"
-      nginx.ingress.kubernetes.io/proxy-buffering: "off"
-      nginx.ingress.kubernetes.io/proxy-connect-timeout: "15m"
-      nginx.ingress.kubernetes.io/proxy-send-timeout: "15m"
-      nginx.ingress.kubernetes.io/proxy-read-timeout: "15m"
-      nginx.ingress.kubernetes.io/force-ssl-redirect: "true"
-      nginx.ingress.kubernetes.io/ssl-redirect: "true"
-      nginx.ingress.kubernetes.io/cors-allow-origin: "https://*.blockscout-main.k8s-dev.blockscout.com, https://*.k8s-dev.blockscout.com, http://localhost:3000"
-      nginx.ingress.kubernetes.io/cors-allow-credentials: "true"
-      nginx.ingress.kubernetes.io/cors-allow-methods: "PUT, GET, POST, OPTIONS, DELETE, PATCH"
-      nginx.ingress.kubernetes.io/enable-cors: "true"
-      nginx.ingress.kubernetes.io/cors-allow-headers: "DNT,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,x-csrf-token"
-    hostname: blockscout-optimism-goerli.k8s-dev.blockscout.com
-    tls:
-      enabled: true
-  resources:
-    limits:
-      memory: "4Gi"
-      cpu: "2"
-    requests:
-      memory: "2Gi"
-      cpu: "1"
-
-  env:
-    ENV: test
-    RESOURCE_MODE: account
-    PUBLIC: 'false'
-    PORT: 4000
-    PORT_PG: 5432
-    PORT_NETWORK_HTTP: 8545
-    PORT_NETWORK_WS: 8546
-    ETHEREUM_JSONRPC_VARIANT: geth
-    MIX_ENV: prod
-    MICROSERVICE_SC_VERIFIER_ENABLED: 'true'
-    MICROSERVICE_SC_VERIFIER_TYPE: 'eth_bytecode_db'
-    MICROSERVICE_SC_VERIFIER_URL: https://sc-verifier-test.k8s-dev.blockscout.com
-    DISABLE_EXCHANGE_RATES: 'true'
-    APPS_MENU: 'true'
-    EXTERNAL_APPS: '[{"title": "Marketplace", "url": "/apps"}]'
-    JSON_RPC: https://goerli.optimism.io
-    FIRST_BLOCK: '4667000'
-    TRACE_FIRST_BLOCK: '4667000'
-    LAST_BLOCK: '4677000'
-    TRACE_LAST_BLOCK: '4677000'
-    DISABLE_REALTIME_INDEXER: 'false'
-    INDEXER_OPTIMISM_L1_PORTAL_CONTRACT: 0x5b47E1A08Ea6d985D6649300584e6722Ec4B1383
-    INDEXER_OPTIMISM_L1_WITHDRAWALS_START_BLOCK: '8299683'
-    INDEXER_OPTIMISM_L2_WITHDRAWALS_START_BLOCK: '4066066'
-    INDEXER_OPTIMISM_L2_MESSAGE_PASSER_CONTRACT: 0x4200000000000000000000000000000000000016
-    INDEXER_OPTIMISM_L1_OUTPUT_ROOTS_START_BLOCK: '8299683'
-    INDEXER_OPTIMISM_L1_OUTPUT_ORACLE_CONTRACT: 0xE6Dfba0953616Bacab0c9A8ecb3a9BBa77FC15c0
-    INDEXER_OPTIMISM_L1_BATCH_START_BLOCK: '8381594'
-    INDEXER_OPTIMISM_L1_BATCH_INBOX: 0xff00000000000000000000000000000000000420
-    INDEXER_OPTIMISM_L1_BATCH_SUBMITTER: 0x7431310e026b69bfc676c0013e12a1a11411eec9
-    INDEXER_OPTIMISM_L1_DEPOSITS_START_BLOCK: '8381594'
-    ETHEREUM_JSONRPC_DEBUG_TRACE_TRANSACTION_TIMEOUT: '25s'
-  envFromSecret:
-    INDEXER_OPTIMISM_L1_RPC: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/INDEXER_OPTIMISM_L1_RPC
-    ACCOUNT_USERNAME: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_USERNAME
-    ACCOUNT_PASSWORD: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_PASSWORD
-    MAILSLURP_API_KEY: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/MAILSLURP_API_KEY
-    MAILSLURP_EMAIL_ID: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/MAILSLURP_EMAIL_ID
-    ACCOUNT_AUTH0_DOMAIN: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_AUTH0_DOMAIN
-    ACCOUNT_AUTH0_CLIENT_ID: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_AUTH0_CLIENT_ID
-    ACCOUNT_AUTH0_CLIENT_SECRET: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_AUTH0_CLIENT_SECRET
-    ACCOUNT_SENDGRID_API_KEY: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_SENDGRID_API_KEY
-    ACCOUNT_SENDGRID_SENDER: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_SENDGRID_SENDER
-    ACCOUNT_SENDGRID_TEMPLATE: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_SENDGRID_TEMPLATE
-    ACCOUNT_PUBLIC_TAGS_AIRTABLE_URL: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_PUBLIC_TAGS_AIRTABLE_URL
-    ACCOUNT_PUBLIC_TAGS_AIRTABLE_API_KEY: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_PUBLIC_TAGS_AIRTABLE_API_KEY
-    ACCOUNT_CLOAK_KEY: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_CLOAK_KEY
-    SECRET_KEY_BASE: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/SECRET_KEY_BASE
-    DATABASE_URL: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/DATABASE_URL
-    ACCOUNT_DATABASE_URL: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_DATABASE_URL
-    ACCOUNT_REDIS_URL: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_REDIS_URL
-    ETHEREUM_JSONRPC_TRACE_URL: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ETHEREUM_JSONRPC_TRACE_URL
-    ETHEREUM_JSONRPC_HTTP_URL: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ETHEREUM_JSONRPC_HTTP_URL
-    ETHEREUM_JSONRPC_WS_URL: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ETHEREUM_JSONRPC_WS_URL
-    RE_CAPTCHA_SECRET_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/RE_CAPTCHA_SECRET_KEY
-    RE_CAPTCHA_CLIENT_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/RE_CAPTCHA_CLIENT_KEY
-
-stats:
-  enabled: true
-  image:
-    tag: main
-    pullPolicy: Always
-
-  ingress:
-    enabled: true
-    annotations:
-      kubernetes.io/ingress.class: internal-and-public
-      nginx.ingress.kubernetes.io/proxy-body-size: "500m"
-      nginx.ingress.kubernetes.io/client-max-body-size: "500M"
-      nginx.ingress.kubernetes.io/proxy-buffering: "off"
-      nginx.ingress.kubernetes.io/proxy-connect-timeout: "15m"
-      nginx.ingress.kubernetes.io/proxy-send-timeout: "15m"
-      nginx.ingress.kubernetes.io/proxy-read-timeout: "15m"
-      nginx.ingress.kubernetes.io/force-ssl-redirect: "true"
-      nginx.ingress.kubernetes.io/ssl-redirect: "true"
-      nginx.ingress.kubernetes.io/cors-allow-origin: "https://*.blockscout-main.k8s-dev.blockscout.com, https://*.k8s-dev.blockscout.com, http://localhost:3000"
-      nginx.ingress.kubernetes.io/cors-allow-credentials: "true"
-      nginx.ingress.kubernetes.io/cors-allow-methods: "PUT, GET, POST, OPTIONS, DELETE, PATCH"
-      nginx.ingress.kubernetes.io/enable-cors: "true"
-    hostname: stats-optimism-goerli.k8s-dev.blockscout.com
-    tls:
-      enabled: true
-
-  resources:
-    limits:
-      cpu: 250m
-      memory: 512Mi
-    requests:
-      cpu: 250m
-      memory: 256Mi
-  env:
-    RUST_LOG: info
-    STATS__RUN_MIGRATIONS: true
-    STATS__TRACING__FORMAT: json
-    STATS__METRICS__ENABLED: true
-  envFromSecret:
-    STATS__DB_URL: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/STATS__DB_URL
-    STATS__BLOCKSCOUT_DB_URL: ref+vault://deployment-values/blockscout/dev/l2-optimism-goerli?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/STATS__BLOCKSCOUT_DB_URL
-
-frontend:
-  enabled: true
-  image:
-    pullPolicy: Always
-  replicaCount: 1
-  ingress:
-    enabled: true
-    hostname: blockscout-optimism-goerli.k8s-dev.blockscout.com
-    annotations:
-      kubernetes.io/ingress.class: internal-and-public
-      nginx.ingress.kubernetes.io/proxy-body-size: 500m
-      nginx.ingress.kubernetes.io/client-max-body-size: "500M"
-      nginx.ingress.kubernetes.io/proxy-buffering: "off"
-      nginx.ingress.kubernetes.io/proxy-connect-timeout: "15m"
-      nginx.ingress.kubernetes.io/proxy-send-timeout: "15m"
-      nginx.ingress.kubernetes.io/proxy-read-timeout: "15m"
-      cert-manager.io/cluster-issuer: "zerossl-prod"
-  resources:
-    limits:
-      cpu: 200m
-      memory: 512Mi
-    requests:
-      cpu: 200m
-      memory: 256Mi
-  env:
-    NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE: validation
-    NEXT_PUBLIC_NETWORK_LOGO: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/base.svg
-    NEXT_PUBLIC_NETWORK_ICON: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/base.svg
-    NEXT_PUBLIC_FEATURED_NETWORKS: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/base-goerli.json
-    NEXT_PUBLIC_MARKETPLACE_ENABLED: true
-    NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM: https://airtable.com/shrqUAcjgGJ4jU88C
-    NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM: https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
-    NEXT_PUBLIC_LOGOUT_URL: https://blockscoutcom.us.auth0.com/v2/logout
-    NEXT_PUBLIC_MARKETPLACE_CONFIG_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/base-goerli.json
-    NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace-categories/default.json
-    NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND: "linear-gradient(136.9deg,rgb(107 94 236) 1.5%,rgb(0 82 255) 56.84%,rgb(82 62 231) 98.54%)"
-    NEXT_PUBLIC_NETWORK_RPC_URL: https://goerli.optimism.io
-    NEXT_PUBLIC_WEB3_WALLETS: "['coinbase']"
-    NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET: true
-    NEXT_PUBLIC_HOMEPAGE_CHARTS: "['daily_txs']"
-    NEXT_PUBLIC_VISUALIZE_API_HOST: https://visualizer-test.k8s-dev.blockscout.com
-    NEXT_PUBLIC_CONTRACT_INFO_API_HOST: https://contracts-info-test.k8s-dev.blockscout.com
-    NEXT_PUBLIC_ADMIN_SERVICE_API_HOST: https://admin-rs-test.k8s-dev.blockscout.com
-    NEXT_PUBLIC_ROLLUP_TYPE: optimistic
-    NEXT_PUBLIC_ROLLUP_L1_BASE_URL: https://eth-goerli.blockscout.com/
-    NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL: https://app.optimism.io/bridge/withdraw
-    NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 0x4a0ed8ddf751a7cb5297f827699117b0f6d21a0b2907594d300dc9fed75c7e62
-    NEXT_PUBLIC_SWAP_BUTTON_URL: sushiswap
-  envFromSecret:
-    NEXT_PUBLIC_AUTH0_CLIENT_ID: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_AUTH0_CLIENT_ID
-    NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID
-    NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY
-    NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID
-    FAVICON_GENERATOR_API_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_FAVICON_GENERATOR_API_KEY
diff --git a/deploy/values/main/values.yaml b/deploy/values/main/values.yaml
deleted file mode 100644
index 493941ad0a..0000000000
--- a/deploy/values/main/values.yaml
+++ /dev/null
@@ -1,178 +0,0 @@
-fullNameOverride: bs-stack
-nameOverride: bs-stack
-imagePullSecrets:
-  - name: regcred
-config:
-  network:
-    id: 5
-    name: Göerli
-    shortname: Göerli
-    currency:
-      name: Ether
-      symbol: ETH
-      decimals: 18
-  account:
-    enabled: true
-  testnet: true
-
-
-blockscout:
-  enabled: true
-  image:
-    pullPolicy: Always
-    tag: frontend-main
-  replicaCount: 1
-  # enable ingress
-  ingress:
-    enabled: true
-    annotations:
-      kubernetes.io/ingress.class: internal-and-public
-      nginx.ingress.kubernetes.io/proxy-body-size: "500m"
-      nginx.ingress.kubernetes.io/client-max-body-size: "500M"
-      nginx.ingress.kubernetes.io/proxy-buffering: "off"
-      nginx.ingress.kubernetes.io/proxy-connect-timeout: "15m"
-      nginx.ingress.kubernetes.io/proxy-send-timeout: "15m"
-      nginx.ingress.kubernetes.io/proxy-read-timeout: "15m"
-      nginx.ingress.kubernetes.io/force-ssl-redirect: "true"
-      nginx.ingress.kubernetes.io/ssl-redirect: "true"
-      nginx.ingress.kubernetes.io/cors-allow-origin: "https://*.k8s-dev.blockscout.com, http://localhost:3000"
-      nginx.ingress.kubernetes.io/cors-allow-credentials: "true"
-      nginx.ingress.kubernetes.io/cors-allow-methods: "PUT, GET, POST, OPTIONS, DELETE, PATCH"
-      nginx.ingress.kubernetes.io/enable-cors: "true"
-      nginx.ingress.kubernetes.io/cors-allow-headers: "DNT,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,x-csrf-token"
-      nginx.ingress.kubernetes.io/cors-expose-headers: "x-bs-account-csrf"
-    hostname: blockscout-main.k8s-dev.blockscout.com
-    tls:
-      enabled: true
-
-  resources:
-    limits:
-      memory: "6Gi"
-      cpu: "6"
-    requests:
-      memory: "3Gi"
-      cpu: "3"
-  # Blockscout environment variables
-  env:
-    BLOCKSCOUT_VERSION: v5.3.0-beta
-    ETHEREUM_JSONRPC_VARIANT: geth
-    HEART_BEAT_TIMEOUT: 30
-    SUBNETWORK: Ethereum
-    NETWORK: (Goerli)
-    NETWORK_ICON: _network_icon.html
-    LOGO: /images/goerli_logo.svg
-    TXS_STATS_DAYS_TO_COMPILE_AT_INIT: 1
-    COIN_BALANCE_HISTORY_DAYS: 90
-    POOL_SIZE: 100
-    DISPLAY_TOKEN_ICONS: 'true'
-    FETCH_REWARDS_WAY: manual
-    MICROSERVICE_SC_VERIFIER_ENABLED: 'true'
-    MICROSERVICE_SC_VERIFIER_TYPE: 'eth_bytecode_db'
-    MICROSERVICE_SC_VERIFIER_URL: http://eth-bytecode-db-svc.eth-bytecode-db-testing.svc.cluster.local:80
-    INDEXER_MEMORY_LIMIT: 5
-    APPS_MENU: 'true'
-    APPS: '[{"title": "Marketplace", "url": "/apps", "embedded?": true}]'
-    SESSION_COOKIE_DOMAIN: blockscout-main.k8s-dev.blockscout.com
-    ETHEREUM_JSONRPC_DEBUG_TRACE_TRANSACTION_TIMEOUT: '20s'
-    INDEXER_INTERNAL_TRANSACTIONS_BATCH_SIZE: 15
-    INDEXER_DISABLE_EMPTY_BLOCKS_SANITIZER: 'true'
-    INDEXER_DISABLE_PENDING_TRANSACTIONS_FETCHER: 'true'
-    INDEXER_RECEIPTS_BATCH_SIZE: 50
-    INDEXER_COIN_BALANCES_BATCH_SIZE: 10
-    INDEXER_TOKEN_BALANCES_BATCH_SIZE: 15
-    INDEXER_TOKEN_BALANCES_CONCURRENCY: 4
-    DISABLE_EXCHANGE_RATES: 'true'
-    DISABLE_INDEXER: 'false'
-    FIRST_BLOCK: '8739119'
-    LAST_BLOCK: '8739119'
-    TRACE_FIRST_BLOCK: '8739119'
-    TRACE_LAST_BLOCK: '8739119'
-  envFromSecret:
-    ETHEREUM_JSONRPC_TRACE_URL: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ETHEREUM_JSONRPC_TRACE_URL
-    ETHEREUM_JSONRPC_HTTP_URL: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ETHEREUM_JSONRPC_HTTP_URL
-    ACCOUNT_USERNAME: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_USERNAME
-    ACCOUNT_PASSWORD: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_PASSWORD
-    MAILSLURP_API_KEY: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/MAILSLURP_API_KEY
-    MAILSLURP_EMAIL_ID: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/MAILSLURP_EMAIL_ID
-    ACCOUNT_SENDGRID_API_KEY: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_SENDGRID_API_KEY
-    ACCOUNT_SENDGRID_SENDER: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_SENDGRID_SENDER
-    ACCOUNT_SENDGRID_TEMPLATE: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_SENDGRID_TEMPLATE
-    ACCOUNT_PUBLIC_TAGS_AIRTABLE_URL: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_PUBLIC_TAGS_AIRTABLE_URL
-    ACCOUNT_PUBLIC_TAGS_AIRTABLE_API_KEY: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_PUBLIC_TAGS_AIRTABLE_API_KEY
-    ACCOUNT_CLOAK_KEY: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_CLOAK_KEY
-    SECRET_KEY_BASE: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/SECRET_KEY_BASE
-    DATABASE_URL: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/DATABASE_URL
-    DATABASE_READ_ONLY_API_URL: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/DATABASE_READ_ONLY_API_URL
-    API_SENSITIVE_ENDPOINTS_KEY: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/API_SENSITIVE_ENDPOINTS_KEY
-    ACCOUNT_DATABASE_URL: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_DATABASE_URL
-    ACCOUNT_REDIS_URL: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_REDIS_URL
-    ACCOUNT_AUTH0_DOMAIN: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_AUTH0_DOMAIN
-    ACCOUNT_AUTH0_CLIENT_ID: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_AUTH0_CLIENT_ID
-    ACCOUNT_AUTH0_CLIENT_SECRET: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/ACCOUNT_AUTH0_CLIENT_SECRET
-    RE_CAPTCHA_SECRET_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/RE_CAPTCHA_SECRET_KEY
-    RE_CAPTCHA_CLIENT_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/RE_CAPTCHA_CLIENT_KEY
-
-frontend:
-  enabled: true
-  image:
-    tag: main
-    pullPolicy: Always
-  replicaCount: 1
-  ingress:
-    enabled: true
-    annotations:
-      kubernetes.io/ingress.class: internal-and-public
-      nginx.ingress.kubernetes.io/proxy-body-size: 500m
-      nginx.ingress.kubernetes.io/client-max-body-size: "500M"
-      nginx.ingress.kubernetes.io/proxy-buffering: "off"
-      nginx.ingress.kubernetes.io/proxy-connect-timeout: "15m"
-      nginx.ingress.kubernetes.io/proxy-send-timeout: "15m"
-      nginx.ingress.kubernetes.io/proxy-read-timeout: "15m"
-      cert-manager.io/cluster-issuer: "zerossl-prod"
-    hostname: blockscout-main.k8s-dev.blockscout.com
-
-  resources:
-    limits:
-      memory: 768Mi
-      cpu: 500m
-    requests:
-      memory: 384Mi
-      cpu: 250m
-
-  env:
-    # ui config
-    NEXT_PUBLIC_FEATURED_NETWORKS: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/eth-goerli.json
-    NEXT_PUBLIC_NETWORK_EXPLORERS: "[{'title':'Bitquery','baseUrl':'https://explorer.bitquery.io/','paths':{'tx':'/goerli/tx','address':'/goerli/address','token':'/goerli/token','block':'/goerli/block'}},{'title':'Etherscan','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]"
-    # network config
-    NEXT_PUBLIC_NETWORK_LOGO: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/goerli.svg
-    NEXT_PUBLIC_NETWORK_ICON: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/goerli.svg
-
-    NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE: validation
-    NEXT_PUBLIC_MARKETPLACE_ENABLED: true
-    NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM: https://airtable.com/shrqUAcjgGJ4jU88C
-    NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM: https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
-    NEXT_PUBLIC_APP_ENV: development
-    NEXT_PUBLIC_APP_INSTANCE: main
-    NEXT_PUBLIC_STATS_API_HOST: https://stats-test.k8s-dev.blockscout.com/
-    NEXT_PUBLIC_VISUALIZE_API_HOST: http://visualizer-svc.visualizer-testing.svc.cluster.local/
-    NEXT_PUBLIC_CONTRACT_INFO_API_HOST: https://contracts-info-test.k8s-dev.blockscout.com
-    NEXT_PUBLIC_ADMIN_SERVICE_API_HOST: https://admin-rs-test.k8s-dev.blockscout.com
-    NEXT_PUBLIC_NAME_SERVICE_API_HOST: https://bens-rs-test.k8s-dev.blockscout.com
-    NEXT_PUBLIC_LOGOUT_URL: https://blockscoutcom.us.auth0.com/v2/logout
-    NEXT_PUBLIC_NETWORK_RPC_URL: https://rpc.ankr.com/eth_goerli
-    NEXT_PUBLIC_HOMEPAGE_CHARTS: "['daily_txs','coin_price','market_cap']"
-    NEXT_PUBLIC_MARKETPLACE_CONFIG_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/eth-goerli.json
-    NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace-categories/default.json
-    NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
-    NEXT_PUBLIC_WEB3_WALLETS: "['token_pocket','coinbase','metamask']"
-    NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES: "[{'name':'LooksRare','collection_url':'https://goerli.looksrare.org/collections/{hash}','instance_url':'https://goerli.looksrare.org/collections/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/looks-rare.png'}]"
-    NEXT_PUBLIC_CONTRACT_CODE_IDES: "[{'title':'Remix IDE','url':'https://remix.blockscout.com/?address={hash}&blockscout=eth-goerli.blockscout.com','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]"
-    NEXT_PUBLIC_SWAP_BUTTON_URL: uniswap
-  envFromSecret:
-    NEXT_PUBLIC_SENTRY_DSN: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_SENTRY_DSN
-    SENTRY_CSP_REPORT_URI: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/SENTRY_CSP_REPORT_URI
-    NEXT_PUBLIC_AUTH0_CLIENT_ID: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_AUTH0_CLIENT_ID
-    NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID
-    NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY
-    NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID
-    FAVICON_GENERATOR_API_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_FAVICON_GENERATOR_API_KEY
diff --git a/deploy/values/review-l2/values.yaml.gotmpl b/deploy/values/review-l2/values.yaml.gotmpl
index eea25de5e8..d03f0984eb 100644
--- a/deploy/values/review-l2/values.yaml.gotmpl
+++ b/deploy/values/review-l2/values.yaml.gotmpl
@@ -5,7 +5,7 @@ imagePullSecrets:
 config:
   network:
     id: 420
-    name: "Base Göerli"
+    name: "Base"
     shortname: Base
     currency:
       name: Ether
@@ -49,32 +49,29 @@ frontend:
   env:
     NEXT_PUBLIC_APP_ENV: development
     NEXT_PUBLIC_APP_INSTANCE: review_L2
-    NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE: validation
     NEXT_PUBLIC_NETWORK_LOGO: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/base.svg
     NEXT_PUBLIC_NETWORK_ICON: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/base.svg
-    NEXT_PUBLIC_FEATURED_NETWORKS: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/base-goerli.json
-    NEXT_PUBLIC_API_HOST: blockscout-optimism-goerli.k8s-dev.blockscout.com
-    NEXT_PUBLIC_MARKETPLACE_ENABLED: true
-    NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM: https://airtable.com/shrqUAcjgGJ4jU88C
-    NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM: https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
+    NEXT_PUBLIC_FEATURED_NETWORKS: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/base-mainnet.json
+    NEXT_PUBLIC_API_HOST: base.blockscout.com
     NEXT_PUBLIC_LOGOUT_URL: https://blockscoutcom.us.auth0.com/v2/logout
-    NEXT_PUBLIC_STATS_API_HOST: https://stats-optimism-goerli.k8s-dev.blockscout.com
-    NEXT_PUBLIC_MARKETPLACE_CONFIG_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/base-goerli.json
-    NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace-categories/default.json
+    NEXT_PUBLIC_STATS_API_HOST: https://stats-l2-base-mainnet.k8s-prod-1.blockscout.com
     NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND: "linear-gradient(136.9deg,rgb(107 94 236) 1.5%,rgb(0 82 255) 56.84%,rgb(82 62 231) 98.54%)"
-    NEXT_PUBLIC_NETWORK_RPC_URL: https://goerli.optimism.io
+    NEXT_PUBLIC_NETWORK_RPC_URL: https://mainnet.base.org
     NEXT_PUBLIC_WEB3_WALLETS: "['coinbase']"
     NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET: true
     NEXT_PUBLIC_HOMEPAGE_CHARTS: "['daily_txs']"
-    NEXT_PUBLIC_VISUALIZE_API_HOST: https://visualizer-optimism-goerli.k8s-dev.blockscout.com
-    NEXT_PUBLIC_CONTRACT_INFO_API_HOST: https://contracts-info-test.k8s-dev.blockscout.com
-    NEXT_PUBLIC_ADMIN_SERVICE_API_HOST: https://admin-rs-test.k8s-dev.blockscout.com
-    NEXT_PUBLIC_ROLLUP_TYPE=optimistic
-    NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://blockscout-main.k8s-dev.blockscout.com
-    NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://app.optimism.io/bridge/withdraw
+    NEXT_PUBLIC_VISUALIZE_API_HOST: https://visualizer.services.blockscout.com
+    NEXT_PUBLIC_CONTRACT_INFO_API_HOST: https://contracts-info.services.blockscout.com
+    NEXT_PUBLIC_ADMIN_SERVICE_API_HOST: https://admin-rs.services.blockscout.com
+    NEXT_PUBLIC_NAME_SERVICE_API_HOST: https://bens.services.blockscout.com
+    NEXT_PUBLIC_METADATA_SERVICE_API_HOST: https://metadata.services.blockscout.com
+    NEXT_PUBLIC_ROLLUP_TYPE: optimistic
+    NEXT_PUBLIC_ROLLUP_L1_BASE_URL: https://eth.blockscout.com
+    NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL: https://app.optimism.io/bridge/withdraw
     NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 0x4a0ed8ddf751a7cb5297f827699117b0f6d21a0b2907594d300dc9fed75c7e62
     NEXT_PUBLIC_USE_NEXT_JS_PROXY: true
-    NEXT_PUBLIC_SWAP_BUTTON_URL: sushiswap
+    NEXT_PUBLIC_NAVIGATION_LAYOUT: horizontal
+    NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES: "['/blocks','/name-domains']"
   envFromSecret:
     NEXT_PUBLIC_SENTRY_DSN: ref+vault://deployment-values/blockscout/dev/review-l2?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_SENTRY_DSN
     SENTRY_CSP_REPORT_URI: ref+vault://deployment-values/blockscout/dev/review-l2?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/SENTRY_CSP_REPORT_URI
@@ -83,4 +80,4 @@ frontend:
     NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY: ref+vault://deployment-values/blockscout/dev/review-l2?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY
     NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID: ref+vault://deployment-values/blockscout/dev/review-l2?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID
     FAVICON_GENERATOR_API_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_FAVICON_GENERATOR_API_KEY
-    NEXT_PUBLIC_OG_IMAGE_URL: https://github.com/blockscout/frontend-configs/blob/main/configs/og-images/base-goerli.png?raw=true
+    NEXT_PUBLIC_OG_IMAGE_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/base-mainnet.png
diff --git a/deploy/values/review/values.yaml.gotmpl b/deploy/values/review/values.yaml.gotmpl
index 7f6418f43f..5b2623182f 100644
--- a/deploy/values/review/values.yaml.gotmpl
+++ b/deploy/values/review/values.yaml.gotmpl
@@ -4,7 +4,7 @@ imagePullSecrets:
   - name: regcred
 config:
   network:
-    id: 11155111
+    id: "11155111"
     name: Blockscout
     shortname: Blockscout
     currency:
@@ -49,47 +49,35 @@ frontend:
   env:
     NEXT_PUBLIC_APP_ENV: development
     NEXT_PUBLIC_APP_INSTANCE: review
-    NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE: validation
-    NEXT_PUBLIC_FEATURED_NETWORKS: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/eth-goerli.json
-    NEXT_PUBLIC_NETWORK_LOGO: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/goerli.svg
-    NEXT_PUBLIC_NETWORK_ICON: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/goerli.svg
-    NEXT_PUBLIC_API_HOST: eth-sepolia.blockscout.com
-    NEXT_PUBLIC_STATS_API_HOST: https://stats-goerli.k8s-dev.blockscout.com/
+    NEXT_PUBLIC_FEATURED_NETWORKS: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/eth-sepolia.json
+    NEXT_PUBLIC_NETWORK_LOGO: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/sepolia.svg
+    NEXT_PUBLIC_NETWORK_ICON: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/sepolia.png
+    NEXT_PUBLIC_API_HOST: eth-sepolia.k8s-dev.blockscout.com
+    NEXT_PUBLIC_STATS_API_HOST: https://stats-sepolia.k8s-dev.blockscout.com/
     NEXT_PUBLIC_VISUALIZE_API_HOST: http://visualizer-svc.visualizer-testing.svc.cluster.local/
     NEXT_PUBLIC_CONTRACT_INFO_API_HOST: https://contracts-info-test.k8s-dev.blockscout.com
     NEXT_PUBLIC_ADMIN_SERVICE_API_HOST: https://admin-rs-test.k8s-dev.blockscout.com
     NEXT_PUBLIC_NAME_SERVICE_API_HOST: https://bens-rs-test.k8s-dev.blockscout.com
+    NEXT_PUBLIC_METADATA_SERVICE_API_HOST: https://metadata-test.k8s-dev.blockscout.com
     NEXT_PUBLIC_AUTH_URL: https://blockscout-main.k8s-dev.blockscout.com
-    NEXT_PUBLIC_MARKETPLACE_ENABLED: true
-    NEXT_PUBLIC_MARKETPLACE_CONFIG_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/eth-goerli.json
-    NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM: https://airtable.com/shrqUAcjgGJ4jU88C
-    NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM: https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
-    NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL: https://gist.githubusercontent.com/maxaleks/ce5c7e3de53e8f5b240b88265daf5839/raw/328383c958a8f7ecccf6d50c953bcdf8ab3faa0a/security_reports_goerli_test.json
     NEXT_PUBLIC_LOGOUT_URL: https://blockscoutcom.us.auth0.com/v2/logout
     NEXT_PUBLIC_HOMEPAGE_CHARTS: "['daily_txs','coin_price','market_cap']"
     NEXT_PUBLIC_NETWORK_RPC_URL: https://eth-sepolia.public.blastapi.io
-    NEXT_PUBLIC_NETWORK_ID: '11155111'
     NEXT_PUBLIC_NETWORK_EXPLORERS: "[{'title':'Bitquery','baseUrl':'https://explorer.bitquery.io/','paths':{'tx':'/goerli/tx','address':'/goerli/address','token':'/goerli/token','block':'/goerli/block'}},{'title':'Etherscan','logo':'https://github.com/blockscout/frontend-configs/blob/main/configs/explorer-logos/etherscan.png?raw=true','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]"
-    NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace-categories/default.json
     NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
     NEXT_PUBLIC_WEB3_WALLETS: "['token_pocket','coinbase','metamask']"
     NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE: gradient_avatar
-    NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS: "['top_accounts']"
     NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED: true
-    NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS: "['value','fee_currency','gas_price','gas_fees','burnt_fees']"
-    NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS: "['fee_per_gas']"
     NEXT_PUBLIC_USE_NEXT_JS_PROXY: true
     NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES: "[{'name':'LooksRare','collection_url':'https://goerli.looksrare.org/collections/{hash}','instance_url':'https://goerli.looksrare.org/collections/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/looks-rare.png'}]"
     NEXT_PUBLIC_HAS_USER_OPS: true
     NEXT_PUBLIC_CONTRACT_CODE_IDES: "[{'title':'Remix IDE','url':'https://remix.blockscout.com/?address={hash}&blockscout=eth-goerli.blockscout.com','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]"
-    NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER: noves
-    NEXT_PUBLIC_SWAP_BUTTON_URL: uniswap
+    NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER: blockscout
     NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS: true
-    NEXT_PUBLIC_AD_BANNER_PROVIDER: getit
-    NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER: adbutler
-    NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP: "{ \"id\": \"632019\", \"width\": \"728\", \"height\": \"90\" }"
-    NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE: "{ \"id\": \"632018\", \"width\": \"320\", \"height\": \"100\" }"
+    NEXT_PUBLIC_AD_BANNER_PROVIDER: slise
     NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED: true
+    NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES: "['/apps']"
+    PROMETHEUS_METRICS_ENABLED: true
   envFromSecret:
     NEXT_PUBLIC_SENTRY_DSN: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_SENTRY_DSN
     SENTRY_CSP_REPORT_URI: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/SENTRY_CSP_REPORT_URI
diff --git a/docs/BUILD-TIME_ENVS.md b/docs/BUILD-TIME_ENVS.md
index 08524e4389..7f0db07fc2 100644
--- a/docs/BUILD-TIME_ENVS.md
+++ b/docs/BUILD-TIME_ENVS.md
@@ -6,3 +6,4 @@ These variables are passed to the app during the image build process. They canno
 | --- | --- | --- | --- | --- |
 | NEXT_PUBLIC_GIT_COMMIT_SHA | `string` | SHA of the latest commit in the branch from which image is built | false | `29d0613e` |
 | NEXT_PUBLIC_GIT_TAG | `string` | Git tag on the latest commit in the branch from which image is built | true | `v1.0.0` |
+| NEXT_OPEN_TELEMETRY_ENABLED | `boolean` | Enables OpenTelemetry SDK | true | `true` |
diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md
index 58dcae80c9..0284e6e3cf 100644
--- a/docs/CONTRIBUTING.md
+++ b/docs/CONTRIBUTING.md
@@ -88,9 +88,7 @@ These are the steps that you have to follow to make everything work:
 4. For local development purposes add the variable with its appropriate values to pre-defined ENV configs `configs/envs` where it is needed
 5. Add the variable to CI configs where it is needed
     - `deploy/values/review/values.yaml.gotmpl` - review development environment
-    - `deploy/values/main/values.yaml` - main development environment
     - `deploy/values/review-l2/values.yaml.gotmpl` - review development environment for L2 networks
-    - `deploy/values/l2-optimism-goerli/values.yaml` - main development environment
 6. If your variable is meant to receive a link to some external resource (image or JSON-config file), extend the array `ASSETS_ENVS` in `deploy/scripts/download_assets.sh` with your variable name
 7. Add validation schema for the new variable into the file `deploy/tools/envs-validator/schema.ts`
 8. Check if modified validation schema is valid by doing the following steps:
diff --git a/docs/DEPRECATED_ENVS.md b/docs/DEPRECATED_ENVS.md
index b46ea04108..f48fa86e98 100644
--- a/docs/DEPRECATED_ENVS.md
+++ b/docs/DEPRECATED_ENVS.md
@@ -1,9 +1,13 @@
 # Deprecated environment variables
 
-| Variable | Type | Description | Compulsoriness | Default value | Example value | Deprecated in version | Comment |
-| --- | --- | --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK | `boolean` | Set to true for optimistic L2 solutions | Required | - | `true` | v1.24.0 | Replaced by NEXT_PUBLIC_ROLLUP_TYPE |
-| NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK | `boolean` | Set to true for zkevm L2 solutions  | Required | - | `true` | v1.24.0 | Replaced by NEXT_PUBLIC_ROLLUP_TYPE |
-| NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL | `string` | URL for optimistic L2 -> L1 withdrawals | Required | - | `https://app.optimism.io/bridge/withdraw` | v1.24.0 | Renamed to NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL |
-| NEXT_PUBLIC_L1_BASE_URL | `string` | Blockscout base URL for L1 network | Required | - | `'http://eth-goerli.blockscout.com'` | v1.24.0 | Renamed to NEXT_PUBLIC_ROLLUP_L1_BASE_URL |
-| NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER | `boolean` | Set to false if network doesn't have gas tracker | - | `true` | `false` | v1.25.0 | Replaced by NEXT_PUBLIC_GAS_TRACKER_ENABLED |
\ No newline at end of file
+| Variable | Type | Description | Compulsoriness | Default value | Example value | Introduced in version | Deprecated in version | Comment |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_FAVICON_GENERATOR_API_KEY | `string` | RealFaviconGenerator [API key](https://realfavicongenerator.net/api/) | Required | - | `<your-secret>` | v1.11.0 | v1.16.0 | Replaced FAVICON_GENERATOR_API_KEY |
+| NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK | `boolean` | Set to true for optimistic L2 solutions | Required | - | `true` | v1.17.0 | v1.24.0 | Replaced by NEXT_PUBLIC_ROLLUP_TYPE |
+| NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK | `boolean` | Set to true for zkevm L2 solutions  | Required | - | `true` | v1.17.0 | v1.24.0 | Replaced by NEXT_PUBLIC_ROLLUP_TYPE |
+| NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL | `string` | URL for optimistic L2 -> L1 withdrawals | Required | - | `https://app.optimism.io/bridge/withdraw` | v1.17.0 | v1.24.0 | Renamed to NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL |
+| NEXT_PUBLIC_L1_BASE_URL | `string` | Blockscout base URL for L1 network | Required | - | `'http://eth-goerli.blockscout.com'` | - | v1.24.0 | Renamed to NEXT_PUBLIC_ROLLUP_L1_BASE_URL |
+| NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER | `boolean` | Set to false if network doesn't have gas tracker | - | `true` | `false` | - | v1.25.0 | Replaced by NEXT_PUBLIC_GAS_TRACKER_ENABLED |
+| NEXT_PUBLIC_NETWORK_GOVERNANCE_TOKEN_SYMBOL | `string` | Network governance token symbol | - | - | `GNO` | v1.12.0 | v1.29.0 | Replaced by NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL |
+| NEXT_PUBLIC_SWAP_BUTTON_URL | `string` | Application ID in the marketplace or website URL | - | - | `uniswap` | v1.24.0 | v1.31.0 | Replaced by NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS |
+| NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME | `boolean` | Set to false if average block time is useless for the network | - | `true` | `false` | v1.0.x+ | v1.35.0 | Replaces by NEXT_PUBLIC_HOMEPAGE_STATS
diff --git a/docs/ENVS.md b/docs/ENVS.md
index 3058167161..595ceb6366 100644
--- a/docs/ENVS.md
+++ b/docs/ENVS.md
@@ -1,6 +1,6 @@
 # Run-time environment variables
 
-The app instance could be customized by passing following variables to NodeJS environment at run-time. See their list below.
+The app instance can be customized by passing the following variables to the Node.js environment at runtime. Some of these variables have been deprecated, and their full list can be found in the [file](./DEPRECATED_ENVS.md).
 
 **IMPORTANT NOTE!** For _production_ build purposes all json-like values should be single-quoted. If it contains a hash (`#`) or a dollar-sign (`$`) the whole value should be wrapped in single quotes as well (see `dotenv` [readme](https://github.com/bkeepers/dotenv#variable-substitution) for the reference)
 
@@ -16,7 +16,7 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
 - [API configuration](ENVS.md#api-configuration)
 - [UI configuration](ENVS.md#ui-configuration)
   - [Homepage](ENVS.md#homepage)
-  - [Sidebar](ENVS.md#sidebar)
+  - [Navigation](ENVS.md#navigation)
   - [Footer](ENVS.md#footer)
   - [Favicon](ENVS.md#favicon)
   - [Meta](ENVS.md#meta)
@@ -34,7 +34,7 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
   - [Banner ads](ENVS.md#banner-ads)
   - [Text ads](ENVS.md#text-ads)
   - [Beacon chain](ENVS.md#beacon-chain)
-  - [User operations](ENVS.md#user-operations-feature-erc-4337)
+  - [User operations](ENVS.md#user-operations-erc-4337)
   - [Rollup chain](ENVS.md#rollup-chain)
   - [Export data to CSV file](ENVS.md#export-data-to-csv-file)
   - [Google analytics](ENVS.md#google-analytics)
@@ -49,55 +49,66 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
   - [Transaction interpretation](ENVS.md#transaction-interpretation)
   - [Verified tokens info](ENVS.md#verified-tokens-info)
   - [Name service integration](ENVS.md#name-service-integration)
+  - [Metadata service integration](ENVS.md#metadata-service-integration)
+  - [Public tag submission](ENVS.md#public-tag-submission)
+  - [Data availability](ENVS.md#data-availability)
   - [Bridged tokens](ENVS.md#bridged-tokens)
   - [Safe{Core} address tags](ENVS.md#safecore-address-tags)
   - [SUAVE chain](ENVS.md#suave-chain)
   - [MetaSuites extension](ENVS.md#metasuites-extension)
+  - [Validators list](ENVS.md#validators-list)
   - [Sentry error monitoring](ENVS.md#sentry-error-monitoring)
   - [OpenTelemetry](ENVS.md#opentelemetry)
-  - [Swap button](ENVS.md#swap-button)
+  - [DeFi dropdown](ENVS.md#defi-dropdown)
+  - [Multichain balance button](ENVS.md#multichain-balance-button)
+  - [Get gas button](ENVS.md#get-gas-button)
+  - [Save on gas with GasHawk](ENVS.md#save-on-gas-with-gashawk)
 - [3rd party services configuration](ENVS.md#external-services-configuration)
 
 &nbsp;
 
 ## App configuration
 
-| Variable | Type| Description | Compulsoriness | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_APP_PROTOCOL | `http \| https` | App url schema | - | `https` | `http` |
-| NEXT_PUBLIC_APP_HOST | `string` | App host | Required | - | `blockscout.com` |
-| NEXT_PUBLIC_APP_PORT | `number` | Port where app is running | - | `3000` | `3001` |
-| NEXT_PUBLIC_USE_NEXT_JS_PROXY | `boolean` | Tells the app to proxy all APIs request through the NextJS app. **We strongly advise not to use it in the production environment**, since it can lead to performance issues of the NodeJS server | - | `false` | `true` |
+| Variable | Type| Description | Compulsoriness | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_APP_PROTOCOL | `http \| https` | App url schema | - | `https` | `http` | v1.0.x+ |
+| NEXT_PUBLIC_APP_HOST | `string` | App host | Required | - | `blockscout.com` | v1.0.x+ |
+| NEXT_PUBLIC_APP_PORT | `number` | Port where app is running | - | `3000` | `3001` | v1.0.x+ |
+| NEXT_PUBLIC_USE_NEXT_JS_PROXY | `boolean` | Tells the app to proxy all APIs request through the NextJS app. **We strongly advise not to use it in the production environment**, since it can lead to performance issues of the NodeJS server | - | `false` | `true` | v1.8.0+ |
 
 &nbsp;
 
 ## Blockchain parameters
 
-| Variable | Type| Description | Compulsoriness | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_NETWORK_NAME | `string` | Displayed name of the network | Required | - | `Gnosis Chain` |
-| NEXT_PUBLIC_NETWORK_SHORT_NAME | `string` | Used for SEO attributes (e.g, page description) | - | -  | `OoG` |
-| NEXT_PUBLIC_NETWORK_ID | `number` | Chain id, see [https://chainlist.org](https://chainlist.org) for the reference | Required | -  | `99` |
-| NEXT_PUBLIC_NETWORK_RPC_URL | `string` | Chain public RPC server url, see [https://chainlist.org](https://chainlist.org) for the reference | - | - | `https://core.poa.network` |
-| NEXT_PUBLIC_NETWORK_CURRENCY_NAME | `string` | Network currency name | - | - | `Ether` |
-| NEXT_PUBLIC_NETWORK_CURRENCY_WEI_NAME | `string` | Name of network currency subdenomination | - | `wei` | `duck` |
-| NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL | `string` | Network currency symbol | - | - | `ETH` |
-| NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS | `string` | Network currency decimals | - | `18` | `6` |
-| NEXT_PUBLIC_NETWORK_GOVERNANCE_TOKEN_SYMBOL | `string` | Network governance token symbol | - | - | `GNO` |
-| NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE | `validation` or `mining` | Verification type in the network | - | `mining` | `validation` |
-| NEXT_PUBLIC_IS_TESTNET | `boolean`| Set to true if network is testnet | - | `false` | `true` |
+*Note!* The `NEXT_PUBLIC_NETWORK_CURRENCY` variables represent the blockchain's native token used for paying transaction fees. `NEXT_PUBLIC_NETWORK_SECONDARY_COIN` variables refer to tokens like protocol-specific tokens (e.g., OP token on Optimism chain) or governance tokens (e.g., GNO on Gnosis chain).
+
+| Variable | Type| Description | Compulsoriness | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_NETWORK_NAME | `string` | Displayed name of the network | Required | - | `Gnosis Chain` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_SHORT_NAME | `string` | Used for SEO attributes (e.g, page description) | - | -  | `OoG` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_ID | `number` | Chain id, see [https://chainlist.org](https://chainlist.org) for the reference | Required | -  | `99` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_RPC_URL | `string` | Chain public RPC server url, see [https://chainlist.org](https://chainlist.org) for the reference | - | - | `https://core.poa.network` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_CURRENCY_NAME | `string` | Network currency name | - | - | `Ether` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_CURRENCY_WEI_NAME | `string` | Name of network currency subdenomination | - | `wei` | `duck` | v1.23.0+ |
+| NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL | `string` | Network currency symbol | - | - | `ETH` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS | `string` | Network currency decimals | - | `18` | `6` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL | `string` | Network secondary coin symbol.  | - | - | `GNO` | v1.29.0+ |
+| NEXT_PUBLIC_NETWORK_MULTIPLE_GAS_CURRENCIES | `boolean` | Set to `true` for networks where users can pay transaction fees in either the native coin or ERC-20 tokens.  | - | `false` | `true` | v1.33.0+ |
+| NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE | `validation` \| `mining` | Verification type in the network. Irrelevant for Arbitrum (verification type is always `posting`) and ZkEvm (verification type is always `sequencing`) L2s | - | `mining` | `validation` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_TOKEN_STANDARD_NAME | `string` | Name of the standard for creating tokens | - | `ERC` | `BEP` | v1.31.0+ |
+| NEXT_PUBLIC_IS_TESTNET | `boolean`| Set to true if network is testnet | - | `false` | `true` | v1.0.x+ |
 
 &nbsp;
 
 ## API configuration
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_API_PROTOCOL | `http \| https` | Main API protocol | - | `https` | `http` |
-| NEXT_PUBLIC_API_HOST | `string` | Main API host | Required | - | `blockscout.com` |
-| NEXT_PUBLIC_API_PORT | `number` | Port where API is running on the host | - | - | `3001` |
-| NEXT_PUBLIC_API_BASE_PATH | `string` | Base path for Main API endpoint url | - | - | `/poa/core` |
-| NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL | `ws \| wss` | Main API websocket protocol | - | `wss` | `ws` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_API_PROTOCOL | `http \| https` | Main API protocol | - | `https` | `http` | v1.0.x+ |
+| NEXT_PUBLIC_API_HOST | `string` | Main API host | Required | - | `blockscout.com` | v1.0.x+ |
+| NEXT_PUBLIC_API_PORT | `number` | Port where API is running on the host | - | - | `3001` | v1.0.x+ |
+| NEXT_PUBLIC_API_BASE_PATH | `string` | Base path for Main API endpoint url | - | - | `/poa/core` | v1.0.x+ |
+| NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL | `ws \| wss` | Main API websocket protocol | - | `wss` | `ws` | v1.0.x+ |
 
 &nbsp;
 
@@ -105,26 +116,40 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
 
 ### Homepage
 
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_HOMEPAGE_CHARTS | `Array<'daily_txs' \| 'coin_price'  \| 'secondary_coin_price' \| 'market_cap' \| 'tvl'>` | List of charts displayed on the home page | - | - | `['daily_txs','coin_price','market_cap']` | v1.0.x+ |
+| NEXT_PUBLIC_HOMEPAGE_STATS | `Array<'latest_batch' \| 'total_blocks'  \| 'average_block_time' \| 'total_txs' \| 'latest_l1_state_batch' \| 'wallet_addresses' \| 'gas_tracker' \| 'btc_locked' \| 'current_epoch'>` | List of stats widgets displayed on the home page | - | For zkSync, zkEvm and Arbitrum rollups: `['latest_batch','average_block_time','total_txs','wallet_addresses','gas_tracker']`, for other cases: `['total_blocks','average_block_time','total_txs','wallet_addresses','gas_tracker']` | `['total_blocks','total_txs','wallet_addresses']` | v1.35.x+ |
+| NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR | `string` | Text color of the hero plate on the homepage (escape "#" symbol if you use HEX color codes or use rgba-value instead). **DEPRECATED** _Use `NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG` instead_  | - | `white` | `\#DCFE76` | v1.0.x+ |
+| NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND | `string` | Background css value for hero plate on the homepage (escape "#" symbol if you use HEX color codes or use rgba-value instead). **DEPRECATED** _Use `NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG` instead_  | - | `radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%), var(--chakra-colors-blue-400)` | `radial-gradient(at 15% 86%, hsla(350,65%,70%,1) 0px, transparent 50%)` \| `no-repeat bottom 20% right 0px/100% url(https://placekitten/1400/200)` | v1.1.0+ |
+| NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG | `HeroBannerConfig`, see details [below](#hero-banner-configuration-properties) | Configuration of hero banner appearance. | - | - | See [below](#hero-banner-configuration-properties) | v1.35.0+ |
+
+#### Hero banner configuration properties
+
+_Note_ Here, all values are arrays of up to two strings. The first string represents the value for the light color mode, and the second string represents the value for the dark color mode. If the array contains only one string, it will be used for both color modes.
+
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_HOMEPAGE_CHARTS | `Array<'daily_txs' \| 'coin_price' \| 'market_cap' \| 'tvl'>` | List of charts displayed on the home page | - | - | `['daily_txs','coin_price','market_cap']` |
-| NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR | `string` | Text color of the hero plate on the homepage (escape "#" symbol if you use HEX color codes or use rgba-value instead) | - | `white` | `\#DCFE76` |
-| NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND | `string` | Background css value for hero plate on the homepage (escape "#" symbol if you use HEX color codes or use rgba-value instead) | - | `radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%), var(--chakra-colors-blue-400)` | `radial-gradient(at 15% 86%, hsla(350,65%,70%,1) 0px, transparent 50%)` \| `no-repeat bottom 20% right 0px/100% url(https://placekitten/1400/200)` |
-| NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME | `boolean` | Set to false if average block time is useless for the network | - | `true` | `false` |
+| background | `[string, string]` | Banner background (could be a solid color, gradient or picture). The string should be a valid `background` CSS property value. | - | `['radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%), var(--chakra-colors-blue-400)']` | `['lightpink','no-repeat bottom 20% right 0px/100% url(https://placekitten/1400/200)']` |
+| text_color | `[string, string]` | Banner text background. The string should be a valid `color` CSS property value. | - | `['white']` | `['lightpink','#DCFE76']` |
+| border | `[string, string]` | Banner border. The string should be a valid `border` CSS property value. | - | - | `['1px solid yellow','4px dashed #DCFE76']` |
+| button | `Partial<Record<'_default' \| '_hover' \| '_selected', {'background'?: [string, string]; 'text_color?:[string, string]'}>>` | The button on the banner. It has three possible states: `_default`, `_hover`, and `_selected`. The `_selected` state reflects when the user is logged in or their wallet is connected to the app. | - | - | `{'_default':{'background':['deeppink'],'text_color':['white']}}` |
 
 &nbsp;
 
-### Sidebar
+### Navigation
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_NETWORK_LOGO | `string` | Network logo; if not provided, placeholder will be shown; *Note* the logo height should be 24px and width less than 120px | - | - | `https://placekitten.com/240/40` |
-| NEXT_PUBLIC_NETWORK_LOGO_DARK | `string` | Network logo for dark color mode; if not provided, **inverted** regular logo will be used instead | - | - | `https://placekitten.com/240/40` |
-| NEXT_PUBLIC_NETWORK_ICON | `string` | Network icon; used as a replacement for regular network logo when nav bar is collapsed; if not provided, placeholder will be shown; *Note* the icon size should be at least 60px by 60px | - | - | `https://placekitten.com/60/60` |
-| NEXT_PUBLIC_NETWORK_ICON_DARK | `string` | Network icon for dark color mode; if not provided, **inverted** regular icon will be used instead | - | - | `https://placekitten.com/60/60` |
-| NEXT_PUBLIC_FEATURED_NETWORKS | `string` | URL of configuration file (`.json` format only) which contains list of featured networks that will be shown in the network menu. See [below](#featured-network-configuration-properties) list of available properties for particular network | - | - | `https://example.com/featured_networks_config.json` |
-| NEXT_PUBLIC_OTHER_LINKS | `Array<{url: string; text: string}>` | List of links for the "Other" navigation menu | - | - | `[{'url':'https://blockscout.com','text':'Blockscout'}]` |
-| NEXT_PUBLIC_NAVIGATION_HIDDEN_LINKS | `Array<LinkId>` | List of external links hidden in the navigation. Supported ids are `eth_rpc_api`, `rpc_api` | - | - | `['eth_rpc_api']` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_NETWORK_LOGO | `string` | Network logo; if not provided, placeholder will be shown; *Note* the logo height should be 24px and width less than 120px | - | - | `https://placekitten.com/240/40` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_LOGO_DARK | `string` | Network logo for dark color mode; if not provided, **inverted** regular logo will be used instead | - | - | `https://placekitten.com/240/40` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_ICON | `string` | Network icon; used as a replacement for regular network logo when nav bar is collapsed; if not provided, placeholder will be shown; *Note* the icon size should be at least 60px by 60px | - | - | `https://placekitten.com/60/60` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_ICON_DARK | `string` | Network icon for dark color mode; if not provided, **inverted** regular icon will be used instead | - | - | `https://placekitten.com/60/60` | v1.0.x+ |
+| NEXT_PUBLIC_FEATURED_NETWORKS | `string` | URL of configuration file (`.json` format only) or file content string representation. It contains list of featured networks that will be shown in the network menu. See [below](#featured-network-configuration-properties) list of available properties for particular network | - | - | `https://example.com/featured_networks_config.json` \| `[{'title':'Astar(EVM)','url':'https://astar.blockscout.com/','group':'Mainnets','icon':'https://example.com/astar.svg'}]` | v1.0.x+ |
+| NEXT_PUBLIC_OTHER_LINKS | `Array<{url: string; text: string}>` | List of links for the "Other" navigation menu | - | - | `[{'url':'https://blockscout.com','text':'Blockscout'}]` | v1.0.x+ |
+| NEXT_PUBLIC_NAVIGATION_HIDDEN_LINKS | `Array<LinkId>` | List of external links hidden in the navigation. Supported ids are `eth_rpc_api`, `rpc_api` | - | - | `['eth_rpc_api']` | v1.16.0+ |
+| NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES | `Array<string>` | List of menu item routes that should have a lightning label | - | - | `['/accounts']` | v1.31.0+ |
+| NEXT_PUBLIC_NAVIGATION_LAYOUT | `vertical \| horizontal` | Navigation menu layout type | - | `vertical` | `horizontal` | v1.32.0+ |
 
 #### Featured network configuration properties
 
@@ -141,9 +166,9 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
 
 ### Footer
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_FOOTER_LINKS | `string` | URL of configuration file (`.json` format only) which contains list of link groups to be displayed in the footer. See [below](#footer-links-configuration-properties) list of available properties for particular group | - | - | `https://example.com/footer_links_config.json` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_FOOTER_LINKS | `string` | URL of configuration file (`.json` format only) or file content string representation. It contains list of link groups to be displayed in the footer. See [below](#footer-links-configuration-properties) list of available properties for particular group | - | - | `https://example.com/footer_links_config.json` \| `[{'title':'My chain','links':[{'text':'About','url':'https://example.com/about'},{'text':'Contacts','url':'https://example.com/contacts'}]}]` | v1.1.1+ |
 
 The app version shown in the footer is derived from build-time ENV variables `NEXT_PUBLIC_GIT_TAG` and `NEXT_PUBLIC_GIT_COMMIT_SHA` and cannot be overwritten at run-time.
 
@@ -160,22 +185,24 @@ The app version shown in the footer is derived from build-time ENV variables `NE
 
 By default, the app has generic favicon. You can override this behavior by providing the following variables. Hence, the favicon assets bundle will be generated at the container start time and will be used instead of default one.
 
-| Variable               | Type| Description                                       | Compulsoriness  | Default value              | Example value                      |
-|------------------------| --- |---------------------------------------------------| --- |----------------------------|------------------------------------|
-| FAVICON_GENERATOR_API_KEY | `string` | RealFaviconGenerator [API key](https://realfavicongenerator.net/api/) | Required | - | `<your-secret>` |
-| FAVICON_MASTER_URL | `string` | - | - | `NEXT_PUBLIC_NETWORK_ICON` | `https://placekitten.com/180/180` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| FAVICON_GENERATOR_API_KEY | `string` | RealFaviconGenerator [API key](https://realfavicongenerator.net/api/) | Required | - | `<your-secret>` | v1.16.0+ |
+| FAVICON_MASTER_URL | `string` | - | - | `NEXT_PUBLIC_NETWORK_ICON` | `https://placekitten.com/180/180` | v1.11.0+ |
 
 &nbsp;
 
 ### Meta
 
-Settings for meta tags and OG tags
+Settings for meta tags, OG tags and SEO
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE | `boolean` | Set to `true` to promote Blockscout in meta and OG titles | - | `true` | `true` |
-| NEXT_PUBLIC_OG_DESCRIPTION | `string` | Custom OG description | - | - | `Blockscout is the #1 open-source blockchain explorer available today. 100+ chains and counting rely on Blockscout data availability, APIs, and ecosystem tools to support their networks.` |
-| NEXT_PUBLIC_OG_IMAGE_URL | `string` | OG image url. Minimum image size is 200 x 20 pixels (recommended: 1200 x 600); maximum supported file size is 8 MB; 2:1 aspect ratio; supported formats: image/jpeg, image/gif, image/png | - | `static/og_placeholder.png` | `https://placekitten.com/1200/600` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE | `boolean` | Set to `true` to promote Blockscout in meta and OG titles | - | `true` | `true` | v1.12.0+ |
+| NEXT_PUBLIC_OG_DESCRIPTION | `string` | Custom OG description | - | - | `Blockscout is the #1 open-source blockchain explorer available today. 100+ chains and counting rely on Blockscout data availability, APIs, and ecosystem tools to support their networks.` | v1.12.0+ |
+| NEXT_PUBLIC_OG_IMAGE_URL | `string` | OG image url. Minimum image size is 200 x 20 pixels (recommended: 1200 x 600); maximum supported file size is 8 MB; 2:1 aspect ratio; supported formats: image/jpeg, image/gif, image/png | - | `static/og_placeholder.png` | `https://placekitten.com/1200/600` | v1.12.0+ |
+| NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED | `boolean` | Set to `true` to populate OG tags (title, description) with API data for social preview robot requests | - | `false` | `true` | v1.29.0+ |
+| NEXT_PUBLIC_SEO_ENHANCED_DATA_ENABLED | `boolean` | Set to `true` to pre-render page titles (e.g Token page) on the server side and inject page h1-tag to the markup before it is sent to the browser. | - | `false` | `true` | v1.30.0+ |
 
 &nbsp;
 
@@ -183,9 +210,9 @@ Settings for meta tags and OG tags
 
 #### Block views
 
-| Variable | Type | Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS | `Array<BlockFieldId>` | Array of the block fields ids that should be hidden. See below the list of the possible id values. | - | - | `'["burnt_fees","total_reward"]'` |
+| Variable | Type | Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS | `Array<BlockFieldId>` | Array of the block fields ids that should be hidden. See below the list of the possible id values. | - | - | `'["burnt_fees","total_reward"]'` | v1.10.0+ |
 
 
 ##### Block fields list
@@ -195,21 +222,23 @@ Settings for meta tags and OG tags
 | `total_reward` | Total block reward |
 | `nonce` | Block nonce |
 | `miner` | Address of block's miner or validator |
+| `L1_status` | Short interpretation of the batch lifecycle (applicable for Rollup chains) |
+| `batch` | Batch index (applicable for Rollup chains) |
 
 &nbsp;
 
 #### Address views
 
-| Variable                                        | Type                                                                                           | Description                                                                                                                                                                   | Compulsoriness                                                                                                                                                                                                                                                                                                                                                               | Default value | Example value                      |
-|-------------------------------------------------|------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------|------------------------------------|
-| NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE        | `"github" \| "jazzicon" \| "gradient_avatar" \| "blockie" \| "universal_profile\|[identicon]"` | Type of identicon displayed next to addresses. In case of universal_profile you can provide a second identicon type that will be displayed when no universal profile is found | Style of address identicon appearance. Choose between [GitHub](https://github.blog/2013-08-14-identicons/), [Metamask Jazzicon](https://metamask.github.io/jazzicon/), [Gradient Avatar](https://github.com/varld/gradient-avatar), [Ethereum Blocky](https://mycryptohq.github.io/ethereum-blockies-base64/) and [LUKSO Universal Profile](https://universalprofile.cloud/) | -             | `jazzicon`                         | `gradient_avatar`                  |
-| NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS          | `Array<AddressViewId>`                                                                         | Address views that should not be displayed. See below the list of the possible id values.                                                                                     | -                                                                                                                                                                                                                                                                                                                                                                            | -             | `'["top_accounts"]'`               |
-| NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED | `boolean`                                                                                      | Set to `true` if SolidityScan reports are supported                                                                                                                           | -                                                                                                                                                                                                                                                                                                                                                                            | -             | `true`                             |
-| NEXT_PUBLIC_UNIVERSAL_PROFILES_API_URL          | `string`                                                                                       | LUKSO UNIVERSAL PROFILE API URL used for getting various universal profile data                                                                                               | -                                                                                                                                                                                                                                                                                                                                                                            | -             | `https://api.universalprofile.com` |
-| NEXT_PUBLIC_ALGOLIA_APP_ID                      | `string`                                                                                       | Algolia App's ID                                                                                                                                                              | -                                                                                                                                                                                                                                                                                                                                                                            | -             | `ABCD1234`                         |
-| NEXT_PUBLIC_ALGOLIA_API_KEY                     | `string`                                                                                       | Algolia API key used for authenticating requests                                                                                                                              | -                                                                                                                                                                                                                                                                                                                                                                            | -             | `abcd1234defg5678`                 |
-| NEXT_PUBLIC_ALGOLIA_INDEX_NAME                  | `string`                                                                                       | Index name from where data should be requested                                                                                                                                | -                                                                                                                                                                                                                                                                                                                                                                            | -             | `prod_mainnet_data`                |
-| NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED | `boolean`                                                                                      | Set to `true` if SolidityScan reports are supported                                                                                                                           | -                                                                                                                                                                                                                                                                                                                                                                            | -             | `true`                             |
+| Variable | Type | Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE | `"github" \| "jazzicon" \| "gradient_avatar" \| "blockie" \| "universal_profile\|[identicon]` | Type of identicon displayed next to addresses. In case of universal_profile you can provide a second identicon type that will be displayed when no universal profile is found | Style of address identicon appearance. Choose between [GitHub](https://github.blog/2013-08-14-identicons/), [Metamask Jazzicon](https://metamask.github.io/jazzicon/), [Gradient Avatar](https://github.com/varld/gradient-avatar), [Ethereum Blocky](https://mycryptohq.github.io/ethereum-blockies-base64/) and [LUKSO Universal Profile](https://universalprofile.cloud/)| - | `jazzicon` | `gradient_avatar` | v1.12.0+ |
+| NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS | `Array<AddressViewId>` | Address views that should not be displayed. See below the list of the possible id values.  | - | - | `'["top_accounts"]'` | v1.15.0+ |
+| NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED | `boolean` | Set to `true` if SolidityScan reports are supported | - | - | `true` | v1.19.0+ |
+| NEXT_PUBLIC_VIEWS_CONTRACT_EXTRA_VERIFICATION_METHODS | `Array<'solidity-hardhat' \| 'solidity-foundry'>` | Pass an array of additional methods from which users can choose while verifying a smart contract. Both methods are available by default, pass `'none'` string to disable them all. | - | - | `['solidity-hardhat']` | v1.33.0+ |
+| NEXT_PUBLIC_UNIVERSAL_PROFILES_API_URL | `string` | LUKSO UNIVERSAL PROFILE API URL used for getting various universal profile data | - | - | `https://api.universalprofile.com` | - |
+| NEXT_PUBLIC_ALGOLIA_APP_ID | `string` | Algolia App's ID | - | - | `ABCD1234` | - |
+| NEXT_PUBLIC_ALGOLIA_API_KEY | `string` | Algolia API key used for authenticating requests | - | - | `abcd1234defg5678 `| - |
+| NEXT_PUBLIC_ALGOLIA_INDEX_NAME | `string` | Index name from where data should be | - | - | `prod_mainnet_data`| - |
 
 ##### Address views list
 | Id | Description |
@@ -220,10 +249,10 @@ Settings for meta tags and OG tags
 
 #### Transaction views
 
-| Variable | Type | Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS | `Array<TxFieldsId>` | Array of the transaction fields ids that should be hidden. See below the list of the possible id values. | - | - | `'["value","tx_fee"]'` |
-| NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS | `Array<TxAdditionalFieldsId>` | Array of the additional fields ids that should be added to the transaction details. See below the list of the possible id values. | - | - | `'["fee_per_gas"]'` |
+| Variable | Type | Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS | `Array<TxFieldsId>` | Array of the transaction fields ids that should be hidden. See below the list of the possible id values. | - | - | `'["value","tx_fee"]'` | v1.15.0+ |
+| NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS | `Array<TxAdditionalFieldsId>` | Array of the additional fields ids that should be added to the transaction details. See below the list of the possible id values. | - | - | `'["fee_per_gas"]'` | v1.15.0+ |
 
 ##### Transaction fields list
 | Id | Description |
@@ -234,6 +263,8 @@ Settings for meta tags and OG tags
 | `tx_fee` | Total transaction fee |
 | `gas_fees` | Gas fees breakdown |
 | `burnt_fees` | Amount of native coin burnt for transaction |
+| `L1_status` | Short interpretation of the batch lifecycle (applicable for Rollup chains) |
+| `batch` | Batch index (applicable for Rollup chains) |
 
 ##### Transaction additional fields list
 | Id | Description |
@@ -244,9 +275,9 @@ Settings for meta tags and OG tags
 
 #### NFT views
 
-| Variable | Type | Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES | `Array<NftMarketplace>` where `NftMarketplace` can have following [properties](#nft-marketplace-properties) | Used to build up links to NFT collections and NFT instances in external marketplaces. | - | - | `[{'name':'OpenSea','collection_url':'https://opensea.io/assets/ethereum/{hash}','instance_url':'https://opensea.io/assets/ethereum/{hash}/{id}','logo_url':'https://opensea.io/static/images/logos/opensea-logo.svg'}]` |
+| Variable | Type | Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES | `Array<NftMarketplace>` where `NftMarketplace` can have following [properties](#nft-marketplace-properties) | Used to build up links to NFT collections and NFT instances in external marketplaces. | - | - | `[{'name':'OpenSea','collection_url':'https://opensea.io/assets/ethereum/{hash}','instance_url':'https://opensea.io/assets/ethereum/{hash}/{id}','logo_url':'https://opensea.io/static/images/logos/opensea-logo.svg'}]` | v1.15.0+ |
 
 
 ##### NFT marketplace properties
@@ -263,14 +294,18 @@ Settings for meta tags and OG tags
 
 ### Misc
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_NETWORK_EXPLORERS | `Array<NetworkExplorer>` where `NetworkExplorer` can have following [properties](#network-explorer-configuration-properties) | Used to build up links to transactions, blocks, addresses in other chain explorers. | - | - | `[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/poa/core/tx'}}]` |
-| NEXT_PUBLIC_CONTRACT_CODE_IDES | `Array<ContractCodeIde>` where `ContractCodeIde` can have following [properties](#contract-code-ide-configuration-properties) | Used to build up links to IDEs with contract source code. | - | - | `[{'title':'Remix IDE','url':'https://remix.blockscout.com/?address={hash}&blockscout={domain}','icon_url':'https://example.com/icon.svg'}]` |
-| NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS | `boolean` | Set to `true` to enable Submit Audit form on the contract page | - | `false` | `true` |
-| NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS | `boolean` | Set to `true` to hide indexing alert in the page header about indexing chain's blocks | - | `false` | `true` |
-| NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS | `boolean` | Set to `true` to hide indexing alert in the page footer about indexing block's internal transactions | - | `false` | `true` |
-| NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE | `string` | Used for displaying custom announcements or alerts in the header of the site. Could be a regular string or a HTML code. | - | - | `Hello world! 🤪` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_NETWORK_EXPLORERS | `Array<NetworkExplorer>` where `NetworkExplorer` can have following [properties](#network-explorer-configuration-properties) | Used to build up links to transactions, blocks, addresses in other chain explorers. | - | - | `[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/poa/core/tx'}}]` | v1.0.x+ |
+| NEXT_PUBLIC_CONTRACT_CODE_IDES | `Array<ContractCodeIde>` where `ContractCodeIde` can have following [properties](#contract-code-ide-configuration-properties) | Used to build up links to IDEs with contract source code. | - | - | `[{'title':'Remix IDE','url':'https://remix.blockscout.com/?address={hash}&blockscout={domain}','icon_url':'https://example.com/icon.svg'}]` | v1.23.0+ |
+| NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS | `boolean` | Set to `true` to enable Submit Audit form on the contract page | - | `false` | `true` | v1.25.0+ |
+| NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS | `boolean` | Set to `true` to hide indexing alert in the page header about indexing chain's blocks | - | `false` | `true` | v1.17.0+ |
+| NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS | `boolean` | Set to `true` to hide indexing alert in the page footer about indexing block's internal transactions | - | `false` | `true` | v1.17.0+ |
+| NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE | `string` | Used for displaying custom announcements or alerts in the header of the site. Could be a regular string or a HTML code. | - | - | `Hello world! 🤪` | v1.13.0+ |
+| NEXT_PUBLIC_COLOR_THEME_DEFAULT | `'light' \| 'dim' \| 'midnight' \| 'dark'` | Preferred color theme of the app | - | - | `midnight` | v1.30.0+ |
+| NEXT_PUBLIC_FONT_FAMILY_HEADING | `FontFamily`, see full description [below](#font-family-configuration-properties) | Special typeface to use in page headings (`<h1>`, `<h2>`, etc.) | - | - | `{'name':'Montserrat','url':'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap'}` | v1.35.0+ |
+| NEXT_PUBLIC_FONT_FAMILY_BODY | `FontFamily`, see full description [below](#font-family-configuration-properties) | Main typeface to use in page content elements. | - | - | `{'name':'Raleway','url':'https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap'}` | v1.35.0+ |
+| NEXT_PUBLIC_MAX_CONTENT_WIDTH_ENABLED | `boolean` | Set to `true` to restrict the page content width on extra-large screens. | - | `true` | `false` | v1.34.1+ |
 
 #### Network explorer configuration properties
 
@@ -291,6 +326,13 @@ Settings for meta tags and OG tags
 | url | `string` | URL of the IDE with placeholders for contract hash (`{hash}`) and current domain (`{domain}`) | Required | - | `https://remix.blockscout.com/?address={hash}&blockscout={domain}` |
 | icon_url | `string` | URL of the IDE icon | Required | - | `https://example.com/icon.svg` |
 
+#### Font family configuration properties
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value |
+| --- | --- | --- | --- | --- | --- |
+| name | `string` | Font family name; used to define the `font-family` CSS property. | Required | - | `Montserrat` |
+| url | `string` | URL for external font. Ensure the font supports the following weights: 400, 500, 600, and 700. | Required | - | `https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap` |
+
 &nbsp;
 
 ## App features
@@ -299,12 +341,12 @@ Settings for meta tags and OG tags
 
 ### My account
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED | `boolean` | Set to true if network has account feature | Required | - | `true` |
-| NEXT_PUBLIC_AUTH0_CLIENT_ID | `string` | Client id for [Auth0](https://auth0.com/) provider | Required | - | `<your-secret>` |
-| NEXT_PUBLIC_AUTH_URL | `string` | Account auth base url; it is used for building login URL (`${ NEXT_PUBLIC_AUTH_URL }/auth/auth0`) and logout return URL (`${ NEXT_PUBLIC_AUTH_URL }/auth/logout`); if not provided the base app URL will be used instead | Required | - | `https://blockscout.com` |
-| NEXT_PUBLIC_LOGOUT_URL | `string` | Account logout url. Required if account is supported for the app instance. | Required | - | `https://blockscoutcom.us.auth0.com/v2/logout` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED | `boolean` | Set to true if network has account feature | Required | - | `true` | v1.0.x+ |
+| NEXT_PUBLIC_AUTH0_CLIENT_ID | `string` | Client id for [Auth0](https://auth0.com/) provider | Required | - | `<your-secret>` | v1.0.x+ |
+| NEXT_PUBLIC_AUTH_URL | `string` | Account auth base url; it is used for building login URL (`${ NEXT_PUBLIC_AUTH_URL }/auth/auth0`) and logout return URL (`${ NEXT_PUBLIC_AUTH_URL }/auth/logout`); if not provided the base app URL will be used instead | Required | - | `https://blockscout.com` | v1.0.x+ |
+| NEXT_PUBLIC_LOGOUT_URL | `string` | Account logout url. Required if account is supported for the app instance. | Required | - | `https://blockscoutcom.us.auth0.com/v2/logout` | v1.0.x+ |
 
 &nbsp;
 
@@ -312,10 +354,10 @@ Settings for meta tags and OG tags
 
 This feature is **enabled by default**. To switch it off pass `NEXT_PUBLIC_GAS_TRACKER_ENABLED=false`.
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_GAS_TRACKER_ENABLED | `boolean` | Set to true to enable "Gas tracker" in the app | Required | `true` | `false` |
-| NEXT_PUBLIC_GAS_TRACKER_UNITS | Array<`usd` \| `gwei`> | Array of units for displaying gas prices on the Gas Tracker page, in the stats snippet on the Home page, and in the top bar. The first value in the array will take priority over the second one in all mentioned views. If only one value is provided, gas prices will be displayed only in that unit. | - | `[ 'usd', 'gwei' ]` | `[ 'gwei' ]` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_GAS_TRACKER_ENABLED | `boolean` | Set to true to enable "Gas tracker" in the app | Required | `true` | `false` | v1.25.0+ |
+| NEXT_PUBLIC_GAS_TRACKER_UNITS | Array<`usd` \| `gwei`> | Array of units for displaying gas prices on the Gas Tracker page, in the stats snippet on the Home page, and in the top bar. The first value in the array will take priority over the second one in all mentioned views. If only one value is provided, gas prices will be displayed only in that unit. | - | `[ 'usd', 'gwei' ]` | `[ 'gwei' ]` | v1.25.0+ |
 
 &nbsp;
 
@@ -323,37 +365,38 @@ This feature is **enabled by default**. To switch it off pass `NEXT_PUBLIC_GAS_T
 
 *Note* all ENV variables required for [My account](ENVS.md#my-account) feature should be passed alongside the following ones:
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_CONTRACT_INFO_API_HOST | `string` | Contract Info API endpoint url | Required | - | `https://contracts-info.services.blockscout.com` |
-| NEXT_PUBLIC_ADMIN_SERVICE_API_HOST | `string` | Admin Service API endpoint url | Required | - | `https://admin-rs.services.blockscout.com` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_CONTRACT_INFO_API_HOST | `string` | Contract Info API endpoint url | Required | - | `https://contracts-info.services.blockscout.com` | v1.1.0+ |
+| NEXT_PUBLIC_ADMIN_SERVICE_API_HOST | `string` | Admin Service API endpoint url | Required | - | `https://admin-rs.services.blockscout.com` | v1.1.0+ |
 
 &nbsp;
 
 ### Blockchain interaction (writing to contract, etc.)
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID | `string` | Project id for [WalletConnect](https://cloud.walletconnect.com/) integration | Required | - | `<your-secret>` |
-| NEXT_PUBLIC_NETWORK_RPC_URL | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | - | `https://core.poa.network` |
-| NEXT_PUBLIC_NETWORK_NAME | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | - | `Gnosis Chain` |
-| NEXT_PUBLIC_NETWORK_ID | `number` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | -  | `99` |
-| NEXT_PUBLIC_NETWORK_CURRENCY_NAME | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | - | `Ether` |
-| NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | - | `ETH` |
-| NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | - | `18` | `6` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID | `string` | Project id for [WalletConnect](https://cloud.walletconnect.com/) integration | Required | - | `<your-secret>` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_RPC_URL | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | - | `https://core.poa.network` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_NAME | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | - | `Gnosis Chain` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_ID | `number` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | -  | `99` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_CURRENCY_NAME | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | - | `Ether` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | - | `ETH` | v1.0.x+ |
+| NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | - | `18` | `6` | v1.0.x+ |
 
 &nbsp;
 
 ### Banner ads
 
 This feature is **enabled by default** with the `slise` ads provider. To switch it off pass `NEXT_PUBLIC_AD_BANNER_PROVIDER=none`.
+*Note* that the `getit` ad provider is temporary disabled.
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_AD_BANNER_PROVIDER | `slise` \| `adbutler` \| `coinzilla` \|  `hype` \| `getit` \| `none` | Ads provider  | - | `slise` | `coinzilla` |
-| NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER | `adbutler` | Additional ads provider to mix with the main one | - | - | `adbutler` |
-| NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP | `{ id: string; width: string; height: string }` | Placement config for desktop Adbutler banner | - | - | `{'id':'123456','width':'728','height':'90'}` |
-| NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE | `{ id: string; width: number; height: number }` | Placement config for mobile Adbutler banner | - | - | `{'id':'654321','width':'300','height':'100'}` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_AD_BANNER_PROVIDER | `slise` \| `adbutler` \| `coinzilla` \|  `hype` \| `getit` \| `none` | Ads provider  | - | `slise` | `coinzilla` | v1.0.x+ |
+| NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER | `adbutler` | Additional ads provider to mix with the main one | - | - | `adbutler` | v1.28.0+ |
+| NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP | `{ id: string; width: string; height: string }` | Placement config for desktop Adbutler banner | - | - | `{'id':'123456','width':'728','height':'90'}` | v1.3.0+ |
+| NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE | `{ id: string; width: number; height: number }` | Placement config for mobile Adbutler banner | - | - | `{'id':'654321','width':'300','height':'100'}` | v1.3.0+ |
 
 &nbsp;
 
@@ -361,60 +404,70 @@ This feature is **enabled by default** with the `slise` ads provider. To switch
 
 This feature is **enabled by default** with the `coinzilla` ads provider. To switch it off pass `NEXT_PUBLIC_AD_TEXT_PROVIDER=none`.
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_AD_TEXT_PROVIDER | `coinzilla` \| `none` | Ads provider | - | `coinzilla` | `none` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_AD_TEXT_PROVIDER | `coinzilla` \| `none` | Ads provider | - | `coinzilla` | `none` | v1.0.x+ |
 
 &nbsp;
 
 ### Beacon chain
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_HAS_BEACON_CHAIN | `boolean` | Set to true for networks with the beacon chain | Required | - | `true` |
-| NEXT_PUBLIC_BEACON_CHAIN_CURRENCY_SYMBOL | `string` | Beacon network currency symbol | - | `NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL` | `ETH` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_HAS_BEACON_CHAIN | `boolean` | Set to true for networks with the beacon chain | Required | - | `true` | v1.0.x+ |
+| NEXT_PUBLIC_BEACON_CHAIN_CURRENCY_SYMBOL | `string` | Beacon network currency symbol | - | `NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL` | `ETH` | v1.0.x+ |
 
 &nbsp;
 
-### User operations feature (ERC-4337)
+### User operations (ERC-4337)
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_HAS_USER_OPS | `boolean` | Set to true to show user operations related data and pages | - | - | `true` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_HAS_USER_OPS | `boolean` | Set to true to show user operations related data and pages | - | - | `true` | v1.23.0+ |
 
 &nbsp;
 
 ### Rollup chain
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_ROLLUP_TYPE | `'optimistic' \| 'shibarium' \| 'zkEvm' \| 'zkSync' ` | Rollup chain type | Required | - | `'optimistic'` |
-| NEXT_PUBLIC_ROLLUP_L1_BASE_URL | `string` | Blockscout base URL for L1 network | Required | - | `'http://eth-goerli.blockscout.com'` |
-| NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL | `string` | URL for L2 -> L1 withdrawals | - | - | `https://app.optimism.io/bridge/withdraw` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_ROLLUP_TYPE | `'optimistic' \| 'arbitrum' \| 'shibarium' \| 'zkEvm' \| 'zkSync' ` | Rollup chain type | Required | - | `'optimistic'` | v1.24.0+ |
+| NEXT_PUBLIC_ROLLUP_L1_BASE_URL | `string` | Blockscout base URL for L1 network | Required | - | `'http://eth-goerli.blockscout.com'` | v1.24.0+ |
+| NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL | `string` | URL for L2 -> L1 withdrawals (Optimistic stack only) | Required for `optimistic` rollups | - | `https://app.optimism.io/bridge/withdraw` | v1.24.0+ |
+| NEXT_PUBLIC_FAULT_PROOF_ENABLED | `boolean` | Set to `true` for chains with fault proof system enabled (Optimistic stack only) | - | - | `true` | v1.31.0+ |
+| NEXT_PUBLIC_HAS_MUD_FRAMEWORK | `boolean` | Set to `true` for instances that use MUD framework (Optimistic stack only) | - | - | `true` | v1.33.0+ |
 
 &nbsp;
 
 ### Export data to CSV file
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY | `string` | See [below](ENVS.md#google-recaptcha) | true | - | `<your-secret>` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY | `string` | See [below](ENVS.md#google-recaptcha) | true | - | `<your-secret>` | v1.0.x+ |
 
 &nbsp;
 
 ### Google analytics
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID | `string` | Property ID for [Google Analytics](https://analytics.google.com/) service | true | - | `UA-XXXXXX-X` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID | `string` | Property ID for [Google Analytics](https://analytics.google.com/) service | true | - | `UA-XXXXXX-X` | v1.0.x+ |
 
 &nbsp;
 
 ### Mixpanel analytics
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN | `string` | Project token for [Mixpanel](https://mixpanel.com/) analytics service | true | - | `<your-secret>` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN | `string` | Project token for [Mixpanel](https://mixpanel.com/) analytics service | true | - | `<your-secret>` | v1.1.0+ |
+
+&nbsp;
+
+### GrowthBook feature flagging and A/B testing
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY | `string` | Client SDK key for [GrowthBook](https://www.growthbook.io/) service | true | - | `<your-secret>` | v1.22.0+ |
 
 &nbsp;
 
@@ -428,45 +481,52 @@ This feature is **enabled by default** with the `coinzilla` ads provider. To swi
 
 ### GraphQL API documentation
 
-This feature is **always enabled**, but you can configure its behavior by passing the following variables.
+This feature is **always enabled**, but you can disable it by passing `none` value to `NEXT_PUBLIC_GRAPHIQL_TRANSACTION` variable.
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_GRAPHIQL_TRANSACTION | `string` | Txn hash for default query at GraphQl playground page | - | - | `0x4a0ed8ddf751a7cb5297f827699117b0f6d21a0b2907594d300dc9fed75c7e62` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_GRAPHIQL_TRANSACTION | `string` | Txn hash for default query at GraphQl playground page. Pass `none` to disable the feature. | - | - | `0x4a0ed8ddf751a7cb5297f827699117b0f6d21a0b2907594d300dc9fed75c7e62` | v1.0.x+ |
 
 &nbsp;
 
 ### REST API documentation
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_API_SPEC_URL | `string` | Spec to be displayed on `/api-docs` page | Required | `https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml` | `https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml` |
+This feature is **always enabled**, but you can disable it by passing `none` value to `NEXT_PUBLIC_API_SPEC_URL` variable.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_API_SPEC_URL | `string` | Spec to be displayed on `/api-docs` page. Pass `none` to disable the feature. | - | `https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml` | `https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml` | v1.0.x+ |
 
 &nbsp;
 
 ### Marketplace
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_MARKETPLACE_ENABLED | `boolean` | `true` means that the marketplace page will be enabled | - | - | `true` |
-| NEXT_PUBLIC_MARKETPLACE_CONFIG_URL | `string` | URL of configuration file (`.json` format only) which contains list of apps that will be shown on the marketplace page. See [below](#marketplace-app-configuration-properties) list of available properties for an app. Can be replaced with NEXT_PUBLIC_ADMIN_SERVICE_API_HOST | Required | - | `https://example.com/marketplace_config.json` |
-| NEXT_PUBLIC_ADMIN_SERVICE_API_HOST | `string` | Admin Service API endpoint url. Can be used instead of NEXT_PUBLIC_MARKETPLACE_CONFIG_URL | - | - | `https://admin-rs.services.blockscout.com` |
-| NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM | `string` | Link to form where authors can submit their dapps to the marketplace | Required | - | `https://airtable.com/shrqUAcjgGJ4jU88C` |
-| NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM | `string` | Link to form where users can suggest ideas for the marketplace | - | - | `https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form` |
-| NEXT_PUBLIC_NETWORK_RPC_URL | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | - | `https://core.poa.network` |
-| NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL | `string` | URL of configuration file (`.json` format only) which contains the list of categories to be displayed on the marketplace page in the specified order. If no URL is provided, then the list of categories will be compiled based on the `categories` fields from the marketplace (apps) configuration file | - | - | `https://example.com/marketplace_categories.json` |
-| NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL | `string` | URL of configuration file (`.json` format only) which contains app security reports for displaying security scores on the Marketplace page | - | - | `https://example.com/marketplace_security_reports.json` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_MARKETPLACE_ENABLED | `boolean` | `true` means that the marketplace page will be enabled | Required | - | `true` | v1.24.1+ |
+| NEXT_PUBLIC_MARKETPLACE_CONFIG_URL | `string` | URL of configuration file (`.json` format only) which contains list of apps that will be shown on the marketplace page. See [below](#marketplace-app-configuration-properties) list of available properties for an app. Can be replaced with NEXT_PUBLIC_ADMIN_SERVICE_API_HOST | Required | - | `https://example.com/marketplace_config.json` | v1.0.x+ |
+| NEXT_PUBLIC_ADMIN_SERVICE_API_HOST | `string` | Admin Service API endpoint url. Can be used instead of NEXT_PUBLIC_MARKETPLACE_CONFIG_URL | - | - | `https://admin-rs.services.blockscout.com` | v1.1.0+ |
+| NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM | `string` | Link to form where authors can submit their dapps to the marketplace | Required | - | `https://airtable.com/shrqUAcjgGJ4jU88C` | v1.0.x+ |
+| NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM | `string` | Link to form where users can suggest ideas for the marketplace | - | - | `https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form` | v1.24.0+ |
+| NEXT_PUBLIC_NETWORK_RPC_URL | `string` | See in [Blockchain parameters](ENVS.md#blockchain-parameters) section | Required | - | `https://core.poa.network` | v1.0.x+ |
+| NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL | `string` | URL of configuration file (`.json` format only) which contains the list of categories to be displayed on the marketplace page in the specified order. If no URL is provided, then the list of categories will be compiled based on the `categories` fields from the marketplace (apps) configuration file | - | - | `https://example.com/marketplace_categories.json` | v1.23.0+ |
+| NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL | `string` | URL of configuration file (`.json` format only) which contains app security reports for displaying security scores on the Marketplace page | - | - | `https://example.com/marketplace_security_reports.json` | v1.28.0+ |
+| NEXT_PUBLIC_MARKETPLACE_FEATURED_APP | `string` | ID of the featured application to be displayed on the banner on the Marketplace page | - | - | `uniswap` | v1.29.0+ |
+| NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL | `string` | URL of the banner HTML content | - | - | `https://example.com/banner` | v1.29.0+ |
+| NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL | `string` | URL of the page the banner leads to | - | - | `https://example.com` | v1.29.0+ |
+| NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY | `string` | Airtable API key | - | - | - | v1.33.0+ |
+| NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID | `string` | Airtable base ID with dapp ratings | - | - | - | v1.33.0+ |
 
 #### Marketplace app configuration properties
 
-| Property | Type | Description | Compulsoriness | Example value
+| Property | Type | Description | Compulsoriness | Example value |
 | --- | --- | --- | --- | --- |
 | id | `string` | Used as slug for the app. Must be unique in the app list. | Required | `'app'` |
 | external | `boolean` | `true` means that the application opens in a new window, but not in an iframe. | - | `true` |
 | title | `string` | Displayed title of the app. | Required | `'The App'` |
 | logo | `string` | URL to logo file. Should be at least 288x288. | Required | `'https://foo.app/icon.png'` |
 | shortDescription | `string` | Displayed only in the app list. | Required | `'Awesome app'` |
-| categories | `Array<MarketplaceCategoryId>` | Displayed category. Select one of the following below. | Required | `['security', 'tools']` |
+| categories | `Array<string>` | Displayed category. | Required | `['Security', 'Tools']` |
 | author | `string` | Displayed author of the app | Required | `'Bob'` |
 | url | `string` | URL of the app which will be launched in the iframe. | Required | `'https://foo.app/launch'` |
 | description | `string` | Displayed only in the modal dialog with additional info about the app. | Required | `'The best app'` |
@@ -477,36 +537,23 @@ This feature is **always enabled**, but you can configure its behavior by passin
 | internalWallet | `boolean` | `true` means that the application can automatically connect to the Blockscout wallet. | - | `true` |
 | priority | `number` | The higher the priority, the higher the app will appear in the list on the Marketplace page. | - | `7` |
 
-#### Marketplace categories ids
-
-For each application, you need to specify the `MarketplaceCategoryId` to which it belongs. Select one of the following:
-
-- `defi`
-- `exchanges`
-- `finance`
-- `games`
-- `marketplaces`
-- `nft`
-- `security`
-- `social`
-- `tools`
-- `yieldFarming`
-
 &nbsp;
 
 ### Solidity to UML diagrams
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_VISUALIZE_API_HOST | `string` | Visualize API endpoint url | Required | - | `https://visualizer.services.blockscout.com` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_VISUALIZE_API_HOST | `string` | Visualize API endpoint url | Required | - | `https://visualizer.services.blockscout.com` | v1.0.x+ |
+| NEXT_PUBLIC_VISUALIZE_API_BASE_PATH | `string` | Base path for Visualize API endpoint url | - | - | `/poa/core` | v1.29.0+ |
 
 &nbsp;
 
 ### Blockchain statistics
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_STATS_API_HOST | `string` | API endpoint url | Required | - | `https://stats.services.blockscout.com` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_STATS_API_HOST | `string` | Stats API endpoint url | Required | - | `https://stats.services.blockscout.com` | v1.0.x+ |
+| NEXT_PUBLIC_STATS_API_BASE_PATH | `string` | Base path for Stats API endpoint url | - | - | `/poa/core` | v1.29.0+ |
 
 &nbsp;
 
@@ -514,26 +561,26 @@ For each application, you need to specify the `MarketplaceCategoryId` to which i
 
 This feature is **enabled by default** with the `['metamask']` value. To switch it off pass `NEXT_PUBLIC_WEB3_WALLETS=none`.
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_WEB3_WALLETS | `Array<'metamask' \| 'coinbase' \| 'token_pocket'>` | Array of Web3 wallets which will be used  to add tokens or chain to. The first wallet which is enabled in user's browser will be shown. | - | `[ 'metamask' ]` | `[ 'coinbase' ]` |
-| NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET | `boolean`| Set to `true` to hide icon "Add to your wallet" next to token addresses | - | - | `true` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_WEB3_WALLETS | `Array<'metamask' \| 'coinbase' \| 'token_pocket'>` | Array of Web3 wallets which will be used  to add tokens or chain to. The first wallet which is enabled in user's browser will be shown. | - | `[ 'metamask' ]` | `[ 'coinbase' ]` | v1.10.0+ |
+| NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET | `boolean`| Set to `true` to hide icon "Add to your wallet" next to token addresses | - | - | `true` | v1.0.x+ |
 
 &nbsp;
 
 ### Transaction interpretation
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER | `blockscout` \| `noves` \| `none` | Transaction interpretation provider that displays human readable transaction description | - | `none` | `blockscout` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER | `blockscout` \| `noves` \| `none` | Transaction interpretation provider that displays human readable transaction description | - | `none` | `blockscout` | v1.21.0+ |
 
 &nbsp;
 
 ### Verified tokens info
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_CONTRACT_INFO_API_HOST | `string` | Contract Info API endpoint url | Required | - | `https://contracts-info.services.blockscout.com` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_CONTRACT_INFO_API_HOST | `string` | Contract Info API endpoint url | Required | - | `https://contracts-info.services.blockscout.com` | v1.0.x+ |
 
 &nbsp;
 
@@ -541,9 +588,30 @@ This feature is **enabled by default** with the `['metamask']` value. To switch
 
 This feature allows resolving blockchain addresses using human-readable domain names.
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_NAME_SERVICE_API_HOST | `string` | Name Service API endpoint url | Required | - | `https://bens.services.blockscout.com` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_NAME_SERVICE_API_HOST | `string` | Name Service API endpoint url | Required | - | `https://bens.services.blockscout.com` | v1.22.0+ |
+
+&nbsp;
+
+### Metadata service integration
+
+This feature allows name tags and other public tags for addresses.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_METADATA_SERVICE_API_HOST | `string` | Metadata Service API endpoint url | Required | - | `https://metadata.services.blockscout.com` | v1.30.0+ |
+
+&nbsp;
+
+### Public tag submission
+
+This feature allows you to submit an application with a public address tag.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_METADATA_SERVICE_API_HOST | `string` | Metadata Service API endpoint url | Required | - | `https://metadata.services.blockscout.com` | v1.30.0+ |
+| NEXT_PUBLIC_ADMIN_SERVICE_API_HOST | `string` | Admin Service API endpoint url | Required | - | `https://admin-rs.services.blockscout.com` | v1.1.0+ |
 
 &nbsp;
 
@@ -551,9 +619,9 @@ This feature allows resolving blockchain addresses using human-readable domain n
 
 This feature enables views related to blob transactions (EIP-4844), such as the Blob Txns tab on the Transactions page and the Blob details page.
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED | `boolean` | Set to true to enable blob transactions views. | Required | - | `true` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED | `boolean` | Set to true to enable blob transactions views. | Required | - | `true` | v1.28.0+ |
 
 &nbsp;
 
@@ -561,10 +629,10 @@ This feature enables views related to blob transactions (EIP-4844), such as the
 
 This feature allows users to view tokens that have been bridged from other EVM chains. Additional tab "Bridged" will be added to the tokens page and the link to original token will be displayed on the token page.
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_BRIDGED_TOKENS_CHAINS | `Array<BridgedTokenChain>` where `BridgedTokenChain` can have following [properties](#bridged-token-chain-configuration-properties) | Used for displaying filter by the chain from which token where bridged. Also, used for creating links to original tokens in other explorers. | Required | - | `[{'id':'1','title':'Ethereum','short_title':'ETH','base_url':'https://eth.blockscout.com/token'}]` |
-| NEXT_PUBLIC_BRIDGED_TOKENS_BRIDGES | `Array<TokenBridge>` where `TokenBridge` can have following [properties](#token-bridge-configuration-properties) | Used for displaying text about bridges types on the tokens page. | Required | - | `[{'type':'omni','title':'OmniBridge','short_title':'OMNI'}]` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_BRIDGED_TOKENS_CHAINS | `Array<BridgedTokenChain>` where `BridgedTokenChain` can have following [properties](#bridged-token-chain-configuration-properties) | Used for displaying filter by the chain from which token where bridged. Also, used for creating links to original tokens in other explorers. | Required | - | `[{'id':'1','title':'Ethereum','short_title':'ETH','base_url':'https://eth.blockscout.com/token'}]` | v1.14.0+ |
+| NEXT_PUBLIC_BRIDGED_TOKENS_BRIDGES | `Array<TokenBridge>` where `TokenBridge` can have following [properties](#token-bridge-configuration-properties) | Used for displaying text about bridges types on the tokens page. | Required | - | `[{'type':'omni','title':'OmniBridge','short_title':'OMNI'}]` | v1.14.0+ |
 
 #### Bridged token chain configuration properties
 
@@ -591,9 +659,9 @@ This feature allows users to view tokens that have been bridged from other EVM c
 
 For the smart contract addresses which are [Safe{Core} accounts](https://safe.global/) public tag "Multisig: Safe" will be displayed in the address page header alongside to Safe logo.
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_SAFE_TX_SERVICE_URL | `string` | The Safe transaction service URL. See full list of supported networks [here](https://docs.safe.global/api-supported-networks). | - | - | `uniswap` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_SAFE_TX_SERVICE_URL | `string` | The Safe transaction service URL. See full list of supported networks [here](https://docs.safe.global/api-supported-networks). | - | - | `uniswap` | v1.26.0+ |
 
 &nbsp;
 
@@ -601,9 +669,29 @@ For the smart contract addresses which are [Safe{Core} accounts](https://safe.gl
 
 For blockchains that implement SUAVE architecture additional fields will be shown on the transaction page ("Allowed peekers", "Kettle"). Users also will be able to see the list of all transactions for a particular Kettle in the separate view.
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_IS_SUAVE_CHAIN | `boolean` | Set to true for blockchains with [SUAVE architecture](https://writings.flashbots.net/mevm-suave-centauri-and-beyond) | Required | - | `true` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_IS_SUAVE_CHAIN | `boolean` | Set to true for blockchains with [SUAVE architecture](https://writings.flashbots.net/mevm-suave-centauri-and-beyond) | Required | - | `true` | v1.14.0+ |
+
+&nbsp;
+
+### MetaSuites extension
+
+Enables [MetaSuites browser extension](https://github.com/blocksecteam/metasuites) to integrate with the app views.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_METASUITES_ENABLED | `boolean` | Set to true to enable integration | Required | - | `true` | v1.26.0+ |
+
+&nbsp;
+
+### Validators list
+
+The feature enables the Validators page which provides detailed information about the validators of the PoS chains.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE | `'stability' \| 'blackfort'` | Chain type | Required | - | `'stability'` | v1.25.0+ |
 
 &nbsp;
 
@@ -629,23 +717,85 @@ The feature enables the Validators page which provides detailed information abou
 
 ### Sentry error monitoring
 
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_SENTRY_DSN | `string` | Client key for your Sentry.io app | Required | - | `<your-secret>` | v1.0.x+ |
+| SENTRY_CSP_REPORT_URI | `string` | URL for sending CSP-reports to your Sentry.io app | - | - | `<your-secret>` | v1.0.x+ |
+| NEXT_PUBLIC_SENTRY_ENABLE_TRACING | `boolean` | Enables tracing and performance monitoring in Sentry.io | - | `false` | `true` | v1.17.0+ |
+| NEXT_PUBLIC_APP_ENV | `string` | App env (e.g development, review or production). Passed as `environment` property to Sentry config | - | `production` | `production` | v1.0.x+ |
+| NEXT_PUBLIC_APP_INSTANCE | `string` | Name of app instance. Used as custom tag `app_instance` value in the main Sentry scope. If not provided, it will be constructed from `NEXT_PUBLIC_APP_HOST` | - | - | `wonderful_kepler` | v1.0.x+ |
+
+&nbsp;
+
+### OpenTelemetry
+
+OpenTelemetry SDK for Node.js app could be enabled by passing `OTEL_SDK_ENABLED=true` variable. Configure the OpenTelemetry Protocol Exporter by using the generic environment variables described in the [OT docs](https://opentelemetry.io/docs/specs/otel/protocol/exporter/#configuration-options). Note that this Next.js feature is currently experimental. The Docker image should be built with the `NEXT_OPEN_TELEMETRY_ENABLED=true` argument to enable it.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| OTEL_SDK_ENABLED | `boolean` | Run-time flag to enable the feature | Required | `false` | `true` | v1.18.0+ |
+
+&nbsp;
+
+### DeFi dropdown
+
+If the feature is enabled, a single button or a dropdown (if more than 1 item is provided) will be displayed at the top of the explorer page, which will take a user to the specified application in the marketplace or to an external site.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS | `[{ text: string; icon: string; dappId?: string, url?: string }]` | An array of dropdown items containing the button text, icon name and dappId in DAppscout or an external url | - | - | `[{'text':'Swap','icon':'swap','dappId':'uniswap'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'}]` | v1.31.0+ |
+
+&nbsp;
+
+### Multichain balance button
+
+If the feature is enabled, a Multichain balance button will be displayed on the address page, which will take you to the portfolio application in the marketplace or to an external site.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG | `{ name: string; url_template: string; dapp_id?: string; logo?: string }` | Multichain portfolio application config See [below](#multichain-button-configuration-properties) | - | - | `{ name: 'zerion', url_template: 'https://app.zerion.io/{address}/overview', logo: 'https://example.com/icon.svg'` | v1.31.0+ |
+
+&nbsp;
+
+#### Multichain button configuration properties
+
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_SENTRY_DSN | `string` | Client key for your Sentry.io app | Required | - | `<your-secret>` |
-| SENTRY_CSP_REPORT_URI | `string` | URL for sending CSP-reports to your Sentry.io app | - | - | `<your-secret>` |
-| NEXT_PUBLIC_SENTRY_ENABLE_TRACING | `boolean` | Enables tracing and performance monitoring in Sentry.io | - | `false` | `true` |
-| NEXT_PUBLIC_APP_ENV | `string` | App env (e.g development, review or production). Passed as `environment` property to Sentry config | - | `production` | `production` |
-| NEXT_PUBLIC_APP_INSTANCE | `string` | Name of app instance. Used as custom tag `app_instance` value in the main Sentry scope. If not provided, it will be constructed from `NEXT_PUBLIC_APP_HOST` | - | - | `wonderful_kepler` |
+| name | `string` | Multichain portfolio application name | Required | - | `zerion` |
+| url_template | `string` | Url template to the portfolio. Should be a template with `{address}` variable | Required | - | `https://app.zerion.io/{address}/overview` |
+| dapp_id | `string` | Set for open a Blockscout dapp page with the portfolio instead of opening external app page | - | - | `zerion` |
+| logo | `string` | Multichain portfolio application logo (.svg) url | - | - | `https://example.com/icon.svg` |
 
 &nbsp;
 
-### OpenTelemetry
+### Get gas button
+
+If the feature is enabled, a Get gas button will be displayed in the top bar, which will take you to the gas refuel application in the marketplace or to an external site.
 
-OpenTelemetry SDK for Node.js app could be enabled by passing `OTEL_SDK_ENABLED=true` variable. Configure the OpenTelemetry Protocol Exporter by using the generic environment variables described in the [OT docs](https://opentelemetry.io/docs/specs/otel/protocol/exporter/#configuration-options).
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_GAS_REFUEL_PROVIDER_CONFIG | `{ name: string; url_template: string; dapp_id?: string; logo?: string }` | Get gas button config. See [below](#get-gas-button-configuration-properties) | - | - | `{ name: 'Need gas?', dapp_id: 'smol-refuel', url_template: 'https://smolrefuel.com/?outboundChain={chainId}', logo: 'https://example.com/icon.png' }` | v1.33.0+ |
+
+&nbsp;
+
+#### Get gas button configuration properties
 
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
-| OTEL_SDK_ENABLED | `boolean` | Flag to enable the feature | Required | `false` | `true` |
+| name | `string` | Text on the button | Required | - | `Need gas?` |
+| url_template | `string` | Url template, may contain `{chainId}` variable | Required | - | `https://smolrefuel.com/?outboundChain={chainId}` |
+| dapp_id | `string` | Set for open a Blockscout dapp page instead of opening external app page | - | - | `smol-refuel` |
+| logo | `string` | Gas refuel application logo url | - | - | `https://example.com/icon.png` |
+
+&nbsp;
+
+### Save on gas with GasHawk
+
+The feature enables a "Save with GasHawk" button next to the "Gas used" value on the address page.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_SAVE_ON_GAS_ENABLED | `boolean` | Set to "true" to enable the feature | - | - | `true` | v1.35.0+ |
 
 &nbsp;
 
@@ -665,6 +815,6 @@ If the feature is enabled, a Swap button will be displayed at the top of the exp
 
 For obtaining the variables values please refer to [reCAPTCHA documentation](https://developers.google.com/recaptcha).
 
-| Variable | Type| Description | Compulsoriness  | Default value | Example value |
-| --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY | `string` | Site key | - | - | `<your-secret>` |
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY | `string` | Site key | - | - | `<your-secret>` | v1.0.x+ |
diff --git a/docs/PULL_REQUEST_TEMPLATE.md b/docs/PULL_REQUEST_TEMPLATE.md
index a57bb9602c..d4378762bf 100644
--- a/docs/PULL_REQUEST_TEMPLATE.md
+++ b/docs/PULL_REQUEST_TEMPLATE.md
@@ -15,4 +15,7 @@
 - [ ] I have tested these changes locally.
 - [ ] I added tests to cover any new functionality, following this [guide](./CONTRIBUTING.md#writing--running-tests)
 - [ ] Whenever I fix a bug, I include a regression test to ensure that the bug does not reappear silently.
-- [ ] If I have added, changed, renamed, or removed an environment variable, I have updated the list of environment variables in the [documentation](ENVS.md) and  made the necessary changes to the validator script according to the [guide](./CONTRIBUTING.md#adding-new-env-variable)
+- [ ] If I have added, changed, renamed, or removed an environment variable
+    - I updated the list of environment variables in the [documentation](ENVS.md) 
+    - I made the necessary changes to the validator script according to the [guide](./CONTRIBUTING.md#adding-new-env-variable)
+    - I added "ENVs" label to this pull request
diff --git a/icons/MUD.svg b/icons/MUD.svg
new file mode 100644
index 0000000000..8ab1229a71
--- /dev/null
+++ b/icons/MUD.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+  <path fill="currentColor" d="M3.933 17.138a3.98 3.98 0 0 1-1.03-.136 4.001 4.001 0 0 1-2.771-4.866L1.796 5.82a3.958 3.958 0 0 1 1.85-2.45 3.88 3.88 0 0 1 2.966-.386A3.944 3.944 0 0 1 9.07 4.992h1.857a3.922 3.922 0 0 1 2.458-2.008 3.88 3.88 0 0 1 2.965.386 3.977 3.977 0 0 1 1.85 2.436l1.665 6.33a4 4 0 0 1-2.779 4.88 3.879 3.879 0 0 1-2.965-.386 3.959 3.959 0 0 1-1.85-2.436l-.13-.629H7.856l-.164.615a3.958 3.958 0 0 1-1.85 2.436 3.9 3.9 0 0 1-1.908.522ZM5.59 4.278a2.494 2.494 0 0 0-1.229.328A2.572 2.572 0 0 0 3.175 6.17l-1.664 6.316a2.572 2.572 0 0 0 1.771 3.137 2.45 2.45 0 0 0 1.872-.243 2.53 2.53 0 0 0 1.186-1.565l.443-1.679h6.43l.436 1.68a2.558 2.558 0 0 0 1.187 1.564 2.47 2.47 0 0 0 1.879.243 2.558 2.558 0 0 0 1.764-3.137L16.814 6.17a2.535 2.535 0 0 0-1.178-1.564 2.472 2.472 0 0 0-1.88-.243 2.536 2.536 0 0 0-1.693 1.586l-.171.472H8.105l-.171-.472a2.544 2.544 0 0 0-1.7-1.586 2.486 2.486 0 0 0-.644-.086Z"/>
+  <path fill="currentColor" d="M5.712 9.993a1.429 1.429 0 1 1 0-2.858 1.429 1.429 0 0 1 0 2.858Zm8.573-2.143a.714.714 0 1 0 0-1.43.714.714 0 0 0 0 1.43Zm0 2.857a.714.714 0 1 0 0-1.429.714.714 0 0 0 0 1.43Zm-1.428-1.429a.714.714 0 1 0 0-1.428.714.714 0 0 0 0 1.428Zm2.857 0a.714.714 0 1 0 0-1.428.714.714 0 0 0 0 1.428Z"/>
+</svg>
diff --git a/icons/MUD_menu.svg b/icons/MUD_menu.svg
new file mode 100644
index 0000000000..c30c571c47
--- /dev/null
+++ b/icons/MUD_menu.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30">
+  <path fill="currentColor" d="M6.485 23.997a4.23 4.23 0 0 0 1.234.183 4.31 4.31 0 0 0 2.29-.7c.545-.353 1.022-.824 1.403-1.386s.66-1.202.817-1.884l.197-.825h5.144l.155.844c.157.682.435 1.323.816 1.885s.859 1.032 1.404 1.385a4.334 4.334 0 0 0 1.733.658 4.18 4.18 0 0 0 1.825-.14c1.214-.384 2.244-1.285 2.868-2.51a5.933 5.933 0 0 0 .467-4.04l-1.997-8.496c-.16-.682-.437-1.322-.818-1.883s-.858-1.033-1.403-1.387a4.333 4.333 0 0 0-1.733-.657 4.18 4.18 0 0 0-1.825.14c-.632.194-1.221.534-1.73.998s-.923 1.042-1.22 1.696h-2.228c-.298-.653-.714-1.23-1.222-1.694s-1.096-.804-1.728-1a4.18 4.18 0 0 0-1.825-.14c-.61.088-1.2.312-1.733.657A4.969 4.969 0 0 0 5.97 7.095a5.602 5.602 0 0 0-.813 1.895l-1.998 8.477a5.932 5.932 0 0 0 .472 4.025c.621 1.22 1.646 2.12 2.855 2.505zM8.234 7.36a2.752 2.752 0 0 1 1.474-.441c.26 0 .52.04.772.115.467.148.895.418 1.25.788.355.37.626.83.79 1.34l.206.634h4.544l.206-.633c.163-.51.432-.97.786-1.34s.78-.64 1.246-.789c.377-.114.77-.144 1.156-.088.387.056.76.197 1.099.414.348.228.653.53.896.891.243.36.419.772.518 1.21l1.998 8.476c.214.872.112 1.804-.285 2.592s-1.055 1.37-1.833 1.618c-.376.114-.77.144-1.156.088a2.761 2.761 0 0 1-1.098-.414c-.35-.228-.655-.531-.9-.892s-.422-.77-.524-1.208l-.523-2.254H11.14l-.532 2.254c-.1.438-.277.85-.522 1.21-.244.361-.55.663-.9.89a2.738 2.738 0 0 1-1.095.414 2.64 2.64 0 0 1-1.152-.088c-.777-.25-1.435-.832-1.832-1.62a3.815 3.815 0 0 1-.294-2.59L6.81 9.46c.208-.883.72-1.638 1.424-2.1zm12.765 3.985a.857.857 0 1 1-1.714 0 .857.857 0 0 1 1.714 0zm-12.098 3.14a1.715 1.715 0 1 0 1.906-2.85 1.715 1.715 0 0 0-1.906 2.85zm11.241 1.147a.857.857 0 1 0 0-1.714.857.857 0 0 0 0 1.714zm-.857-2.572a.857.857 0 1 1-1.714 0 .857.857 0 0 1 1.714 0zm2.572.857a.857.857 0 1 0 0-1.714.857.857 0 0 0 0 1.714z" fill-rule="evenodd" clip-rule="evenodd"/>
+</svg>
diff --git a/icons/apps_slim.svg b/icons/apps_slim.svg
new file mode 100644
index 0000000000..59e2f2d818
--- /dev/null
+++ b/icons/apps_slim.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+  <path fill="currentColor" fill-rule="evenodd" d="M3 5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm2 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-3ZM3 15a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4Zm2 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-3ZM15 3a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-4Zm4 2.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3ZM13 15a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4Zm2 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-3Z" clip-rule="evenodd"/>
+</svg>
diff --git a/icons/arrows/up-head.svg b/icons/arrows/up-head.svg
new file mode 100644
index 0000000000..375381a790
--- /dev/null
+++ b/icons/arrows/up-head.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+  <path fill="currentColor" d="M10.56 5.27A.72.72 0 0 0 10 5a.72.72 0 0 0-.56.27l-6.3 8.585a.729.729 0 0 0-.066.75A.699.699 0 0 0 3.7 15h12.6a.699.699 0 0 0 .626-.396.728.728 0 0 0-.066-.749l-6.3-8.585Z"/>
+</svg>
diff --git a/icons/blob.svg b/icons/blob.svg
index 9dc2b542ff..9b40d72ecb 100644
--- a/icons/blob.svg
+++ b/icons/blob.svg
@@ -1,5 +1,5 @@
-<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.392.45C3.644.163 3.984 0 4.34 0h8.038a.63.63 0 0 1 .474.225L17.54 5.61a.83.83 0 0 1 .196.544v12.308c0 .408-.141.799-.393 1.087-.25.289-.592.451-.947.451H4.34c-.356 0-.696-.162-.948-.45A1.661 1.661 0 0 1 3 18.461V1.538c0-.408.141-.799.392-1.087Zm.948 1.088h6.87v4.497c0 .388.315.702.702.702h4.485v11.725H4.34V1.538Zm8.274.59 2.791 3.205h-2.791V2.128Z" fill="currentColor"/>
-  <path d="M8.1 16.4a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .5-.5h2.237c.74 0 1.305.164 1.697.491.397.324.595.808.595 1.452 0 .457-.101.85-.303 1.177-.202.328-.505.552-.909.674l.097-.223c.59.11 1.04.345 1.349.703.309.358.463.84.463 1.446 0 .709-.229 1.267-.686 1.674-.457.404-1.086.606-1.886.606H8.1Zm.746-1.12h1.765c.423 0 .76-.097 1.012-.291.255-.199.383-.517.383-.955 0-.476-.132-.805-.395-.988-.259-.187-.592-.28-1-.28H8.846v2.514Zm0-3.634h1.32c.373 0 .666-.075.88-.223.217-.152.325-.432.325-.84 0-.412-.108-.692-.325-.84-.213-.152-.507-.229-.88-.229h-1.32v2.132Z" fill="currentColor"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.038 12.116a2 2 0 0 1 .825.558c.309.358.463.84.463 1.446 0 .709-.229 1.267-.686 1.674-.457.404-1.086.606-1.886.606H8.1a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .5-.5h2.237c.74 0 1.305.164 1.697.491.397.324.595.808.595 1.452 0 .457-.101.85-.303 1.177a1.477 1.477 0 0 1-.534.515c.086.024.168.05.246.08Zm.177-.145c.32.137.588.327.8.573.347.403.51.936.51 1.576 0 .756-.245 1.372-.752 1.824-.504.445-1.185.656-2.019.656H8.1a.7.7 0 0 1-.7-.7v-7a.7.7 0 0 1 .7-.7h2.237c.765 0 1.383.17 1.825.537.454.371.667.92.667 1.606 0 .487-.108.917-.333 1.282-.08.13-.174.245-.281.346Zm-.72 1.237c-.217-.156-.506-.242-.883-.242H9.046v2.114h1.566c.393 0 .682-.09.889-.25.19-.147.305-.396.305-.796 0-.444-.122-.695-.309-.824l-.002-.002Zm.128 1.78c-.251.195-.589.292-1.011.292H8.846v-2.514h1.766c.407 0 .74.093 1 .28.262.183.394.512.394.988 0 .438-.128.756-.383.954Zm-.693-5.082c-.168-.12-.415-.192-.764-.192h-1.12v1.732h1.12c.35 0 .597-.07.765-.187.14-.098.24-.298.24-.676 0-.384-.1-.581-.238-.675l-.003-.002Zm.116 1.517c-.213.148-.507.223-.88.223h-1.32V9.514h1.32c.373 0 .666.076.88.229.217.148.326.428.326.84 0 .407-.109.687-.326.84Z" fill="currentColor"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.183 2.768h-.002a1.382 1.382 0 0 0-.107-.024 6.93 6.93 0 0 0-1.591-.1c-1.009.056-2.254.35-3.32 1.269l-.29.245c-.323.273-.714.602-.918.82-1.292 1.38-2.252 3.68-2.894 5.713a34.038 34.038 0 0 0-.91 3.57l-.01.048-.003.034a68.656 68.656 0 0 0-.067.667c-.038.403-.072.803-.072.951 0 .096.07.329.54.654.447.309 1.123.606 1.987.864 1.719.515 4.041.84 6.38.881 2.342.043 4.645-.2 6.34-.78 1.754-.602 2.556-1.445 2.556-2.415 0-2.7-1.068-5.753-2.593-8.179-.759-1.208-1.617-2.237-2.485-2.977-.875-.746-1.718-1.161-2.452-1.226l-.045-.004-.043-.011h-.001Zm.138-.618S8.18 1.356 5.786 3.42c-.069.06-.157.133-.255.216-.328.276-.769.647-1.001.895C1.74 7.51.55 14.213.55 14.213S.402 15.587.4 15.959c-.013 3.442 19 4.92 19-.794S14.912 2.467 11.321 2.15Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="m11.165 2.748.048-.213ZM.55 14.213l-.394-.07v-.002l.001-.004.003-.016.011-.059.043-.222c.04-.192.097-.47.176-.81.157-.683.395-1.625.722-2.661.65-2.056 1.666-4.552 3.126-6.112.249-.265.702-.647 1.02-.914l.015-.013c.1-.083.185-.156.252-.213C6.81 2.009 8.29 1.674 9.43 1.612a7.894 7.894 0 0 1 1.414.05 6.37 6.37 0 0 1 .53.09l.012.002c1.004.098 2.023.647 2.972 1.455.963.821 1.886 1.936 2.688 3.212 1.6 2.546 2.754 5.794 2.754 8.744 0 1.704-1.425 2.774-3.24 3.397-1.844.632-4.273.876-6.672.833-2.403-.043-4.816-.375-6.64-.922-.909-.272-1.695-.604-2.263-.997-.556-.384-.987-.89-.985-1.52.001-.208.04-.665.077-1.048l.052-.516.017-.162.006-.06.398.043Zm0 0-.398-.043.002-.014.002-.014.394.07ZM10.672 3.085a6.528 6.528 0 0 0-1.168-.04c-.952.052-2.102.328-3.08 1.17-.084.074-.185.159-.291.248l-.002.001c-.332.28-.7.591-.884.788-1.226 1.309-2.165 3.533-2.804 5.56a33.627 33.627 0 0 0-.9 3.523l-.005.031-.002.02-.016.158a66.14 66.14 0 0 0-.05.504c-.037.385-.067.742-.07.888.013.031.083.154.367.35.397.275 1.029.557 1.874.81 1.676.502 3.96.823 6.272.864 2.319.042 4.57-.2 6.203-.759 1.718-.589 2.286-1.34 2.286-2.036 0-2.606-1.036-5.587-2.531-7.966-.743-1.182-1.576-2.178-2.407-2.886-.842-.717-1.609-1.077-2.227-1.132l-.077-.007-.072-.018-.014-.003a5.01 5.01 0 0 0-.402-.067Z" fill="currentColor"/>
+  <path d="M15.85 11.65c0 1.353-.548 2.45-1.225 2.45S13.4 13.003 13.4 11.65c0-1.353.548-2.45 1.225-2.45s1.225 1.097 1.225 2.45Zm-4.25.55c0 1.436-.582 2.6-1.3 2.6-.718 0-1.3-1.164-1.3-2.6 0-1.436.582-2.6 1.3-2.6.718 0 1.3 1.164 1.3 2.6Z" fill="currentColor"/>
 </svg>
diff --git a/icons/block_countdown.svg b/icons/block_countdown.svg
new file mode 100644
index 0000000000..0024e52ce9
--- /dev/null
+++ b/icons/block_countdown.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 241 185" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M58.5 57.705 120.306 22.5l62.743 35.205v72.397l-48.007 26.842v-11.695l37.055-21.373-8.814-5.11.794-1.37 8.681 5.034V70.1l-23.049 13.044c.109-.729.164-1.464.166-2.2v-9.556l17.678-10.174-46.559-26.74v10.17h-1.583V34.605L74.17 61.214l16.33 9.625v10.225c.002.588.037 1.175.107 1.76L68.09 70.1v52.366l8.708-4.994.787 1.373-8.808 5.052 37.262 21.819.234 11.697L58.5 129.576V57.705Zm32.219 51.843c-.11.642-.179 1.29-.206 1.939l-5.774 3.289-.784-1.375 6.764-3.853Zm24.672 28.095h10.139v22.05l-5.147 2.807-4.992-2.806v-22.051Zm10.139-10h-10.139v-4.78h10.139v4.78Zm0-29.66-1.706-1.412 14.301-11.83a4.797 4.797 0 0 0 1.285-1.688 5.169 5.169 0 0 0 .465-2.137v-3.772l-4.375 2.518v1.254l-1.586 1.315h-2.878l-10.73 6.175-10.478-6.175h-3.504l-1.449-1.195V79.31l-4.375-2.578v4.303c.002.741.161 1.472.465 2.136a4.797 4.797 0 0 0 1.285 1.688l4.949 4.063 9.352 7.648-1.16.95v5.968l2.609-2.137v7.17c0 .634.23 1.242.641 1.69.41.448.966.7 1.547.7.58 0 1.136-.252 1.546-.7a2.503 2.503 0 0 0 .641-1.69v-7.141l3.155 2.607v-6.006Zm-4.536-27.703h-1.583v-.032h1.583v.032Zm28.844 40.893 6.353 3.66.79-1.372-7.414-4.27c.134.655.224 1.317.271 1.982ZM120.994 55.5h-1.583v-3.763h1.583V55.5Z" fill="currentColor"/>
+  <path d="M138.125 84.74a4.728 4.728 0 0 0 1.285-1.688 5.169 5.169 0 0 0 .465-2.136V70.28c0-1.268-.461-2.483-1.281-3.38-.821-.896-1.934-1.4-3.094-1.4h-30.625c-1.16 0-2.273.504-3.094 1.4-.82.897-1.281 2.112-1.281 3.38v10.756c.002.741.161 1.472.465 2.136a4.729 4.729 0 0 0 1.285 1.688l4.949 4.063 9.352 7.648-14.301 11.712a4.725 4.725 0 0 0-1.285 1.688 5.166 5.166 0 0 0-.465 2.136v10.756c0 1.267.461 2.483 1.281 3.38.821.896 1.934 1.4 3.094 1.4H135.5c1.16 0 2.273-.504 3.094-1.4.82-.897 1.281-2.113 1.281-3.38v-10.636a5.174 5.174 0 0 0-.465-2.137 4.733 4.733 0 0 0-1.285-1.688l-14.301-11.83 6.207-5.14 8.094-6.692Zm-33.25-14.46H135.5v10.636l-1.586 1.315h-27.59l-1.449-1.195V70.28Zm30.625 41.947v10.636h-30.625v-10.756L118 101.352v7.17c0 .634.23 1.242.641 1.69.41.448.966.7 1.547.7.58 0 1.136-.252 1.546-.7a2.503 2.503 0 0 0 .641-1.69v-7.141l13.125 10.846Z" fill="currentColor" stroke="currentColor" stroke-width="4"/>
+</svg>
diff --git a/icons/brands/blockscout.svg b/icons/brands/blockscout.svg
new file mode 100644
index 0000000000..0e3279de01
--- /dev/null
+++ b/icons/brands/blockscout.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path clip-rule="evenodd" d="M8.175 2.102a.834.834 0 0 0-.835-.832H5.36a.834.834 0 0 0-.835.832v1.972c0 .46-.374.832-.835.832H1.835A.834.834 0 0 0 1 5.74v12.155c0 .46.374.833.835.833h1.98a.834.834 0 0 0 .835-.832V5.739c0-.46.374-.833.835-.833H7.34a.834.834 0 0 0 .835-.832V2.102Zm7.3 0a.834.834 0 0 0-.835-.832h-1.98a.834.834 0 0 0-.835.832v1.972c0 .46.374.832.835.832h1.855c.461 0 .835.373.835.833v12.155c0 .46.374.833.835.833h1.98a.834.834 0 0 0 .835-.832V5.739a.834.834 0 0 0-.835-.833H16.31a.834.834 0 0 1-.835-.832V2.102Zm-3.65 6.962a.834.834 0 0 0-.835-.832H9.01a.834.834 0 0 0-.835.832v5.401c0 .46.374.833.835.833h1.98a.834.834 0 0 0 .835-.833V9.064Z" stroke="currentColor" stroke-width="1.4"/>
+</svg>
diff --git a/icons/brands/celenium.svg b/icons/brands/celenium.svg
new file mode 100644
index 0000000000..8a5d645ac2
--- /dev/null
+++ b/icons/brands/celenium.svg
@@ -0,0 +1,16 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="10" cy="10" r="10" fill="url(#a)"/>
+  <g clip-path="url(#b)" fill="#fff" fill-opacity=".95">
+    <path d="M15.763 12.826c.119-.243.178-.365.158-.462a.292.292 0 0 0-.148-.199c-.088-.047-.244-.02-.554.033a6.409 6.409 0 0 1-5.632-1.786 6.409 6.409 0 0 1-1.785-5.631c.053-.31.08-.466.033-.554a.292.292 0 0 0-.199-.149c-.098-.02-.219.04-.462.159a6.417 6.417 0 1 0 8.589 8.589Z"/>
+    <path d="M15.9 10.817c.152-.054.229-.082.31-.152a.686.686 0 0 0 .163-.228c.04-.1.04-.183.043-.35a6.398 6.398 0 0 0-1.879-4.624 6.398 6.398 0 0 0-4.624-1.88c-.167.003-.25.004-.35.044a.685.685 0 0 0-.229.163c-.07.081-.097.158-.151.31a5.25 5.25 0 0 0 6.717 6.717Z"/>
+  </g>
+  <defs>
+    <linearGradient id="a" x1="17.5" y1="2" x2="0" y2="20" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#196E41"/>
+      <stop offset="1" stop-color="#092E1B"/>
+    </linearGradient>
+    <clipPath id="b">
+      <rect x="3" y="3" width="14" height="14" rx="7" fill="#fff"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/icons/verified_token.svg b/icons/certified.svg
similarity index 100%
rename from icons/verified_token.svg
rename to icons/certified.svg
diff --git a/icons/checkered_flag.svg b/icons/checkered_flag.svg
new file mode 100644
index 0000000000..918c29cea4
--- /dev/null
+++ b/icons/checkered_flag.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="2.4" height="16" rx="1.2" fill="currentColor"/>
+  <path d="M2.9 2.1h9.18a1.5 1.5 0 0 1 1.5 1.5v5.6a1.5 1.5 0 0 1-1.5 1.5H2.9V2.1Z" stroke="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.12 2.4H2.4v2.667h2.72V2.4Zm5.44 0H7.84v2.667h2.72V2.4ZM2.4 7.733h2.72V10.4H2.4V7.733Zm8.16 0H7.84V10.4h2.72V7.733ZM5.12 5.067h2.72v2.666H5.12V5.067Zm8.16 0h-2.72v2.666h2.72V5.067Z" fill="currentColor"/>
+</svg>
diff --git a/icons/clock-light.svg b/icons/clock-light.svg
index 785174078b..110cd4b797 100644
--- a/icons/clock-light.svg
+++ b/icons/clock-light.svg
@@ -1,11 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 29 28">
-  <g fill="currentColor" clip-path="url(#clock-light_svg__a)">
-    <path d="M14.75 25.375a11.375 11.375 0 1 1 0-22.75 11.375 11.375 0 0 1 0 22.75Zm0-21a9.625 9.625 0 1 0 0 19.25 9.625 9.625 0 0 0 0-19.25Z"/>
-    <path d="M19.563 19.688a.875.875 0 0 1-.622-.254L14.13 14.62a.874.874 0 0 1-.254-.621V7a.875.875 0 0 1 1.75 0v6.641l4.559 4.55a.874.874 0 0 1-.622 1.497Z"/>
-  </g>
-  <defs>
-    <clipPath id="clock-light_svg__a">
-      <path fill="#fff" d="M.75 0h28v28h-28z"/>
-    </clipPath>
-  </defs>
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.444 18.315a10 10 0 1 0 11.112-16.63 10 10 0 0 0-11.112 16.63ZM5.3 2.965a8.462 8.462 0 1 1 9.402 14.07A8.462 8.462 0 0 1 5.3 2.965Zm8.637 11.978a.768.768 0 0 0 .295.057.769.769 0 0 0 .546-1.315l-4.008-4V3.846a.769.769 0 1 0-1.538 0V10a.77.77 0 0 0 .223.546l4.23 4.23a.77.77 0 0 0 .252.167Z" fill="currentColor"/>
 </svg>
diff --git a/icons/clock.svg b/icons/clock.svg
index f40b6ee05d..14a8c94053 100644
--- a/icons/clock.svg
+++ b/icons/clock.svg
@@ -1,3 +1,3 @@
-<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 11a7.5 7.5 0 1 1 15 0 7.5 7.5 0 0 1-15 0ZM11 1C5.477 1 1 5.477 1 11s4.477 10 10 10 10-4.477 10-10S16.523 1 11 1Zm1.25 5a1.25 1.25 0 1 0-2.5 0v5c0 .69.56 1.25 1.25 1.25h5a1.25 1.25 0 1 0 0-2.5h-3.75V6Z" fill="currentColor" stroke="transparent" stroke-width=".6" stroke-linecap="round" stroke-linejoin="round"/>
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10 .3C4.643.3.3 4.643.3 10c0 5.357 4.343 9.7 9.7 9.7 5.357 0 9.7-4.343 9.7-9.7 0-5.357-4.343-9.7-9.7-9.7ZM2.2 10a7.8 7.8 0 1 1 15.6 0 7.8 7.8 0 0 1-15.6 0ZM10 4.05a.95.95 0 0 0-.95.95v5c0 .525.425.95.95.95h5a.95.95 0 1 0 0-1.9h-3.75a.3.3 0 0 1-.3-.3V5a.95.95 0 0 0-.95-.95Z" fill="currentColor"/>
 </svg>
diff --git a/icons/contracts/proxy.svg b/icons/contracts/proxy.svg
new file mode 100644
index 0000000000..1b75cb210f
--- /dev/null
+++ b/icons/contracts/proxy.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.392.45C3.644.163 3.984 0 4.34 0h8.038a.63.63 0 0 1 .474.225L17.54 5.61a.83.83 0 0 1 .196.544v12.308c0 .408-.141.799-.393 1.087-.25.289-.592.451-.947.451H4.34c-.356 0-.696-.162-.948-.45A1.661 1.661 0 0 1 3 18.461V1.538c0-.408.141-.799.392-1.087Zm.948 1.088h6.87v4.497c0 .388.315.702.702.702h4.485v11.725H4.34V1.538Zm8.274.59 2.791 3.205h-2.791V2.128Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.233 8.8a2.293 2.293 0 0 0-1.613.644l-.006.006-.595.591a.564.564 0 1 0 .795.8l.592-.589a1.166 1.166 0 0 1 1.649 1.648l-1.034 1.034a1.168 1.168 0 0 1-1.758-.126.564.564 0 1 0-.903.676 2.293 2.293 0 0 0 3.458.247l1.038-1.037.007-.007a2.294 2.294 0 0 0-1.63-3.887Zm-2.259 2.403a2.294 2.294 0 0 0-1.786.666l-1.037 1.037-.007.008a2.293 2.293 0 0 0 3.243 3.242l.006-.007.592-.591a.564.564 0 0 0-.797-.797l-.588.587A1.166 1.166 0 0 1 7.952 13.7l1.034-1.034a1.167 1.167 0 0 1 1.758.126.564.564 0 0 0 .903-.675 2.293 2.293 0 0 0-1.673-.914Z" fill="currentColor"/>
+</svg>
diff --git a/icons/contract.svg b/icons/contracts/regular.svg
similarity index 100%
rename from icons/contract.svg
rename to icons/contracts/regular.svg
diff --git a/icons/contracts/regular_many.svg b/icons/contracts/regular_many.svg
new file mode 100644
index 0000000000..1f0b62afd2
--- /dev/null
+++ b/icons/contracts/regular_many.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.4 2a1.8 1.8 0 0 0-1.8 1.8v14.8A1.4 1.4 0 0 0 3 20h1.6v-1.326H3V3.516h1.6V2H3.4Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.992.45C4.244.163 4.585 0 4.94 0h8.038a.63.63 0 0 1 .474.225L18.14 5.61a.83.83 0 0 1 .196.544v12.308c0 .408-.141.799-.392 1.087a1.26 1.26 0 0 1-.948.451H4.94c-.356 0-.696-.162-.948-.45a1.661 1.661 0 0 1-.392-1.088V1.538c0-.408.141-.799.392-1.087Zm.948 1.088h6.87v4.497c0 .388.315.702.702.702h4.485v11.725H4.94V1.538Zm8.274.59 2.791 3.205h-2.79V2.128Z" fill="currentColor"/>
+  <rect x="7.2" y="14.3" width="7.8" height="1.2" rx=".6" fill="currentColor"/>
+  <rect x="7.2" y="12" width="7.8" height="1.2" rx=".6" fill="currentColor"/>
+</svg>
diff --git a/icons/contract_verified.svg b/icons/contracts/verified.svg
similarity index 100%
rename from icons/contract_verified.svg
rename to icons/contracts/verified.svg
diff --git a/icons/contracts/verified_many.svg b/icons/contracts/verified_many.svg
new file mode 100644
index 0000000000..2a004f596d
--- /dev/null
+++ b/icons/contracts/verified_many.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.4 2a1.8 1.8 0 0 0-1.8 1.8v14.8A1.4 1.4 0 0 0 3 20h1.6v-1.326H3V3.516h1.6V2H3.4Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.992.45C4.244.163 4.585 0 4.94 0h8.038a.63.63 0 0 1 .474.225L18.14 5.61a.83.83 0 0 1 .196.544v12.308c0 .408-.141.799-.392 1.087a1.26 1.26 0 0 1-.948.451H4.94c-.356 0-.696-.162-.948-.45a1.661 1.661 0 0 1-.392-1.088V1.538c0-.408.141-.799.392-1.087Zm8.709 1.088H4.94v16.924h12.057V6.472l-4.296-4.934Z" fill="currentColor"/>
+  <path d="m7.9 13.357 2.2 2.357L14.5 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.512.42c.388 0 .702.315.702.703v4.21h4.21a.702.702 0 1 1 0 1.404h-4.912a.702.702 0 0 1-.702-.702V1.123c0-.388.315-.702.702-.702Z" fill="currentColor"/>
+</svg>
diff --git a/icons/discussions.svg b/icons/discussions.svg
deleted file mode 100644
index 47ba3acd98..0000000000
--- a/icons/discussions.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.385 17.044c1.752 2.174 4.83 3.47 7.255 4.44v-2.52a5.76 5.76 0 0 0 0-11.52H16v2.281c.064.13.118.257.156.381L16 10.5v.5c.242-.242.259-.555.156-.894l.484-1.222a4.32 4.32 0 1 1 0 8.64H15.2v1.786c-1.654-.75-2.926-1.482-3.85-2.266H9.385Z" fill="currentColor"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.385 17.044c1.752 2.174 4.83 3.47 7.255 4.44v-2.52a5.76 5.76 0 0 0 0-11.52H16v2.281c.064.13.118.257.156.381L16 10.5v.5c.242-.242.259-.555.156-.894l.484-1.222a4.32 4.32 0 1 1 0 8.64H15.2v1.786c-1.654-.75-2.926-1.482-3.85-2.266H9.385Z" fill="currentColor"/>
-  <path d="M10.4 3.444H7.2a6.32 6.32 0 0 0-4.526 1.923A6.65 6.65 0 0 0 .8 10.008c0 1.741.674 3.41 1.874 4.642A6.32 6.32 0 0 0 7.2 16.572v2.872c4-1.64 9.6-4.102 9.6-9.436a6.65 6.65 0 0 0-1.875-4.641A6.32 6.32 0 0 0 10.4 3.444ZM8.8 14.931H7.2c-.63 0-1.255-.127-1.837-.374a4.793 4.793 0 0 1-1.557-1.068c-.446-.457-.8-1-1.04-1.597a5.033 5.033 0 0 1 0-3.768 4.933 4.933 0 0 1 1.04-1.597c.445-.457.975-.82 1.557-1.067A4.696 4.696 0 0 1 7.2 5.085h3.2a4.74 4.74 0 0 1 3.394 1.442 4.988 4.988 0 0 1 1.406 3.481c0 2.962-1.97 4.895-6.4 6.958v-2.035Z" fill="currentColor"/>
-  <path d="M10.4 3.444H7.2a6.32 6.32 0 0 0-4.526 1.923A6.65 6.65 0 0 0 .8 10.008c0 1.741.674 3.41 1.874 4.642A6.32 6.32 0 0 0 7.2 16.572v2.872c4-1.64 9.6-4.102 9.6-9.436a6.65 6.65 0 0 0-1.875-4.641A6.32 6.32 0 0 0 10.4 3.444ZM8.8 14.931H7.2c-.63 0-1.255-.127-1.837-.374a4.793 4.793 0 0 1-1.557-1.068c-.446-.457-.8-1-1.04-1.597a5.033 5.033 0 0 1 0-3.768 4.933 4.933 0 0 1 1.04-1.597c.445-.457.975-.82 1.557-1.067A4.696 4.696 0 0 1 7.2 5.085h3.2a4.74 4.74 0 0 1 3.394 1.442 4.988 4.988 0 0 1 1.406 3.481c0 2.962-1.97 4.895-6.4 6.958v-2.035Z" fill="currentColor"/>
-</svg>
diff --git a/icons/empty_search_result.svg b/icons/empty_search_result.svg
index a60b3b1e70..f4d62eff0e 100644
--- a/icons/empty_search_result.svg
+++ b/icons/empty_search_result.svg
@@ -1,11 +1,16 @@
-<svg viewBox="0 0 240 192" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M82.667 4H56a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4ZM56 0a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V8a8 8 0 0 0-8-8H56Zm122.667 4H152a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4ZM152 0a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V8a8 8 0 0 0-8-8H152ZM56 52h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H56a4 4 0 0 1-4-4V56a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H56a8 8 0 0 1-8-8V56Zm34.667 44H56a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V104a4 4 0 0 0-4-4ZM56 96a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V104a8 8 0 0 0-8-8H56Zm0 52h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H56a4 4 0 0 1-4-4V152a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H56a8 8 0 0 1-8-8V152ZM178.667 52H152a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V56a4 4 0 0 0-4-4ZM152 48a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V56a8 8 0 0 0-8-8H152Zm0 52h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H152a4 4 0 0 1-4-4V104a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H152a8 8 0 0 1-8-8V104Zm34.667 44H152a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V152a4 4 0 0 0-4-4ZM152 144a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V152a8 8 0 0 0-8-8H152ZM8 28h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V32Zm104-4h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H104a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H104a8 8 0 0 1-8-8V32Zm130.667-4H200a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V32a4 4 0 0 0-4-4ZM200 24a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V32a8 8 0 0 0-8-8H200Zm-96 52h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H104a4 4 0 0 1-4-4V80a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H104a8 8 0 0 1-8-8V80Zm34.667 44H104a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V128a4 4 0 0 0-4-4ZM104 120a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V128a8 8 0 0 0-8-8H104Zm96-44h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H200a4 4 0 0 1-4-4V80a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H200a8 8 0 0 1-8-8V80Zm34.667 44H200a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V128a4 4 0 0 0-4-4ZM200 120a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V128a8 8 0 0 0-8-8H200ZM8 76h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V80a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V80Zm34.667 44H8a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V128a4 4 0 0 0-4-4ZM8 120a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V128a8 8 0 0 0-8-8H8Z" fill="url(#empty_search_result_svg__a)"/>
-  <path d="m135.337 94.376 11.182 11.242-3.694 3.715-11.18-11.245a23.31 23.31 0 0 1-14.666 5.17c-12.971 0-23.498-10.586-23.498-23.629C93.48 66.586 104.008 56 116.979 56c12.971 0 23.499 10.586 23.499 23.629a23.614 23.614 0 0 1-5.141 14.747Zm-5.238-1.948a18.372 18.372 0 0 0 5.157-12.799c0-10.155-8.18-18.378-18.277-18.378-10.099 0-18.276 8.223-18.276 18.378 0 10.153 8.177 18.378 18.276 18.378a18.166 18.166 0 0 0 12.729-5.185l.391-.394Z" fill="#A0AEC0"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 185" fill="none">
+  <g clip-path="url(#a)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M26.307-2.023H6.923A7.2 7.2 0 0 0-.37 5.269v19.385a7.25 7.25 0 0 0 7.293 7.292h19.384a7.25 7.25 0 0 0 7.293-7.292V5.269a7.25 7.25 0 0 0-7.293-7.292Zm-19.384-2.4A9.692 9.692 0 0 0-2.77 5.269v19.385a9.692 9.692 0 0 0 9.693 9.692h19.384A9.692 9.692 0 0 0 36 24.654V5.269a9.693 9.693 0 0 0-9.693-9.692H6.923Zm19.384 54.092H6.923A7.2 7.2 0 0 0-.37 56.962v19.384a7.25 7.25 0 0 0 7.293 7.292h19.384a7.25 7.25 0 0 0 7.293-7.292V56.961a7.25 7.25 0 0 0-7.293-7.292Zm-19.384-2.4a9.693 9.693 0 0 0-9.693 9.693v19.384a9.692 9.692 0 0 0 9.693 9.692h19.384A9.692 9.692 0 0 0 36 76.346V56.961a9.693 9.693 0 0 0-9.693-9.692H6.923Zm0 54.093h19.384a7.249 7.249 0 0 1 7.293 7.292v19.384a7.25 7.25 0 0 1-7.293 7.293H6.923a7.209 7.209 0 0 1-5.184-2.108 7.208 7.208 0 0 1-2.109-5.185v-19.384a7.249 7.249 0 0 1 7.293-7.292Zm-9.693 7.292a9.693 9.693 0 0 1 9.693-9.692h19.384A9.694 9.694 0 0 1 36 108.654v19.384a9.694 9.694 0 0 1-9.693 9.693H6.923a9.691 9.691 0 0 1-9.693-9.693v-19.384Zm29.077 44.4H6.923a7.19 7.19 0 0 0-5.184 2.108 7.208 7.208 0 0 0-2.109 5.184v19.385a7.25 7.25 0 0 0 7.293 7.292h19.384a7.25 7.25 0 0 0 7.293-7.292v-19.385a7.25 7.25 0 0 0-7.293-7.292Zm-19.384-2.4a9.691 9.691 0 0 0-9.693 9.692v19.385a9.691 9.691 0 0 0 9.693 9.692h19.384A9.691 9.691 0 0 0 36 179.731v-19.385a9.691 9.691 0 0 0-9.693-9.692H6.923Zm51.692-126.83H78a7.25 7.25 0 0 1 7.292 7.291V50.5A7.25 7.25 0 0 1 78 57.792H58.615a7.2 7.2 0 0 1-7.292-7.292V31.115a7.249 7.249 0 0 1 7.292-7.292Zm-9.692 7.291a9.692 9.692 0 0 1 9.692-9.692H78a9.692 9.692 0 0 1 9.692 9.692V50.5A9.692 9.692 0 0 1 78 60.192H58.615a9.692 9.692 0 0 1-9.692-9.692V31.115ZM78 75.515H58.615a7.2 7.2 0 0 0-7.292 7.293v19.384a7.25 7.25 0 0 0 7.292 7.293H78a7.25 7.25 0 0 0 7.292-7.293v-2.123c.39 1.933.977 3.819 1.754 5.631A9.689 9.689 0 0 1 78 111.885H58.615a9.695 9.695 0 0 1-9.692-9.693V82.808a9.692 9.692 0 0 1 9.692-9.693H78c4.061 0 7.569 2.493 9.046 6.185-.83 1.754-1.385 3.692-1.846 5.538v-2.03c0-4.062-3.139-7.293-7.2-7.293Zm61.384-12.83V56.96a9.694 9.694 0 0 0-9.692-9.692h-19.385a9.693 9.693 0 0 0-9.692 9.693v5.723l2.4-1.477v-4.246a7.25 7.25 0 0 1 7.292-7.293h19.385a7.249 7.249 0 0 1 7.292 7.293v4.246l2.4 1.477Zm13.57 43.015a9.691 9.691 0 0 0 9.046 6.185h19.384a9.696 9.696 0 0 0 9.693-9.693V82.808a9.695 9.695 0 0 0-9.693-9.693H162a9.69 9.69 0 0 0-9.046 6.185c.83 1.754 1.384 3.692 1.846 5.538v-2.03c0-4.062 3.138-7.293 7.2-7.293h19.384a7.25 7.25 0 0 1 7.293 7.293v19.384a7.25 7.25 0 0 1-7.293 7.293H162a7.188 7.188 0 0 1-5.184-2.109 7.188 7.188 0 0 1-2.109-5.184v-2.123a28.602 28.602 0 0 1-1.753 5.631Zm-52.339 16.615v5.816a9.69 9.69 0 0 0 9.692 9.692h19.385a9.692 9.692 0 0 0 9.692-9.692v-5.723l-2.4 1.384v4.339a7.249 7.249 0 0 1-7.292 7.292h-19.385a7.192 7.192 0 0 1-5.217-2.14 7.199 7.199 0 0 1-2.075-5.245v-4.153l-2.4-1.385v-.185Zm-42 4.893H78a7.249 7.249 0 0 1 7.292 7.292v19.385A7.25 7.25 0 0 1 78 161.177H58.615a7.21 7.21 0 0 1-5.184-2.108 7.209 7.209 0 0 1-2.108-5.184V134.5a7.248 7.248 0 0 1 7.292-7.292Zm-9.692 7.292a9.693 9.693 0 0 1 9.692-9.692H78a9.694 9.694 0 0 1 9.692 9.692v19.385A9.693 9.693 0 0 1 78 163.577H58.615a9.69 9.69 0 0 1-9.692-9.692V134.5ZM129.692-2.023h-19.385a7.198 7.198 0 0 0-7.292 7.292v19.385a7.25 7.25 0 0 0 7.292 7.292h19.385a7.249 7.249 0 0 0 7.292-7.292V5.269a7.249 7.249 0 0 0-7.292-7.292Zm-19.385-2.4a9.693 9.693 0 0 0-9.692 9.692v19.385a9.69 9.69 0 0 0 9.692 9.692h19.385a9.693 9.693 0 0 0 9.692-9.692V5.269a9.694 9.694 0 0 0-9.692-9.692h-19.385Zm-7.292 164.769a7.25 7.25 0 0 1 7.292-7.292h19.385a7.249 7.249 0 0 1 7.292 7.292v19.385a7.249 7.249 0 0 1-7.292 7.292h-19.385a7.207 7.207 0 0 1-5.184-2.108 7.216 7.216 0 0 1-2.108-5.184v-19.385Zm-2.4 0a9.69 9.69 0 0 1 9.692-9.692h19.385a9.692 9.692 0 0 1 9.692 9.692v19.385a9.693 9.693 0 0 1-9.692 9.692h-19.385a9.691 9.691 0 0 1-9.692-9.692v-19.385Zm80.769-136.523H162a7.206 7.206 0 0 0-5.184 2.108 7.195 7.195 0 0 0-2.109 5.184V50.5A7.25 7.25 0 0 0 162 57.792h19.384a7.25 7.25 0 0 0 7.293-7.292V31.115a7.25 7.25 0 0 0-7.293-7.292ZM162 21.423a9.691 9.691 0 0 0-9.693 9.692V50.5A9.695 9.695 0 0 0 162 60.192h19.384a9.693 9.693 0 0 0 9.693-9.692V31.115a9.695 9.695 0 0 0-9.693-9.692H162Zm19.384 105.785H162a7.186 7.186 0 0 0-5.184 2.108 7.193 7.193 0 0 0-2.109 5.184v19.385a7.25 7.25 0 0 0 7.293 7.292h19.384a7.25 7.25 0 0 0 7.293-7.292V134.5a7.249 7.249 0 0 0-7.293-7.292Zm-19.384-2.4a9.695 9.695 0 0 0-9.693 9.692v19.385a9.696 9.696 0 0 0 9.693 9.692h19.384a9.692 9.692 0 0 0 9.693-9.692V134.5a9.695 9.695 0 0 0-9.693-9.692H162ZM213.692-2.023h19.385a7.25 7.25 0 0 1 7.292 7.292v19.385a7.25 7.25 0 0 1-7.292 7.292h-19.385a7.198 7.198 0 0 1-7.292-7.292V5.269a7.249 7.249 0 0 1 7.292-7.292ZM204 5.269a9.691 9.691 0 0 1 9.692-9.692h19.385a9.693 9.693 0 0 1 9.692 9.692v19.385a9.69 9.69 0 0 1-9.692 9.692h-19.385A9.69 9.69 0 0 1 204 24.654V5.269Zm29.077 44.4h-19.385a7.198 7.198 0 0 0-7.292 7.293v19.384a7.249 7.249 0 0 0 7.292 7.292h19.385a7.25 7.25 0 0 0 7.292-7.292V56.961a7.25 7.25 0 0 0-7.292-7.292Zm-19.385-2.4A9.69 9.69 0 0 0 204 56.962v19.384a9.69 9.69 0 0 0 9.692 9.692h19.385a9.693 9.693 0 0 0 9.692-9.692V56.961a9.691 9.691 0 0 0-9.692-9.692h-19.385Zm0 54.093h19.385a7.249 7.249 0 0 1 7.292 7.292v19.384a7.25 7.25 0 0 1-7.292 7.293h-19.385a7.207 7.207 0 0 1-5.184-2.108 7.2 7.2 0 0 1-2.108-5.185v-19.384a7.248 7.248 0 0 1 7.292-7.292ZM204 108.654a9.692 9.692 0 0 1 9.692-9.692h19.385a9.694 9.694 0 0 1 9.692 9.692v19.384a9.692 9.692 0 0 1-9.692 9.693h-19.385a9.692 9.692 0 0 1-9.692-9.693v-19.384Zm29.077 44.4h-19.385a7.189 7.189 0 0 0-5.184 2.108 7.2 7.2 0 0 0-2.108 5.184v19.385a7.249 7.249 0 0 0 7.292 7.292h19.385a7.25 7.25 0 0 0 7.292-7.292v-19.385a7.25 7.25 0 0 0-7.292-7.292Zm-19.385-2.4a9.69 9.69 0 0 0-9.692 9.692v19.385a9.69 9.69 0 0 0 9.692 9.692h19.385a9.691 9.691 0 0 0 9.692-9.692v-19.385a9.69 9.69 0 0 0-9.692-9.692h-19.385Z" fill="url(#b)"/>
+    <path d="M87.231 68.5c1.385-1.846 4.154-.923 4.154 1.477v.37a6.461 6.461 0 0 0 6.462 6.46h44.307a6.461 6.461 0 0 0 6.462-6.46v-.37c0-2.308 2.769-3.416 4.154-1.477.276.37.461.923.461 1.477v.37a11.078 11.078 0 0 1-11.077 11.076H97.847a11.077 11.077 0 0 1-11.078-11.077v-.37c0-.553.185-1.107.462-1.476Zm65.539 48c.276-.369.461-.923.461-1.477v-.369a11.08 11.08 0 0 0-11.077-11.077H97.847a11.078 11.078 0 0 0-11.078 11.077v.369c0 .554.185 1.108.462 1.477 1.385 1.846 4.154.923 4.154-1.477v-.369a6.461 6.461 0 0 1 6.462-6.462h44.307a6.46 6.46 0 0 1 6.462 6.462v.369c0 2.308 2.769 3.415 4.154 1.477Z" fill="#A0AEC0" fill-opacity=".5"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M153.231 92.5a33.233 33.233 0 0 1-45.948 30.701 33.237 33.237 0 0 1-17.984-17.984A33.233 33.233 0 0 1 120 59.269 33.232 33.232 0 0 1 153.231 92.5Zm-5.262 33.877a3.963 3.963 0 0 0-4.984-.369 40.618 40.618 0 0 1-54.212-7.54 40.613 40.613 0 0 1 2.52-54.675 40.614 40.614 0 0 1 62.215 51.692c-1.108 1.569-.923 3.692.369 4.984l18.185 18.185a3.693 3.693 0 0 1 0 5.169l-.739.739a3.693 3.693 0 0 1-5.169 0l-18.185-18.185Z" fill="#A0AEC0"/>
+  </g>
   <defs>
-    <radialGradient id="empty_search_result_svg__a" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(103.716 25.035 85.404) scale(58.3301 137.703)">
-      <stop offset=".081" stop-color="#CBD5E0" stop-opacity="0"/>
-      <stop offset=".563" stop-color="#CBD5E0" stop-opacity=".54"/>
+    <radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 96.9231 -119.218 0 116.449 92.5)">
+      <stop stop-color="#CBD5E0" stop-opacity=".8"/>
       <stop offset="1" stop-color="#CBD5E0" stop-opacity="0"/>
     </radialGradient>
+    <clipPath id="a">
+      <path fill="#fff" transform="translate(0 .192)" d="M0 0h240v184.615H0z"/>
+    </clipPath>
   </defs>
 </svg>
diff --git a/icons/games.svg b/icons/games.svg
new file mode 100644
index 0000000000..39c01ca56d
--- /dev/null
+++ b/icons/games.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" d="M24.24 18.89v-8.582c0-.28-.072-.556-.206-.8a1.576 1.576 0 0 0-.56-.587L16.16 4.476A2.232 2.232 0 0 0 15 4.149c-.408 0-.809.113-1.161.327L6.525 8.92a1.576 1.576 0 0 0-.56.587c-.134.244-.204.52-.205.8v8.581c0 .281.071.557.205.801s.327.446.56.588l7.315 4.445c.352.214.753.327 1.16.327.408 0 .809-.113 1.161-.327l7.315-4.445c.232-.142.425-.345.559-.588.134-.244.204-.52.204-.8Z"/>
+  <path stroke="transparent" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".2" stroke-width="1.6" d="M24.24 18.89v-8.582c0-.28-.072-.556-.206-.8a1.576 1.576 0 0 0-.56-.587L16.16 4.476A2.232 2.232 0 0 0 15 4.149c-.408 0-.809.113-1.161.327L6.525 8.92a1.576 1.576 0 0 0-.56.587c-.134.244-.204.52-.205.8v8.581c0 .281.071.557.205.801s.327.446.56.588l7.315 4.445c.352.214.753.327 1.16.327.408 0 .809-.113 1.161-.327l7.315-4.445c.232-.142.425-.345.559-.588.134-.244.204-.52.204-.8Z"/>
+  <path fill="currentColor" fill-rule="evenodd" d="M6.42 8.792a.8.8 0 1 0-.838 1.364l8.618 5.293v9.602a.8.8 0 1 0 1.6 0V15.45l8.617-5.293a.8.8 0 0 0-.837-1.364L15 14.062l-8.58-5.27Z" clip-rule="evenodd"/>
+  <path fill="transparent" fill-opacity=".2" fill-rule="evenodd" d="M6.42 8.792a.8.8 0 1 0-.838 1.364l8.618 5.293v9.602a.8.8 0 1 0 1.6 0V15.45l8.617-5.293a.8.8 0 0 0-.837-1.364L15 14.062l-8.58-5.27Z" clip-rule="evenodd"/>
+  <path fill="currentColor" fill-rule="evenodd" d="M15 10.177c.638 0 1.155-.36 1.155-.804 0-.444-.517-.804-1.155-.804-.637 0-1.155.36-1.155.804 0 .444.518.804 1.155.804Zm-2.9 7.735c.497 0 .9-.54.9-1.206 0-.666-.403-1.206-.9-1.206s-.9.54-.9 1.206c0 .666.403 1.206.9 1.206Zm-3 .306c0 .666-.403 1.206-.9 1.206s-.9-.54-.9-1.206c0-.667.403-1.207.9-1.207s.9.54.9 1.207Zm8.458-.404c.496.029.93-.487.968-1.152.04-.665-.331-1.227-.828-1.256-.496-.03-.93.486-.968 1.15-.04.666.331 1.228.828 1.258Zm5.068-3.305c-.039.665-.472 1.18-.969 1.152-.496-.03-.866-.592-.828-1.257.04-.665.473-1.18.97-1.151.496.029.866.591.827 1.256Zm-5.069 7.352c.497.029.93-.487.97-1.152.038-.665-.332-1.227-.829-1.256-.496-.03-.93.486-.969 1.151-.039.665.332 1.227.828 1.257Zm5.07-3.591c-.04.665-.473 1.18-.97 1.151-.496-.029-.866-.591-.828-1.256.04-.665.473-1.18.97-1.152.496.03.866.592.827 1.257Z" clip-rule="evenodd"/>
+  <path fill="transparent" fill-opacity=".2" fill-rule="evenodd" d="M15 10.177c.638 0 1.155-.36 1.155-.804 0-.444-.517-.804-1.155-.804-.637 0-1.155.36-1.155.804 0 .444.518.804 1.155.804Zm-2.9 7.735c.497 0 .9-.54.9-1.206 0-.666-.403-1.206-.9-1.206s-.9.54-.9 1.206c0 .666.403 1.206.9 1.206Zm-3 .306c0 .666-.403 1.206-.9 1.206s-.9-.54-.9-1.206c0-.667.403-1.207.9-1.207s.9.54.9 1.207Zm8.458-.404c.496.029.93-.487.968-1.152.04-.665-.331-1.227-.828-1.256-.496-.03-.93.486-.968 1.15-.04.666.331 1.228.828 1.258Zm5.068-3.305c-.039.665-.472 1.18-.969 1.152-.496-.03-.866-.592-.828-1.257.04-.665.473-1.18.97-1.151.496.029.866.591.827 1.256Zm-5.069 7.352c.497.029.93-.487.97-1.152.038-.665-.332-1.227-.829-1.256-.496-.03-.93.486-.969 1.151-.039.665.332 1.227.828 1.257Zm5.07-3.591c-.04.665-.473 1.18-.97 1.151-.496-.029-.866-.591-.828-1.256.04-.665.473-1.18.97-1.152.496.03.866.592.827 1.257Z" clip-rule="evenodd"/>
+</svg>
diff --git a/icons/gas.svg b/icons/gas.svg
index 902b8cb3ea..4334fe93f5 100644
--- a/icons/gas.svg
+++ b/icons/gas.svg
@@ -1,3 +1,10 @@
-<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M17.5 23.75h1.25v2.5H2.5v-2.5h1.25V5A1.25 1.25 0 0 1 5 3.75h11.25A1.25 1.25 0 0 1 17.5 5v10H20a2.5 2.5 0 0 1 2.5 2.5v5a1.25 1.25 0 0 0 2.5 0v-8.75h-2.5a1.25 1.25 0 0 1-1.25-1.25V8.018l-2.071-2.072 1.767-1.767 6.188 6.187a1.244 1.244 0 0 1 .366.884V22.5a3.75 3.75 0 0 1-7.5 0v-5h-2.5v6.25Zm-11.25 0H15v-7.5H6.25v7.5Zm0-17.5v7.5H15v-7.5H6.25Z" fill="currentColor"/>
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#a)">
+    <path d="M12 17h1v2H0v-2h1V2a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v8h2a2 2 0 0 1 2 2v4a1 1 0 0 0 2 0V9h-2a1 1 0 0 1-1-1V4.414l-1.657-1.657 1.414-1.414 4.95 4.95A.996.996 0 0 1 20 7v9a3 3 0 0 1-6 0v-4h-2v5Zm-9 0h7v-6H3v6ZM3 3v6h7V3H3Z" fill="currentColor"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h20v20H0z"/>
+    </clipPath>
+  </defs>
 </svg>
diff --git a/icons/heart_filled.svg b/icons/heart_filled.svg
new file mode 100644
index 0000000000..80926b1668
--- /dev/null
+++ b/icons/heart_filled.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+  <path d="m10 3.557-.555-.577c-.947-.946-2.205-.989-3.508-.97a4.876 4.876 0 0 0-3.469 1.547A5.443 5.443 0 0 0 1.001 7.22a5.46 5.46 0 0 0 1.363 3.709L10 18.5l7.636-7.58a5.46 5.46 0 0 0 1.363-3.709 5.443 5.443 0 0 0-1.467-3.664 4.876 4.876 0 0 0-3.47-1.546c-1.302-.02-2.56.023-3.507.969L10 3.557Z" fill="currentColor"/>
+</svg>
diff --git a/icons/heart_outline.svg b/icons/heart_outline.svg
new file mode 100644
index 0000000000..8bf7ce3e36
--- /dev/null
+++ b/icons/heart_outline.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 20" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.671 3.458a5.332 5.332 0 0 1 7.542 7.532l-.007.008-7.54 7.548-7.539-7.54-.007-.008a5.332 5.332 0 0 1 7.542-7.532l.002-.001.008-.007Zm1.017 1.06-1.017 1.018L9.647 4.53A3.862 3.862 0 0 0 4.18 9.983l6.485 6.484 6.485-6.493a3.863 3.863 0 0 0-5.463-5.455Z" fill="currentColor" stroke="currentColor" stroke-width=".4"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.671 3.458a5.332 5.332 0 0 1 7.542 7.532l-.007.008-7.54 7.548-7.539-7.54-.007-.008a5.332 5.332 0 0 1 7.542-7.532l.002-.001.008-.007Zm1.017 1.06-1.017 1.018L9.647 4.53A3.862 3.862 0 0 0 4.18 9.983l6.485 6.484 6.485-6.493a3.863 3.863 0 0 0-5.463-5.455Z" fill="currentColor"/>
+</svg>
diff --git a/icons/hourglass.svg b/icons/hourglass.svg
new file mode 100644
index 0000000000..7ebd6d78b2
--- /dev/null
+++ b/icons/hourglass.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15.125 6.906a1.257 1.257 0 0 0 .5-1V3.125a1.25 1.25 0 0 0-1.25-1.25h-8.75a1.25 1.25 0 0 0-1.25 1.25v2.813a1.258 1.258 0 0 0 .5 1L6.289 8l2.672 2-4.086 3.063a1.258 1.258 0 0 0-.5 1v2.812a1.25 1.25 0 0 0 1.25 1.25h8.75a1.25 1.25 0 0 0 1.25-1.25v-2.781a1.257 1.257 0 0 0-.5-1L11.039 10l1.774-1.344 2.312-1.75Zm-9.5-3.781h8.75v2.781l-.453.344H6.039l-.414-.313V3.126Zm8.75 10.969v2.781h-8.75v-2.813l3.75-2.812v1.875a.625.625 0 1 0 1.25 0v-1.867l3.75 2.836Z" fill="currentColor"/>
+</svg>
diff --git a/icons/lightning_navbar.svg b/icons/lightning_navbar.svg
new file mode 100644
index 0000000000..9587a9c7a2
--- /dev/null
+++ b/icons/lightning_navbar.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5.375 16v-5.006H.676L7.697 0h7.9v6l.027 10H5.374Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.72 6.01V0L2.63 10.15h4.02V16l6.66-9.99H8.72Z" fill="#ED8936"/>
+</svg>
diff --git a/icons/link_external.svg b/icons/link_external.svg
new file mode 100644
index 0000000000..dbddf710bc
--- /dev/null
+++ b/icons/link_external.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.621 4.353 5.176 9.798a.69.69 0 1 1-.974-.974l5.444-5.446H5.108a.69.69 0 0 1 0-1.378H12v6.892a.69.69 0 1 1-1.379 0V4.353Z" fill="currentColor"/>
+</svg>
diff --git a/icons/open-link.svg b/icons/open-link.svg
new file mode 100644
index 0000000000..d0fcc28ab4
--- /dev/null
+++ b/icons/open-link.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.16 3A2.16 2.16 0 0 0 3 5.16v10.18a2.16 2.16 0 0 0 2.16 2.16h10.18a2.16 2.16 0 0 0 2.16-2.16v-3.272h-1.614v3.114a.704.704 0 0 1-.704.704H5.318a.705.705 0 0 1-.704-.704V5.318c0-.389.315-.704.704-.704h3.114V3H5.159Zm6.135 0a.41.41 0 0 0-.41.41v.793a.41.41 0 0 0 .41.409h3.453l-4.244 4.245a.409.409 0 0 0 0 .578l.56.561c.16.16.42.16.58 0l4.244-4.245v3.454c0 .226.183.41.41.41h.793a.41.41 0 0 0 .409-.41V3h-6.205Z" fill="currentColor"/>
+</svg>
diff --git a/icons/payment_link.svg b/icons/payment_link.svg
new file mode 100644
index 0000000000..f97128fff6
--- /dev/null
+++ b/icons/payment_link.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.603 2.425A5.072 5.072 0 0 1 19.2 6.034a5.08 5.08 0 0 1-1.423 3.571l-.012.012-2.202 2.204c.21-.479.325-1.047.325-1.718 0-.474-.057-.896-.165-1.272l.62-.62A3.08 3.08 0 0 0 14.154 3a3.072 3.072 0 0 0-2.156.859l-1.396 1.389a1 1 0 0 1-1.41-1.418l1.4-1.394.01-.01Zm-5.96 5.95-2.207 2.209-.012.012A5.079 5.079 0 0 0 6.03 19.2c1.33.011 2.612-.5 3.569-1.425l.012-.013 1.393-1.394a1 1 0 0 0-1.414-1.414l-1.387 1.388A3.072 3.072 0 0 1 3 14.15a3.08 3.08 0 0 1 .858-2.16l.62-.62a4.617 4.617 0 0 1-.163-1.268c0-.676.115-1.247.328-1.727Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.308 12.49v-1.173h2.863a.247.247 0 0 0 .184-.086.313.313 0 0 0 .076-.207.313.313 0 0 0-.076-.207.247.247 0 0 0-.184-.086H9.089c-.346 0-.677-.155-.92-.43a1.564 1.564 0 0 1-.382-1.036c0-.388.137-.76.381-1.036.244-.275.575-.429.92-.429h.521V6.628h1.041V7.8h1.302v1.172H9.088a.246.246 0 0 0-.184.086.313.313 0 0 0-.076.207c0 .078.028.153.076.208a.246.246 0 0 0 .184.085h2.083c.345 0 .676.155.92.43.244.274.381.647.381 1.036 0 .388-.137.761-.381 1.036s-.575.43-.92.43h-.52v1.171H9.608V12.49h-1.3Z" fill="currentColor"/>
+</svg>
diff --git a/icons/refresh.svg b/icons/refresh.svg
new file mode 100644
index 0000000000..fef0346a50
--- /dev/null
+++ b/icons/refresh.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.396 2.285a8.837 8.837 0 0 1 13.173 6.436.9.9 0 1 1-1.783.247A7.037 7.037 0 0 0 4.105 5.826a.1.1 0 0 0 .081.159H5.92a.9.9 0 1 1 0 1.8H2a.9.9 0 0 1-.9-.9v-3.92a.9.9 0 0 1 1.8 0v1.192a.1.1 0 0 0 .176.065 8.836 8.836 0 0 1 2.32-1.937Zm2.563 7.54a1.88 1.88 0 1 1 3.76 0 1.88 1.88 0 0 1-3.76 0Zm-6.083.088a.9.9 0 0 1 1.015.767 7.037 7.037 0 0 0 12.682 3.142.1.1 0 0 0-.082-.158h-1.733a.9.9 0 1 1 0-1.8h3.41a.93.93 0 0 1 .04 0h.47a.9.9 0 0 1 .9.9v3.92a.9.9 0 1 1-1.8 0V15.49a.1.1 0 0 0-.177-.064 8.834 8.834 0 0 1-12.958.564 8.837 8.837 0 0 1-2.534-5.063.9.9 0 0 1 .767-1.015Zm7.983-.088V9.82l-.002-.005a.019.019 0 0 0-.004-.006.019.019 0 0 0-.006-.004h-.002l-.004-.001h-.006l-.005.001a.019.019 0 0 0-.006.004.019.019 0 0 0-.004.006.028.028 0 0 0-.001.005v.003l.04.001Z" fill="currentColor"/>
+</svg>
diff --git a/icons/repeat_arrow.svg b/icons/repeat.svg
similarity index 100%
rename from icons/repeat_arrow.svg
rename to icons/repeat.svg
diff --git a/icons/share.svg b/icons/share.svg
new file mode 100644
index 0000000000..f1124e47d0
--- /dev/null
+++ b/icons/share.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 15 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.502 11.242a2.491 2.491 0 0 0-1.802.77L4.919 8.758c.112-.42.112-.863 0-1.284L10.7 4.222a2.492 2.492 0 1 0-.614-1.088L4.303 6.386a2.5 2.5 0 1 0 0 3.461l5.781 3.253a2.5 2.5 0 1 0 2.417-1.858Z" fill="currentColor"/>
+</svg>
diff --git a/icons/social/tweet.svg b/icons/social/tweet.svg
deleted file mode 100644
index 20cc63ccc6..0000000000
--- a/icons/social/tweet.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.067 3.928A9.984 9.984 0 0 0 10.997 1 9.983 9.983 0 0 0 3.93 3.928 9.973 9.973 0 0 0 1 11.003a9.969 9.969 0 0 0 2.929 7.069A9.983 9.983 0 0 0 10.998 21a9.984 9.984 0 0 0 7.069-2.928 9.97 9.97 0 0 0 2.928-7.07 9.974 9.974 0 0 0-2.928-7.074Zm-.554 13.59a9.187 9.187 0 0 1-6.516 2.702 9.187 9.187 0 0 1-6.515-2.702 9.175 9.175 0 0 1-2.701-6.515 9.178 9.178 0 0 1 2.7-6.521 9.182 9.182 0 0 1 6.517-2.696 9.181 9.181 0 0 1 6.515 2.696 9.177 9.177 0 0 1 2.701 6.52c0 2.542-1.03 4.85-2.701 6.516Z" fill="currentColor" stroke="currentColor"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M15.825 7.067c-.404.238-.858.41-1.334.504a2.088 2.088 0 0 0-1.534-.654c-1.151 0-2.093.925-2.093 2.06 0 .166.028.32.061.47a5.945 5.945 0 0 1-4.318-2.153c-.177.31-.287.659-.287 1.035 0 .72.411 1.35.965 1.716-.343-.005-.703-.1-.911-.255v.028c0 .266.014.51.108.742a2.062 2.062 0 0 0 1.522 1.273 2.12 2.12 0 0 1-.563.078 1.91 1.91 0 0 1-.397-.045 2.109 2.109 0 0 0 1.952 1.44c-.72.553-1.618.88-2.598.88-.171 0-.332-.011-.504-.028.93.581 2.031.925 3.21.925 3.272 0 5.283-2.265 5.808-4.617.095-.42.129-.836.129-1.246v-.265a4.167 4.167 0 0 0 1.05-1.069 4.43 4.43 0 0 1-1.196.327c.437-.26.774-.659.93-1.146Z" fill="currentColor"/>
-</svg>
diff --git a/icons/social/twitter.svg b/icons/social/twitter.svg
new file mode 100644
index 0000000000..21e9812ff7
--- /dev/null
+++ b/icons/social/twitter.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m4.044 4 6.95 9.292L4 20.847h1.574l6.123-6.614 4.947 6.614H22l-7.34-9.815L21.168 4h-1.574l-5.639 6.092L9.4 4H4.044Zm2.315 1.16h2.46l10.866 14.528h-2.46L6.358 5.159Z" fill="currentColor"/>
+</svg>
diff --git a/icons/social/twitter_filled.svg b/icons/social/twitter_filled.svg
index 5fc356a969..0d73b850a0 100644
--- a/icons/social/twitter_filled.svg
+++ b/icons/social/twitter_filled.svg
@@ -1,3 +1,3 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.005 22c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10Zm5.011-12.322c.483-.35.894-.774 1.234-1.27a4.938 4.938 0 0 1-1.416.38 2.39 2.39 0 0 0 1.081-1.355 4.823 4.823 0 0 1-1.56.593 2.371 2.371 0 0 0-1.798-.776c-.68 0-1.26.24-1.74.72a2.37 2.37 0 0 0-.72 1.739c0 .182.021.37.062.563a6.855 6.855 0 0 1-2.83-.757 6.971 6.971 0 0 1-2.241-1.816 2.4 2.4 0 0 0-.335 1.24 2.456 2.456 0 0 0 1.096 2.048 2.44 2.44 0 0 1-1.112-.312v.031c0 .594.187 1.115.56 1.564.373.45.844.732 1.412.849a2.542 2.542 0 0 1-.647.084c-.142 0-.297-.013-.464-.038.157.492.446.897.868 1.214a2.4 2.4 0 0 0 1.431.49 4.816 4.816 0 0 1-3.053 1.051c-.218 0-.416-.01-.594-.03a6.83 6.83 0 0 0 3.777 1.104 7.19 7.19 0 0 0 2.459-.415c.766-.277 1.421-.647 1.964-1.112a7.434 7.434 0 0 0 1.405-1.602 7.138 7.138 0 0 0 .88-1.892 6.983 6.983 0 0 0 .282-2.295Z" fill="currentColor"/>
+<svg viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M13 2C7.477 2 3 6.477 3 12s4.477 10 10 10 10-4.477 10-10S18.523 2 13 2Zm-1.338 10.619L7.03 6h3.57l3.037 4.34L17.398 6h1.049l-4.34 5.009L19 18h-3.57l-3.299-4.711L8.05 18H7l4.662-5.381Zm-1.45-5.793h-1.64l7.244 10.348h1.64L10.214 6.826Z" fill="currentColor"/>
 </svg>
diff --git a/icons/star_filled.svg b/icons/star_filled.svg
index 2bdea23a41..7b6312c876 100644
--- a/icons/star_filled.svg
+++ b/icons/star_filled.svg
@@ -1,3 +1,3 @@
-<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M14.76 18.333a.603.603 0 0 1-.294-.075L10 15.798l-4.467 2.46a.607.607 0 0 1-.663-.052.657.657 0 0 1-.213-.285.69.69 0 0 1-.038-.36l.853-5.21-3.615-3.69a.69.69 0 0 1-.16-.677.663.663 0 0 1 .194-.3.615.615 0 0 1 .315-.149l4.995-.76 2.233-4.74a.65.65 0 0 1 .233-.269.61.61 0 0 1 .666 0c.1.065.18.158.232.269l2.234 4.74 4.994.76c.116.018.226.07.316.149.09.079.157.183.193.3a.69.69 0 0 1-.16.678l-3.615 3.69.854 5.21a.692.692 0 0 1-.14.537.636.636 0 0 1-.216.173.607.607 0 0 1-.266.061h.001Z" fill="currentColor"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+  <path d="M15.713 20a.724.724 0 0 1-.354-.09L10 16.956 4.64 19.91a.728.728 0 0 1-.796-.061.788.788 0 0 1-.256-.342.827.827 0 0 1-.045-.432l1.024-6.252L.229 8.394a.802.802 0 0 1-.207-.377.829.829 0 0 1 .015-.435.795.795 0 0 1 .232-.361.741.741 0 0 1 .379-.179L6.64 6.13 9.321.442a.78.78 0 0 1 .28-.323.731.731 0 0 1 .798 0 .78.78 0 0 1 .28.323l2.68 5.688 5.993.912a.74.74 0 0 1 .379.178.8.8 0 0 1 .232.361.828.828 0 0 1-.192.813l-4.338 4.428 1.024 6.252a.83.83 0 0 1-.167.644.762.762 0 0 1-.26.208.728.728 0 0 1-.319.074h.002Z" fill="currentColor"/>
 </svg>
diff --git a/icons/star_outline.svg b/icons/star_outline.svg
index bf2eca9845..05286fa1d5 100644
--- a/icons/star_outline.svg
+++ b/icons/star_outline.svg
@@ -1,3 +1,3 @@
 <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.76 18.333a.603.603 0 0 1-.294-.075l.293.075Zm.003 0a.6.6 0 0 0 .262-.061c.083-.04.157-.1.216-.173a.674.674 0 0 0 .14-.538l-.854-5.21 3.616-3.69a.69.69 0 0 0 .16-.677.662.662 0 0 0-.194-.3.617.617 0 0 0-.316-.149l-4.884-.743a.208.208 0 0 1-.158-.117l-2.186-4.64a.651.651 0 0 0-.232-.269.61.61 0 0 0-.666 0 .65.65 0 0 0-.233.269l-2.186 4.64a.208.208 0 0 1-.157.117l-4.885.743a.617.617 0 0 0-.315.149.663.663 0 0 0-.194.3.69.69 0 0 0 .16.678L5.4 12.276a.208.208 0 0 1 .056.18L4.62 17.56a.69.69 0 0 0 .038.36.657.657 0 0 0 .213.285.613.613 0 0 0 .663.052L9.9 15.852a.208.208 0 0 1 .201 0l4.366 2.405m-7.795-2.915c-.028.172.154.3.306.216L9.9 13.95a.208.208 0 0 1 .201 0l2.922 1.61a.208.208 0 0 0 .306-.216l-.565-3.452a.208.208 0 0 1 .057-.18l2.485-2.536a.208.208 0 0 0-.117-.351l-3.409-.52a.208.208 0 0 1-.157-.116l-1.434-3.044a.208.208 0 0 0-.377 0L8.377 8.189a.208.208 0 0 1-.157.117l-3.408.518a.208.208 0 0 0-.118.352l2.486 2.537a.208.208 0 0 1 .057.18l-.566 3.45Zm8.092 2.99h-.003.003Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M15.711 20a.724.724 0 0 1-.352-.09Zm.005 0a.73.73 0 0 0 .314-.074.77.77 0 0 0 .26-.208.806.806 0 0 0 .167-.644l-1.024-6.252 4.338-4.428a.828.828 0 0 0 .192-.813.796.796 0 0 0-.232-.36.74.74 0 0 0-.38-.179l-5.86-.892a.25.25 0 0 1-.19-.14L10.679.442A.78.78 0 0 0 10.4.119a.732.732 0 0 0-.798 0 .78.78 0 0 0-.28.323L6.699 6.01a.25.25 0 0 1-.188.14l-5.862.892a.741.741 0 0 0-.38.179.795.795 0 0 0-.231.36.829.829 0 0 0-.015.436.802.802 0 0 0 .207.377l4.25 4.338a.25.25 0 0 1 .068.215l-1.004 6.127a.827.827 0 0 0 .045.432.788.788 0 0 0 .256.342.728.728 0 0 0 .796.061l5.24-2.886a.25.25 0 0 1 .24 0l5.24 2.886m-9.354-3.497a.25.25 0 0 0 .367.26L9.88 14.74a.25.25 0 0 1 .24 0l3.507 1.932a.25.25 0 0 0 .367-.26l-.678-4.141a.25.25 0 0 1 .068-.216l2.982-3.043a.25.25 0 0 0-.14-.423l-4.09-.622a.25.25 0 0 1-.189-.14l-1.72-3.653a.25.25 0 0 0-.453 0L8.053 7.826a.25.25 0 0 1-.189.141l-4.09.622a.25.25 0 0 0-.14.423l2.982 3.043a.25.25 0 0 1 .068.216l-.678 4.14ZM15.716 20h-.003Z" fill="currentColor"/>
 </svg>
diff --git a/icons/status/pending.svg b/icons/status/pending.svg
index a8c19c187b..f9e5a88d53 100644
--- a/icons/status/pending.svg
+++ b/icons/status/pending.svg
@@ -1,4 +1,5 @@
-<svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="5" cy="5" r="5" fill="#D9DBE0"/>
-  <circle cx="5" cy="5" r="2.5" fill="#707886"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 11" fill="none">
+  <circle cx="5" cy="5.438" r="5" fill="#E2E8F0"/>
+  <circle cx="5" cy="5.438" r="2.5" fill="#4A5568"/>
+  <circle cx="5" cy="5.438" r="2.5" fill="#000" fill-opacity=".2"/>
 </svg>
diff --git a/icons/swap.svg b/icons/swap.svg
index 63d915c99b..c1566be5fc 100644
--- a/icons/swap.svg
+++ b/icons/swap.svg
@@ -1,3 +1,3 @@
-<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10.98 5.36c-.387 0-.645.258-.645.645a4.485 4.485 0 0 1-4.512 4.512h-.451c-.13 0-.194 0-.322-.064-.13 0-.194-.065-.323-.065-.064 0-.129-.064-.193-.064-.451-.129-.903-.387-1.29-.645-.064-.064-.128-.064-.128-.129-.065-.064-.13-.129-.194-.129-.129-.064-.258-.193-.322-.257l-.129-.13 1.16-.193a.669.669 0 0 0 .516-.773.669.669 0 0 0-.773-.516l-2.128.387-.515.129a.435.435 0 0 0-.387.258 1.195 1.195 0 0 0-.13.45l.517 2.708c.064.323.322.516.644.516h.13a.669.669 0 0 0 .515-.774l-.194-1.095c.13.128.323.257.452.386h.064c.065.065.129.13.193.13.13.128.258.193.452.257.129.258.322.322.515.451h.065c.064.065.193.065.322.13.258.064.516.128.71.193.128 0 .257.064.386.064h.774a5.778 5.778 0 0 0 5.801-5.801c.065-.323-.258-.58-.58-.58ZM.73 6.65c.387 0 .645-.258.645-.645a4.485 4.485 0 0 1 4.513-4.512h.45c.13 0 .194 0 .323.064.13 0 .194.065.323.065.064 0 .128.064.193.064.451.129.902.322 1.29.645.064.064.128.064.193.129.064.064.129.064.193.128.064.065.129.194.258.258l.129.13-1.16.193a.669.669 0 0 0-.516.773c.064.322.322.516.644.516h.13l2.707-.516a.669.669 0 0 0 .515-.773L11.045.526A.669.669 0 0 0 10.27.01a.669.669 0 0 0-.516.773L9.95 1.88c-.13-.129-.322-.322-.451-.386h-.065c-.064-.065-.129-.13-.193-.13-.13-.128-.258-.193-.451-.322C8.596.913 8.403.849 8.21.72h-.065C8.079.655 7.95.655 7.822.59a10.574 10.574 0 0 1-.71-.193c-.128 0-.257-.065-.386-.065h-.773A5.778 5.778 0 0 0 .15 6.134c-.064.258.194.516.58.516Z" fill="currentColor"/>
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.944 10.007c0 .58-.406.967-1.015.967-.609 0-1.015-.386-.913-.773 0-4.835 4.06-8.703 9.136-8.703h1.218c.102 0 .204.025.305.049s.203.048.304.048c.305.097.711.193 1.117.29.09.043.178.066.259.088.103.027.192.051.249.106h.101c.153.096.305.169.457.241.152.073.305.145.457.242.082.052.156.097.225.138.188.114.337.204.486.345.101 0 .203.097.304.194h.102c.203.097.507.387.71.58l-.304-1.644a1.007 1.007 0 0 1 .812-1.16c.61-.097 1.117.29 1.218.773l.812 3.965a1.007 1.007 0 0 1-.812 1.16l-4.264.774h-.203c-.507 0-.913-.29-1.015-.774a1.006 1.006 0 0 1 .812-1.16l1.828-.29-.203-.194a.913.913 0 0 1-.311-.277 1.259 1.259 0 0 0-.096-.11c-.05-.048-.101-.072-.152-.096-.05-.024-.101-.048-.152-.097a.534.534 0 0 0-.152-.096.534.534 0 0 1-.153-.097c-.609-.484-1.32-.774-2.03-.967a.373.373 0 0 1-.152-.048.366.366 0 0 0-.152-.049.783.783 0 0 1-.254-.048.783.783 0 0 0-.254-.048c-.203-.097-.305-.097-.508-.097h-.71c-3.96 0-7.107 2.997-7.107 6.768Zm14.112 0c0-.58.406-.966 1.015-.966.508 0 1.015.386.914.87 0 4.835-4.06 8.702-9.137 8.702H8.63c-.102 0-.203-.024-.305-.048a1.336 1.336 0 0 0-.304-.048c-.305-.097-.71-.194-1.117-.29a1.458 1.458 0 0 0-.258-.088c-.103-.028-.192-.052-.25-.106h-.101a4.445 4.445 0 0 0-.198-.116c-.234-.133-.455-.258-.614-.56-.305-.097-.508-.194-.71-.387-.102 0-.204-.097-.305-.194h-.102a4.366 4.366 0 0 0-.355-.29 4.347 4.347 0 0 1-.355-.29l.304 1.644A1.007 1.007 0 0 1 3.148 19h-.203c-.508 0-.914-.29-1.015-.773l-.812-4.062c0-.193.101-.483.203-.676a.686.686 0 0 1 .609-.387l.812-.194 3.35-.58c.61-.096 1.117.29 1.218.774a1.007 1.007 0 0 1-.812 1.16l-1.827.29.203.194c.101.096.304.29.507.386.102 0 .203.097.305.194 0 .06.039.082.092.114.033.02.072.042.11.08.61.386 1.32.773 2.031.966.051 0 .102.024.153.048.05.025.101.049.152.049.101 0 .178.024.254.048a.783.783 0 0 0 .253.048c.203.097.305.097.508.097h.71c3.96 0 7.107-2.997 7.107-6.768Z" fill="currentColor"/>
 </svg>
diff --git a/icons/finalized.svg b/icons/verification-steps/finalized.svg
similarity index 100%
rename from icons/finalized.svg
rename to icons/verification-steps/finalized.svg
diff --git a/icons/unfinalized.svg b/icons/verification-steps/unfinalized.svg
similarity index 100%
rename from icons/unfinalized.svg
rename to icons/verification-steps/unfinalized.svg
diff --git a/icons/verify-contract.svg b/icons/verify-contract.svg
deleted file mode 100644
index 5457c4f160..0000000000
--- a/icons/verify-contract.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.392 5.45c.252-.288.592-.45.948-.45h8.038a.63.63 0 0 1 .474.225l4.689 5.385a.83.83 0 0 1 .196.544v8.574l-.985 1.055-.355-.38v-8.666h-4.485a.702.702 0 0 1-.702-.702V6.538H7.34v16.924h9.44L18.217 25H7.34c-.356 0-.696-.162-.948-.45A1.661 1.661 0 0 1 6 23.461V6.538c0-.408.141-.799.392-1.087Zm9.222 1.678 2.791 3.205h-2.791V7.128ZM8.85 15.5a.65.65 0 0 1 .65-.65h7.2a.65.65 0 1 1 0 1.3H9.5a.65.65 0 0 1-.65-.65Zm0 2.4a.65.65 0 0 1 .65-.65h7.2a.65.65 0 1 1 0 1.3H9.5a.65.65 0 0 1-.65-.65Z" fill="currentColor"/>
-  <path d="m17.552 21.357 2.2 2.357 4.4-4.714" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/icons/wallet.svg b/icons/wallet.svg
index 8f04aff392..f1765c246d 100644
--- a/icons/wallet.svg
+++ b/icons/wallet.svg
@@ -1,11 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 31 30">
-  <g fill="currentColor" clip-path="url(#wallet_svg__a)">
-    <path d="M22.75 27.188h-15A4.688 4.688 0 0 1 3.062 22.5V9.375A.937.937 0 0 1 4 8.437h18.75a4.688 4.688 0 0 1 4.688 4.688V22.5a4.688 4.688 0 0 1-4.688 4.688ZM4.937 10.313V22.5a2.812 2.812 0 0 0 2.813 2.813h15a2.812 2.812 0 0 0 2.813-2.813v-9.375a2.812 2.812 0 0 0-2.813-2.813H4.937Z"/>
-    <path d="M24.625 10.312a.937.937 0 0 1-.937-.937V6.797a2.184 2.184 0 0 0-.732-1.754 1.82 1.82 0 0 0-1.565-.3L5.669 8.315a.938.938 0 0 0-.731.938.938.938 0 0 1-1.875 0 2.813 2.813 0 0 1 2.184-2.766l15.731-3.572a3.656 3.656 0 0 1 3.15.666 4.069 4.069 0 0 1 1.435 3.216v2.578a.938.938 0 0 1-.938.937ZM26.5 21.563h-6.563a3.75 3.75 0 1 1 0-7.5H26.5a.938.938 0 0 1 .938.937v5.625a.938.938 0 0 1-.938.938Zm-6.563-5.625a1.875 1.875 0 1 0 0 3.75h5.625v-3.75h-5.625Z"/>
-  </g>
-  <defs>
-    <clipPath id="wallet_svg__a">
-      <path fill="#fff" d="M.25 0h30v30h-30z"/>
-    </clipPath>
-  </defs>
+<svg viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.139 20H4.83a3.847 3.847 0 0 1-3.846-3.845V5.39a.769.769 0 0 1 .77-.769h15.384a3.847 3.847 0 0 1 3.846 3.845v7.69A3.844 3.844 0 0 1 17.139 20ZM2.524 6.16v9.996a2.307 2.307 0 0 0 2.307 2.307H17.14a2.308 2.308 0 0 0 2.308-2.307v-7.69A2.306 2.306 0 0 0 17.14 6.16H2.524Z" fill="currentColor"/>
+  <path d="M18.677 6.159a.77.77 0 0 1-.769-.77V3.276a1.79 1.79 0 0 0-.6-1.438 1.493 1.493 0 0 0-1.284-.246l-12.9 2.93a.77.77 0 0 0-.6.769.769.769 0 0 1-1.539 0A2.306 2.306 0 0 1 2.778 3.02L15.685.091a3 3 0 0 1 2.585.546 3.338 3.338 0 0 1 1.177 2.638V5.39a.77.77 0 0 1-.77.769Zm1.539 9.227H14.83a3.077 3.077 0 0 1-2.175-5.25 3.074 3.074 0 0 1 2.175-.902h5.385a.77.77 0 0 1 .769.77v4.613a.77.77 0 0 1-.77.769Zm-5.385-4.614a1.539 1.539 0 1 0 0 3.076h4.616v-3.076H14.83Z" fill="currentColor"/>
 </svg>
diff --git a/instrumentation.node.ts b/instrumentation.node.ts
index bbb183dd00..5cae612a92 100644
--- a/instrumentation.node.ts
+++ b/instrumentation.node.ts
@@ -46,9 +46,7 @@ const sdk = new NodeSDK({
               url.pathname.startsWith('/_next/static/') ||
               url.pathname.startsWith('/_next/data/') ||
               url.pathname.startsWith('/assets/') ||
-              url.pathname.startsWith('/static/') ||
-              url.pathname.startsWith('/favicon/') ||
-              url.pathname.startsWith('/envs.js')
+              url.pathname.startsWith('/static/')
             ) {
               return true;
             }
diff --git a/jest/lib.tsx b/jest/lib.tsx
index 048f26733a..f0f439e5f6 100644
--- a/jest/lib.tsx
+++ b/jest/lib.tsx
@@ -8,20 +8,16 @@ import React from 'react';
 import { AppContextProvider } from 'lib/contexts/app';
 import { ScrollDirectionProvider } from 'lib/contexts/scrollDirection';
 import { SocketProvider } from 'lib/socket/context';
-import theme from 'theme';
+import theme from 'theme/theme';
 
 import 'lib/setLocale';
 
 const PAGE_PROPS = {
   cookies: '',
   referrer: '',
-  id: '',
-  height_or_hash: '',
-  hash: '',
-  number: '',
-  q: '',
-  name: '',
-  adBannerProvider: '',
+  query: {},
+  adBannerProvider: null,
+  apiData: null,
 };
 
 const TestApp = ({ children }: {children: React.ReactNode}) => {
diff --git a/lib/address/getCheckedSummedAddress.ts b/lib/address/getCheckedSummedAddress.ts
new file mode 100644
index 0000000000..6cf744620d
--- /dev/null
+++ b/lib/address/getCheckedSummedAddress.ts
@@ -0,0 +1,9 @@
+import { getAddress } from 'viem';
+
+export default function getCheckedSummedAddress(address: string): string {
+  try {
+    return getAddress(address);
+  } catch (error) {
+    return address;
+  }
+}
diff --git a/lib/address/parseMetaPayload.ts b/lib/address/parseMetaPayload.ts
new file mode 100644
index 0000000000..f8d6fbc570
--- /dev/null
+++ b/lib/address/parseMetaPayload.ts
@@ -0,0 +1,46 @@
+import type { AddressMetadataTag } from 'types/api/addressMetadata';
+import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
+
+type MetaParsed = NonNullable<AddressMetadataTagFormatted['meta']>;
+
+export default function parseMetaPayload(meta: AddressMetadataTag['meta']): AddressMetadataTagFormatted['meta'] {
+  try {
+    const parsedMeta = JSON.parse(meta || '');
+
+    if (typeof parsedMeta !== 'object' || parsedMeta === null || Array.isArray(parsedMeta)) {
+      throw new Error('Invalid JSON');
+    }
+
+    const result: AddressMetadataTagFormatted['meta'] = {};
+
+    const stringFields: Array<keyof MetaParsed> = [
+      'textColor',
+      'bgColor',
+      'tagIcon',
+      'tagUrl',
+      'tooltipIcon',
+      'tooltipTitle',
+      'tooltipDescription',
+      'tooltipUrl',
+      'appID',
+      'appMarketplaceURL',
+      'appLogoURL',
+      'appActionButtonText',
+      'warpcastHandle',
+      'data',
+      'alertBgColor',
+      'alertTextColor',
+      'alertStatus',
+    ];
+
+    for (const stringField of stringFields) {
+      if (stringField in parsedMeta && typeof parsedMeta[stringField as keyof typeof parsedMeta] === 'string') {
+        result[stringField] = parsedMeta[stringField as keyof typeof parsedMeta];
+      }
+    }
+
+    return result;
+  } catch (error) {
+    return null;
+  }
+}
diff --git a/lib/address/useAddressMetadataInfoQuery.ts b/lib/address/useAddressMetadataInfoQuery.ts
new file mode 100644
index 0000000000..14c22ab676
--- /dev/null
+++ b/lib/address/useAddressMetadataInfoQuery.ts
@@ -0,0 +1,35 @@
+import type { AddressMetadataInfoFormatted, AddressMetadataTagFormatted } from 'types/client/addressMetadata';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+
+import parseMetaPayload from './parseMetaPayload';
+
+export default function useAddressMetadataInfoQuery(addresses: Array<string>, isEnabled = true) {
+
+  const resource = 'address_metadata_info';
+
+  return useApiQuery<typeof resource, unknown, AddressMetadataInfoFormatted>(resource, {
+    queryParams: {
+      addresses,
+      chainId: config.chain.id,
+      tagsLimit: '20',
+    },
+    queryOptions: {
+      enabled: isEnabled && addresses.length > 0 && config.features.addressMetadata.isEnabled,
+      select: (data) => {
+        const addresses = Object.entries(data.addresses)
+          .map(([ address, { tags, reputation } ]) => {
+            const formattedTags: Array<AddressMetadataTagFormatted> = tags.map((tag) => ({ ...tag, meta: parseMetaPayload(tag.meta) }));
+            return [ address.toLowerCase(), { tags: formattedTags, reputation } ] as const;
+          })
+          .reduce((result, item) => {
+            result[item[0]] = item[1];
+            return result;
+          }, {} as AddressMetadataInfoFormatted['addresses']);
+
+        return { addresses };
+      },
+    },
+  });
+}
diff --git a/lib/api/buildUrl.ts b/lib/api/buildUrl.ts
index 07805dbd9c..ea7e9fac3f 100644
--- a/lib/api/buildUrl.ts
+++ b/lib/api/buildUrl.ts
@@ -10,11 +10,12 @@ export default function buildUrl<R extends ResourceName>(
   resourceName: R,
   pathParams?: ResourcePathParams<R>,
   queryParams?: Record<string, string | Array<string> | number | boolean | null | undefined>,
+  noProxy?: boolean,
 ): string {
   const resource: ApiResource = RESOURCES[resourceName];
-  const baseUrl = isNeedProxy() ? config.app.baseUrl : (resource.endpoint || config.api.endpoint);
+  const baseUrl = !noProxy && isNeedProxy() ? config.app.baseUrl : (resource.endpoint || config.api.endpoint);
   const basePath = resource.basePath !== undefined ? resource.basePath : config.api.basePath;
-  const path = isNeedProxy() ? '/node-api/proxy' + basePath + resource.path : basePath + resource.path;
+  const path = !noProxy && isNeedProxy() ? '/node-api/proxy' + basePath + resource.path : basePath + resource.path;
   const url = new URL(compile(path)(pathParams), baseUrl);
 
   queryParams && Object.entries(queryParams).forEach(([ key, value ]) => {
diff --git a/lib/api/resources.ts b/lib/api/resources.ts
index ae6547ae87..dfb166b3d2 100644
--- a/lib/api/resources.ts
+++ b/lib/api/resources.ts
@@ -1,8 +1,10 @@
+import type * as bens from '@blockscout/bens-types';
+import type * as stats from '@blockscout/stats-types';
+import type * as visualizer from '@blockscout/visualizer-types';
 import { getFeaturePayload } from 'configs/app/features/types';
 import type {
   UserInfo,
   CustomAbis,
-  PublicTags,
   ApiKeys,
   VerifiedAddressResponse,
   TokenInfoApplicationConfig,
@@ -29,33 +31,52 @@ import type {
   AddressNFTsResponse,
   AddressCollectionsResponse,
   AddressNFTTokensFilter,
+  AddressMudTables,
+  AddressMudTablesFilter,
+  AddressMudRecords,
+  AddressMudRecordsFilter,
+  AddressMudRecordsSorting,
+  AddressMudRecord,
 } from 'types/api/address';
-import type { AddressesResponse } from 'types/api/addresses';
+import type { AddressesResponse, AddressesMetadataSearchResult, AddressesMetadataSearchFilters } from 'types/api/addresses';
+import type { AddressMetadataInfo, PublicTagTypesResponse } from 'types/api/addressMetadata';
+import type {
+  ArbitrumL2MessagesResponse,
+  ArbitrumL2TxnBatch,
+  ArbitrumL2TxnBatchesResponse,
+  ArbitrumL2BatchTxs,
+  ArbitrumL2BatchBlocks,
+  ArbitrumL2TxnBatchesItem,
+  ArbitrumLatestDepositsResponse,
+} from 'types/api/arbitrumL2';
 import type { TxBlobs, Blob } from 'types/api/blobs';
-import type { BlocksResponse, BlockTransactionsResponse, Block, BlockFilters, BlockWithdrawalsResponse } from 'types/api/block';
-import type { ChartMarketResponse, ChartTransactionResponse } from 'types/api/charts';
-import type { BackendVersionConfig } from 'types/api/configs';
+import type {
+  BlocksResponse,
+  BlockTransactionsResponse,
+  Block,
+  BlockFilters,
+  BlockWithdrawalsResponse,
+  BlockCountdownResponse,
+  BlockEpoch,
+  BlockEpochElectionRewardDetailsResponse,
+} from 'types/api/block';
+import type { ChartMarketResponse, ChartSecondaryCoinPriceResponse, ChartTransactionResponse } from 'types/api/charts';
+import type { BackendVersionConfig, CsvExportConfig } from 'types/api/configs';
 import type {
   SmartContract,
-  SmartContractReadMethod,
-  SmartContractWriteMethod,
-  SmartContractVerificationConfig,
-  SolidityscanReport,
+  SmartContractVerificationConfigRaw,
   SmartContractSecurityAudits,
 } from 'types/api/contract';
 import type { VerifiedContractsResponse, VerifiedContractsFilters, VerifiedContractsCounters } from 'types/api/contracts';
 import type {
   EnsAddressLookupFilters,
-  EnsAddressLookupResponse,
-  EnsDomainDetailed,
-  EnsDomainEventsResponse,
   EnsDomainLookupFilters,
-  EnsDomainLookupResponse,
   EnsLookupSorting,
 } from 'types/api/ens';
 import type { IndexingStatus } from 'types/api/indexingStatus';
 import type { InternalTransactionsResponse } from 'types/api/internalTransaction';
 import type { LogsResponseTx, LogsResponseAddress } from 'types/api/log';
+import type { MudWorldsResponse } from 'types/api/mudWorlds';
 import type { NovesAccountHistoryResponse, NovesDescribeTxsResponse, NovesResponseData } from 'types/api/noves';
 import type {
   OptimisticL2DepositsResponse,
@@ -63,11 +84,15 @@ import type {
   OptimisticL2OutputRootsResponse,
   OptimisticL2TxnBatchesResponse,
   OptimisticL2WithdrawalsResponse,
+  OptimisticL2DisputeGamesResponse,
+  OptimismL2TxnBatch,
+  OptimismL2BatchTxs,
+  OptimismL2BatchBlocks,
 } from 'types/api/optimisticL2';
 import type { RawTracesResponse } from 'types/api/rawTrace';
 import type { SearchRedirectResult, SearchResult, SearchResultFilters, SearchResultItem } from 'types/api/search';
 import type { ShibariumWithdrawalsResponse, ShibariumDepositsResponse } from 'types/api/shibarium';
-import type { Counters, StatsCharts, StatsChart, HomeStats } from 'types/api/stats';
+import type { HomeStats } from 'types/api/stats';
 import type {
   TokenCounters,
   TokenInfo,
@@ -87,16 +112,31 @@ import type {
   TransactionsResponseWatchlist,
   TransactionsSorting,
   TransactionsResponseWithBlobs,
+  TransactionsStats,
 } from 'types/api/transaction';
 import type { TxInterpretationResponse } from 'types/api/txInterpretation';
 import type { TTxsFilters, TTxsWithBlobsFilters } from 'types/api/txsFilters';
 import type { TxStateChanges } from 'types/api/txStateChanges';
 import type { UserOpsResponse, UserOp, UserOpsFilters, UserOpsAccount } from 'types/api/userOps';
-import type { ValidatorsCountersResponse, ValidatorsFilters, ValidatorsResponse, ValidatorsSorting } from 'types/api/validators';
+import type {
+  ValidatorsStabilityCountersResponse,
+  ValidatorsStabilityFilters,
+  ValidatorsStabilityResponse,
+  ValidatorsStabilitySorting,
+  ValidatorsBlackfortCountersResponse,
+  ValidatorsBlackfortResponse,
+  ValidatorsBlackfortSorting,
+} from 'types/api/validators';
 import type { VerifiedContractsSorting } from 'types/api/verifiedContracts';
-import type { VisualizedContract } from 'types/api/visualization';
 import type { WithdrawalsResponse, WithdrawalsCounters } from 'types/api/withdrawals';
-import type { ZkEvmL2TxnBatch, ZkEvmL2TxnBatchesItem, ZkEvmL2TxnBatchesResponse, ZkEvmL2TxnBatchTxs } from 'types/api/zkEvmL2';
+import type {
+  ZkEvmL2DepositsResponse,
+  ZkEvmL2TxnBatch,
+  ZkEvmL2TxnBatchesItem,
+  ZkEvmL2TxnBatchesResponse,
+  ZkEvmL2TxnBatchTxs,
+  ZkEvmL2WithdrawalsResponse,
+} from 'types/api/zkEvmL2';
 import type { ZkSyncBatch, ZkSyncBatchesResponse, ZkSyncBatchTxs } from 'types/api/zkSyncL2';
 import type { MarketplaceAppOverview } from 'types/client/marketplace';
 import type { ArrayElement } from 'types/utils';
@@ -129,30 +169,26 @@ export const RESOURCES = {
     path: '/api/account/v2/email/resend',
   },
   custom_abi: {
-    path: '/api/account/v2/user/custom_abis/:id?',
+    path: '/api/account/v2/user/custom_abis{/:id}',
     pathParams: [ 'id' as const ],
   },
   watchlist: {
-    path: '/api/account/v2/user/watchlist/:id?',
+    path: '/api/account/v2/user/watchlist{/:id}',
     pathParams: [ 'id' as const ],
     filterFields: [ ],
   },
-  public_tags: {
-    path: '/api/account/v2/user/public_tags/:id?',
-    pathParams: [ 'id' as const ],
-  },
   private_tags_address: {
-    path: '/api/account/v2/user/tags/address/:id?',
+    path: '/api/account/v2/user/tags/address{/:id}',
     pathParams: [ 'id' as const ],
     filterFields: [ ],
   },
   private_tags_tx: {
-    path: '/api/account/v2/user/tags/transaction/:id?',
+    path: '/api/account/v2/user/tags/transaction{/:id}',
     pathParams: [ 'id' as const ],
     filterFields: [ ],
   },
   api_keys: {
-    path: '/api/account/v2/user/api_keys/:id?',
+    path: '/api/account/v2/user/api_keys{/:id}',
     pathParams: [ 'id' as const ],
   },
 
@@ -182,7 +218,7 @@ export const RESOURCES = {
   },
 
   token_info_applications: {
-    path: '/api/v1/chains/:chainId/token-info-submissions/:id?',
+    path: '/api/v1/chains/:chainId/token-info-submissions{/:id}',
     pathParams: [ 'chainId' as const, 'id' as const ],
     endpoint: getFeaturePayload(config.features.addressVerification)?.api.endpoint,
     basePath: getFeaturePayload(config.features.addressVerification)?.api.basePath,
@@ -213,7 +249,13 @@ export const RESOURCES = {
     pathParams: [ 'chainId' as const ],
     endpoint: getFeaturePayload(config.features.nameService)?.api.endpoint,
     basePath: getFeaturePayload(config.features.nameService)?.api.basePath,
-    filterFields: [ 'address' as const, 'resolved_to' as const, 'owned_by' as const, 'only_active' as const ],
+    filterFields: [ 'address' as const, 'resolved_to' as const, 'owned_by' as const, 'only_active' as const, 'protocols' as const ],
+  },
+  address_domain: {
+    path: '/api/v1/:chainId/addresses/:address',
+    pathParams: [ 'chainId' as const, 'address' as const ],
+    endpoint: getFeaturePayload(config.features.nameService)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.nameService)?.api.basePath,
   },
   domain_info: {
     path: '/api/v1/:chainId/domains/:name',
@@ -232,7 +274,36 @@ export const RESOURCES = {
     pathParams: [ 'chainId' as const ],
     endpoint: getFeaturePayload(config.features.nameService)?.api.endpoint,
     basePath: getFeaturePayload(config.features.nameService)?.api.basePath,
-    filterFields: [ 'name' as const, 'only_active' as const ],
+    filterFields: [ 'name' as const, 'only_active' as const, 'protocols' as const ],
+  },
+  domain_protocols: {
+    path: '/api/v1/:chainId/protocols',
+    pathParams: [ 'chainId' as const ],
+    endpoint: getFeaturePayload(config.features.nameService)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.nameService)?.api.basePath,
+  },
+
+  // METADATA SERVICE & PUBLIC TAGS
+  address_metadata_info: {
+    path: '/api/v1/metadata',
+    endpoint: getFeaturePayload(config.features.addressMetadata)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.addressMetadata)?.api.basePath,
+  },
+  address_metadata_tag_search: {
+    path: '/api/v1/tags:search',
+    endpoint: getFeaturePayload(config.features.addressMetadata)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.addressMetadata)?.api.basePath,
+  },
+  address_metadata_tag_types: {
+    path: '/api/v1/public-tag-types',
+    endpoint: getFeaturePayload(config.features.addressMetadata)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.addressMetadata)?.api.basePath,
+  },
+  public_tag_application: {
+    path: '/api/v1/chains/:chainId/metadata-submissions/tag',
+    pathParams: [ 'chainId' as const ],
+    endpoint: getFeaturePayload(config.features.publicTagsSubmission)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.publicTagsSubmission)?.api.basePath,
   },
 
   // VISUALIZATION
@@ -275,6 +346,19 @@ export const RESOURCES = {
     pathParams: [ 'height_or_hash' as const ],
     filterFields: [],
   },
+  block_epoch: {
+    path: '/api/v2/blocks/:height_or_hash/epoch',
+    pathParams: [ 'height_or_hash' as const ],
+    filterFields: [],
+  },
+  block_election_rewards: {
+    path: '/api/v2/blocks/:height_or_hash/election-rewards/:reward_type',
+    pathParams: [ 'height_or_hash' as const, 'reward_type' as const ],
+    filterFields: [],
+  },
+  txs_stats: {
+    path: '/api/v2/transactions/stats',
+  },
   txs_validated: {
     path: '/api/v2/transactions',
     filterFields: [ 'filter' as const, 'type' as const, 'method' as const ],
@@ -345,6 +429,10 @@ export const RESOURCES = {
     path: '/api/v2/addresses/',
     filterFields: [ ],
   },
+  addresses_metadata_search: {
+    path: '/api/v2/proxy/metadata/addresses',
+    filterFields: [ 'slug' as const, 'tag_type' as const ],
+  },
 
   // ADDRESS
   address: {
@@ -423,26 +511,6 @@ export const RESOURCES = {
     path: '/api/v2/smart-contracts/:hash',
     pathParams: [ 'hash' as const ],
   },
-  contract_methods_read: {
-    path: '/api/v2/smart-contracts/:hash/methods-read',
-    pathParams: [ 'hash' as const ],
-  },
-  contract_methods_read_proxy: {
-    path: '/api/v2/smart-contracts/:hash/methods-read-proxy',
-    pathParams: [ 'hash' as const ],
-  },
-  contract_method_query: {
-    path: '/api/v2/smart-contracts/:hash/query-read-method',
-    pathParams: [ 'hash' as const ],
-  },
-  contract_methods_write: {
-    path: '/api/v2/smart-contracts/:hash/methods-write',
-    pathParams: [ 'hash' as const ],
-  },
-  contract_methods_write_proxy: {
-    path: '/api/v2/smart-contracts/:hash/methods-write-proxy',
-    pathParams: [ 'hash' as const ],
-  },
   contract_verification_config: {
     path: '/api/v2/smart-contracts/verification/config',
   },
@@ -450,7 +518,7 @@ export const RESOURCES = {
     path: '/api/v2/smart-contracts/:hash/verification/via/:method',
     pathParams: [ 'hash' as const, 'method' as const ],
   },
-  contract_solidityscan_report: {
+  contract_solidity_scan_report: {
     path: '/api/v2/smart-contracts/:hash/solidityscan-report',
     pathParams: [ 'hash' as const ],
   },
@@ -525,6 +593,11 @@ export const RESOURCES = {
     pathParams: [ 'hash' as const, 'id' as const ],
     filterFields: [],
   },
+  token_instance_refresh_metadata: {
+    path: '/api/v2/tokens/:hash/instances/:id/refetch-metadata',
+    pathParams: [ 'hash' as const, 'id' as const ],
+    filterFields: [],
+  },
 
   // APP STATS
   stats: {
@@ -539,20 +612,29 @@ export const RESOURCES = {
   stats_charts_market: {
     path: '/api/v2/stats/charts/market',
   },
+  stats_charts_secondary_coin_price: {
+    path: '/api/v2/stats/charts/secondary-coin-market',
+  },
 
   // HOMEPAGE
   homepage_blocks: {
     path: '/api/v2/main-page/blocks',
   },
-  homepage_deposits: {
+  homepage_optimistic_deposits: {
     path: '/api/v2/main-page/optimism-deposits',
   },
+  homepage_arbitrum_deposits: {
+    path: '/api/v2/main-page/arbitrum/messages/to-rollup',
+  },
   homepage_txs: {
     path: '/api/v2/main-page/transactions',
   },
   homepage_zkevm_l2_batches: {
     path: '/api/v2/main-page/zkevm/batches/confirmed',
   },
+  homepage_arbitrum_l2_batches: {
+    path: '/api/v2/main-page/arbitrum/batches/committed',
+  },
   homepage_txs_watchlist: {
     path: '/api/v2/main-page/transactions/watchlist',
   },
@@ -565,6 +647,9 @@ export const RESOURCES = {
   homepage_zksync_latest_batch: {
     path: '/api/v2/main-page/zksync/batches/latest-number',
   },
+  homepage_arbitrum_latest_batch: {
+    path: '/api/v2/main-page/arbitrum/batches/latest-number',
+  },
 
   // SEARCH
   quick_search: {
@@ -580,43 +665,153 @@ export const RESOURCES = {
   },
 
   // optimistic L2
-  l2_deposits: {
+  optimistic_l2_deposits: {
     path: '/api/v2/optimism/deposits',
     filterFields: [],
   },
 
-  l2_deposits_count: {
+  optimistic_l2_deposits_count: {
     path: '/api/v2/optimism/deposits/count',
   },
 
-  l2_withdrawals: {
+  optimistic_l2_withdrawals: {
     path: '/api/v2/optimism/withdrawals',
     filterFields: [],
   },
 
-  l2_withdrawals_count: {
+  optimistic_l2_withdrawals_count: {
     path: '/api/v2/optimism/withdrawals/count',
   },
 
-  l2_output_roots: {
+  optimistic_l2_output_roots: {
     path: '/api/v2/optimism/output-roots',
     filterFields: [],
   },
 
-  l2_output_roots_count: {
+  optimistic_l2_output_roots_count: {
     path: '/api/v2/optimism/output-roots/count',
   },
 
-  l2_txn_batches: {
-    path: '/api/v2/optimism/txn-batches',
+  optimistic_l2_txn_batches: {
+    path: '/api/v2/optimism/batches',
+    filterFields: [],
+  },
+
+  optimistic_l2_txn_batches_count: {
+    path: '/api/v2/optimism/batches/count',
+  },
+
+  optimistic_l2_txn_batch: {
+    path: '/api/v2/optimism/batches/:number',
+    pathParams: [ 'number' as const ],
+  },
+
+  optimistic_l2_txn_batch_txs: {
+    path: '/api/v2/transactions/optimism-batch/:number',
+    pathParams: [ 'number' as const ],
+    filterFields: [],
+  },
+
+  optimistic_l2_txn_batch_blocks: {
+    path: '/api/v2/blocks/optimism-batch/:number',
+    pathParams: [ 'number' as const ],
+    filterFields: [],
+  },
+
+  optimistic_l2_dispute_games: {
+    path: '/api/v2/optimism/games',
+    filterFields: [],
+  },
+
+  optimistic_l2_dispute_games_count: {
+    path: '/api/v2/optimism/games/count',
+  },
+
+  // MUD worlds on optimism
+  mud_worlds: {
+    path: '/api/v2/mud/worlds',
+    filterFields: [],
+  },
+
+  address_mud_tables: {
+    path: '/api/v2/mud/worlds/:hash/tables',
+    pathParams: [ 'hash' as const ],
+    filterFields: [ 'q' as const ],
+  },
+
+  address_mud_tables_count: {
+    path: '/api/v2/mud/worlds/:hash/tables/count',
+    pathParams: [ 'hash' as const ],
+  },
+
+  address_mud_records: {
+    path: '/api/v2/mud/worlds/:hash/tables/:table_id/records',
+    pathParams: [ 'hash' as const, 'table_id' as const ],
+    filterFields: [ 'filter_key0' as const, 'filter_key1' as const ],
+  },
+
+  address_mud_record: {
+    path: '/api/v2/mud/worlds/:hash/tables/:table_id/records/:record_id',
+    pathParams: [ 'hash' as const, 'table_id' as const, 'record_id' as const ],
+  },
+
+  // arbitrum L2
+  arbitrum_l2_messages: {
+    path: '/api/v2/arbitrum/messages/:direction',
+    pathParams: [ 'direction' as const ],
+    filterFields: [],
+  },
+
+  arbitrum_l2_messages_count: {
+    path: '/api/v2/arbitrum/messages/:direction/count',
+    pathParams: [ 'direction' as const ],
+  },
+
+  arbitrum_l2_txn_batches: {
+    path: '/api/v2/arbitrum/batches',
+    filterFields: [],
+  },
+
+  arbitrum_l2_txn_batches_count: {
+    path: '/api/v2/arbitrum/batches/count',
+  },
+
+  arbitrum_l2_txn_batch: {
+    path: '/api/v2/arbitrum/batches/:number',
+    pathParams: [ 'number' as const ],
+  },
+
+  arbitrum_l2_txn_batch_txs: {
+    path: '/api/v2/transactions/arbitrum-batch/:number',
+    pathParams: [ 'number' as const ],
     filterFields: [],
   },
 
-  l2_txn_batches_count: {
-    path: '/api/v2/optimism/txn-batches/count',
+  arbitrum_l2_txn_batch_blocks: {
+    path: '/api/v2/blocks/arbitrum-batch/:number',
+    pathParams: [ 'number' as const ],
+    filterFields: [],
   },
 
   // zkEvm L2
+  zkevm_l2_deposits: {
+    path: '/api/v2/zkevm/deposits',
+    filterFields: [],
+  },
+
+  zkevm_l2_deposits_count: {
+    path: '/api/v2/zkevm/deposits/count',
+  },
+
+  zkevm_l2_withdrawals: {
+    path: '/api/v2/zkevm/withdrawals',
+    filterFields: [],
+  },
+
+  zkevm_l2_withdrawals_count: {
+    path: '/api/v2/zkevm/withdrawals/count',
+  },
+
   zkevm_l2_txn_batches: {
     path: '/api/v2/zkevm/batches',
     filterFields: [],
@@ -710,14 +905,19 @@ export const RESOURCES = {
   },
 
   // VALIDATORS
-  validators: {
-    path: '/api/v2/validators/:chainType',
-    pathParams: [ 'chainType' as const ],
+  validators_stability: {
+    path: '/api/v2/validators/stability',
     filterFields: [ 'address_hash' as const, 'state_filter' as const ],
   },
-  validators_counters: {
-    path: '/api/v2/validators/:chainType/counters',
-    pathParams: [ 'chainType' as const ],
+  validators_stability_counters: {
+    path: '/api/v2/validators/stability/counters',
+  },
+  validators_blackfort: {
+    path: '/api/v2/validators/blackfort',
+    filterFields: [],
+  },
+  validators_blackfort_counters: {
+    path: '/api/v2/validators/blackfort/counters',
   },
 
   // BLOBS
@@ -730,11 +930,21 @@ export const RESOURCES = {
   config_backend_version: {
     path: '/api/v2/config/backend-version',
   },
+  config_csv_export: {
+    path: '/api/v2/config/csv-export',
+  },
+
+  // CSV EXPORT
+  csv_export_token_holders: {
+    path: '/api/v2/tokens/:hash/holders/csv',
+    pathParams: [ 'hash' as const ],
+  },
 
   // OTHER
   api_v2_key: {
     path: '/api/v2/key',
   },
+
   universal_profile: {
     path: '',
   },
@@ -755,6 +965,9 @@ export const RESOURCES = {
   graphql: {
     path: '/api/v1/graphql',
   },
+  block_countdown: {
+    path: '/api',
+  },
 };
 
 export type ResourceName = keyof typeof RESOURCES;
@@ -787,23 +1000,26 @@ export interface ResourceError<T = unknown> {
 
 export type ResourceErrorAccount<T> = ResourceError<{ errors: T }>
 
-export type PaginatedResources = 'blocks' | 'block_txs' |
+export type PaginatedResources = 'blocks' | 'block_txs' | 'block_election_rewards' |
 'txs_validated' | 'txs_pending' | 'txs_with_blobs' | 'txs_watchlist' | 'txs_execution_node' |
 'tx_internal_txs' | 'tx_logs' | 'tx_token_transfers' | 'tx_state_changes' | 'tx_blobs' |
-'addresses' |
+'addresses' | 'addresses_metadata_search' |
 'address_txs' | 'address_internal_txs' | 'address_token_transfers' | 'address_blocks_validated' | 'address_coin_balance' |
 'search' |
 'address_logs' | 'address_tokens' | 'address_nfts' | 'address_collections' |
 'token_transfers' | 'token_holders' | 'token_inventory' | 'tokens' | 'tokens_bridged' |
 'token_instance_transfers' | 'token_instance_holders' |
 'verified_contracts' |
-'l2_output_roots' | 'l2_withdrawals' | 'l2_txn_batches' | 'l2_deposits' |
+'optimistic_l2_output_roots' | 'optimistic_l2_withdrawals' | 'optimistic_l2_txn_batches' | 'optimistic_l2_deposits' |
+'optimistic_l2_dispute_games' | 'optimistic_l2_txn_batch_txs' | 'optimistic_l2_txn_batch_blocks' |
+'mud_worlds'| 'address_mud_tables' | 'address_mud_records' |
 'shibarium_deposits' | 'shibarium_withdrawals' |
-'zkevm_l2_txn_batches' | 'zkevm_l2_txn_batch_txs' |
+'arbitrum_l2_messages' | 'arbitrum_l2_txn_batches' | 'arbitrum_l2_txn_batch_txs' | 'arbitrum_l2_txn_batch_blocks' |
+'zkevm_l2_deposits' | 'zkevm_l2_withdrawals' | 'zkevm_l2_txn_batches' | 'zkevm_l2_txn_batch_txs' |
 'zksync_l2_txn_batches' | 'zksync_l2_txn_batch_txs' |
 'withdrawals' | 'address_withdrawals' | 'block_withdrawals' |
 'watchlist' | 'private_tags_address' | 'private_tags_tx' |
-'domains_lookup' | 'addresses_lookup' | 'user_ops' | 'validators' | 'noves_address_history';
+'domains_lookup' | 'addresses_lookup' | 'user_ops' | 'validators_stability' | 'validators_blackfort' | 'noves_address_history';
 
 export type PaginatedResponse<Q extends PaginatedResources> = ResourcePayload<Q>;
 
@@ -814,7 +1030,6 @@ export type PaginatedResponse<Q extends PaginatedResources> = ResourcePayload<Q>
 export type ResourcePayloadA<Q extends ResourceName> =
 Q extends 'user_info' ? UserInfo :
 Q extends 'custom_abi' ? CustomAbis :
-Q extends 'public_tags' ? PublicTags :
 Q extends 'private_tags_address' ? AddressTagsResponse :
 Q extends 'private_tags_tx' ? TransactionTagsResponse :
 Q extends 'api_keys' ? ApiKeys :
@@ -825,21 +1040,29 @@ Q extends 'token_info_applications' ? TokenInfoApplications :
 Q extends 'stats' ? HomeStats :
 Q extends 'stats_charts_txs' ? ChartTransactionResponse :
 Q extends 'stats_charts_market' ? ChartMarketResponse :
+Q extends 'stats_charts_secondary_coin_price' ? ChartSecondaryCoinPriceResponse :
 Q extends 'homepage_blocks' ? Array<Block> :
 Q extends 'homepage_txs' ? Array<Transaction> :
 Q extends 'homepage_txs_watchlist' ? Array<Transaction> :
-Q extends 'homepage_deposits' ? Array<OptimisticL2DepositsItem> :
+Q extends 'homepage_optimistic_deposits' ? Array<OptimisticL2DepositsItem> :
+Q extends 'homepage_arbitrum_deposits' ? ArbitrumLatestDepositsResponse :
 Q extends 'homepage_zkevm_l2_batches' ? { items: Array<ZkEvmL2TxnBatchesItem> } :
+Q extends 'homepage_arbitrum_l2_batches' ? { items: Array<ArbitrumL2TxnBatchesItem>} :
 Q extends 'homepage_indexing_status' ? IndexingStatus :
 Q extends 'homepage_zkevm_latest_batch' ? number :
 Q extends 'homepage_zksync_latest_batch' ? number :
-Q extends 'stats_counters' ? Counters :
-Q extends 'stats_lines' ? StatsCharts :
-Q extends 'stats_line' ? StatsChart :
+Q extends 'homepage_arbitrum_latest_batch' ? number :
+Q extends 'stats_counters' ? stats.Counters :
+Q extends 'stats_lines' ? stats.LineCharts :
+Q extends 'stats_line' ? stats.LineChart :
 Q extends 'blocks' ? BlocksResponse :
 Q extends 'block' ? Block :
+Q extends 'block_countdown' ? BlockCountdownResponse :
 Q extends 'block_txs' ? BlockTransactionsResponse :
 Q extends 'block_withdrawals' ? BlockWithdrawalsResponse :
+Q extends 'block_epoch' ? BlockEpoch :
+Q extends 'block_election_rewards' ? BlockEpochElectionRewardDetailsResponse :
+Q extends 'txs_stats' ? TransactionsStats :
 Q extends 'txs_validated' ? TransactionsResponseValidated :
 Q extends 'txs_pending' ? TransactionsResponsePending :
 Q extends 'txs_with_blobs' ? TransactionsResponseWithBlobs :
@@ -854,6 +1077,7 @@ Q extends 'tx_state_changes' ? TxStateChanges :
 Q extends 'tx_blobs' ? TxBlobs :
 Q extends 'tx_interpretation' ? TxInterpretationResponse :
 Q extends 'addresses' ? AddressesResponse :
+Q extends 'addresses_metadata_search' ? AddressesMetadataSearchResult :
 Q extends 'address' ? Address :
 Q extends 'address_counters' ? AddressCounters :
 Q extends 'address_tabs_counters' ? AddressTabsCounters :
@@ -868,7 +1092,6 @@ Q extends 'address_tokens' ? AddressTokensResponse :
 Q extends 'address_nfts' ? AddressNFTsResponse :
 Q extends 'address_collections' ? AddressCollectionsResponse :
 Q extends 'address_withdrawals' ? AddressWithdrawalsResponse :
-Q extends 'universal_profile' ? Array<SearchResultItem> :
 Q extends 'token' ? TokenInfo :
 Q extends 'token_verified_info' ? TokenVerifiedInfo :
 Q extends 'token_counters' ? TokenCounters :
@@ -885,30 +1108,24 @@ Q extends 'quick_search' ? Array<SearchResultItem> :
 Q extends 'search' ? SearchResult :
 Q extends 'search_check_redirect' ? SearchRedirectResult :
 Q extends 'contract' ? SmartContract :
-Q extends 'contract_methods_read' ? Array<SmartContractReadMethod> :
-Q extends 'contract_methods_read_proxy' ? Array<SmartContractReadMethod> :
-Q extends 'contract_methods_write' ? Array<SmartContractWriteMethod> :
-Q extends 'contract_methods_write_proxy' ? Array<SmartContractWriteMethod> :
-Q extends 'contract_solidityscan_report' ? SolidityscanReport :
+Q extends 'contract_solidity_scan_report' ? unknown :
 Q extends 'verified_contracts' ? VerifiedContractsResponse :
 Q extends 'verified_contracts_counters' ? VerifiedContractsCounters :
-Q extends 'visualize_sol2uml' ? VisualizedContract :
-Q extends 'contract_verification_config' ? SmartContractVerificationConfig :
-Q extends 'withdrawals' ? WithdrawalsResponse :
-Q extends 'withdrawals_counters' ? WithdrawalsCounters :
-Q extends 'l2_output_roots' ? OptimisticL2OutputRootsResponse :
-Q extends 'l2_withdrawals' ? OptimisticL2WithdrawalsResponse :
-Q extends 'l2_deposits' ? OptimisticL2DepositsResponse :
-Q extends 'l2_txn_batches' ? OptimisticL2TxnBatchesResponse :
-Q extends 'l2_output_roots_count' ? number :
-Q extends 'l2_withdrawals_count' ? number :
-Q extends 'l2_deposits_count' ? number :
-Q extends 'l2_txn_batches_count' ? number :
-Q extends 'zkevm_l2_txn_batches' ? ZkEvmL2TxnBatchesResponse :
-Q extends 'zkevm_l2_txn_batches_count' ? number :
-Q extends 'zkevm_l2_txn_batch' ? ZkEvmL2TxnBatch :
-Q extends 'zkevm_l2_txn_batch_txs' ? ZkEvmL2TxnBatchTxs :
-Q extends 'config_backend_version' ? BackendVersionConfig :
+Q extends 'visualize_sol2uml' ? visualizer.VisualizeResponse :
+Q extends 'contract_verification_config' ? SmartContractVerificationConfigRaw :
+Q extends 'optimistic_l2_output_roots' ? OptimisticL2OutputRootsResponse :
+Q extends 'optimistic_l2_withdrawals' ? OptimisticL2WithdrawalsResponse :
+Q extends 'optimistic_l2_deposits' ? OptimisticL2DepositsResponse :
+Q extends 'optimistic_l2_txn_batches' ? OptimisticL2TxnBatchesResponse :
+Q extends 'optimistic_l2_txn_batches_count' ? number :
+Q extends 'optimistic_l2_txn_batch' ? OptimismL2TxnBatch :
+Q extends 'optimistic_l2_txn_batch_txs' ? OptimismL2BatchTxs :
+Q extends 'optimistic_l2_txn_batch_blocks' ? OptimismL2BatchBlocks :
+Q extends 'optimistic_l2_dispute_games' ? OptimisticL2DisputeGamesResponse :
+Q extends 'optimistic_l2_output_roots_count' ? number :
+Q extends 'optimistic_l2_withdrawals_count' ? number :
+Q extends 'optimistic_l2_deposits_count' ? number :
+Q extends 'optimistic_l2_dispute_games_count' ? number :
 never;
 // !!! IMPORTANT !!!
 // See comment above
@@ -916,24 +1133,47 @@ never;
 
 /* eslint-disable @typescript-eslint/indent */
 export type ResourcePayloadB<Q extends ResourceName> =
+Q extends 'config_backend_version' ? BackendVersionConfig :
+Q extends 'config_csv_export' ? CsvExportConfig :
+Q extends 'address_metadata_info' ? AddressMetadataInfo :
+Q extends 'address_metadata_tag_types' ? PublicTagTypesResponse :
 Q extends 'blob' ? Blob :
 Q extends 'marketplace_dapps' ? Array<MarketplaceAppOverview> :
 Q extends 'marketplace_dapp' ? MarketplaceAppOverview :
-Q extends 'validators' ? ValidatorsResponse :
-Q extends 'validators_counters' ? ValidatorsCountersResponse :
+Q extends 'validators_stability' ? ValidatorsStabilityResponse :
+Q extends 'validators_stability_counters' ? ValidatorsStabilityCountersResponse :
+Q extends 'validators_blackfort' ? ValidatorsBlackfortResponse :
+Q extends 'validators_blackfort_counters' ? ValidatorsBlackfortCountersResponse :
 Q extends 'shibarium_withdrawals' ? ShibariumWithdrawalsResponse :
 Q extends 'shibarium_deposits' ? ShibariumDepositsResponse :
 Q extends 'shibarium_withdrawals_count' ? number :
 Q extends 'shibarium_deposits_count' ? number :
+Q extends 'arbitrum_l2_messages' ? ArbitrumL2MessagesResponse :
+Q extends 'arbitrum_l2_messages_count' ? number :
+Q extends 'arbitrum_l2_txn_batches' ? ArbitrumL2TxnBatchesResponse :
+Q extends 'arbitrum_l2_txn_batches_count' ? number :
+Q extends 'arbitrum_l2_txn_batch' ? ArbitrumL2TxnBatch :
+Q extends 'arbitrum_l2_txn_batch_txs' ? ArbitrumL2BatchTxs :
+Q extends 'arbitrum_l2_txn_batch_blocks' ? ArbitrumL2BatchBlocks :
+Q extends 'zkevm_l2_deposits' ? ZkEvmL2DepositsResponse :
+Q extends 'zkevm_l2_deposits_count' ? number :
+Q extends 'zkevm_l2_withdrawals' ? ZkEvmL2WithdrawalsResponse :
+Q extends 'zkevm_l2_withdrawals_count' ? number :
+Q extends 'zkevm_l2_txn_batches' ? ZkEvmL2TxnBatchesResponse :
+Q extends 'zkevm_l2_txn_batches_count' ? number :
+Q extends 'zkevm_l2_txn_batch' ? ZkEvmL2TxnBatch :
+Q extends 'zkevm_l2_txn_batch_txs' ? ZkEvmL2TxnBatchTxs :
 Q extends 'zksync_l2_txn_batches' ? ZkSyncBatchesResponse :
 Q extends 'zksync_l2_txn_batches_count' ? number :
 Q extends 'zksync_l2_txn_batch' ? ZkSyncBatch :
 Q extends 'zksync_l2_txn_batch_txs' ? ZkSyncBatchTxs :
 Q extends 'contract_security_audits' ? SmartContractSecurityAudits :
-Q extends 'addresses_lookup' ? EnsAddressLookupResponse :
-Q extends 'domain_info' ? EnsDomainDetailed :
-Q extends 'domain_events' ? EnsDomainEventsResponse :
-Q extends 'domains_lookup' ? EnsDomainLookupResponse :
+Q extends 'addresses_lookup' ? bens.LookupAddressResponse :
+Q extends 'address_domain' ? bens.GetAddressResponse :
+Q extends 'domain_info' ? bens.DetailedDomain :
+Q extends 'domain_events' ? bens.ListDomainEventsResponse :
+Q extends 'domains_lookup' ? bens.LookupDomainNameResponse :
+Q extends 'domain_protocols' ? bens.GetProtocolsResponse :
 Q extends 'user_ops' ? UserOpsResponse :
 Q extends 'user_op' ? UserOp :
 Q extends 'user_ops_account' ? UserOpsAccount :
@@ -941,6 +1181,14 @@ Q extends 'user_op_interpretation'? TxInterpretationResponse :
 Q extends 'noves_transaction' ? NovesResponseData :
 Q extends 'noves_address_history' ? NovesAccountHistoryResponse :
 Q extends 'noves_describe_txs' ? NovesDescribeTxsResponse :
+Q extends 'mud_worlds' ? MudWorldsResponse :
+Q extends 'address_mud_tables' ? AddressMudTables :
+Q extends 'address_mud_tables_count' ? number :
+Q extends 'address_mud_records' ? AddressMudRecords :
+Q extends 'address_mud_record' ? AddressMudRecord :
+Q extends 'withdrawals' ? WithdrawalsResponse :
+Q extends 'withdrawals_counters' ? WithdrawalsCounters :
+Q extends 'universal_profile' ? Array<SearchResultItem>:
 never;
 /* eslint-enable @typescript-eslint/indent */
 
@@ -959,6 +1207,7 @@ Q extends 'txs_with_blobs' ? TTxsWithBlobsFilters :
 Q extends 'tx_token_transfers' ? TokenTransferFilters :
 Q extends 'token_transfers' ? TokenTransferFilters :
 Q extends 'address_txs' | 'address_internal_txs' ? AddressTxsFilters :
+Q extends 'addresses_metadata_search' ? AddressesMetadataSearchFilters :
 Q extends 'address_token_transfers' ? AddressTokenTransferFilters :
 Q extends 'address_tokens' ? AddressTokensFilter :
 Q extends 'address_nfts' ? AddressNFTTokensFilter :
@@ -971,7 +1220,9 @@ Q extends 'verified_contracts' ? VerifiedContractsFilters :
 Q extends 'addresses_lookup' ? EnsAddressLookupFilters :
 Q extends 'domains_lookup' ? EnsDomainLookupFilters :
 Q extends 'user_ops' ? UserOpsFilters :
-Q extends 'validators' ? ValidatorsFilters :
+Q extends 'validators_stability' ? ValidatorsStabilityFilters :
+Q extends 'address_mud_tables' ? AddressMudTablesFilter :
+Q extends 'address_mud_records' ? AddressMudRecordsFilter :
 never;
 /* eslint-enable @typescript-eslint/indent */
 
@@ -983,6 +1234,8 @@ Q extends 'verified_contracts' ? VerifiedContractsSorting :
 Q extends 'address_txs' ? TransactionsSorting :
 Q extends 'addresses_lookup' ? EnsLookupSorting :
 Q extends 'domains_lookup' ? EnsLookupSorting :
-Q extends 'validators' ? ValidatorsSorting :
+Q extends 'validators_stability' ? ValidatorsStabilitySorting :
+Q extends 'validators_blackfort' ? ValidatorsBlackfortSorting :
+Q extends 'address_mud_records' ? AddressMudRecordsSorting :
 never;
 /* eslint-enable @typescript-eslint/indent */
diff --git a/lib/api/useApiFetch.tsx b/lib/api/useApiFetch.tsx
index 85da773ab1..86e5fa9ea9 100644
--- a/lib/api/useApiFetch.tsx
+++ b/lib/api/useApiFetch.tsx
@@ -19,7 +19,7 @@ import type { ApiResource, ResourceName, ResourcePathParams } from './resources'
 
 export interface Params<R extends ResourceName> {
   pathParams?: ResourcePathParams<R>;
-  queryParams?: Record<string, string | Array<string> | number | boolean | undefined>;
+  queryParams?: Record<string, string | Array<string> | number | boolean | undefined | null>;
   fetchParams?: Pick<FetchParams, 'body' | 'method' | 'signal' | 'headers'>;
 }
 
diff --git a/lib/api/useApiInfiniteQuery.tsx b/lib/api/useApiInfiniteQuery.tsx
new file mode 100644
index 0000000000..fd663f1388
--- /dev/null
+++ b/lib/api/useApiInfiniteQuery.tsx
@@ -0,0 +1,43 @@
+import type { InfiniteData, QueryKey, UseInfiniteQueryResult } from '@tanstack/react-query';
+import { useInfiniteQuery, type UseInfiniteQueryOptions } from '@tanstack/react-query';
+
+import type { PaginatedResources, ResourceError, ResourcePayload } from 'lib/api/resources';
+import useApiFetch from 'lib/api/useApiFetch';
+import type { Params as ApiFetchParams } from 'lib/api/useApiFetch';
+
+import { getResourceKey } from './useApiQuery';
+
+type TQueryData<R extends PaginatedResources> = ResourcePayload<R>;
+type TError = ResourceError<unknown>;
+type TPageParam<R extends PaginatedResources> = ApiFetchParams<R>['queryParams'] | null;
+
+export interface Params<R extends PaginatedResources> {
+  resourceName: R;
+  // eslint-disable-next-line max-len
+  queryOptions?: Omit<UseInfiniteQueryOptions<TQueryData<R>, TError, InfiniteData<TQueryData<R>>, TQueryData<R>, QueryKey, TPageParam<R>>, 'queryKey' | 'queryFn' | 'getNextPageParam' | 'initialPageParam'>;
+  pathParams?: ApiFetchParams<R>['pathParams'];
+}
+
+type ReturnType<Resource extends PaginatedResources> = UseInfiniteQueryResult<InfiniteData<ResourcePayload<Resource>>, ResourceError<unknown>>;
+
+export default function useApiInfiniteQuery<R extends PaginatedResources>({
+  resourceName,
+  queryOptions,
+  pathParams,
+}: Params<R>): ReturnType<R> {
+  const apiFetch = useApiFetch();
+
+  return useInfiniteQuery<TQueryData<R>, TError, InfiniteData<TQueryData<R>>, QueryKey, TPageParam<R>>({
+    // eslint-disable-next-line @tanstack/query/exhaustive-deps
+    queryKey: getResourceKey(resourceName, { pathParams }),
+    queryFn: (context) => {
+      const queryParams = 'pageParam' in context ? (context.pageParam || undefined) : undefined;
+      return apiFetch(resourceName, { pathParams, queryParams }) as Promise<TQueryData<R>>;
+    },
+    initialPageParam: null,
+    getNextPageParam: (lastPage) => {
+      return lastPage.next_page_params as TPageParam<R>;
+    },
+    ...queryOptions,
+  });
+}
diff --git a/lib/api/useApiQuery.tsx b/lib/api/useApiQuery.tsx
index 0d28e70c54..925266680f 100644
--- a/lib/api/useApiQuery.tsx
+++ b/lib/api/useApiQuery.tsx
@@ -1,12 +1,16 @@
 import type { UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 
-import type { ResourceError, ResourceName, ResourcePayload } from './resources';
-import type { Params as ApiFetchParams } from './useApiFetch';
+import type { Params as FetchParams } from 'lib/hooks/useFetch';
+
+import type { ResourceError, ResourceName, ResourcePathParams, ResourcePayload } from './resources';
 import useApiFetch from './useApiFetch';
 
-export interface Params<R extends ResourceName, E = unknown> extends ApiFetchParams<R> {
-  queryOptions?: Omit<UseQueryOptions<ResourcePayload<R>, ResourceError<E>, ResourcePayload<R>>, 'queryKey' | 'queryFn'>;
+export interface Params<R extends ResourceName, E = unknown, D = ResourcePayload<R>> {
+  pathParams?: ResourcePathParams<R>;
+  queryParams?: Record<string, string | Array<string> | number | boolean | undefined>;
+  fetchParams?: Pick<FetchParams, 'body' | 'method' | 'headers'>;
+  queryOptions?: Partial<Omit<UseQueryOptions<ResourcePayload<R>, ResourceError<E>, D>, 'queryFn'>>;
 }
 
 export function getResourceKey<R extends ResourceName>(resource: R, { pathParams, queryParams }: Params<R> = {}) {
@@ -17,20 +21,20 @@ export function getResourceKey<R extends ResourceName>(resource: R, { pathParams
   return [ resource ];
 }
 
-export default function useApiQuery<R extends ResourceName, E = unknown>(
+export default function useApiQuery<R extends ResourceName, E = unknown, D = ResourcePayload<R>>(
   resource: R,
-  { queryOptions, pathParams, queryParams, fetchParams }: Params<R, E> = {},
+  { queryOptions, pathParams, queryParams, fetchParams }: Params<R, E, D> = {},
 ) {
   const apiFetch = useApiFetch();
 
-  return useQuery<ResourcePayload<R>, ResourceError<E>, ResourcePayload<R>>({
+  return useQuery<ResourcePayload<R>, ResourceError<E>, D>({
     // eslint-disable-next-line @tanstack/query/exhaustive-deps
-    queryKey: getResourceKey(resource, { pathParams, queryParams }),
-    queryFn: async() => {
+    queryKey: queryOptions?.queryKey || getResourceKey(resource, { pathParams, queryParams }),
+    queryFn: async({ signal }) => {
       // all errors and error typing is handled by react-query
       // so error response will never go to the data
       // that's why we are safe here to do type conversion "as Promise<ResourcePayload<R>>"
-      return apiFetch(resource, { pathParams, queryParams, fetchParams }) as Promise<ResourcePayload<R>>;
+      return apiFetch(resource, { pathParams, queryParams, fetchParams: { ...fetchParams, signal } }) as Promise<ResourcePayload<R>>;
     },
     ...queryOptions,
   });
diff --git a/lib/capitalizeFirstLetter.ts b/lib/capitalizeFirstLetter.ts
new file mode 100644
index 0000000000..ae054d9423
--- /dev/null
+++ b/lib/capitalizeFirstLetter.ts
@@ -0,0 +1,7 @@
+export default function capitalizeFirstLetter(text: string) {
+  if (!text || !text.length) {
+    return '';
+  }
+
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
diff --git a/lib/contexts/addressHighlight.tsx b/lib/contexts/addressHighlight.tsx
index 84f5f896ec..085e676ecc 100644
--- a/lib/contexts/addressHighlight.tsx
+++ b/lib/contexts/addressHighlight.tsx
@@ -60,9 +60,9 @@ export function AddressHighlightProvider({ children }: AddressHighlightProviderP
   );
 }
 
-export function useAddressHighlightContext() {
+export function useAddressHighlightContext(disabled?: boolean) {
   const context = React.useContext(AddressHighlightContext);
-  if (context === undefined) {
+  if (context === undefined || disabled) {
     return null;
   }
   return context;
diff --git a/lib/contexts/app.tsx b/lib/contexts/app.tsx
index 1d7c7bf8c3..dbeceace4d 100644
--- a/lib/contexts/app.tsx
+++ b/lib/contexts/app.tsx
@@ -1,5 +1,6 @@
 import React, { createContext, useContext } from 'react';
 
+import type { Route } from 'nextjs-routes';
 import type { Props as PageProps } from 'nextjs/getServerSideProps';
 
 type Props = {
@@ -10,13 +11,9 @@ type Props = {
 const AppContext = createContext<PageProps>({
   cookies: '',
   referrer: '',
-  id: '',
-  height_or_hash: '',
-  hash: '',
-  number: '',
-  q: '',
-  name: '',
-  adBannerProvider: '',
+  query: {},
+  adBannerProvider: null,
+  apiData: null,
 });
 
 export function AppContextProvider({ children, pageProps }: Props) {
@@ -27,6 +24,6 @@ export function AppContextProvider({ children, pageProps }: Props) {
   );
 }
 
-export function useAppContext() {
-  return useContext(AppContext);
+export function useAppContext<Pathname extends Route['pathname'] = never>() {
+  return useContext<PageProps<Pathname>>(AppContext);
 }
diff --git a/lib/contexts/chakra.tsx b/lib/contexts/chakra.tsx
index 49aa0971f2..151d893dce 100644
--- a/lib/contexts/chakra.tsx
+++ b/lib/contexts/chakra.tsx
@@ -6,11 +6,13 @@ import {
 import type { ChakraProviderProps } from '@chakra-ui/react';
 import React from 'react';
 
+import theme from 'theme/theme';
+
 interface Props extends ChakraProviderProps {
   cookies?: string;
 }
 
-export function ChakraProvider({ cookies, theme, children }: Props) {
+export function ChakraProvider({ cookies, children }: Props) {
   const colorModeManager =
       typeof cookies === 'string' ?
         cookieStorageManagerSSR(typeof document !== 'undefined' ? document.cookie : cookies) :
diff --git a/lib/contexts/marketplace.tsx b/lib/contexts/marketplace.tsx
new file mode 100644
index 0000000000..2aba76e39b
--- /dev/null
+++ b/lib/contexts/marketplace.tsx
@@ -0,0 +1,48 @@
+import { useRouter } from 'next/router';
+import React, { createContext, useContext, useEffect, useState, useMemo } from 'react';
+
+type Props = {
+  children: React.ReactNode;
+}
+
+type TMarketplaceContext = {
+  isAutoConnectDisabled: boolean;
+  setIsAutoConnectDisabled: (isAutoConnectDisabled: boolean) => void;
+}
+
+const MarketplaceContext = createContext<TMarketplaceContext>({
+  isAutoConnectDisabled: false,
+  setIsAutoConnectDisabled: () => {},
+});
+
+export function MarketplaceContextProvider({ children }: Props) {
+  const router = useRouter();
+  const [ isAutoConnectDisabled, setIsAutoConnectDisabled ] = useState(false);
+
+  useEffect(() => {
+    const handleRouteChange = () => {
+      setIsAutoConnectDisabled(false);
+    };
+
+    router.events.on('routeChangeStart', handleRouteChange);
+
+    return () => {
+      router.events.off('routeChangeStart', handleRouteChange);
+    };
+  }, [ router.events ]);
+
+  const value = useMemo(() => ({
+    isAutoConnectDisabled,
+    setIsAutoConnectDisabled,
+  }), [ isAutoConnectDisabled, setIsAutoConnectDisabled ]);
+
+  return (
+    <MarketplaceContext.Provider value={ value }>
+      { children }
+    </MarketplaceContext.Provider>
+  );
+}
+
+export function useMarketplaceContext() {
+  return useContext(MarketplaceContext);
+}
diff --git a/lib/date/dayjs.ts b/lib/date/dayjs.ts
index 06b53c01d6..e0191ce1e0 100644
--- a/lib/date/dayjs.ts
+++ b/lib/date/dayjs.ts
@@ -38,6 +38,7 @@ dayjs.extend(minMax);
 dayjs.updateLocale('en', {
   formats: {
     llll: `MMM DD YYYY HH:mm:ss A (Z${ nbsp }UTC)`,
+    lll: 'MMM D, YYYY h:mm A',
   },
   relativeTime: {
     s: '1s',
diff --git a/lib/getArbitrumVerificationStepStatus.ts b/lib/getArbitrumVerificationStepStatus.ts
new file mode 100644
index 0000000000..e86114d115
--- /dev/null
+++ b/lib/getArbitrumVerificationStepStatus.ts
@@ -0,0 +1,25 @@
+import type { ArbitrumBatchStatus, ArbitrumL2TxData } from 'types/api/arbitrumL2';
+
+type Args = {
+  status: ArbitrumBatchStatus;
+  commitment_transaction: ArbitrumL2TxData;
+  confirmation_transaction: ArbitrumL2TxData;
+}
+
+export default function getArbitrumVerificationStepStatus({
+  status,
+  commitment_transaction: commitTx,
+  confirmation_transaction: confirmTx,
+}: Args) {
+  if (status === 'Sent to base') {
+    if (commitTx.status === 'unfinalized') {
+      return 'pending';
+    }
+  }
+  if (status === 'Confirmed on base') {
+    if (confirmTx.status === 'unfinalized') {
+      return 'pending';
+    }
+  }
+  return 'finalized';
+}
diff --git a/lib/growthbook/init.ts b/lib/growthbook/init.ts
index 10674a4fcc..d98b2b94b7 100644
--- a/lib/growthbook/init.ts
+++ b/lib/growthbook/init.ts
@@ -7,7 +7,6 @@ import { STORAGE_KEY, STORAGE_LIMIT } from './consts';
 
 export interface GrowthBookFeatures {
   test_value: string;
-  security_score_exp: boolean;
 }
 
 export const growthBook = (() => {
diff --git a/lib/hooks/useAdblockDetect.tsx b/lib/hooks/useAdblockDetect.tsx
index e0ee312647..a3b42de1dd 100644
--- a/lib/hooks/useAdblockDetect.tsx
+++ b/lib/hooks/useAdblockDetect.tsx
@@ -1,22 +1,46 @@
 import { useEffect } from 'react';
 
+import type { AdBannerProviders } from 'types/client/adProviders';
+
+import config from 'configs/app';
 import { useAppContext } from 'lib/contexts/app';
 import * as cookies from 'lib/cookies';
 import isBrowser from 'lib/isBrowser';
 
+const DEFAULT_URL = 'https://request-global.czilladx.com';
+
+// in general, detect should work with any ad-provider url (that is alive)
+// but we see some false-positive results in certain browsers
+const TEST_URLS: Record<AdBannerProviders, string> = {
+  slise: 'https://v1.slise.xyz/serve',
+  coinzilla: 'https://request-global.czilladx.com',
+  adbutler: 'https://servedbyadbutler.com/app.js',
+  hype: 'https://api.hypelab.com/v1/scripts/hp-sdk.js',
+  // I don't have an url for getit to test
+  // getit: DEFAULT_URL,
+  none: DEFAULT_URL,
+};
+
+const feature = config.features.adsBanner;
+
 export default function useAdblockDetect() {
   const hasAdblockCookie = cookies.get(cookies.NAMES.ADBLOCK_DETECTED, useAppContext().cookies);
+  const provider = feature.isEnabled && feature.provider;
 
   useEffect(() => {
-    if (isBrowser() && !hasAdblockCookie) {
-      const url = 'https://request-global.czilladx.com';
+    if (isBrowser() && !hasAdblockCookie && provider) {
+      const url = TEST_URLS[provider] || DEFAULT_URL;
       fetch(url, {
         method: 'HEAD',
         mode: 'no-cors',
         cache: 'no-store',
-      }).catch(() => {
-        cookies.set(cookies.NAMES.ADBLOCK_DETECTED, 'true', { expires: 1 });
-      });
+      })
+        .then(() => {
+          cookies.set(cookies.NAMES.ADBLOCK_DETECTED, 'false', { expires: 1 });
+        })
+        .catch(() => {
+          cookies.set(cookies.NAMES.ADBLOCK_DETECTED, 'true', { expires: 1 });
+        });
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
diff --git a/lib/hooks/useContractTabs.tsx b/lib/hooks/useContractTabs.tsx
index ca02f16ddd..24667f69a1 100644
--- a/lib/hooks/useContractTabs.tsx
+++ b/lib/hooks/useContractTabs.tsx
@@ -1,37 +1,143 @@
+import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { Address } from 'types/api/address';
 
+import useApiQuery from 'lib/api/useApiQuery';
+import * as cookies from 'lib/cookies';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import * as stubs from 'stubs/contract';
 import ContractCode from 'ui/address/contract/ContractCode';
-import ContractRead from 'ui/address/contract/ContractRead';
-import ContractWrite from 'ui/address/contract/ContractWrite';
+import ContractMethodsCustom from 'ui/address/contract/methods/ContractMethodsCustom';
+import ContractMethodsProxy from 'ui/address/contract/methods/ContractMethodsProxy';
+import ContractMethodsRegular from 'ui/address/contract/methods/ContractMethodsRegular';
+import { divideAbiIntoMethodTypes } from 'ui/address/contract/methods/utils';
+
+const CONTRACT_TAB_IDS = [
+  'contract_code',
+  'read_contract',
+  'read_contract_rpc',
+  'read_proxy',
+  'read_custom_methods',
+  'write_contract',
+  'write_contract_rpc',
+  'write_proxy',
+  'write_custom_methods',
+] as const;
+
+interface ContractTab {
+  id: typeof CONTRACT_TAB_IDS[number];
+  title: string;
+  component: JSX.Element;
+}
+
+interface ReturnType {
+  tabs: Array<ContractTab>;
+  isLoading: boolean;
+}
+
+export default function useContractTabs(data: Address | undefined, isPlaceholderData: boolean): ReturnType {
+  const [ isQueryEnabled, setIsQueryEnabled ] = React.useState(false);
+
+  const router = useRouter();
+  const tab = getQueryParamString(router.query.tab);
+
+  const isEnabled = Boolean(data?.hash) && data?.is_contract && !isPlaceholderData && CONTRACT_TAB_IDS.concat('contract' as never).includes(tab);
+
+  const enableQuery = React.useCallback(() => {
+    setIsQueryEnabled(true);
+  }, []);
+
+  const contractQuery = useApiQuery('contract', {
+    pathParams: { hash: data?.hash },
+    queryOptions: {
+      enabled: isEnabled && isQueryEnabled,
+      refetchOnMount: false,
+      placeholderData: data?.is_verified ? stubs.CONTRACT_CODE_VERIFIED : stubs.CONTRACT_CODE_UNVERIFIED,
+    },
+  });
+
+  const customAbiQuery = useApiQuery('custom_abi', {
+    queryOptions: {
+      enabled: isEnabled && isQueryEnabled && Boolean(cookies.get(cookies.NAMES.API_TOKEN)),
+      refetchOnMount: false,
+    },
+  });
+
+  const channel = useSocketChannel({
+    topic: `addresses:${ data?.hash?.toLowerCase() }`,
+    isDisabled: !isEnabled,
+    onJoin: enableQuery,
+    onSocketError: enableQuery,
+  });
+
+  const methods = React.useMemo(() => divideAbiIntoMethodTypes(contractQuery.data?.abi ?? []), [ contractQuery.data?.abi ]);
+  const methodsCustomAbi = React.useMemo(() => {
+    return divideAbiIntoMethodTypes(
+      customAbiQuery.data
+        ?.find((item) => data && item.contract_address_hash.toLowerCase() === data.hash.toLowerCase())
+        ?.abi ??
+        [],
+    );
+  }, [ customAbiQuery.data, data ]);
+
+  const verifiedImplementations = React.useMemo(() => {
+    return data?.implementations?.filter(({ name, address }) => name && address && address !== data?.hash) || [];
+  }, [ data?.hash, data?.implementations ]);
 
-export default function useContractTabs(data: Address | undefined) {
   return React.useMemo(() => {
-    return [
-      { id: 'contact_code', title: 'Code', component: <ContractCode addressHash={ data?.hash }/> },
-      // this is not implemented in api yet
-      // data?.has_decompiled_code ?
-      //   { id: 'contact_decompiled_code', title: 'Decompiled code', component: <div>Decompiled code</div> } :
-      //   undefined,
-      data?.has_methods_read ?
-        { id: 'read_contract', title: 'Read contract', component: <ContractRead/> } :
-        undefined,
-      data?.has_methods_read_proxy ?
-        { id: 'read_proxy', title: 'Read proxy', component: <ContractRead/> } :
-        undefined,
-      data?.has_custom_methods_read ?
-        { id: 'read_custom_methods', title: 'Read custom', component: <ContractRead/> } :
-        undefined,
-      data?.has_methods_write ?
-        { id: 'write_contract', title: 'Write contract', component: <ContractWrite/> } :
-        undefined,
-      data?.has_methods_write_proxy ?
-        { id: 'write_proxy', title: 'Write proxy', component: <ContractWrite/> } :
-        undefined,
-      data?.has_custom_methods_write ?
-        { id: 'write_custom_methods', title: 'Write custom', component: <ContractWrite/> } :
-        undefined,
-    ].filter(Boolean);
-  }, [ data ]);
+    return {
+      tabs: [
+        {
+          id: 'contract_code' as const,
+          title: 'Code',
+          component: <ContractCode contractQuery={ contractQuery } channel={ channel } addressHash={ data?.hash }/>,
+        },
+        methods.read.length > 0 && {
+          id: 'read_contract' as const,
+          title: 'Read contract',
+          component: <ContractMethodsRegular type="read" abi={ methods.read } isLoading={ contractQuery.isPlaceholderData }/>,
+        },
+        methodsCustomAbi.read.length > 0 && {
+          id: 'read_custom_methods' as const,
+          title: 'Read custom',
+          component: <ContractMethodsCustom type="read" abi={ methodsCustomAbi.read } isLoading={ contractQuery.isPlaceholderData }/>,
+        },
+        verifiedImplementations.length > 0 && {
+          id: 'read_proxy' as const,
+          title: 'Read proxy',
+          component: (
+            <ContractMethodsProxy
+              type="read"
+              implementations={ verifiedImplementations }
+              isLoading={ contractQuery.isPlaceholderData }
+            />
+          ),
+        },
+        methods.write.length > 0 && {
+          id: 'write_contract' as const,
+          title: 'Write contract',
+          component: <ContractMethodsRegular type="write" abi={ methods.write } isLoading={ contractQuery.isPlaceholderData }/>,
+        },
+        methodsCustomAbi.write.length > 0 && {
+          id: 'write_custom_methods' as const,
+          title: 'Write custom',
+          component: <ContractMethodsCustom type="write" abi={ methodsCustomAbi.write } isLoading={ contractQuery.isPlaceholderData }/>,
+        },
+        verifiedImplementations.length > 0 && {
+          id: 'write_proxy' as const,
+          title: 'Write proxy',
+          component: (
+            <ContractMethodsProxy
+              type="write"
+              implementations={ verifiedImplementations }
+              isLoading={ contractQuery.isPlaceholderData }
+            />
+          ),
+        },
+      ].filter(Boolean),
+      isLoading: contractQuery.isPlaceholderData,
+    };
+  }, [ contractQuery, channel, data?.hash, verifiedImplementations, methods.read, methods.write, methodsCustomAbi.read, methodsCustomAbi.write ]);
 }
diff --git a/lib/hooks/useIsMounted.tsx b/lib/hooks/useIsMounted.tsx
new file mode 100644
index 0000000000..d14880ae1b
--- /dev/null
+++ b/lib/hooks/useIsMounted.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default function useIsMounted() {
+  const [ isMounted, setIsMounted ] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsMounted(true);
+  }, [ ]);
+
+  return isMounted;
+}
diff --git a/lib/hooks/useLazyRenderedList.tsx b/lib/hooks/useLazyRenderedList.tsx
index 245d8a0b0b..3f2d828fe0 100644
--- a/lib/hooks/useLazyRenderedList.tsx
+++ b/lib/hooks/useLazyRenderedList.tsx
@@ -5,12 +5,12 @@ import { useInView } from 'react-intersection-observer';
 const STEP = 10;
 const MIN_ITEMS_NUM = 50;
 
-export default function useLazyRenderedList(list: Array<unknown>, isEnabled: boolean) {
-  const [ renderedItemsNum, setRenderedItemsNum ] = React.useState(MIN_ITEMS_NUM);
+export default function useLazyRenderedList(list: Array<unknown>, isEnabled: boolean, minItemsNum: number = MIN_ITEMS_NUM) {
+  const [ renderedItemsNum, setRenderedItemsNum ] = React.useState(minItemsNum);
   const { ref, inView } = useInView({
     rootMargin: '200px',
     triggerOnce: false,
-    skip: !isEnabled || list.length <= MIN_ITEMS_NUM,
+    skip: !isEnabled || list.length <= minItemsNum,
   });
 
   React.useEffect(() => {
diff --git a/lib/hooks/useNavItems.tsx b/lib/hooks/useNavItems.tsx
index f3f40fc038..b1a0bf5245 100644
--- a/lib/hooks/useNavItems.tsx
+++ b/lib/hooks/useNavItems.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { NavItemInternal, NavItem, NavGroupItem } from 'types/client/navigation-items';
+import type { NavItemInternal, NavItem, NavGroupItem } from 'types/client/navigation';
 
 import config from 'configs/app';
 import { rightLineArrow } from 'lib/html-entities';
@@ -72,48 +72,62 @@ export default function useNavItems(): ReturnType {
       icon: 'validator',
       isActive: pathname === '/validators',
     } : null;
+    const rollupDeposits = {
+      text: `Deposits (L1${ rightLineArrow }L2)`,
+      nextRoute: { pathname: '/deposits' as const },
+      icon: 'arrows/south-east',
+      isActive: pathname === '/deposits',
+    };
+    const rollupWithdrawals = {
+      text: `Withdrawals (L2${ rightLineArrow }L1)`,
+      nextRoute: { pathname: '/withdrawals' as const },
+      icon: 'arrows/north-east',
+      isActive: pathname === '/withdrawals',
+    };
+    const rollupTxnBatches = {
+      text: 'Txn batches',
+      nextRoute: { pathname: '/batches' as const },
+      icon: 'txn_batches',
+      isActive: pathname === '/batches',
+    };
+    const rollupOutputRoots = {
+      text: 'Output roots',
+      nextRoute: { pathname: '/output-roots' as const },
+      icon: 'output_roots',
+      isActive: pathname === '/output-roots',
+    };
+    const rollupDisputeGames = config.features.faultProofSystem.isEnabled ? {
+      text: 'Dispute games',
+      nextRoute: { pathname: '/dispute-games' as const },
+      icon: 'games',
+      isActive: pathname === '/dispute-games',
+    } : null;
+    const mudWorlds = config.features.mudFramework.isEnabled ? {
+      text: 'MUD worlds',
+      nextRoute: { pathname: '/mud-worlds' as const },
+      icon: 'MUD_menu',
+      isActive: pathname === '/mud-worlds',
+    } : null;
 
     const rollupFeature = config.features.rollup;
 
-    if (rollupFeature.isEnabled && rollupFeature.type === 'zkEvm') {
-      blockchainNavItems = [
-        [
-          txs,
-          userOps,
-          blocks,
-          {
-            text: 'Txn batches',
-            nextRoute: { pathname: '/batches' as const },
-            icon: 'txn_batches',
-            isActive: pathname === '/batches' || pathname === '/batches/[number]',
-          },
-        ].filter(Boolean),
-        [
-          topAccounts,
-          validators,
-          verifiedContracts,
-          ensLookup,
-        ].filter(Boolean),
-      ];
-    } else if (rollupFeature.isEnabled && rollupFeature.type === 'optimistic') {
+    if (rollupFeature.isEnabled && (rollupFeature.type === 'optimistic' || rollupFeature.type === 'arbitrum' || rollupFeature.type === 'zkEvm')) {
       blockchainNavItems = [
         [
           txs,
-          // eslint-disable-next-line max-len
-          { text: `Deposits (L1${ rightLineArrow }L2)`, nextRoute: { pathname: '/deposits' as const }, icon: 'arrows/south-east', isActive: pathname === '/deposits' },
-          // eslint-disable-next-line max-len
-          { text: `Withdrawals (L2${ rightLineArrow }L1)`, nextRoute: { pathname: '/withdrawals' as const }, icon: 'arrows/north-east', isActive: pathname === '/withdrawals' },
+          rollupDeposits,
+          rollupWithdrawals,
         ],
         [
           blocks,
-          // eslint-disable-next-line max-len
-          { text: 'Txn batches', nextRoute: { pathname: '/batches' as const }, icon: 'txn_batches', isActive: pathname === '/batches' },
-          // eslint-disable-next-line max-len
-          { text: 'Output roots', nextRoute: { pathname: '/output-roots' as const }, icon: 'output_roots', isActive: pathname === '/output-roots' },
-        ],
+          rollupTxnBatches,
+          rollupDisputeGames,
+          rollupFeature.type === 'optimistic' ? rollupOutputRoots : undefined,
+        ].filter(Boolean),
         [
           userOps,
           topAccounts,
+          mudWorlds,
           validators,
           verifiedContracts,
           ensLookup,
@@ -123,10 +137,8 @@ export default function useNavItems(): ReturnType {
       blockchainNavItems = [
         [
           txs,
-          // eslint-disable-next-line max-len
-          { text: `Deposits (L1${ rightLineArrow }L2)`, nextRoute: { pathname: '/deposits' as const }, icon: 'arrows/south-east', isActive: pathname === '/deposits' },
-          // eslint-disable-next-line max-len
-          { text: `Withdrawals (L2${ rightLineArrow }L1)`, nextRoute: { pathname: '/withdrawals' as const }, icon: 'arrows/north-east', isActive: pathname === '/withdrawals' },
+          rollupDeposits,
+          rollupWithdrawals,
         ],
         [
           blocks,
@@ -142,12 +154,7 @@ export default function useNavItems(): ReturnType {
           txs,
           userOps,
           blocks,
-          {
-            text: 'Txn batches',
-            nextRoute: { pathname: '/batches' as const },
-            icon: 'txn_batches',
-            isActive: pathname === '/batches' || pathname === '/batches/[number]',
-          },
+          rollupTxnBatches,
         ].filter(Boolean),
         [
           topAccounts,
@@ -187,18 +194,37 @@ export default function useNavItems(): ReturnType {
         icon: 'graphQL',
         isActive: pathname === '/graphiql',
       } : null,
-      !config.UI.sidebar.hiddenLinks?.rpc_api && {
+      !config.UI.navigation.hiddenLinks?.rpc_api && {
         text: 'RPC API',
         icon: 'RPC',
         url: 'https://docs.blockscout.com/for-users/api/rpc-endpoints',
       },
-      !config.UI.sidebar.hiddenLinks?.eth_rpc_api && {
+      !config.UI.navigation.hiddenLinks?.eth_rpc_api && {
         text: 'Eth RPC API',
         icon: 'RPC',
         url: ' https://docs.blockscout.com/for-users/api/eth-rpc',
       },
     ].filter(Boolean);
 
+    const otherNavItems: Array<NavItem> | Array<Array<NavItem>> = [
+      {
+        text: 'Verify contract',
+        nextRoute: { pathname: '/contract-verification' as const },
+        isActive: pathname.startsWith('/contract-verification'),
+      },
+      config.features.gasTracker.isEnabled && {
+        text: 'Gas tracker',
+        nextRoute: { pathname: '/gas-tracker' as const },
+        isActive: pathname.startsWith('/gas-tracker'),
+      },
+      config.features.publicTagsSubmission.isEnabled && {
+        text: 'Submit public tag',
+        nextRoute: { pathname: '/public-tags/submit' as const },
+        isActive: pathname.startsWith('/public-tags/submit'),
+      },
+      ...config.UI.navigation.otherLinks,
+    ].filter(Boolean);
+
     const mainNavItems: ReturnType['mainNavItems'] = [
       {
         text: 'Blockchain',
@@ -233,19 +259,8 @@ export default function useNavItems(): ReturnType {
       {
         text: 'Other',
         icon: 'gear',
-        subItems: [
-          {
-            text: 'Verify contract',
-            nextRoute: { pathname: '/contract-verification' as const },
-            isActive: pathname.startsWith('/contract-verification'),
-          },
-          config.features.gasTracker.isEnabled && {
-            text: 'Gas tracker',
-            nextRoute: { pathname: '/gas-tracker' as const },
-            isActive: pathname.startsWith('/gas-tracker'),
-          },
-          ...config.UI.sidebar.otherLinks,
-        ].filter(Boolean),
+        isActive: otherNavItems.flat().some(item => isInternalItem(item) && item.isActive),
+        subItems: otherNavItems,
       },
     ].filter(Boolean);
 
@@ -262,12 +277,6 @@ export default function useNavItems(): ReturnType {
         icon: 'privattags',
         isActive: pathname === '/account/tag-address',
       },
-      {
-        text: 'Public tags',
-        nextRoute: { pathname: '/account/public-tags-request' as const },
-        icon: 'publictags',
-        isActive: pathname === '/account/public-tags-request',
-      },
       {
         text: 'API keys',
         nextRoute: { pathname: '/account/api-key' as const },
diff --git a/lib/hooks/useNewTxsSocket.tsx b/lib/hooks/useNewTxsSocket.tsx
index bedae0049d..576ecec46f 100644
--- a/lib/hooks/useNewTxsSocket.tsx
+++ b/lib/hooks/useNewTxsSocket.tsx
@@ -57,11 +57,11 @@ export default function useNewTxsSocket() {
   }, [ setNum ]);
 
   const handleSocketClose = React.useCallback(() => {
-    setSocketAlert('Connection is lost. Please reload page.');
+    setSocketAlert('Connection is lost. Please reload the page.');
   }, []);
 
   const handleSocketError = React.useCallback(() => {
-    setSocketAlert('An error has occurred while fetching new transactions. Please reload page.');
+    setSocketAlert('An error has occurred while fetching new transactions. Please reload the page.');
   }, []);
 
   const channel = useSocketChannel({
diff --git a/lib/hooks/useTimeAgoIncrement.tsx b/lib/hooks/useTimeAgoIncrement.tsx
index 270bada27e..2429528e87 100644
--- a/lib/hooks/useTimeAgoIncrement.tsx
+++ b/lib/hooks/useTimeAgoIncrement.tsx
@@ -19,7 +19,7 @@ function getUnits(diff: number) {
   return [ DAY, 2 * DAY ];
 }
 
-function getUpdateParams(ts: string) {
+function getUpdateParams(ts: string | number) {
   const timeDiff = Date.now() - new Date(ts).getTime();
   const [ unit, higherUnit ] = getUnits(timeDiff);
 
@@ -41,7 +41,7 @@ function getUpdateParams(ts: string) {
   };
 }
 
-export default function useTimeAgoIncrement(ts: string | null, isEnabled?: boolean) {
+export default function useTimeAgoIncrement(ts: string | number | null, isEnabled?: boolean) {
   const [ value, setValue ] = React.useState(ts ? dayjs(ts).fromNow() : null);
 
   React.useEffect(() => {
@@ -78,6 +78,8 @@ export default function useTimeAgoIncrement(ts: string | null, isEnabled?: boole
 
       isEnabled && startIncrement();
 
+      !isEnabled && setValue(dayjs(ts).fromNow());
+
       return () => {
         timeouts.forEach(window.clearTimeout);
         intervals.forEach(window.clearInterval);
diff --git a/lib/hooks/useToast.tsx b/lib/hooks/useToast.tsx
index 4110c513c1..7afc6f3e11 100644
--- a/lib/hooks/useToast.tsx
+++ b/lib/hooks/useToast.tsx
@@ -2,7 +2,7 @@ import type { UseToastOptions, ToastProps } from '@chakra-ui/react';
 import { createToastFn, useChakra } from '@chakra-ui/react';
 import React from 'react';
 
-import Toast from 'ui/shared/Toast';
+import Toast from 'ui/shared/chakra/Toast';
 
 // there is no toastComponent prop in UseToastOptions type
 // but these options will be passed to createRenderToast under the hood
@@ -12,8 +12,10 @@ const defaultOptions: UseToastOptions & { toastComponent?: React.FC<ToastProps>
   position: 'top-right',
   isClosable: true,
   containerStyle: {
-    margin: 8,
+    margin: 3,
+    marginBottom: 0,
   },
+  variant: 'subtle',
 };
 
 export default function useToastModified() {
diff --git a/lib/html-entities.ts b/lib/html-entities.ts
index 8df513b51d..1163ee9338 100644
--- a/lib/html-entities.ts
+++ b/lib/html-entities.ts
@@ -23,3 +23,4 @@ export const apos = String.fromCharCode(39); // apostrophe '
 export const shift = String.fromCharCode(8679); // upwards white arrow ⇧
 export const cmd = String.fromCharCode(8984); // place of interest sign ⌘
 export const alt = String.fromCharCode(9095); // alternate key symbol ⎇
+export const copy = String.fromCharCode(169); // copyright symbol ©
diff --git a/lib/makePrettyLink.ts b/lib/makePrettyLink.ts
new file mode 100644
index 0000000000..9e05a2d660
--- /dev/null
+++ b/lib/makePrettyLink.ts
@@ -0,0 +1,9 @@
+export default function makePrettyLink(url: string | undefined): { url: string; domain: string } | undefined {
+  try {
+    const urlObj = new URL(url ?? '');
+    return {
+      url: urlObj.href,
+      domain: urlObj.hostname,
+    };
+  } catch (error) {}
+}
diff --git a/lib/metadata/__snapshots__/generate.test.ts.snap b/lib/metadata/__snapshots__/generate.test.ts.snap
index de88a039ef..a664df8d20 100644
--- a/lib/metadata/__snapshots__/generate.test.ts.snap
+++ b/lib/metadata/__snapshots__/generate.test.ts.snap
@@ -2,6 +2,7 @@
 
 exports[`generates correct metadata for: dynamic route 1`] = `
 {
+  "canonical": undefined,
   "description": "View transaction 0x12345 on Blockscout (Blockscout) Explorer",
   "opengraph": {
     "description": "",
@@ -14,6 +15,7 @@ exports[`generates correct metadata for: dynamic route 1`] = `
 
 exports[`generates correct metadata for: dynamic route with API data 1`] = `
 {
+  "canonical": undefined,
   "description": "0x12345, balances and analytics on the Blockscout (Blockscout) Explorer",
   "opengraph": {
     "description": "",
@@ -26,12 +28,13 @@ exports[`generates correct metadata for: dynamic route with API data 1`] = `
 
 exports[`generates correct metadata for: static route 1`] = `
 {
+  "canonical": "http://localhost:3000/txs",
   "description": "Blockscout is the #1 open-source blockchain explorer available today. 100+ chains and counting rely on Blockscout data availability, APIs, and ecosystem tools to support their networks.",
   "opengraph": {
     "description": "",
     "imageUrl": "http://localhost:3000/static/og_placeholder.png",
-    "title": "Blockscout blocks | Blockscout",
+    "title": "Blockscout transactions - Blockscout explorer | Blockscout",
   },
-  "title": "Blockscout blocks | Blockscout",
+  "title": "Blockscout transactions - Blockscout explorer | Blockscout",
 }
 `;
diff --git a/lib/metadata/generate.test.ts b/lib/metadata/generate.test.ts
index 5a37e98fe0..f2cd05dcc1 100644
--- a/lib/metadata/generate.test.ts
+++ b/lib/metadata/generate.test.ts
@@ -4,26 +4,29 @@ import type { Route } from 'nextjs-routes';
 
 import generate from './generate';
 
-interface TestCase<R extends Route> {
+interface TestCase<Pathname extends Route['pathname']> {
   title: string;
-  route: R;
-  apiData?: ApiData<R>;
+  route: {
+    pathname: Pathname;
+    query?: Route['query'];
+  };
+  apiData?: ApiData<Pathname>;
 }
 
-const TEST_CASES: Array<TestCase<Route>> = [
+const TEST_CASES = [
   {
     title: 'static route',
     route: {
-      pathname: '/blocks',
+      pathname: '/txs',
     },
-  },
+  } as TestCase<'/txs'>,
   {
     title: 'dynamic route',
     route: {
       pathname: '/tx/[hash]',
       query: { hash: '0x12345' },
     },
-  },
+  } as TestCase<'/tx/[hash]'>,
   {
     title: 'dynamic route with API data',
     route: {
@@ -31,7 +34,7 @@ const TEST_CASES: Array<TestCase<Route>> = [
       query: { hash: '0x12345' },
     },
     apiData: { symbol: 'USDT' },
-  } as TestCase<{ pathname: '/token/[hash]'; query: { hash: string }}>,
+  } as TestCase<'/token/[hash]'>,
 ];
 
 describe('generates correct metadata for:', () => {
diff --git a/lib/metadata/generate.ts b/lib/metadata/generate.ts
index 8d24fd1606..9282da7fe7 100644
--- a/lib/metadata/generate.ts
+++ b/lib/metadata/generate.ts
@@ -1,4 +1,5 @@
 import type { ApiData, Metadata } from './types';
+import type { RouteParams } from 'nextjs/types';
 
 import type { Route } from 'nextjs-routes';
 
@@ -6,10 +7,11 @@ import config from 'configs/app';
 import getNetworkTitle from 'lib/networks/getNetworkTitle';
 
 import compileValue from './compileValue';
+import getCanonicalUrl from './getCanonicalUrl';
 import getPageOgType from './getPageOgType';
 import * as templates from './templates';
 
-export default function generate<R extends Route>(route: R, apiData?: ApiData<R>): Metadata {
+export default function generate<Pathname extends Route['pathname']>(route: RouteParams<Pathname>, apiData: ApiData<Pathname> = null): Metadata {
   const params = {
     ...route.query,
     ...apiData,
@@ -17,8 +19,7 @@ export default function generate<R extends Route>(route: R, apiData?: ApiData<R>
     network_title: getNetworkTitle(),
   };
 
-  const compiledTitle = compileValue(templates.title.make(route.pathname), params);
-  const title = compiledTitle ? compiledTitle + (config.meta.promoteBlockscoutInTitle ? ' | Blockscout' : '') : '';
+  const title = compileValue(templates.title.make(route.pathname, Boolean(apiData)), params);
   const description = compileValue(templates.description.make(route.pathname), params);
 
   const pageOgType = getPageOgType(route.pathname);
@@ -31,5 +32,6 @@ export default function generate<R extends Route>(route: R, apiData?: ApiData<R>
       description: pageOgType !== 'Regular page' ? config.meta.og.description : '',
       imageUrl: pageOgType !== 'Regular page' ? config.meta.og.imageUrl : '',
     },
+    canonical: getCanonicalUrl(route.pathname),
   };
 }
diff --git a/lib/metadata/getCanonicalUrl.ts b/lib/metadata/getCanonicalUrl.ts
new file mode 100644
index 0000000000..2a868419a8
--- /dev/null
+++ b/lib/metadata/getCanonicalUrl.ts
@@ -0,0 +1,24 @@
+import type { Route } from 'nextjs-routes';
+
+import config from 'configs/app';
+
+const CANONICAL_ROUTES: Array<Route['pathname']> = [
+  '/',
+  '/txs',
+  '/ops',
+  '/verified-contracts',
+  '/name-domains',
+  '/withdrawals',
+  '/tokens',
+  '/stats',
+  '/api-docs',
+  '/graphiql',
+  '/gas-tracker',
+  '/apps',
+];
+
+export default function getCanonicalUrl(pathname: Route['pathname']) {
+  if (CANONICAL_ROUTES.includes(pathname)) {
+    return config.app.baseUrl + pathname;
+  }
+}
diff --git a/lib/metadata/getPageOgType.ts b/lib/metadata/getPageOgType.ts
index ef7ef24e26..1f8498fe69 100644
--- a/lib/metadata/getPageOgType.ts
+++ b/lib/metadata/getPageOgType.ts
@@ -9,7 +9,10 @@ const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
   '/tx/[hash]': 'Regular page',
   '/blocks': 'Root page',
   '/block/[height_or_hash]': 'Regular page',
+  '/block/countdown': 'Regular page',
+  '/block/countdown/[height]': 'Regular page',
   '/accounts': 'Root page',
+  '/accounts/label/[slug]': 'Root page',
   '/address/[hash]': 'Regular page',
   '/verified-contracts': 'Root page',
   '/contract-verification': 'Root page',
@@ -27,14 +30,15 @@ const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
   '/account/watchlist': 'Regular page',
   '/account/api-key': 'Regular page',
   '/account/custom-abi': 'Regular page',
-  '/account/public-tags-request': 'Regular page',
   '/account/tag-address': 'Regular page',
   '/account/verified-addresses': 'Root page',
+  '/public-tags/submit': 'Regular page',
   '/withdrawals': 'Root page',
   '/visualize/sol2uml': 'Regular page',
   '/csv-export': 'Regular page',
   '/deposits': 'Root page',
   '/output-roots': 'Root page',
+  '/dispute-games': 'Root page',
   '/batches': 'Root page',
   '/batches/[number]': 'Regular page',
   '/blobs/[hash]': 'Regular page',
@@ -45,13 +49,20 @@ const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
   '/name-domains/[name]': 'Regular page',
   '/validators': 'Root page',
   '/gas-tracker': 'Root page',
+  '/mud-worlds': 'Root page',
 
   // service routes, added only to make typescript happy
   '/login': 'Regular page',
+  '/sprite': 'Regular page',
+  '/api/metrics': 'Regular page',
+  '/api/monitoring/invalid-api-schema': 'Regular page',
+  '/api/log': 'Regular page',
   '/api/media-type': 'Regular page',
   '/api/proxy': 'Regular page',
   '/api/csrf': 'Regular page',
   '/api/healthz': 'Regular page',
+  '/api/config': 'Regular page',
+  '/api/sprite': 'Regular page',
   '/auth/auth0': 'Regular page',
   '/auth/unverified-email': 'Regular page',
 };
diff --git a/lib/metadata/index.ts b/lib/metadata/index.ts
index 6cf182a7b7..903bd988e8 100644
--- a/lib/metadata/index.ts
+++ b/lib/metadata/index.ts
@@ -1,2 +1,3 @@
 export { default as generate } from './generate';
 export { default as update } from './update';
+export * from './types';
diff --git a/lib/metadata/templates/description.ts b/lib/metadata/templates/description.ts
index c064709b6f..e4d0ccd715 100644
--- a/lib/metadata/templates/description.ts
+++ b/lib/metadata/templates/description.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import type { Route } from 'nextjs-routes';
 
 // equal og:description
@@ -12,7 +13,10 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/tx/[hash]': 'View transaction %hash% on %network_title%',
   '/blocks': DEFAULT_TEMPLATE,
   '/block/[height_or_hash]': 'View the transactions, token transfers, and uncles for block %height_or_hash%',
+  '/block/countdown': DEFAULT_TEMPLATE,
+  '/block/countdown/[height]': DEFAULT_TEMPLATE,
   '/accounts': DEFAULT_TEMPLATE,
+  '/accounts/label/[slug]': DEFAULT_TEMPLATE,
   '/address/[hash]': 'View the account balance, transactions, and other data for %hash% on the %network_title%',
   '/verified-contracts': DEFAULT_TEMPLATE,
   '/contract-verification': DEFAULT_TEMPLATE,
@@ -30,14 +34,15 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/account/watchlist': DEFAULT_TEMPLATE,
   '/account/api-key': DEFAULT_TEMPLATE,
   '/account/custom-abi': DEFAULT_TEMPLATE,
-  '/account/public-tags-request': DEFAULT_TEMPLATE,
   '/account/tag-address': DEFAULT_TEMPLATE,
   '/account/verified-addresses': DEFAULT_TEMPLATE,
+  '/public-tags/submit': 'Propose a new public tag for your address, contract or set of contracts for your dApp. Our team will review and approve your submission. Public tags are incredible tool which helps users identify contracts and addresses.',
   '/withdrawals': DEFAULT_TEMPLATE,
   '/visualize/sol2uml': DEFAULT_TEMPLATE,
   '/csv-export': DEFAULT_TEMPLATE,
   '/deposits': DEFAULT_TEMPLATE,
   '/output-roots': DEFAULT_TEMPLATE,
+  '/dispute-games': DEFAULT_TEMPLATE,
   '/batches': DEFAULT_TEMPLATE,
   '/batches/[number]': DEFAULT_TEMPLATE,
   '/blobs/[hash]': DEFAULT_TEMPLATE,
@@ -48,13 +53,20 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/name-domains/[name]': DEFAULT_TEMPLATE,
   '/validators': DEFAULT_TEMPLATE,
   '/gas-tracker': DEFAULT_TEMPLATE,
+  '/mud-worlds': DEFAULT_TEMPLATE,
 
   // service routes, added only to make typescript happy
   '/login': DEFAULT_TEMPLATE,
+  '/sprite': DEFAULT_TEMPLATE,
+  '/api/metrics': DEFAULT_TEMPLATE,
+  '/api/monitoring/invalid-api-schema': DEFAULT_TEMPLATE,
+  '/api/log': DEFAULT_TEMPLATE,
   '/api/media-type': DEFAULT_TEMPLATE,
   '/api/proxy': DEFAULT_TEMPLATE,
   '/api/csrf': DEFAULT_TEMPLATE,
   '/api/healthz': DEFAULT_TEMPLATE,
+  '/api/config': DEFAULT_TEMPLATE,
+  '/api/sprite': DEFAULT_TEMPLATE,
   '/auth/auth0': DEFAULT_TEMPLATE,
   '/auth/unverified-email': DEFAULT_TEMPLATE,
 };
diff --git a/lib/metadata/templates/title.ts b/lib/metadata/templates/title.ts
index 9a667bb9ce..e0c9d9e44c 100644
--- a/lib/metadata/templates/title.ts
+++ b/lib/metadata/templates/title.ts
@@ -1,61 +1,82 @@
 import type { Route } from 'nextjs-routes';
 
+import config from 'configs/app';
+
 const TEMPLATE_MAP: Record<Route['pathname'], string> = {
-  '/': 'blockchain explorer',
-  '/txs': 'transactions',
-  '/txs/kettle/[hash]': 'kettle %hash% transactions',
-  '/tx/[hash]': 'transaction %hash%',
-  '/blocks': 'blocks',
-  '/block/[height_or_hash]': 'block %height_or_hash%',
-  '/accounts': 'top accounts',
-  '/address/[hash]': 'address details for %hash%',
-  '/verified-contracts': 'verified contracts',
-  '/contract-verification': 'verify contract',
-  '/address/[hash]/contract-verification': 'contract verification for %hash%',
-  '/tokens': 'tokens',
-  '/token/[hash]': '%symbol% token details',
-  '/token/[hash]/instance/[id]': 'NFT instance',
-  '/apps': 'apps marketplace',
-  '/apps/[id]': '- %app_name%',
-  '/stats': 'statistics',
-  '/api-docs': 'REST API',
-  '/graphiql': 'GraphQL',
-  '/search-results': 'search result for %q%',
-  '/auth/profile': '- my profile',
-  '/account/watchlist': '- watchlist',
-  '/account/api-key': '- API keys',
-  '/account/custom-abi': '- custom ABI',
-  '/account/public-tags-request': '- public tag requests',
-  '/account/tag-address': '- private tags',
-  '/account/verified-addresses': '- my verified addresses',
-  '/withdrawals': 'withdrawals',
-  '/visualize/sol2uml': 'Solidity UML diagram',
-  '/csv-export': 'export data to CSV',
-  '/deposits': 'deposits (L1 > L2)',
-  '/output-roots': 'output roots',
-  '/batches': 'tx batches (L2 blocks)',
-  '/batches/[number]': 'L2 tx batch %number%',
-  '/blobs/[hash]': 'blob %hash% details',
-  '/ops': 'user operations',
-  '/op/[hash]': 'user operation %hash%',
-  '/404': 'error - page not found',
-  '/name-domains': 'domains search and resolve',
-  '/name-domains/[name]': '%name% domain details',
-  '/validators': 'validators list',
-  '/gas-tracker': 'gas tracker',
+  '/': '%network_name% blockchain explorer - View %network_name% stats',
+  '/txs': '%network_name% transactions - %network_name% explorer',
+  '/txs/kettle/[hash]': '%network_name% kettle %hash% transactions',
+  '/tx/[hash]': '%network_name% transaction %hash%',
+  '/blocks': '%network_name% blocks',
+  '/block/[height_or_hash]': '%network_name% block %height_or_hash%',
+  '/block/countdown': '%network_name% block countdown index',
+  '/block/countdown/[height]': '%network_name% block %height% countdown',
+  '/accounts': '%network_name% top accounts',
+  '/accounts/label/[slug]': '%network_name% addresses search by label',
+  '/address/[hash]': '%network_name% address details for %hash%',
+  '/verified-contracts': 'Verified %network_name% contracts lookup - %network_name% explorer',
+  '/contract-verification': '%network_name% verify contract',
+  '/address/[hash]/contract-verification': '%network_name% contract verification for %hash%',
+  '/tokens': 'Tokens list - %network_name% explorer',
+  '/token/[hash]': '%network_name% token details',
+  '/token/[hash]/instance/[id]': '%network_name% NFT instance',
+  '/apps': '%network_name% DApps - Explore top apps',
+  '/apps/[id]': '%network_name% marketplace app',
+  '/stats': '%network_name% stats - %network_name% network insights',
+  '/api-docs': '%network_name% API docs - %network_name% developer tools',
+  '/graphiql': 'GraphQL for %network_name% - %network_name% data query',
+  '/search-results': '%network_name% search result for %q%',
+  '/auth/profile': '%network_name% - my profile',
+  '/account/watchlist': '%network_name% - watchlist',
+  '/account/api-key': '%network_name% - API keys',
+  '/account/custom-abi': '%network_name% - custom ABI',
+  '/account/tag-address': '%network_name% - private tags',
+  '/account/verified-addresses': '%network_name% - my verified addresses',
+  '/public-tags/submit': '%network_name% - public tag requests',
+  '/withdrawals': '%network_name% withdrawals - track on %network_name% explorer',
+  '/visualize/sol2uml': '%network_name% Solidity UML diagram',
+  '/csv-export': '%network_name% export data to CSV',
+  '/deposits': '%network_name% deposits (L1 > L2)',
+  '/output-roots': '%network_name% output roots',
+  '/dispute-games': '%network_name% dispute games',
+  '/batches': '%network_name% tx batches (L2 blocks)',
+  '/batches/[number]': '%network_name% L2 tx batch %number%',
+  '/blobs/[hash]': '%network_name% blob %hash% details',
+  '/ops': 'User operations on %network_name% - %network_name% explorer',
+  '/op/[hash]': '%network_name% user operation %hash%',
+  '/404': '%network_name% error - page not found',
+  '/name-domains': '%network_name% name domains - %network_name% explorer',
+  '/name-domains/[name]': '%network_name% %name% domain details',
+  '/validators': '%network_name% validators list',
+  '/gas-tracker': '%network_name% gas tracker - Current gas fees',
+  '/mud-worlds': '%network_name% MUD worlds list',
 
   // service routes, added only to make typescript happy
-  '/login': 'login',
-  '/api/media-type': 'node API media type',
-  '/api/proxy': 'node API proxy',
-  '/api/csrf': 'node API CSRF token',
-  '/api/healthz': 'node API health check',
-  '/auth/auth0': 'authentication',
-  '/auth/unverified-email': 'unverified email',
+  '/login': '%network_name% login',
+  '/sprite': '%network_name% SVG sprite',
+  '/api/metrics': '%network_name% node API prometheus metrics',
+  '/api/monitoring/invalid-api-schema': '%network_name% node API prometheus metrics',
+  '/api/log': '%network_name% node API request log',
+  '/api/media-type': '%network_name% node API media type',
+  '/api/proxy': '%network_name% node API proxy',
+  '/api/csrf': '%network_name% node API CSRF token',
+  '/api/healthz': '%network_name% node API health check',
+  '/api/config': '%network_name% node API app config',
+  '/api/sprite': '%network_name% node API SVG sprite content',
+  '/auth/auth0': '%network_name% authentication',
+  '/auth/unverified-email': '%network_name% unverified email',
+};
+
+const TEMPLATE_MAP_ENHANCED: Partial<Record<Route['pathname'], string>> = {
+  '/token/[hash]': '%network_name% %symbol% token details',
+  '/token/[hash]/instance/[id]': '%network_name% token instance for %symbol%',
+  '/apps/[id]': '%network_name% - %app_name%',
+  '/address/[hash]': '%network_name% address details for %domain_name%',
 };
 
-export function make(pathname: Route['pathname']) {
-  const template = TEMPLATE_MAP[pathname];
+export function make(pathname: Route['pathname'], isEnriched = false) {
+  const template = (isEnriched ? TEMPLATE_MAP_ENHANCED[pathname] : undefined) ?? TEMPLATE_MAP[pathname];
+  const postfix = config.meta.promoteBlockscoutInTitle ? ' | Blockscout' : '';
 
-  return `%network_name% ${ template }`;
+  return (template + postfix).trim();
 }
diff --git a/lib/metadata/types.ts b/lib/metadata/types.ts
index 252dbc29cf..fda74301ba 100644
--- a/lib/metadata/types.ts
+++ b/lib/metadata/types.ts
@@ -1,11 +1,16 @@
+import type { TokenInfo } from 'types/api/token';
+
 import type { Route } from 'nextjs-routes';
 
 /* eslint-disable @typescript-eslint/indent */
-export type ApiData<R extends Route> =
-R['pathname'] extends '/token/[hash]' ? { symbol: string } :
-R['pathname'] extends '/token/[hash]/instance/[id]' ? { symbol: string } :
-R['pathname'] extends '/apps/[id]' ? { app_name: string } :
-never;
+export type ApiData<Pathname extends Route['pathname']> =
+(
+    Pathname extends '/address/[hash]' ? { domain_name: string } :
+    Pathname extends '/token/[hash]' ? TokenInfo :
+    Pathname extends '/token/[hash]/instance/[id]' ? { symbol: string } :
+    Pathname extends '/apps/[id]' ? { app_name: string } :
+    never
+) | null;
 
 export interface Metadata {
     title: string;
@@ -15,4 +20,5 @@ export interface Metadata {
         description?: string;
         imageUrl?: string;
     };
+    canonical: string | undefined;
 }
diff --git a/lib/metadata/update.ts b/lib/metadata/update.ts
index f6168c1ae6..123e3ca100 100644
--- a/lib/metadata/update.ts
+++ b/lib/metadata/update.ts
@@ -1,10 +1,11 @@
 import type { ApiData } from './types';
+import type { RouteParams } from 'nextjs/types';
 
 import type { Route } from 'nextjs-routes';
 
 import generate from './generate';
 
-export default function update<R extends Route>(route: R, apiData: ApiData<R>) {
+export default function update<Pathname extends Route['pathname']>(route: RouteParams<Pathname>, apiData: ApiData<Pathname>) {
   const { title, description } = generate(route, apiData);
 
   window.document.title = title;
diff --git a/lib/mixpanel/getPageType.ts b/lib/mixpanel/getPageType.ts
index fb4c48e7fe..3fc7896f81 100644
--- a/lib/mixpanel/getPageType.ts
+++ b/lib/mixpanel/getPageType.ts
@@ -7,7 +7,10 @@ export const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/tx/[hash]': 'Transaction details',
   '/blocks': 'Blocks',
   '/block/[height_or_hash]': 'Block details',
+  '/block/countdown': 'Block countdown search',
+  '/block/countdown/[height]': 'Block countdown',
   '/accounts': 'Top accounts',
+  '/accounts/label/[slug]': 'Addresses search by label',
   '/address/[hash]': 'Address details',
   '/verified-contracts': 'Verified contracts',
   '/contract-verification': 'Contract verification',
@@ -25,14 +28,15 @@ export const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/account/watchlist': 'Watchlist',
   '/account/api-key': 'API keys',
   '/account/custom-abi': 'Custom ABI',
-  '/account/public-tags-request': 'Public tags',
   '/account/tag-address': 'Private tags',
   '/account/verified-addresses': 'Verified addresses',
+  '/public-tags/submit': 'Submit public tag',
   '/withdrawals': 'Withdrawals',
   '/visualize/sol2uml': 'Solidity UML diagram',
   '/csv-export': 'Export data to CSV file',
   '/deposits': 'Deposits (L1 > L2)',
   '/output-roots': 'Output roots',
+  '/dispute-games': 'Dispute games',
   '/batches': 'Tx batches (L2 blocks)',
   '/batches/[number]': 'L2 tx batch details',
   '/blobs/[hash]': 'Blob details',
@@ -43,13 +47,20 @@ export const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/name-domains/[name]': 'Domain details',
   '/validators': 'Validators list',
   '/gas-tracker': 'Gas tracker',
+  '/mud-worlds': 'MUD worlds',
 
   // service routes, added only to make typescript happy
   '/login': 'Login',
+  '/sprite': 'Sprite',
+  '/api/metrics': 'Node API: Prometheus metrics',
+  '/api/monitoring/invalid-api-schema': 'Node API: Prometheus metrics',
+  '/api/log': 'Node API: Request log',
   '/api/media-type': 'Node API: Media type',
   '/api/proxy': 'Node API: Proxy',
   '/api/csrf': 'Node API: CSRF token',
   '/api/healthz': 'Node API: Health check',
+  '/api/config': 'Node API: App config',
+  '/api/sprite': 'Node API: SVG sprite content',
   '/auth/auth0': 'Auth',
   '/auth/unverified-email': 'Unverified email',
 };
diff --git a/lib/mixpanel/index.ts b/lib/mixpanel/index.ts
index 492269c5ea..72f7be7285 100644
--- a/lib/mixpanel/index.ts
+++ b/lib/mixpanel/index.ts
@@ -3,6 +3,7 @@ import getUuid from './getUuid';
 import logEvent from './logEvent';
 import useInit from './useInit';
 import useLogPageView from './useLogPageView';
+import * as userProfile from './userProfile';
 export * from './utils';
 
 export {
@@ -11,4 +12,5 @@ export {
   logEvent,
   getPageType,
   getUuid,
+  userProfile,
 };
diff --git a/lib/mixpanel/useInit.tsx b/lib/mixpanel/useInit.tsx
index 0be8371066..23f02332f8 100644
--- a/lib/mixpanel/useInit.tsx
+++ b/lib/mixpanel/useInit.tsx
@@ -7,9 +7,11 @@ import { deviceType } from 'react-device-detect';
 
 import config from 'configs/app';
 import * as cookies from 'lib/cookies';
+import dayjs from 'lib/date/dayjs';
 import getQueryParamString from 'lib/router/getQueryParamString';
 
 import getUuid from './getUuid';
+import * as userProfile from './userProfile';
 
 export default function useMixpanelInit() {
   const [ isInited, setIsInited ] = React.useState(false);
@@ -28,6 +30,7 @@ export default function useMixpanelInit() {
       debug: Boolean(debugFlagQuery.current || debugFlagCookie),
     };
     const isAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN));
+    const userId = getUuid();
 
     mixpanel.init(feature.projectToken, mixpanelConfig);
     mixpanel.register({
@@ -38,7 +41,15 @@ export default function useMixpanelInit() {
       'Viewport height': window.innerHeight,
       Language: window.navigator.language,
       'Device type': _capitalize(deviceType),
-      'User id': getUuid(),
+      'User id': userId,
+    });
+    mixpanel.identify(userId);
+    userProfile.set({
+      'Device Type': _capitalize(deviceType),
+      ...(isAuth ? { 'With Account': true } : {}),
+    });
+    userProfile.setOnce({
+      'First Time Join': dayjs().toISOString(),
     });
 
     setIsInited(true);
diff --git a/lib/mixpanel/useLogPageView.tsx b/lib/mixpanel/useLogPageView.tsx
index 9c3f6a929a..da5a6952f0 100644
--- a/lib/mixpanel/useLogPageView.tsx
+++ b/lib/mixpanel/useLogPageView.tsx
@@ -1,16 +1,26 @@
+import type { ColorMode } from '@chakra-ui/react';
 import { useColorMode } from '@chakra-ui/react';
 import { usePathname } from 'next/navigation';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import config from 'configs/app';
+import * as cookies from 'lib/cookies';
 import getQueryParamString from 'lib/router/getQueryParamString';
+import { COLOR_THEMES } from 'lib/settings/colorTheme';
 
 import getPageType from './getPageType';
 import getTabName from './getTabName';
 import logEvent from './logEvent';
 import { EventTypes } from './utils';
 
+function getColorTheme(hex: string | undefined, colorMode: ColorMode) {
+  const colorTheme = COLOR_THEMES.find((theme) => theme.hex === hex) ||
+    COLOR_THEMES.filter((theme) => theme.colorMode === colorMode).slice(-1)[0];
+
+  return colorTheme.id;
+}
+
 export default function useLogPageView(isInited: boolean) {
   const router = useRouter();
   const pathname = usePathname();
@@ -24,11 +34,14 @@ export default function useLogPageView(isInited: boolean) {
       return;
     }
 
+    const cookieColorModeHex = cookies.get(cookies.NAMES.COLOR_MODE_HEX);
+
     logEvent(EventTypes.PAGE_VIEW, {
       'Page type': getPageType(router.pathname),
       Tab: getTabName(tab),
       Page: page || undefined,
       'Color mode': colorMode,
+      'Color theme': getColorTheme(cookieColorModeHex, colorMode),
     });
     // these are only deps that should trigger the effect
     // in some scenarios page type is not changing (e.g navigation from one address page to another),
diff --git a/lib/mixpanel/userProfile.ts b/lib/mixpanel/userProfile.ts
new file mode 100644
index 0000000000..774d124723
--- /dev/null
+++ b/lib/mixpanel/userProfile.ts
@@ -0,0 +1,24 @@
+import mixpanel from 'mixpanel-browser';
+
+import type { PickByType } from 'types/utils';
+
+interface UserProfileProperties {
+  'With Account': boolean;
+  'With Connected Wallet': boolean;
+  'Device Type': string;
+  'First Time Join': string;
+}
+
+type UserProfilePropertiesNumerable = PickByType<UserProfileProperties, number>;
+
+export function set(props: Partial<UserProfileProperties>) {
+  mixpanel.people.set(props);
+}
+
+export function setOnce(props: Partial<UserProfileProperties>) {
+  mixpanel.people.set_once(props);
+}
+
+export function increment(props: UserProfilePropertiesNumerable) {
+  mixpanel.people.increment(props);
+}
diff --git a/lib/mixpanel/utils.ts b/lib/mixpanel/utils.ts
index 20c4b92970..4d59ec007e 100644
--- a/lib/mixpanel/utils.ts
+++ b/lib/mixpanel/utils.ts
@@ -1,4 +1,5 @@
 import type { WalletType } from 'types/client/wallets';
+import type { ColorThemeId } from 'types/settings';
 
 export enum EventTypes {
   PAGE_VIEW = 'Page view',
@@ -19,6 +20,8 @@ export enum EventTypes {
   EXPERIMENT_STARTED = 'Experiment started',
   FILTERS = 'Filters',
   BUTTON_CLICK = 'Button click',
+  PROMO_BANNER = 'Promo banner',
+  APP_FEEDBACK = 'App feedback',
 }
 
 /* eslint-disable @typescript-eslint/indent */
@@ -29,6 +32,7 @@ Type extends EventTypes.PAGE_VIEW ?
   'Tab': string;
   'Page'?: string;
   'Color mode': 'light' | 'dark';
+  'Color theme': ColorThemeId | undefined;
 } :
 Type extends EventTypes.SEARCH_QUERY ? {
   'Search query': string;
@@ -100,10 +104,18 @@ Type extends EventTypes.PAGE_WIDGET ? (
   } | {
     'Type': 'Favorite app' | 'More button' | 'Security score' | 'Total contracts' | 'Verified contracts' | 'Analyzed contracts';
     'Info': string;
-    'Source': 'Discovery view' | 'Security view' | 'App modal' | 'App page' | 'Security score popup';
+    'Source': 'Discovery view' | 'Security view' | 'App modal' | 'App page' | 'Security score popup' | 'Banner';
   } | {
     'Type': 'Security score';
     'Source': 'Analyzed contracts popup';
+  } | {
+    'Type': 'Action button';
+    'Info': string;
+    'Source': 'Txn' | 'NFT collection' | 'NFT item';
+  } | {
+    'Type': 'Address tag';
+    'Info': string;
+    'URL': string;
   }
 ) :
 Type extends EventTypes.TX_INTERPRETATION_INTERACTION ? {
@@ -119,8 +131,18 @@ Type extends EventTypes.FILTERS ? {
   'Filter name': string;
 } :
 Type extends EventTypes.BUTTON_CLICK ? {
-  'Content': 'Swap button';
+  'Content': string;
   'Source': string;
 } :
+Type extends EventTypes.PROMO_BANNER ? {
+  'Source': 'Marketplace';
+  'Link': string;
+} :
+Type extends EventTypes.APP_FEEDBACK ? {
+  'Action': 'Rating';
+  'Source': 'Discovery' | 'App modal' | 'App page';
+  'AppId': string;
+  'Score': number;
+} :
 undefined;
 /* eslint-enable @typescript-eslint/indent */
diff --git a/lib/monitoring/metrics.ts b/lib/monitoring/metrics.ts
new file mode 100644
index 0000000000..05bdad660b
--- /dev/null
+++ b/lib/monitoring/metrics.ts
@@ -0,0 +1,39 @@
+import * as promClient from 'prom-client';
+
+const metrics = (() => {
+  // eslint-disable-next-line no-restricted-properties
+  if (process.env.PROMETHEUS_METRICS_ENABLED !== 'true') {
+    return;
+  }
+
+  promClient.register.clear();
+
+  const invalidApiSchema = new promClient.Counter({
+    name: 'invalid_api_schema',
+    help: 'Number of invalid external API schema events',
+    labelNames: [ 'resource', 'url' ] as const,
+  });
+
+  const socialPreviewBotRequests = new promClient.Counter({
+    name: 'social_preview_bot_requests_total',
+    help: 'Number of incoming requests from social preview bots',
+    labelNames: [ 'route', 'bot' ] as const,
+  });
+
+  const searchEngineBotRequests = new promClient.Counter({
+    name: 'search_engine_bot_requests_total',
+    help: 'Number of incoming requests from search engine bots',
+    labelNames: [ 'route', 'bot' ] as const,
+  });
+
+  const apiRequestDuration = new promClient.Histogram({
+    name: 'api_request_duration_seconds',
+    help: 'Duration of requests to API in seconds',
+    labelNames: [ 'route', 'code' ],
+    buckets: [ 0.2, 0.5, 1, 3, 10 ],
+  });
+
+  return { invalidApiSchema, socialPreviewBotRequests, searchEngineBotRequests, apiRequestDuration };
+})();
+
+export default metrics;
diff --git a/lib/networks/getNetworkValidationActionText.ts b/lib/networks/getNetworkValidationActionText.ts
new file mode 100644
index 0000000000..c6a36f1a3d
--- /dev/null
+++ b/lib/networks/getNetworkValidationActionText.ts
@@ -0,0 +1,21 @@
+import config from 'configs/app';
+
+export default function getNetworkValidationActionText() {
+  switch (config.chain.verificationType) {
+    case 'validation': {
+      return 'validated';
+    }
+    case 'mining': {
+      return 'mined';
+    }
+    case 'posting': {
+      return 'posted';
+    }
+    case 'sequencing': {
+      return 'sequenced';
+    }
+    default: {
+      return 'miner';
+    }
+  }
+}
diff --git a/lib/networks/getNetworkValidatorTitle.ts b/lib/networks/getNetworkValidatorTitle.ts
index 7435ee0293..a0c7977cd6 100644
--- a/lib/networks/getNetworkValidatorTitle.ts
+++ b/lib/networks/getNetworkValidatorTitle.ts
@@ -1,5 +1,21 @@
 import config from 'configs/app';
 
 export default function getNetworkValidatorTitle() {
-  return config.chain.verificationType === 'validation' ? 'validator' : 'miner';
+  switch (config.chain.verificationType) {
+    case 'validation': {
+      return 'validator';
+    }
+    case 'mining': {
+      return 'miner';
+    }
+    case 'posting': {
+      return 'poster';
+    }
+    case 'sequencing': {
+      return 'sequencer';
+    }
+    default: {
+      return 'miner';
+    }
+  }
 }
diff --git a/lib/recentSearchKeywords.ts b/lib/recentSearchKeywords.ts
index d6f89bf962..5fe5a6bd71 100644
--- a/lib/recentSearchKeywords.ts
+++ b/lib/recentSearchKeywords.ts
@@ -1,4 +1,4 @@
-import { uniq } from 'lodash';
+import _uniq from 'lodash/uniq';
 
 import isBrowser from './isBrowser';
 
@@ -27,7 +27,7 @@ export function saveToRecentKeywords(value: string) {
   }
 
   const keywordsArr = getRecentSearchKeywords();
-  const result = uniq([ value, ...keywordsArr ]).slice(0, MAX_KEYWORDS_NUMBER - 1);
+  const result = _uniq([ value, ...keywordsArr ]).slice(0, MAX_KEYWORDS_NUMBER - 1);
   window.localStorage.setItem(RECENT_KEYWORDS_LS_KEY, JSON.stringify(result));
 }
 
diff --git a/lib/regexp.ts b/lib/regexp.ts
index d0d708db7a..ab2b3288e3 100644
--- a/lib/regexp.ts
+++ b/lib/regexp.ts
@@ -5,3 +5,5 @@ export const IPFS_PREFIX = /^ipfs:\/\//i;
 export const HEX_REGEXP = /^(?:0x)?[\da-fA-F]+$/;
 
 export const FILE_EXTENSION = /\.([\da-z]+)$/i;
+
+export const BLOCK_HEIGHT = /^\d+$/;
diff --git a/lib/router/removeQueryParam.ts b/lib/router/removeQueryParam.ts
index 83daa6bd28..d0a37975c7 100644
--- a/lib/router/removeQueryParam.ts
+++ b/lib/router/removeQueryParam.ts
@@ -1,8 +1,12 @@
 import type { NextRouter } from 'next/router';
 
 export default function removeQueryParam(router: NextRouter, param: string) {
-  const { pathname, query } = router;
+  const { pathname, query, asPath } = router;
   const newQuery = { ...query };
   delete newQuery[param];
-  router.replace({ pathname, query: newQuery }, undefined, { shallow: true });
+
+  const hashIndex = asPath.indexOf('#');
+  const hash = hashIndex !== -1 ? asPath.substring(hashIndex) : '';
+
+  router.replace({ pathname, query: newQuery, hash }, undefined, { shallow: true });
 }
diff --git a/lib/router/updateQueryParam.ts b/lib/router/updateQueryParam.ts
index de9fadce8b..1dfb1f2a69 100644
--- a/lib/router/updateQueryParam.ts
+++ b/lib/router/updateQueryParam.ts
@@ -1,8 +1,12 @@
 import type { NextRouter } from 'next/router';
 
 export default function updateQueryParam(router: NextRouter, param: string, newValue: string) {
-  const { pathname, query } = router;
+  const { pathname, query, asPath } = router;
   const newQuery = { ...query };
   newQuery[param] = newValue;
-  router.replace({ pathname, query: newQuery }, undefined, { shallow: true });
+
+  const hashIndex = asPath.indexOf('#');
+  const hash = hashIndex !== -1 ? asPath.substring(hashIndex) : '';
+
+  router.replace({ pathname, query: newQuery, hash }, undefined, { shallow: true });
 }
diff --git a/lib/settings/colorTheme.ts b/lib/settings/colorTheme.ts
new file mode 100644
index 0000000000..c5b7edaa1f
--- /dev/null
+++ b/lib/settings/colorTheme.ts
@@ -0,0 +1,42 @@
+import type { ColorMode } from '@chakra-ui/react';
+
+import type { ColorThemeId } from 'types/settings';
+
+interface ColorTheme {
+  id: ColorThemeId;
+  label: string;
+  colorMode: ColorMode;
+  hex: string;
+  sampleBg: string;
+}
+
+export const COLOR_THEMES: Array<ColorTheme> = [
+  {
+    id: 'light',
+    label: 'Light',
+    colorMode: 'light',
+    hex: '#FFFFFF',
+    sampleBg: 'linear-gradient(154deg, #EFEFEF 50%, rgba(255, 255, 255, 0.00) 330.86%)',
+  },
+  {
+    id: 'dim',
+    label: 'Dim',
+    colorMode: 'dark',
+    hex: '#232B37',
+    sampleBg: 'linear-gradient(152deg, #232B37 50%, rgba(255, 255, 255, 0.00) 290.71%)',
+  },
+  {
+    id: 'midnight',
+    label: 'Midnight',
+    colorMode: 'dark',
+    hex: '#1B2E48',
+    sampleBg: 'linear-gradient(148deg, #1B3F71 50%, rgba(255, 255, 255, 0.00) 312.35%)',
+  },
+  {
+    id: 'dark',
+    label: 'Dark',
+    colorMode: 'dark',
+    hex: '#101112',
+    sampleBg: 'linear-gradient(161deg, #000 9.37%, #383838 92.52%)',
+  },
+];
diff --git a/lib/settings/identIcon.ts b/lib/settings/identIcon.ts
new file mode 100644
index 0000000000..1159308576
--- /dev/null
+++ b/lib/settings/identIcon.ts
@@ -0,0 +1,24 @@
+import type { IdenticonType } from 'types/views/address';
+
+export const IDENTICONS: Array<{ label: string; id: IdenticonType; sampleBg: string }> = [
+  {
+    label: 'GitHub',
+    id: 'github',
+    sampleBg: 'url("/static/identicon_logos/github.png") center / contain no-repeat',
+  },
+  {
+    label: 'Metamask jazzicon',
+    id: 'jazzicon',
+    sampleBg: 'url("/static/identicon_logos/jazzicon.png") center / contain no-repeat',
+  },
+  {
+    label: 'Ethereum blockies',
+    id: 'blockie',
+    sampleBg: 'url("/static/identicon_logos/blockies.png") center / contain no-repeat',
+  },
+  {
+    label: 'Gradient avatar',
+    id: 'gradient_avatar',
+    sampleBg: 'url("/static/identicon_logos/gradient_avatar.png") center / contain no-repeat',
+  },
+];
diff --git a/lib/socket/types.ts b/lib/socket/types.ts
index b2d8d7301a..927b7ec7ea 100644
--- a/lib/socket/types.ts
+++ b/lib/socket/types.ts
@@ -1,9 +1,11 @@
 import type { Channel } from 'phoenix';
 
 import type { AddressCoinBalanceHistoryItem, AddressTokensBalancesSocketMessage } from 'types/api/address';
+import type { NewArbitrumBatchSocketResponse } from 'types/api/arbitrumL2';
 import type { NewBlockSocketResponse } from 'types/api/block';
 import type { SmartContractVerificationResponse } from 'types/api/contract';
 import type { RawTracesResponse } from 'types/api/rawTrace';
+import type { TokenInstanceMetadataSocketMessage } from 'types/api/token';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 import type { Transaction } from 'types/api/transaction';
 import type { NewZkEvmBatchSocketResponse } from 'types/api/zkEvmL2';
@@ -15,7 +17,8 @@ SocketMessage.TxStatusUpdate |
 SocketMessage.TxRawTrace |
 SocketMessage.NewTx |
 SocketMessage.NewPendingTx |
-SocketMessage.NewDeposits |
+SocketMessage.NewOptimisticDeposits |
+SocketMessage.NewArbitrumDeposits |
 SocketMessage.AddressBalance |
 SocketMessage.AddressCurrentCoinBalance |
 SocketMessage.AddressTokenBalance |
@@ -28,11 +31,14 @@ SocketMessage.AddressTxs |
 SocketMessage.AddressTxsPending |
 SocketMessage.AddressTokenTransfer |
 SocketMessage.AddressChangedBytecode |
+SocketMessage.AddressFetchedBytecode |
 SocketMessage.SmartContractWasVerified |
 SocketMessage.TokenTransfers |
 SocketMessage.TokenTotalSupply |
+SocketMessage.TokenInstanceMetadataFetched |
 SocketMessage.ContractVerification |
 SocketMessage.NewZkEvmL2Batch |
+SocketMessage.NewArbitrumL2Batch |
 SocketMessage.Unknown;
 
 interface SocketMessageParamsGeneric<Event extends string | undefined, Payload extends object | unknown> {
@@ -50,7 +56,8 @@ export namespace SocketMessage {
   export type TxRawTrace = SocketMessageParamsGeneric<'raw_trace', RawTracesResponse>;
   export type NewTx = SocketMessageParamsGeneric<'transaction', { transaction: number }>;
   export type NewPendingTx = SocketMessageParamsGeneric<'pending_transaction', { pending_transaction: number }>;
-  export type NewDeposits = SocketMessageParamsGeneric<'deposits', { deposits: number }>;
+  export type NewOptimisticDeposits = SocketMessageParamsGeneric<'deposits', { deposits: number }>;
+  export type NewArbitrumDeposits = SocketMessageParamsGeneric<'new_messages_to_rollup_amount', { new_messages_to_rollup_amount: number }>;
   export type AddressBalance = SocketMessageParamsGeneric<'balance', { balance: string; block_number: number; exchange_rate: string }>;
   export type AddressCurrentCoinBalance =
   SocketMessageParamsGeneric<'current_coin_balance', { coin_balance: string; block_number: number; exchange_rate: string }>;
@@ -64,10 +71,13 @@ export namespace SocketMessage {
   export type AddressTxsPending = SocketMessageParamsGeneric<'pending_transaction', { transactions: Array<Transaction> }>;
   export type AddressTokenTransfer = SocketMessageParamsGeneric<'token_transfer', { token_transfers: Array<TokenTransfer> }>;
   export type AddressChangedBytecode = SocketMessageParamsGeneric<'changed_bytecode', Record<string, never>>;
+  export type AddressFetchedBytecode = SocketMessageParamsGeneric<'fetched_bytecode', { fetched_bytecode: string }>;
   export type SmartContractWasVerified = SocketMessageParamsGeneric<'smart_contract_was_verified', Record<string, never>>;
   export type TokenTransfers = SocketMessageParamsGeneric<'token_transfer', {token_transfer: number }>;
   export type TokenTotalSupply = SocketMessageParamsGeneric<'total_supply', {total_supply: number }>;
+  export type TokenInstanceMetadataFetched = SocketMessageParamsGeneric<'fetched_token_instance_metadata', TokenInstanceMetadataSocketMessage>;
   export type ContractVerification = SocketMessageParamsGeneric<'verification_result', SmartContractVerificationResponse>;
   export type NewZkEvmL2Batch = SocketMessageParamsGeneric<'new_zkevm_confirmed_batch', NewZkEvmBatchSocketResponse>;
+  export type NewArbitrumL2Batch = SocketMessageParamsGeneric<'new_arbitrum_batch', NewArbitrumBatchSocketResponse>;
   export type Unknown = SocketMessageParamsGeneric<undefined, unknown>;
 }
diff --git a/lib/solidityScan/schema.ts b/lib/solidityScan/schema.ts
new file mode 100644
index 0000000000..04ade657b4
--- /dev/null
+++ b/lib/solidityScan/schema.ts
@@ -0,0 +1,25 @@
+import * as v from 'valibot';
+
+export const SolidityScanIssueSeverityDistributionSchema = v.object({
+  critical: v.number(),
+  gas: v.number(),
+  high: v.number(),
+  informational: v.number(),
+  low: v.number(),
+  medium: v.number(),
+});
+
+export const SolidityScanSchema = v.object({
+  scan_report: v.object({
+    contractname: v.string(),
+    scan_status: v.string(),
+    scan_summary: v.object({
+      score_v2: v.string(),
+      issue_severity_distribution: SolidityScanIssueSeverityDistributionSchema,
+    }),
+    scanner_reference_url: v.string(),
+  }),
+});
+
+export type SolidityScanReport = v.InferOutput<typeof SolidityScanSchema>;
+export type SolidityScanReportSeverityDistribution = v.InferOutput<typeof SolidityScanIssueSeverityDistributionSchema>;
diff --git a/lib/solidityScan/useFetchReport.ts b/lib/solidityScan/useFetchReport.ts
new file mode 100644
index 0000000000..69e84b6e62
--- /dev/null
+++ b/lib/solidityScan/useFetchReport.ts
@@ -0,0 +1,51 @@
+import React from 'react';
+import * as v from 'valibot';
+
+import buildUrl from 'lib/api/buildUrl';
+import useApiQuery from 'lib/api/useApiQuery';
+import { SOLIDITY_SCAN_REPORT } from 'stubs/contract';
+
+import { SolidityScanSchema } from './schema';
+
+interface Params {
+  hash: string;
+}
+
+const RESOURCE_NAME = 'contract_solidity_scan_report';
+const ERROR_NAME = 'Invalid response schema';
+
+export default function useFetchReport({ hash }: Params) {
+  const query = useApiQuery(RESOURCE_NAME, {
+    pathParams: { hash },
+    queryOptions: {
+      select: (response) => {
+        const parsedResponse = v.safeParse(SolidityScanSchema, response);
+
+        if (!parsedResponse.success) {
+          throw Error(ERROR_NAME);
+        }
+
+        return parsedResponse.output;
+      },
+      enabled: Boolean(hash),
+      placeholderData: SOLIDITY_SCAN_REPORT,
+      retry: 0,
+    },
+  });
+
+  const errorMessage = query.error && 'message' in query.error ? query.error.message : undefined;
+
+  React.useEffect(() => {
+    if (errorMessage === ERROR_NAME) {
+      fetch('/node-api/monitoring/invalid-api-schema', {
+        method: 'POST',
+        body: JSON.stringify({
+          resource: RESOURCE_NAME,
+          url: buildUrl(RESOURCE_NAME, { hash }, undefined, true),
+        }),
+      });
+    }
+  }, [ errorMessage, hash ]);
+
+  return query;
+}
diff --git a/lib/token/metadata/attributesParser.ts b/lib/token/metadata/attributesParser.ts
index 00119abe90..9f1ce7d53c 100644
--- a/lib/token/metadata/attributesParser.ts
+++ b/lib/token/metadata/attributesParser.ts
@@ -48,11 +48,25 @@ export default function attributesParser(attributes: Array<unknown>): Metadata['
         return;
       }
 
-      const value = 'value' in item && (typeof item.value === 'string' || typeof item.value === 'number') ? item.value : undefined;
+      const value = (() => {
+        if (!('value' in item)) {
+          return;
+        }
+        switch (typeof item.value) {
+          case 'string':
+          case 'number':
+            return item.value;
+          case 'boolean':
+            return String(item.value);
+          case 'object':
+            return JSON.stringify(item.value);
+        }
+      })();
+
       const trait = 'trait_type' in item && typeof item.trait_type === 'string' ? item.trait_type : undefined;
       const display = 'display_type' in item && typeof item.display_type === 'string' ? item.display_type : undefined;
 
-      if (!value) {
+      if (value === undefined) {
         return;
       }
 
diff --git a/lib/token/tokenTypes.ts b/lib/token/tokenTypes.ts
index 4b7fabf9ea..a382e61340 100644
--- a/lib/token/tokenTypes.ts
+++ b/lib/token/tokenTypes.ts
@@ -1,15 +1,23 @@
 import type { NFTTokenType, TokenType } from 'types/api/token';
 
-export const NFT_TOKEN_TYPES: Array<{ title: string; id: NFTTokenType }> = [
-  { title: 'ERC-721', id: 'ERC-721' },
-  { title: 'ERC-1155', id: 'ERC-1155' },
-  { title: 'ERC-404', id: 'ERC-404' },
-];
-
-export const TOKEN_TYPES: Array<{ title: string; id: TokenType }> = [
-  { title: 'ERC-20', id: 'ERC-20' },
+import config from 'configs/app';
+
+const tokenStandardName = config.chain.tokenStandard;
+
+export const NFT_TOKEN_TYPES: Record<NFTTokenType, string > = {
+  'ERC-721': `${ tokenStandardName }-721`,
+  'ERC-1155': `${ tokenStandardName }-1155`,
+  'ERC-404': `${ tokenStandardName }-404`,
+};
+
+export const TOKEN_TYPES: Record<TokenType, string > = {
+  'ERC-20': `${ tokenStandardName }-20`,
   ...NFT_TOKEN_TYPES,
-];
+};
+
+export const NFT_TOKEN_TYPE_IDS: Array<NFTTokenType> = [ 'ERC-721', 'ERC-1155', 'ERC-404' ];
+export const TOKEN_TYPE_IDS: Array<TokenType> = [ 'ERC-20', ...NFT_TOKEN_TYPE_IDS ];
 
-export const NFT_TOKEN_TYPE_IDS = NFT_TOKEN_TYPES.map(i => i.id);
-export const TOKEN_TYPE_IDS = TOKEN_TYPES.map(i => i.id);
+export function getTokenTypeName(typeId: TokenType) {
+  return TOKEN_TYPES[typeId];
+}
diff --git a/lib/tx/arbitrumMessageStatusDescription.ts b/lib/tx/arbitrumMessageStatusDescription.ts
new file mode 100644
index 0000000000..8f2a635a12
--- /dev/null
+++ b/lib/tx/arbitrumMessageStatusDescription.ts
@@ -0,0 +1,10 @@
+/* eslint-disable max-len */
+import type { ArbitrumMessageStatus } from 'types/api/transaction';
+
+export const MESSAGE_DESCRIPTIONS: Record<ArbitrumMessageStatus, string> = {
+  'Syncing with base layer': 'The incoming message was discovered on the rollup, but the corresponding message on L1 has not yet been found',
+  'Settlement pending': 'The transaction with the message was included in a rollup block, but there is no batch on L1 containing the block yet',
+  'Waiting for confirmation': 'The rollup block with the transaction containing the message was included in a batch on L1, but it is still waiting for the expiration of the fraud proof countdown',
+  'Ready for relay': 'The rollup state was confirmed successfully, and the message can be executed—funds can be claimed on L1',
+  Relayed: '',
+};
diff --git a/lib/validations/color.ts b/lib/validations/color.ts
new file mode 100644
index 0000000000..1f31d02801
--- /dev/null
+++ b/lib/validations/color.ts
@@ -0,0 +1,17 @@
+export const COLOR_HEX_REGEXP = /^#[A-Fa-f\d]{3,6}$/;
+
+export const validator = (value: string | undefined) => {
+  if (!value || value.length === 0) {
+    return true;
+  }
+
+  if (value.length !== 4 && value.length !== 7) {
+    return 'Invalid length';
+  }
+
+  if (!COLOR_HEX_REGEXP.test(value)) {
+    return 'Invalid hex code';
+  }
+
+  return true;
+};
diff --git a/lib/web3/useAccount.ts b/lib/web3/useAccount.ts
new file mode 100644
index 0000000000..f3dfcd48c8
--- /dev/null
+++ b/lib/web3/useAccount.ts
@@ -0,0 +1,23 @@
+import type { UseAccountReturnType } from 'wagmi';
+import { useAccount } from 'wagmi';
+
+import config from 'configs/app';
+
+function useAccountFallback(): UseAccountReturnType {
+  return {
+    address: undefined,
+    addresses: undefined,
+    chain: undefined,
+    chainId: undefined,
+    connector: undefined,
+    isConnected: false,
+    isConnecting: false,
+    isDisconnected: true,
+    isReconnecting: false,
+    status: 'disconnected',
+  };
+}
+
+const hook = config.features.blockchainInteraction.isEnabled ? useAccount : useAccountFallback;
+
+export default hook;
diff --git a/lib/web3/wagmiConfig.ts b/lib/web3/wagmiConfig.ts
index f90d0a069f..d8824f5f68 100644
--- a/lib/web3/wagmiConfig.ts
+++ b/lib/web3/wagmiConfig.ts
@@ -1,38 +1,49 @@
 import { defaultWagmiConfig } from '@web3modal/wagmi/react/config';
 import { http } from 'viem';
-import type { CreateConfigParameters } from 'wagmi';
+import { createConfig, type CreateConfigParameters } from 'wagmi';
 
 import config from 'configs/app';
 import currentChain from 'lib/web3/currentChain';
 const feature = config.features.blockchainInteraction;
 
 const wagmiConfig = (() => {
-  try {
-    if (!feature.isEnabled) {
-      throw new Error();
-    }
+  const chains: CreateConfigParameters['chains'] = [ currentChain ];
 
-    const chains: CreateConfigParameters['chains'] = [ currentChain ];
-
-    const wagmiConfig = defaultWagmiConfig({
-      chains,
-      multiInjectedProviderDiscovery: true,
+  if (!feature.isEnabled) {
+    const wagmiConfig = createConfig({
+      chains: [ currentChain ],
       transports: {
-        [currentChain.id]: http(),
-      },
-      projectId: feature.walletConnect.projectId,
-      metadata: {
-        name: `${ config.chain.name } explorer`,
-        description: `${ config.chain.name } explorer`,
-        url: config.app.baseUrl,
-        icons: [ config.UI.sidebar.icon.default ].filter(Boolean),
+        [currentChain.id]: http(config.chain.rpcUrl || `${ config.api.endpoint }/api/eth-rpc`),
       },
-      enableEmail: true,
       ssr: true,
+      batch: { multicall: { wait: 100 } },
     });
 
     return wagmiConfig;
-  } catch (error) {}
+  }
+
+  const wagmiConfig = defaultWagmiConfig({
+    chains,
+    multiInjectedProviderDiscovery: true,
+    transports: {
+      [currentChain.id]: http(),
+    },
+    projectId: feature.walletConnect.projectId,
+    metadata: {
+      name: `${ config.chain.name } explorer`,
+      description: `${ config.chain.name } explorer`,
+      url: config.app.baseUrl,
+      icons: [ config.UI.navigation.icon.default ].filter(Boolean),
+    },
+    auth: {
+      email: true,
+      socials: [],
+    },
+    ssr: true,
+    batch: { multicall: { wait: 100 } },
+  });
+
+  return wagmiConfig;
 })();
 
 export default wagmiConfig;
diff --git a/middleware.ts b/middleware.ts
index 17648c82f8..2f017d9cd5 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -19,8 +19,12 @@ export function middleware(req: NextRequest) {
     return accountResponse;
   }
 
-  const end = Date.now();
   const res = NextResponse.next();
+
+  middlewares.colorTheme(req, res);
+
+  const end = Date.now();
+
   res.headers.append('Content-Security-Policy', cspPolicy);
   res.headers.append('Server-Timing', `middleware;dur=${ end - start }`);
   res.headers.append('Docker-ID', process.env.HOSTNAME || '');
diff --git a/mocks/address/address.ts b/mocks/address/address.ts
index 7c7bc612cb..e58097c2f5 100644
--- a/mocks/address/address.ts
+++ b/mocks/address/address.ts
@@ -8,7 +8,7 @@ export const hash = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859';
 
 export const withName: AddressParam = {
   hash: hash,
-  implementation_name: null,
+  implementations: null,
   is_contract: false,
   is_verified: null,
   name: 'ArianeeStore',
@@ -20,7 +20,7 @@ export const withName: AddressParam = {
 
 export const withEns: AddressParam = {
   hash: hash,
-  implementation_name: null,
+  implementations: null,
   is_contract: false,
   is_verified: null,
   name: 'ArianeeStore',
@@ -30,9 +30,27 @@ export const withEns: AddressParam = {
   ens_domain_name: 'kitty.kitty.kitty.cat.eth',
 };
 
+export const withNameTag: AddressParam = {
+  hash: hash,
+  implementations: null,
+  is_contract: false,
+  is_verified: null,
+  name: 'ArianeeStore',
+  private_tags: [],
+  watchlist_names: [],
+  public_tags: [],
+  ens_domain_name: 'kitty.kitty.kitty.cat.eth',
+  metadata: {
+    reputation: null,
+    tags: [
+      { tagType: 'name', name: 'Mrs. Duckie', slug: 'mrs-duckie', ordinal: 0, meta: null },
+    ],
+  },
+};
+
 export const withoutName: AddressParam = {
   hash: hash,
-  implementation_name: null,
+  implementations: null,
   is_contract: false,
   is_verified: null,
   name: null,
@@ -44,7 +62,7 @@ export const withoutName: AddressParam = {
 
 export const token: Address = {
   hash: hash,
-  implementation_name: null,
+  implementations: null,
   is_contract: true,
   is_verified: false,
   name: null,
@@ -57,42 +75,54 @@ export const token: Address = {
   coin_balance: '1',
   creation_tx_hash: '0xc38cf7377bf72d6436f63c37b01b24d032101f20ec1849286dc703c712f10c98',
   creator_address_hash: '0x34A9c688512ebdB575e82C50c9803F6ba2916E72',
-  exchange_rate: null,
-  implementation_address: null,
-  has_custom_methods_read: false,
-  has_custom_methods_write: false,
+  exchange_rate: '0.04311',
   has_decompiled_code: false,
   has_logs: false,
-  has_methods_read: false,
-  has_methods_read_proxy: false,
-  has_methods_write: false,
-  has_methods_write_proxy: false,
   has_token_transfers: true,
   has_tokens: true,
   has_validated_blocks: false,
   ens_domain_name: null,
 };
 
+export const eoa: Address = {
+  block_number_balance_updated_at: 30811263,
+  coin_balance: '2782650189688719421432220500',
+  creation_tx_hash: '0xf2aff6501b632604c39978b47d309813d8a1bcca721864bbe86abf59704f195e',
+  creator_address_hash: '0x803ad3F50b9e1fF68615e8B053A186e1be288943',
+  exchange_rate: '0.04311',
+  has_decompiled_code: false,
+  has_logs: true,
+  has_token_transfers: false,
+  has_tokens: true,
+  has_validated_blocks: false,
+  hash: hash,
+  implementations: [],
+  is_contract: false,
+  is_verified: false,
+  name: null,
+  private_tags: [ publicTag ],
+  public_tags: [ privateTag ],
+  token: null,
+  watchlist_names: [ watchlistName ],
+  watchlist_address_id: 42,
+  ens_domain_name: null,
+};
+
 export const contract: Address = {
   block_number_balance_updated_at: 30811263,
   coin_balance: '27826501896887194214322205',
   creation_tx_hash: '0xf2aff6501b632604c39978b47d309813d8a1bcca721864bbe86abf59704f195e',
   creator_address_hash: '0x803ad3F50b9e1fF68615e8B053A186e1be288943',
   exchange_rate: '0.04311',
-  has_custom_methods_read: false,
-  has_custom_methods_write: false,
   has_decompiled_code: false,
   has_logs: true,
-  has_methods_read: true,
-  has_methods_read_proxy: true,
-  has_methods_write: true,
-  has_methods_write_proxy: true,
   has_token_transfers: false,
   has_tokens: false,
   has_validated_blocks: false,
   hash: hash,
-  implementation_address: '0x2F4F4A52295940C576417d29F22EEb92B440eC89',
-  implementation_name: 'HomeBridge',
+  implementations: [
+    { address: '0x2F4F4A52295940C576417d29F22EEb92B440eC89', name: 'HomeBridge' },
+  ],
   is_contract: true,
   is_verified: true,
   name: 'EternalStorageProxy',
@@ -110,20 +140,13 @@ export const validator: Address = {
   creation_tx_hash: null,
   creator_address_hash: null,
   exchange_rate: '0.00432018',
-  has_custom_methods_read: false,
-  has_custom_methods_write: false,
   has_decompiled_code: false,
   has_logs: false,
-  has_methods_read: false,
-  has_methods_read_proxy: false,
-  has_methods_write: false,
-  has_methods_write_proxy: false,
   has_token_transfers: false,
   has_tokens: false,
   has_validated_blocks: true,
   hash: hash,
-  implementation_address: null,
-  implementation_name: null,
+  implementations: [],
   is_contract: false,
   is_verified: false,
   name: 'Kiryl Ihnatsyeu',
diff --git a/mocks/address/coinBalanceHistory.ts b/mocks/address/coinBalanceHistory.ts
index 7bd121dafe..cc78d75602 100644
--- a/mocks/address/coinBalanceHistory.ts
+++ b/mocks/address/coinBalanceHistory.ts
@@ -35,33 +35,36 @@ export const baseResponse: AddressCoinBalanceHistoryResponse = {
   next_page_params: null,
 };
 
-export const chartResponse: AddressCoinBalanceHistoryChart = [
-  {
-    date: '2022-11-02',
-    value: '128238612887883515',
-  },
-  {
-    date: '2022-11-03',
-    value: '199807583157570922',
-  },
-  {
-    date: '2022-11-04',
-    value: '114487912907005778',
-  },
-  {
-    date: '2022-11-05',
-    value: '219533112907005778',
-  },
-  {
-    date: '2022-11-06',
-    value: '116487912907005778',
-  },
-  {
-    date: '2022-11-07',
-    value: '199807583157570922',
-  },
-  {
-    date: '2022-11-08',
-    value: '216488112907005778',
-  },
-];
+export const chartResponse: AddressCoinBalanceHistoryChart = {
+  items: [
+    {
+      date: '2022-11-02',
+      value: '128238612887883515',
+    },
+    {
+      date: '2022-11-03',
+      value: '199807583157570922',
+    },
+    {
+      date: '2022-11-04',
+      value: '114487912907005778',
+    },
+    {
+      date: '2022-11-05',
+      value: '219533112907005778',
+    },
+    {
+      date: '2022-11-06',
+      value: '116487912907005778',
+    },
+    {
+      date: '2022-11-07',
+      value: '199807583157570922',
+    },
+    {
+      date: '2022-11-08',
+      value: '216488112907005778',
+    },
+  ],
+  days: 10,
+};
diff --git a/mocks/address/implementations.ts b/mocks/address/implementations.ts
new file mode 100644
index 0000000000..1d77032284
--- /dev/null
+++ b/mocks/address/implementations.ts
@@ -0,0 +1,11 @@
+export const multiple = [
+  { address: '0xA84d24bD8ACE4d349C5f8c5DeeDd8bc071Ce5e2b', name: null },
+  { address: '0xc9e91eDeA9DC16604022e4E5b437Df9c64EdB05A', name: 'Diamond' },
+  { address: '0x2041832c62C0F89426b48B5868146C0b1fcd23E7', name: null },
+  { address: '0x5f7DC6ECcF05594429671F83cc0e42EE18bC0974', name: 'VariablePriceFacet' },
+  { address: '0x7abC92E242e88e4B0d6c5Beb4Df80e94D2c8A78c', name: null },
+  { address: '0x84178a0c58A860eCCFB7E3aeA64a09543062A356', name: 'MultiSaleFacet' },
+  { address: '0x33aD95537e63e9f09d96dE201e10715Ed40D9400', name: 'SVGTemplatesFacet' },
+  { address: '0xfd86Aa7f902185a8Df9859c25E4BF52D3DaDd9FA', name: 'ERC721AReceiverFacet' },
+  { address: '0x6945a35df18e59Ce09fec4B6cD3C4F9cFE6369de', name: null },
+];
diff --git a/mocks/address/tabCounters.ts b/mocks/address/tabCounters.ts
new file mode 100644
index 0000000000..3853ffab4d
--- /dev/null
+++ b/mocks/address/tabCounters.ts
@@ -0,0 +1,11 @@
+import type { AddressTabsCounters } from 'types/api/address';
+
+export const base: AddressTabsCounters = {
+  internal_txs_count: 13,
+  logs_count: 51,
+  token_balances_count: 3,
+  token_transfers_count: 3,
+  transactions_count: 51,
+  validations_count: 42,
+  withdrawals_count: 11,
+};
diff --git a/mocks/address/tokens.ts b/mocks/address/tokens.ts
index f3fd58b8d5..c494c9bbe3 100644
--- a/mocks/address/tokens.ts
+++ b/mocks/address/tokens.ts
@@ -1,4 +1,4 @@
-import type { AddressCollectionsResponse, AddressNFTsResponse, AddressTokenBalance } from 'types/api/address';
+import type { AddressCollectionsResponse, AddressNFTsResponse, AddressTokenBalance, AddressTokensResponse } from 'types/api/address';
 
 import * as tokens from 'mocks/tokens/tokenInfo';
 import * as tokenInstance from 'mocks/tokens/tokenInstance';
@@ -119,35 +119,39 @@ export const erc404b: AddressTokenBalance = {
   token_id: null,
 };
 
-export const erc20List = {
+export const erc20List: AddressTokensResponse = {
   items: [
     erc20a,
     erc20b,
     erc20c,
   ],
+  next_page_params: null,
 };
 
-export const erc721List = {
+export const erc721List: AddressTokensResponse = {
   items: [
     erc721a,
     erc721b,
     erc721c,
   ],
+  next_page_params: null,
 };
 
-export const erc1155List = {
+export const erc1155List: AddressTokensResponse = {
   items: [
     erc1155withoutName,
     erc1155a,
     erc1155b,
   ],
+  next_page_params: null,
 };
 
-export const erc404List = {
+export const erc404List: AddressTokensResponse = {
   items: [
     erc404a,
     erc404b,
   ],
+  next_page_params: null,
 };
 
 export const nfts: AddressNFTsResponse = {
diff --git a/mocks/apps/ratings.ts b/mocks/apps/ratings.ts
new file mode 100644
index 0000000000..3a0322850d
--- /dev/null
+++ b/mocks/apps/ratings.ts
@@ -0,0 +1,13 @@
+import { apps } from './apps';
+
+export const ratings = {
+  records: [
+    {
+      fields: {
+        appId: apps[0].id,
+        rating: 4.3,
+        count: 15,
+      },
+    },
+  ],
+};
diff --git a/mocks/apps/securityReports.ts b/mocks/apps/securityReports.ts
index 824a6fbe13..33457ddf2f 100644
--- a/mocks/apps/securityReports.ts
+++ b/mocks/apps/securityReports.ts
@@ -1,6 +1,8 @@
+import { apps } from './apps';
+
 export const securityReports = [
   {
-    appName: 'token-approval-tracker',
+    appName: apps[0].id,
     doc: 'http://docs.li.fi/smart-contracts/deployments#mainnet',
     chainsData: {
       '1': {
diff --git a/mocks/arbitrum/deposits.ts b/mocks/arbitrum/deposits.ts
new file mode 100644
index 0000000000..b1f47d3f76
--- /dev/null
+++ b/mocks/arbitrum/deposits.ts
@@ -0,0 +1,46 @@
+import type { ArbitrumL2MessagesResponse, ArbitrumLatestDepositsResponse } from 'types/api/arbitrumL2';
+
+export const baseResponse: ArbitrumL2MessagesResponse = {
+  items: [
+    {
+      completion_transaction_hash: '0x0b7d58c0a6b4695ba28d99df928591fb931c812c0aab6d0093ff5040d2f9bc5e',
+      id: 181920,
+      origination_address: '0x2B51Ae4412F79c3c1cB12AA40Ea4ECEb4e80511a',
+      origination_transaction_block_number: 123456,
+      origination_transaction_hash: '0x210d9f70f411de1079e32a98473b04345a5ea6ff2340a8511ebc2df641274436',
+      origination_timestamp: '2023-06-01T14:46:48.000000Z',
+      status: 'initiated',
+    },
+    {
+      completion_transaction_hash: '0x0b7d58c0a6b4695ba28d99df928591fb931c812c0aab6d0093ff5040d2f9bc5e',
+      id: 181921,
+      origination_address: '0x2B51Ae4412F79c3c1cB12AA40Ea4ECEb4e80511a',
+      origination_transaction_block_number: 123400,
+      origination_transaction_hash: '0x210d9f70f411de1079e32a98473b04345a5ea6ff2340a8511ebc2df641274436',
+      origination_timestamp: '2023-06-01T14:46:48.000000Z',
+      status: 'relayed',
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    id: 123,
+    direction: 'to-rollup',
+  },
+};
+
+export const latestDepositsResponse: ArbitrumLatestDepositsResponse = {
+  items: [
+    {
+      completion_transaction_hash: '0x3ccdf87449d3de6a9dcd3eddb7bc9ecdf1770d4631f03cdf12a098911618d138',
+      origination_transaction_block_number: 123400,
+      origination_transaction_hash: '0x210d9f70f411de1079e32a98473b04345a5ea6ff2340a8511ebc2df641274436',
+      origination_timestamp: '2023-06-01T14:46:48.000000Z',
+    },
+    {
+      completion_transaction_hash: '0xd16d918b2f95a5cdf66824f6291b6d5eb80b6f4acab3f9fb82ee0ec4109646a0',
+      origination_timestamp: null,
+      origination_transaction_block_number: null,
+      origination_transaction_hash: null,
+    },
+  ],
+};
diff --git a/mocks/arbitrum/txnBatch.ts b/mocks/arbitrum/txnBatch.ts
new file mode 100644
index 0000000000..5d163ba6bc
--- /dev/null
+++ b/mocks/arbitrum/txnBatch.ts
@@ -0,0 +1,40 @@
+/* eslint-disable max-len */
+import type { ArbitrumL2TxnBatch } from 'types/api/arbitrumL2';
+
+import { finalized } from './txnBatches';
+
+export const batchData: ArbitrumL2TxnBatch = {
+  ...finalized,
+  after_acc: '0xcd064f3409015e8e6407e492e5275a185e492c6b43ccf127f22092d8057a9ffb',
+  before_acc: '0x2ed7c4985eb778d76ec400a43805e7feecc8c2afcdb492dbe5caf227de6d37bc',
+  start_block: 1245209,
+  end_block: 1245490,
+  data_availability: {
+    batch_data_container: 'in_blob4844',
+  },
+};
+
+export const batchDataAnytrust: ArbitrumL2TxnBatch = {
+  ...finalized,
+  after_acc: '0xcd064f3409015e8e6407e492e5275a185e492c6b43ccf127f22092d8057a9ffb',
+  before_acc: '0x2ed7c4985eb778d76ec400a43805e7feecc8c2afcdb492dbe5caf227de6d37bc',
+  start_block: 1245209,
+  end_block: 1245490,
+  data_availability: {
+    batch_data_container: 'in_anytrust',
+    bls_signature: '0x142577943e30b1ad1b4e40a1c08e00c24a68d6c366f953e361048b7127e327b5bdb8f168ba986beae40cfaf79ea2788004d750555684751e361d6f6445e5c521b45ac93a76da24add241a4a5410ca3a09fa82cf0aafd78801cbd0ad99d5be6b3',
+    data_hash: '0x4ffada101d8185bcba227f2cff9e0ea0a4deeb08f328601a898131429a436ebe',
+    timeout: '2024-08-22T12:39:22Z',
+    signers: [
+      {
+        key: '0x0c6694955b524d718ca445831c5375393773401f33725a79661379dddabd5fff28619dc070befd9ed73d699e5c236c1a163be58ba81002b6130709bc064af5d7ba947130b72056bf17263800f1a3ab2269c6a510ef8e7412fd56d1ef1b916a1306e3b1d9c82c099371bd9861582acaada3a16e9dfee5d0ebce61096598a82f112d0a935e8cab5c48d82e3104b0c7ba79157dad1a019a3e7f6ad077b8e6308b116fec0f58239622463c3631fa01e2b4272409215b8009422c16715dbede590906',
+        proof: '0x06dcb5e56764bb72e6a45e6deb301ca85d8c4315c1da2efa29927f2ac8fb25571ce31d2d603735fe03196f6d56bcbf9a1999a89a74d5369822c4445d676c15ed52e5008daa775dc9a839c99ff963a19946ac740579874dac4f639907ae1bc69f',
+        trusted: false,
+      },
+      {
+        key: '0x0ee5aaeabd57313285207eb89366b411286cf3f1c5e30eb7e355f55385308b91d5807284323ee89a9743c70676f4949504ced3ed41612cbfda06ad55200c1c77d3fb3700059befd64c44bc4a57cb567ec1481ee564cf6cd6cf1f2f4a2dee6db00c547c38400ab118dedae8afd5bab93b703f76a0991baa5d43fbb125194c06b5461f8c738a3c4278a3d98e5456aec0720883c0d28919537a36e2ffd5f731e742b6653557d154c164e068ef983b367ef626faaed46f4eadecbb12b7e55f23175d',
+        trusted: true,
+      },
+    ],
+  },
+};
diff --git a/mocks/arbitrum/txnBatches.ts b/mocks/arbitrum/txnBatches.ts
new file mode 100644
index 0000000000..54ab913fa4
--- /dev/null
+++ b/mocks/arbitrum/txnBatches.ts
@@ -0,0 +1,39 @@
+import type { ArbitrumL2TxnBatchesItem, ArbitrumL2TxnBatchesResponse } from 'types/api/arbitrumL2';
+
+export const finalized: ArbitrumL2TxnBatchesItem = {
+  number: 12345,
+  blocks_count: 12345,
+  transactions_count: 10000,
+  commitment_transaction: {
+    block_number: 12345,
+    timestamp: '2022-04-17T08:51:58.000000Z',
+    hash: '0x262e7215739d6a7e33b2c20b45a838801a0f5f080f20bec8e54eb078420c4661',
+    status: 'finalized',
+  },
+  batch_data_container: 'in_blob4844',
+};
+
+export const unfinalized: ArbitrumL2TxnBatchesItem = {
+  number: 12344,
+  blocks_count: 10000,
+  transactions_count: 103020,
+  commitment_transaction: {
+    block_number: 12340,
+    timestamp: '2022-04-17T08:51:58.000000Z',
+    hash: '0x262e7215739d6a7e33b2c20b45a838801a0f5f080f20bec8e54eb078420c4661',
+    status: 'unfinalized',
+  },
+  batch_data_container: null,
+
+};
+
+export const baseResponse: ArbitrumL2TxnBatchesResponse = {
+  items: [
+    finalized,
+    unfinalized,
+  ],
+  next_page_params: {
+    items_count: 50,
+    number: 123,
+  },
+};
diff --git a/mocks/arbitrum/withdrawals.ts b/mocks/arbitrum/withdrawals.ts
new file mode 100644
index 0000000000..a825e18de6
--- /dev/null
+++ b/mocks/arbitrum/withdrawals.ts
@@ -0,0 +1,29 @@
+import type { ArbitrumL2MessagesResponse } from 'types/api/arbitrumL2';
+
+export const baseResponse: ArbitrumL2MessagesResponse = {
+  items: [
+    {
+      completion_transaction_hash: '0x0b7d58c0a6b4695ba28d99df928591fb931c812c0aab6d0093ff5040d2f9bc5e',
+      id: 181920,
+      origination_address: '0x2B51Ae4412F79c3c1cB12AA40Ea4ECEb4e80511a',
+      origination_transaction_block_number: 123456,
+      origination_transaction_hash: '0x210d9f70f411de1079e32a98473b04345a5ea6ff2340a8511ebc2df641274436',
+      origination_timestamp: '2023-06-01T14:46:48.000000Z',
+      status: 'sent',
+    },
+    {
+      completion_transaction_hash: '0x0b7d58c0a6b4695ba28d99df928591fb931c812c0aab6d0093ff5040d2f9bc5e',
+      id: 181921,
+      origination_address: '0x2B51Ae4412F79c3c1cB12AA40Ea4ECEb4e80511a',
+      origination_transaction_block_number: 123400,
+      origination_transaction_hash: '0x210d9f70f411de1079e32a98473b04345a5ea6ff2340a8511ebc2df641274436',
+      origination_timestamp: '2023-06-01T14:46:48.000000Z',
+      status: 'confirmed',
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    id: 123,
+    direction: 'from-rollup',
+  },
+};
diff --git a/mocks/blocks/block.ts b/mocks/blocks/block.ts
index eb182d2ebf..281665fc01 100644
--- a/mocks/blocks/block.ts
+++ b/mocks/blocks/block.ts
@@ -1,6 +1,13 @@
 /* eslint-disable max-len */
+import type { RpcBlock } from 'viem';
+
 import type { Block, BlocksResponse } from 'types/api/block';
 
+import { ZERO_ADDRESS } from 'lib/consts';
+
+import * as addressMock from '../address/address';
+import * as tokenMock from '../tokens/tokenInfo';
+
 export const base: Block = {
   base_fee_per_gas: '10000000000',
   burnt_fees: '5449200000000000',
@@ -15,7 +22,7 @@ export const base: Block = {
   height: 30146364,
   miner: {
     hash: '0xdAd49e6CbDE849353ab27DeC6319E687BFc91A41',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: null,
     name: 'Alex Emelyanov',
@@ -65,7 +72,7 @@ export const genesis: Block = {
   height: 0,
   miner: {
     hash: '0x0000000000000000000000000000000000000000',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: null,
     name: null,
@@ -94,7 +101,7 @@ export const base2: Block = {
   size: 592,
   miner: {
     hash: '0xDfE10D55d9248B2ED66f1647df0b0A46dEb25165',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: null,
     name: 'Kiryl Ihnatsyeu',
@@ -135,6 +142,34 @@ export const rootstock: Block = {
   minimum_gas_price: '59240000',
 };
 
+export const celo: Block = {
+  ...base,
+  celo: {
+    base_fee: {
+      token: tokenMock.tokenInfoERC20a,
+      amount: '445690000000000',
+      breakdown: [
+        {
+          address: addressMock.withName,
+          amount: '356552000000000.0000000000000',
+          percentage: 80,
+        },
+        {
+          address: {
+            ...addressMock.withoutName,
+            hash: ZERO_ADDRESS,
+          },
+          amount: '89138000000000.0000000000000',
+          percentage: 20,
+        },
+      ],
+      recipient: addressMock.contract,
+    },
+    epoch_number: 1486,
+    is_epoch_block: true,
+  },
+};
+
 export const withBlobTxs: Block = {
   ...base,
   blob_gas_price: '21518435987',
@@ -144,6 +179,11 @@ export const withBlobTxs: Block = {
   blob_tx_count: 1,
 };
 
+export const withWithdrawals: Block = {
+  ...base,
+  withdrawals_count: 2,
+};
+
 export const baseListResponse: BlocksResponse = {
   items: [
     base,
@@ -151,3 +191,107 @@ export const baseListResponse: BlocksResponse = {
   ],
   next_page_params: null,
 };
+
+export const rpcBlockBase: RpcBlock = {
+  difficulty: '0x37fcc04bef8',
+  extraData: '0x476574682f76312e302e312d38326566323666362f6c696e75782f676f312e34',
+  gasLimit: '0x2fefd8',
+  gasUsed: '0x0',
+  hash: '0xfbafb4b7b6f6789338d15ff046f40dc608a42b1a33b093e109c6d7a36cd76f61',
+  logsBloom: '0x0',
+  miner: '0xe6a7a1d47ff21b6321162aea7c6cb457d5476bca',
+  mixHash: '0x038956b9df89d0c1f980fd656d045e912beafa515cff7d7fd3c5f34ffdcb9e4b',
+  nonce: '0xd8d3392f340bbb22',
+  number: '0x1869f',
+  parentHash: '0x576fd45e598c9f86835f50fe2c6e6d11df2d4c4b01f19e4241b7e793d852f9e4',
+  receiptsRoot: '0x56e81f171bcc55a6ff8345e692c0f86e5b48e01b996cadc001622fb5e363b421',
+  sha3Uncles: '0x1dcc4de8dec75d7aab85b567b6ccd41ad312451b948a7413f0a142fd40d49347',
+  size: '0x225',
+  stateRoot: '0x32356228651d64cc5e6e7be87a556ecdbf40e876251dc867ba9e4bb82a0124a3',
+  timestamp: '0x55d19741',
+  totalDifficulty: '0x259e89748daae17',
+  transactions: [
+    '0x0e70849f10e22fe2e53fe6755f86a572aa6bb2fc472f0b87d9e561efa1fc2e1f',
+    '0xae5624c77f06d0164301380afa7780ebe49debe77eb3d5167004d69bd188a09f',
+  ],
+  transactionsRoot: '0x56e81f171bcc55a6ff8345e692c0f86e5b48e01b996cadc001622fb5e363b421',
+  uncles: [],
+  baseFeePerGas: null,
+  blobGasUsed: `0x0`,
+  excessBlobGas: `0x0`,
+  sealFields: [],
+  withdrawals: [
+    { address: '0xb9d7934878b5fb9610b3fe8a5e441e8fad7e293f', amount: '0x12128cd', index: '0x3216bbb', validatorIndex: '0x4dca3' },
+    { address: '0xb9d7934878b5fb9610b3fe8a5e441e8fad7e293f', amount: '0x12027dd', index: '0x3216bbc', validatorIndex: '0x4dca4' },
+  ],
+};
+
+export const rpcBlockWithTxsInfo: RpcBlock = {
+  ...rpcBlockBase,
+  transactions: [
+    {
+      accessList: [
+        {
+          address: '0x7af661a6463993e05a171f45d774cf37e761c83f',
+          storageKeys: [
+            '0x0000000000000000000000000000000000000000000000000000000000000007',
+            '0x000000000000000000000000000000000000000000000000000000000000000c',
+            '0x0000000000000000000000000000000000000000000000000000000000000008',
+            '0x0000000000000000000000000000000000000000000000000000000000000006',
+            '0x0000000000000000000000000000000000000000000000000000000000000009',
+            '0x000000000000000000000000000000000000000000000000000000000000000a',
+          ],
+        },
+        {
+          address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
+          storageKeys: [
+            '0x0d726f311404f8052d44e7004a6ffb747709a6d3666a62ce3f5aad13374680ab',
+            '0x1a824a6850dcbd9223afea4418727593881e2911ed2e734272a263153159fe26',
+            '0xfae3a383c82daf853bbd8bbcd21280410599b135c274c01354ea7d3a5e09f43c',
+          ],
+        },
+      ],
+      blockHash: '0xeb37ebc94e31773e5c5703073fd3911b2ab596f099d00d18b55ae3ac8203c1d5',
+      blockNumber: '0x136058d',
+      chainId: '0x1',
+      from: '0x111527f1386c6725a2f5986230f3060bdcac041f',
+      gas: '0xf4240',
+      gasPrice: '0x1780b2ff9',
+      hash: '0x0e70849f10e22fe2e53fe6755f86a572aa6bb2fc472f0b87d9e561efa1fc2e1f',
+      input: '0x258d7af661a6463993e05a171f45d774cf37e761c83f402ab3277301b3574863a151d042dc870fb1b3f0c72cbbdd53a85898f62415fe124406f6608d8802269d1283cdb2a5a329649e5cb4cdcee91ab6',
+      // maxFeePerGas: '0x3ac1bf7ee',
+      // maxPriorityFeePerGas: '0x0',
+      nonce: '0x127b2',
+      r: '0x3c47223f880a3fb7b1eca368d9d7320d2278f0b679109d9ed0af4080ee386f23',
+      s: '0x587a441f9472b312ff302d7132547aa250ea06c6203c76831d56a46ec188e664',
+      to: '0x000000d40b595b94918a28b27d1e2c66f43a51d3',
+      transactionIndex: '0x0',
+      type: '0x1',
+      v: '0x1',
+      value: '0x31',
+      yParity: '0x1',
+    },
+    {
+      accessList: [],
+      blockHash: '0xeb37ebc94e31773e5c5703073fd3911b2ab596f099d00d18b55ae3ac8203c1d5',
+      blockNumber: '0x136058d',
+      chainId: '0x1',
+      from: '0xe25d2cb47b606bb6fd9272125457a7230e26f956',
+      gas: '0x47bb0',
+      gasPrice: '0x1ba875cb6',
+      hash: '0xae5624c77f06d0164301380afa7780ebe49debe77eb3d5167004d69bd188a09f',
+      input: '0x3593564c000000000000000000000000000000000000000000000000000000000000006000000000000000000000000000000000000000000000000000000000000000a0000000000000000000000000000000000000000000000000000000006696237b00000000000000000000000000000000000000000000000000000000000000040b080604000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000000008000000000000000000000000000000000000000000000000000000000000000e0000000000000000000000000000000000000000000000000000000000000020000000000000000000000000000000000000000000000000000000000000002800000000000000000000000000000000000000000000000000000000000000040000000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000b1a2bc2ec500000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000b1a2bc2ec5000000000000000000000000000000000000000000000000000000006d1aaedfab0f00000000000000000000000000000000000000000000000000000000000000a000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000002000000000000000000000000c02aaa39b223fe8d0a0e5c4f27ead9083c756cc2000000000000000000000000d84d4e8e1e8f268e027c29fa4d48c4b7e4d422990000000000000000000000000000000000000000000000000000000000000060000000000000000000000000d84d4e8e1e8f268e027c29fa4d48c4b7e4d42299000000000000000000000000000000fee13a103a10d593b9ae06b3e05f2e7e1c00000000000000000000000000000000000000000000000000000000000000190000000000000000000000000000000000000000000000000000000000000060000000000000000000000000d84d4e8e1e8f268e027c29fa4d48c4b7e4d42299000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000006cd4db3c8c8d',
+      // maxFeePerGas: '0x23493c9cd',
+      // maxPriorityFeePerGas: '0x427c2cbd',
+      nonce: '0x32b',
+      r: '0x6566181b3cfd01702b24a2124ea7698b8cc815c7f37d1ea55800f176ca7a94cf',
+      s: '0x34f8dd837f37746ccd18f4fa71e05de98a2212f1c931f740598e491518616bb3',
+      to: '0x3fc91a3afd70395cd496c647d5a6cc9d4b2b7fad',
+      transactionIndex: '0x1',
+      type: '0x1',
+      v: '0x1',
+      value: '0xb1a2bc2ec50000',
+      yParity: '0x1',
+    },
+  ],
+};
diff --git a/mocks/blocks/epoch.ts b/mocks/blocks/epoch.ts
new file mode 100644
index 0000000000..58f614fbe6
--- /dev/null
+++ b/mocks/blocks/epoch.ts
@@ -0,0 +1,57 @@
+import _padStart from 'lodash/padStart';
+
+import type { BlockEpoch, BlockEpochElectionRewardDetails, BlockEpochElectionRewardDetailsResponse } from 'types/api/block';
+
+import * as addressMock from '../address/address';
+import * as tokenMock from '../tokens/tokenInfo';
+import * as tokenTransferMock from '../tokens/tokenTransfer';
+
+export const blockEpoch1: BlockEpoch = {
+  number: 1486,
+  distribution: {
+    carbon_offsetting_transfer: tokenTransferMock.erc20,
+    community_transfer: tokenTransferMock.erc20,
+    reserve_bolster_transfer: null,
+  },
+  aggregated_election_rewards: {
+    delegated_payment: {
+      count: 0,
+      total: '71210001063118670575',
+      token: tokenMock.tokenInfoERC20d,
+    },
+    group: {
+      count: 10,
+      total: '157705500305820107521',
+      token: tokenMock.tokenInfoERC20b,
+    },
+    validator: {
+      count: 10,
+      total: '1348139501689262297152',
+      token: tokenMock.tokenInfoERC20c,
+    },
+    voter: {
+      count: 38,
+      total: '2244419545166303388',
+      token: tokenMock.tokenInfoERC20a,
+    },
+  },
+};
+
+function getRewardDetailsItem(index: number): BlockEpochElectionRewardDetails {
+  return {
+    amount: `${ 100 - index }210001063118670575`,
+    account: {
+      ...addressMock.withoutName,
+      hash: `0x30D060F129817c4DE5fBc1366d53e19f43c8c6${ _padStart(String(index), 2, '0') }`,
+    },
+    associated_account: {
+      ...addressMock.withoutName,
+      hash: `0x456f41406B32c45D59E539e4BBA3D7898c3584${ _padStart(String(index), 2, '0') }`,
+    },
+  };
+}
+
+export const electionRewardDetails1: BlockEpochElectionRewardDetailsResponse = {
+  items: Array(15).fill('').map((item, index) => getRewardDetailsItem(index)),
+  next_page_params: null,
+};
diff --git a/mocks/contract/info.ts b/mocks/contract/info.ts
index a797383474..daedb99650 100644
--- a/mocks/contract/info.ts
+++ b/mocks/contract/info.ts
@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import type { SmartContract } from 'types/api/contract';
 
-export const verified: Partial<SmartContract> = {
+export const verified: SmartContract = {
   abi: [ { anonymous: false, inputs: [ { indexed: true, internalType: 'address', name: 'src', type: 'address' }, { indexed: true, internalType: 'address', name: 'guy', type: 'address' }, { indexed: false, internalType: 'uint256', name: 'wad', type: 'uint256' } ], name: 'Approval', type: 'event' } ],
   can_be_visualized_via_sol2uml: true,
   compiler_version: 'v0.5.16+commit.9c3226ce',
@@ -16,6 +16,7 @@ export const verified: Partial<SmartContract> = {
   },
   evm_version: 'default',
   is_verified: true,
+  is_blueprint: false,
   name: 'WPOA',
   optimization_enabled: true,
   optimization_runs: 1500,
@@ -32,9 +33,25 @@ export const verified: Partial<SmartContract> = {
   ],
   language: 'solidity',
   license_type: 'gnu_gpl_v3',
+  is_self_destructed: false,
+  is_verified_via_eth_bytecode_db: null,
+  is_changed_bytecode: null,
+  is_verified_via_sourcify: null,
+  is_fully_verified: null,
+  is_partially_verified: null,
+  sourcify_repo_url: null,
+  file_path: '',
+  additional_sources: [],
+  verified_twin_address_hash: null,
+  proxy_type: null,
 };
 
-export const withMultiplePaths: Partial<SmartContract> = {
+export const certified: SmartContract = {
+  ...verified,
+  certified: true,
+};
+
+export const withMultiplePaths: SmartContract = {
   ...verified,
   file_path: './simple_storage.sol',
   additional_sources: [
@@ -45,7 +62,7 @@ export const withMultiplePaths: Partial<SmartContract> = {
   ],
 };
 
-export const verifiedViaSourcify: Partial<SmartContract> = {
+export const verifiedViaSourcify: SmartContract = {
   ...verified,
   is_verified_via_sourcify: true,
   is_fully_verified: false,
@@ -53,36 +70,70 @@ export const verifiedViaSourcify: Partial<SmartContract> = {
   sourcify_repo_url: 'https://repo.sourcify.dev/contracts//full_match/99/0x51891596E158b2857e5356DC847e2D15dFbCF2d0/',
 };
 
-export const verifiedViaEthBytecodeDb: Partial<SmartContract> = {
+export const verifiedViaEthBytecodeDb: SmartContract = {
   ...verified,
   is_verified_via_eth_bytecode_db: true,
 };
 
-export const withTwinAddress: Partial<SmartContract> = {
+export const withTwinAddress: SmartContract = {
   ...verified,
   is_verified: false,
   verified_twin_address_hash: '0xa62744bee8646e237441cdbfdedd3458861748a8',
 };
 
-export const withProxyAddress: Partial<SmartContract> = {
+export const withProxyAddress: SmartContract = {
   ...verified,
   is_verified: false,
   verified_twin_address_hash: '0xa62744bee8646e237441cdbfdedd3458861748a8',
-  minimal_proxy_address_hash: '0xa62744bee8646e237441cdbfdedd3458861748a8',
+  proxy_type: 'eip1967',
 };
 
-export const selfDestructed: Partial<SmartContract> = {
+export const selfDestructed: SmartContract = {
   ...verified,
   is_self_destructed: true,
 };
 
-export const withChangedByteCode: Partial<SmartContract> = {
+export const withChangedByteCode: SmartContract = {
   ...verified,
   is_changed_bytecode: true,
+  is_blueprint: true,
+};
+
+export const zkSync: SmartContract = {
+  ...verified,
+  zk_compiler_version: 'v1.2.5',
+  optimization_enabled: true,
+  optimization_runs: 's',
 };
 
-export const nonVerified: Partial<SmartContract> = {
+export const nonVerified: SmartContract = {
   is_verified: false,
+  is_blueprint: false,
   creation_bytecode: 'creation_bytecode',
   deployed_bytecode: 'deployed_bytecode',
+  is_self_destructed: false,
+  abi: null,
+  compiler_version: null,
+  evm_version: null,
+  optimization_enabled: null,
+  optimization_runs: null,
+  name: null,
+  verified_at: null,
+  is_verified_via_eth_bytecode_db: null,
+  is_changed_bytecode: null,
+  is_verified_via_sourcify: null,
+  is_fully_verified: null,
+  is_partially_verified: null,
+  sourcify_repo_url: null,
+  source_code: null,
+  constructor_args: null,
+  decoded_constructor_args: null,
+  can_be_visualized_via_sol2uml: null,
+  file_path: '',
+  additional_sources: [],
+  external_libraries: null,
+  verified_twin_address_hash: null,
+  proxy_type: null,
+  language: null,
+  license_type: null,
 };
diff --git a/mocks/contract/methods.ts b/mocks/contract/methods.ts
index 6c1bdf367e..5fa714921c 100644
--- a/mocks/contract/methods.ts
+++ b/mocks/contract/methods.ts
@@ -1,11 +1,6 @@
-import type {
-  SmartContractQueryMethodReadError,
-  SmartContractQueryMethodReadSuccess,
-  SmartContractReadMethod,
-  SmartContractWriteMethod,
-} from 'types/api/contract';
+import type { SmartContractMethodRead, SmartContractMethodWrite } from 'ui/address/contract/methods/types';
 
-export const read: Array<SmartContractReadMethod> = [
+export const read: Array<SmartContractMethodRead> = [
   {
     constant: true,
     inputs: [
@@ -26,94 +21,15 @@ export const read: Array<SmartContractReadMethod> = [
     method_id: '06fdde03',
     name: 'name',
     outputs: [
-      { internalType: 'string', name: '', type: 'string', value: 'Wrapped POA' },
+      { internalType: 'string', name: '', type: 'string' },
     ],
     payable: false,
     stateMutability: 'view',
     type: 'function',
   },
-  {
-    constant: true,
-    inputs: [],
-    method_id: '18160ddd',
-    name: 'totalSupply',
-    outputs: [
-      { internalType: 'uint256', name: '', type: 'uint256', value: '139905710421584994690047413' },
-    ],
-    payable: false,
-    stateMutability: 'view',
-    type: 'function',
-  },
-  {
-    constant: true,
-    error: '(-32015) VM execution error. (revert)',
-    inputs: [],
-    method_id: 'df0ad3de',
-    name: 'upgradeabilityAdmin',
-    outputs: [
-      { name: '', type: 'address', value: '' },
-    ],
-    payable: false,
-    stateMutability: 'view',
-    type: 'function',
-  },
-  {
-    constant: true,
-    inputs: [],
-    method_id: '165ec2e2',
-    name: 'arianeeWhitelist',
-    outputs: [
-      {
-        name: '',
-        type: 'address',
-        value: '0xd3eee7f8e8021db24825c3457d5479f2b57f40ef',
-      },
-    ],
-    payable: false,
-    stateMutability: 'view',
-    type: 'function',
-  },
-  {
-    inputs: [],
-    method_id: '69598efe',
-    name: 'totalPartitions',
-    constant: true,
-    payable: false,
-    outputs: [
-      {
-        type: 'bytes32[]',
-        name: 'bytes32[]',
-        value: [
-          '0x7265736572766564000000000000000000000000000000000000000000000000',
-          '0x6973737565640000000000000000000000000000000000000000000000000000',
-        ],
-      },
-    ],
-    stateMutability: 'view',
-    type: 'function',
-  },
 ];
 
-export const readResultSuccess: SmartContractQueryMethodReadSuccess = {
-  is_error: false,
-  result: {
-    names: [ 'amount' ],
-    output: [
-      { type: 'uint256', value: '42' },
-    ],
-  },
-};
-
-export const readResultError: SmartContractQueryMethodReadError = {
-  is_error: true,
-  result: {
-    message: 'Some shit happened',
-    code: -32017,
-    raw: '49276d20616c7761797320726576657274696e67207769746820616e206572726f72',
-  },
-};
-
-export const write: Array<SmartContractWriteMethod> = [
+export const write: Array<SmartContractMethodWrite> = [
   {
     payable: true,
     stateMutability: 'payable',
@@ -213,6 +129,6 @@ export const write: Array<SmartContractWriteMethod> = [
     payable: false,
     stateMutability: 'nonpayable',
     type: 'function',
-    method_id: '0x06',
+    is_invalid: true,
   },
 ];
diff --git a/mocks/contract/solidityscanReport.ts b/mocks/contract/solidityscanReport.ts
index 000adabf7f..e3d83d590d 100644
--- a/mocks/contract/solidityscanReport.ts
+++ b/mocks/contract/solidityscanReport.ts
@@ -1,5 +1,8 @@
-export const solidityscanReportAverage = {
+import type { SolidityScanReport } from 'lib/solidityScan/schema';
+
+export const solidityscanReportAverage: SolidityScanReport = {
   scan_report: {
+    contractname: 'foo',
     scan_status: 'scan_done',
     scan_summary: {
       issue_severity_distribution: {
@@ -10,18 +13,15 @@ export const solidityscanReportAverage = {
         low: 2,
         medium: 0,
       },
-      lines_analyzed_count: 18,
-      scan_time_taken: 1,
-      score: '3.61',
       score_v2: '72.22',
-      threat_score: '94.74',
     },
     scanner_reference_url: 'https://solidityscan.com/quickscan/0xc1EF7811FF2ebFB74F80ed7423f2AdAA37454be2/blockscout/eth-goerli?ref=blockscout',
   },
 };
 
-export const solidityscanReportGreat = {
+export const solidityscanReportGreat: SolidityScanReport = {
   scan_report: {
+    contractname: 'foo',
     scan_status: 'scan_done',
     scan_summary: {
       issue_severity_distribution: {
@@ -32,18 +32,15 @@ export const solidityscanReportGreat = {
         low: 0,
         medium: 0,
       },
-      lines_analyzed_count: 18,
-      scan_time_taken: 1,
-      score: '3.61',
       score_v2: '100',
-      threat_score: '94.74',
     },
     scanner_reference_url: 'https://solidityscan.com/quickscan/0xc1EF7811FF2ebFB74F80ed7423f2AdAA37454be2/blockscout/eth-goerli?ref=blockscout',
   },
 };
 
-export const solidityscanReportLow = {
+export const solidityscanReportLow: SolidityScanReport = {
   scan_report: {
+    contractname: 'foo',
     scan_status: 'scan_done',
     scan_summary: {
       issue_severity_distribution: {
@@ -54,11 +51,7 @@ export const solidityscanReportLow = {
         low: 2,
         medium: 10,
       },
-      lines_analyzed_count: 18,
-      scan_time_taken: 1,
-      score: '3.61',
       score_v2: '22.22',
-      threat_score: '94.74',
     },
     scanner_reference_url: 'https://solidityscan.com/quickscan/0xc1EF7811FF2ebFB74F80ed7423f2AdAA37454be2/blockscout/eth-goerli?ref=blockscout',
   },
diff --git a/mocks/contracts/index.ts b/mocks/contracts/index.ts
index bc3b4ecfb2..86a0a0855c 100644
--- a/mocks/contracts/index.ts
+++ b/mocks/contracts/index.ts
@@ -3,7 +3,7 @@ import type { VerifiedContract, VerifiedContractsResponse } from 'types/api/cont
 export const contract1: VerifiedContract = {
   address: {
     hash: '0xef490030ac0d53B70E304b6Bc5bF657dc6780bEB',
-    implementation_name: null,
+    implementations: null,
     is_contract: true,
     is_verified: null,
     name: 'MockERC20',
@@ -26,7 +26,7 @@ export const contract1: VerifiedContract = {
 export const contract2: VerifiedContract = {
   address: {
     hash: '0xB2218bdEbe8e90f80D04286772B0968ead666942',
-    implementation_name: null,
+    implementations: null,
     is_contract: true,
     is_verified: null,
     name: 'EternalStorageProxyWithSomeExternalLibrariesAndEvenMore',
@@ -35,6 +35,7 @@ export const contract2: VerifiedContract = {
     watchlist_names: [],
     ens_domain_name: null,
   },
+  certified: true,
   coin_balance: '9078234570352343999',
   compiler_version: 'v0.3.1+commit.0463ea4c',
   has_constructor_args: true,
diff --git a/mocks/ens/domain.ts b/mocks/ens/domain.ts
index 3126aaecf5..6cf446b833 100644
--- a/mocks/ens/domain.ts
+++ b/mocks/ens/domain.ts
@@ -1,17 +1,45 @@
-import type { EnsDomainDetailed } from 'types/api/ens';
+import * as bens from '@blockscout/bens-types';
 
-const domainTokenA = {
+const domainTokenA: bens.Token = {
   id: '97352314626701792030827861137068748433918254309635329404916858191911576754327',
   contract_hash: '0x57f1887a8bf19b14fc0df6fd9b2acc9af147ea85',
-  type: 'NATIVE_DOMAIN_TOKEN' as const,
+  type: bens.TokenType.NATIVE_DOMAIN_TOKEN,
 };
 const domainTokenB = {
   id: '423546333',
   contract_hash: '0x57f1887a8bf19b14fc0df6fd9b2acc9af147ea86',
-  type: 'WRAPPED_DOMAIN_TOKEN' as const,
+  type: bens.TokenType.WRAPPED_DOMAIN_TOKEN,
 };
 
-export const ensDomainA: EnsDomainDetailed = {
+export const protocolA: bens.ProtocolInfo = {
+  id: 'ens',
+  short_name: 'ENS',
+  title: 'Ethereum Name Service',
+  description: 'The Ethereum Name Service (ENS) is a distributed, open, and extensible naming system based on the Ethereum blockchain.',
+  tld_list: [
+    'eth',
+    'xyz',
+  ],
+  icon_url: 'https://i.imgur.com/GOfUwCb.jpeg',
+  docs_url: 'https://docs.ens.domains/',
+  deployment_blockscout_base_url: 'http://localhost:3200/',
+};
+
+export const protocolB: bens.ProtocolInfo = {
+  id: 'duck',
+  short_name: 'DUCK',
+  title: 'Duck Name Service',
+  description: '"Duck Name Service" is a cutting-edge blockchain naming service, providing seamless naming for crypto and decentralized applications. 🦆',
+  tld_list: [
+    'duck',
+    'quack',
+  ],
+  icon_url: 'https://localhost:3000/duck.jpg',
+  docs_url: 'https://docs.duck.domains/',
+  deployment_blockscout_base_url: '',
+};
+
+export const ensDomainA: bens.DetailedDomain = {
   id: '0xb140bf9645e54f02ed3c1bcc225566b515a98d1688f10494a5c3bc5b447936a7',
   tokens: [
     domainTokenA,
@@ -27,7 +55,6 @@ export const ensDomainA: EnsDomainDetailed = {
   owner: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
-  wrapped_owner: null,
   registration_date: '2021-06-27T13:34:44.000Z',
   expiry_date: '2025-03-01T14:20:24.000Z',
   other_addresses: {
@@ -35,26 +62,38 @@ export const ensDomainA: EnsDomainDetailed = {
     GNO: 'DDAfbb505ad214D7b80b1f830fcCc89B60fb7A83',
     NEAR: 'a0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.factory.bridge.near',
   },
+  protocol: protocolA,
+  resolver_address: {
+    hash: '0xD578780f1dA7404d9CC0eEbC9D684c140CC4b638',
+  },
+  resolved_with_wildcard: true,
+  stored_offchain: true,
+  wrapped_owner: {
+    hash: '0xD4416b13d2b3a9aBae7AcD5D6C2BbDBE25686401',
+  },
 };
 
-export const ensDomainB: EnsDomainDetailed = {
+export const ensDomainB: bens.DetailedDomain = {
   id: '0x632ac7bec8e883416b371b36beaa822f4784208c99d063ee030020e2bd09b885',
   tokens: [ domainTokenA ],
   name: 'kitty.kitty.kitty.cat.eth',
-  resolved_address: null,
+  resolved_address: undefined,
   registrant: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
   owner: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
-  wrapped_owner: null,
+  wrapped_owner: undefined,
   registration_date: '2023-08-13T13:01:12.000Z',
-  expiry_date: null,
+  expiry_date: undefined,
   other_addresses: {},
+  protocol: undefined,
+  resolved_with_wildcard: false,
+  stored_offchain: false,
 };
 
-export const ensDomainC: EnsDomainDetailed = {
+export const ensDomainC: bens.DetailedDomain = {
   id: '0xdb7f351de6d93bda077a9211bdc49f249326d87932e4787d109b0262e9d189ad',
   tokens: [ domainTokenA ],
   name: 'duck.duck.eth',
@@ -67,13 +106,16 @@ export const ensDomainC: EnsDomainDetailed = {
   owner: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
-  wrapped_owner: null,
+  wrapped_owner: undefined,
   registration_date: '2022-04-24T07:34:44.000Z',
   expiry_date: '2022-11-01T13:10:36.000Z',
   other_addresses: {},
+  protocol: undefined,
+  resolved_with_wildcard: false,
+  stored_offchain: false,
 };
 
-export const ensDomainD: EnsDomainDetailed = {
+export const ensDomainD: bens.DetailedDomain = {
   id: '0xdb7f351de6d93bda077a9211bdc49f249326d87932e4787d109b0262e9d189ae',
   tokens: [ domainTokenA ],
   name: '🦆.duck.eth',
@@ -83,9 +125,12 @@ export const ensDomainD: EnsDomainDetailed = {
   resolved_address: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
-  owner: null,
-  wrapped_owner: null,
+  owner: undefined,
+  wrapped_owner: undefined,
   registration_date: '2022-04-24T07:34:44.000Z',
   expiry_date: '2027-09-23T13:10:36.000Z',
   other_addresses: {},
+  protocol: undefined,
+  resolved_with_wildcard: false,
+  stored_offchain: false,
 };
diff --git a/mocks/ens/events.ts b/mocks/ens/events.ts
index 2d60cc721a..d13fbcbe9a 100644
--- a/mocks/ens/events.ts
+++ b/mocks/ens/events.ts
@@ -1,6 +1,6 @@
-import type { EnsDomainEvent } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
-export const ensDomainEventA: EnsDomainEvent = {
+export const ensDomainEventA: bens.DomainEvent = {
   transaction_hash: '0x86c66b9fad66e4f20d42a6eed4fe12a0f48a274786fd85e9d4aa6c60e84b5874',
   timestamp: '2021-06-27T13:34:44.000000Z',
   from_address: {
@@ -9,7 +9,7 @@ export const ensDomainEventA: EnsDomainEvent = {
   action: '0xf7a16963',
 };
 
-export const ensDomainEventB = {
+export const ensDomainEventB: bens.DomainEvent = {
   transaction_hash: '0x150bf7d5cd42457dd9c799ddd9d4bf6c30c703e1954a88c6d4b668b23fe0fbf8',
   timestamp: '2022-11-02T14:20:24.000000Z',
   from_address: {
diff --git a/mocks/l2txnBatches/txnBatches.ts b/mocks/l2txnBatches/txnBatches.ts
deleted file mode 100644
index f3c086c855..0000000000
--- a/mocks/l2txnBatches/txnBatches.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-export const txnBatchesData = {
-  items: [
-    {
-      l1_tx_hashes: [
-        '0x5bc94d02b65743dfaa9e10a2d6e175aff2a05cce2128c8eaf848bd84ab9325c5',
-        '0x92a51bc623111dbb91f243e3452e60fab6f090710357f9d9b75ac8a0f67dfd9d',
-      ],
-      l1_timestamp: '2023-02-24T10:16:12.000000Z',
-      l2_block_number: 5902836,
-      tx_count: 0,
-    },
-    {
-      l1_tx_hashes: [
-        '0xc45f846ee28ce9ba116ce2d378d3dd00b55d324b833b3ecd4241c919c572c4aa',
-      ],
-      l1_timestamp: '2023-02-24T10:16:00.000000Z',
-      l2_block_number: 5902835,
-      tx_count: 0,
-    },
-    {
-      l1_tx_hashes: [
-        '0x48139721f792d3a68c3781b4cf50e66e8fc7dbb38adff778e09066ea5be9adb8',
-      ],
-      l1_timestamp: '2023-02-24T10:16:00.000000Z',
-      l2_block_number: 5902834,
-      tx_count: 0,
-    },
-  ],
-  next_page_params: {
-    block_number: 5902834,
-    items_count: 50,
-  },
-};
diff --git a/mocks/l2withdrawals/withdrawals.ts b/mocks/l2withdrawals/withdrawals.ts
deleted file mode 100644
index 0e0d69a22f..0000000000
--- a/mocks/l2withdrawals/withdrawals.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-export const data = {
-  items: [
-    {
-      challenge_period_end: null,
-      from: {
-        hash: '0x67aab90c548b284be30b05c376001b4db90b87ba',
-        implementation_name: null,
-        is_contract: false,
-        is_verified: false,
-        name: null,
-        private_tags: [],
-        public_tags: [],
-        watchlist_names: [],
-      },
-      l1_tx_hash: '0x1a235bee32ac10cb7efdad98415737484ca66386e491cde9e17d42b136dca684',
-      l2_timestamp: '2022-02-15T12:50:02.000000Z',
-      l2_tx_hash: '0x918cd8c5c24c17e06cd02b0379510c4ad56324bf153578fb9caaaa2fe4e7dc35',
-      msg_nonce: 396,
-      msg_nonce_raw: '1766847064778384329583297500742918515827483896875618958121606201292620172',
-      msg_nonce_version: 1,
-      status: 'Ready to prove',
-    },
-    {
-      challenge_period_end: null,
-      from: null,
-      l1_tx_hash: null,
-      l2_timestamp: null,
-      l2_tx_hash: '0x2f117bee32ac10cb7efdad98415737484ca66386e491cde9e17d42b136def593',
-      msg_nonce: 391,
-      msg_nonce_raw: '1766847064778384329583297500742918515827483896875618958121606201292620167',
-      msg_nonce_version: 1,
-      status: 'Ready to prove',
-    },
-    {
-      challenge_period_end: '2022-11-11T12:50:02.000000Z',
-      from: null,
-      l1_tx_hash: null,
-      l2_timestamp: null,
-      l2_tx_hash: '0xe14b1f46838176702244a5343629bcecf728ca2d9881d47b4ce46e00c387d7e3',
-      msg_nonce: 390,
-      msg_nonce_raw: '1766847064778384329583297500742918515827483896875618958121606201292620166',
-      msg_nonce_version: 1,
-      status: 'Ready for relay',
-    },
-  ],
-  next_page_params: {
-    items_count: 50,
-    nonce: '1766847064778384329583297500742918515827483896875618958121606201292620123',
-  },
-};
diff --git a/mocks/metadata/address.ts b/mocks/metadata/address.ts
new file mode 100644
index 0000000000..93860f4b44
--- /dev/null
+++ b/mocks/metadata/address.ts
@@ -0,0 +1,104 @@
+/* eslint-disable max-len */
+import type { AddressMetadataTagApi } from 'types/api/addressMetadata';
+
+export const nameTag: AddressMetadataTagApi = {
+  slug: 'quack-quack',
+  name: 'Quack quack',
+  tagType: 'name',
+  ordinal: 99,
+  meta: null,
+};
+
+export const customNameTag: AddressMetadataTagApi = {
+  slug: 'unicorn-uproar',
+  name: 'Unicorn Uproar',
+  tagType: 'name',
+  ordinal: 777,
+  meta: {
+    tagUrl: 'https://example.com',
+    bgColor: 'linear-gradient(45deg, deeppink, deepskyblue)',
+    textColor: '#FFFFFF',
+  },
+};
+
+export const genericTag: AddressMetadataTagApi = {
+  slug: 'duck-owner',
+  name: 'duck owner 🦆',
+  tagType: 'generic',
+  ordinal: 55,
+  meta: {
+    bgColor: 'rgba(255,243,12,90%)',
+  },
+};
+
+export const infoTagWithLink: AddressMetadataTagApi = {
+  slug: 'goosegang',
+  name: 'GooseGanG GooseGanG GooseGanG GooseGanG GooseGanG GooseGanG GooseGanG',
+  tagType: 'classifier',
+  ordinal: 11,
+  meta: {
+    tagUrl: 'https://example.com',
+  },
+};
+
+export const tagWithTooltip: AddressMetadataTagApi = {
+  slug: 'blockscout-heroes',
+  name: 'BlockscoutHeroes',
+  tagType: 'classifier',
+  ordinal: 42,
+  meta: {
+    tooltipDescription: 'The Blockscout team, EVM blockchain aficionados, illuminate Ethereum networks with unparalleled insight and prowess, leading the way in blockchain exploration! 🚀🔎',
+    tooltipIcon: 'https://localhost:3100/icon.svg',
+    tooltipTitle: 'Blockscout team member',
+    tooltipUrl: 'https://blockscout.com',
+  },
+};
+
+export const protocolTag: AddressMetadataTagApi = {
+  slug: 'aerodrome',
+  name: 'Aerodrome',
+  tagType: 'protocol',
+  ordinal: 0,
+  meta: null,
+};
+
+export const protocolTagWithMeta: AddressMetadataTagApi = {
+  slug: 'uniswap',
+  name: 'Uniswap',
+  tagType: 'protocol',
+  ordinal: 0,
+  meta: {
+    appID: 'uniswap',
+    appMarketplaceURL: 'https://example.com',
+    appLogoURL: 'https://localhost:3100/icon.svg',
+    appActionButtonText: 'Swap',
+    textColor: '#FFFFFF',
+    bgColor: '#FF007A',
+  },
+};
+
+export const warpcastTag: AddressMetadataTagApi = {
+  slug: 'warpcast-account',
+  name: 'Farcaster',
+  tagType: 'protocol',
+  ordinal: 0,
+  meta: {
+    bgColor: '#8465CB',
+    tagIcon: 'data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2032%2029%22%3E%3Cpath%20d%3D%22M%205.507%200.072%20L%2026.097%200.072%20L%2026.097%204.167%20L%2031.952%204.167%20L%2030.725%208.263%20L%2029.686%208.263%20L%2029.686%2024.833%20C%2030.207%2024.833%2030.63%2025.249%2030.63%2025.763%20L%2030.63%2026.88%20L%2030.819%2026.88%20C%2031.341%2026.88%2031.764%2027.297%2031.764%2027.811%20L%2031.764%2028.928%20L%2021.185%2028.928%20L%2021.185%2027.811%20C%2021.185%2027.297%2021.608%2026.88%2022.13%2026.88%20L%2022.319%2026.88%20L%2022.319%2025.763%20C%2022.319%2025.316%2022.639%2024.943%2023.065%2024.853%20L%2023.045%2015.71%20C%2022.711%2012.057%2019.596%209.194%2015.802%209.194%20C%2012.008%209.194%208.893%2012.057%208.559%2015.71%20L%208.539%2024.845%20C%209.043%2024.919%209.663%2025.302%209.663%2025.763%20L%209.663%2026.88%20L%209.852%2026.88%20C%2010.373%2026.88%2010.796%2027.297%2010.796%2027.811%20L%2010.796%2028.928%20L%200.218%2028.928%20L%200.218%2027.811%20C%200.218%2027.297%200.641%2026.88%201.162%2026.88%20L%201.351%2026.88%20L%201.351%2025.763%20C%201.351%2025.249%201.774%2024.833%202.296%2024.833%20L%202.296%208.263%20L%201.257%208.263%20L%200.029%204.167%20L%205.507%204.167%20L%205.507%200.072%20Z%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%2026.097%200.072%20L%2026.166%200.072%20L%2026.166%200.004%20L%2026.097%200.004%20Z%20M%205.507%200.072%20L%205.507%200.004%20L%205.438%200.004%20L%205.438%200.072%20Z%20M%2026.097%204.167%20L%2026.028%204.167%20L%2026.028%204.235%20L%2026.097%204.235%20Z%20M%2031.952%204.167%20L%2032.019%204.187%20L%2032.045%204.099%20L%2031.952%204.099%20L%2031.952%204.167%20Z%20M%2030.725%208.263%20L%2030.725%208.331%20L%2030.776%208.331%20L%2030.791%208.282%20Z%20M%2029.686%208.263%20L%2029.686%208.195%20L%2029.617%208.195%20L%2029.617%208.263%20Z%20M%2029.686%2024.833%20L%2029.617%2024.833%20L%2029.617%2024.901%20L%2029.686%2024.901%20Z%20M%2030.63%2026.88%20L%2030.561%2026.88%20L%2030.561%2026.948%20L%2030.63%2026.948%20Z%20M%2031.764%2028.928%20L%2031.764%2028.996%20L%2031.832%2028.996%20L%2031.832%2028.928%20Z%20M%2021.185%2028.928%20L%2021.116%2028.928%20L%2021.116%2028.996%20L%2021.185%2028.996%20Z%20M%2022.319%2026.88%20L%2022.319%2026.948%20L%2022.388%2026.948%20L%2022.388%2026.88%20Z%20M%2023.065%2024.853%20L%2023.08%2024.919%20L%2023.134%2024.908%20L%2023.134%2024.853%20Z%20M%2023.045%2015.71%20L%2023.114%2015.71%20L%2023.114%2015.707%20L%2023.113%2015.704%20Z%20M%208.559%2015.71%20L%208.49%2015.704%20L%208.49%2015.707%20L%208.49%2015.71%20Z%20M%208.539%2024.845%20L%208.47%2024.845%20L%208.469%2024.904%20L%208.528%2024.913%20Z%20M%209.663%2026.88%20L%209.594%2026.88%20L%209.594%2026.948%20L%209.663%2026.948%20Z%20M%2010.796%2028.928%20L%2010.796%2028.996%20L%2010.865%2028.996%20L%2010.865%2028.928%20Z%20M%200.218%2028.928%20L%200.149%2028.928%20L%200.149%2028.996%20L%200.218%2028.996%20Z%20M%201.351%2026.88%20L%201.351%2026.948%20L%201.42%2026.948%20L%201.42%2026.88%20Z%20M%202.296%2024.833%20L%202.296%2024.901%20L%202.365%2024.901%20L%202.365%2024.833%20Z%20M%202.296%208.263%20L%202.365%208.263%20L%202.365%208.195%20L%202.296%208.195%20Z%20M%201.257%208.263%20L%201.191%208.282%20L%201.205%208.331%20L%201.257%208.331%20Z%20M%200.029%204.167%20L%200.029%204.1%20L%20-0.063%204.1%20L%20-0.037%204.187%20L%200.029%204.167%20Z%20M%205.507%204.167%20L%205.507%204.235%20L%205.576%204.235%20L%205.576%204.167%20Z%20M%2026.097%200.004%20L%205.507%200.004%20L%205.507%200.139%20L%2026.097%200.139%20Z%20M%2026.166%204.167%20L%2026.166%200.072%20L%2026.028%200.072%20L%2026.028%204.167%20L%2026.166%204.167%20Z%20M%2031.952%204.099%20L%2026.097%204.099%20L%2026.097%204.235%20L%2031.952%204.235%20Z%20M%2030.791%208.282%20L%2032.019%204.187%20L%2031.886%204.148%20L%2030.658%208.244%20Z%20M%2029.686%208.331%20L%2030.725%208.331%20L%2030.725%208.195%20L%2029.686%208.195%20Z%20M%2029.755%2024.833%20L%2029.755%208.263%20L%2029.617%208.263%20L%2029.617%2024.833%20Z%20M%2030.699%2025.763%20C%2030.699%2025.212%2030.245%2024.765%2029.686%2024.765%20L%2029.686%2024.9%20C%2030.169%2024.9%2030.561%2025.287%2030.561%2025.763%20Z%20M%2030.699%2026.88%20L%2030.699%2025.763%20L%2030.561%2025.763%20L%2030.561%2026.88%20Z%20M%2030.819%2026.813%20L%2030.63%2026.813%20L%2030.63%2026.948%20L%2030.819%2026.948%20Z%20M%2031.832%2027.811%20C%2031.832%2027.26%2031.379%2026.813%2030.819%2026.813%20L%2030.819%2026.948%20C%2031.303%2026.948%2031.695%2027.335%2031.695%2027.811%20Z%20M%2031.832%2028.928%20L%2031.832%2027.811%20L%2031.695%2027.811%20L%2031.695%2028.928%20Z%20M%2026.097%2028.996%20L%2031.764%2028.996%20L%2031.764%2028.86%20L%2026.097%2028.86%20Z%20M%2023.074%2028.996%20L%2026.097%2028.996%20L%2026.097%2028.86%20L%2023.074%2028.86%20Z%20M%2021.185%2028.996%20L%2023.074%2028.996%20L%2023.074%2028.86%20L%2021.185%2028.86%20Z%20M%2021.116%2027.811%20L%2021.116%2028.928%20L%2021.254%2028.928%20L%2021.254%2027.811%20Z%20M%2022.13%2026.813%20C%2021.57%2026.813%2021.116%2027.26%2021.116%2027.811%20L%2021.254%2027.811%20C%2021.254%2027.335%2021.646%2026.948%2022.13%2026.948%20Z%20M%2022.319%2026.813%20L%2022.13%2026.813%20L%2022.13%2026.948%20L%2022.319%2026.948%20Z%20M%2022.25%2025.763%20L%2022.25%2026.88%20L%2022.388%2026.88%20L%2022.388%2025.763%20Z%20M%2023.051%2024.787%20C%2022.593%2024.883%2022.25%2025.284%2022.25%2025.763%20L%2022.388%2025.763%20C%2022.388%2025.349%2022.684%2025.003%2023.08%2024.919%20Z%20M%2022.976%2015.71%20L%2022.996%2024.853%20L%2023.134%2024.853%20L%2023.114%2015.71%20Z%20M%2015.802%209.262%20C%2019.559%209.262%2022.645%2012.098%2022.976%2015.716%20L%2023.113%2015.704%20C%2022.776%2012.016%2019.632%209.126%2015.802%209.126%20Z%20M%208.628%2015.716%20C%208.959%2012.098%2012.044%209.262%2015.802%209.262%20L%2015.802%209.126%20C%2011.972%209.126%208.828%2012.016%208.49%2015.704%20Z%20M%208.608%2024.845%20L%208.628%2015.71%20L%208.49%2015.71%20L%208.47%2024.845%20Z%20M%209.732%2025.763%20C%209.732%2025.502%209.557%2025.273%209.331%2025.105%20C%209.104%2024.935%208.812%2024.817%208.549%2024.778%20L%208.528%2024.912%20C%208.769%2024.948%209.039%2025.057%209.248%2025.213%20C%209.459%2025.37%209.594%2025.563%209.594%2025.763%20Z%20M%209.732%2026.88%20L%209.732%2025.763%20L%209.594%2025.763%20L%209.594%2026.88%20Z%20M%209.852%2026.813%20L%209.663%2026.813%20L%209.663%2026.948%20L%209.852%2026.948%20Z%20M%2010.865%2027.811%20C%2010.865%2027.26%2010.411%2026.813%209.852%2026.813%20L%209.852%2026.948%20C%2010.335%2026.948%2010.727%2027.335%2010.727%2027.811%20Z%20M%2010.865%2028.928%20L%2010.865%2027.811%20L%2010.727%2027.811%20L%2010.727%2028.928%20Z%20M%208.529%2028.996%20L%2010.796%2028.996%20L%2010.796%2028.86%20L%208.529%2028.86%20Z%20M%208.372%2028.996%20L%208.529%2028.996%20L%208.529%2028.86%20L%208.372%2028.86%20Z%20M%205.507%2028.996%20L%208.372%2028.996%20L%208.372%2028.86%20L%205.507%2028.86%20Z%20M%200.218%2028.996%20L%205.507%2028.996%20L%205.507%2028.86%20L%200.218%2028.86%20Z%20M%200.149%2027.811%20L%200.149%2028.928%20L%200.287%2028.928%20L%200.287%2027.811%20Z%20M%201.162%2026.813%20C%200.603%2026.813%200.149%2027.26%200.149%2027.811%20L%200.287%2027.811%20C%200.287%2027.335%200.679%2026.948%201.162%2026.948%20Z%20M%201.351%2026.813%20L%201.162%2026.813%20L%201.162%2026.948%20L%201.351%2026.948%20Z%20M%201.282%2025.763%20L%201.282%2026.88%20L%201.42%2026.88%20L%201.42%2025.763%20Z%20M%202.296%2024.765%20C%201.736%2024.765%201.282%2025.212%201.282%2025.763%20L%201.42%2025.763%20C%201.42%2025.287%201.812%2024.9%202.296%2024.9%20Z%20M%202.227%208.263%20L%202.227%2024.833%20L%202.365%2024.833%20L%202.365%208.263%20Z%20M%201.257%208.331%20L%202.296%208.331%20L%202.296%208.195%20L%201.257%208.195%20Z%20M%20-0.037%204.187%20L%201.191%208.282%20L%201.323%208.244%20L%200.095%204.148%20Z%20M%205.507%204.099%20L%200.029%204.099%20L%200.029%204.235%20L%205.507%204.235%20L%205.507%204.099%20Z%20M%205.438%200.072%20L%205.438%204.167%20L%205.576%204.167%20L%205.576%200.072%20Z%22%20fill%3D%22rgb(255%2C255%2C255)%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E', tagUrl: 'https://warpcast.com/mbj357',
+    textColor: '#FFFFFF',
+    tooltipDescription: 'This address is linked to a Farcaster account',
+    warpcastHandle: 'duckYduck',
+  },
+};
+
+export const noteTag: AddressMetadataTagApi = {
+  slug: 'scam-tag',
+  name: 'Phish 🐟',
+  tagType: 'note',
+  ordinal: 100,
+  meta: {
+    alertBgColor: 'deeppink',
+    alertTextColor: 'white',
+    data: '<b>Warning!</b> This is scam! See the <a href="https://example.com" target="_blank">report</a>',
+  },
+};
diff --git a/mocks/metadata/appActionButton.ts b/mocks/metadata/appActionButton.ts
new file mode 100644
index 0000000000..47938638cd
--- /dev/null
+++ b/mocks/metadata/appActionButton.ts
@@ -0,0 +1,38 @@
+import type { AddressMetadataTagApi } from 'types/api/addressMetadata';
+
+const appID = 'uniswap';
+const appMarketplaceURL = 'https://example.com';
+export const appLogoURL = 'https://localhost:3100/icon.svg';
+const appActionButtonText = 'Swap';
+const textColor = '#FFFFFF';
+const bgColor = '#FF007A';
+
+export const buttonWithoutStyles: AddressMetadataTagApi['meta'] = {
+  appID,
+  appMarketplaceURL,
+  appLogoURL,
+  appActionButtonText,
+};
+
+export const linkWithoutStyles: AddressMetadataTagApi['meta'] = {
+  appMarketplaceURL,
+  appLogoURL,
+  appActionButtonText,
+};
+
+export const buttonWithStyles: AddressMetadataTagApi['meta'] = {
+  appID,
+  appMarketplaceURL,
+  appLogoURL,
+  appActionButtonText,
+  textColor,
+  bgColor,
+};
+
+export const linkWithStyles: AddressMetadataTagApi['meta'] = {
+  appMarketplaceURL,
+  appLogoURL,
+  appActionButtonText,
+  textColor,
+  bgColor,
+};
diff --git a/mocks/metadata/publicTagTypes.ts b/mocks/metadata/publicTagTypes.ts
new file mode 100644
index 0000000000..80bf92acba
--- /dev/null
+++ b/mocks/metadata/publicTagTypes.ts
@@ -0,0 +1,34 @@
+export const publicTagTypes = {
+  tagTypes: [
+    {
+      id: '96f9db76-02fc-477d-a003-640a0c5e7e15',
+      type: 'name' as const,
+      description: 'Alias for the address',
+    },
+    {
+      id: 'e75f396e-f52a-44c9-8790-a1dbae496b72',
+      type: 'generic' as const,
+      description: 'Group classification for the address',
+    },
+    {
+      id: '11a2d4f3-412e-4eb7-b663-86c6f48cdec3',
+      type: 'information' as const,
+      description: 'Tags with custom data for the address, e.g. additional link to project, or classification details, or minor account details',
+    },
+    {
+      id: 'd37443d4-748f-4314-a4a0-283b666e9f29',
+      type: 'classifier' as const,
+      description: 'E.g. "ERC20", "Contract", "CEX", "DEX", "NFT"',
+    },
+    {
+      id: 'ea9d0f91-9b46-44ff-be70-128bac468f6f',
+      type: 'protocol' as const,
+      description: 'Special tag type for protocol-related contracts, e.g. for bridges',
+    },
+    {
+      id: 'd2600acb-473c-445f-ac72-ed6fef53e06a',
+      type: 'note' as const,
+      description: 'Short general-purpose description for the address',
+    },
+  ],
+};
diff --git a/mocks/mud/mudTables.ts b/mocks/mud/mudTables.ts
new file mode 100644
index 0000000000..b5f0186c91
--- /dev/null
+++ b/mocks/mud/mudTables.ts
@@ -0,0 +1,94 @@
+/* eslint-disable max-len */
+import type { AddressMudRecord, AddressMudRecords, AddressMudRecordsItem, AddressMudTables } from 'types/api/address';
+import type { MudWorldSchema, MudWorldTable } from 'types/api/mudWorlds';
+
+export const table1: MudWorldTable = {
+  table_full_name: 'tb.store.Tables',
+  table_id: '0x746273746f72650000000000000000005461626c657300000000000000000000',
+  table_name: 'Tables',
+  table_namespace: 'store',
+  table_type: 'onchain',
+};
+
+export const table2: MudWorldTable = {
+  table_full_name: 'ot.world.FunctionSignatur',
+  table_id: '0x6f74776f726c6400000000000000000046756e6374696f6e5369676e61747572',
+  table_name: 'FunctionSignatur',
+  table_namespace: 'world',
+  table_type: 'offchain',
+};
+
+export const schema1: MudWorldSchema = {
+  key_names: [ 'moduleAddress', 'argumentsHash' ],
+  key_types: [ 'address', 'bytes32' ],
+  value_names: [ 'fieldLayout', 'keySchema', 'valueSchema', 'abiEncodedKeyNames', 'abiEncodedFieldNames' ],
+  value_types: [ 'bytes32', 'bytes32', 'bytes32', 'bytes', 'bytes' ],
+};
+
+export const schema2: MudWorldSchema = {
+  key_names: [],
+  key_types: [],
+  value_names: [ 'value' ],
+  value_types: [ 'address' ],
+};
+
+export const mudTables: AddressMudTables = {
+  items: [
+    {
+      table: table1,
+      schema: schema1,
+    },
+    {
+      table: table2,
+      schema: schema2,
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    table_id: '1',
+  },
+};
+
+const record: AddressMudRecordsItem = {
+  decoded: {
+    abiEncodedFieldNames: '0x00000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000000003000000000000000000000000000000000000000000000000000000000000006000000000000000000000000000000000000000000000000000000000000000a000000000000000000000000000000000000000000000000000000000000000e00000000000000000000000000000000000000000000000000000000000000006706c617965720000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000576616c7565000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000974696d657374616d700000000000000000000000000000000000000000000000',
+    abiEncodedKeyNames: '0x00000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000000000000000002000000000000000000000000000000000000000000000000000000000000000026964000000000000000000000000000000000000000000000000000000000000',
+    goldCosts: [ '100000', '150000', '200000', '250000', '400000', '550000', '700000' ],
+    prototypeIds: [
+      '0x53776f7264736d616e0000000000000000000000000000000000000000000000',
+      '0x50696b656d616e00000000000000000000000000000000000000000000000000',
+      '0x50696b656d616e00000000000000000000000000000000000000000000000000',
+      '0x4172636865720000000000000000000000000000000000000000000000000000',
+      '0x4b6e696768740000000000000000000000000000000000000000000000000000',
+    ],
+    keySchema: '0x002001001f000000000000000000000000000000000000000000000000000000',
+    tableId: '0x6f74000000000000000000000000000044726177557064617465000000000000',
+    valueSchema: '0x00540300611f1f00000000000000000000000000000000000000000000000000',
+  },
+  id: '0x007a651a000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000007',
+  is_deleted: false,
+  timestamp: '2024-05-09T15:14:32.000000Z',
+};
+
+export const mudRecords: AddressMudRecords = {
+  items: [ record, record ],
+  next_page_params: {
+    items_count: 50,
+    key0: '1',
+    key1: '2',
+    key_bytes: '3',
+  },
+  schema: {
+    key_names: [ 'tableId' ],
+    key_types: [ 'bytes32' ],
+    value_names: [ 'prototypeIds', 'goldCosts', 'keySchema', 'valueSchema', 'abiEncodedKeyNames', 'abiEncodedFieldNames' ],
+    value_types: [ 'bytes32[]', 'int32[]', 'bytes32', 'bytes32', 'bytes32', 'bytes', 'bytes' ],
+  },
+  table: table1,
+};
+
+export const mudRecord: AddressMudRecord = {
+  record,
+  schema: mudRecords.schema,
+  table: table1,
+};
diff --git a/mocks/mud/mudWorlds.ts b/mocks/mud/mudWorlds.ts
new file mode 100644
index 0000000000..2d8218e884
--- /dev/null
+++ b/mocks/mud/mudWorlds.ts
@@ -0,0 +1,27 @@
+import type { MudWorldsResponse } from 'types/api/mudWorlds';
+
+import { withName, withoutName } from 'mocks/address/address';
+
+export const mudWorlds: MudWorldsResponse = {
+  items: [
+    {
+      address: withName,
+      coin_balance: '300000000000000000',
+      tx_count: 3938,
+    },
+    {
+      address: withoutName,
+      coin_balance: '0',
+      tx_count: 0,
+    },
+    {
+      address: withoutName,
+      coin_balance: '0',
+      tx_count: 0,
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    world: '0x18f01f12ca21b6fc97b917c3e32f671f8a933caa',
+  },
+};
diff --git a/mocks/l2deposits/deposits.ts b/mocks/optimism/deposits.ts
similarity index 100%
rename from mocks/l2deposits/deposits.ts
rename to mocks/optimism/deposits.ts
diff --git a/mocks/optimism/disputeGames.ts b/mocks/optimism/disputeGames.ts
new file mode 100644
index 0000000000..f522775cac
--- /dev/null
+++ b/mocks/optimism/disputeGames.ts
@@ -0,0 +1,26 @@
+export const data = {
+  items: [
+    {
+      contract_address: '0x5cbe1b88b6357e6a8f0821bea72cc0b88c231f1c',
+      created_at: '2022-05-27T01:13:48.000000Z',
+      game_type: 0,
+      index: 6662,
+      l2_block_number: 12542890,
+      resolved_at: null,
+      status: 'In progress',
+    },
+    {
+      contract_address: '0x5cbe1b88b6357e6a8f0821bea72cc0b88c231f1c',
+      created_at: '2022-05-27T01:13:48.000000Z',
+      game_type: 0,
+      index: 6662,
+      l2_block_number: 12542890,
+      resolved_at: '2022-05-27T01:13:48.000000Z',
+      status: 'Defender wins',
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    index: 8382363,
+  },
+};
diff --git a/mocks/l2outputRoots/outputRoots.ts b/mocks/optimism/outputRoots.ts
similarity index 100%
rename from mocks/l2outputRoots/outputRoots.ts
rename to mocks/optimism/outputRoots.ts
diff --git a/mocks/optimism/txnBatches.ts b/mocks/optimism/txnBatches.ts
new file mode 100644
index 0000000000..e7306c6ae3
--- /dev/null
+++ b/mocks/optimism/txnBatches.ts
@@ -0,0 +1,104 @@
+import type {
+  OptimismL2TxnBatchTypeCallData,
+  OptimismL2TxnBatchTypeCelestia,
+  OptimismL2TxnBatchTypeEip4844,
+  OptimisticL2TxnBatchesResponse,
+} from 'types/api/optimisticL2';
+
+export const txnBatchesData: OptimisticL2TxnBatchesResponse = {
+  items: [
+    {
+      batch_data_container: 'in_blob4844',
+      internal_id: 260998,
+      l1_timestamp: '2022-11-10T11:29:11.000000Z',
+      l1_tx_hashes: [
+        '0x9553351f6bd1577f4e782738c087be08697fb11f3b91745138d71ba166d62c3b',
+      ],
+      l2_block_end: 124882074,
+      l2_block_start: 124881833,
+      tx_count: 4011,
+    },
+    {
+      batch_data_container: 'in_calldata',
+      internal_id: 260997,
+      l1_timestamp: '2022-11-03T11:20:59.000000Z',
+      l1_tx_hashes: [
+        '0x80f5fba70d5685bc2b70df836942e892b24afa7bba289a2fac0ca8f4d554cc72',
+      ],
+      l2_block_end: 124881832,
+      l2_block_start: 124881613,
+      tx_count: 4206,
+    },
+    {
+      internal_id: 260996,
+      l1_timestamp: '2024-09-03T11:14:23.000000Z',
+      l1_tx_hashes: [
+        '0x39f4c46cae57bae936acb9159e367794f41f021ed3788adb80ad93830edb5f22',
+      ],
+      l2_block_end: 124881612,
+      l2_block_start: 124881380,
+      tx_count: 4490,
+    },
+  ],
+  next_page_params: {
+    id: 5902834,
+    items_count: 50,
+  },
+};
+
+export const txnBatchTypeCallData: OptimismL2TxnBatchTypeCallData = {
+  batch_data_container: 'in_calldata',
+  internal_id: 309123,
+  l1_timestamp: '2022-08-10T10:30:24.000000Z',
+  l1_tx_hashes: [
+    '0x478c45f182631ae6f7249d40f31fdac36f41d88caa2e373fba35340a7345ca67',
+  ],
+  l2_block_end: 10146784,
+  l2_block_start: 10145379,
+  tx_count: 1608,
+};
+
+export const txnBatchTypeCelestia: OptimismL2TxnBatchTypeCelestia = {
+  batch_data_container: 'in_celestia',
+  blobs: [
+    {
+      commitment: '0x39c18c21c6b127d58809b8d3b5931472421f9b51532959442f53038f10b78f2a',
+      height: 2584868,
+      l1_timestamp: '2024-08-28T16:51:12.000000Z',
+      l1_transaction_hash: '0x2bb0b96a8ba0f063a243ac3dee0b2f2d87edb2ba9ef44bfcbc8ed191af1c4c24',
+      namespace: '0x00000000000000000000000000000000000000000008e5f679bf7116cb',
+    },
+  ],
+  internal_id: 309667,
+  l1_timestamp: '2022-08-28T16:51:12.000000Z',
+  l1_tx_hashes: [
+    '0x2bb0b96a8ba0f063a243ac3dee0b2f2d87edb2ba9ef44bfcbc8ed191af1c4c24',
+  ],
+  l2_block_end: 10935879,
+  l2_block_start: 10934514,
+  tx_count: 1574,
+};
+
+export const txnBatchTypeEip4844: OptimismL2TxnBatchTypeEip4844 = {
+  batch_data_container: 'in_blob4844',
+  blobs: [
+    {
+      hash: '0x012a4f0c6db6bce9d3d357b2bf847764320bcb0107ab318f3a532f637bc60dfe',
+      l1_timestamp: '2022-08-23T03:59:12.000000Z',
+      l1_transaction_hash: '0x3870f136497e5501dc20d0974daf379c8636c958794d59a9c90d4f8a9f0ed20a',
+    },
+    {
+      hash: '0x01d1097cce23229931afbc2fd1cf0d707da26df7b39cef1c542276ae718de4f6',
+      l1_timestamp: '2022-08-23T03:59:12.000000Z',
+      l1_transaction_hash: '0x3870f136497e5501dc20d0974daf379c8636c958794d59a9c90d4f8a9f0ed20a',
+    },
+  ],
+  internal_id: 2538459,
+  l1_timestamp: '2022-08-23T03:59:12.000000Z',
+  l1_tx_hashes: [
+    '0x3870f136497e5501dc20d0974daf379c8636c958794d59a9c90d4f8a9f0ed20a',
+  ],
+  l2_block_end: 16291502,
+  l2_block_start: 16291373,
+  tx_count: 704,
+};
diff --git a/mocks/optimism/withdrawals.ts b/mocks/optimism/withdrawals.ts
new file mode 100644
index 0000000000..046b467402
--- /dev/null
+++ b/mocks/optimism/withdrawals.ts
@@ -0,0 +1,50 @@
+import type { OptimisticL2WithdrawalsResponse } from 'types/api/optimisticL2';
+
+export const data: OptimisticL2WithdrawalsResponse = {
+  items: [
+    {
+      challenge_period_end: null,
+      from: {
+        hash: '0x67aab90c548b284be30b05c376001b4db90b87ba',
+        implementations: null,
+        is_contract: false,
+        is_verified: false,
+        name: null,
+        private_tags: [],
+        public_tags: [],
+        watchlist_names: [],
+        ens_domain_name: null,
+      },
+      l1_tx_hash: '0x1a235bee32ac10cb7efdad98415737484ca66386e491cde9e17d42b136dca684',
+      l2_timestamp: '2022-02-15T12:50:02.000000Z',
+      l2_tx_hash: '0x918cd8c5c24c17e06cd02b0379510c4ad56324bf153578fb9caaaa2fe4e7dc35',
+      msg_nonce: 396,
+      msg_nonce_version: 1,
+      status: 'Ready to prove',
+    },
+    {
+      challenge_period_end: null,
+      from: null,
+      l1_tx_hash: null,
+      l2_timestamp: null,
+      l2_tx_hash: '0x2f117bee32ac10cb7efdad98415737484ca66386e491cde9e17d42b136def593',
+      msg_nonce: 391,
+      msg_nonce_version: 1,
+      status: 'Ready to prove',
+    },
+    {
+      challenge_period_end: '2022-11-11T12:50:02.000000Z',
+      from: null,
+      l1_tx_hash: null,
+      l2_timestamp: null,
+      l2_tx_hash: '0xe14b1f46838176702244a5343629bcecf728ca2d9881d47b4ce46e00c387d7e3',
+      msg_nonce: 390,
+      msg_nonce_version: 1,
+      status: 'Ready for relay',
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    nonce: '1766847064778384329583297500742918515827483896875618958121606201292620123',
+  },
+};
diff --git a/mocks/search/index.ts b/mocks/search/index.ts
index 4009a6d460..e27b508962 100644
--- a/mocks/search/index.ts
+++ b/mocks/search/index.ts
@@ -7,6 +7,7 @@ import type {
   SearchResult,
   SearchResultUserOp,
   SearchResultBlob,
+  SearchResultDomain,
 } from 'types/api/search';
 
 export const token1: SearchResultToken = {
@@ -95,6 +96,15 @@ export const contract1: SearchResultAddressOrContractOrUniversalProfile = {
   url: '/address/0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
 };
 
+export const contract2: SearchResultAddressOrContractOrUniversalProfile = {
+  address: '0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
+  name: 'Super utko',
+  type: 'contract' as const,
+  is_smart_contract_verified: true,
+  certified: true,
+  url: '/address/0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
+};
+
 export const label1: SearchResultLabel = {
   address: '0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
   name: 'utko',
@@ -123,6 +133,20 @@ export const blob1: SearchResultBlob = {
   timestamp: null,
 };
 
+export const domain1: SearchResultDomain = {
+  address: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045',
+  ens_info: {
+    address_hash: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045',
+    expiry_date: '2039-09-01T07:36:18.000Z',
+    name: 'vitalik.eth',
+    names_count: 1,
+  },
+  is_smart_contract_verified: false,
+  name: null,
+  type: 'ens_domain',
+  url: '/address/0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045',
+};
+
 export const baseResponse: SearchResult = {
   items: [
     token1,
@@ -132,6 +156,7 @@ export const baseResponse: SearchResult = {
     contract1,
     tx1,
     blob1,
+    domain1,
   ],
   next_page_params: null,
 };
diff --git a/mocks/shibarium/deposits.ts b/mocks/shibarium/deposits.ts
index 98bf9d925d..7081042cd8 100644
--- a/mocks/shibarium/deposits.ts
+++ b/mocks/shibarium/deposits.ts
@@ -8,7 +8,7 @@ export const data: ShibariumDepositsResponse = {
       l1_transaction_hash: '0xaf3e5f4ef03eac22a622b3434c5dc9f4465aa291900a86bcf0ad9fb14429f05e',
       user: {
         hash: '0x6197d1eef304eb5284a0f6720f79403b4e9bf3a5',
-        implementation_name: null,
+        implementations: null,
         is_contract: false,
         is_verified: false,
         name: null,
@@ -25,7 +25,7 @@ export const data: ShibariumDepositsResponse = {
       l1_transaction_hash: '0xaf3e5f4ef03eac22a622b3434c5dc9f4465aa291900a86bcf0ad9fb14429f05e',
       user: {
         hash: '0x6197d1eef304eb5284a0f6720f79403b4e9bf3a5',
-        implementation_name: null,
+        implementations: null,
         is_contract: false,
         is_verified: false,
         name: null,
@@ -42,7 +42,7 @@ export const data: ShibariumDepositsResponse = {
       l1_transaction_hash: '0xaf3e5f4ef03eac22a622b3434c5dc9f4465aa291900a86bcf0ad9fb14429f05e',
       user: {
         hash: '0x6197d1eef304eb5284a0f6720f79403b4e9bf3a5',
-        implementation_name: null,
+        implementations: null,
         is_contract: false,
         is_verified: false,
         name: null,
diff --git a/mocks/shibarium/withdrawals.ts b/mocks/shibarium/withdrawals.ts
index 79851f3d1b..6c1e875264 100644
--- a/mocks/shibarium/withdrawals.ts
+++ b/mocks/shibarium/withdrawals.ts
@@ -8,7 +8,7 @@ export const data: ShibariumWithdrawalsResponse = {
       l1_transaction_hash: '0xaf3e5f4ef03eac22a622b3434c5dc9f4465aa291900a86bcf0ad9fb14429f05e',
       user: {
         hash: '0x6197d1eef304eb5284a0f6720f79403b4e9bf3a5',
-        implementation_name: null,
+        implementations: null,
         is_contract: false,
         is_verified: false,
         name: null,
@@ -25,7 +25,7 @@ export const data: ShibariumWithdrawalsResponse = {
       l1_transaction_hash: '0xaf3e5f4ef03eac22a622b3434c5dc9f4465aa291900a86bcf0ad9fb14429f05e',
       user: {
         hash: '0x6197d1eef304eb5284a0f6720f79403b4e9bf3a5',
-        implementation_name: null,
+        implementations: null,
         is_contract: false,
         is_verified: false,
         name: null,
@@ -42,7 +42,7 @@ export const data: ShibariumWithdrawalsResponse = {
       l1_transaction_hash: '0xaf3e5f4ef03eac22a622b3434c5dc9f4465aa291900a86bcf0ad9fb14429f05e',
       user: {
         hash: '0x6197d1eef304eb5284a0f6720f79403b4e9bf3a5',
-        implementation_name: null,
+        implementations: null,
         is_contract: false,
         is_verified: false,
         name: null,
diff --git a/mocks/stats/index.ts b/mocks/stats/index.ts
index d9d00e36e1..0203db5838 100644
--- a/mocks/stats/index.ts
+++ b/mocks/stats/index.ts
@@ -1,9 +1,12 @@
 import _mapValues from 'lodash/mapValues';
 
+import type { HomeStats } from 'types/api/stats';
+
 export const base = {
   average_block_time: 6212.0,
   coin_price: '0.00199678',
   coin_price_change_percentage: -7.42,
+  coin_image: 'http://localhost:3100/utia.jpg',
   gas_prices: {
     average: {
       fiat_price: '1.39',
@@ -46,25 +49,43 @@ export const withBtcLocked = {
   rootstock_locked_btc: '3337493406696977561374',
 };
 
-export const withoutFiatPrices = {
+export const withoutFiatPrices: HomeStats = {
   ...base,
   gas_prices: _mapValues(base.gas_prices, (price) => price ? ({ ...price, fiat_price: null }) : null),
 };
 
-export const withoutGweiPrices = {
+export const withoutGweiPrices: HomeStats = {
   ...base,
   gas_prices: _mapValues(base.gas_prices, (price) => price ? ({ ...price, price: null }) : null),
 };
 
-export const withoutBothPrices = {
+export const withoutBothPrices: HomeStats = {
   ...base,
   gas_prices: _mapValues(base.gas_prices, (price) => price ? ({ ...price, price: null, fiat_price: null }) : null),
 };
 
-export const noChartData = {
+export const withoutGasInfo: HomeStats = {
+  ...base,
+  gas_prices: null,
+};
+
+export const withSecondaryCoin: HomeStats = {
+  ...base,
+  secondary_coin_price: '3.398',
+  secondary_coin_image: 'http://localhost:3100/secondary_utia.jpg',
+};
+
+export const noChartData: HomeStats = {
   ...base,
   transactions_today: null,
   coin_price: null,
   market_cap: null,
   tvl: null,
 };
+
+export const indexingStatus = {
+  finished_indexing_blocks: false,
+  indexed_blocks_ratio: '0.1',
+  finished_indexing: true,
+  indexed_internal_transactions_ratio: '1',
+};
diff --git a/mocks/stats/line.ts b/mocks/stats/line.ts
index 47de79b184..799cff4c45 100644
--- a/mocks/stats/line.ts
+++ b/mocks/stats/line.ts
@@ -1,128 +1,161 @@
-export const averageGasPrice = {
+import type * as stats from '@blockscout/stats-types';
+
+export const averageGasPrice: stats.LineChart = {
   chart: [
     {
       date: '2023-12-22',
       value: '37.7804422597599',
+      is_approximate: false,
     },
     {
       date: '2023-12-23',
       value: '25.84889883009387',
+      is_approximate: false,
     },
     {
       date: '2023-12-24',
       value: '25.818463227198574',
+      is_approximate: false,
     },
     {
       date: '2023-12-25',
       value: '26.045513050051298',
+      is_approximate: false,
     },
     {
       date: '2023-12-26',
       value: '21.42600692652399',
+      is_approximate: false,
     },
     {
       date: '2023-12-27',
       value: '31.066730409846656',
+      is_approximate: false,
     },
     {
       date: '2023-12-28',
       value: '33.63955781902089',
+      is_approximate: false,
     },
     {
       date: '2023-12-29',
       value: '28.064736756058384',
+      is_approximate: false,
     },
     {
       date: '2023-12-30',
       value: '23.074500869678175',
+      is_approximate: false,
     },
     {
       date: '2023-12-31',
       value: '17.651005734615133',
+      is_approximate: false,
     },
     {
       date: '2024-01-01',
       value: '14.906085174476441',
+      is_approximate: false,
     },
     {
       date: '2024-01-02',
       value: '22.28459059038656',
+      is_approximate: false,
     },
     {
       date: '2024-01-03',
       value: '39.8311646806592',
+      is_approximate: false,
     },
     {
       date: '2024-01-04',
       value: '26.09989322256083',
+      is_approximate: false,
     },
     {
       date: '2024-01-05',
       value: '22.821996688111998',
+      is_approximate: false,
     },
     {
       date: '2024-01-06',
       value: '20.32680041262083',
+      is_approximate: false,
     },
     {
       date: '2024-01-07',
       value: '32.535045831809704',
+      is_approximate: false,
     },
     {
       date: '2024-01-08',
       value: '27.443477102139482',
+      is_approximate: false,
     },
     {
       date: '2024-01-09',
       value: '20.7911332558055',
+      is_approximate: false,
     },
     {
       date: '2024-01-10',
       value: '42.10740192523919',
+      is_approximate: false,
     },
     {
       date: '2024-01-11',
       value: '35.75215680343582',
+      is_approximate: false,
     },
     {
       date: '2024-01-12',
       value: '27.430414798093253',
+      is_approximate: false,
     },
     {
       date: '2024-01-13',
       value: '20.170934096589875',
+      is_approximate: false,
     },
     {
       date: '2024-01-14',
       value: '38.79660984371034',
+      is_approximate: false,
     },
     {
       date: '2024-01-15',
       value: '26.140740484554204',
+      is_approximate: false,
     },
     {
       date: '2024-01-16',
       value: '36.708543184194156',
+      is_approximate: false,
     },
     {
       date: '2024-01-17',
       value: '40.325438794298876',
+      is_approximate: false,
     },
     {
       date: '2024-01-18',
       value: '37.55145309930694',
+      is_approximate: false,
     },
     {
       date: '2024-01-19',
       value: '33.271450114434664',
+      is_approximate: false,
     },
     {
       date: '2024-01-20',
       value: '19.303304377685638',
+      is_approximate: false,
     },
     {
       date: '2024-01-21',
       value: '14.375908594704976',
+      is_approximate: false,
     },
   ],
 };
diff --git a/mocks/stats/lines.ts b/mocks/stats/lines.ts
index cc55987919..9f8870249f 100644
--- a/mocks/stats/lines.ts
+++ b/mocks/stats/lines.ts
@@ -1,6 +1,6 @@
-import { currencyUnits } from '../../lib/units';
+import type * as stats from '@blockscout/stats-types';
 
-export const base = {
+export const base: stats.LineCharts = {
   sections: [
     {
       id: 'accounts',
@@ -10,19 +10,19 @@ export const base = {
           id: 'accountsGrowth',
           title: 'Accounts growth',
           description: 'Cumulative accounts number per period',
-          units: null,
+          units: undefined,
         },
         {
           id: 'activeAccounts',
           title: 'Active accounts',
           description: 'Active accounts number per period',
-          units: null,
+          units: undefined,
         },
         {
           id: 'newAccounts',
           title: 'New accounts',
           description: 'New accounts number per day',
-          units: null,
+          units: undefined,
         },
       ],
     },
@@ -33,32 +33,32 @@ export const base = {
         {
           id: 'averageTxnFee',
           title: 'Average transaction fee',
-          description: `The average amount in ${ currencyUnits.ether } spent per transaction`,
-          units: currencyUnits.ether,
+          description: 'The average amount in ETH spent per transaction',
+          units: 'ETH',
         },
         {
           id: 'newTxns',
           title: 'New transactions',
           description: 'New transactions number',
-          units: null,
+          units: undefined,
         },
         {
           id: 'txnsFee',
           title: 'Transactions fees',
           description: 'Amount of tokens paid as fees',
-          units: currencyUnits.ether,
+          units: 'ETH',
         },
         {
           id: 'txnsGrowth',
           title: 'Transactions growth',
           description: 'Cumulative transactions number',
-          units: null,
+          units: undefined,
         },
         {
           id: 'txnsSuccessRate',
           title: 'Transactions success rate',
           description: 'Successful transactions rate per day',
-          units: null,
+          units: undefined,
         },
       ],
     },
@@ -70,7 +70,7 @@ export const base = {
           id: 'averageBlockRewards',
           title: 'Average block rewards',
           description: 'Average amount of distributed reward in tokens per day',
-          units: currencyUnits.ether,
+          units: 'ETH',
         },
         {
           id: 'averageBlockSize',
@@ -82,7 +82,7 @@ export const base = {
           id: 'newBlocks',
           title: 'New blocks',
           description: 'New blocks number',
-          units: null,
+          units: undefined,
         },
       ],
     },
@@ -92,9 +92,9 @@ export const base = {
       charts: [
         {
           id: 'newNativeCoinTransfers',
-          title: `New ${ currencyUnits.ether } transfers`,
+          title: 'New ETH transfers',
           description: 'New token transfers number for the period',
-          units: null,
+          units: undefined,
         },
       ],
     },
@@ -106,7 +106,7 @@ export const base = {
           id: 'averageGasLimit',
           title: 'Average gas limit',
           description: 'Average gas limit per block for the period',
-          units: null,
+          units: undefined,
         },
         {
           id: 'averageGasPrice',
@@ -118,7 +118,7 @@ export const base = {
           id: 'gasUsedGrowth',
           title: 'Gas used growth',
           description: 'Cumulative gas used for the period',
-          units: null,
+          units: undefined,
         },
       ],
     },
@@ -130,13 +130,13 @@ export const base = {
           id: 'newVerifiedContracts',
           title: 'New verified contracts',
           description: 'New verified contracts number for the period',
-          units: null,
+          units: undefined,
         },
         {
           id: 'verifiedContractsGrowth',
           title: 'Verified contracts growth',
           description: 'Cumulative number verified contracts for the period',
-          units: null,
+          units: undefined,
         },
       ],
     },
diff --git a/mocks/tokens/tokenInfo.ts b/mocks/tokens/tokenInfo.ts
index a732712775..a22c7537e5 100644
--- a/mocks/tokens/tokenInfo.ts
+++ b/mocks/tokens/tokenInfo.ts
@@ -8,7 +8,7 @@ export const tokenInfo: TokenInfo = {
   holders: '46554',
   name: 'ARIANEE',
   symbol: 'ARIA',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   total_supply: '1235',
   icon_url: 'http://localhost:3000/token-icon.png',
 };
@@ -27,7 +27,7 @@ export const tokenInfoERC20a: TokenInfo<'ERC-20'> = {
   name: 'hyfi.token',
   symbol: 'HyFi',
   total_supply: '369000000000000000000000000',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   icon_url: 'http://localhost:3000/token-icon.png',
 };
 
@@ -40,7 +40,7 @@ export const tokenInfoERC20b: TokenInfo<'ERC-20'> = {
   name: 'USD Coin',
   symbol: 'USDC',
   total_supply: '900000000000000000000000000',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   icon_url: null,
 };
 
@@ -53,7 +53,7 @@ export const tokenInfoERC20c: TokenInfo<'ERC-20'> = {
   name: 'Ethereum',
   symbol: 'ETH',
   total_supply: '1000000000000000000000000',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   icon_url: null,
 };
 
@@ -66,7 +66,7 @@ export const tokenInfoERC20d: TokenInfo<'ERC-20'> = {
   name: 'Zeta',
   symbol: 'ZETA',
   total_supply: '2100000000000000000000000000',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   icon_url: null,
 };
 
@@ -79,7 +79,7 @@ export const tokenInfoERC20LongSymbol: TokenInfo<'ERC-20'> = {
   name: 'Zeta',
   symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY',
   total_supply: '2100000000000000000000000000',
-  type: 'ERC-20',
+  type: 'ERC-20' as const,
   icon_url: null,
 };
 
@@ -92,7 +92,7 @@ export const tokenInfoERC721a: TokenInfo<'ERC-721'> = {
   name: 'HyFi Athena',
   symbol: 'HYFI_ATHENA',
   total_supply: '105',
-  type: 'ERC-721',
+  type: 'ERC-721' as const,
   icon_url: null,
 };
 
@@ -105,7 +105,7 @@ export const tokenInfoERC721b: TokenInfo<'ERC-721'> = {
   name: 'World Of Women Galaxy',
   symbol: 'WOWG',
   total_supply: null,
-  type: 'ERC-721',
+  type: 'ERC-721' as const,
   icon_url: null,
 };
 
@@ -118,7 +118,7 @@ export const tokenInfoERC721c: TokenInfo<'ERC-721'> = {
   name: 'Puma',
   symbol: 'PUMA',
   total_supply: null,
-  type: 'ERC-721',
+  type: 'ERC-721' as const,
   icon_url: null,
 };
 
@@ -131,7 +131,7 @@ export const tokenInfoERC721LongSymbol: TokenInfo<'ERC-721'> = {
   name: 'Puma',
   symbol: 'ipfs://QmUpFUfVKDCWeZQk5pvDFUxnpQP9N6eLSHhNUy49T1JVtY',
   total_supply: null,
-  type: 'ERC-721',
+  type: 'ERC-721' as const,
   icon_url: null,
 };
 
@@ -144,7 +144,7 @@ export const tokenInfoERC1155a: TokenInfo<'ERC-1155'> = {
   name: 'HyFi Membership',
   symbol: 'HYFI_MEMBERSHIP',
   total_supply: '482',
-  type: 'ERC-1155',
+  type: 'ERC-1155' as const,
   icon_url: null,
 };
 
@@ -157,7 +157,7 @@ export const tokenInfoERC1155b: TokenInfo<'ERC-1155'> = {
   name: 'WinkyVerse Collections',
   symbol: 'WVC',
   total_supply: '4943',
-  type: 'ERC-1155',
+  type: 'ERC-1155' as const,
   icon_url: null,
 };
 
@@ -170,7 +170,7 @@ export const tokenInfoERC1155WithoutName: TokenInfo<'ERC-1155'> = {
   name: null,
   symbol: null,
   total_supply: '482',
-  type: 'ERC-1155',
+  type: 'ERC-1155' as const,
   icon_url: null,
 };
 
@@ -184,7 +184,7 @@ export const tokenInfoERC404: TokenInfo<'ERC-404'> = {
   name: 'OMNI404',
   symbol: 'O404',
   total_supply: '6482275000000000000',
-  type: 'ERC-404',
+  type: 'ERC-404' as const,
 };
 
 export const bridgedTokenA: TokenInfo<'ERC-20'> = {
diff --git a/mocks/tokens/tokenInstance.ts b/mocks/tokens/tokenInstance.ts
index 4173c0a609..712c466b7d 100644
--- a/mocks/tokens/tokenInstance.ts
+++ b/mocks/tokens/tokenInstance.ts
@@ -5,9 +5,9 @@ import * as addressMock from '../address/address';
 
 export const base: TokenInstance = {
   animation_url: null,
-  external_app_url: null,
+  external_app_url: 'https://duck.nft/get-your-duck-today',
   id: '32925298983216553915666621415831103694597106215670571463977478984525997408266',
-  image_url: null,
+  image_url: 'https://example.com/image.jpg',
   is_unique: false,
   holder_address_hash: null,
   metadata: {
diff --git a/mocks/tokens/tokenTransfer.ts b/mocks/tokens/tokenTransfer.ts
index 08b87b6858..b88cd499ff 100644
--- a/mocks/tokens/tokenTransfer.ts
+++ b/mocks/tokens/tokenTransfer.ts
@@ -3,7 +3,7 @@ import type { TokenTransfer, TokenTransferResponse } from 'types/api/tokenTransf
 export const erc20: TokenTransfer = {
   from: {
     hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
-    implementation_name: null,
+    implementations: null,
     is_contract: true,
     is_verified: true,
     name: 'ArianeeStore',
@@ -14,7 +14,7 @@ export const erc20: TokenTransfer = {
   },
   to: {
     hash: '0x7d20a8D54F955b4483A66aB335635ab66e151c51',
-    implementation_name: null,
+    implementations: null,
     is_contract: true,
     is_verified: false,
     name: null,
@@ -50,7 +50,7 @@ export const erc20: TokenTransfer = {
 export const erc721: TokenTransfer = {
   from: {
     hash: '0x621C2a125ec4A6D8A7C7A655A18a2868d35eb43C',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: false,
     name: null,
@@ -61,7 +61,7 @@ export const erc721: TokenTransfer = {
   },
   to: {
     hash: '0x47eE48AEBc4ab9Ed908b805b8c8dAAa71B31Db1A',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: false,
     name: null,
@@ -96,7 +96,7 @@ export const erc721: TokenTransfer = {
 export const erc1155A: TokenTransfer = {
   from: {
     hash: '0x0000000000000000000000000000000000000000',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: false,
     name: null,
@@ -107,7 +107,7 @@ export const erc1155A: TokenTransfer = {
   },
   to: {
     hash: '0xBb36c792B9B45Aaf8b848A1392B0d6559202729E',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: false,
     name: null,
@@ -173,7 +173,7 @@ export const erc1155D: TokenTransfer = {
 export const erc404A: TokenTransfer = {
   from: {
     hash: '0x0000000000000000000000000000000000000000',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: false,
     name: null,
@@ -184,7 +184,7 @@ export const erc404A: TokenTransfer = {
   },
   to: {
     hash: '0xBb36c792B9B45Aaf8b848A1392B0d6559202729E',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: false,
     name: null,
@@ -208,6 +208,7 @@ export const erc404A: TokenTransfer = {
   total: {
     value: '42000000000000000000000000',
     decimals: '18',
+    token_id: null,
   },
   tx_hash: '0x05d6589367633c032d757a69c5fb16c0e33e3994b0d9d1483f82aeee1f05d746',
   type: 'token_transfer',
diff --git a/mocks/txs/internalTxs.ts b/mocks/txs/internalTxs.ts
index 07eb83dc5e..23fc4bf027 100644
--- a/mocks/txs/internalTxs.ts
+++ b/mocks/txs/internalTxs.ts
@@ -6,7 +6,7 @@ export const base: InternalTransaction = {
   error: null,
   from: {
     hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
-    implementation_name: null,
+    implementations: null,
     is_contract: true,
     is_verified: true,
     name: 'ArianeeStore',
@@ -21,7 +21,7 @@ export const base: InternalTransaction = {
   timestamp: '2022-10-10T14:43:05.000000Z',
   to: {
     hash: '0x502a9C8af2441a1E276909405119FaE21F3dC421',
-    implementation_name: null,
+    implementations: null,
     is_contract: true,
     is_verified: true,
     name: 'ArianeeCreditHistory',
@@ -56,7 +56,7 @@ export const withContractCreated: InternalTransaction = {
   },
   created_contract: {
     hash: '0xdda21946FF3FAa027104b15BE6970CA756439F5a',
-    implementation_name: null,
+    implementations: null,
     is_contract: true,
     is_verified: null,
     name: 'Shavuha token',
diff --git a/mocks/txs/state.ts b/mocks/txs/state.ts
index 204fe1c867..d409f4679a 100644
--- a/mocks/txs/state.ts
+++ b/mocks/txs/state.ts
@@ -1,9 +1,9 @@
-import type { TxStateChange } from 'types/api/txStateChanges';
+import type { TxStateChange, TxStateChanges } from 'types/api/txStateChanges';
 
 export const mintToken: TxStateChange = {
   address: {
     hash: '0x0000000000000000000000000000000000000000',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: false,
     name: null,
@@ -35,13 +35,13 @@ export const mintToken: TxStateChange = {
     type: 'ERC-721',
     icon_url: null,
   },
-  type: 'token',
+  type: 'token' as const,
 };
 
 export const receiveMintedToken: TxStateChange = {
   address: {
     hash: '0xC8F71D0ae51AfBdB009E2eC1Ea8CC9Ee204A42B5',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: false,
     name: null,
@@ -73,13 +73,13 @@ export const receiveMintedToken: TxStateChange = {
     type: 'ERC-721',
     icon_url: null,
   },
-  type: 'token',
+  type: 'token' as const,
 };
 
 export const transfer1155Token: TxStateChange = {
   address: {
     hash: '0x51243E83Db20F8FC2761D894067A2A9eb7B158DE',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: false,
     name: null,
@@ -105,13 +105,13 @@ export const transfer1155Token: TxStateChange = {
     type: 'ERC-1155',
   },
   token_id: '1',
-  type: 'token',
+  type: 'token' as const,
 };
 
 export const receiveCoin: TxStateChange = {
   address: {
     hash: '0x8dC847Af872947Ac18d5d63fA646EB65d4D99560',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: null,
     name: null,
@@ -125,13 +125,13 @@ export const receiveCoin: TxStateChange = {
   change: '29726406604060',
   is_miner: true,
   token: null,
-  type: 'coin',
+  type: 'coin' as const,
 };
 
 export const sendCoin: TxStateChange = {
   address: {
     hash: '0xC8F71D0ae51AfBdB009E2eC1Ea8CC9Ee204A42B5',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: null,
     name: null,
@@ -145,13 +145,14 @@ export const sendCoin: TxStateChange = {
   change: '-3844844822720562',
   is_miner: false,
   token: null,
-  type: 'coin',
+  type: 'coin' as const,
 };
 
-export const sendERC20Token = {
+export const sendERC20Token: TxStateChange = {
   address: {
     hash: '0x7f6479df95Aa3036a3BE02DB6300ea201ABd9981',
-    implementation_name: null,
+    ens_domain_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: false,
     name: null,
@@ -173,13 +174,12 @@ export const sendERC20Token = {
     name: 'Tether USD',
     symbol: 'USDT',
     total_supply: '39030615894320966',
-    type: 'ERC-20',
-    token_id: null,
+    type: 'ERC-20' as const,
   },
-  type: 'token',
+  type: 'token' as const,
 };
 
-export const baseResponse = {
+export const baseResponse: TxStateChanges = {
   items: [
     mintToken,
     receiveMintedToken,
diff --git a/mocks/txs/stats.ts b/mocks/txs/stats.ts
new file mode 100644
index 0000000000..7b05dc975a
--- /dev/null
+++ b/mocks/txs/stats.ts
@@ -0,0 +1,8 @@
+import type { TransactionsStats } from 'types/api/transaction';
+
+export const base: TransactionsStats = {
+  pending_transactions_count: '4200',
+  transaction_fees_avg_24h: '22342870314428',
+  transaction_fees_sum_24h: '22184012506492688277',
+  transactions_count_24h: '992890',
+};
diff --git a/mocks/txs/tx.ts b/mocks/txs/tx.ts
index 0b97508282..bae57c630e 100644
--- a/mocks/txs/tx.ts
+++ b/mocks/txs/tx.ts
@@ -1,6 +1,7 @@
 /* eslint-disable max-len */
 import type { Transaction } from 'types/api/transaction';
 
+import * as addressMock from 'mocks/address/address';
 import { publicTag, privateTag, watchlistName } from 'mocks/address/tag';
 import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
 import * as decodedInputDataMock from 'mocks/txs/decodedInputData';
@@ -22,7 +23,7 @@ export const base: Transaction = {
   },
   from: {
     hash: '0x047A81aFB05D9B1f8844bf60fcA05DCCFbC584B9',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     name: null,
     is_verified: null,
@@ -47,8 +48,8 @@ export const base: Transaction = {
   status: 'ok',
   timestamp: '2022-10-10T14:34:30.000000Z',
   to: {
-    hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
-    implementation_name: null,
+    hash: addressMock.hash,
+    implementations: null,
     is_contract: false,
     is_verified: true,
     name: null,
@@ -92,7 +93,7 @@ export const withContractCreation: Transaction = {
   to: null,
   created_contract: {
     hash: '0xdda21946FF3FAa027104b15BE6970CA756439F5a',
-    implementation_name: null,
+    implementations: null,
     is_contract: true,
     is_verified: null,
     name: 'Shavuha token',
@@ -110,8 +111,8 @@ export const withTokenTransfer: Transaction = {
   ...base,
   hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3196',
   to: {
-    hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
-    implementation_name: null,
+    hash: addressMock.hash,
+    implementations: null,
     is_contract: true,
     is_verified: true,
     name: 'ArianeeStore',
@@ -166,8 +167,8 @@ export const withRawRevertReason: Transaction = {
     raw: '4f6e6c79206368616972706572736f6e2063616e206769766520726967687420746f20766f74652e',
   },
   to: {
-    hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
-    implementation_name: null,
+    hash: addressMock.hash,
+    implementations: null,
     is_verified: true,
     is_contract: true,
     name: 'Bad guy',
@@ -283,7 +284,7 @@ export const stabilityTx: Transaction = {
   stability_fee: {
     dapp_address: {
       hash: '0xDc2B93f3291030F3F7a6D9363ac37757f7AD5C43',
-      implementation_name: null,
+      implementations: null,
       is_contract: false,
       is_verified: null,
       name: null,
@@ -299,7 +300,7 @@ export const stabilityTx: Transaction = {
       decimals: '18',
       exchange_rate: '123.567',
       holders: '92',
-      icon_url: null,
+      icon_url: 'https://example.com/icon.png',
       name: 'Stability Gas',
       symbol: 'GAS',
       total_supply: '10000000000000000000000000',
@@ -308,7 +309,7 @@ export const stabilityTx: Transaction = {
     total_fee: '68762500000000',
     validator_address: {
       hash: '0x1432997a4058acbBe562F3c1E79738c142039044',
-      implementation_name: null,
+      implementations: null,
       is_contract: false,
       is_verified: null,
       name: null,
@@ -321,12 +322,30 @@ export const stabilityTx: Transaction = {
   },
 };
 
+export const celoTxn: Transaction = {
+  ...base,
+  celo: {
+    gas_token: {
+      address: '0x874069Fa1Eb16D44d622F2e0Ca25eeA172369bC1',
+      circulating_market_cap: null,
+      decimals: '18',
+      exchange_rate: '0.42',
+      holders: '205738',
+      icon_url: 'https://example.com/icon.png',
+      name: 'Celo Dollar',
+      symbol: 'cUSD',
+      total_supply: '7145754483836626799435133',
+      type: 'ERC-20',
+    },
+  },
+};
+
 export const base2 = {
   ...base,
   hash: '0x02d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193',
   from: {
     ...base.from,
-    hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
+    hash: addressMock.hash,
   },
 };
 
@@ -335,7 +354,7 @@ export const base3 = {
   hash: '0x12d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193',
   from: {
     ...base.from,
-    hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859',
+    hash: addressMock.hash,
   },
 };
 
@@ -357,3 +376,23 @@ export const withBlob = {
   tx_types: [ 'blob_transaction' as const ],
   type: 3,
 };
+
+export const withRecipientName = {
+  ...base,
+  to: addressMock.withName,
+};
+
+export const withRecipientEns = {
+  ...base,
+  to: addressMock.withEns,
+};
+
+export const withRecipientNameTag = {
+  ...withRecipientEns,
+  to: addressMock.withNameTag,
+};
+
+export const withRecipientContract = {
+  ...withRecipientEns,
+  to: addressMock.contract,
+};
diff --git a/mocks/txs/txInterpretation.ts b/mocks/txs/txInterpretation.ts
index e9c1a43b85..764d697a6b 100644
--- a/mocks/txs/txInterpretation.ts
+++ b/mocks/txs/txInterpretation.ts
@@ -1,5 +1,7 @@
 import type { TxInterpretationResponse } from 'types/api/txInterpretation';
 
+import { hash } from 'mocks/address/address';
+
 export const txInterpretation: TxInterpretationResponse = {
   data: {
     summaries: [ {
@@ -25,8 +27,8 @@ export const txInterpretation: TxInterpretationResponse = {
         to_address: {
           type: 'address',
           value: {
-            hash: '0x48c04ed5691981C42154C6167398f95e8f38a7fF',
-            implementation_name: null,
+            hash: hash,
+            implementations: null,
             is_contract: false,
             is_verified: false,
             name: null,
diff --git a/mocks/userOps/userOp.ts b/mocks/userOps/userOp.ts
index efb7517187..e7368c20d5 100644
--- a/mocks/userOps/userOp.ts
+++ b/mocks/userOps/userOp.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import type { UserOp } from 'types/api/userOps';
 
 export const userOpData: UserOp = {
@@ -24,7 +25,7 @@ export const userOpData: UserOp = {
   sender: {
     ens_domain_name: null,
     hash: '0xF0C14FF4404b188fAA39a3507B388998c10FE284',
-    implementation_name: null,
+    implementations: null,
     is_contract: true,
     is_verified: null,
     name: null,
@@ -33,7 +34,7 @@ export const userOpData: UserOp = {
   entry_point: {
     ens_domain_name: null,
     hash: '0x5FF137D4b0FDCD49DcA30c7CF57E578a026d2789',
-    implementation_name: null,
+    implementations: null,
     is_contract: true,
     is_verified: null,
     name: null,
@@ -47,7 +48,6 @@ export const userOpData: UserOp = {
     max_fee_per_gas: '1575000898',
     max_priority_fee_per_gas: '1575000898',
     nonce: '79',
-    // eslint-disable-next-line max-len
     paymaster_and_data: '0x7cea357b5ac0639f89f9e378a1f03aa5005c0a250000000000000000000000000000000000000000000000000000000065b3a8800000000000000000000000000000000000000000000000000000000065aa6e0028fa4c57ac1141bc9ecd8c9243f618ade8ea1db10ab6c1d1798a222a824764ff2269a72ae7a3680fa8b03a80d8a00cdc710eaf37afdcc55f8c9c4defa3fdf2471b',
     pre_verification_gas: '48396',
     sender: '0xF0C14FF4404b188fAA39a3507B388998c10FE284',
@@ -59,17 +59,43 @@ export const userOpData: UserOp = {
   bundler: {
     ens_domain_name: null,
     hash: '0xd53Eb5203e367BbDD4f72338938224881Fc501Ab',
-    implementation_name: null,
+    implementations: null,
     is_contract: false,
     is_verified: null,
     name: null,
   },
-  // eslint-disable-next-line max-len
   call_data: '0xb61d27f600000000000000000000000059f6aa952df7f048fd076e33e0ea8bb552d5ffd8000000000000000000000000000000000000000000000000003f3d017500800000000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000000',
+  execute_call_data: '0x3cf80e6c',
+  decoded_call_data: {
+    method_call: 'execute(address dest, uint256 value, bytes func)',
+    method_id: 'b61d27f6',
+    parameters: [
+      {
+        name: 'dest',
+        type: 'address',
+        value: '0xb0ccffd05f5a87c4c3ceffaa217900422a249915',
+      },
+      {
+        name: 'value',
+        type: 'uint256',
+        value: '0',
+      },
+      {
+        name: 'func',
+        type: 'bytes',
+        value: '0x3cf80e6c',
+      },
+    ],
+  },
+  decoded_execute_call_data: {
+    method_call: 'advanceEpoch()',
+    method_id: '3cf80e6c',
+    parameters: [],
+  },
   paymaster: {
     ens_domain_name: null,
     hash: '0x7ceA357B5AC0639F89F9e378a1f03Aa5005C0a25',
-    implementation_name: null,
+    implementations: null,
     is_contract: true,
     is_verified: null,
     name: null,
diff --git a/mocks/userOps/userOps.ts b/mocks/userOps/userOps.ts
index a58ff6ed74..9a44e62594 100644
--- a/mocks/userOps/userOps.ts
+++ b/mocks/userOps/userOps.ts
@@ -6,7 +6,7 @@ export const userOpsData: UserOpsResponse = {
       address: {
         ens_domain_name: null,
         hash: '0xF0C14FF4404b188fAA39a3507B388998c10FE284',
-        implementation_name: null,
+        implementations: null,
         is_contract: true,
         is_verified: null,
         name: null,
@@ -22,7 +22,7 @@ export const userOpsData: UserOpsResponse = {
       address:
         { ens_domain_name: null,
           hash: '0x2c298CcaFFD1549e1C21F46966A6c236fCC66dB2',
-          implementation_name: null,
+          implementations: null,
           is_contract: true,
           is_verified: null,
           name: null,
@@ -38,7 +38,7 @@ export const userOpsData: UserOpsResponse = {
       address: {
         ens_domain_name: null,
         hash: '0x2c298CcaFFD1549e1C21F46966A6c236fCC66dB2',
-        implementation_name: null,
+        implementations: null,
         is_contract: true,
         is_verified: null,
         name: null,
diff --git a/mocks/validators/blackfort.ts b/mocks/validators/blackfort.ts
new file mode 100644
index 0000000000..6a5232a321
--- /dev/null
+++ b/mocks/validators/blackfort.ts
@@ -0,0 +1,41 @@
+import type {
+  ValidatorBlackfort,
+  ValidatorsBlackfortCountersResponse,
+  ValidatorsBlackfortResponse,
+} from 'types/api/validators';
+
+import * as addressMock from '../address/address';
+
+export const validator1: ValidatorBlackfort = {
+  address: addressMock.withName,
+  name: 'testnet-3',
+  commission: 10,
+  delegated_amount: '0',
+  self_bonded_amount: '10000',
+};
+
+export const validator2: ValidatorBlackfort = {
+  address: addressMock.withEns,
+  name: 'GooseGanG GooseGanG GooseGanG GooseGanG GooseGanG GooseGanG GooseGanG',
+  commission: 5000,
+  delegated_amount: '10000',
+  self_bonded_amount: '100',
+};
+
+export const validator3: ValidatorBlackfort = {
+  address: addressMock.withoutName,
+  name: 'testnet-1',
+  commission: 0,
+  delegated_amount: '0',
+  self_bonded_amount: '10000',
+};
+
+export const validatorsResponse: ValidatorsBlackfortResponse = {
+  items: [ validator1, validator2, validator3 ],
+  next_page_params: null,
+};
+
+export const validatorsCountersResponse: ValidatorsBlackfortCountersResponse = {
+  new_validators_counter_24h: '11',
+  validators_counter: '140',
+};
diff --git a/mocks/validators/index.ts b/mocks/validators/index.ts
deleted file mode 100644
index 22081cae8c..0000000000
--- a/mocks/validators/index.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { Validator, ValidatorsCountersResponse, ValidatorsResponse } from 'types/api/validators';
-
-import * as addressMock from '../address/address';
-
-export const validator1: Validator = {
-  address: addressMock.withName,
-  blocks_validated_count: 7334224,
-  state: 'active',
-};
-
-export const validator2: Validator = {
-  address: addressMock.withEns,
-  blocks_validated_count: 8937453,
-  state: 'probation',
-};
-
-export const validator3: Validator = {
-  address: addressMock.withoutName,
-  blocks_validated_count: 1234,
-  state: 'inactive',
-};
-
-export const validatorsResponse: ValidatorsResponse = {
-  items: [ validator1, validator2, validator3 ],
-  next_page_params: null,
-};
-
-export const validatorsCountersResponse: ValidatorsCountersResponse = {
-  active_validators_counter: '42',
-  active_validators_percentage: 7.14,
-  new_validators_counter_24h: '11',
-  validators_counter: '140',
-};
diff --git a/mocks/validators/stability.ts b/mocks/validators/stability.ts
new file mode 100644
index 0000000000..a85f596674
--- /dev/null
+++ b/mocks/validators/stability.ts
@@ -0,0 +1,37 @@
+import type {
+  ValidatorStability,
+  ValidatorsStabilityCountersResponse,
+  ValidatorsStabilityResponse,
+} from 'types/api/validators';
+
+import * as addressMock from '../address/address';
+
+export const validator1: ValidatorStability = {
+  address: addressMock.withName,
+  blocks_validated_count: 7334224,
+  state: 'active',
+};
+
+export const validator2: ValidatorStability = {
+  address: addressMock.withEns,
+  blocks_validated_count: 8937453,
+  state: 'probation',
+};
+
+export const validator3: ValidatorStability = {
+  address: addressMock.withoutName,
+  blocks_validated_count: 1234,
+  state: 'inactive',
+};
+
+export const validatorsResponse: ValidatorsStabilityResponse = {
+  items: [ validator1, validator2, validator3 ],
+  next_page_params: null,
+};
+
+export const validatorsCountersResponse: ValidatorsStabilityCountersResponse = {
+  active_validators_counter: '42',
+  active_validators_percentage: 7.14,
+  new_validators_counter_24h: '11',
+  validators_counter: '140',
+};
diff --git a/mocks/withdrawals/withdrawals.ts b/mocks/withdrawals/withdrawals.ts
index 37d1da51e1..97742fe3d6 100644
--- a/mocks/withdrawals/withdrawals.ts
+++ b/mocks/withdrawals/withdrawals.ts
@@ -1,4 +1,7 @@
-export const data = {
+import type { AddressParam } from 'types/api/addressParams';
+import type { WithdrawalsResponse } from 'types/api/withdrawals';
+
+export const data: WithdrawalsResponse = {
   items: [
     {
       amount: '192175000000000',
@@ -6,11 +9,11 @@ export const data = {
       index: 11688,
       receiver: {
         hash: '0xf97e180c050e5Ab072211Ad2C213Eb5AEE4DF134',
-        implementation_name: null,
+        implementations: null,
         is_contract: false,
         is_verified: null,
         name: null,
-      },
+      } as AddressParam,
       timestamp: '2022-06-07T18:12:24.000000Z',
       validator_index: 49622,
     },
@@ -20,11 +23,11 @@ export const data = {
       index: 11687,
       receiver: {
         hash: '0xf97e987c050e5Ab072211Ad2C213Eb5AEE4DF134',
-        implementation_name: null,
+        implementations: null,
         is_contract: false,
         is_verified: null,
         name: null,
-      },
+      } as AddressParam,
       timestamp: '2022-05-07T18:12:24.000000Z',
       validator_index: 49621,
     },
@@ -34,11 +37,11 @@ export const data = {
       index: 11686,
       receiver: {
         hash: '0xf97e123c050e5Ab072211Ad2C213Eb5AEE4DF134',
-        implementation_name: null,
+        implementations: null,
         is_contract: false,
         is_verified: null,
         name: null,
-      },
+      } as AddressParam,
       timestamp: '2022-04-07T18:12:24.000000Z',
       validator_index: 49620,
     },
diff --git a/mocks/zkEvm/deposits.ts b/mocks/zkEvm/deposits.ts
new file mode 100644
index 0000000000..91ecc077c3
--- /dev/null
+++ b/mocks/zkEvm/deposits.ts
@@ -0,0 +1,28 @@
+import type { ZkEvmL2DepositsResponse } from 'types/api/zkEvmL2';
+
+export const baseResponse: ZkEvmL2DepositsResponse = {
+  items: [
+    {
+      block_number: 19681943,
+      index: 182177,
+      l1_transaction_hash: '0x29074452f976064aca1ca5c6e7c82d890c10454280693e6eca0257ae000c8e85',
+      l2_transaction_hash: null,
+      symbol: 'DAI',
+      timestamp: '2022-04-18T11:08:11.000000Z',
+      value: '0.003',
+    },
+    {
+      block_number: 19681894,
+      index: 182176,
+      l1_transaction_hash: '0x0b7d58c0a6b4695ba28d99df928591fb931c812c0aab6d0093ff5040d2f9bc5e',
+      l2_transaction_hash: '0x210d9f70f411de1079e32a98473b04345a5ea6ff2340a8511ebc2df641274436',
+      symbol: 'ETH',
+      timestamp: '2022-04-18T10:58:23.000000Z',
+      value: '0.0046651390188845',
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    index: 1,
+  },
+};
diff --git a/mocks/zkEvm/txnBatches.ts b/mocks/zkEvm/txnBatches.ts
new file mode 100644
index 0000000000..bcaf55d941
--- /dev/null
+++ b/mocks/zkEvm/txnBatches.ts
@@ -0,0 +1,40 @@
+import type { ZkEvmL2TxnBatch, ZkEvmL2TxnBatchesResponse } from 'types/api/zkEvmL2';
+
+export const txnBatchData: ZkEvmL2TxnBatch = {
+  acc_input_hash: '0x4bf88aabe33713b7817266d7860912c58272d808da7397cdc627ca53b296fad3',
+  global_exit_root: '0xad3228b676f7d3cd4284a5443f17f1962b36e491b30a40b2405849e597ba5fb5',
+  number: 5,
+  sequence_tx_hash: '0x7ae010e9758441b302db10282807358af460f38c49c618d26a897592f64977f7',
+  state_root: '0x183b4a38a4a6027947ceb93b323cc94c548c8c05cf605d73ca88351d77cae1a3',
+  status: 'Finalized',
+  timestamp: '2023-10-20T10:08:18.000000Z',
+  transactions: [
+    '0xb5d432c270057c223b973f3b5f00dbad32823d9ef26f3e8d97c819c7c573453a',
+  ],
+  verify_tx_hash: '0x6f7eeaa0eb966e63d127bba6bf8f9046d303c2a1185b542f0b5083f682a0e87f',
+};
+
+export const txnBatchesData: ZkEvmL2TxnBatchesResponse = {
+  items: [
+    {
+      timestamp: '2023-06-01T14:46:48.000000Z',
+      status: 'Finalized',
+      verify_tx_hash: '0x48139721f792d3a68c3781b4cf50e66e8fc7dbb38adff778e09066ea5be9adb8',
+      sequence_tx_hash: '0x6aa081e8e33a085e4ec7124fcd8a5f7d36aac0828f176e80d4b70e313a11695b',
+      number: 5218590,
+      tx_count: 9,
+    },
+    {
+      timestamp: '2023-06-01T14:46:48.000000Z',
+      status: 'Unfinalized',
+      verify_tx_hash: null,
+      sequence_tx_hash: null,
+      number: 5218591,
+      tx_count: 9,
+    },
+  ],
+  next_page_params: {
+    number: 5902834,
+    items_count: 50,
+  },
+};
diff --git a/mocks/zkEvm/withdrawals.ts b/mocks/zkEvm/withdrawals.ts
new file mode 100644
index 0000000000..c89635f4e5
--- /dev/null
+++ b/mocks/zkEvm/withdrawals.ts
@@ -0,0 +1,28 @@
+import type { ZkEvmL2WithdrawalsResponse } from 'types/api/zkEvmL2';
+
+export const baseResponse: ZkEvmL2WithdrawalsResponse = {
+  items: [
+    {
+      block_number: 11722417,
+      index: 47040,
+      l1_transaction_hash: null,
+      l2_transaction_hash: '0x68c378e412e51553524545ef1d3f00f69496fb37827c0b3b7e0870d245970408',
+      symbol: 'ETH',
+      timestamp: '2022-04-18T09:20:37.000000Z',
+      value: '0.025',
+    },
+    {
+      block_number: 11722480,
+      index: 47041,
+      l1_transaction_hash: '0xbf76feb85b8b8f24dacb17f962dd359f82efc512928d7b11ffca92fb812ad6a5',
+      l2_transaction_hash: '0xfe3c168ac1751b8399f1e819f1d83ee4cf764128bc604d454abee29114dabf49',
+      symbol: 'ETH',
+      timestamp: '2022-04-18T09:23:45.000000Z',
+      value: '4',
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    index: 1,
+  },
+};
diff --git a/mocks/zkevmL2txnBatches/zkevmL2txnBatch.ts b/mocks/zkevmL2txnBatches/zkevmL2txnBatch.ts
deleted file mode 100644
index 56a0f67c33..0000000000
--- a/mocks/zkevmL2txnBatches/zkevmL2txnBatch.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { ZkEvmL2TxnBatch } from 'types/api/zkEvmL2';
-
-export const txnBatchData: ZkEvmL2TxnBatch = {
-  acc_input_hash: '0x4bf88aabe33713b7817266d7860912c58272d808da7397cdc627ca53b296fad3',
-  global_exit_root: '0xad3228b676f7d3cd4284a5443f17f1962b36e491b30a40b2405849e597ba5fb5',
-  number: 5,
-  sequence_tx_hash: '0x7ae010e9758441b302db10282807358af460f38c49c618d26a897592f64977f7',
-  state_root: '0x183b4a38a4a6027947ceb93b323cc94c548c8c05cf605d73ca88351d77cae1a3',
-  status: 'Finalized',
-  timestamp: '2023-10-20T10:08:18.000000Z',
-  transactions: [
-    '0xb5d432c270057c223b973f3b5f00dbad32823d9ef26f3e8d97c819c7c573453a',
-  ],
-  verify_tx_hash: '0x6f7eeaa0eb966e63d127bba6bf8f9046d303c2a1185b542f0b5083f682a0e87f',
-};
diff --git a/mocks/zkevmL2txnBatches/zkevmL2txnBatches.ts b/mocks/zkevmL2txnBatches/zkevmL2txnBatches.ts
deleted file mode 100644
index 895f9a7744..0000000000
--- a/mocks/zkevmL2txnBatches/zkevmL2txnBatches.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { ZkEvmL2TxnBatchesResponse } from 'types/api/zkEvmL2';
-
-export const txnBatchesData: ZkEvmL2TxnBatchesResponse = {
-  items: [
-    {
-      timestamp: '2023-06-01T14:46:48.000000Z',
-      status: 'Finalized',
-      verify_tx_hash: '0x48139721f792d3a68c3781b4cf50e66e8fc7dbb38adff778e09066ea5be9adb8',
-      sequence_tx_hash: '0x6aa081e8e33a085e4ec7124fcd8a5f7d36aac0828f176e80d4b70e313a11695b',
-      number: 5218590,
-      tx_count: 9,
-    },
-    {
-      timestamp: '2023-06-01T14:46:48.000000Z',
-      status: 'Unfinalized',
-      verify_tx_hash: null,
-      sequence_tx_hash: null,
-      number: 5218591,
-      tx_count: 9,
-    },
-  ],
-  next_page_params: {
-    number: 5902834,
-    items_count: 50,
-  },
-};
diff --git a/next-env.d.ts b/next-env.d.ts
index 4f11a03dc6..a4a7b3f5cf 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/next.config.js b/next.config.js
index 8789a1a641..f1c2e19694 100644
--- a/next.config.js
+++ b/next.config.js
@@ -10,6 +10,7 @@ const headers = require('./nextjs/headers');
 const redirects = require('./nextjs/redirects');
 const rewrites = require('./nextjs/rewrites');
 
+/** @type {import('next').NextConfig} */
 const moduleExports = {
   transpilePackages: [
     'react-syntax-highlighter',
@@ -45,7 +46,16 @@ const moduleExports = {
   output: 'standalone',
   productionBrowserSourceMaps: true,
   experimental: {
-    instrumentationHook: true,
+    instrumentationHook: process.env.NEXT_OPEN_TELEMETRY_ENABLED === 'true',
+    // disabled as it is not stable yet
+    // turbo: {
+    //   rules: {
+    //     '*.svg': {
+    //       loaders: [ '@svgr/webpack' ],
+    //       as: '*.js',
+    //     },
+    //   },
+    // },
   },
 };
 
diff --git a/nextjs/PageNextJs.tsx b/nextjs/PageNextJs.tsx
index 1c15c9f419..89e066ca6d 100644
--- a/nextjs/PageNextJs.tsx
+++ b/nextjs/PageNextJs.tsx
@@ -2,21 +2,26 @@ import Head from 'next/head';
 import React from 'react';
 
 import type { Route } from 'nextjs-routes';
+import type { Props as PageProps } from 'nextjs/getServerSideProps';
 
+import config from 'configs/app';
 import useAdblockDetect from 'lib/hooks/useAdblockDetect';
 import useGetCsrfToken from 'lib/hooks/useGetCsrfToken';
 import * as metadata from 'lib/metadata';
 import * as mixpanel from 'lib/mixpanel';
 import { init as initSentry } from 'lib/sentry/config';
 
-type Props = Route & {
+interface Props<Pathname extends Route['pathname']> {
+  pathname: Pathname;
   children: React.ReactNode;
+  query?: PageProps<Pathname>['query'];
+  apiData?: PageProps<Pathname>['apiData'];
 }
 
 initSentry();
 
-const PageNextJs = (props: Props) => {
-  const { title, description, opengraph } = metadata.generate(props);
+const PageNextJs = <Pathname extends Route['pathname']>(props: Props<Pathname>) => {
+  const { title, description, opengraph, canonical } = metadata.generate(props, props.apiData);
 
   useGetCsrfToken();
   useAdblockDetect();
@@ -29,14 +34,20 @@ const PageNextJs = (props: Props) => {
       <Head>
         <title>{ title }</title>
         <meta name="description" content={ description }/>
+        { canonical && <link rel="canonical" href={ canonical }/> }
 
         { /* OG TAGS */ }
         <meta property="og:title" content={ opengraph.title }/>
         { opengraph.description && <meta property="og:description" content={ opengraph.description }/> }
         <meta property="og:image" content={ opengraph.imageUrl }/>
+        <meta property="og:type" content="website"/>
+
+        { /* Twitter Meta Tags */ }
         <meta name="twitter:card" content="summary_large_image"/>
+        <meta property="twitter:domain" content={ config.app.host }/>
+        <meta name="twitter:title" content={ opengraph.title }/>
+        { opengraph.description && <meta name="twitter:description" content={ opengraph.description }/> }
         <meta property="twitter:image" content={ opengraph.imageUrl }/>
-        <meta property="og:type" content="website"/>
       </Head>
       { props.children }
     </>
diff --git a/nextjs/csp/generateCspPolicy.ts b/nextjs/csp/generateCspPolicy.ts
index fa505e3ddf..ba59176fe5 100644
--- a/nextjs/csp/generateCspPolicy.ts
+++ b/nextjs/csp/generateCspPolicy.ts
@@ -6,10 +6,12 @@ function generateCspPolicy() {
     descriptors.app(),
     descriptors.ad(),
     descriptors.cloudFlare(),
+    descriptors.gasHawk(),
     descriptors.googleAnalytics(),
     descriptors.googleFonts(),
     descriptors.googleReCaptcha(),
     descriptors.growthBook(),
+    descriptors.marketplace(),
     descriptors.mixpanel(),
     descriptors.monaco(),
     descriptors.safe(),
diff --git a/nextjs/csp/policies/ad.ts b/nextjs/csp/policies/ad.ts
index 55f23ff913..9b018aa019 100644
--- a/nextjs/csp/policies/ad.ts
+++ b/nextjs/csp/policies/ad.ts
@@ -13,12 +13,16 @@ export function ad(): CspDev.DirectiveDescriptor {
       '*.coinzilla.com',
       'https://request-global.czilladx.com',
 
+      // adbutler
+      'servedbyadbutler.com',
+
       // slise
       '*.slise.xyz',
 
       // hype
       'api.hypelab.com',
       '*.ixncdn.com',
+      '*.cloudfront.net',
 
       //getit
       'v1.getittech.io',
@@ -35,7 +39,8 @@ export function ad(): CspDev.DirectiveDescriptor {
       // adbutler
       'servedbyadbutler.com',
       `'sha256-${ Base64.stringify(sha256(connectAdbutler)) }'`,
-      `'sha256-${ Base64.stringify(sha256(placeAd ?? '')) }'`,
+      `'sha256-${ Base64.stringify(sha256(placeAd(undefined) ?? '')) }'`,
+      `'sha256-${ Base64.stringify(sha256(placeAd('mobile') ?? '')) }'`,
 
       // slise
       '*.slise.xyz',
diff --git a/nextjs/csp/policies/app.ts b/nextjs/csp/policies/app.ts
index d1596cb1c5..1b7a495284 100644
--- a/nextjs/csp/policies/app.ts
+++ b/nextjs/csp/policies/app.ts
@@ -30,9 +30,19 @@ const getCspReportUrl = () => {
   }
 };
 
-export function app(): CspDev.DirectiveDescriptor {
-  const marketplaceFeaturePayload = getFeaturePayload(config.features.marketplace);
+const externalFontsDomains = (() => {
+  try {
+    return [
+      config.UI.fonts.heading?.url,
+      config.UI.fonts.body?.url,
+    ]
+      .filter(Boolean)
+      .map((urlString) => new URL(urlString))
+      .map((url) => url.hostname);
+  } catch (error) {}
+})();
 
+export function app(): CspDev.DirectiveDescriptor {
   return {
     'default-src': [
       // KEY_WORDS.NONE,
@@ -56,7 +66,7 @@ export function app(): CspDev.DirectiveDescriptor {
       getFeaturePayload(config.features.verifiedTokens)?.api.endpoint,
       getFeaturePayload(config.features.addressVerification)?.api.endpoint,
       getFeaturePayload(config.features.nameService)?.api.endpoint,
-      marketplaceFeaturePayload && 'api' in marketplaceFeaturePayload ? marketplaceFeaturePayload.api.endpoint : '',
+      getFeaturePayload(config.features.addressMetadata)?.api.endpoint,
 
       // chain RPC server
       config.chain.rpcUrl,
@@ -74,8 +84,9 @@ export function app(): CspDev.DirectiveDescriptor {
       // https://github.com/vercel/next.js/issues/14221#issuecomment-657258278
       config.app.isDev ? KEY_WORDS.UNSAFE_EVAL : '',
 
-      // hash of ColorModeScript
+      // hash of ColorModeScript: system + dark
       '\'sha256-e7MRMmTzLsLQvIy1iizO1lXf7VWYoQ6ysj5fuUzvRwE=\'',
+      '\'sha256-9A7qFFHmxdWjZMQmfzYD2XWaNHLu1ZmQB0Ds4Go764k=\'',
     ],
 
     'style-src': [
@@ -117,6 +128,7 @@ export function app(): CspDev.DirectiveDescriptor {
     'font-src': [
       KEY_WORDS.DATA,
       ...MAIN_DOMAINS,
+      ...(externalFontsDomains || []),
     ],
 
     'object-src': [
@@ -132,6 +144,10 @@ export function app(): CspDev.DirectiveDescriptor {
       '*',
     ],
 
+    'frame-ancestors': [
+      KEY_WORDS.SELF,
+    ],
+
     ...((() => {
       if (!config.features.sentry.isEnabled) {
         return {};
diff --git a/nextjs/csp/policies/gasHawk.ts b/nextjs/csp/policies/gasHawk.ts
new file mode 100644
index 0000000000..6a1a8e624a
--- /dev/null
+++ b/nextjs/csp/policies/gasHawk.ts
@@ -0,0 +1,30 @@
+import type CspDev from 'csp-dev';
+
+import config from 'configs/app';
+
+const feature = config.features.saveOnGas;
+
+export function gasHawk(): CspDev.DirectiveDescriptor {
+  if (!feature.isEnabled) {
+    return {};
+  }
+
+  const apiOrigin = (() => {
+    try {
+      const url = new URL(feature.apiUrlTemplate);
+      return url.origin;
+    } catch (error) {
+      return '';
+    }
+  })();
+
+  if (!apiOrigin) {
+    return {};
+  }
+
+  return {
+    'connect-src': [
+      apiOrigin,
+    ],
+  };
+}
diff --git a/nextjs/csp/policies/index.ts b/nextjs/csp/policies/index.ts
index 10fd95a484..30bd992ba5 100644
--- a/nextjs/csp/policies/index.ts
+++ b/nextjs/csp/policies/index.ts
@@ -1,10 +1,12 @@
 export { ad } from './ad';
 export { app } from './app';
 export { cloudFlare } from './cloudFlare';
+export { gasHawk } from './gasHawk';
 export { googleAnalytics } from './googleAnalytics';
 export { googleFonts } from './googleFonts';
 export { googleReCaptcha } from './googleReCaptcha';
 export { growthBook } from './growthBook';
+export { marketplace } from './marketplace';
 export { mixpanel } from './mixpanel';
 export { monaco } from './monaco';
 export { safe } from './safe';
diff --git a/nextjs/csp/policies/marketplace.ts b/nextjs/csp/policies/marketplace.ts
new file mode 100644
index 0000000000..08474a4bc1
--- /dev/null
+++ b/nextjs/csp/policies/marketplace.ts
@@ -0,0 +1,22 @@
+import type CspDev from 'csp-dev';
+
+import config from 'configs/app';
+
+const feature = config.features.marketplace;
+
+export function marketplace(): CspDev.DirectiveDescriptor {
+  if (!feature.isEnabled) {
+    return {};
+  }
+
+  return {
+    'connect-src': [
+      'api' in feature ? feature.api.endpoint : '',
+      feature.rating ? 'https://api.airtable.com' : '',
+    ],
+
+    'frame-src': [
+      '*',
+    ],
+  };
+}
diff --git a/nextjs/csp/policies/walletConnect.ts b/nextjs/csp/policies/walletConnect.ts
index 41cb948066..03f2dc0825 100644
--- a/nextjs/csp/policies/walletConnect.ts
+++ b/nextjs/csp/policies/walletConnect.ts
@@ -12,10 +12,16 @@ export function walletConnect(): CspDev.DirectiveDescriptor {
   return {
     'connect-src': [
       '*.web3modal.com',
+      '*.web3modal.org',
       '*.walletconnect.com',
+      '*.walletconnect.org',
       'wss://relay.walletconnect.com',
       'wss://www.walletlink.org',
     ],
+    'frame-ancestors': [
+      '*.walletconnect.org',
+      '*.walletconnect.com',
+    ],
     'img-src': [
       KEY_WORDS.BLOB,
       '*.walletconnect.com',
diff --git a/nextjs/getServerSideProps.ts b/nextjs/getServerSideProps.ts
index 6b3d959ab2..c9933fb679 100644
--- a/nextjs/getServerSideProps.ts
+++ b/nextjs/getServerSideProps.ts
@@ -1,23 +1,28 @@
-import type { GetServerSideProps } from 'next';
+import type { GetServerSideProps, GetServerSidePropsContext, GetServerSidePropsResult } from 'next';
+
+import type { AdBannerProviders } from 'types/client/adProviders';
+import type { RollupType } from 'types/client/rollup';
+
+import type { Route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import isNeedProxy from 'lib/api/isNeedProxy';
 const rollupFeature = config.features.rollup;
 const adBannerFeature = config.features.adsBanner;
+import type * as metadata from 'lib/metadata';
 
-export type Props = {
+export interface Props<Pathname extends Route['pathname'] = never> {
+  query: Route['query'];
   cookies: string;
   referrer: string;
-  id: string;
-  height_or_hash: string;
-  hash: string;
-  number: string;
-  q: string;
-  name: string;
-  adBannerProvider: string;
+  adBannerProvider: AdBannerProviders | null;
+  // if apiData is undefined, Next.js will complain that it is not serializable
+  // so we force it to be always present in the props but it can be null
+  apiData: metadata.ApiData<Pathname> | null;
 }
 
-export const base: GetServerSideProps<Props> = async({ req, query }) => {
+export const base = async <Pathname extends Route['pathname'] = never>({ req, query }: GetServerSidePropsContext):
+Promise<GetServerSidePropsResult<Props<Pathname>>> => {
   const adBannerProvider = (() => {
     if (adBannerFeature.isEnabled) {
       if ('additionalProvider' in adBannerFeature && adBannerFeature.additionalProvider) {
@@ -28,20 +33,16 @@ export const base: GetServerSideProps<Props> = async({ req, query }) => {
         return adBannerFeature.provider;
       }
     }
-    return '';
+    return null;
   })();
 
   return {
     props: {
+      query,
       cookies: req.headers.cookie || '',
       referrer: req.headers.referer || '',
-      id: query.id?.toString() || '',
-      hash: query.hash?.toString() || '',
-      height_or_hash: query.height_or_hash?.toString() || '',
-      number: query.number?.toString() || '',
-      q: query.q?.toString() || '',
-      name: query.name?.toString() || '',
-      adBannerProvider,
+      adBannerProvider: adBannerProvider,
+      apiData: null,
     },
   };
 };
@@ -66,8 +67,9 @@ export const verifiedAddresses: GetServerSideProps<Props> = async(context) => {
   return account(context);
 };
 
+const DEPOSITS_ROLLUP_TYPES: Array<RollupType> = [ 'optimistic', 'shibarium', 'zkEvm', 'arbitrum' ];
 export const deposits: GetServerSideProps<Props> = async(context) => {
-  if (!(rollupFeature.isEnabled && (rollupFeature.type === 'optimistic' || rollupFeature.type === 'shibarium'))) {
+  if (!(rollupFeature.isEnabled && DEPOSITS_ROLLUP_TYPES.includes(rollupFeature.type))) {
     return {
       notFound: true,
     };
@@ -76,10 +78,11 @@ export const deposits: GetServerSideProps<Props> = async(context) => {
   return base(context);
 };
 
+const WITHDRAWALS_ROLLUP_TYPES: Array<RollupType> = [ 'optimistic', 'shibarium', 'zkEvm', 'arbitrum' ];
 export const withdrawals: GetServerSideProps<Props> = async(context) => {
   if (
     !config.features.beaconChain.isEnabled &&
-    !(rollupFeature.isEnabled && (rollupFeature.type === 'optimistic' || rollupFeature.type === 'shibarium'))
+    !(rollupFeature.isEnabled && WITHDRAWALS_ROLLUP_TYPES.includes(rollupFeature.type))
   ) {
     return {
       notFound: true,
@@ -109,8 +112,9 @@ export const optimisticRollup: GetServerSideProps<Props> = async(context) => {
   return base(context);
 };
 
+const BATCH_ROLLUP_TYPES: Array<RollupType> = [ 'zkEvm', 'zkSync', 'arbitrum', 'optimistic' ];
 export const batch: GetServerSideProps<Props> = async(context) => {
-  if (!(rollupFeature.isEnabled && (rollupFeature.type === 'zkEvm' || rollupFeature.type === 'zkSync'))) {
+  if (!(rollupFeature.isEnabled && BATCH_ROLLUP_TYPES.includes(rollupFeature.type))) {
     return {
       notFound: true,
     };
@@ -119,14 +123,15 @@ export const batch: GetServerSideProps<Props> = async(context) => {
   return base(context);
 };
 
-export const marketplace: GetServerSideProps<Props> = async(context) => {
+export const marketplace = async <Pathname extends Route['pathname'] = never>(context: GetServerSidePropsContext):
+Promise<GetServerSidePropsResult<Props<Pathname>>> => {
   if (!config.features.marketplace.isEnabled) {
     return {
       notFound: true,
     };
   }
 
-  return base(context);
+  return base<Pathname>(context);
 };
 
 export const apiDocs: GetServerSideProps<Props> = async(context) => {
@@ -139,6 +144,16 @@ export const apiDocs: GetServerSideProps<Props> = async(context) => {
   return base(context);
 };
 
+export const graphIQl: GetServerSideProps<Props> = async(context) => {
+  if (!config.features.graphqlApiDocs.isEnabled) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
+
 export const csvExport: GetServerSideProps<Props> = async(context) => {
   if (!config.features.csvExport.isEnabled) {
     return {
@@ -189,6 +204,16 @@ export const accounts: GetServerSideProps<Props> = async(context) => {
   return base(context);
 };
 
+export const accountsLabelSearch: GetServerSideProps<Props> = async(context) => {
+  if (!config.features.addressMetadata.isEnabled || !context.query.tagType) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
+
 export const userOps: GetServerSideProps<Props> = async(context) => {
   if (!config.features.userOps.isEnabled) {
     return {
@@ -239,3 +264,44 @@ export const login: GetServerSideProps<Props> = async(context) => {
 
   return base(context);
 };
+
+export const dev: GetServerSideProps<Props> = async(context) => {
+  if (!config.app.isDev) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
+
+export const publicTagsSubmit: GetServerSideProps<Props> = async(context) => {
+
+  if (!config.features.publicTagsSubmission.isEnabled) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
+
+export const disputeGames: GetServerSideProps<Props> = async(context) => {
+  if (!config.features.faultProofSystem.isEnabled) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
+
+export const mud: GetServerSideProps<Props> = async(context) => {
+  if (!config.features.mudFramework.isEnabled) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
diff --git a/nextjs/middlewares/colorTheme.ts b/nextjs/middlewares/colorTheme.ts
new file mode 100644
index 0000000000..dcb8314cae
--- /dev/null
+++ b/nextjs/middlewares/colorTheme.ts
@@ -0,0 +1,15 @@
+import type { NextRequest, NextResponse } from 'next/server';
+
+import appConfig from 'configs/app';
+import * as cookiesLib from 'lib/cookies';
+
+export default function colorThemeMiddleware(req: NextRequest, res: NextResponse) {
+  const colorModeCookie = req.cookies.get(cookiesLib.NAMES.COLOR_MODE);
+
+  if (!colorModeCookie) {
+    if (appConfig.UI.colorTheme.default) {
+      res.cookies.set(cookiesLib.NAMES.COLOR_MODE, appConfig.UI.colorTheme.default.colorMode, { path: '/' });
+      res.cookies.set(cookiesLib.NAMES.COLOR_MODE_HEX, appConfig.UI.colorTheme.default.hex, { path: '/' });
+    }
+  }
+}
diff --git a/nextjs/middlewares/index.ts b/nextjs/middlewares/index.ts
index 1fe6fae29c..b9466373a3 100644
--- a/nextjs/middlewares/index.ts
+++ b/nextjs/middlewares/index.ts
@@ -1 +1,2 @@
 export { account } from './account';
+export { default as colorTheme } from './colorTheme';
diff --git a/nextjs/nextjs-routes.d.ts b/nextjs/nextjs-routes.d.ts
index ee87eb5dc1..2d947f73ec 100644
--- a/nextjs/nextjs-routes.d.ts
+++ b/nextjs/nextjs-routes.d.ts
@@ -9,17 +9,22 @@ declare module "nextjs-routes" {
     | StaticRoute<"/404">
     | StaticRoute<"/account/api-key">
     | StaticRoute<"/account/custom-abi">
-    | StaticRoute<"/account/public-tags-request">
     | StaticRoute<"/account/tag-address">
     | StaticRoute<"/account/verified-addresses">
     | StaticRoute<"/account/watchlist">
     | StaticRoute<"/accounts">
+    | DynamicRoute<"/accounts/label/[slug]", { "slug": string }>
     | DynamicRoute<"/address/[hash]/contract-verification", { "hash": string }>
     | DynamicRoute<"/address/[hash]", { "hash": string }>
+    | StaticRoute<"/api/config">
     | StaticRoute<"/api/csrf">
     | StaticRoute<"/api/healthz">
+    | StaticRoute<"/api/log">
     | StaticRoute<"/api/media-type">
+    | StaticRoute<"/api/metrics">
+    | StaticRoute<"/api/monitoring/invalid-api-schema">
     | StaticRoute<"/api/proxy">
+    | StaticRoute<"/api/sprite">
     | StaticRoute<"/api-docs">
     | DynamicRoute<"/apps/[id]", { "id": string }>
     | StaticRoute<"/apps">
@@ -30,20 +35,26 @@ declare module "nextjs-routes" {
     | StaticRoute<"/batches">
     | DynamicRoute<"/blobs/[hash]", { "hash": string }>
     | DynamicRoute<"/block/[height_or_hash]", { "height_or_hash": string }>
+    | DynamicRoute<"/block/countdown/[height]", { "height": string }>
+    | StaticRoute<"/block/countdown">
     | StaticRoute<"/blocks">
     | StaticRoute<"/contract-verification">
     | StaticRoute<"/csv-export">
     | StaticRoute<"/deposits">
+    | StaticRoute<"/dispute-games">
     | StaticRoute<"/gas-tracker">
     | StaticRoute<"/graphiql">
     | StaticRoute<"/">
     | StaticRoute<"/login">
+    | StaticRoute<"/mud-worlds">
     | DynamicRoute<"/name-domains/[name]", { "name": string }>
     | StaticRoute<"/name-domains">
     | DynamicRoute<"/op/[hash]", { "hash": string }>
     | StaticRoute<"/ops">
     | StaticRoute<"/output-roots">
+    | StaticRoute<"/public-tags/submit">
     | StaticRoute<"/search-results">
+    | StaticRoute<"/sprite">
     | StaticRoute<"/stats">
     | DynamicRoute<"/token/[hash]", { "hash": string }>
     | DynamicRoute<"/token/[hash]/instance/[id]", { "hash": string; "id": string }>
diff --git a/nextjs/redirects.js b/nextjs/redirects.js
index 3a0317d0e4..a5908dc12f 100644
--- a/nextjs/redirects.js
+++ b/nextjs/redirects.js
@@ -49,16 +49,8 @@ const oldUrls = [
     destination: '/account/custom-abi',
   },
   {
-    source: '/account/public_tags_request',
-    destination: '/account/public-tags-request',
-  },
-  {
-    source: '/account/public_tags_request/:id/edit',
-    destination: '/account/public-tags-request',
-  },
-  {
-    source: '/account/public_tags_request/new',
-    destination: '/account/public-tags-request',
+    source: '/account/public-tags-request',
+    destination: '/public-tags/submit',
   },
 
   // TRANSACTIONS
diff --git a/nextjs/types.ts b/nextjs/types.ts
index 60c007daff..c0366ae090 100644
--- a/nextjs/types.ts
+++ b/nextjs/types.ts
@@ -1,6 +1,13 @@
 import type { NextPage } from 'next';
 
+import type { Route } from 'nextjs-routes';
+
 // eslint-disable-next-line @typescript-eslint/ban-types
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: React.ReactElement) => React.ReactNode;
 }
+
+export interface RouteParams<Pathname extends Route['pathname']> {
+  pathname: Pathname;
+  query?: Route['query'];
+}
diff --git a/nextjs/utils/detectBotRequest.ts b/nextjs/utils/detectBotRequest.ts
new file mode 100644
index 0000000000..1eecf6333a
--- /dev/null
+++ b/nextjs/utils/detectBotRequest.ts
@@ -0,0 +1,52 @@
+import type { IncomingMessage } from 'http';
+
+type SocialPreviewBot = 'twitter' | 'facebook' | 'telegram' | 'slack';
+type SearchEngineBot = 'google' | 'bing' | 'yahoo' | 'duckduckgo';
+
+type ReturnType = {
+  type: 'social_preview';
+  bot: SocialPreviewBot;
+} | {
+  type: 'search_engine';
+  bot: SearchEngineBot;
+} | undefined
+
+export default function detectBotRequest(req: IncomingMessage): ReturnType {
+  const userAgent = req.headers['user-agent'];
+
+  if (!userAgent) {
+    return;
+  }
+
+  if (userAgent.toLowerCase().includes('twitter')) {
+    return { type: 'social_preview', bot: 'twitter' };
+  }
+
+  if (userAgent.toLowerCase().includes('facebook')) {
+    return { type: 'social_preview', bot: 'facebook' };
+  }
+
+  if (userAgent.toLowerCase().includes('telegram')) {
+    return { type: 'social_preview', bot: 'telegram' };
+  }
+
+  if (userAgent.toLowerCase().includes('slack')) {
+    return { type: 'social_preview', bot: 'slack' };
+  }
+
+  if (userAgent.toLowerCase().includes('googlebot')) {
+    return { type: 'search_engine', bot: 'google' };
+  }
+
+  if (userAgent.toLowerCase().includes('bingbot')) {
+    return { type: 'search_engine', bot: 'bing' };
+  }
+
+  if (userAgent.toLowerCase().includes('yahoo')) {
+    return { type: 'search_engine', bot: 'yahoo' };
+  }
+
+  if (userAgent.toLowerCase().includes('duckduck')) {
+    return { type: 'search_engine', bot: 'duckduckgo' };
+  }
+}
diff --git a/nextjs/utils/fetch.ts b/nextjs/utils/fetch.ts
deleted file mode 100644
index 22bfc32ff6..0000000000
--- a/nextjs/utils/fetch.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import type { IncomingMessage } from 'http';
-import _pick from 'lodash/pick';
-import type { NextApiRequest } from 'next';
-import type { NextApiRequestCookies } from 'next/dist/server/api-utils';
-import type { RequestInit, Response } from 'node-fetch';
-import nodeFetch from 'node-fetch';
-
-import { httpLogger } from 'nextjs/utils/logger';
-
-import * as cookies from 'lib/cookies';
-
-export default function fetchFactory(
-  _req: NextApiRequest | (IncomingMessage & { cookies: NextApiRequestCookies }),
-) {
-  // first arg can be only a string
-  // FIXME migrate to RequestInfo later if needed
-  return function fetch(url: string, init?: RequestInit): Promise<Response> {
-    const apiToken = _req.cookies[cookies.NAMES.API_TOKEN];
-
-    const headers = {
-      accept: _req.headers['accept'] || 'application/json',
-      'content-type': _req.headers['content-type'] || 'application/json',
-      cookie: apiToken ? `${ cookies.NAMES.API_TOKEN }=${ apiToken }` : '',
-      ..._pick(_req.headers, [
-        'x-csrf-token',
-        'Authorization',
-        // feature flags
-        'updated-gas-oracle',
-      ]) as Record<string, string | undefined>,
-    };
-
-    httpLogger.logger.info({
-      message: 'Trying to call API',
-      url,
-      req: _req,
-    });
-
-    httpLogger.logger.info({
-      message: 'API request headers',
-      headers,
-    });
-
-    const body = (() => {
-      const _body = init?.body;
-      if (!_body) {
-        return;
-      }
-
-      if (typeof _body === 'string') {
-        return _body;
-      }
-
-      return JSON.stringify(_body);
-    })();
-
-    return nodeFetch(url, {
-      ...init,
-      headers,
-      body,
-    });
-  };
-}
diff --git a/nextjs/utils/fetchApi.ts b/nextjs/utils/fetchApi.ts
new file mode 100644
index 0000000000..63eff42384
--- /dev/null
+++ b/nextjs/utils/fetchApi.ts
@@ -0,0 +1,53 @@
+import fetch, { AbortError } from 'node-fetch';
+
+import buildUrl from 'nextjs/utils/buildUrl';
+import { httpLogger } from 'nextjs/utils/logger';
+
+import { RESOURCES } from 'lib/api/resources';
+import type { ResourceName, ResourcePathParams, ResourcePayload } from 'lib/api/resources';
+import { SECOND } from 'lib/consts';
+import metrics from 'lib/monitoring/metrics';
+
+type Params<R extends ResourceName> = (
+  {
+    resource: R;
+    pathParams?: ResourcePathParams<R>;
+  } | {
+    url: string;
+    route: string;
+  }
+) & {
+  timeout?: number;
+}
+
+export default async function fetchApi<R extends ResourceName = never, S = ResourcePayload<R>>(params: Params<R>): Promise<S | undefined> {
+  const controller = new AbortController();
+
+  const timeout = setTimeout(() => {
+    controller.abort();
+  }, params.timeout || SECOND);
+
+  const url = 'url' in params ? params.url : buildUrl(params.resource, params.pathParams);
+  const route = 'route' in params ? params.route : RESOURCES[params.resource]['path'];
+
+  const end = metrics?.apiRequestDuration.startTimer();
+
+  try {
+    const response = await fetch(url, { signal: controller.signal });
+
+    const duration = end?.({ route, code: response.status });
+    if (response.status === 200) {
+      httpLogger.logger.info({ message: 'API fetch', url, code: response.status, duration });
+    } else {
+      httpLogger.logger.error({ message: 'API fetch', url, code: response.status, duration });
+    }
+
+    return await response.json() as Promise<S>;
+  } catch (error) {
+    const code = error instanceof AbortError ? 504 : 500;
+    const duration = end?.({ route, code });
+    httpLogger.logger.error({ message: 'API fetch', url, code, duration });
+  } finally {
+    clearTimeout(timeout);
+  }
+}
diff --git a/nextjs/utils/fetchProxy.ts b/nextjs/utils/fetchProxy.ts
new file mode 100644
index 0000000000..0081781215
--- /dev/null
+++ b/nextjs/utils/fetchProxy.ts
@@ -0,0 +1,57 @@
+import type { IncomingMessage } from 'http';
+import _pick from 'lodash/pick';
+import type { NextApiRequest } from 'next';
+import type { NextApiRequestCookies } from 'next/dist/server/api-utils';
+import type { RequestInit, Response } from 'node-fetch';
+import nodeFetch from 'node-fetch';
+
+import { httpLogger } from 'nextjs/utils/logger';
+
+import * as cookies from 'lib/cookies';
+
+export default function fetchFactory(
+  _req: NextApiRequest | (IncomingMessage & { cookies: NextApiRequestCookies }),
+) {
+  // first arg can be only a string
+  // FIXME migrate to RequestInfo later if needed
+  return function fetch(url: string, init?: RequestInit): Promise<Response> {
+    const apiToken = _req.cookies[cookies.NAMES.API_TOKEN];
+
+    const headers = {
+      accept: _req.headers['accept'] || 'application/json',
+      'content-type': _req.headers['content-type'] || 'application/json',
+      cookie: apiToken ? `${ cookies.NAMES.API_TOKEN }=${ apiToken }` : '',
+      ..._pick(_req.headers, [
+        'x-csrf-token',
+        'Authorization',
+        // feature flags
+        'updated-gas-oracle',
+      ]) as Record<string, string | undefined>,
+    };
+
+    httpLogger.logger.info({
+      message: 'API fetch via Next.js proxy',
+      url,
+      // headers,
+    });
+
+    const body = (() => {
+      const _body = init?.body;
+      if (!_body) {
+        return;
+      }
+
+      if (typeof _body === 'string') {
+        return _body;
+      }
+
+      return JSON.stringify(_body);
+    })();
+
+    return nodeFetch(url, {
+      ...init,
+      headers,
+      body,
+    });
+  };
+}
diff --git a/nextjs/utils/logRequestFromBot.ts b/nextjs/utils/logRequestFromBot.ts
new file mode 100644
index 0000000000..6c22b63258
--- /dev/null
+++ b/nextjs/utils/logRequestFromBot.ts
@@ -0,0 +1,28 @@
+import type { IncomingMessage, ServerResponse } from 'http';
+
+import metrics from 'lib/monitoring/metrics';
+
+import detectBotRequest from './detectBotRequest';
+
+export default async function logRequestFromBot(req: IncomingMessage | undefined, res: ServerResponse<IncomingMessage> | undefined, pathname: string) {
+  if (!req || !res || !metrics) {
+    return;
+  }
+
+  const botInfo = detectBotRequest(req);
+
+  if (!botInfo) {
+    return;
+  }
+
+  switch (botInfo.type) {
+    case 'search_engine': {
+      metrics.searchEngineBotRequests.inc({ route: pathname, bot: botInfo.bot });
+      return;
+    }
+    case 'social_preview': {
+      metrics.socialPreviewBotRequests.inc({ route: pathname, bot: botInfo.bot });
+      return;
+    }
+  }
+}
diff --git a/package.json b/package.json
index eed616c134..ddbec9098b 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,9 @@
   "scripts": {
     "dev": "./tools/scripts/dev.sh",
     "dev:preset": "./tools/scripts/dev.preset.sh",
+    "dev:preset:sync": "tsc -p ./tools/preset-sync/tsconfig.json && node ./tools/preset-sync/index.js",
     "build": "NODE_OPTIONS=--max-old-space-size=6144 next build",
+    "build:next": "./deploy/scripts/download_assets.sh ./public/assets/configs && yarn svg:build-sprite && ./deploy/scripts/make_envs_script.sh && next build",
     "build:docker": "docker build --build-arg GIT_COMMIT_SHA=$(git rev-parse --short HEAD) --build-arg GIT_TAG=$(git describe --tags --abbrev=0) -t blockscout-frontend:local ./",
     "start": "next start",
     "start:docker:local": "docker run -p 3000:3000 --env-file .env.local blockscout-frontend:local",
@@ -30,9 +32,14 @@
     "test:pw:detect-affected": "node ./deploy/tools/affected-tests/index.js",
     "test:jest": "jest",
     "test:jest:watch": "jest --watch",
-    "favicon:generate:dev": "./tools/scripts/favicon-generator.dev.sh"
+    "favicon:generate:dev": "./tools/scripts/favicon-generator.dev.sh",
+    "monitoring:prometheus:local": "docker run --name blockscout_prometheus -d -p 127.0.0.1:9090:9090 -v $(pwd)/prometheus.yml:/etc/prometheus/prometheus.yml prom/prometheus",
+    "monitoring:grafana:local": "docker run -d -p 4000:3000 --name=blockscout_grafana --user $(id -u) --volume $(pwd)/grafana:/var/lib/grafana grafana/grafana-enterprise"
   },
   "dependencies": {
+    "@blockscout/bens-types": "1.4.1",
+    "@blockscout/stats-types": "1.6.0",
+    "@blockscout/visualizer-types": "0.2.0",
     "@chakra-ui/react": "2.7.1",
     "@chakra-ui/theme-tools": "^2.0.18",
     "@emotion/react": "^11.10.4",
@@ -43,36 +50,37 @@
     "@metamask/post-message-stream": "^7.0.0",
     "@metamask/providers": "^10.2.1",
     "@monaco-editor/react": "^4.4.6",
-    "@next/bundle-analyzer": "^14.0.1",
-    "@opentelemetry/auto-instrumentations-node": "^0.39.4",
-    "@opentelemetry/exporter-metrics-otlp-proto": "^0.45.1",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.45.0",
-    "@opentelemetry/resources": "^1.18.0",
-    "@opentelemetry/sdk-node": "^0.45.0",
-    "@opentelemetry/sdk-trace-node": "^1.18.0",
-    "@opentelemetry/semantic-conventions": "^1.18.0",
+    "@next/bundle-analyzer": "14.2.3",
+    "@opentelemetry/auto-instrumentations-node": "0.43.0",
+    "@opentelemetry/exporter-metrics-otlp-proto": "0.49.1",
+    "@opentelemetry/exporter-trace-otlp-http": "0.49.1",
+    "@opentelemetry/resources": "1.22.0",
+    "@opentelemetry/sdk-node": "0.49.1",
+    "@opentelemetry/sdk-trace-node": "1.22.0",
+    "@opentelemetry/semantic-conventions": "1.22.0",
     "@sentry/cli": "^2.21.2",
     "@sentry/react": "7.24.0",
     "@sentry/tracing": "7.24.0",
     "@slise/embed-react": "^2.2.0",
-    "@tanstack/react-query": "^5.4.3",
-    "@tanstack/react-query-devtools": "^5.4.3",
+    "@tanstack/react-query": "5.55.4",
+    "@tanstack/react-query-devtools": "5.55.4",
     "@types/papaparse": "^5.3.5",
     "@types/react-scroll": "^1.8.4",
-    "@web3modal/wagmi": "4.1.3",
     "algoliasearch": "^4.20.0",
+    "@web3modal/wagmi": "5.1.7",
+    "airtable": "^0.12.2",
     "bignumber.js": "^9.1.0",
     "blo": "^1.1.1",
     "chakra-react-select": "^4.4.3",
     "crypto-js": "^4.2.0",
     "d3": "^7.6.1",
-    "dappscout-iframe": "0.2.1",
+    "dappscout-iframe": "0.2.2",
     "dayjs": "^1.11.5",
     "dom-to-image": "^2.6.0",
     "focus-visible": "^5.2.0",
     "framer-motion": "^6.5.1",
     "getit-sdk": "^1.0.4",
-    "gradient-avatar": "^1.0.2",
+    "gradient-avatar": "git+https://github.com/blockscout/gradient-avatar.git",
     "graphiql": "^2.2.0",
     "graphql": "^16.8.1",
     "graphql-ws": "^5.11.3",
@@ -81,19 +89,20 @@
     "magic-bytes.js": "1.8.0",
     "mixpanel-browser": "^2.47.0",
     "monaco-editor": "^0.34.1",
-    "next": "13.5.4",
+    "next": "14.2.13",
     "nextjs-routes": "^1.0.8",
     "node-fetch": "^3.2.9",
     "papaparse": "^5.3.2",
-    "path-to-regexp": "^6.2.1",
+    "path-to-regexp": "8.1.0",
     "phoenix": "^1.6.15",
     "pino-http": "^8.2.1",
     "pino-pretty": "^9.1.1",
+    "prom-client": "15.1.1",
     "qrcode": "^1.5.1",
     "react": "18.2.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "18.2.0",
-    "react-google-recaptcha": "^2.1.0",
+    "react-google-recaptcha": "^3.1.0",
     "react-hook-form": "^7.33.1",
     "react-identicons": "^1.2.5",
     "react-intersection-observer": "^9.5.2",
@@ -102,8 +111,9 @@
     "react-scroll": "^1.8.7",
     "swagger-ui-react": "^5.9.0",
     "use-font-face-observer": "^1.2.1",
-    "viem": "2.9.6",
-    "wagmi": "2.5.16",
+    "valibot": "0.38.0",
+    "viem": "2.21.5",
+    "wagmi": "2.12.10",
     "xss": "^1.0.14"
   },
   "devDependencies": {
@@ -154,7 +164,7 @@
     "typescript": "5.4.2",
     "vite-plugin-svgr": "^2.2.2",
     "vite-tsconfig-paths": "^3.5.2",
-    "ws": "^8.11.0"
+    "ws": "^8.17.1"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "eslint --cache --fix"
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 15fc5edd91..475700fbf5 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,4 +1,4 @@
-import type { ChakraProps } from '@chakra-ui/react';
+import { type ChakraProps } from '@chakra-ui/react';
 import { GrowthBookProvider } from '@growthbook/growthbook-react';
 import * as Sentry from '@sentry/react';
 import { QueryClientProvider } from '@tanstack/react-query';
@@ -12,13 +12,14 @@ import config from 'configs/app';
 import useQueryClientConfig from 'lib/api/useQueryClientConfig';
 import { AppContextProvider } from 'lib/contexts/app';
 import { ChakraProvider } from 'lib/contexts/chakra';
+import { MarketplaceContextProvider } from 'lib/contexts/marketplace';
 import { ScrollDirectionProvider } from 'lib/contexts/scrollDirection';
 import { growthBook } from 'lib/growthbook/init';
 import useLoadFeatures from 'lib/growthbook/useLoadFeatures';
 import useNotifyOnNavigation from 'lib/hooks/useNotifyOnNavigation';
 import { SocketProvider } from 'lib/socket/context';
-import theme from 'theme';
 import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
+import AppErrorGlobalContainer from 'ui/shared/AppError/AppErrorGlobalContainer';
 import GoogleAnalytics from 'ui/shared/GoogleAnalytics';
 import Layout from 'ui/shared/layout/Layout';
 import Web3ModalProvider from 'ui/shared/Web3ModalProvider';
@@ -38,7 +39,7 @@ const ERROR_SCREEN_STYLES: ChakraProps = {
   justifyContent: 'center',
   width: 'fit-content',
   maxW: '800px',
-  margin: '0 auto',
+  margin: { base: '0 auto', lg: '0 auto' },
   p: { base: 4, lg: 0 },
 };
 
@@ -56,10 +57,11 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   const getLayout = Component.getLayout ?? ((page) => <Layout>{ page }</Layout>);
 
   return (
-    <ChakraProvider theme={ theme } cookies={ pageProps.cookies }>
+    <ChakraProvider cookies={ pageProps.cookies }>
       <AppErrorBoundary
         { ...ERROR_SCREEN_STYLES }
         onError={ handleError }
+        Container={ AppErrorGlobalContainer }
       >
         <Web3ModalProvider>
           <AppContextProvider pageProps={ pageProps }>
@@ -67,7 +69,9 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
               <GrowthBookProvider growthbook={ growthBook }>
                 <ScrollDirectionProvider>
                   <SocketProvider url={ `${ config.api.socket }${ config.api.basePath }/socket/v2` }>
-                    { getLayout(<Component { ...pageProps }/>) }
+                    <MarketplaceContextProvider>
+                      { getLayout(<Component { ...pageProps }/>) }
+                    </MarketplaceContextProvider>
                   </SocketProvider>
                 </ScrollDirectionProvider>
               </GrowthBookProvider>
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 74ebe08fb5..2e879910dd 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -3,9 +3,11 @@ import type { DocumentContext } from 'next/document';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 import React from 'react';
 
+import logRequestFromBot from 'nextjs/utils/logRequestFromBot';
 import * as serverTiming from 'nextjs/utils/serverTiming';
 
-import theme from 'theme';
+import config from 'configs/app';
+import theme from 'theme/theme';
 import * as svgSprite from 'ui/shared/IconSvg';
 
 class MyDocument extends Document {
@@ -21,6 +23,8 @@ class MyDocument extends Document {
       return result;
     };
 
+    await logRequestFromBot(ctx.req, ctx.res, ctx.pathname);
+
     const initialProps = await Document.getInitialProps(ctx);
 
     return initialProps;
@@ -32,23 +36,23 @@ class MyDocument extends Document {
         <Head>
           { /* FONTS */ }
           <link
-            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+            href={ config.UI.fonts.heading?.url ?? 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap' }
             rel="stylesheet"
           />
           <link
-            href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
+            href={ config.UI.fonts.body?.url ?? 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap' }
             rel="stylesheet"
           />
 
           { /* eslint-disable-next-line @next/next/no-sync-scripts */ }
-          <script src="/envs.js"/>
+          <script src="/assets/envs.js"/>
 
           { /* FAVICON */ }
-          <link rel="icon" href="/favicon/favicon.ico" sizes="48x48"/>
-          <link rel="icon" sizes="32x32" type="image/png" href="/favicon/favicon-32x32.png"/>
-          <link rel="icon" sizes="16x16" type="image/png"href="/favicon/favicon-16x16.png"/>
-          <link rel="apple-touch-icon" href="/favicon/apple-touch-icon-180x180.png"/>
-          <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg"/>
+          <link rel="icon" href="/assets/favicon/favicon.ico" sizes="48x48"/>
+          <link rel="icon" sizes="32x32" type="image/png" href="/assets/favicon/favicon-32x32.png"/>
+          <link rel="icon" sizes="16x16" type="image/png"href="/assets/favicon/favicon-16x16.png"/>
+          <link rel="apple-touch-icon" href="/assets/favicon/apple-touch-icon-180x180.png"/>
+          <link rel="mask-icon" href="/assets/favicon/safari-pinned-tab.svg"/>
 
           <link rel="preload" as="image" href={ svgSprite.href }/>
         </Head>
diff --git a/pages/account/public-tags-request.tsx b/pages/account/public-tags-request.tsx
deleted file mode 100644
index 66970197df..0000000000
--- a/pages/account/public-tags-request.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { NextPage } from 'next';
-import dynamic from 'next/dynamic';
-import React from 'react';
-
-import PageNextJs from 'nextjs/PageNextJs';
-
-const PublicTags = dynamic(() => import('ui/pages/PublicTags'), { ssr: false });
-
-const Page: NextPage = () => {
-  return (
-    <PageNextJs pathname="/account/public-tags-request">
-      <PublicTags/>
-    </PageNextJs>
-  );
-};
-
-export default Page;
-
-export { account as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/accounts.tsx b/pages/accounts/index.tsx
similarity index 100%
rename from pages/accounts.tsx
rename to pages/accounts/index.tsx
diff --git a/pages/accounts/label/[slug].tsx b/pages/accounts/label/[slug].tsx
new file mode 100644
index 0000000000..e90b38bfe3
--- /dev/null
+++ b/pages/accounts/label/[slug].tsx
@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+const AccountsLabelSearch = dynamic(() => import('ui/pages/AccountsLabelSearch'), { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/accounts/label/[slug]">
+      <AccountsLabelSearch/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { accountsLabelSearch as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/address/[hash]/contract-verification.tsx b/pages/address/[hash]/contract-verification.tsx
index 7e7fd704d2..25f56fa4c6 100644
--- a/pages/address/[hash]/contract-verification.tsx
+++ b/pages/address/[hash]/contract-verification.tsx
@@ -8,7 +8,7 @@ import ContractVerificationForAddress from 'ui/pages/ContractVerificationForAddr
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/address/[hash]/contract-verification" query={ props }>
+    <PageNextJs pathname="/address/[hash]/contract-verification" query={ props.query }>
       <ContractVerificationForAddress/>
     </PageNextJs>
   );
diff --git a/pages/address/[hash]/index.tsx b/pages/address/[hash]/index.tsx
index 2319a31605..fc13029cc0 100644
--- a/pages/address/[hash]/index.tsx
+++ b/pages/address/[hash]/index.tsx
@@ -1,15 +1,22 @@
-import type { NextPage } from 'next';
-import dynamic from 'next/dynamic';
+import type { GetServerSideProps, NextPage } from 'next';
 import React from 'react';
 
+import type { Route } from 'nextjs-routes';
 import type { Props } from 'nextjs/getServerSideProps';
+import * as gSSP from 'nextjs/getServerSideProps';
 import PageNextJs from 'nextjs/PageNextJs';
+import detectBotRequest from 'nextjs/utils/detectBotRequest';
+import fetchApi from 'nextjs/utils/fetchApi';
 
-const Address = dynamic(() => import('ui/pages/Address'), { ssr: false });
+import config from 'configs/app';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import Address from 'ui/pages/Address';
 
-const Page: NextPage<Props> = (props: Props) => {
+const pathname: Route['pathname'] = '/address/[hash]';
+
+const Page: NextPage<Props<typeof pathname>> = (props: Props<typeof pathname>) => {
   return (
-    <PageNextJs pathname="/address/[hash]" query={ props }>
+    <PageNextJs pathname="/address/[hash]" query={ props.query } apiData={ props.apiData }>
       <Address/>
     </PageNextJs>
   );
@@ -17,4 +24,24 @@ const Page: NextPage<Props> = (props: Props) => {
 
 export default Page;
 
-export { base as getServerSideProps } from 'nextjs/getServerSideProps';
+export const getServerSideProps: GetServerSideProps<Props<typeof pathname>> = async(ctx) => {
+  const baseResponse = await gSSP.base<typeof pathname>(ctx);
+
+  if (config.meta.og.enhancedDataEnabled && 'props' in baseResponse) {
+    const botInfo = detectBotRequest(ctx.req);
+
+    if (botInfo?.type === 'social_preview') {
+      const addressData = await fetchApi({
+        resource: 'address',
+        pathParams: { hash: getQueryParamString(ctx.query.hash) },
+        timeout: 1_000,
+      });
+
+      (await baseResponse.props).apiData = addressData && addressData.ens_domain_name ? {
+        domain_name: addressData.ens_domain_name,
+      } : null;
+    }
+  }
+
+  return baseResponse;
+};
diff --git a/pages/api-docs.tsx b/pages/api-docs.tsx
index 54d678c2d6..64148d64e2 100644
--- a/pages/api-docs.tsx
+++ b/pages/api-docs.tsx
@@ -3,13 +3,16 @@ import React from 'react';
 
 import PageNextJs from 'nextjs/PageNextJs';
 
+import config from 'configs/app';
 import SwaggerUI from 'ui/apiDocs/SwaggerUI';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
 const Page: NextPage = () => {
   return (
     <PageNextJs pathname="/api-docs">
-      <PageTitle title="API Documentation"/>
+      <PageTitle
+        title={ config.meta.seo.enhancedDataEnabled ? `${ config.chain.name } API documentation` : 'API documentation' }
+      />
       <SwaggerUI/>
     </PageNextJs>
   );
diff --git a/pages/api/config.ts b/pages/api/config.ts
new file mode 100644
index 0000000000..6f56149eed
--- /dev/null
+++ b/pages/api/config.ts
@@ -0,0 +1,16 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default async function configHandler(req: NextApiRequest, res: NextApiResponse) {
+  // eslint-disable-next-line no-restricted-properties
+  const publicEnvs = Object.entries(process.env)
+    .filter(([ key ]) => key.startsWith('NEXT_PUBLIC_'))
+    .sort(([ keyA ], [ keyB ]) => keyA.localeCompare(keyB))
+    .reduce((result, [ key, value ]) => {
+      result[key] = value || '';
+      return result;
+    }, {} as Record<string, string>);
+
+  res.status(200).json({
+    envs: publicEnvs,
+  });
+}
diff --git a/pages/api/csrf.ts b/pages/api/csrf.ts
index 8d4857b6f1..409ab8a1da 100644
--- a/pages/api/csrf.ts
+++ b/pages/api/csrf.ts
@@ -1,7 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 
 import buildUrl from 'nextjs/utils/buildUrl';
-import fetchFactory from 'nextjs/utils/fetch';
+import fetchFactory from 'nextjs/utils/fetchProxy';
 import { httpLogger } from 'nextjs/utils/logger';
 
 export default async function csrfHandler(_req: NextApiRequest, res: NextApiResponse) {
diff --git a/pages/api/log.ts b/pages/api/log.ts
new file mode 100644
index 0000000000..cb89b35f59
--- /dev/null
+++ b/pages/api/log.ts
@@ -0,0 +1,9 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { httpLogger } from 'nextjs/utils/logger';
+
+export default async function logHandler(req: NextApiRequest, res: NextApiResponse) {
+  httpLogger(req, res);
+
+  res.status(200).send('ok');
+}
diff --git a/pages/api/media-type.ts b/pages/api/media-type.ts
index 7489fecdf1..95d4b3728a 100644
--- a/pages/api/media-type.ts
+++ b/pages/api/media-type.ts
@@ -3,16 +3,20 @@ import nodeFetch from 'node-fetch';
 
 import { httpLogger } from 'nextjs/utils/logger';
 
+import metrics from 'lib/monitoring/metrics';
 import getQueryParamString from 'lib/router/getQueryParamString';
 
 export default async function mediaTypeHandler(req: NextApiRequest, res: NextApiResponse) {
-  httpLogger(req, res);
 
   try {
     const url = getQueryParamString(req.query.url);
+
+    const end = metrics?.apiRequestDuration.startTimer();
     const response = await nodeFetch(url, { method: 'HEAD' });
+    const duration = end?.({ route: '/media-type', code: response.status });
 
     if (response.status !== 200) {
+      httpLogger.logger.error({ message: 'API fetch', url, code: response.status, duration });
       throw new Error();
     }
 
@@ -30,6 +34,8 @@ export default async function mediaTypeHandler(req: NextApiRequest, res: NextApi
         return 'html';
       }
     })();
+    httpLogger.logger.info({ message: 'API fetch', url, code: response.status, duration });
+
     res.status(200).json({ type: mediaType });
   } catch (error) {
     res.status(200).json({ type: undefined });
diff --git a/pages/api/metrics.ts b/pages/api/metrics.ts
new file mode 100644
index 0000000000..c474dd7552
--- /dev/null
+++ b/pages/api/metrics.ts
@@ -0,0 +1,13 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import * as promClient from 'prom-client';
+
+// eslint-disable-next-line no-restricted-properties
+const isEnabled = process.env.PROMETHEUS_METRICS_ENABLED === 'true';
+
+isEnabled && promClient.collectDefaultMetrics({ prefix: 'frontend_' });
+
+export default async function metricsHandler(req: NextApiRequest, res: NextApiResponse) {
+  const metrics = await promClient.register.metrics();
+  res.setHeader('Content-type', promClient.register.contentType);
+  res.send(metrics);
+}
diff --git a/pages/api/monitoring/invalid-api-schema.ts b/pages/api/monitoring/invalid-api-schema.ts
new file mode 100644
index 0000000000..f80a15399c
--- /dev/null
+++ b/pages/api/monitoring/invalid-api-schema.ts
@@ -0,0 +1,19 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import * as v from 'valibot';
+
+import metrics from 'lib/monitoring/metrics';
+
+const PayloadSchema = v.object({
+  resource: v.string(),
+  url: v.string(),
+});
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const payload = JSON.parse(req.body);
+    metrics?.invalidApiSchema.inc(v.parse(PayloadSchema, payload));
+  } catch (error) {
+
+  }
+  res.status(200).json({ status: 'ok' });
+}
diff --git a/pages/api/proxy.ts b/pages/api/proxy.ts
index 0756f3639c..95b168413b 100644
--- a/pages/api/proxy.ts
+++ b/pages/api/proxy.ts
@@ -2,7 +2,7 @@ import _pick from 'lodash/pick';
 import _pickBy from 'lodash/pickBy';
 import type { NextApiRequest, NextApiResponse } from 'next';
 
-import fetchFactory from 'nextjs/utils/fetch';
+import fetchFactory from 'nextjs/utils/fetchProxy';
 
 import appConfig from 'configs/app';
 
diff --git a/pages/api/sprite.ts b/pages/api/sprite.ts
new file mode 100644
index 0000000000..9ba9d7030c
--- /dev/null
+++ b/pages/api/sprite.ts
@@ -0,0 +1,49 @@
+import fs from 'fs';
+import type { NextApiRequest, NextApiResponse } from 'next';
+import path from 'path';
+
+import config from 'configs/app';
+
+const ROOT_DIR = './icons';
+const NAME_PREFIX = ROOT_DIR.replace('./', '') + '/';
+
+interface IconInfo {
+  name: string;
+  fileSize: number;
+}
+
+const getIconName = (filePath: string) => filePath.replace(NAME_PREFIX, '').replace('.svg', '');
+
+function collectIconNames(dir: string) {
+  const files = fs.readdirSync(dir, { withFileTypes: true });
+  let icons: Array<IconInfo> = [];
+
+  files.forEach((file) => {
+    const filePath = path.join(dir, file.name);
+    const stats = fs.statSync(filePath);
+
+    file.name.endsWith('.svg') && icons.push({
+      name: getIconName(filePath),
+      fileSize: stats.size,
+    });
+
+    if (file.isDirectory()) {
+      icons = [ ...icons, ...collectIconNames(filePath) ];
+    }
+  });
+
+  return icons;
+}
+
+export default async function spriteHandler(req: NextApiRequest, res: NextApiResponse) {
+
+  if (!config.app.isDev) {
+    return res.status(404).json({ error: 'Not found' });
+  }
+
+  const icons = collectIconNames(ROOT_DIR);
+
+  res.status(200).json({
+    icons,
+  });
+}
diff --git a/pages/apps/[id].tsx b/pages/apps/[id].tsx
index f99be74026..936c485f01 100644
--- a/pages/apps/[id].tsx
+++ b/pages/apps/[id].tsx
@@ -1,18 +1,29 @@
+import type { GetServerSideProps } from 'next';
 import dynamic from 'next/dynamic';
 import React from 'react';
 
 import type { NextPageWithLayout } from 'nextjs/types';
+import type { MarketplaceAppOverview } from 'types/client/marketplace';
 
+import type { Route } from 'nextjs-routes';
+import * as gSSP from 'nextjs/getServerSideProps';
 import type { Props } from 'nextjs/getServerSideProps';
 import PageNextJs from 'nextjs/PageNextJs';
+import detectBotRequest from 'nextjs/utils/detectBotRequest';
+import fetchApi from 'nextjs/utils/fetchApi';
 
+import config from 'configs/app';
+import getQueryParamString from 'lib/router/getQueryParamString';
 import LayoutApp from 'ui/shared/layout/LayoutApp';
 
 const MarketplaceApp = dynamic(() => import('ui/pages/MarketplaceApp'), { ssr: false });
 
-const Page: NextPageWithLayout<Props> = (props: Props) => {
+const pathname: Route['pathname'] = '/apps/[id]';
+const feature = config.features.marketplace;
+
+const Page: NextPageWithLayout<Props<typeof pathname>> = (props: Props<typeof pathname>) => {
   return (
-    <PageNextJs pathname="/apps/[id]" query={ props }>
+    <PageNextJs pathname="/apps/[id]" query={ props.query } apiData={ props.apiData }>
       <MarketplaceApp/>
     </PageNextJs>
   );
@@ -28,4 +39,40 @@ Page.getLayout = function getLayout(page: React.ReactElement) {
 
 export default Page;
 
-export { marketplace as getServerSideProps } from 'nextjs/getServerSideProps';
+export const getServerSideProps: GetServerSideProps<Props<typeof pathname>> = async(ctx) => {
+  const baseResponse = await gSSP.marketplace<typeof pathname>(ctx);
+
+  if (config.meta.og.enhancedDataEnabled && 'props' in baseResponse && feature.isEnabled) {
+    const botInfo = detectBotRequest(ctx.req);
+
+    if (botInfo?.type === 'social_preview') {
+
+      const appData = await(async() => {
+        if ('configUrl' in feature) {
+          const appList = await fetchApi<never, Array<MarketplaceAppOverview>>({
+            url: config.app.baseUrl + feature.configUrl,
+            route: '/marketplace_config',
+            timeout: 1_000,
+          });
+
+          if (appList && Array.isArray(appList)) {
+            return appList.find(app => app.id === getQueryParamString(ctx.query.id));
+          }
+
+        } else {
+          return await fetchApi({
+            resource: 'marketplace_dapp',
+            pathParams: { dappId: getQueryParamString(ctx.query.id), chainId: config.chain.id },
+            timeout: 1_000,
+          });
+        }
+      })();
+
+      (await baseResponse.props).apiData = appData && appData.title ? {
+        app_name: appData.title,
+      } : null;
+    }
+  }
+
+  return baseResponse;
+};
diff --git a/pages/batches/[number].tsx b/pages/batches/[number].tsx
index 870a1cc7b4..20b4bf49ca 100644
--- a/pages/batches/[number].tsx
+++ b/pages/batches/[number].tsx
@@ -15,6 +15,10 @@ const Batch = dynamic(() => {
   }
 
   switch (rollupFeature.type) {
+    case 'arbitrum':
+      return import('ui/pages/ArbitrumL2TxnBatch');
+    case 'optimistic':
+      return import('ui/pages/OptimisticL2TxnBatch');
     case 'zkEvm':
       return import('ui/pages/ZkEvmL2TxnBatch');
     case 'zkSync':
@@ -25,7 +29,7 @@ const Batch = dynamic(() => {
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/batches/[number]" query={ props }>
+    <PageNextJs pathname="/batches/[number]" query={ props.query }>
       <Batch/>
     </PageNextJs>
   );
diff --git a/pages/batches/index.tsx b/pages/batches/index.tsx
index f5bea98b4b..374d24763c 100644
--- a/pages/batches/index.tsx
+++ b/pages/batches/index.tsx
@@ -19,6 +19,8 @@ const Batches = dynamic(() => {
       return import('ui/pages/ZkSyncL2TxnBatches');
     case 'optimistic':
       return import('ui/pages/OptimisticL2TxnBatches');
+    case 'arbitrum':
+      return import('ui/pages/ArbitrumL2TxnBatches');
   }
   throw new Error('Txn batches feature is not enabled.');
 }, { ssr: false });
diff --git a/pages/blobs/[hash].tsx b/pages/blobs/[hash].tsx
index f1056d36fa..c042c862aa 100644
--- a/pages/blobs/[hash].tsx
+++ b/pages/blobs/[hash].tsx
@@ -9,7 +9,7 @@ const Blob = dynamic(() => import('ui/pages/Blob'), { ssr: false });
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/blobs/[hash]" query={ props }>
+    <PageNextJs pathname="/blobs/[hash]" query={ props.query }>
       <Blob/>
     </PageNextJs>
   );
diff --git a/pages/block/[height_or_hash].tsx b/pages/block/[height_or_hash].tsx
index 7d74d59c49..ef2c7652d2 100644
--- a/pages/block/[height_or_hash].tsx
+++ b/pages/block/[height_or_hash].tsx
@@ -9,7 +9,7 @@ const Block = dynamic(() => import('ui/pages/Block'), { ssr: false });
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/block/[height_or_hash]" query={ props }>
+    <PageNextJs pathname="/block/[height_or_hash]" query={ props.query }>
       <Block/>
     </PageNextJs>
   );
diff --git a/pages/block/countdown/[height].tsx b/pages/block/countdown/[height].tsx
new file mode 100644
index 0000000000..77d3c01669
--- /dev/null
+++ b/pages/block/countdown/[height].tsx
@@ -0,0 +1,20 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import type { Props } from 'nextjs/getServerSideProps';
+import PageNextJs from 'nextjs/PageNextJs';
+
+const BlockCountdown = dynamic(() => import('ui/pages/BlockCountdown'), { ssr: false });
+
+const Page: NextPage<Props> = (props: Props) => {
+  return (
+    <PageNextJs pathname="/block/countdown/[height]" query={ props.query }>
+      <BlockCountdown/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { base as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/block/countdown/index.tsx b/pages/block/countdown/index.tsx
new file mode 100644
index 0000000000..78d48fe0eb
--- /dev/null
+++ b/pages/block/countdown/index.tsx
@@ -0,0 +1,20 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import type { Props } from 'nextjs/getServerSideProps';
+import PageNextJs from 'nextjs/PageNextJs';
+
+const BlockCountdownIndex = dynamic(() => import('ui/pages/BlockCountdownIndex'), { ssr: false });
+
+const Page: NextPage<Props> = (props: Props) => {
+  return (
+    <PageNextJs pathname="/block/countdown" query={ props.query }>
+      <BlockCountdownIndex/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { base as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/contract-verification.tsx b/pages/contract-verification.tsx
index a14df711e1..59dc7064b7 100644
--- a/pages/contract-verification.tsx
+++ b/pages/contract-verification.tsx
@@ -8,7 +8,7 @@ import ContractVerification from 'ui/pages/ContractVerification';
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/contract-verification" query={ props }>
+    <PageNextJs pathname="/contract-verification" query={ props.query }>
       <ContractVerification/>
     </PageNextJs>
   );
diff --git a/pages/deposits/index.tsx b/pages/deposits/index.tsx
index 789dd39657..4ebc176013 100644
--- a/pages/deposits/index.tsx
+++ b/pages/deposits/index.tsx
@@ -12,11 +12,19 @@ const Deposits = dynamic(() => {
     return import('ui/pages/OptimisticL2Deposits');
   }
 
+  if (rollupFeature.isEnabled && rollupFeature.type === 'arbitrum') {
+    return import('ui/pages/ArbitrumL2Deposits');
+  }
+
   if (rollupFeature.isEnabled && rollupFeature.type === 'shibarium') {
     return import('ui/pages/ShibariumDeposits');
   }
 
-  throw new Error('Withdrawals feature is not enabled.');
+  if (rollupFeature.isEnabled && rollupFeature.type === 'zkEvm') {
+    return import('ui/pages/ZkEvmL2Deposits');
+  }
+
+  throw new Error('Deposits feature is not enabled.');
 }, { ssr: false });
 
 const Page: NextPage = () => {
diff --git a/pages/dispute-games/index.tsx b/pages/dispute-games/index.tsx
new file mode 100644
index 0000000000..fd4c983cc3
--- /dev/null
+++ b/pages/dispute-games/index.tsx
@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+const DisputeGames = dynamic(() => import('ui/pages/OptimisticL2DisputeGames'), { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/dispute-games">
+      <DisputeGames/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { disputeGames as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/graphiql.tsx b/pages/graphiql.tsx
index 63092129b6..8bcff9cf93 100644
--- a/pages/graphiql.tsx
+++ b/pages/graphiql.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 
 import PageNextJs from 'nextjs/PageNextJs';
 
+import config from 'configs/app';
 import ContentLoader from 'ui/shared/ContentLoader';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
@@ -16,7 +17,9 @@ const Page: NextPage = () => {
 
   return (
     <PageNextJs pathname="/graphiql">
-      <PageTitle title="GraphQL playground"/>
+      <PageTitle
+        title={ config.meta.seo.enhancedDataEnabled ? `GraphiQL ${ config.chain.name } interface` : 'GraphQL playground' }
+      />
       <GraphQL/>
     </PageNextJs>
   );
@@ -24,4 +27,4 @@ const Page: NextPage = () => {
 
 export default Page;
 
-export { base as getServerSideProps } from 'nextjs/getServerSideProps';
+export { graphIQl as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/mud-worlds.tsx b/pages/mud-worlds.tsx
new file mode 100644
index 0000000000..5e970720c4
--- /dev/null
+++ b/pages/mud-worlds.tsx
@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+const MudWorlds = dynamic(() => import('ui/pages/MudWorlds'), { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/mud-worlds">
+      <MudWorlds/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { mud as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/name-domains/[name].tsx b/pages/name-domains/[name].tsx
index 7a01829baa..d9346260b4 100644
--- a/pages/name-domains/[name].tsx
+++ b/pages/name-domains/[name].tsx
@@ -9,7 +9,7 @@ const NameDomain = dynamic(() => import('ui/pages/NameDomain'), { ssr: false });
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/name-domains/[name]" query={ props }>
+    <PageNextJs pathname="/name-domains/[name]" query={ props.query }>
       <NameDomain/>
     </PageNextJs>
   );
diff --git a/pages/op/[hash].tsx b/pages/op/[hash].tsx
index 63080f817c..8a37663e5e 100644
--- a/pages/op/[hash].tsx
+++ b/pages/op/[hash].tsx
@@ -9,7 +9,7 @@ const UserOp = dynamic(() => import('ui/pages/UserOp'), { ssr: false });
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/op/[hash]" query={ props }>
+    <PageNextJs pathname="/op/[hash]" query={ props.query }>
       <UserOp/>
     </PageNextJs>
   );
diff --git a/pages/public-tags/submit.tsx b/pages/public-tags/submit.tsx
new file mode 100644
index 0000000000..071226f11e
--- /dev/null
+++ b/pages/public-tags/submit.tsx
@@ -0,0 +1,18 @@
+import type { NextPage } from 'next';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+import PublicTagsSubmit from 'ui/pages/PublicTagsSubmit';
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/public-tags/submit">
+      <PublicTagsSubmit/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { publicTagsSubmit as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/search-results.tsx b/pages/search-results.tsx
index 460b71b6e3..f69311ef51 100644
--- a/pages/search-results.tsx
+++ b/pages/search-results.tsx
@@ -12,7 +12,7 @@ const SearchResults = dynamic(() => import('ui/pages/SearchResults'), { ssr: fal
 
 const Page: NextPageWithLayout<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/search-results" query={ props }>
+    <PageNextJs pathname="/search-results" query={ props.query }>
       <SearchResults/>
     </PageNextJs>
   );
diff --git a/pages/sprite.tsx b/pages/sprite.tsx
new file mode 100644
index 0000000000..cb90ec0de0
--- /dev/null
+++ b/pages/sprite.tsx
@@ -0,0 +1,18 @@
+import type { NextPage } from 'next';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+import Sprite from 'ui/pages/Sprite';
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/sprite">
+      <Sprite/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { dev as getServerSideProps } from 'nextjs/getServerSideProps';
diff --git a/pages/token/[hash]/index.tsx b/pages/token/[hash]/index.tsx
index 70f41b66fd..84fd9e7972 100644
--- a/pages/token/[hash]/index.tsx
+++ b/pages/token/[hash]/index.tsx
@@ -1,15 +1,22 @@
-import type { NextPage } from 'next';
-import dynamic from 'next/dynamic';
+import type { GetServerSideProps, NextPage } from 'next';
 import React from 'react';
 
+import type { Route } from 'nextjs-routes';
 import type { Props } from 'nextjs/getServerSideProps';
+import * as gSSP from 'nextjs/getServerSideProps';
 import PageNextJs from 'nextjs/PageNextJs';
+import detectBotRequest from 'nextjs/utils/detectBotRequest';
+import fetchApi from 'nextjs/utils/fetchApi';
 
-const Token = dynamic(() => import('ui/pages/Token'), { ssr: false });
+import config from 'configs/app';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import Token from 'ui/pages/Token';
 
-const Page: NextPage<Props> = (props: Props) => {
+const pathname: Route['pathname'] = '/token/[hash]';
+
+const Page: NextPage<Props<typeof pathname>> = (props: Props<typeof pathname>) => {
   return (
-    <PageNextJs pathname="/token/[hash]" query={ props }>
+    <PageNextJs pathname="/token/[hash]" query={ props.query } apiData={ props.apiData }>
       <Token/>
     </PageNextJs>
   );
@@ -17,4 +24,23 @@ const Page: NextPage<Props> = (props: Props) => {
 
 export default Page;
 
-export { base as getServerSideProps } from 'nextjs/getServerSideProps';
+export const getServerSideProps: GetServerSideProps<Props<typeof pathname>> = async(ctx) => {
+  const baseResponse = await gSSP.base<typeof pathname>(ctx);
+
+  if ('props' in baseResponse) {
+    if (
+      config.meta.seo.enhancedDataEnabled ||
+      (config.meta.og.enhancedDataEnabled && detectBotRequest(ctx.req)?.type === 'social_preview')
+    ) {
+      const tokenData = await fetchApi({
+        resource: 'token',
+        pathParams: { hash: getQueryParamString(ctx.query.hash) },
+        timeout: 500,
+      });
+
+      (await baseResponse.props).apiData = tokenData ?? null;
+    }
+  }
+
+  return baseResponse;
+};
diff --git a/pages/token/[hash]/instance/[id].tsx b/pages/token/[hash]/instance/[id].tsx
index 62f0e71b96..62c8d23026 100644
--- a/pages/token/[hash]/instance/[id].tsx
+++ b/pages/token/[hash]/instance/[id].tsx
@@ -1,15 +1,22 @@
-import type { NextPage } from 'next';
-import dynamic from 'next/dynamic';
+import type { GetServerSideProps, NextPage } from 'next';
 import React from 'react';
 
+import type { Route } from 'nextjs-routes';
 import type { Props } from 'nextjs/getServerSideProps';
+import * as gSSP from 'nextjs/getServerSideProps';
 import PageNextJs from 'nextjs/PageNextJs';
+import detectBotRequest from 'nextjs/utils/detectBotRequest';
+import fetchApi from 'nextjs/utils/fetchApi';
 
-const TokenInstance = dynamic(() => import('ui/pages/TokenInstance'), { ssr: false });
+import config from 'configs/app';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import TokenInstance from 'ui/pages/TokenInstance';
 
-const Page: NextPage<Props> = (props: Props) => {
+const pathname: Route['pathname'] = '/token/[hash]/instance/[id]';
+
+const Page: NextPage<Props<typeof pathname>> = (props: Props<typeof pathname>) => {
   return (
-    <PageNextJs pathname="/token/[hash]/instance/[id]" query={ props }>
+    <PageNextJs pathname={ pathname } query={ props.query } apiData={ props.apiData }>
       <TokenInstance/>
     </PageNextJs>
   );
@@ -17,4 +24,24 @@ const Page: NextPage<Props> = (props: Props) => {
 
 export default Page;
 
-export { base as getServerSideProps } from 'nextjs/getServerSideProps';
+export const getServerSideProps: GetServerSideProps<Props<typeof pathname>> = async(ctx) => {
+  const baseResponse = await gSSP.base<typeof pathname>(ctx);
+
+  if (config.meta.og.enhancedDataEnabled && 'props' in baseResponse) {
+    const botInfo = detectBotRequest(ctx.req);
+
+    if (botInfo?.type === 'social_preview') {
+      const tokenData = await fetchApi({
+        resource: 'token',
+        pathParams: { hash: getQueryParamString(ctx.query.hash) },
+        timeout: 1_000,
+      });
+
+      (await baseResponse.props).apiData = tokenData && tokenData.symbol ? {
+        symbol: tokenData.symbol,
+      } : null;
+    }
+  }
+
+  return baseResponse;
+};
diff --git a/pages/tx/[hash].tsx b/pages/tx/[hash].tsx
index 5eae4aedaa..f90b534fc8 100644
--- a/pages/tx/[hash].tsx
+++ b/pages/tx/[hash].tsx
@@ -9,7 +9,7 @@ const Transaction = dynamic(() => import('ui/pages/Transaction'), { ssr: false }
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/tx/[hash]" query={ props }>
+    <PageNextJs pathname="/tx/[hash]" query={ props.query }>
       <Transaction/>
     </PageNextJs>
   );
diff --git a/pages/txs/kettle/[hash].tsx b/pages/txs/kettle/[hash].tsx
index 9b62f6dd0d..35a4470cb2 100644
--- a/pages/txs/kettle/[hash].tsx
+++ b/pages/txs/kettle/[hash].tsx
@@ -9,7 +9,7 @@ const KettleTxs = dynamic(() => import('ui/pages/KettleTxs'), { ssr: false });
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/txs/kettle/[hash]" query={ props }>
+    <PageNextJs pathname="/txs/kettle/[hash]" query={ props.query }>
       <KettleTxs/>
     </PageNextJs>
   );
diff --git a/pages/validators.tsx b/pages/validators.tsx
index 42409f3fd3..a234316a58 100644
--- a/pages/validators.tsx
+++ b/pages/validators.tsx
@@ -4,7 +4,21 @@ import React from 'react';
 
 import PageNextJs from 'nextjs/PageNextJs';
 
-const Validators = dynamic(() => import('ui/pages/Validators'), { ssr: false });
+import config from 'configs/app';
+
+const validatorsFeature = config.features.validators;
+
+const Validators = dynamic(() => {
+  if (validatorsFeature.isEnabled && validatorsFeature.chainType === 'stability') {
+    return import('ui/pages/ValidatorsStability');
+  }
+
+  if (validatorsFeature.isEnabled && validatorsFeature.chainType === 'blackfort') {
+    return import('ui/pages/ValidatorsBlackfort');
+  }
+
+  throw new Error('Validators feature is not enabled.');
+}, { ssr: false });
 
 const Page: NextPage = () => {
   return (
diff --git a/pages/withdrawals/index.tsx b/pages/withdrawals/index.tsx
index 661ada21eb..eca5dd2df7 100644
--- a/pages/withdrawals/index.tsx
+++ b/pages/withdrawals/index.tsx
@@ -13,10 +13,18 @@ const Withdrawals = dynamic(() => {
     return import('ui/pages/OptimisticL2Withdrawals');
   }
 
+  if (rollupFeature.isEnabled && rollupFeature.type === 'arbitrum') {
+    return import('ui/pages/ArbitrumL2Withdrawals');
+  }
+
   if (rollupFeature.isEnabled && rollupFeature.type === 'shibarium') {
     return import('ui/pages/ShibariumWithdrawals');
   }
 
+  if (rollupFeature.isEnabled && rollupFeature.type === 'zkEvm') {
+    return import('ui/pages/ZkEvmL2Withdrawals');
+  }
+
   if (beaconChainFeature.isEnabled) {
     return import('ui/pages/BeaconChainWithdrawals');
   }
diff --git a/playwright/TestApp.tsx b/playwright/TestApp.tsx
index 8db3aee3b2..540afac5ac 100644
--- a/playwright/TestApp.tsx
+++ b/playwright/TestApp.tsx
@@ -2,19 +2,24 @@ import { ChakraProvider } from '@chakra-ui/react';
 import { GrowthBookProvider } from '@growthbook/growthbook-react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
-import { WagmiProvider } from 'wagmi';
+import { http } from 'viem';
+import { WagmiProvider, createConfig } from 'wagmi';
+import { mock } from 'wagmi/connectors';
 
 import type { Props as PageProps } from 'nextjs/getServerSideProps';
 
+import config from 'configs/app';
 import { AppContextProvider } from 'lib/contexts/app';
 import { SocketProvider } from 'lib/socket/context';
-import wagmiConfig from 'lib/web3/wagmiConfig';
-import * as app from 'playwright/utils/app';
-import theme from 'theme';
+import currentChain from 'lib/web3/currentChain';
+import theme from 'theme/theme';
+
+import { port as socketPort } from './utils/socket';
 
 export type Props = {
   children: React.ReactNode;
   withSocket?: boolean;
+  withWalletClient?: boolean;
   appContext?: {
     pageProps: PageProps;
   };
@@ -24,16 +29,26 @@ const defaultAppContext = {
   pageProps: {
     cookies: '',
     referrer: '',
-    id: '',
-    height_or_hash: '',
-    hash: '',
-    number: '',
-    q: '',
-    name: '',
-    adBannerProvider: 'slise',
+    query: {},
+    adBannerProvider: 'slise' as const,
+    apiData: null,
   },
 };
 
+const wagmiConfig = createConfig({
+  chains: [ currentChain ],
+  connectors: [
+    mock({
+      accounts: [
+        '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
+      ],
+    }),
+  ],
+  transports: {
+    [currentChain.id]: http(),
+  },
+});
+
 const TestApp = ({ children, withSocket, appContext = defaultAppContext }: Props) => {
   const [ queryClient ] = React.useState(() => new QueryClient({
     defaultOptions: {
@@ -47,10 +62,10 @@ const TestApp = ({ children, withSocket, appContext = defaultAppContext }: Props
   return (
     <ChakraProvider theme={ theme }>
       <QueryClientProvider client={ queryClient }>
-        <SocketProvider url={ withSocket ? `ws://${ app.domain }:${ app.socketPort }` : undefined }>
+        <SocketProvider url={ withSocket ? `ws://${ config.app.host }:${ socketPort }` : undefined }>
           <AppContextProvider { ...appContext }>
             <GrowthBookProvider>
-              <WagmiProvider config={ wagmiConfig! }>
+              <WagmiProvider config={ wagmiConfig }>
                 { children }
               </WagmiProvider>
             </GrowthBookProvider>
diff --git a/playwright/fixtures/auth.ts b/playwright/fixtures/auth.ts
index 4a2aea71f1..0bda117392 100644
--- a/playwright/fixtures/auth.ts
+++ b/playwright/fixtures/auth.ts
@@ -1,8 +1,13 @@
-import type { BrowserContext } from '@playwright/test';
+import type { BrowserContext, TestFixture } from '@playwright/test';
 
+import config from 'configs/app';
 import * as cookies from 'lib/cookies';
-import { domain } from 'playwright/utils/app';
 
-export default function authFixture(context: BrowserContext) {
-  context.addCookies([ { name: cookies.NAMES.API_TOKEN, value: 'foo', domain, path: '/' } ]);
+export function authenticateUser(context: BrowserContext) {
+  context.addCookies([ { name: cookies.NAMES.API_TOKEN, value: 'foo', domain: config.app.host, path: '/' } ]);
 }
+
+export const contextWithAuth: TestFixture<BrowserContext, { context: BrowserContext }> = async({ context }, use) => {
+  authenticateUser(context);
+  use(context);
+};
diff --git a/playwright/fixtures/contextWithEnvs.ts b/playwright/fixtures/contextWithEnvs.ts
deleted file mode 100644
index e703a922fb..0000000000
--- a/playwright/fixtures/contextWithEnvs.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { test } from '@playwright/experimental-ct-react';
-
-import createContextWithStorage from './createContextWithStorage';
-
-interface Env {
-  name: string;
-  value: string;
-}
-
-// keep in mind that all passed variables here should be present in env config files (.env.pw or .env.poa)
-export default function contextWithEnvsFixture(envs: Array<Env>): Parameters<typeof test.extend>[0]['context'] {
-  return async({ browser }, use) => {
-    const context = await createContextWithStorage(browser, envs);
-
-    await use(context);
-    await context.close();
-  };
-}
diff --git a/playwright/fixtures/contextWithFeatures.ts b/playwright/fixtures/contextWithFeatures.ts
deleted file mode 100644
index a9c7836937..0000000000
--- a/playwright/fixtures/contextWithFeatures.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { test } from '@playwright/experimental-ct-react';
-
-import createContextWithStorage from './createContextWithStorage';
-
-interface Feature {
-  id: string;
-  value: unknown;
-}
-
-export default function contextWithFeaturesFixture(envs: Array<Feature>): Parameters<typeof test.extend>[0]['context'] {
-  return async({ browser }, use) => {
-    const storageItems = envs.map(({ id, value }) => ({ name: `pw_feature:${ id }`, value: JSON.stringify(value) }));
-    const context = await createContextWithStorage(browser, storageItems);
-
-    await use(context);
-    await context.close();
-  };
-}
diff --git a/playwright/fixtures/createContextWithStorage.ts b/playwright/fixtures/createContextWithStorage.ts
deleted file mode 100644
index f2555b37c0..0000000000
--- a/playwright/fixtures/createContextWithStorage.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { Browser } from '@playwright/test';
-
-import * as app from 'playwright/utils/app';
-
-export default async function createContextWithEnvs(browser: Browser, localStorage: Array<{ name: string; value: string }>) {
-  return browser.newContext({
-    storageState: {
-      origins: [
-        { origin: app.url, localStorage },
-      ],
-      cookies: [],
-    },
-  });
-}
diff --git a/playwright/fixtures/injectMetaMaskProvider.ts b/playwright/fixtures/injectMetaMaskProvider.ts
new file mode 100644
index 0000000000..f09ee81a43
--- /dev/null
+++ b/playwright/fixtures/injectMetaMaskProvider.ts
@@ -0,0 +1,18 @@
+import type { TestFixture, Page } from '@playwright/test';
+
+import type { WalletProvider } from 'types/web3';
+
+export type InjectMetaMaskProvider = () => Promise<void>;
+
+const fixture: TestFixture<InjectMetaMaskProvider, { page: Page }> = async({ page }, use) => {
+  await use(async() => {
+    await page.evaluate(() => {
+      window.ethereum = {
+        isMetaMask: true,
+        _events: {},
+      } as WalletProvider;
+    });
+  });
+};
+
+export default fixture;
diff --git a/playwright/fixtures/mockApiResponse.ts b/playwright/fixtures/mockApiResponse.ts
index 595b623ae9..ba4ebf4b0c 100644
--- a/playwright/fixtures/mockApiResponse.ts
+++ b/playwright/fixtures/mockApiResponse.ts
@@ -6,6 +6,8 @@ import type { ResourceName, ResourcePayload } from 'lib/api/resources';
 interface Options<R extends ResourceName> {
   pathParams?: Parameters<typeof buildUrl<R>>[1];
   queryParams?: Parameters<typeof buildUrl<R>>[2];
+  times?: number;
+  status?: number;
 }
 
 export type MockApiResponseFixture = <R extends ResourceName>(resourceName: R, responseMock: ResourcePayload<R>, options?: Options<R>) => Promise<string>;
@@ -15,9 +17,9 @@ const fixture: TestFixture<MockApiResponseFixture, { page: Page }> = async({ pag
     const apiUrl = buildUrl(resourceName, options?.pathParams, options?.queryParams);
 
     await page.route(apiUrl, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(responseMock),
-    }));
+      status: options?.status ?? 200,
+      json: responseMock,
+    }), { times: options?.times });
 
     return apiUrl;
   });
diff --git a/playwright/fixtures/mockConfigResponse.ts b/playwright/fixtures/mockConfigResponse.ts
new file mode 100644
index 0000000000..245d2dde9e
--- /dev/null
+++ b/playwright/fixtures/mockConfigResponse.ts
@@ -0,0 +1,28 @@
+import type { TestFixture, Page } from '@playwright/test';
+
+import config from 'configs/app';
+import { buildExternalAssetFilePath } from 'configs/app/utils';
+
+export type MockConfigResponseFixture = (envName: string, envValue: string, content: string, isImage?: boolean) => Promise<string>;
+
+const fixture: TestFixture<MockConfigResponseFixture, { page: Page }> = async({ page }, use) => {
+  await use(async(envName, envValue, content, isImage) => {
+    const url = config.app.baseUrl + buildExternalAssetFilePath(envName, envValue);
+
+    if (isImage) {
+      await page.route(url, (route) => route.fulfill({
+        status: 200,
+        path: content,
+      }));
+    } else {
+      await page.route(url, (route) => route.fulfill({
+        status: 200,
+        body: content,
+      }));
+    }
+
+    return url;
+  });
+};
+
+export default fixture;
diff --git a/playwright/fixtures/mockContractReadResponse.ts b/playwright/fixtures/mockContractReadResponse.ts
new file mode 100644
index 0000000000..514ce4a6c2
--- /dev/null
+++ b/playwright/fixtures/mockContractReadResponse.ts
@@ -0,0 +1,63 @@
+import type { TestFixture, Page } from '@playwright/test';
+import _isEqual from 'lodash/isEqual';
+import { encodeFunctionData, encodeFunctionResult, type AbiFunction } from 'viem';
+
+import { getEnvValue } from 'configs/app/utils';
+
+interface Params {
+  abiItem: AbiFunction;
+  args?: Array<unknown>;
+  address: string;
+  result: Array<unknown>;
+}
+
+export type MockContractReadResponseFixture = (params: Params) => Promise<void>;
+
+const fixture: TestFixture<MockContractReadResponseFixture, { page: Page }> = async({ page }, use) => {
+  await use(async({ abiItem, args = [], address, result }) => {
+    const rpcUrl = getEnvValue('NEXT_PUBLIC_NETWORK_RPC_URL');
+
+    if (!rpcUrl) {
+      return;
+    }
+
+    await page.route(rpcUrl, (route) => {
+      const method = route.request().method();
+
+      if (method !== 'POST') {
+        route.continue();
+        return;
+      }
+
+      const json = route.request().postDataJSON();
+      const params = json?.params?.[0];
+      const id = json?.id;
+
+      const callParams = {
+        data: encodeFunctionData({
+          abi: [ abiItem ],
+          functionName: abiItem.name,
+          args,
+        }),
+        to: address,
+      };
+
+      if (_isEqual(params, callParams) && id) {
+        return route.fulfill({
+          status: 200,
+          body: JSON.stringify({
+            id,
+            jsonrpc: '2.0',
+            result: encodeFunctionResult({
+              abi: [ abiItem ],
+              functionName: abiItem.name,
+              result,
+            }),
+          }),
+        });
+      }
+    });
+  });
+};
+
+export default fixture;
diff --git a/playwright/fixtures/mockEnvs.ts b/playwright/fixtures/mockEnvs.ts
new file mode 100644
index 0000000000..9bd117d86c
--- /dev/null
+++ b/playwright/fixtures/mockEnvs.ts
@@ -0,0 +1,84 @@
+/* eslint-disable max-len */
+import type { TestFixture, Page } from '@playwright/test';
+
+export type MockEnvsFixture = (envs: Array<[string, string]>) => Promise<void>;
+
+const fixture: TestFixture<MockEnvsFixture, { page: Page }> = async({ page }, use) => {
+  await use(async(envs) => {
+    for (const [ name, value ] of envs) {
+      await page.evaluate(({ name, value }) => {
+        window.localStorage.setItem(name, value);
+      }, { name, value });
+    }
+  });
+};
+
+export default fixture;
+
+export const ENVS_MAP: Record<string, Array<[string, string]>> = {
+  optimisticRollup: [
+    [ 'NEXT_PUBLIC_ROLLUP_TYPE', 'optimistic' ],
+    [ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
+    [ 'NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL', 'https://localhost:3102' ],
+    [ 'NEXT_PUBLIC_FAULT_PROOF_ENABLED', 'true' ],
+  ],
+  arbitrumRollup: [
+    [ 'NEXT_PUBLIC_ROLLUP_TYPE', 'arbitrum' ],
+    [ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
+  ],
+  shibariumRollup: [
+    [ 'NEXT_PUBLIC_ROLLUP_TYPE', 'shibarium' ],
+    [ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
+  ],
+  zkEvmRollup: [
+    [ 'NEXT_PUBLIC_ROLLUP_TYPE', 'zkEvm' ],
+    [ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
+  ],
+  zkSyncRollup: [
+    [ 'NEXT_PUBLIC_ROLLUP_TYPE', 'zkSync' ],
+    [ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
+    [ 'NEXT_PUBLIC_VIEWS_CONTRACT_EXTRA_VERIFICATION_METHODS', 'none' ],
+  ],
+  bridgedTokens: [
+    [ 'NEXT_PUBLIC_BRIDGED_TOKENS_CHAINS', '[{"id":"1","title":"Ethereum","short_title":"ETH","base_url":"https://eth.blockscout.com/token/"},{"id":"56","title":"Binance Smart Chain","short_title":"BSC","base_url":"https://bscscan.com/token/"},{"id":"99","title":"POA","short_title":"POA","base_url":"https://blockscout.com/poa/core/token/"}]' ],
+    [ 'NEXT_PUBLIC_BRIDGED_TOKENS_BRIDGES', '[{"type":"omni","title":"OmniBridge","short_title":"OMNI"},{"type":"amb","title":"Arbitrary Message Bridge","short_title":"AMB"}]' ],
+  ],
+  userOps: [
+    [ 'NEXT_PUBLIC_HAS_USER_OPS', 'true' ],
+  ],
+  hasContractAuditReports: [
+    [ 'NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS', 'true' ],
+  ],
+  blockHiddenFields: [
+    [ 'NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS', '["burnt_fees", "total_reward", "nonce"]' ],
+  ],
+  stabilityEnvs: [
+    [ 'NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS', '["top_accounts"]' ],
+    [ 'NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS', '["value","fee_currency","gas_price","gas_fees","burnt_fees"]' ],
+    [ 'NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS', '["fee_per_gas"]' ],
+  ],
+  beaconChain: [
+    [ 'NEXT_PUBLIC_HAS_BEACON_CHAIN', 'true' ],
+  ],
+  txInterpretation: [
+    [ 'NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER', 'blockscout' ],
+  ],
+  noWalletClient: [
+    [ 'NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID', '' ],
+  ],
+  noAccount: [
+    [ 'NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED', 'false' ],
+  ],
+  noNftMarketplaces: [
+    [ 'NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES', '' ],
+  ],
+  navigationHighlightedRoutes: [
+    [ 'NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES', '["/blocks", "/apps"]' ],
+  ],
+  dataAvailability: [
+    [ 'NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED', 'true' ],
+  ],
+  nameService: [
+    [ 'NEXT_PUBLIC_NAME_SERVICE_API_HOST', 'https://localhost:3101' ],
+  ],
+};
diff --git a/playwright/fixtures/mockFeatures.ts b/playwright/fixtures/mockFeatures.ts
new file mode 100644
index 0000000000..9b82992c70
--- /dev/null
+++ b/playwright/fixtures/mockFeatures.ts
@@ -0,0 +1,16 @@
+/* eslint-disable max-len */
+import type { TestFixture, Page } from '@playwright/test';
+
+export type MockFeaturesFixture = (features: Array<[string, unknown]>) => Promise<void>;
+
+const fixture: TestFixture<MockFeaturesFixture, { page: Page }> = async({ page }, use) => {
+  await use(async(features) => {
+    for (const [ name, value ] of features) {
+      await page.evaluate(({ name, value }) => {
+        window.localStorage.setItem(`pw_feature:${ name }`, JSON.stringify(value));
+      }, { name, value });
+    }
+  });
+};
+
+export default fixture;
diff --git a/playwright/fixtures/mockRpcResponse.ts b/playwright/fixtures/mockRpcResponse.ts
new file mode 100644
index 0000000000..b257599fe3
--- /dev/null
+++ b/playwright/fixtures/mockRpcResponse.ts
@@ -0,0 +1,51 @@
+import type { TestFixture, Page } from '@playwright/test';
+import _isEqual from 'lodash/isEqual';
+import type { PublicRpcSchema } from 'viem';
+
+import { getEnvValue } from 'configs/app/utils';
+
+type Params = PublicRpcSchema[number];
+
+export type MockRpcResponseFixture = (params: Params) => Promise<void>;
+
+const fixture: TestFixture<MockRpcResponseFixture, { page: Page }> = async({ page }, use) => {
+  await use(async(rpcMock) => {
+    const rpcUrl = getEnvValue('NEXT_PUBLIC_NETWORK_RPC_URL');
+
+    if (!rpcUrl) {
+      return;
+    }
+
+    await page.route(rpcUrl, (route) => {
+      const method = route.request().method();
+
+      if (method !== 'POST') {
+        route.continue();
+        return;
+      }
+
+      const json = route.request().postDataJSON();
+      const id = json?.id;
+
+      const payload = {
+        id,
+        jsonrpc: '2.0',
+        method: rpcMock.Method,
+        ...(rpcMock.Parameters ? { params: rpcMock.Parameters } : {}),
+      };
+
+      if (_isEqual(json, payload) && id !== undefined) {
+        return route.fulfill({
+          status: 200,
+          json: {
+            id,
+            jsonrpc: '2.0',
+            result: rpcMock.ReturnType,
+          },
+        });
+      }
+    });
+  });
+};
+
+export default fixture;
diff --git a/playwright/fixtures/mockTextAd.ts b/playwright/fixtures/mockTextAd.ts
new file mode 100644
index 0000000000..5ad764fe60
--- /dev/null
+++ b/playwright/fixtures/mockTextAd.ts
@@ -0,0 +1,23 @@
+import type { TestFixture, Page } from '@playwright/test';
+
+import * as textAdMock from 'mocks/ad/textAd';
+
+export type MockTextAdFixture = () => Promise<void>;
+
+const fixture: TestFixture<MockTextAdFixture, { page: Page }> = async({ page }, use) => {
+  await use(async() => {
+
+    await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(textAdMock.duck),
+    }));
+    await page.route(textAdMock.duck.ad.thumbnail, (route) => {
+      return route.fulfill({
+        status: 200,
+        path: './playwright/mocks/image_s.jpg',
+      });
+    });
+  });
+};
+
+export default fixture;
diff --git a/playwright/fixtures/render.tsx b/playwright/fixtures/render.tsx
index 88f7fe669f..789f77ad63 100644
--- a/playwright/fixtures/render.tsx
+++ b/playwright/fixtures/render.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-imports */
 import type { MountOptions } from '@playwright/experimental-ct-react';
 import type { Locator, TestFixture } from '@playwright/test';
 import type router from 'next/router';
diff --git a/playwright/fixtures/socketServer.ts b/playwright/fixtures/socketServer.ts
index f630cdd012..09e6ed00b7 100644
--- a/playwright/fixtures/socketServer.ts
+++ b/playwright/fixtures/socketServer.ts
@@ -5,10 +5,11 @@ import { WebSocketServer } from 'ws';
 import type { AddressCoinBalanceHistoryItem, AddressTokensBalancesSocketMessage } from 'types/api/address';
 import type { NewBlockSocketResponse } from 'types/api/block';
 import type { SmartContractVerificationResponse } from 'types/api/contract';
+import type { TokenInstanceMetadataSocketMessage } from 'types/api/token';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 import type { Transaction } from 'types/api/transaction';
 
-import * as app from 'playwright/utils/app';
+import { port as socketPort } from '../utils/socket';
 
 export type CreateSocketFixture = () => Promise<WebSocket>;
 
@@ -20,7 +21,7 @@ export interface SocketServerFixture {
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const createSocket: TestFixture<CreateSocketFixture, { page: Page}> = async({ page }, use) => {
-  const socketServer = new WebSocketServer({ port: app.socketPort });
+  const socketServer = new WebSocketServer({ port: socketPort });
 
   const connectionPromise = new Promise<WebSocket>((resolve) => {
     socketServer.on('connection', (socket: WebSocket) => {
@@ -71,8 +72,10 @@ export function sendMessage(socket: WebSocket, channel: Channel, msg: 'new_block
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'verification_result', payload: SmartContractVerificationResponse): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'total_supply', payload: { total_supply: number}): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'changed_bytecode', payload: Record<string, never>): void;
+export function sendMessage(socket: WebSocket, channel: Channel, msg: 'fetched_bytecode', payload: { fetched_bytecode: string }): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'smart_contract_was_verified', payload: Record<string, never>): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'token_transfer', payload: { token_transfers: Array<TokenTransfer> }): void;
+export function sendMessage(socket: WebSocket, channel: Channel, msg: 'fetched_token_instance_metadata', payload: TokenInstanceMetadataSocketMessage): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: string, payload: unknown): void {
   socket.send(JSON.stringify([
     ...channel,
diff --git a/playwright/lib.tsx b/playwright/lib.tsx
index 215f71d17e..586f980bf0 100644
--- a/playwright/lib.tsx
+++ b/playwright/lib.tsx
@@ -1,32 +1,50 @@
 /* eslint-disable no-console */
 import { test as base } from '@playwright/experimental-ct-react';
 
-import * as textAdMock from 'mocks/ad/textAd';
-
-import type { MockApiResponseFixture } from './fixtures/mockApiResponse';
-import mockApiResponseFixture from './fixtures/mockApiResponse';
-import type { MockAssetResponseFixture } from './fixtures/mockAssetResponse';
-import mockAssetResponseFixture from './fixtures/mockAssetResponse';
-import type { RenderFixture } from './fixtures/render';
-import renderFixture from './fixtures/render';
-import type { CreateSocketFixture } from './fixtures/socketServer';
-import { createSocket as createSocketFixture } from './fixtures/socketServer';
+import * as injectMetaMaskProvider from './fixtures/injectMetaMaskProvider';
+import * as mockApiResponse from './fixtures/mockApiResponse';
+import * as mockAssetResponse from './fixtures/mockAssetResponse';
+import * as mockConfigResponse from './fixtures/mockConfigResponse';
+import * as mockContractReadResponse from './fixtures/mockContractReadResponse';
+import * as mockEnvs from './fixtures/mockEnvs';
+import * as mockFeatures from './fixtures/mockFeatures';
+import * as mockRpcResponse from './fixtures/mockRpcResponse';
+import * as mockTextAd from './fixtures/mockTextAd';
+import * as render from './fixtures/render';
+import * as socketServer from './fixtures/socketServer';
 
 interface Fixtures {
-  render: RenderFixture;
-  mockApiResponse: MockApiResponseFixture;
-  mockAssetResponse: MockAssetResponseFixture;
-  createSocket: CreateSocketFixture;
+  render: render.RenderFixture;
+  mockApiResponse: mockApiResponse.MockApiResponseFixture;
+  mockAssetResponse: mockAssetResponse.MockAssetResponseFixture;
+  mockConfigResponse: mockConfigResponse.MockConfigResponseFixture;
+  mockContractReadResponse: mockContractReadResponse.MockContractReadResponseFixture;
+  mockEnvs: mockEnvs.MockEnvsFixture;
+  mockFeatures: mockFeatures.MockFeaturesFixture;
+  mockRpcResponse: mockRpcResponse.MockRpcResponseFixture;
+  createSocket: socketServer.CreateSocketFixture;
+  injectMetaMaskProvider: injectMetaMaskProvider.InjectMetaMaskProvider;
+  mockTextAd: mockTextAd.MockTextAdFixture;
 }
 
 const test = base.extend<Fixtures>({
-  render: renderFixture,
-  mockApiResponse: mockApiResponseFixture,
-  mockAssetResponse: mockAssetResponseFixture,
-  createSocket: createSocketFixture,
+  render: render.default,
+  mockApiResponse: mockApiResponse.default,
+  mockAssetResponse: mockAssetResponse.default,
+  mockConfigResponse: mockConfigResponse.default,
+  mockContractReadResponse: mockContractReadResponse.default,
+  mockEnvs: mockEnvs.default,
+  mockFeatures: mockFeatures.default,
+  mockRpcResponse: mockRpcResponse.default,
+  // FIXME: for some reason Playwright does not intercept requests to text ad provider when running multiple tests in parallel
+  // even if we have a global request interceptor (maybe it is related to service worker issue, maybe not)
+  // so we have to inject mockTextAd fixture in each test and mock the response where it is needed
+  mockTextAd: mockTextAd.default,
+  createSocket: socketServer.createSocket,
+  injectMetaMaskProvider: injectMetaMaskProvider.default,
 });
 
-test.beforeEach(async({ page }) => {
+test.beforeEach(async({ page, mockTextAd }) => {
   // debug
   const isDebug = process.env.PWDEBUG === '1';
 
@@ -48,16 +66,7 @@ test.beforeEach(async({ page }) => {
 
   // with few exceptions:
   //  1. mock text AD requests
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
+  await mockTextAd();
 });
 
 export * from '@playwright/experimental-ct-react';
diff --git a/playwright/mocks/lib/growthbook/useFeatureValue.js b/playwright/mocks/lib/growthbook/useFeatureValue.js
index e3c810f70b..e731be89f3 100644
--- a/playwright/mocks/lib/growthbook/useFeatureValue.js
+++ b/playwright/mocks/lib/growthbook/useFeatureValue.js
@@ -1,6 +1,9 @@
 const useFeatureValue = (name, fallback) => {
   try {
     const value = JSON.parse(localStorage.getItem(`pw_feature:${ name }`));
+    if (value === null) {
+      throw new Error();
+    }
     return { isLoading: false, value };
   } catch (error) {
     return { isLoading: false, value: fallback };
diff --git a/playwright/utils/app.ts b/playwright/utils/app.ts
deleted file mode 100644
index 475376830e..0000000000
--- a/playwright/utils/app.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const url = `${ process.env.NEXT_PUBLIC_APP_PROTOCOL }://${ process.env.NEXT_PUBLIC_APP_HOST }:${ process.env.NEXT_PUBLIC_APP_PORT }`;
-
-export const domain = process.env.NEXT_PUBLIC_APP_HOST;
-
-export const socketPort = 3200;
diff --git a/playwright/utils/buildApiUrl.ts b/playwright/utils/buildApiUrl.ts
deleted file mode 100644
index f8ce6bc063..0000000000
--- a/playwright/utils/buildApiUrl.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { compile } from 'path-to-regexp';
-
-import config from 'configs/app';
-import type { ResourceName, ResourcePathParams } from 'lib/api/resources';
-import { RESOURCES } from 'lib/api/resources';
-
-// DEPRECATED
-
-/**
- * @deprecated please use fixture mockApiResponse from playwright/lib.tsx for rendering test suite
- *
- * @export
- * @template R
- * @param {R} resourceName
- * @param {ResourcePathParams<R>} [pathParams]
- * @return {*} string
- */
-export default function buildApiUrl<R extends ResourceName>(resourceName: R, pathParams?: ResourcePathParams<R>) {
-  const resource = RESOURCES[resourceName];
-  const origin = 'endpoint' in resource && resource.endpoint ? resource.endpoint + (resource.basePath ?? '') : config.api.endpoint;
-  return origin + compile(resource.path)(pathParams);
-}
diff --git a/playwright/utils/config.ts b/playwright/utils/config.ts
new file mode 100644
index 0000000000..3e85475096
--- /dev/null
+++ b/playwright/utils/config.ts
@@ -0,0 +1,12 @@
+import { devices } from '@playwright/test';
+
+export const viewport = {
+  mobile: devices['iPhone 13 Pro'].viewport,
+  md: { width: 1001, height: 800 },
+  xl: { width: 1600, height: 1000 },
+  xxl: { width: 1920, height: 1200 },
+};
+
+export const maskColor = '#4299E1'; // blue.400
+
+export const adsBannerSelector = '.adsbyslise';
diff --git a/playwright/utils/configs.ts b/playwright/utils/configs.ts
deleted file mode 100644
index d0a7ac6da9..0000000000
--- a/playwright/utils/configs.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-/* eslint-disable max-len */
-import { devices } from '@playwright/test';
-
-export const viewport = {
-  mobile: devices['iPhone 13 Pro'].viewport,
-  md: { width: 1001, height: 800 },
-  xl: { width: 1600, height: 1000 },
-};
-
-export const maskColor = '#4299E1'; // blue.400
-
-export const adsBannerSelector = '.adsbyslise';
-
-export const featureEnvs = {
-  beaconChain: [
-    { name: 'NEXT_PUBLIC_HAS_BEACON_CHAIN', value: 'true' },
-  ],
-  optimisticRollup: [
-    { name: 'NEXT_PUBLIC_ROLLUP_TYPE', value: 'optimistic' },
-    { name: 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', value: 'https://localhost:3101' },
-    { name: 'NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL', value: 'https://localhost:3102' },
-  ],
-  shibariumRollup: [
-    { name: 'NEXT_PUBLIC_ROLLUP_TYPE', value: 'shibarium' },
-    { name: 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', value: 'https://localhost:3101' },
-  ],
-  bridgedTokens: [
-    {
-      name: 'NEXT_PUBLIC_BRIDGED_TOKENS_CHAINS',
-      value: '[{"id":"1","title":"Ethereum","short_title":"ETH","base_url":"https://eth.blockscout.com/token/"},{"id":"56","title":"Binance Smart Chain","short_title":"BSC","base_url":"https://bscscan.com/token/"},{"id":"99","title":"POA","short_title":"POA","base_url":"https://blockscout.com/poa/core/token/"}]',
-    },
-    {
-      name: 'NEXT_PUBLIC_BRIDGED_TOKENS_BRIDGES',
-      value: '[{"type":"omni","title":"OmniBridge","short_title":"OMNI"},{"type":"amb","title":"Arbitrary Message Bridge","short_title":"AMB"}]',
-    },
-  ],
-  txInterpretation: [
-    { name: 'NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER', value: 'blockscout' },
-  ],
-  zkEvmRollup: [
-    { name: 'NEXT_PUBLIC_ROLLUP_TYPE', value: 'zkEvm' },
-    { name: 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', value: 'https://localhost:3101' },
-  ],
-  zkSyncRollup: [
-    { name: 'NEXT_PUBLIC_ROLLUP_TYPE', value: 'zkSync' },
-    { name: 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', value: 'https://localhost:3101' },
-  ],
-  userOps: [
-    { name: 'NEXT_PUBLIC_HAS_USER_OPS', value: 'true' },
-  ],
-  validators: [
-    { name: 'NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE', value: 'stability' },
-  ],
-};
-
-export const viewsEnvs = {
-  block: {
-    hiddenFields: [
-      { name: 'NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS', value: '["burnt_fees", "total_reward", "nonce"]' },
-    ],
-  },
-};
-
-export const UIEnvs = {
-  hasContractAuditReports: [
-    { name: 'NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS', value: 'true' },
-  ],
-};
-
-export const stabilityEnvs = [
-  { name: 'NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS', value: '["top_accounts"]' },
-  { name: 'NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS', value: '["value","fee_currency","gas_price","gas_fees","burnt_fees"]' },
-  { name: 'NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS', value: '["fee_per_gas"]' },
-];
diff --git a/playwright/utils/socket.ts b/playwright/utils/socket.ts
new file mode 100644
index 0000000000..26a8a2202b
--- /dev/null
+++ b/playwright/utils/socket.ts
@@ -0,0 +1 @@
+export const port = 3200;
diff --git a/prometheus.yml b/prometheus.yml
new file mode 100644
index 0000000000..89b95e0ecb
--- /dev/null
+++ b/prometheus.yml
@@ -0,0 +1,16 @@
+global:
+  scrape_interval:     15s
+  evaluation_interval: 15s
+
+rule_files:
+  # - "first.rules"
+  # - "second.rules"
+
+scrape_configs:
+  - job_name: prometheus
+    static_configs:
+      - targets: ['localhost:9090']
+  - job_name: frontend
+    metrics_path: /node-api/metrics
+    static_configs:
+      - targets: ['host.docker.internal:3000']
\ No newline at end of file
diff --git a/public/README.md b/public/README.md
new file mode 100644
index 0000000000..3fd1a97a4c
--- /dev/null
+++ b/public/README.md
@@ -0,0 +1,4 @@
+**Directories**
+- `/icons` - Folder for SVG-sprite assets, generated at build time.
+- `/static` - Folder for static assets that are consistent between app re-runs but may differ from one build version to another.
+- `/assets` - Folder for dynamically generated assets during the app start, such as the favicon bundle, ENV variables file, and external app configurations.
\ No newline at end of file
diff --git a/public/favicon/apple-touch-icon-120x120.png b/public/assets/favicon/apple-touch-icon-120x120.png
similarity index 100%
rename from public/favicon/apple-touch-icon-120x120.png
rename to public/assets/favicon/apple-touch-icon-120x120.png
diff --git a/public/favicon/apple-touch-icon-152x152.png b/public/assets/favicon/apple-touch-icon-152x152.png
similarity index 100%
rename from public/favicon/apple-touch-icon-152x152.png
rename to public/assets/favicon/apple-touch-icon-152x152.png
diff --git a/public/favicon/apple-touch-icon-180x180.png b/public/assets/favicon/apple-touch-icon-180x180.png
similarity index 100%
rename from public/favicon/apple-touch-icon-180x180.png
rename to public/assets/favicon/apple-touch-icon-180x180.png
diff --git a/public/favicon/apple-touch-icon-60x60.png b/public/assets/favicon/apple-touch-icon-60x60.png
similarity index 100%
rename from public/favicon/apple-touch-icon-60x60.png
rename to public/assets/favicon/apple-touch-icon-60x60.png
diff --git a/public/favicon/apple-touch-icon-76x76.png b/public/assets/favicon/apple-touch-icon-76x76.png
similarity index 100%
rename from public/favicon/apple-touch-icon-76x76.png
rename to public/assets/favicon/apple-touch-icon-76x76.png
diff --git a/public/favicon/apple-touch-icon.png b/public/assets/favicon/apple-touch-icon.png
similarity index 100%
rename from public/favicon/apple-touch-icon.png
rename to public/assets/favicon/apple-touch-icon.png
diff --git a/public/favicon/favicon-16x16.png b/public/assets/favicon/favicon-16x16.png
similarity index 100%
rename from public/favicon/favicon-16x16.png
rename to public/assets/favicon/favicon-16x16.png
diff --git a/public/favicon/favicon-32x32.png b/public/assets/favicon/favicon-32x32.png
similarity index 100%
rename from public/favicon/favicon-32x32.png
rename to public/assets/favicon/favicon-32x32.png
diff --git a/public/favicon/favicon.ico b/public/assets/favicon/favicon.ico
similarity index 100%
rename from public/favicon/favicon.ico
rename to public/assets/favicon/favicon.ico
diff --git a/public/assets/favicon/safari-pinned-tab.svg b/public/assets/favicon/safari-pinned-tab.svg
new file mode 100644
index 0000000000..f6a897c125
--- /dev/null
+++ b/public/assets/favicon/safari-pinned-tab.svg
@@ -0,0 +1,3 @@
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180">
+  <path d="M34.9 2.9c-2.9 2.9-2.9 3-2.9 15 0 6.8-.5 13.1-1.1 14.5-1.9 4-6.6 5.6-16.6 5.6C4.7 38 1.7 39.4.5 44.3.2 45.5.1 75.4.2 110.7l.3 64.2 2.3 2.3c2.1 2.1 3.3 2.3 14.6 2.6 14.8.4 17.9-.6 19.5-6.6.7-2.4 1.1-26.2 1.1-66.9V43.1l2.4-2.8c2.3-2.7 2.9-2.8 13.6-3.3 15-.7 15-.6 15-18.2v-13l-2.9-2.9C63.2 0 63.2 0 50.5 0S37.8 0 34.9 2.9zm76.9-1.4c-3.9 2.2-5.1 7.8-4.6 20.4.5 9.8.6 10.6 3.2 12.8 2.3 2 3.8 2.3 10.5 2.3 4.3 0 9.2.5 11 1.1 6.3 2.2 6.1.3 6.1 71.4v64.7l2.9 2.9c2.9 2.9 3 2.9 15.4 2.9 12 0 12.7-.1 15.6-2.6l3.1-2.6V42.9l-2.5-2.4c-2.2-2.2-3.2-2.5-10.5-2.5-8.1 0-14-1.6-15.6-4.1-.5-.8-1.1-7.6-1.4-15.1C144.3.3 144.6.6 127.2.2c-9.8-.1-13.3.1-15.4 1.3zM72.3 74.4l-2.8 2.4-.3 30.6-.3 30.5 3 3.3 2.9 3.3h13.1c12.9 0 13.1 0 15.8-2.8l2.8-2.7V76.8l-2.8-2.4C101 72.1 100.2 72 88 72s-13 .1-15.7 2.4z"/>
+</svg>
diff --git a/public/favicon/safari-pinned-tab.svg b/public/favicon/safari-pinned-tab.svg
deleted file mode 100644
index 42feeb243d..0000000000
--- a/public/favicon/safari-pinned-tab.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 604 604">
-  <path d="M294.7.6c-.1.1-2.8.5-5.9.8C275.2 3 257.9 9.5 245 18c-.8.6-2.2 1.3-3 1.7-.8.4-3.2 1.7-5.3 3.1-2.2 1.3-6 3.5-8.5 4.9-2.6 1.5-6 3.5-7.7 4.5-1.6 1-3.7 2.1-4.5 2.5-.7.4-4.2 2.4-7.7 4.5-3.4 2.1-6.5 3.8-6.7 3.8-.3 0-4.6 2.5-9.6 5.5s-9.2 5.5-9.4 5.5c-.2 0-3.3 1.7-6.7 3.8-3.5 2.2-8.4 5-10.9 6.4-2.5 1.4-6.1 3.5-8 4.6-1.9 1.1-5.1 2.9-7 4-1.9 1.1-10.6 6.1-19.3 11.1-8.6 5-16.1 9.1-16.6 9.1s-1.1.4-1.3.8c-.1.5-1.5 1.5-3 2.3-7.2 3.6-33 18.8-38.6 22.7-5.5 3.7-10.2 7.5-14.6 11.8-.7.6-2.8 3.1-4.7 5.4-1.8 2.3-3.9 4.7-4.4 5.4-1.1 1.1-4.1 5.7-6.2 9.1-2.7 4.5-8 16.3-8.8 19.5-.2.8-1.1 3.9-1.9 6.9-.8 3-1.8 8-2.2 11-1 7.4-.9 221 0 228.1.4 3 1.4 8 2.2 11 .8 3 1.7 6.3 1.9 7.2.8 3.7 8.5 18.9 12.5 24.9 8.1 12.1 24.7 26.6 38 33.4 1.9 1 6.8 3.7 10.7 6.1 4 2.4 7.7 4.4 8.3 4.4.5 0 1 .4 1 .8 0 .5 1.6 1.6 3.6 2.5 3.4 1.7 31.3 17.7 34.4 19.8.8.5 2.7 1.5 4.3 2.2 1.5.6 2.7 1.5 2.7 1.9 0 .4.4.8 1 .8.5 0 5.5 2.7 11.1 6 5.5 3.3 10.2 6 10.4 6 .2 0 6.1 3.4 13.1 7.6 7.1 4.2 13.8 8 14.9 8.6 2.7 1.2 6 3.1 7.6 4.4.8.6 3.9 2.5 6.9 4.1 6.2 3.4 7.4 4.1 25 14.3 21.1 12.4 34.4 18.2 44 19.4 1.9.3 3.5.5 3.5.6 0 .5 9.9 1.3 15.5 1.4 10.2 0 18.3-1 29-3.9 3.5-.9 9.9-3.4 15.5-6.2 4.6-2.2 36-20.1 46.5-26.4 9.6-5.7 43.5-24.9 44.1-24.9.5 0 .9-.3.9-.8 0-.4 1.5-1.3 3.3-2.1 1.7-.8 3.4-1.7 3.7-2.1.3-.4 4.1-2.6 8.5-5s8.7-4.9 9.5-5.6c.8-.7 2.2-1.4 3-1.6.8-.2 1.7-.5 2-.9.7-.7 10.9-6.9 11.5-6.9.4 0 11.9-6.7 15.5-9 .8-.6 2.2-1.3 3-1.7.8-.4 5.9-3.3 11.3-6.5 5.3-3.2 9.9-5.8 10.2-5.8.7 0 13.9-8.3 18-11.4 6.4-4.7 17.7-16.6 22.2-23.1 3.4-5.1 8.4-13.8 8.8-15.5.1-.3.6-1.6 1.2-3s1.8-4.2 2.6-6.3c.9-2 1.4-3.7 1.2-3.7-.2 0 .2-2.1 1-4.7.8-2.7 1.7-7.3 2.1-10.3.9-6.8.9-220.6.1-227.5-1.2-9-3.7-18.6-6.8-25.2-1-2.4-1.9-4.7-1.9-5.2s-.3-1.1-.7-1.3c-.5-.2-2.1-2.9-3.7-6.1-1.6-3.1-3.2-5.7-3.7-5.7s-.9-.7-.9-1.6c0-.8-4.8-6.3-10.7-12.2-10.5-10.4-19.3-16.5-40.3-27.8-1.9-1-4.2-2.4-5-3-.8-.6-4-2.5-7-4.1-6.7-3.6-7-3.8-34.5-19.8-12.1-7.1-24.5-14.2-27.5-15.8-3-1.6-6.2-3.6-7.1-4.3-.8-.8-1.8-1.4-2.1-1.4-.3 0-6.1-3.2-12.9-7.1-25.5-14.7-58.6-33.7-63-36.2-5-2.7-17.9-7.6-21.9-8.3-1.4-.2-3.6-.7-5-1-1.4-.3-3.8-.8-5.5-1.1-3.1-.5-20.4-1.1-20.8-.7z"/>
-</svg>
diff --git a/public/icons/name.d.ts b/public/icons/name.d.ts
index 6f6bc7c55b..76d304b1a2 100644
--- a/public/icons/name.d.ts
+++ b/public/icons/name.d.ts
@@ -5,6 +5,7 @@
 	| "ABI"
 	| "API"
 	| "apps_list"
+	| "apps_slim"
 	| "apps_xs"
 	| "apps"
 	| "arrows/down-right"
@@ -13,30 +14,38 @@
 	| "arrows/north-east"
 	| "arrows/south-east"
 	| "arrows/up-down"
+	| "arrows/up-head"
 	| "beta_xs"
 	| "beta"
 	| "blob"
 	| "blobs/image"
 	| "blobs/raw"
 	| "blobs/text"
+	| "block_countdown"
 	| "block_slim"
 	| "block"
+	| "brands/blockscout"
+	| "brands/celenium"
 	| "brands/safe"
 	| "brands/solidity_scan"
 	| "burger"
+	| "certified"
 	| "check"
+	| "checkered_flag"
 	| "clock-light"
 	| "clock"
 	| "coins/bitcoin"
 	| "collection"
-	| "contract_verified"
-	| "contract"
 	| "contracts_verified"
 	| "contracts"
+	| "contracts/proxy"
+	| "contracts/regular_many"
+	| "contracts/regular"
+	| "contracts/verified_many"
+	| "contracts/verified"
 	| "copy"
 	| "cross"
 	| "delete"
-	| "discussions"
 	| "docs"
 	| "donate"
 	| "dots"
@@ -58,8 +67,8 @@
 	| "files/sol"
 	| "files/yul"
 	| "filter"
-	| "finalized"
 	| "flame"
+	| "games"
 	| "gas_xl"
 	| "gas"
 	| "gear_slim"
@@ -67,11 +76,16 @@
 	| "globe-b"
 	| "globe"
 	| "graphQL"
+	| "heart_filled"
+	| "heart_outline"
+	| "hourglass"
 	| "info"
 	| "integration/full"
 	| "integration/partial"
 	| "key"
+	| "lightning_navbar"
 	| "lightning"
+	| "link_external"
 	| "link"
 	| "lock"
 	| "minus"
@@ -82,18 +96,25 @@
 	| "monaco/vyper"
 	| "moon-with-star"
 	| "moon"
+	| "MUD_menu"
+	| "MUD"
 	| "networks"
 	| "networks/icon-placeholder"
 	| "networks/logo-placeholder"
+	| "networks/lukso/icon-lukso"
+	| "networks/lukso/logo-lukso"
 	| "nft_shield"
+	| "open-link"
 	| "output_roots"
+	| "payment_link"
 	| "plus"
 	| "privattags"
 	| "profile"
 	| "publictags_slim"
 	| "publictags"
 	| "qr_code"
-	| "repeat_arrow"
+	| "refresh"
+	| "repeat"
 	| "restAPI"
 	| "rocket_xl"
 	| "rocket"
@@ -102,6 +123,7 @@
 	| "score/score-not-ok"
 	| "score/score-ok"
 	| "search"
+	| "share"
 	| "social/canny"
 	| "social/coingecko"
 	| "social/coinmarketcap"
@@ -119,8 +141,8 @@
 	| "social/stats"
 	| "social/telega"
 	| "social/telegram_filled"
-	| "social/tweet"
 	| "social/twitter_filled"
+	| "social/twitter"
 	| "star_filled"
 	| "star_outline"
 	| "stats"
@@ -140,15 +162,14 @@
 	| "transactions"
 	| "txn_batches_slim"
 	| "txn_batches"
-	| "unfinalized"
 	| "uniswap"
 	| "up"
 	| "user_op_slim"
 	| "user_op"
 	| "validator"
-	| "verified_token"
+	| "verification-steps/finalized"
+	| "verification-steps/unfinalized"
 	| "verified"
-	| "verify-contract"
 	| "wallet"
 	| "wallets/coinbase"
 	| "wallets/metamask"
diff --git a/public/static/apple_calendar.svg b/public/static/apple_calendar.svg
new file mode 100644
index 0000000000..a55a0d5f36
--- /dev/null
+++ b/public/static/apple_calendar.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 21">
+  <g clip-path="url(#a)">
+    <path fill="#fff" d="m20.226 7.09-.001-.717a26.42 26.42 0 0 0-.01-.604 8.818 8.818 0 0 0-.115-1.313 4.42 4.42 0 0 0-.412-1.25 4.206 4.206 0 0 0-1.836-1.836 4.403 4.403 0 0 0-1.249-.41A8.815 8.815 0 0 0 15.29.843c-.2-.006-.402-.008-.603-.01H5.765c-.2.001-.402.004-.603.01a8.92 8.92 0 0 0-1.314.115c-.44.079-.85.209-1.248.411A4.207 4.207 0 0 0 .764 3.207c-.204.4-.333.809-.412 1.249a8.69 8.69 0 0 0-.115 1.313c-.006.201-.009.403-.01.604l-.001.717v7.487l.001.717c.001.2.004.402.01.603.012.438.038.88.115 1.314.08.44.209.85.412 1.25a4.202 4.202 0 0 0 1.837 1.835c.399.204.808.333 1.248.411.433.078.876.104 1.314.116.2.006.402.008.603.01h8.921c.2-.002.402-.004.603-.01a8.776 8.776 0 0 0 1.314-.116 4.43 4.43 0 0 0 1.248-.41 4.204 4.204 0 0 0 1.837-1.837c.203-.4.332-.809.412-1.249.077-.433.103-.875.115-1.314.006-.2.008-.402.01-.603V7.09Z"/>
+    <path fill="#000" d="M7.69 17.195V7.891H7.3L4.93 9.46v.396l2.343-1.534H7.3v8.873h.39Zm2.316-9.305v.357h5.111v.028l-4.105 8.921h.44l4.07-8.928V7.89h-5.516Z"/>
+    <path fill="red" d="M3.86 6.066V4.054h.007l.795 1.806h.264l.793-1.806h.01v2.012h.263V3.4h-.28L4.8 5.536h-.007l-.916-2.134h-.28v2.664h.264Zm3.566-2.079c-.556 0-.865.405-.865.953v.2c0 .552.306.958.865.958.559 0 .863-.406.863-.957V4.94c.001-.548-.308-.953-.863-.953Zm0 .252c.363 0 .576.271.576.715v.172c0 .445-.213.717-.576.717-.365 0-.577-.274-.577-.717v-.172c0-.443.212-.715.577-.715Zm1.402 1.827h.287V4.813c0-.293.16-.563.535-.563.32 0 .526.194.526.543v1.27h.287V4.75c0-.496-.315-.764-.736-.764-.336 0-.528.176-.604.313h-.008v-.28h-.287v2.048Zm2.956-2.081c-.509 0-.819.397-.819.951v.21c0 .564.287.95.819.95a.67.67 0 0 0 .613-.35h.007v.319h.271V3.258h-.287v1.055h-.007a.672.672 0 0 0-.597-.328Zm.026.257c.363 0 .586.285.586.707v.19c0 .44-.217.703-.583.703-.324 0-.56-.236-.56-.705v-.185c0-.478.24-.71.557-.71ZM14.453 5.8h.007v.266h.28V4.644c0-.42-.309-.657-.735-.657-.474 0-.718.248-.742.604h.271c.023-.217.178-.356.46-.356.29 0 .459.155.459.442v.22h-.557c-.467.002-.713.229-.713.583 0 .375.271.62.669.62.312-.002.502-.136.6-.3Zm-.534.051c-.23 0-.44-.123-.44-.377 0-.199.127-.342.426-.342h.548v.252c0 .275-.23.467-.534.467Zm2.935-1.831h-.306l-.584 1.712h-.01l-.585-1.712h-.32l.765 2.078-.04.125c-.06.211-.163.334-.404.334a.96.96 0 0 1-.15-.012v.245c.051.007.127.016.195.016.399 0 .536-.274.643-.569l.058-.153.738-2.064Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M.226.833h20v20h-20z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/public/static/gas_hawk_logo.svg b/public/static/gas_hawk_logo.svg
new file mode 100644
index 0000000000..ffa6acdde5
--- /dev/null
+++ b/public/static/gas_hawk_logo.svg
@@ -0,0 +1,24 @@
+<svg viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.4 12.07c-.164-.152-.302-.312-.456-.454-.703-.668-.168-1.364-.168-1.364s-.844.132-2.113-.128a4.273 4.273 0 0 0-4.44 1.175 2.618 2.618 0 0 0-2.084 2.334 4.722 4.722 0 0 0-.002.5 4.64 4.64 0 0 0 .024.209s.023.132.038.196l.025.095v.003l.028.094.014.04a2.6 2.6 0 0 1 .286-.97.38.38 0 0 1 .346-.196 7 7 0 0 1 1.352.218 4.28 4.28 0 0 1 2.343 2.9h.001a4.683 4.683 0 0 1-.152 2.937A7.22 7.22 0 0 0 14.4 12.07Zm-4.82-.62a.644.644 0 0 1-1.074-.138c.118-.184.239-.278.36-.328.473-.212.807-.22.807-.22.1.221.073.489-.094.686Z" fill="url(#a)"/>
+  <path d="M9.594 16.721a4.743 4.743 0 0 1 .107.5l1.551 1.474.088.021a7.247 7.247 0 0 0 2.415-2.86c-3.78-3.424-7.12-2.33-7.856-2.252.464.029.916.103 1.352.218a4.28 4.28 0 0 1 2.343 2.9Z" fill="url(#b)"/>
+  <path d="M7.605.209A.46.46 0 0 0 7.22 0a.459.459 0 0 0-.387.209L1.381 8.544A7.185 7.185 0 0 0 0 12.782c-.004 3.86 3.064 7.044 6.889 7.218.562-.986.571-2.159.565-2.426a4.866 4.866 0 0 1-.236.006h-.033a4.757 4.757 0 0 1-3.361-1.422 4.755 4.755 0 0 1-1.396-3.374 4.751 4.751 0 0 1 .915-2.81l3.875-5.92L9.53 7.69a6.433 6.433 0 0 1 3.095.254L7.605.209Z" fill="url(#c)"/>
+  <path d="M12.256 17.96c-.686-1.602-1.57-2.637-2.252-3.249-1.07-.958-1.997-1.25-2.875-1.24-.877.01-1.361.15-1.361.15a.408.408 0 0 1 .13-.017c.465.029.917.102 1.352.217a4.28 4.28 0 0 1 2.344 2.9 4.683 4.683 0 0 1-.152 2.937 7.22 7.22 0 0 0 2.814-1.7v.001Z" fill="url(#d)"/>
+  <defs>
+    <linearGradient id="a" x1="7.369" y1="12.845" x2="12.113" y2="14.707" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FDF0C2"/>
+      <stop offset="1" stop-color="#F6C789"/>
+    </linearGradient>
+    <linearGradient id="b" x1="9.827" y1="13.377" x2="9.837" y2="18.83" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FDF1C3"/>
+      <stop offset=".625" stop-color="#F5C57D"/>
+    </linearGradient>
+    <linearGradient id="c" x1="2.388" y1="15.63" x2="11.492" y2="4.616" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#F5C060"/>
+      <stop offset="1" stop-color="#F0994D"/>
+    </linearGradient>
+    <linearGradient id="d" x1="9.012" y1="13.47" x2="9.009" y2="15.153" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#F5C780"/>
+      <stop offset="1" stop-color="#FADFA1"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/public/static/google_calendar.svg b/public/static/google_calendar.svg
new file mode 100644
index 0000000000..7bd127e92c
--- /dev/null
+++ b/public/static/google_calendar.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 21">
+  <g clip-path="url(#a)">
+    <path fill="#fff" d="m15.489 5.57-4.737-.526-5.79.526-.526 5.263.526 5.263 5.264.658 5.263-.658.526-5.394-.526-5.132Z"/>
+    <path fill="#1A73E8" d="M7.122 13.736c-.394-.266-.666-.654-.815-1.167l.913-.376c.083.315.228.56.435.734.205.173.455.259.747.259.299 0 .555-.09.77-.272a.87.87 0 0 0 .322-.694.86.86 0 0 0-.34-.703c-.226-.18-.51-.272-.85-.272h-.527v-.904h.474c.292 0 .538-.079.738-.237a.78.78 0 0 0 .3-.648c0-.245-.09-.44-.269-.586-.179-.146-.405-.22-.68-.22-.268 0-.482.072-.64.215a1.26 1.26 0 0 0-.344.528l-.904-.377c.12-.34.34-.64.662-.898.322-.26.734-.39 1.234-.39.37 0 .703.071.997.215.295.143.527.342.694.594.167.254.25.539.25.854 0 .323-.078.595-.233.819a1.606 1.606 0 0 1-.573.514v.054c.3.125.542.316.735.572a1.5 1.5 0 0 1 .286.922c0 .357-.09.677-.272.957a1.89 1.89 0 0 1-.751.662 2.37 2.37 0 0 1-1.078.242 2.23 2.23 0 0 1-1.281-.397Zm5.604-4.532-.998.725-.5-.76 1.798-1.297h.69v6.12h-.99V9.203Z"/>
+    <path fill="#EA4335" d="m15.489 20.833 4.736-4.736-2.368-1.053-2.368 1.052-1.053 2.369 1.053 2.368Z"/>
+    <path fill="#34A853" d="m3.91 18.465 1.052 2.368H15.49v-4.736H4.962L3.91 18.465Z"/>
+    <path fill="#4285F4" d="M1.804.833C.932.833.226 1.54.226 2.413v13.683l2.368 1.053 2.368-1.053V5.57H15.49l1.052-2.368L15.49.833H1.804Z"/>
+    <path fill="#188038" d="M.226 16.097v3.157c0 .873.706 1.58 1.578 1.58h3.158v-4.737H.226Z"/>
+    <path fill="#FBBC04" d="M15.489 5.57v10.526h4.737V5.57l-2.369-1.052L15.49 5.57Z"/>
+    <path fill="#1967D2" d="M20.226 5.57V2.412a1.58 1.58 0 0 0-1.58-1.579H15.49V5.57h4.737Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M.226.833h20v20h-20z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/stubs/ENS.ts b/stubs/ENS.ts
index 4fbd654adf..a35773f077 100644
--- a/stubs/ENS.ts
+++ b/stubs/ENS.ts
@@ -1,20 +1,19 @@
-import type { EnsDomainDetailed, EnsDomainEvent } from 'types/api/ens';
+import * as bens from '@blockscout/bens-types';
 
 import { ADDRESS_PARAMS, ADDRESS_HASH } from './addressParams';
 import { TX_HASH } from './tx';
 
-export const ENS_DOMAIN: EnsDomainDetailed = {
+export const ENS_DOMAIN: bens.DetailedDomain = {
   id: '0x126d74db13895f8d3a1d362410212731d1e1d9be8add83e388385f93d84c8c84',
   name: 'kitty.cat.eth',
   tokens: [
     {
       id: '973523146267017920308',
       contract_hash: ADDRESS_HASH,
-      type: 'NATIVE_DOMAIN_TOKEN',
+      type: bens.TokenType.NATIVE_DOMAIN_TOKEN,
     },
   ],
   owner: ADDRESS_PARAMS,
-  wrapped_owner: null,
   resolved_address: ADDRESS_PARAMS,
   registrant: ADDRESS_PARAMS,
   registration_date: '2023-12-20T01:29:12.000Z',
@@ -22,9 +21,12 @@ export const ENS_DOMAIN: EnsDomainDetailed = {
   other_addresses: {
     ETH: ADDRESS_HASH,
   },
+  protocol: undefined,
+  resolved_with_wildcard: false,
+  stored_offchain: false,
 };
 
-export const ENS_DOMAIN_EVENT: EnsDomainEvent = {
+export const ENS_DOMAIN_EVENT: bens.DomainEvent = {
   transaction_hash: TX_HASH,
   timestamp: '2022-06-06T08:43:15.000000Z',
   from_address: ADDRESS_PARAMS,
diff --git a/stubs/L2.ts b/stubs/L2.ts
index 21346e0ef5..de57edde7c 100644
--- a/stubs/L2.ts
+++ b/stubs/L2.ts
@@ -1,5 +1,7 @@
 import type {
+  OptimismL2TxnBatch,
   OptimisticL2DepositsItem,
+  OptimisticL2DisputeGamesItem,
   OptimisticL2OutputRootsItem,
   OptimisticL2TxnBatchesItem,
   OptimisticL2WithdrawalsItem,
@@ -29,14 +31,29 @@ export const L2_WITHDRAWAL_ITEM: OptimisticL2WithdrawalsItem = {
 };
 
 export const L2_TXN_BATCHES_ITEM: OptimisticL2TxnBatchesItem = {
+  internal_id: 260991,
+  batch_data_container: 'in_blob4844',
   l1_timestamp: '2023-06-01T14:46:48.000000Z',
   l1_tx_hashes: [
     TX_HASH,
   ],
-  l2_block_number: 5218590,
+  l2_block_start: 5218590,
+  l2_block_end: 5218777,
   tx_count: 9,
 };
 
+export const L2_TXN_BATCH: OptimismL2TxnBatch = {
+  ...L2_TXN_BATCHES_ITEM,
+  batch_data_container: 'in_blob4844',
+  blobs: [
+    {
+      hash: '0x01fb41e1ae9f827e13abb0ee94be2ee574a23ac31426cea630ddd18af854bc85',
+      l1_timestamp: '2024-09-03T13:26:23.000000Z',
+      l1_transaction_hash: '0xd25ee571f1701690615099b208a9431d8611d0130dc342bead6d9edc291f04b9',
+    },
+  ],
+};
+
 export const L2_OUTPUT_ROOTS_ITEM: OptimisticL2OutputRootsItem = {
   l1_block_number: 9103684,
   l1_timestamp: '2023-06-01T15:26:12.000000Z',
@@ -45,3 +62,13 @@ export const L2_OUTPUT_ROOTS_ITEM: OptimisticL2OutputRootsItem = {
   l2_output_index: 50655,
   output_root: TX_HASH,
 };
+
+export const L2_DISPUTE_GAMES_ITEM: OptimisticL2DisputeGamesItem = {
+  contract_address: ADDRESS_HASH,
+  created_at: '2023-06-01T15:26:12.000000Z',
+  game_type: 0,
+  index: 6594,
+  l2_block_number: 50655,
+  resolved_at: null,
+  status: 'In progress',
+};
diff --git a/stubs/account.ts b/stubs/account.ts
index cdb1bab556..f46a3a064f 100644
--- a/stubs/account.ts
+++ b/stubs/account.ts
@@ -1,4 +1,4 @@
-import type { PublicTag, AddressTag, TransactionTag, ApiKey, CustomAbi, VerifiedAddress, TokenInfoApplication, WatchlistAddress } from 'types/api/account';
+import type { AddressTag, TransactionTag, ApiKey, CustomAbi, VerifiedAddress, TokenInfoApplication, WatchlistAddress } from 'types/api/account';
 
 import { ADDRESS_PARAMS, ADDRESS_HASH } from './addressParams';
 import { TX_HASH } from './tx';
@@ -6,35 +6,22 @@ import { TX_HASH } from './tx';
 export const PRIVATE_TAG_ADDRESS: AddressTag = {
   address: ADDRESS_PARAMS,
   address_hash: ADDRESS_HASH,
-  id: '4',
+  id: 4,
   name: 'placeholder',
 };
 
 export const PRIVATE_TAG_TX: TransactionTag = {
-  id: '1',
+  id: 1,
   name: 'placeholder',
   transaction_hash: TX_HASH,
 };
 
-export const PUBLIC_TAG: PublicTag = {
-  additional_comment: 'my comment',
-  addresses: [ ADDRESS_HASH ],
-  addresses_with_info: [ ADDRESS_PARAMS ],
-  company: 'Blockscout',
-  email: 'john.doe@example.com',
-  full_name: 'name',
-  id: 1,
-  is_owner: true,
-  tags: 'placeholder',
-  website: 'example.com',
-};
-
 export const WATCH_LIST_ITEM_WITH_TOKEN_INFO: WatchlistAddress = {
   address: ADDRESS_PARAMS,
   address_balance: '7072643779453701031672',
   address_hash: ADDRESS_HASH,
   exchange_rate: '0.00099052',
-  id: '18',
+  id: 18,
   name: 'placeholder',
   notification_methods: {
     email: false,
@@ -48,6 +35,10 @@ export const WATCH_LIST_ITEM_WITH_TOKEN_INFO: WatchlistAddress = {
       incoming: true,
       outcoming: true,
     },
+    'ERC-404': {
+      incoming: true,
+      outcoming: true,
+    },
     'native': {
       incoming: true,
       outcoming: true,
@@ -77,7 +68,7 @@ export const CUSTOM_ABI: CustomAbi = {
   ],
   contract_address: ADDRESS_PARAMS,
   contract_address_hash: ADDRESS_HASH,
-  id: '1',
+  id: 1,
   name: 'placeholder',
 };
 
diff --git a/stubs/address.ts b/stubs/address.ts
index 983565ca24..774a66af5f 100644
--- a/stubs/address.ts
+++ b/stubs/address.ts
@@ -3,6 +3,7 @@ import type {
   AddressCoinBalanceHistoryItem,
   AddressCollection,
   AddressCounters,
+  AddressMudTableItem,
   AddressNFT,
   AddressTabsCounters,
   AddressTokenBalance,
@@ -10,6 +11,7 @@ import type {
 import type { AddressesItem } from 'types/api/addresses';
 
 import { ADDRESS_HASH } from './addressParams';
+import { MUD_SCHEMA, MUD_TABLE } from './mud';
 import { TOKEN_INFO_ERC_1155, TOKEN_INFO_ERC_20, TOKEN_INFO_ERC_721, TOKEN_INFO_ERC_404, TOKEN_INSTANCE } from './token';
 import { TX_HASH } from './tx';
 
@@ -19,22 +21,15 @@ export const ADDRESS_INFO: Address = {
   creation_tx_hash: null,
   creator_address_hash: ADDRESS_HASH,
   exchange_rate: null,
-  has_custom_methods_read: false,
-  has_custom_methods_write: false,
   has_decompiled_code: false,
   has_logs: true,
-  has_methods_read: false,
-  has_methods_read_proxy: false,
-  has_methods_write: false,
-  has_methods_write_proxy: false,
   has_token_transfers: false,
   has_tokens: false,
   has_validated_blocks: false,
   hash: ADDRESS_HASH,
-  implementation_address: null,
-  implementation_name: null,
-  is_contract: false,
-  is_verified: false,
+  implementations: [ { address: ADDRESS_HASH, name: 'Transparent Upgradable Proxy' } ],
+  is_contract: true,
+  is_verified: true,
   name: 'ChainLink Token (goerli)',
   token: TOKEN_INFO_ERC_20,
   private_tags: [],
@@ -65,7 +60,7 @@ export const TOP_ADDRESS: AddressesItem = {
   coin_balance: '11886682377162664596540805',
   tx_count: '1835',
   hash: '0x4f7A67464B5976d7547c860109e4432d50AfB38e',
-  implementation_name: null,
+  implementations: null,
   is_contract: false,
   is_verified: null,
   name: null,
@@ -116,3 +111,8 @@ export const ADDRESS_COLLECTION: AddressCollection = {
   amount: '4',
   token_instances: Array(4).fill(TOKEN_INSTANCE),
 };
+
+export const ADDRESS_MUD_TABLE_ITEM: AddressMudTableItem = {
+  schema: MUD_SCHEMA,
+  table: MUD_TABLE,
+};
diff --git a/stubs/addressParams.ts b/stubs/addressParams.ts
index 819a71402b..8548abca9c 100644
--- a/stubs/addressParams.ts
+++ b/stubs/addressParams.ts
@@ -4,7 +4,7 @@ export const ADDRESS_HASH = '0x2B51Ae4412F79c3c1cB12AA40Ea4ECEb4e80511a';
 
 export const ADDRESS_PARAMS: AddressParam = {
   hash: ADDRESS_HASH,
-  implementation_name: null,
+  implementations: null,
   is_contract: false,
   is_verified: null,
   name: null,
diff --git a/stubs/arbitrumL2.ts b/stubs/arbitrumL2.ts
new file mode 100644
index 0000000000..a8e9ba0a1d
--- /dev/null
+++ b/stubs/arbitrumL2.ts
@@ -0,0 +1,38 @@
+import type { ArbitrumL2TxnBatchesItem, ArbitrumL2TxnBatch, ArbitrumL2MessagesItem } from 'types/api/arbitrumL2';
+
+import { ADDRESS_HASH } from './addressParams';
+import { TX_HASH } from './tx';
+
+export const ARBITRUM_MESSAGES_ITEM: ArbitrumL2MessagesItem = {
+  completion_transaction_hash: TX_HASH,
+  id: 181920,
+  origination_address: ADDRESS_HASH,
+  origination_transaction_block_number: 123456,
+  origination_transaction_hash: TX_HASH,
+  origination_timestamp: '2023-06-01T14:46:48.000000Z',
+  status: 'relayed',
+};
+
+export const ARBITRUM_L2_TXN_BATCHES_ITEM: ArbitrumL2TxnBatchesItem = {
+  number: 12345,
+  blocks_count: 12345,
+  transactions_count: 10000,
+  commitment_transaction: {
+    block_number: 12345,
+    timestamp: '2024-04-17T08:51:58.000000Z',
+    hash: TX_HASH,
+    status: 'finalized',
+  },
+  batch_data_container: 'in_blob4844',
+};
+
+export const ARBITRUM_L2_TXN_BATCH: ArbitrumL2TxnBatch = {
+  ...ARBITRUM_L2_TXN_BATCHES_ITEM,
+  after_acc: '0xcd064f3409015e8e6407e492e5275a185e492c6b43ccf127f22092d8057a9ffb',
+  before_acc: '0x2ed7c4985eb778d76ec400a43805e7feecc8c2afcdb492dbe5caf227de6d37bc',
+  start_block: 1245209,
+  end_block: 1245490,
+  data_availability: {
+    batch_data_container: 'in_blob4844',
+  },
+};
diff --git a/stubs/block.ts b/stubs/block.ts
index aea58c499b..98aab1a92b 100644
--- a/stubs/block.ts
+++ b/stubs/block.ts
@@ -1,6 +1,7 @@
-import type { Block } from 'types/api/block';
+import type { Block, BlockEpochElectionReward, BlockEpoch } from 'types/api/block';
 
 import { ADDRESS_PARAMS } from './addressParams';
+import { TOKEN_INFO_ERC_20, TOKEN_TRANSFER_ERC_20 } from './token';
 
 export const BLOCK_HASH = '0x8fa7b9e5e5e79deeb62d608db22ba9a5cb45388c7ebb9223ae77331c6080dc70';
 
@@ -35,3 +36,24 @@ export const BLOCK: Block = {
   type: 'block',
   uncles_hashes: [],
 };
+
+const BLOCK_EPOCH_REWARD: BlockEpochElectionReward = {
+  count: 10,
+  total: '157705500305820107521',
+  token: TOKEN_INFO_ERC_20,
+};
+
+export const BLOCK_EPOCH: BlockEpoch = {
+  number: 1486,
+  aggregated_election_rewards: {
+    group: BLOCK_EPOCH_REWARD,
+    validator: BLOCK_EPOCH_REWARD,
+    voter: BLOCK_EPOCH_REWARD,
+    delegated_payment: BLOCK_EPOCH_REWARD,
+  },
+  distribution: {
+    carbon_offsetting_transfer: TOKEN_TRANSFER_ERC_20,
+    community_transfer: TOKEN_TRANSFER_ERC_20,
+    reserve_bolster_transfer: TOKEN_TRANSFER_ERC_20,
+  },
+};
diff --git a/stubs/contract.ts b/stubs/contract.ts
index d242609f97..67219f8a5b 100644
--- a/stubs/contract.ts
+++ b/stubs/contract.ts
@@ -1,6 +1,8 @@
-import type { SmartContract, SolidityscanReport } from 'types/api/contract';
+import type { SmartContract } from 'types/api/contract';
 import type { VerifiedContract, VerifiedContractsCounters } from 'types/api/contracts';
 
+import type { SolidityScanReport } from 'lib/solidityScan/schema';
+
 import { ADDRESS_PARAMS } from './addressParams';
 
 export const CONTRACT_CODE_UNVERIFIED = {
@@ -10,7 +12,22 @@ export const CONTRACT_CODE_UNVERIFIED = {
 } as SmartContract;
 
 export const CONTRACT_CODE_VERIFIED = {
-  abi: [],
+  abi: [
+    {
+      inputs: [],
+      name: 'symbol',
+      outputs: [ { internalType: 'string', name: '', type: 'string' } ],
+      stateMutability: 'view',
+      type: 'function',
+    },
+    {
+      inputs: [ { internalType: 'address', name: 'newOwner', type: 'address' } ],
+      name: 'transferOwnership',
+      outputs: [],
+      stateMutability: 'nonpayable',
+      type: 'function',
+    },
+  ],
   additional_sources: [],
   can_be_visualized_via_sol2uml: true,
   compiler_settings: {
@@ -63,7 +80,7 @@ export const VERIFIED_CONTRACTS_COUNTERS: VerifiedContractsCounters = {
   new_verified_smart_contracts_24h: '1234',
 };
 
-export const SOLIDITYSCAN_REPORT: SolidityscanReport = {
+export const SOLIDITY_SCAN_REPORT: SolidityScanReport = {
   scan_report: {
     contractname: 'BullRunners',
     scan_status: 'scan_done',
@@ -76,11 +93,7 @@ export const SOLIDITYSCAN_REPORT: SolidityscanReport = {
         low: 2,
         medium: 0,
       },
-      lines_analyzed_count: 18,
-      scan_time_taken: 1,
-      score: '3.61',
       score_v2: '72.22',
-      threat_score: '94.74',
     },
     scanner_reference_url: 'https://solidityscan.com/quickscan/0xc1EF7811FF2ebFB74F80ed7423f2AdAA37454be2/blockscout/eth-goerli?ref=blockscout',
   },
diff --git a/stubs/mud.ts b/stubs/mud.ts
new file mode 100644
index 0000000000..d49db88913
--- /dev/null
+++ b/stubs/mud.ts
@@ -0,0 +1,24 @@
+import type { MudWorldItem, MudWorldSchema, MudWorldTable } from 'types/api/mudWorlds';
+
+import { ADDRESS_PARAMS } from './addressParams';
+
+export const MUD_TABLE: MudWorldTable = {
+  table_full_name: 'ot.Match',
+  table_id: '0x6f7400000000000000000000000000004d617463680000000000000000000000',
+  table_name: 'Match',
+  table_namespace: '',
+  table_type: 'offchain',
+};
+
+export const MUD_SCHEMA: MudWorldSchema = {
+  key_names: [ 'matchEntityKey', 'entity' ],
+  key_types: [ 'bytes32', 'bytes32' ],
+  value_names: [ 'matchEntity' ],
+  value_types: [ 'bytes32' ],
+};
+
+export const MUD_WORLD: MudWorldItem = {
+  address: ADDRESS_PARAMS,
+  coin_balance: '7072643779453701031672',
+  tx_count: 442,
+};
diff --git a/stubs/stats.ts b/stubs/stats.ts
index 0f256c6213..ee698f09ac 100644
--- a/stubs/stats.ts
+++ b/stubs/stats.ts
@@ -1,4 +1,5 @@
-import type { Counter, HomeStats, StatsChartsSection } from 'types/api/stats';
+import type * as stats from '@blockscout/stats-types';
+import type { HomeStats } from 'types/api/stats';
 
 import { currencyUnits } from '../lib/units';
 
@@ -43,7 +44,7 @@ export const HOMEPAGE_STATS: HomeStats = {
   tvl: '1767425.102766552',
 };
 
-export const STATS_CHARTS_SECTION: StatsChartsSection = {
+export const STATS_CHARTS_SECTION: stats.LineChartSection = {
   id: 'placeholder',
   title: 'Placeholder',
   charts: [
@@ -63,13 +64,13 @@ export const STATS_CHARTS_SECTION: StatsChartsSection = {
       id: 'chart_2',
       title: 'New transactions',
       description: 'New transactions number',
-      units: null,
+      units: undefined,
     },
     {
       id: 'chart_3',
       title: 'Transactions growth',
       description: 'Cumulative transactions number',
-      units: null,
+      units: undefined,
     },
   ],
 };
@@ -78,7 +79,7 @@ export const STATS_CHARTS = {
   sections: [ STATS_CHARTS_SECTION ],
 };
 
-export const STATS_COUNTER: Counter = {
+export const STATS_COUNTER: stats.Counter = {
   id: 'stub',
   value: '9074405',
   title: 'Placeholder Counter',
diff --git a/stubs/token.ts b/stubs/token.ts
index 1c90f3d16a..3f06faa420 100644
--- a/stubs/token.ts
+++ b/stubs/token.ts
@@ -11,10 +11,11 @@ import type { TokenInstanceTransferPagination, TokenInstanceTransferResponse } f
 import type { TokenTransfer, TokenTransferPagination, TokenTransferResponse } from 'types/api/tokenTransfer';
 
 import { ADDRESS_PARAMS, ADDRESS_HASH } from './addressParams';
-import { BLOCK_HASH } from './block';
 import { TX_HASH } from './tx';
 import { generateListStub } from './utils';
 
+export const BLOCK_HASH = '0x8fa7b9e5e5e79deeb62d608db22ba9a5cb45388c7ebb9223ae77331c6080dc70';
+
 export const TOKEN_INFO_ERC_20: TokenInfo<'ERC-20'> = {
   address: ADDRESS_HASH,
   circulating_market_cap: '117629601.61913824',
@@ -169,7 +170,7 @@ export const TOKEN_INSTANCE: TokenInstance = {
     description: '**GENESIS #188882**, **8a77ca1bcaa4036f** :: *844th* generation of *#57806 and #57809* :: **eGenetic Hash Code (eDNA)** = *2822355e953a462d*',
     external_url: 'https://vipsland.com/nft/collections/genesis/188882',
     image: 'https://ipfs.vipsland.com/nft/collections/genesis/188882.gif',
-    name: 'GENESIS #188882, 8a77ca1bcaa4036f. Blockchain pixel PFP NFT + "on music video" trait inspired by God',
+    name: 'GENESIS #188882, 8a77ca1bcaa4036f',
   },
   owner: ADDRESS_PARAMS,
   holder_address_hash: ADDRESS_HASH,
diff --git a/stubs/tx.ts b/stubs/tx.ts
index 1f7eb1c0a6..2e80408689 100644
--- a/stubs/tx.ts
+++ b/stubs/tx.ts
@@ -1,5 +1,5 @@
 import type { RawTracesResponse } from 'types/api/rawTrace';
-import type { Transaction } from 'types/api/transaction';
+import type { Transaction, TransactionsStats } from 'types/api/transaction';
 
 import { ADDRESS_PARAMS } from './addressParams';
 
@@ -59,3 +59,10 @@ export const TX_ZKEVM_L2: Transaction = {
 };
 
 export const TX_RAW_TRACE: RawTracesResponse = [];
+
+export const TXS_STATS: TransactionsStats = {
+  pending_transactions_count: '4200',
+  transaction_fees_avg_24h: '22342870314428',
+  transaction_fees_sum_24h: '22184012506492688277',
+  transactions_count_24h: '992890',
+};
diff --git a/stubs/userOps.ts b/stubs/userOps.ts
index 3e2fcbd1c7..283e43c4fd 100644
--- a/stubs/userOps.ts
+++ b/stubs/userOps.ts
@@ -21,6 +21,9 @@ export const USER_OP: UserOp = {
   sender: ADDRESS_HASH,
   nonce: '0x00b',
   call_data: '0x123',
+  execute_call_data: null,
+  decoded_call_data: null,
+  decoded_execute_call_data: null,
   call_gas_limit: '71316',
   verification_gas_limit: '91551',
   pre_verification_gas: '53627',
diff --git a/stubs/validators.ts b/stubs/validators.ts
index 1717a59ec0..885818e115 100644
--- a/stubs/validators.ts
+++ b/stubs/validators.ts
@@ -1,16 +1,34 @@
-import type { Validator, ValidatorsCountersResponse } from 'types/api/validators';
+import type {
+  ValidatorStability,
+  ValidatorsStabilityCountersResponse,
+  ValidatorBlackfort,
+  ValidatorsBlackfortCountersResponse,
+} from 'types/api/validators';
 
 import { ADDRESS_PARAMS } from './addressParams';
 
-export const VALIDATOR: Validator = {
+export const VALIDATOR_STABILITY: ValidatorStability = {
   address: ADDRESS_PARAMS,
   blocks_validated_count: 25987,
   state: 'active',
 };
 
-export const VALIDATORS_COUNTERS: ValidatorsCountersResponse = {
+export const VALIDATORS_STABILITY_COUNTERS: ValidatorsStabilityCountersResponse = {
   active_validators_counter: '42',
   active_validators_percentage: 7.14,
   new_validators_counter_24h: '11',
   validators_counter: '140',
 };
+
+export const VALIDATOR_BLACKFORT: ValidatorBlackfort = {
+  address: ADDRESS_PARAMS,
+  name: 'testnet-1',
+  commission: 10,
+  delegated_amount: '0',
+  self_bonded_amount: '10000',
+};
+
+export const VALIDATORS_BLACKFORT_COUNTERS: ValidatorsBlackfortCountersResponse = {
+  new_validators_counter_24h: '11',
+  validators_counter: '140',
+};
diff --git a/stubs/zkEvmL2.ts b/stubs/zkEvmL2.ts
index 7dea0f57b8..46015e0ccf 100644
--- a/stubs/zkEvmL2.ts
+++ b/stubs/zkEvmL2.ts
@@ -1,7 +1,27 @@
-import type { ZkEvmL2TxnBatch, ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2';
+import type { ZkEvmL2DepositsItem, ZkEvmL2TxnBatch, ZkEvmL2TxnBatchesItem, ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2';
 
 import { TX_HASH } from './tx';
 
+export const ZKEVM_DEPOSITS_ITEM: ZkEvmL2DepositsItem = {
+  block_number: 19674901,
+  index: 181920,
+  l1_transaction_hash: '0xa74edfa5824a07a5f95ca1145140ed589df7f05bb17796bf18090b14c4566b5d',
+  l2_transaction_hash: '0x436d1c7ada270466ca0facdb96ecc22934d68d13b8a08f541b8df11b222967b5',
+  symbol: 'ETH',
+  timestamp: '2023-06-01T14:46:48.000000Z',
+  value: '0.13040262',
+};
+
+export const ZKEVM_WITHDRAWALS_ITEM: ZkEvmL2WithdrawalsItem = {
+  block_number: 11692968,
+  index: 47003,
+  l1_transaction_hash: '0x230cf46dabea287ac7d0ba83b8ea120bb83c1de58a81d34f44788f0459096c52',
+  l2_transaction_hash: '0x519d9f025ec47f08a48d708964d177189d2246ddf988686c481f5debcf097e34',
+  symbol: 'ETH',
+  timestamp: '2024-04-17T08:51:58.000000Z',
+  value: '110.35',
+};
+
 export const ZKEVM_L2_TXN_BATCHES_ITEM: ZkEvmL2TxnBatchesItem = {
   timestamp: '2023-06-01T14:46:48.000000Z',
   status: 'Finalized',
diff --git a/theme/.gitignore b/theme/.gitignore
new file mode 100644
index 0000000000..b2d59d1f75
--- /dev/null
+++ b/theme/.gitignore
@@ -0,0 +1,2 @@
+/node_modules
+/dist
\ No newline at end of file
diff --git a/theme/components/Alert/Alert.pw.tsx b/theme/components/Alert/Alert.pw.tsx
index 96918e2cd6..6314658e43 100644
--- a/theme/components/Alert/Alert.pw.tsx
+++ b/theme/components/Alert/Alert.pw.tsx
@@ -1,9 +1,8 @@
 import type { AlertProps } from '@chakra-ui/react';
 import { Alert, AlertIcon, AlertTitle } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 test.use({ viewport: { width: 400, height: 720 } });
 
@@ -29,16 +28,14 @@ const TEST_CASES: Array<AlertProps> = [
 TEST_CASES.forEach((props) => {
   const testName = Object.entries(props).map(([ key, value ]) => `${ key }=${ value }`).join(', ');
 
-  test(`${ testName } +@dark-mode`, async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <Alert { ...props }>
-          <AlertIcon/>
-          <AlertTitle>
+  test(`${ testName } +@dark-mode`, async({ render }) => {
+    const component = await render(
+      <Alert { ...props }>
+        <AlertIcon/>
+        <AlertTitle>
             This is alert text
-          </AlertTitle>
-        </Alert>
-      </TestApp>,
+        </AlertTitle>
+      </Alert>,
     );
 
     await expect(component).toHaveScreenshot();
diff --git a/theme/components/Alert/Alert.ts b/theme/components/Alert/Alert.ts
index 457511c2d7..acce04ee0e 100644
--- a/theme/components/Alert/Alert.ts
+++ b/theme/components/Alert/Alert.ts
@@ -13,7 +13,7 @@ function getBg(props: StyleFunctionProps) {
   const { theme, colorScheme: c } = props;
   const darkBg = transparentize(`${ c }.200`, 0.16)(theme);
   return {
-    light: `colors.${ c }.${ c === 'red' ? '50' : '100' }`,
+    light: `colors.${ c }.100`,
     dark: darkBg,
   };
 }
diff --git a/theme/components/Badge.ts b/theme/components/Badge.ts
index 81f650a014..b673b528f6 100644
--- a/theme/components/Badge.ts
+++ b/theme/components/Badge.ts
@@ -1,5 +1,5 @@
 import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
-import { mode, transparentize } from '@chakra-ui/theme-tools';
+import { mode } from '@chakra-ui/theme-tools';
 
 const baseStyle = defineStyle({
   fontSize: 'xs',
@@ -8,19 +8,25 @@ const baseStyle = defineStyle({
 });
 
 const variantSubtle = defineStyle((props) => {
-  const { colorScheme: c, theme } = props;
-  const darkBg = transparentize(`${ c }.200`, 0.16)(theme);
+  const { colorScheme: c } = props;
 
   if (c === 'gray') {
     return {
-      bg: mode('blackAlpha.100', 'whiteAlpha.400')(props),
-      color: mode('gray.600', 'gray.50')(props),
+      bg: mode('blackAlpha.50', 'whiteAlpha.100')(props),
+      color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
+    };
+  }
+
+  if (c === 'gray-blue') {
+    return {
+      bg: mode('gray.100', 'gray.800')(props),
+      color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
     };
   }
 
   return {
-    bg: mode(`${ c }.50`, darkBg)(props),
-    color: mode(`${ c }.500`, `${ c }.200`)(props),
+    bg: mode(`${ c }.50`, `${ c }.800`)(props),
+    color: mode(`${ c }.500`, `${ c }.100`)(props),
   };
 });
 
diff --git a/theme/components/Button/Button.pw.tsx b/theme/components/Button/Button.pw.tsx
index 4c0a48ba62..e8b15075a7 100644
--- a/theme/components/Button/Button.pw.tsx
+++ b/theme/components/Button/Button.pw.tsx
@@ -1,56 +1,77 @@
-import { Button } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
+import { Box, Button, Flex } from '@chakra-ui/react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
+
+test.use({ viewport: { width: 150, height: 350 } });
 
 [
-  { variant: 'solid' },
-  { variant: 'solid', colorScheme: 'gray', withDarkMode: true },
-  { variant: 'outline', colorScheme: 'gray', withDarkMode: true },
-  { variant: 'outline', colorScheme: 'gray-dark', withDarkMode: true },
-  { variant: 'outline', colorScheme: 'blue', withDarkMode: true },
-  { variant: 'simple', withDarkMode: true },
-  { variant: 'ghost', withDarkMode: true },
-  { variant: 'subtle' },
-  { variant: 'subtle', colorScheme: 'gray', withDarkMode: true },
-].forEach(({ variant, colorScheme, withDarkMode }) => {
+  { variant: 'solid', states: [ 'default', 'disabled', 'hovered', 'active' ] },
+  { variant: 'outline', colorScheme: 'gray', withDarkMode: true, states: [ 'default', 'disabled', 'hovered', 'active', 'selected' ] },
+  { variant: 'outline', colorScheme: 'blue', withDarkMode: true, states: [ 'default', 'disabled', 'hovered', 'active', 'selected' ] },
+  { variant: 'simple', withDarkMode: true, states: [ 'default', 'hovered' ] },
+  { variant: 'ghost', withDarkMode: true, states: [ 'default', 'hovered', 'active' ] },
+  { variant: 'subtle', states: [ 'default', 'hovered' ] },
+  { variant: 'subtle', colorScheme: 'gray', states: [ 'default', 'hovered' ], withDarkMode: true },
+  { variant: 'hero', states: [ 'default', 'hovered' ], withDarkMode: true },
+  { variant: 'header', states: [ 'default', 'hovered', 'selected' ], withDarkMode: true },
+].forEach(({ variant, colorScheme, withDarkMode, states }) => {
   test.describe(`variant ${ variant }${ colorScheme ? ` with ${ colorScheme } color scheme` : '' }${ withDarkMode ? ' +@dark-mode' : '' }`, () => {
-    test('base', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <Button variant={ variant } colorScheme={ colorScheme }>Click me</Button>
-        </TestApp>,
-      );
-      await expect(component.locator('button')).toHaveScreenshot();
-    });
-
-    test('disabled', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <Button variant={ variant } colorScheme={ colorScheme } isDisabled>Click me</Button>
-        </TestApp>,
-      );
-      await expect(component.locator('button')).toHaveScreenshot();
-    });
-
-    test('hovered', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <Button variant={ variant } colorScheme={ colorScheme }>Click me</Button>
-        </TestApp>,
-      );
-      await component.getByText(/click/i).hover();
-      await expect(component.locator('button')).toHaveScreenshot();
-    });
+    test('', async({ render }) => {
+      const component = await render(
+        <Flex p={ 2 } flexDir="column" rowGap={ 3 }>
+          { states?.map((state) => {
+            switch (state) {
+              case 'default': {
+                return (
+                  <Box>
+                    <Box color="text_secondary" fontSize="sm">Default:</Box>
+                    <Button variant={ variant } colorScheme={ colorScheme }>Click me</Button>
+                  </Box>
+                );
+              }
+              case 'disabled': {
+                return (
+                  <Box>
+                    <Box color="text_secondary" fontSize="sm">Disabled:</Box>
+                    <Button variant={ variant } colorScheme={ colorScheme } isDisabled>Click me</Button>
+                  </Box>
+                );
+              }
+              case 'active': {
+                return (
+                  <Box>
+                    <Box color="text_secondary" fontSize="sm">Active:</Box>
+                    <Button variant={ variant } colorScheme={ colorScheme } isActive>Click me</Button>
+                  </Box>
+                );
+              }
+              case 'hovered': {
+                return (
+                  <Box>
+                    <Box color="text_secondary" fontSize="sm">Hovered:</Box>
+                    <Button variant={ variant } colorScheme={ colorScheme }>Hover me</Button>
+                  </Box>
+                );
+              }
+              case 'selected': {
+                return (
+                  <Box>
+                    <Box color="text_secondary" fontSize="sm">Selected:</Box>
+                    <Button variant={ variant } colorScheme={ colorScheme } data-selected="true">Click me</Button>
+                  </Box>
+                );
+              }
 
-    test('active', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <Button variant={ variant } colorScheme={ colorScheme } isActive>Click me</Button>
-        </TestApp>,
+              default: {
+                return null;
+              }
+            }
+          }) }
+        </Flex>,
       );
-      await expect(component.locator('button')).toHaveScreenshot();
+      await component.getByText('Hover me').hover();
+      await expect(component).toHaveScreenshot();
     });
   });
 });
diff --git a/theme/components/Button/Button.ts b/theme/components/Button/Button.ts
index d96d2d49da..85f97fb8c2 100644
--- a/theme/components/Button/Button.ts
+++ b/theme/components/Button/Button.ts
@@ -2,28 +2,15 @@ import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
 import { mode } from '@chakra-ui/theme-tools';
 import { runIfFn } from '@chakra-ui/utils';
 
+import config from 'configs/app';
+
 const variantSolid = defineStyle((props) => {
   const { colorScheme: c } = props;
 
-  if (c === 'gray') {
-    const bg = mode(`gray.100`, `whiteAlpha.200`)(props);
-
-    return {
-      bg,
-      _hover: {
-        bg: mode(`gray.200`, `whiteAlpha.300`)(props),
-        _disabled: {
-          bg,
-        },
-      },
-      _active: { bg: mode(`gray.300`, `whiteAlpha.400`)(props) },
-    };
-  }
-
   const bg = `${ c }.600`;
   const color = 'white';
   const hoverBg = `${ c }.400`;
-  const activeBg = `${ c }.700`;
+  const activeBg = hoverBg;
 
   return {
     bg,
@@ -37,6 +24,8 @@ const variantSolid = defineStyle((props) => {
     _disabled: {
       opacity: 0.2,
     },
+    // According to design there is no "active" or "pressed" state
+    // It is simply should be the same as the "hover" state
     _active: { bg: activeBg },
     fontWeight: 600,
   };
@@ -45,22 +34,15 @@ const variantSolid = defineStyle((props) => {
 const variantOutline = defineStyle((props) => {
   const { colorScheme: c } = props;
 
-  const isGrayTheme = c === 'gray' || c === 'gray-dark';
+  const isGrayTheme = c === 'gray';
+
+  const bg = 'transparent';
+
   const color = isGrayTheme ? mode('blackAlpha.800', 'whiteAlpha.800')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
   const borderColor = isGrayTheme ? mode('gray.200', 'gray.600')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
-  const activeBg = isGrayTheme ? mode('blue.50', 'gray.600')(props) : mode(`${ c }.50`, 'gray.600')(props);
-  const activeColor = (() => {
-    if (c === 'gray') {
-      return mode('blue.600', 'gray.50')(props);
-    }
-    if (c === 'gray-dark') {
-      return mode('blue.600', 'gray.50')(props);
-    }
-    if (c === 'blue') {
-      return mode('blue.600', 'gray.50')(props);
-    }
-    return 'blue.600';
-  })();
+
+  const selectedBg = isGrayTheme ? mode('blue.50', 'gray.600')(props) : mode(`${ c }.50`, 'gray.600')(props);
+  const selectedColor = mode('blue.600', 'gray.50')(props);
 
   return {
     color,
@@ -68,42 +50,47 @@ const variantOutline = defineStyle((props) => {
     borderWidth: props.borderWidth || '2px',
     borderStyle: 'solid',
     borderColor,
-    bg: 'transparent',
+    bg,
     _hover: {
       color: 'link_hovered',
       borderColor: 'link_hovered',
-      bg: 'transparent',
-      _active: {
-        bg: props.isActive ? activeBg : 'transparent',
-        borderColor: props.isActive ? activeBg : 'link_hovered',
-        color: props.isActive ? activeColor : 'link_hovered',
-        p: {
-          color: 'link_hovered',
-        },
+      bg,
+      span: {
+        color: 'link_hovered',
       },
       _disabled: {
         color,
         borderColor,
       },
-      p: {
-        color: 'link_hovered',
-      },
     },
     _disabled: {
       opacity: 0.2,
     },
+    // According to design there is no "active" or "pressed" state
+    // It is simply should be the same as the "hover" state
     _active: {
-      bg: activeBg,
-      borderColor: activeBg,
-      color: activeColor,
-      _disabled: {
-        color,
-        borderColor,
+      color: 'link_hovered',
+      borderColor: 'link_hovered',
+      bg,
+      span: {
+        color: 'link_hovered',
       },
-      p: {
-        color: activeColor,
+      _disabled: {
+        color: 'link_hovered',
+        borderColor: 'link_hovered',
       },
     },
+    // We have a special state for this button variant that serves as a popover trigger.
+    // When any items (filters) are selected in the popover, the button should change its background and text color.
+    // The last CSS selector is for redefining styles for the TabList component.
+    [`
+      &[data-selected=true],
+      &[data-selected=true][aria-selected=true]
+    `]: {
+      bg: selectedBg,
+      color: selectedColor,
+      borderColor: selectedBg,
+    },
   };
 });
 
@@ -165,12 +152,76 @@ const variantSubtle = defineStyle((props) => {
   };
 });
 
+// for buttons in the hero banner
+const variantHero = defineStyle((props) => {
+  return {
+    bg: mode(
+      config.UI.homepage.heroBanner?.button?._default?.background?.[0] || 'blue.600',
+      config.UI.homepage.heroBanner?.button?._default?.background?.[1] || 'blue.600',
+    )(props),
+    color: mode(
+      config.UI.homepage.heroBanner?.button?._default?.text_color?.[0] || 'white',
+      config.UI.homepage.heroBanner?.button?._default?.text_color?.[1] || 'white',
+    )(props),
+    _hover: {
+      bg: mode(
+        config.UI.homepage.heroBanner?.button?._hover?.background?.[0] || 'blue.400',
+        config.UI.homepage.heroBanner?.button?._hover?.background?.[1] || 'blue.400',
+      )(props),
+      color: mode(
+        config.UI.homepage.heroBanner?.button?._hover?.text_color?.[0] || 'white',
+        config.UI.homepage.heroBanner?.button?._hover?.text_color?.[1] || 'white',
+      )(props),
+    },
+    '&[data-selected=true]': {
+      bg: mode(
+        config.UI.homepage.heroBanner?.button?._selected?.background?.[0] || 'blue.50',
+        config.UI.homepage.heroBanner?.button?._selected?.background?.[1] || 'blue.50',
+      )(props),
+      color: mode(
+        config.UI.homepage.heroBanner?.button?._selected?.text_color?.[0] || 'blackAlpha.800',
+        config.UI.homepage.heroBanner?.button?._selected?.text_color?.[1] || 'blackAlpha.800',
+      )(props),
+    },
+  };
+});
+
+// for buttons in the page header
+const variantHeader = defineStyle((props) => {
+
+  return {
+    bgColor: 'transparent',
+    color: mode('blackAlpha.800', 'gray.400')(props),
+    borderColor: mode('gray.300', 'gray.600')(props),
+    borderWidth: props.borderWidth || '2px',
+    borderStyle: 'solid',
+    _hover: {
+      color: 'link_hovered',
+      borderColor: 'link_hovered',
+    },
+    '&[data-selected=true]': {
+      bgColor: mode('blackAlpha.50', 'whiteAlpha.100')(props),
+      color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
+      borderColor: 'transparent',
+      borderWidth: props.borderWidth || '0px',
+    },
+    '&[data-selected=true][data-warning=true]': {
+      bgColor: mode('orange.100', 'orange.900')(props),
+      color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
+      borderColor: 'transparent',
+      borderWidth: props.borderWidth || '0px',
+    },
+  };
+});
+
 const variants = {
   solid: variantSolid,
   outline: variantOutline,
   simple: variantSimple,
   ghost: variantGhost,
   subtle: variantSubtle,
+  hero: variantHero,
+  header: variantHeader,
 };
 
 const baseStyle = defineStyle({
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-1.png
new file mode 100644
index 0000000000..a8c51a2f69
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-active-1.png
deleted file mode 100644
index f519401d1e..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-base-1.png
deleted file mode 100644
index 336dd1b8f7..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-disabled-1.png
deleted file mode 100644
index 884ac88b55..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-hovered-1.png
deleted file mode 100644
index 5bb143cf3e..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-ghost-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-header-dark-mode-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-header-dark-mode-1.png
new file mode 100644
index 0000000000..58c21cf5c4
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-header-dark-mode-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-hero-dark-mode-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-hero-dark-mode-1.png
new file mode 100644
index 0000000000..fd0b3b4ae3
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-hero-dark-mode-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-1.png
new file mode 100644
index 0000000000..ea247969a5
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-active-1.png
deleted file mode 100644
index 62d690fbef..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-base-1.png
deleted file mode 100644
index 63c25c4ef3..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-disabled-1.png
deleted file mode 100644
index c32c9f4700..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-hovered-1.png
deleted file mode 100644
index 289408bbbd..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-blue-color-scheme-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-1.png
new file mode 100644
index 0000000000..8450e14238
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-active-1.png
deleted file mode 100644
index 62d690fbef..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-base-1.png
deleted file mode 100644
index fbc8117dce..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-disabled-1.png
deleted file mode 100644
index 723caaac4f..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-hovered-1.png
deleted file mode 100644
index 289408bbbd..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-color-scheme-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-active-1.png
deleted file mode 100644
index 62d690fbef..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-base-1.png
deleted file mode 100644
index fbc8117dce..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-disabled-1.png
deleted file mode 100644
index 723caaac4f..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-hovered-1.png
deleted file mode 100644
index 289408bbbd..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-outline-with-gray-dark-color-scheme-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-1.png
new file mode 100644
index 0000000000..e6bda7dbc4
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-active-1.png
deleted file mode 100644
index 9d2e16c466..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-base-1.png
deleted file mode 100644
index 9d2e16c466..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-disabled-1.png
deleted file mode 100644
index ce5d907dd2..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-hovered-1.png
deleted file mode 100644
index 62603351af..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-simple-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-active-1.png
deleted file mode 100644
index 3ced2622bc..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-base-1.png
deleted file mode 100644
index 5dc02f7215..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-disabled-1.png
deleted file mode 100644
index 061a4a511e..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-hovered-1.png
deleted file mode 100644
index 7970651830..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-solid-with-gray-color-scheme-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-1.png
new file mode 100644
index 0000000000..a54cabfe22
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-active-1.png
deleted file mode 100644
index 9306ab7578..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-base-1.png
deleted file mode 100644
index 9306ab7578..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-disabled-1.png
deleted file mode 100644
index 5d08e00f0f..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-hovered-1.png
deleted file mode 100644
index 0819be4cc5..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_dark-color-mode_variant-subtle-with-gray-color-scheme-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-1.png
new file mode 100644
index 0000000000..11a01abe7d
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-active-1.png
deleted file mode 100644
index ff0444b3e3..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-base-1.png
deleted file mode 100644
index 0c80b4f99d..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-disabled-1.png
deleted file mode 100644
index be418bc9d2..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-hovered-1.png
deleted file mode 100644
index eb4b1b612f..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-ghost-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-header-dark-mode-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-header-dark-mode-1.png
new file mode 100644
index 0000000000..0488f1594c
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-header-dark-mode-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-hero-dark-mode-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-hero-dark-mode-1.png
new file mode 100644
index 0000000000..3d3967a965
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-hero-dark-mode-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-1.png
new file mode 100644
index 0000000000..698e13cc7b
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-active-1.png
deleted file mode 100644
index 04e7804665..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-base-1.png
deleted file mode 100644
index 6b24fb0b36..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-disabled-1.png
deleted file mode 100644
index 258b31af68..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-hovered-1.png
deleted file mode 100644
index f3692b3216..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-blue-color-scheme-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-1.png
new file mode 100644
index 0000000000..4e623efadf
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-active-1.png
deleted file mode 100644
index 04e7804665..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-base-1.png
deleted file mode 100644
index 33d32d1e2c..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-disabled-1.png
deleted file mode 100644
index 0a1a9a27f4..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-hovered-1.png
deleted file mode 100644
index f3692b3216..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-color-scheme-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-active-1.png
deleted file mode 100644
index 04e7804665..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-base-1.png
deleted file mode 100644
index 33d32d1e2c..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-disabled-1.png
deleted file mode 100644
index 0a1a9a27f4..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-hovered-1.png
deleted file mode 100644
index f3692b3216..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-outline-with-gray-dark-color-scheme-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-1.png
new file mode 100644
index 0000000000..94f93a73b5
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-active-1.png
deleted file mode 100644
index 99262ae8a5..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-base-1.png
deleted file mode 100644
index 99262ae8a5..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-disabled-1.png
deleted file mode 100644
index a6e2c3094c..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-hovered-1.png
deleted file mode 100644
index a84dd4a732..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-simple-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-1.png
new file mode 100644
index 0000000000..3bc86f3500
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-active-1.png
deleted file mode 100644
index 3b07d16161..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-base-1.png
deleted file mode 100644
index e2b1284365..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-disabled-1.png
deleted file mode 100644
index de9a716a02..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-hovered-1.png
deleted file mode 100644
index a895dc475a..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-active-1.png
deleted file mode 100644
index 8c0cb0427e..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-base-1.png
deleted file mode 100644
index e014823eae..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-disabled-1.png
deleted file mode 100644
index ee63e2c93f..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-hovered-1.png
deleted file mode 100644
index ba1feb7c4d..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-solid-with-gray-color-scheme-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-1.png
new file mode 100644
index 0000000000..69be1fa9a7
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-active-1.png
deleted file mode 100644
index 1e13e03bad..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-base-1.png
deleted file mode 100644
index 1e13e03bad..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-disabled-1.png
deleted file mode 100644
index fdd327ee61..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-hovered-1.png
deleted file mode 100644
index b8d4dce465..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-hovered-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-1.png
new file mode 100644
index 0000000000..95cf92e089
Binary files /dev/null and b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-active-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-active-1.png
deleted file mode 100644
index b43cdb9499..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-active-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-base-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-base-1.png
deleted file mode 100644
index b43cdb9499..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-base-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-disabled-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-disabled-1.png
deleted file mode 100644
index 6173c806b7..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-disabled-1.png and /dev/null differ
diff --git a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-hovered-1.png b/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-hovered-1.png
deleted file mode 100644
index 3ff3167615..0000000000
Binary files a/theme/components/Button/__screenshots__/Button.pw.tsx_default_variant-subtle-with-gray-color-scheme-dark-mode-hovered-1.png and /dev/null differ
diff --git a/theme/components/Form.ts b/theme/components/Form.ts
index 582c0e96ca..0c9a02e59b 100644
--- a/theme/components/Form.ts
+++ b/theme/components/Form.ts
@@ -1,9 +1,8 @@
 import { formAnatomy as parts } from '@chakra-ui/anatomy';
 import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
 import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
-import { getColor, mode } from '@chakra-ui/theme-tools';
 
-import getDefaultFormColors from '../utils/getDefaultFormColors';
+import getFormStyles from '../utils/getFormStyles';
 import FancySelect from './FancySelect';
 import FormLabel from './FormLabel';
 import Input from './Input';
@@ -13,8 +12,7 @@ const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(parts.keys);
 
 function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunctionProps) {
-  const { theme } = props;
-  const { focusPlaceholderColor, errorColor } = getDefaultFormColors(props);
+  const formStyles = getFormStyles(props);
 
   const activeLabelStyles = {
     ...FormLabel.variants?.floating?.(props)._focusWithin,
@@ -63,12 +61,29 @@ function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunction
       // label styles
       label: FormLabel.sizes?.[size](props) || {},
       'input:not(:placeholder-shown) + label, textarea:not(:placeholder-shown) + label': activeLabelStyles,
+      'textarea:not(:placeholder-shown) + label': {
+        bgColor: formStyles.input.filled.bgColor,
+      },
+      [`
+        input[readonly] + label,
+        textarea[readonly] + label,
+        &[aria-readonly=true] label
+      `]: {
+        bgColor: formStyles.input.readOnly.bgColor,
+      },
       [`
         input[aria-invalid=true] + label, 
         textarea[aria-invalid=true] + label,
         &[aria-invalid=true] label
       `]: {
-        color: getColor(theme, errorColor),
+        color: formStyles.placeholder.error.color,
+      },
+      [`
+        input[disabled] + label,
+        textarea[disabled] + label,
+        &[aria-disabled=true] label
+      `]: {
+        color: formStyles.placeholder.disabled.color,
       },
 
       // input styles
@@ -79,31 +94,24 @@ function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunction
         padding: inputPx,
       },
       'input:not(:placeholder-shown), textarea:not(:placeholder-shown)': activeInputStyles,
-      [`
-        input[disabled] + label, 
-        &[aria-disabled=true] label
-      `]: {
-        backgroundColor: 'transparent',
-      },
-      // in textarea bg of label could not be transparent; it should match the background color of input but without alpha
-      // so we have to use non-standard colors here
-      'textarea[disabled] + label': {
-        backgroundColor: mode('#ececec', '#232425')(props),
-      },
-      'textarea[disabled] + label[data-in-modal=true]': {
-        backgroundColor: mode('#ececec', '#292b34')(props),
-      },
 
       // indicator styles
       'input:not(:placeholder-shown) + label .chakra-form__required-indicator, textarea:not(:placeholder-shown) + label .chakra-form__required-indicator': {
-        color: getColor(theme, focusPlaceholderColor),
+        color: formStyles.placeholder.default.color,
       },
       [`
         input[aria-invalid=true] + label .chakra-form__required-indicator,
         textarea[aria-invalid=true] + label .chakra-form__required-indicator,
         &[aria-invalid=true] .chakra-form__required-indicator
       `]: {
-        color: getColor(theme, errorColor),
+        color: formStyles.placeholder.error.color,
+      },
+      [`
+        input[disabled] + label .chakra-form__required-indicator,
+        textarea[disabled] + label .chakra-form__required-indicator,
+        &[aria-disabled=true] .chakra-form__required-indicator
+      `]: {
+        color: formStyles.placeholder.disabled.color,
       },
     },
   };
diff --git a/theme/components/Form/FormControl.pw.tsx b/theme/components/Form/FormControl.pw.tsx
index 79cfba10ce..39ab811036 100644
--- a/theme/components/Form/FormControl.pw.tsx
+++ b/theme/components/Form/FormControl.pw.tsx
@@ -1,20 +1,17 @@
 import { FormControl, Input, FormLabel } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 test.use({ viewport: { width: 500, height: 300 } });
 
 test.describe('floating label size md +@dark-mode', () => {
-  test('empty', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <FormControl variant="floating" id="name" isRequired size="md">
-          <Input required value=""/>
-          <FormLabel>Smart contract / Address (0x...)</FormLabel>
-        </FormControl>
-      </TestApp>,
+  test('empty', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="md">
+        <Input required value=""/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
     );
 
     await expect(component).toHaveScreenshot();
@@ -23,14 +20,12 @@ test.describe('floating label size md +@dark-mode', () => {
     await expect(component).toHaveScreenshot();
   });
 
-  test('empty error', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <FormControl variant="floating" id="name" isRequired size="md">
-          <Input required value="" isInvalid/>
-          <FormLabel>Smart contract / Address (0x...)</FormLabel>
-        </FormControl>
-      </TestApp>,
+  test('empty error', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="md">
+        <Input required value="" isInvalid/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
     );
 
     await expect(component).toHaveScreenshot();
@@ -39,40 +34,45 @@ test.describe('floating label size md +@dark-mode', () => {
     await expect(component).toHaveScreenshot();
   });
 
-  test('filled', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <FormControl variant="floating" id="name" isRequired size="md">
-          <Input required value="foo"/>
-          <FormLabel>Smart contract / Address (0x...)</FormLabel>
-        </FormControl>
-      </TestApp>,
+  test('filled', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="md">
+        <Input required value="foo"/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
     );
 
     await expect(component).toHaveScreenshot();
   });
 
-  test('filled disabled', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <FormControl variant="floating" id="name" isRequired size="md">
-          <Input required value="foo" isDisabled/>
-          <FormLabel>Smart contract / Address (0x...)</FormLabel>
-        </FormControl>
-      </TestApp>,
+  test('filled disabled', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="md">
+        <Input required value="foo" isDisabled/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
     );
 
     await expect(component).toHaveScreenshot();
   });
 
-  test('filled error', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <FormControl variant="floating" id="name" isRequired size="md">
-          <Input required value="foo" isInvalid/>
-          <FormLabel>Smart contract / Address (0x...)</FormLabel>
-        </FormControl>
-      </TestApp>,
+  test('filled read-only', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="md">
+        <Input required value="foo" isReadOnly/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('filled error', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="md">
+        <Input required value="foo" isInvalid/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
     );
 
     await expect(component).toHaveScreenshot();
@@ -80,14 +80,12 @@ test.describe('floating label size md +@dark-mode', () => {
 });
 
 test.describe('floating label size lg +@dark-mode', () => {
-  test('empty', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <FormControl variant="floating" id="name" isRequired size="lg">
-          <Input required value=""/>
-          <FormLabel>Smart contract / Address (0x...)</FormLabel>
-        </FormControl>
-      </TestApp>,
+  test('empty', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="lg">
+        <Input required value=""/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
     );
 
     await expect(component).toHaveScreenshot();
@@ -96,14 +94,12 @@ test.describe('floating label size lg +@dark-mode', () => {
     await expect(component).toHaveScreenshot();
   });
 
-  test('filled', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <FormControl variant="floating" id="name" isRequired size="lg">
-          <Input required value="foo"/>
-          <FormLabel>Smart contract / Address (0x...)</FormLabel>
-        </FormControl>
-      </TestApp>,
+  test('filled', async({ render }) => {
+    const component = await render(
+      <FormControl variant="floating" id="name" isRequired size="lg">
+        <Input required value="foo"/>
+        <FormLabel>Smart contract / Address (0x...)</FormLabel>
+      </FormControl>,
     );
 
     await expect(component).toHaveScreenshot();
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-lg-dark-mode-empty-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-lg-dark-mode-empty-1.png
index 45d9e21bdb..8114db8880 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-lg-dark-mode-empty-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-lg-dark-mode-empty-1.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-1.png
index f6a6920831..cb02d37576 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-1.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-2.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-2.png
index 74975f5d7b..8f252b3add 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-2.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-empty-error-2.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-disabled-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-disabled-1.png
index 4d1637cf2c..c37d9af17f 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-disabled-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-disabled-1.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-error-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-error-1.png
index 51d89c26bb..c9c3020f33 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-error-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-error-1.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-read-only-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-read-only-1.png
new file mode 100644
index 0000000000..305028d0ad
Binary files /dev/null and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_dark-color-mode_floating-label-size-md-dark-mode-filled-read-only-1.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-lg-dark-mode-empty-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-lg-dark-mode-empty-1.png
index 233dfbc010..621109f3e9 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-lg-dark-mode-empty-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-lg-dark-mode-empty-1.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-disabled-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-disabled-1.png
index 8e19274714..9b30da40a5 100644
Binary files a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-disabled-1.png and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-disabled-1.png differ
diff --git a/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-read-only-1.png b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-read-only-1.png
new file mode 100644
index 0000000000..53870a1836
Binary files /dev/null and b/theme/components/Form/__screenshots__/FormControl.pw.tsx_default_floating-label-size-md-dark-mode-filled-read-only-1.png differ
diff --git a/theme/components/FormLabel.ts b/theme/components/FormLabel.ts
index c95f0e8e7a..c67ac969eb 100644
--- a/theme/components/FormLabel.ts
+++ b/theme/components/FormLabel.ts
@@ -1,7 +1,6 @@
 import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
-import { getColor } from '@chakra-ui/theme-tools';
 
-import getDefaultFormColors from '../utils/getDefaultFormColors';
+import getFormStyles from '../utils/getFormStyles';
 
 const baseStyle = defineStyle({
   display: 'flex',
@@ -13,14 +12,12 @@ const baseStyle = defineStyle({
   transitionDuration: 'normal',
   opacity: 1,
   _disabled: {
-    opacity: 0.4,
+    opacity: 0.2,
   },
 });
 
 const variantFloating = defineStyle((props) => {
-  const { theme, backgroundColor } = props;
-  const { focusPlaceholderColor } = getDefaultFormColors(props);
-  const bc = backgroundColor || 'transparent';
+  const formStyles = getFormStyles(props);
 
   return {
     left: '2px',
@@ -29,8 +26,8 @@ const variantFloating = defineStyle((props) => {
     position: 'absolute',
     borderRadius: 'base',
     boxSizing: 'border-box',
-    color: 'gray.500',
-    backgroundColor: 'transparent',
+    color: formStyles.placeholder.default.color,
+    backgroundColor: props.bgColor || props.backgroundColor || 'transparent',
     pointerEvents: 'none',
     margin: 0,
     transformOrigin: 'top left',
@@ -39,8 +36,8 @@ const variantFloating = defineStyle((props) => {
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
     _focusWithin: {
-      backgroundColor: bc,
-      color: getColor(theme, focusPlaceholderColor),
+      backgroundColor: props.bgColor || props.backgroundColor || 'transparent',
+      color: formStyles.placeholder.default.color,
       fontSize: 'xs',
       lineHeight: '16px',
       borderTopRightRadius: 'none',
@@ -70,7 +67,7 @@ const sizes = {
       return {
         fontSize: 'md',
         lineHeight: '24px',
-        padding: '28px 4px 28px 24px',
+        padding: '26px 4px 26px 24px',
         right: '22px',
         _focusWithin: {
           padding: '16px 0 2px 24px',
diff --git a/theme/components/Heading.ts b/theme/components/Heading.ts
index 7b08a7efa9..e9cf8c51b2 100644
--- a/theme/components/Heading.ts
+++ b/theme/components/Heading.ts
@@ -17,7 +17,6 @@ const sizes = {
   xl: defineStyle({
     fontSize: '40px',
     lineHeight: '48px',
-    letterSpacing: '-1px',
   }),
   lg: defineStyle({
     fontSize: '32px',
diff --git a/theme/components/Input.ts b/theme/components/Input.ts
index 50a0adb0d5..d127835109 100644
--- a/theme/components/Input.ts
+++ b/theme/components/Input.ts
@@ -29,6 +29,20 @@ const size = {
     h: '40px',
     borderRadius: 'base',
   }),
+  // TEMPORARY INPUT SIZE!!!
+  // soon we will migrate to the new size and get rid off this one
+  // lg -> 60
+  // md -> 48
+  // sm -> 40
+  // xs ->32
+  sm_md: defineStyle({
+    fontSize: 'md',
+    lineHeight: '24px',
+    px: '8px',
+    py: '12px',
+    h: '48px',
+    borderRadius: 'base',
+  }),
   md: defineStyle({
     fontSize: 'md',
     lineHeight: '20px',
@@ -71,6 +85,10 @@ const sizes = {
     field: size.sm,
     addon: size.sm,
   }),
+  sm_md: definePartsStyle({
+    field: size.sm_md,
+    addon: size.sm_md,
+  }),
   md: definePartsStyle({
     field: size.md,
     addon: size.md,
diff --git a/theme/components/Menu.ts b/theme/components/Menu.ts
index fb314ddcfd..5e425ff738 100644
--- a/theme/components/Menu.ts
+++ b/theme/components/Menu.ts
@@ -25,15 +25,15 @@ const baseStyleList = defineStyle({
 
 const baseStyleItem = defineStyle({
   _focus: {
-    [$bg.variable]: 'colors.blue.50',
+    [$bg.variable]: 'transparent',
     _dark: {
-      [$bg.variable]: 'colors.gray.800',
+      [$bg.variable]: 'transparent',
     },
   },
   _hover: {
     [$bg.variable]: 'colors.blue.50',
     _dark: {
-      [$bg.variable]: 'colors.gray.800',
+      [$bg.variable]: 'colors.whiteAlpha.100',
     },
   },
   bg: $bg.reference,
diff --git a/theme/components/Modal.ts b/theme/components/Modal.ts
index d2e291f8d5..2992f4e7d8 100644
--- a/theme/components/Modal.ts
+++ b/theme/components/Modal.ts
@@ -10,11 +10,11 @@ import { runIfFn } from '@chakra-ui/utils';
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
 
-const baseStyleDialog = defineStyle((props) => {
+const baseStyleDialog = defineStyle(() => {
   return {
     padding: 8,
     borderRadius: 'lg',
-    bg: mode('white', 'gray.900')(props),
+    bg: 'dialog_bg',
     margin: 'auto',
   };
 });
@@ -61,7 +61,7 @@ const baseStyleOverlay = defineStyle({
 });
 
 const baseStyle = definePartsStyle((props) => ({
-  dialog: runIfFn(baseStyleDialog, props),
+  dialog: runIfFn(baseStyleDialog),
   dialogContainer: baseStyleDialogContainer,
 
   header: runIfFn(baseStyleHeader, props),
diff --git a/theme/components/Switch.ts b/theme/components/Switch.ts
index b432e84bdc..6059618c0f 100644
--- a/theme/components/Switch.ts
+++ b/theme/components/Switch.ts
@@ -15,6 +15,9 @@ const baseStyleTrack = defineStyle((props) => {
         bg: mode(`${ c }.600`, `${ c }.400`)(props),
       },
     },
+    _focusVisible: {
+      boxShadow: 'none',
+    },
   };
 });
 
diff --git a/theme/components/Tag/Tag.pw.tsx b/theme/components/Tag/Tag.pw.tsx
index 6141db546d..28da22a9ef 100644
--- a/theme/components/Tag/Tag.pw.tsx
+++ b/theme/components/Tag/Tag.pw.tsx
@@ -1,29 +1,20 @@
 import { Box, Tag } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
-
-[ 'blue', 'gray', 'orange', 'green', 'purple', 'cyan', 'teal' ].forEach((colorScheme) => {
-  test(`${ colorScheme } color scheme +@dark-mode`, async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <Tag colorScheme={ colorScheme }>content</Tag>
-      </TestApp>,
-    );
+import { test, expect } from 'playwright/lib';
 
+[ 'blue', 'gray', 'gray-blue', 'orange', 'green', 'purple', 'cyan', 'teal' ].forEach((colorScheme) => {
+  test(`${ colorScheme } color scheme +@dark-mode`, async({ render }) => {
+    const component = await render(<Tag colorScheme={ colorScheme }>content</Tag>);
     await expect(component.getByText(/content/i)).toHaveScreenshot();
   });
 });
 
-test('with long text', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box w="100px">
-        <Tag>this is very looooooooooong text</Tag>
-      </Box>
-    </TestApp>,
+test('with long text', async({ render }) => {
+  const component = await render(
+    <Box w="100px">
+      <Tag>this is very looooooooooong text</Tag>
+    </Box>,
   );
-
   await expect(component.getByText(/this/i)).toHaveScreenshot();
 });
diff --git a/theme/components/Tag/Tag.ts b/theme/components/Tag/Tag.ts
index 5cd5b2bd97..6ea4c41d10 100644
--- a/theme/components/Tag/Tag.ts
+++ b/theme/components/Tag/Tag.ts
@@ -3,9 +3,11 @@ import {
   createMultiStyleConfigHelpers,
   defineStyle,
 } from '@chakra-ui/styled-system';
+import { mode } from '@chakra-ui/theme-tools';
 
 import getDefaultTransitionProps from '../../utils/getDefaultTransitionProps';
 import Badge from '../Badge';
+
 const transitionProps = getDefaultTransitionProps();
 
 const { defineMultiStyleConfig, definePartsStyle } =
@@ -15,15 +17,32 @@ const variants = {
   subtle: definePartsStyle((props) => ({
     container: Badge.variants?.subtle(props),
   })),
+  select: definePartsStyle((props) => ({
+    container: {
+      bg: mode('gray.100', 'gray.800')(props),
+      color: mode('gray.500', 'whiteAlpha.800')(props),
+      _hover: {
+        color: 'blue.400',
+        opacity: 0.76,
+      },
+      [`
+        &[data-selected=true],
+        &[data-selected=true][aria-selected=true]
+      `]: {
+        bg: mode('blue.500', 'blue.900')(props),
+        color: 'whiteAlpha.800',
+      },
+    },
+  })),
 };
 
 const sizes = {
-  md: definePartsStyle({
+  sm: definePartsStyle({
     container: {
       minH: 6,
       minW: 6,
       fontSize: 'sm',
-      px: 2,
+      px: 1,
       py: '2px',
       lineHeight: 5,
     },
@@ -48,7 +67,7 @@ const Tag = defineMultiStyleConfig({
   variants,
   sizes,
   defaultProps: {
-    size: 'md',
+    size: 'sm',
     variant: 'subtle',
     colorScheme: 'gray',
   },
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_blue-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_blue-color-scheme-dark-mode-1.png
index e2964560a2..5fc7bad237 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_blue-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_blue-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_cyan-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_cyan-color-scheme-dark-mode-1.png
index 8a1efa746b..daf45113b1 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_cyan-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_cyan-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_gray-blue-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_gray-blue-color-scheme-dark-mode-1.png
new file mode 100644
index 0000000000..05fe7cfea4
Binary files /dev/null and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_gray-blue-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_gray-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_gray-color-scheme-dark-mode-1.png
index a956655fb5..6afe64a5a7 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_gray-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_gray-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_green-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_green-color-scheme-dark-mode-1.png
index 18f0765090..a14814713f 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_green-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_green-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_orange-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_orange-color-scheme-dark-mode-1.png
index 51d848855b..fd9bb6cfc6 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_orange-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_orange-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_purple-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_purple-color-scheme-dark-mode-1.png
index 9fd2e54028..a9b36a72cd 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_purple-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_purple-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_teal-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_teal-color-scheme-dark-mode-1.png
index e4b5437ff4..bbaed04293 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_teal-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_dark-color-mode_teal-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_blue-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_blue-color-scheme-dark-mode-1.png
index 475e4b3500..ce7946c035 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_blue-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_blue-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_cyan-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_cyan-color-scheme-dark-mode-1.png
index e2df67339c..1cac3c3c0c 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_cyan-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_cyan-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_gray-blue-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_gray-blue-color-scheme-dark-mode-1.png
new file mode 100644
index 0000000000..1d150ca7d3
Binary files /dev/null and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_gray-blue-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_gray-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_gray-color-scheme-dark-mode-1.png
index 533fb98865..f37bae331a 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_gray-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_gray-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_green-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_green-color-scheme-dark-mode-1.png
index 89b0f21d9b..24fb120a47 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_green-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_green-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_orange-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_orange-color-scheme-dark-mode-1.png
index 78612cf01f..7a3f917391 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_orange-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_orange-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_purple-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_purple-color-scheme-dark-mode-1.png
index bcad901b56..f9b325adf1 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_purple-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_purple-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_teal-color-scheme-dark-mode-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_teal-color-scheme-dark-mode-1.png
index 6d1b5b96e0..cccd73491f 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_teal-color-scheme-dark-mode-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_teal-color-scheme-dark-mode-1.png differ
diff --git a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_with-long-text-1.png b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_with-long-text-1.png
index 3b47811eaa..ee9d7d6dbd 100644
Binary files a/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_with-long-text-1.png and b/theme/components/Tag/__screenshots__/Tag.pw.tsx_default_with-long-text-1.png differ
diff --git a/theme/components/Textarea.ts b/theme/components/Textarea.ts
index 6a4c9a3a5b..bb0a00ca56 100644
--- a/theme/components/Textarea.ts
+++ b/theme/components/Textarea.ts
@@ -1,22 +1,8 @@
 import { Textarea as TextareaComponent } from '@chakra-ui/react';
 import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
-import { mode } from '@chakra-ui/theme-tools';
 
 import getOutlinedFieldStyles from '../utils/getOutlinedFieldStyles';
 
-const variantFilledInactive = defineStyle((props) => {
-  return {
-    // https://bugs.chromium.org/p/chromium/issues/detail?id=1362573
-    // there is a problem with scrollbar color in chromium
-    // so blackAlpha.50 here is replaced with #f5f5f6
-    // and whiteAlpha.50 is replaced with #1a1b1b
-
-    // bgColor: mode('blackAlpha.50', 'whiteAlpha.50')(props),
-    bgColor: mode('#f5f5f6', '#1a1b1b')(props),
-
-  };
-});
-
 const sizes = {
   md: defineStyle({
     fontSize: 'md',
@@ -38,7 +24,6 @@ const Textarea = defineStyleConfig({
   sizes,
   variants: {
     outline: defineStyle(getOutlinedFieldStyles),
-    filledInactive: variantFilledInactive,
   },
   defaultProps: {
     variant: 'outline',
diff --git a/theme/components/Tooltip/Tooltip.pw.tsx b/theme/components/Tooltip/Tooltip.pw.tsx
index 370df8836e..049f9caa20 100644
--- a/theme/components/Tooltip/Tooltip.pw.tsx
+++ b/theme/components/Tooltip/Tooltip.pw.tsx
@@ -1,18 +1,15 @@
 import { Box, Tooltip, Icon } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
-test('base view +@dark-mode', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <Box m={ 10 }>
-        <Tooltip label="Tooltip content">
+test('base view +@dark-mode', async({ render, page }) => {
+  const component = await render(
+    <Box m={ 10 }>
+      <Tooltip label="Tooltip content">
           trigger
-        </Tooltip>
-      </Box>
-    </TestApp>,
+      </Tooltip>
+    </Box>,
   );
 
   await component.getByText(/trigger/i).hover();
@@ -22,17 +19,15 @@ test('base view +@dark-mode', async({ mount, page }) => {
 
 // was not able to reproduce in tests issue when Icon is used as trigger for tooltip
 // https://github.com/chakra-ui/chakra-ui/issues/7107
-test.skip('with icon', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <Box m={ 10 }>
-        <Tooltip label="Tooltip content">
-          <Icon viewBox="0 0 20 20" boxSize={ 5 } aria-label="Trigger">
-            <circle cx="10" cy="10" r="10"/>
-          </Icon>
-        </Tooltip>
-      </Box>
-    </TestApp>,
+test.fixme('with icon', async({ render, page }) => {
+  const component = await render(
+    <Box m={ 10 }>
+      <Tooltip label="Tooltip content">
+        <Icon viewBox="0 0 20 20" boxSize={ 5 } aria-label="Trigger">
+          <circle cx="10" cy="10" r="10"/>
+        </Icon>
+      </Tooltip>
+    </Box>,
   );
 
   const tooltip = page.getByText(/tooltip content/i);
diff --git a/theme/components/Tooltip/Tooltip.ts b/theme/components/Tooltip/Tooltip.ts
index a98dd867ce..d0bbae57e2 100644
--- a/theme/components/Tooltip/Tooltip.ts
+++ b/theme/components/Tooltip/Tooltip.ts
@@ -35,7 +35,8 @@ const baseStyle = defineStyle((props) => {
     [$bg.variable]: `colors.${ bg }`,
     [$fg.variable]: `colors.${ fg }`,
     [$arrowBg.variable]: $bg.reference,
-    maxWidth: props.maxWidth || props.maxW || 'unset',
+    maxWidth: props.maxWidth || props.maxW || 'calc(100vw - 8px)',
+    marginX: '4px',
   };
 });
 
diff --git a/theme/components/Tooltip/__screenshots__/Tooltip.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/theme/components/Tooltip/__screenshots__/Tooltip.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
index 44b6eff06f..c80b68fb63 100644
Binary files a/theme/components/Tooltip/__screenshots__/Tooltip.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/theme/components/Tooltip/__screenshots__/Tooltip.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/theme/components/Tooltip/__screenshots__/Tooltip.pw.tsx_default_base-view-dark-mode-1.png b/theme/components/Tooltip/__screenshots__/Tooltip.pw.tsx_default_base-view-dark-mode-1.png
index 4667657549..c09ef160cb 100644
Binary files a/theme/components/Tooltip/__screenshots__/Tooltip.pw.tsx_default_base-view-dark-mode-1.png and b/theme/components/Tooltip/__screenshots__/Tooltip.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/theme/config.ts b/theme/config.ts
index 7ae9c23bcb..ddca2b54ea 100644
--- a/theme/config.ts
+++ b/theme/config.ts
@@ -1,7 +1,9 @@
 import { type ThemeConfig } from '@chakra-ui/react';
 
+import appConfig from 'configs/app';
+
 const config: ThemeConfig = {
-  initialColorMode: 'system',
+  initialColorMode: appConfig.UI.colorTheme.default?.colorMode ?? 'system',
   useSystemColorMode: false,
   disableTransitionOnChange: false,
 };
diff --git a/theme/foundations/breakpoints.ts b/theme/foundations/breakpoints.ts
index aa60d95011..ece6201c12 100644
--- a/theme/foundations/breakpoints.ts
+++ b/theme/foundations/breakpoints.ts
@@ -4,8 +4,9 @@ const breakpoints = {
   //   md: '768px',
   lg: '1000px',
   xl: '1440px',
+  '2xl': '1920px',
   // these breakpoint are needed just to make others work
-  '2xl': '3000px',
+  '3xl': '3000px',
 };
 
 export default breakpoints;
diff --git a/theme/foundations/colors.ts b/theme/foundations/colors.ts
index 8ad22f3fbd..d1e3dae714 100644
--- a/theme/foundations/colors.ts
+++ b/theme/foundations/colors.ts
@@ -55,11 +55,12 @@ const colors = {
   linkedin: '#1564BA',
   discord: '#9747FF',
   slack: '#1BA27A',
-  twitter: '#63B3ED',
+  twitter: '#000000',
   opensea: '#2081E2',
   facebook: '#4460A0',
   medium: '#231F20',
   reddit: '#FF4500',
+  celo: '#FCFF52',
 };
 
 export default colors;
diff --git a/theme/foundations/semanticTokens.ts b/theme/foundations/semanticTokens.ts
index 27ccd9f2a3..0c772a6539 100644
--- a/theme/foundations/semanticTokens.ts
+++ b/theme/foundations/semanticTokens.ts
@@ -19,9 +19,21 @@ const semanticTokens = {
     link_hovered: {
       'default': 'blue.400',
     },
+    icon_link_external: {
+      'default': 'gray.300',
+      _dark: 'gray.500',
+    },
+    icon_info: {
+      'default': 'gray.400',
+      _dark: 'gray.500',
+    },
     error: {
-      'default': 'red.400',
-      _dark: 'red.300',
+      'default': 'red.500',
+      _dark: 'red.500',
+    },
+    dialog_bg: {
+      'default': 'white',
+      _dark: 'gray.900',
     },
   },
   shadows: {
diff --git a/theme/foundations/typography.ts b/theme/foundations/typography.ts
index c91a7b28a6..b129403a93 100644
--- a/theme/foundations/typography.ts
+++ b/theme/foundations/typography.ts
@@ -1,7 +1,9 @@
 import { theme } from '@chakra-ui/react';
 
-export const BODY_TYPEFACE = 'Inter';
-export const HEADING_TYPEFACE = 'Poppins';
+import config from 'configs/app';
+
+export const BODY_TYPEFACE = config.UI.fonts.body?.name ?? 'Inter';
+export const HEADING_TYPEFACE = config.UI.fonts.heading?.name ?? 'Poppins';
 
 const typography = {
   fonts: {
@@ -21,6 +23,12 @@ const typography = {
       lineHeight: '32px',
       fontFamily: 'heading',
     },
+    h4: {
+      fontSize: 'md',
+      fontWeight: '500',
+      lineHeight: '24px',
+      fontFamily: 'heading',
+    },
   },
 };
 
diff --git a/theme/package-lock.json b/theme/package-lock.json
new file mode 100644
index 0000000000..f6a53aa09f
--- /dev/null
+++ b/theme/package-lock.json
@@ -0,0 +1,1722 @@
+{
+  "name": "@blockscout/chakra-theme",
+  "version": "1.32.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@blockscout/chakra-theme",
+      "version": "1.32.0",
+      "license": "MIT",
+      "devDependencies": {
+        "ts-loader": "^9.4.4",
+        "tsconfig-paths-webpack-plugin": "^4.1.0",
+        "webpack": "^5.94.0",
+        "webpack-cli": "^5.1.4"
+      }
+    },
+    "node_modules/@discoveryjs/json-ext": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
+      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
+      "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "dev": true
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "20.14.11",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.11.tgz",
+      "integrity": "sha512-kprQpL8MMeszbz6ojB5/tU8PLN4kesnN8Gjzw349rDlNgsSzg90lAVj3llK99Dh7JON+t9AuscPPFW6mPbTnSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
+    "node_modules/@webassemblyjs/ast": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
+      "integrity": "sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/helper-numbers": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz",
+      "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-api-error": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz",
+      "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-buffer": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz",
+      "integrity": "sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-numbers": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz",
+      "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/floating-point-hex-parser": "1.11.6",
+        "@webassemblyjs/helper-api-error": "1.11.6",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz",
+      "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-wasm-section": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz",
+      "integrity": "sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.12.1",
+        "@webassemblyjs/helper-buffer": "1.12.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.12.1"
+      }
+    },
+    "node_modules/@webassemblyjs/ieee754": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz",
+      "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "node_modules/@webassemblyjs/leb128": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz",
+      "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/utf8": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz",
+      "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/wasm-edit": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz",
+      "integrity": "sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.12.1",
+        "@webassemblyjs/helper-buffer": "1.12.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/helper-wasm-section": "1.12.1",
+        "@webassemblyjs/wasm-gen": "1.12.1",
+        "@webassemblyjs/wasm-opt": "1.12.1",
+        "@webassemblyjs/wasm-parser": "1.12.1",
+        "@webassemblyjs/wast-printer": "1.12.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-gen": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz",
+      "integrity": "sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.12.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/ieee754": "1.11.6",
+        "@webassemblyjs/leb128": "1.11.6",
+        "@webassemblyjs/utf8": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-opt": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz",
+      "integrity": "sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.12.1",
+        "@webassemblyjs/helper-buffer": "1.12.1",
+        "@webassemblyjs/wasm-gen": "1.12.1",
+        "@webassemblyjs/wasm-parser": "1.12.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-parser": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz",
+      "integrity": "sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.12.1",
+        "@webassemblyjs/helper-api-error": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/ieee754": "1.11.6",
+        "@webassemblyjs/leb128": "1.11.6",
+        "@webassemblyjs/utf8": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/wast-printer": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz",
+      "integrity": "sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.12.1",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webpack-cli/configtest": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz",
+      "integrity": "sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "peerDependencies": {
+        "webpack": "5.x.x",
+        "webpack-cli": "5.x.x"
+      }
+    },
+    "node_modules/@webpack-cli/info": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz",
+      "integrity": "sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "peerDependencies": {
+        "webpack": "5.x.x",
+        "webpack-cli": "5.x.x"
+      }
+    },
+    "node_modules/@webpack-cli/serve": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz",
+      "integrity": "sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "peerDependencies": {
+        "webpack": "5.x.x",
+        "webpack-cli": "5.x.x"
+      },
+      "peerDependenciesMeta": {
+        "webpack-dev-server": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/acorn": {
+      "version": "8.12.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
+      "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^8"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.23.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.2.tgz",
+      "integrity": "sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001640",
+        "electron-to-chromium": "^1.4.820",
+        "node-releases": "^2.0.14",
+        "update-browserslist-db": "^1.1.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001643",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001643.tgz",
+      "integrity": "sha512-ERgWGNleEilSrHM6iUz/zJNSQTP8Mr21wDWpdgvRwcTXGAq6jMtOUPP4dqFPTdKqZ2wKTdtB+uucZ3MRpAUSmg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chrome-trace-event": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
+      "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.0.tgz",
+      "integrity": "sha512-Vb3xHHYnLseK8vlMJQKJYXJ++t4u1/qJ3vykuVrVjvdiOEhYyT1AuP4x03G8EnPmYvYOhe9T+dADTmthjRQMkA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/envinfo": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.13.0.tgz",
+      "integrity": "sha512-cvcaMr7KqXVh4nyzGTVqTum+gAiL265x5jUWQIDLq//zOGbW+gSW/C+OWLleY/rs9Qole6AZLMXPbtIFQbqu+Q==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "envinfo": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.4.tgz",
+      "integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/escalade": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esrecurse/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fastest-levenshtein": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+      "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.9.1"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/flat": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
+      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "bin": {
+        "flat": "cli.js"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/import-local": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
+      "integrity": "sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pkg-dir": "^4.2.0",
+        "resolve-cwd": "^3.0.0"
+      },
+      "bin": {
+        "import-local-fixture": "fixtures/cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/interpret": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz",
+      "integrity": "sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.0.tgz",
+      "integrity": "sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/jest-worker": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/jest-worker/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/loader-runner": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
+      "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.11.5"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
+      "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "find-up": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "node_modules/rechoir": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz",
+      "integrity": "sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve": "^1.20.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-cwd": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
+      "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-from": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/serialize-javascript": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "node_modules/shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tapable": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.31.3",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.31.3.tgz",
+      "integrity": "sha512-pAfYn3NIZLyZpa83ZKigvj6Rn9c/vd5KfYGX7cN1mnzqgDcxWvrU5ZtAfIKhEXz9nRecw4z3LXkjaq96/qZqAA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.8.2",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser-webpack-plugin": {
+      "version": "5.3.10",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz",
+      "integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.20",
+        "jest-worker": "^27.4.5",
+        "schema-utils": "^3.1.1",
+        "serialize-javascript": "^6.0.1",
+        "terser": "^5.26.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "uglify-js": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-loader": {
+      "version": "9.5.1",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.5.1.tgz",
+      "integrity": "sha512-rNH3sK9kGZcH9dYzC7CewQm4NtxJTjSEVRJ2DyBZR7f8/wcta+iV44UPCXc5+nzDzivKtlzV6c9P4e+oFhDLYg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "enhanced-resolve": "^5.0.0",
+        "micromatch": "^4.0.0",
+        "semver": "^7.3.4",
+        "source-map": "^0.7.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "typescript": "*",
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/tsconfig-paths": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",
+      "integrity": "sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json5": "^2.2.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tsconfig-paths-webpack-plugin": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-4.1.0.tgz",
+      "integrity": "sha512-xWFISjviPydmtmgeUAuXp4N1fky+VCtfhOkDUFIv5ea7p4wuTomI4QTrXvFBX2S4jZsmyTSrStQl+E+4w+RzxA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "enhanced-resolve": "^5.7.0",
+        "tsconfig-paths": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
+      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
+      "dev": true,
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
+      "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.1.2",
+        "picocolors": "^1.0.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/watchpack": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz",
+      "integrity": "sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/webpack": {
+      "version": "5.94.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
+      "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.5",
+        "@webassemblyjs/ast": "^1.12.1",
+        "@webassemblyjs/wasm-edit": "^1.12.1",
+        "@webassemblyjs/wasm-parser": "^1.12.1",
+        "acorn": "^8.7.1",
+        "acorn-import-attributes": "^1.9.5",
+        "browserslist": "^4.21.10",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^5.17.1",
+        "es-module-lexer": "^1.2.1",
+        "eslint-scope": "5.1.1",
+        "events": "^3.2.0",
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.2.11",
+        "json-parse-even-better-errors": "^2.3.1",
+        "loader-runner": "^4.2.0",
+        "mime-types": "^2.1.27",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.2.0",
+        "tapable": "^2.1.1",
+        "terser-webpack-plugin": "^5.3.10",
+        "watchpack": "^2.4.1",
+        "webpack-sources": "^3.2.3"
+      },
+      "bin": {
+        "webpack": "bin/webpack.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependenciesMeta": {
+        "webpack-cli": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-cli": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz",
+      "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@discoveryjs/json-ext": "^0.5.0",
+        "@webpack-cli/configtest": "^2.1.1",
+        "@webpack-cli/info": "^2.0.2",
+        "@webpack-cli/serve": "^2.0.5",
+        "colorette": "^2.0.14",
+        "commander": "^10.0.1",
+        "cross-spawn": "^7.0.3",
+        "envinfo": "^7.7.3",
+        "fastest-levenshtein": "^1.0.12",
+        "import-local": "^3.0.2",
+        "interpret": "^3.1.1",
+        "rechoir": "^0.8.0",
+        "webpack-merge": "^5.7.3"
+      },
+      "bin": {
+        "webpack-cli": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "5.x.x"
+      },
+      "peerDependenciesMeta": {
+        "@webpack-cli/generators": {
+          "optional": true
+        },
+        "webpack-bundle-analyzer": {
+          "optional": true
+        },
+        "webpack-dev-server": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-merge": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.10.0.tgz",
+      "integrity": "sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "clone-deep": "^4.0.1",
+        "flat": "^5.0.2",
+        "wildcard": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/webpack-sources": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
+      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/wildcard": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz",
+      "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}
diff --git a/theme/package.json b/theme/package.json
new file mode 100644
index 0000000000..d2738f6b1a
--- /dev/null
+++ b/theme/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "@blockscout/chakra-theme",
+  "version": "1.32.0",
+  "main": "./dist/index.js",
+  "license": "MIT",
+  "scripts": {
+    "build": "yarn webpack-cli -c ./webpack.config.js"
+  },
+  "devDependencies": {
+    "ts-loader": "^9.4.4",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^5.1.4",
+    "tsconfig-paths-webpack-plugin": "^4.1.0"
+  },
+  "files": [
+    "/dist"
+  ]
+}
diff --git a/theme/index.ts b/theme/theme.ts
similarity index 100%
rename from theme/index.ts
rename to theme/theme.ts
diff --git a/theme/tsconfig.json b/theme/tsconfig.json
new file mode 100644
index 0000000000..25f52b3de6
--- /dev/null
+++ b/theme/tsconfig.json
@@ -0,0 +1,23 @@
+{
+	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"noEmit": false,
+		"target": "es2016",
+		"module": "CommonJS",
+		"moduleResolution": "node",
+		"paths": {
+			"nextjs-routes": ["./nextjs/nextjs-routes.d.ts"],
+		}
+	},
+	"include": [ 
+		"../types/**/*.ts", 
+		"../configs/app/**/*.ts", 
+		"../global.d.ts", 
+		"./theme.ts"
+	],
+	"tsc-alias": {
+	  "verbose": true,
+	  "resolveFullPaths": true,
+	}
+}
+  
\ No newline at end of file
diff --git a/theme/utils/getDefaultFormColors.ts b/theme/utils/getDefaultFormColors.ts
deleted file mode 100644
index 994788bf25..0000000000
--- a/theme/utils/getDefaultFormColors.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
-import { mode } from '@chakra-ui/theme-tools';
-
-export default function getDefaultFormColors(props: StyleFunctionProps) {
-  const { focusBorderColor: fc, errorBorderColor: ec, filledBorderColor: flc } = props;
-  return {
-    focusBorderColor: fc || mode('blue.500', 'blue.300')(props),
-    focusPlaceholderColor: fc || 'gray.500',
-    errorColor: ec || mode('red.400', 'red.300')(props),
-    filledColor: flc || mode('gray.300', 'gray.600')(props),
-  };
-}
diff --git a/theme/utils/getFormStyles.ts b/theme/utils/getFormStyles.ts
new file mode 100644
index 0000000000..5dda16db55
--- /dev/null
+++ b/theme/utils/getFormStyles.ts
@@ -0,0 +1,55 @@
+import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
+import { mode, transparentize } from '@chakra-ui/theme-tools';
+
+export default function getFormStyles(props: StyleFunctionProps) {
+  return {
+    input: {
+      empty: {
+        // there is no text in the empty input
+        // color: ???,
+        bgColor: props.bgColor || mode('white', 'black')(props),
+        borderColor: mode('gray.100', 'gray.700')(props),
+      },
+      hover: {
+        color: mode('gray.800', 'gray.50')(props),
+        bgColor: props.bgColor || mode('white', 'black')(props),
+        borderColor: mode('gray.200', 'gray.500')(props),
+      },
+      focus: {
+        color: mode('gray.800', 'gray.50')(props),
+        bgColor: props.bgColor || mode('white', 'black')(props),
+        borderColor: mode('blue.400', 'blue.400')(props),
+      },
+      filled: {
+        color: mode('gray.800', 'gray.50')(props),
+        bgColor: props.bgColor || mode('white', 'black')(props),
+        borderColor: mode('gray.300', 'gray.600')(props),
+      },
+      readOnly: {
+        color: mode('gray.800', 'gray.50')(props),
+        bgColor: mode('gray.200', 'gray.800')(props),
+        borderColor: mode('gray.200', 'gray.800')(props),
+      },
+      // we use opacity to show the disabled state
+      disabled: {
+        opacity: 0.2,
+      },
+      error: {
+        color: mode('gray.800', 'gray.50')(props),
+        bgColor: props.bgColor || mode('white', 'black')(props),
+        borderColor: mode('red.500', 'red.500')(props),
+      },
+    },
+    placeholder: {
+      'default': {
+        color: mode('gray.500', 'gray.500')(props),
+      },
+      disabled: {
+        color: transparentize('gray.500', 0.2)(props.theme),
+      },
+      error: {
+        color: mode('red.500', 'red.500')(props),
+      },
+    },
+  };
+}
diff --git a/theme/utils/getOutlinedFieldStyles.ts b/theme/utils/getOutlinedFieldStyles.ts
index 443249ecd1..c26ed15d11 100644
--- a/theme/utils/getOutlinedFieldStyles.ts
+++ b/theme/utils/getOutlinedFieldStyles.ts
@@ -1,59 +1,64 @@
 import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
-import { mode, getColor } from '@chakra-ui/theme-tools';
+import { mode } from '@chakra-ui/theme-tools';
 
-import getDefaultFormColors from './getDefaultFormColors';
 import getDefaultTransitionProps from './getDefaultTransitionProps';
+import getFormStyles from './getFormStyles';
 
 export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
-  const { theme, borderColor } = props;
-  const { focusBorderColor, errorColor } = getDefaultFormColors(props);
+  const formStyles = getFormStyles(props);
   const transitionProps = getDefaultTransitionProps();
 
   return {
     border: '2px solid',
     // filled input
-    backgroundColor: 'transparent',
-    borderColor: mode('gray.300', 'gray.600')(props),
+    ...formStyles.input.filled,
     ...transitionProps,
     _hover: {
-      borderColor: mode('gray.200', 'gray.500')(props),
+      ...formStyles.input.hover,
     },
     _readOnly: {
       boxShadow: 'none !important',
       userSelect: 'all',
+      pointerEvents: 'none',
+      ...formStyles.input.readOnly,
+      _hover: {
+        ...formStyles.input.readOnly,
+      },
+      _focus: {
+        ...formStyles.input.readOnly,
+      },
     },
     _disabled: {
-      opacity: 1,
-      backgroundColor: mode('blackAlpha.200', 'whiteAlpha.200')(props),
-      borderColor: 'transparent',
+      ...formStyles.input.disabled,
       cursor: 'not-allowed',
-      _hover: {
-        borderColor: 'transparent',
-      },
       ':-webkit-autofill': {
         // background color for disabled input which value was selected from browser autocomplete popup
         '-webkit-box-shadow': `0 0 0px 1000px ${ mode('rgba(16, 17, 18, 0.08)', 'rgba(255, 255, 255, 0.08)')(props) } inset`,
       },
     },
     _invalid: {
-      borderColor: getColor(theme, errorColor),
+      ...formStyles.input.error,
       boxShadow: `none`,
+      _placeholder: {
+        color: formStyles.placeholder.error.color,
+      },
     },
     _focusVisible: {
+      ...formStyles.input.focus,
       zIndex: 1,
-      borderColor: getColor(theme, focusBorderColor),
       boxShadow: 'md',
     },
     _placeholder: {
-      color: mode('blackAlpha.600', 'whiteAlpha.600')(props),
+      color: formStyles.placeholder.default.color,
     },
     // not filled input
-    ':placeholder-shown:not(:focus-visible):not(:hover):not([aria-invalid=true])': { borderColor: borderColor || mode('gray.100', 'gray.700')(props) },
+    ':placeholder-shown:not(:focus-visible):not(:hover):not([aria-invalid=true]):not([aria-readonly=true])': {
+      ...formStyles.input.empty,
+    },
 
     // not filled input with type="date"
-    ':not(:placeholder-shown)[value=""]:not(:focus-visible):not(:hover):not([aria-invalid=true])': {
-      borderColor: borderColor || mode('gray.100', 'gray.700')(props),
-      color: 'gray.500',
+    ':not(:placeholder-shown)[value=""]:not(:focus-visible):not(:hover):not([aria-invalid=true]):not([aria-readonly=true])': {
+      ...formStyles.input.empty,
     },
 
     ':-webkit-autofill': { transition: 'background-color 5000s ease-in-out 0s' },
diff --git a/theme/webpack.config.js b/theme/webpack.config.js
new file mode 100644
index 0000000000..146517ea3e
--- /dev/null
+++ b/theme/webpack.config.js
@@ -0,0 +1,32 @@
+const path = require('path');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+
+const config = {
+  mode: 'production',
+  entry: path.resolve(__dirname) + '/theme.ts',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: [ '.tsx', '.ts', '.js' ],
+    plugins: [ new TsconfigPathsPlugin({ configFile: './tsconfig.json' }) ],
+  },
+  output: {
+    filename: 'index.js',
+    path: path.resolve(__dirname) + '/dist',
+    library: {
+      type: 'commonjs',
+    },
+  },
+  optimization: {
+    minimize: false,
+  },
+};
+
+module.exports = config;
diff --git a/theme/yarn.lock b/theme/yarn.lock
new file mode 100644
index 0000000000..c769a7b658
--- /dev/null
+++ b/theme/yarn.lock
@@ -0,0 +1,913 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@discoveryjs/json-ext@^0.5.0":
+  version "0.5.7"
+  resolved "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz"
+  integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
+
+"@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.5"
+  resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz"
+  integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
+"@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
+
+"@jridgewell/source-map@^0.3.3":
+  version "0.3.6"
+  resolved "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz"
+  integrity sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
+"@jridgewell/trace-mapping@^0.3.20", "@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+  version "0.3.25"
+  resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
+"@types/estree@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz"
+  integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
+
+"@types/json-schema@^7.0.8":
+  version "7.0.15"
+  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz"
+  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
+
+"@types/node@*":
+  version "20.14.11"
+  resolved "https://registry.npmjs.org/@types/node/-/node-20.14.11.tgz"
+  integrity sha512-kprQpL8MMeszbz6ojB5/tU8PLN4kesnN8Gjzw349rDlNgsSzg90lAVj3llK99Dh7JON+t9AuscPPFW6mPbTnSA==
+  dependencies:
+    undici-types "~5.26.4"
+
+"@webassemblyjs/ast@1.12.1", "@webassemblyjs/ast@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz"
+  integrity sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==
+  dependencies:
+    "@webassemblyjs/helper-numbers" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+
+"@webassemblyjs/floating-point-hex-parser@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz"
+  integrity sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==
+
+"@webassemblyjs/helper-api-error@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz"
+  integrity sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==
+
+"@webassemblyjs/helper-buffer@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz"
+  integrity sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==
+
+"@webassemblyjs/helper-numbers@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz"
+  integrity sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==
+  dependencies:
+    "@webassemblyjs/floating-point-hex-parser" "1.11.6"
+    "@webassemblyjs/helper-api-error" "1.11.6"
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/helper-wasm-bytecode@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz"
+  integrity sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==
+
+"@webassemblyjs/helper-wasm-section@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz"
+  integrity sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/wasm-gen" "1.12.1"
+
+"@webassemblyjs/ieee754@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz"
+  integrity sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==
+  dependencies:
+    "@xtuc/ieee754" "^1.2.0"
+
+"@webassemblyjs/leb128@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz"
+  integrity sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==
+  dependencies:
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/utf8@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz"
+  integrity sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==
+
+"@webassemblyjs/wasm-edit@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz"
+  integrity sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/helper-wasm-section" "1.12.1"
+    "@webassemblyjs/wasm-gen" "1.12.1"
+    "@webassemblyjs/wasm-opt" "1.12.1"
+    "@webassemblyjs/wasm-parser" "1.12.1"
+    "@webassemblyjs/wast-printer" "1.12.1"
+
+"@webassemblyjs/wasm-gen@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz"
+  integrity sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/ieee754" "1.11.6"
+    "@webassemblyjs/leb128" "1.11.6"
+    "@webassemblyjs/utf8" "1.11.6"
+
+"@webassemblyjs/wasm-opt@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz"
+  integrity sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
+    "@webassemblyjs/wasm-gen" "1.12.1"
+    "@webassemblyjs/wasm-parser" "1.12.1"
+
+"@webassemblyjs/wasm-parser@1.12.1", "@webassemblyjs/wasm-parser@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz"
+  integrity sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-api-error" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/ieee754" "1.11.6"
+    "@webassemblyjs/leb128" "1.11.6"
+    "@webassemblyjs/utf8" "1.11.6"
+
+"@webassemblyjs/wast-printer@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz"
+  integrity sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@xtuc/long" "4.2.2"
+
+"@webpack-cli/configtest@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz"
+  integrity sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==
+
+"@webpack-cli/info@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz"
+  integrity sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==
+
+"@webpack-cli/serve@^2.0.5":
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz"
+  integrity sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==
+
+"@xtuc/ieee754@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz"
+  integrity sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==
+
+"@xtuc/long@4.2.2":
+  version "4.2.2"
+  resolved "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz"
+  integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
+
+acorn-import-attributes@^1.9.5:
+  version "1.9.5"
+  resolved "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz"
+  integrity sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==
+
+acorn@^8.7.1, acorn@^8.8.2:
+  version "8.12.1"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz"
+  integrity sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==
+
+ajv-keywords@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz"
+  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
+
+ajv@^6.12.5:
+  version "6.12.6"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+braces@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+browserslist@^4.21.10:
+  version "4.23.2"
+  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.23.2.tgz"
+  integrity sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==
+  dependencies:
+    caniuse-lite "^1.0.30001640"
+    electron-to-chromium "^1.4.820"
+    node-releases "^2.0.14"
+    update-browserslist-db "^1.1.0"
+
+buffer-from@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
+caniuse-lite@^1.0.30001640:
+  version "1.0.30001643"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001643.tgz"
+  integrity sha512-ERgWGNleEilSrHM6iUz/zJNSQTP8Mr21wDWpdgvRwcTXGAq6jMtOUPP4dqFPTdKqZ2wKTdtB+uucZ3MRpAUSmg==
+
+chalk@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chrome-trace-event@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz"
+  integrity sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==
+
+clone-deep@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz"
+  integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==
+  dependencies:
+    is-plain-object "^2.0.4"
+    kind-of "^6.0.2"
+    shallow-clone "^3.0.0"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+colorette@^2.0.14:
+  version "2.0.20"
+  resolved "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz"
+  integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
+
+commander@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz"
+  integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==
+
+commander@^2.20.0:
+  version "2.20.3"
+  resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
+cross-spawn@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+electron-to-chromium@^1.4.820:
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.0.tgz"
+  integrity sha512-Vb3xHHYnLseK8vlMJQKJYXJ++t4u1/qJ3vykuVrVjvdiOEhYyT1AuP4x03G8EnPmYvYOhe9T+dADTmthjRQMkA==
+
+enhanced-resolve@^5.0.0, enhanced-resolve@^5.17.1, enhanced-resolve@^5.7.0:
+  version "5.17.1"
+  resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz"
+  integrity sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
+envinfo@^7.7.3:
+  version "7.13.0"
+  resolved "https://registry.npmjs.org/envinfo/-/envinfo-7.13.0.tgz"
+  integrity sha512-cvcaMr7KqXVh4nyzGTVqTum+gAiL265x5jUWQIDLq//zOGbW+gSW/C+OWLleY/rs9Qole6AZLMXPbtIFQbqu+Q==
+
+es-module-lexer@^1.2.1:
+  version "1.5.4"
+  resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.4.tgz"
+  integrity sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==
+
+escalade@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz"
+  integrity sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==
+
+eslint-scope@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+events@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/events/-/events-3.3.0.tgz"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
+fast-deep-equal@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fastest-levenshtein@^1.0.12:
+  version "1.0.16"
+  resolved "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz"
+  integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==
+
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+find-up@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
+flat@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz"
+  integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
+
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+glob-to-regexp@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz"
+  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
+
+graceful-fs@^4.1.2, graceful-fs@^4.2.11, graceful-fs@^4.2.4:
+  version "4.2.11"
+  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
+import-local@^3.0.2:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz"
+  integrity sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==
+  dependencies:
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.0.0"
+
+interpret@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz"
+  integrity sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==
+
+is-core-module@^2.13.0:
+  version "2.15.0"
+  resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.0.tgz"
+  integrity sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==
+  dependencies:
+    hasown "^2.0.2"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-plain-object@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz"
+  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
+  dependencies:
+    isobject "^3.0.1"
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz"
+  integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
+
+jest-worker@^27.4.5:
+  version "27.5.1"
+  resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz"
+  integrity sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
+json-parse-even-better-errors@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
+
+json5@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
+kind-of@^6.0.2:
+  version "6.0.3"
+  resolved "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
+loader-runner@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz"
+  integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
+
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz"
+  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
+
+micromatch@^4.0.0:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.27:
+  version "2.1.35"
+  resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+minimist@^1.2.6:
+  version "1.2.8"
+  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
+neo-async@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+
+node-releases@^2.0.14:
+  version "2.0.18"
+  resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz"
+  integrity sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==
+
+p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
+p-try@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz"
+  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+picocolors@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz"
+  integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
+
+picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+pkg-dir@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
+punycode@^2.1.0:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz"
+  integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
+
+randombytes@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz"
+  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
+  dependencies:
+    safe-buffer "^5.1.0"
+
+rechoir@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz"
+  integrity sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==
+  dependencies:
+    resolve "^1.20.0"
+
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz"
+  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
+  dependencies:
+    resolve-from "^5.0.0"
+
+resolve-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
+resolve@^1.20.0:
+  version "1.22.8"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz"
+  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+safe-buffer@^5.1.0:
+  version "5.2.1"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+schema-utils@^3.1.1, schema-utils@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz"
+  integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
+  dependencies:
+    "@types/json-schema" "^7.0.8"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
+semver@^7.3.4:
+  version "7.6.3"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
+serialize-javascript@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz"
+  integrity sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==
+  dependencies:
+    randombytes "^2.1.0"
+
+shallow-clone@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz"
+  integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==
+  dependencies:
+    kind-of "^6.0.2"
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+source-map-support@~0.5.20:
+  version "0.5.21"
+  resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz"
+  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map@^0.6.0:
+  version "0.6.1"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+source-map@^0.7.4:
+  version "0.7.4"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz"
+  integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
+
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz"
+  integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-color@^8.0.0:
+  version "8.1.1"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+tapable@^2.1.1, tapable@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz"
+  integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
+
+terser-webpack-plugin@^5.3.10:
+  version "5.3.10"
+  resolved "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz"
+  integrity sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.20"
+    jest-worker "^27.4.5"
+    schema-utils "^3.1.1"
+    serialize-javascript "^6.0.1"
+    terser "^5.26.0"
+
+terser@^5.26.0:
+  version "5.31.3"
+  resolved "https://registry.npmjs.org/terser/-/terser-5.31.3.tgz"
+  integrity sha512-pAfYn3NIZLyZpa83ZKigvj6Rn9c/vd5KfYGX7cN1mnzqgDcxWvrU5ZtAfIKhEXz9nRecw4z3LXkjaq96/qZqAA==
+  dependencies:
+    "@jridgewell/source-map" "^0.3.3"
+    acorn "^8.8.2"
+    commander "^2.20.0"
+    source-map-support "~0.5.20"
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+ts-loader@^9.4.4:
+  version "9.5.1"
+  resolved "https://registry.npmjs.org/ts-loader/-/ts-loader-9.5.1.tgz"
+  integrity sha512-rNH3sK9kGZcH9dYzC7CewQm4NtxJTjSEVRJ2DyBZR7f8/wcta+iV44UPCXc5+nzDzivKtlzV6c9P4e+oFhDLYg==
+  dependencies:
+    chalk "^4.1.0"
+    enhanced-resolve "^5.0.0"
+    micromatch "^4.0.0"
+    semver "^7.3.4"
+    source-map "^0.7.4"
+
+tsconfig-paths-webpack-plugin@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-4.1.0.tgz"
+  integrity sha512-xWFISjviPydmtmgeUAuXp4N1fky+VCtfhOkDUFIv5ea7p4wuTomI4QTrXvFBX2S4jZsmyTSrStQl+E+4w+RzxA==
+  dependencies:
+    chalk "^4.1.0"
+    enhanced-resolve "^5.7.0"
+    tsconfig-paths "^4.1.2"
+
+tsconfig-paths@^4.1.2:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz"
+  integrity sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==
+  dependencies:
+    json5 "^2.2.2"
+    minimist "^1.2.6"
+    strip-bom "^3.0.0"
+
+undici-types@~5.26.4:
+  version "5.26.5"
+  resolved "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz"
+  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
+
+update-browserslist-db@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz"
+  integrity sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==
+  dependencies:
+    escalade "^3.1.2"
+    picocolors "^1.0.1"
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+watchpack@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz"
+  integrity sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==
+  dependencies:
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.1.2"
+
+webpack-cli@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz"
+  integrity sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==
+  dependencies:
+    "@discoveryjs/json-ext" "^0.5.0"
+    "@webpack-cli/configtest" "^2.1.1"
+    "@webpack-cli/info" "^2.0.2"
+    "@webpack-cli/serve" "^2.0.5"
+    colorette "^2.0.14"
+    commander "^10.0.1"
+    cross-spawn "^7.0.3"
+    envinfo "^7.7.3"
+    fastest-levenshtein "^1.0.12"
+    import-local "^3.0.2"
+    interpret "^3.1.1"
+    rechoir "^0.8.0"
+    webpack-merge "^5.7.3"
+
+webpack-merge@^5.7.3:
+  version "5.10.0"
+  resolved "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.10.0.tgz"
+  integrity sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==
+  dependencies:
+    clone-deep "^4.0.1"
+    flat "^5.0.2"
+    wildcard "^2.0.0"
+
+webpack-sources@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz"
+  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
+
+webpack@^5.94.0:
+  version "5.94.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.94.0.tgz#77a6089c716e7ab90c1c67574a28da518a20970f"
+  integrity sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==
+  dependencies:
+    "@types/estree" "^1.0.5"
+    "@webassemblyjs/ast" "^1.12.1"
+    "@webassemblyjs/wasm-edit" "^1.12.1"
+    "@webassemblyjs/wasm-parser" "^1.12.1"
+    acorn "^8.7.1"
+    acorn-import-attributes "^1.9.5"
+    browserslist "^4.21.10"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.17.1"
+    es-module-lexer "^1.2.1"
+    eslint-scope "5.1.1"
+    events "^3.2.0"
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.2.11"
+    json-parse-even-better-errors "^2.3.1"
+    loader-runner "^4.2.0"
+    mime-types "^2.1.27"
+    neo-async "^2.6.2"
+    schema-utils "^3.2.0"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.3.10"
+    watchpack "^2.4.1"
+    webpack-sources "^3.2.3"
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+wildcard@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz"
+  integrity sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==
diff --git a/tools/preset-sync/index.ts b/tools/preset-sync/index.ts
new file mode 100755
index 0000000000..5991d1cb7b
--- /dev/null
+++ b/tools/preset-sync/index.ts
@@ -0,0 +1,126 @@
+import fs from 'fs';
+import path from 'path';
+
+/* eslint-disable no-console */
+const PRESETS = {
+  arbitrum: 'https://arbitrum.blockscout.com',
+  base: 'https://base.blockscout.com',
+  blackfort_testnet: 'https://blackfort-testnet.blockscout.com',
+  celo_alfajores: 'https://celo-alfajores.blockscout.com',
+  eth: 'https://eth.blockscout.com',
+  eth_goerli: 'https://eth-goerli.blockscout.com',
+  eth_sepolia: 'https://eth-sepolia.blockscout.com',
+  gnosis: 'https://gnosis.blockscout.com',
+  optimism: 'https://optimism.blockscout.com',
+  optimism_celestia: 'https://opcelestia-raspberry.gelatoscout.com',
+  optimism_sepolia: 'https://optimism-sepolia.blockscout.com',
+  polygon: 'https://polygon.blockscout.com',
+  rootstock_testnet: 'https://rootstock-testnet.blockscout.com',
+  stability_testnet: 'https://stability-testnet.blockscout.com',
+  zkevm: 'https://zkevm.blockscout.com',
+  zksync: 'https://zksync.blockscout.com',
+  // main === staging
+  main: 'https://eth-sepolia.k8s-dev.blockscout.com',
+};
+
+const LOCAL_ENVS = {
+  NEXT_PUBLIC_APP_PROTOCOL: 'http',
+  NEXT_PUBLIC_APP_HOST: 'localhost',
+  NEXT_PUBLIC_APP_PORT: '3000',
+  NEXT_PUBLIC_APP_ENV: 'development',
+  NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL: 'ws',
+};
+
+const IGNORED_ENVS = [
+  'NEXT_PUBLIC_GIT_COMMIT_SHA',
+  'NEXT_PUBLIC_GIT_TAG',
+];
+
+function parseScriptArgs() {
+  const args = process.argv.slice(2);
+
+  const result: Record<string, string> = {};
+  args.forEach(arg => {
+    const [ key, value ] = arg.split('=');
+    if (key && value) {
+      result[key.replace(/^--/, '') as keyof typeof result] = value;
+    }
+  });
+
+  return result;
+}
+
+function getSecretEnvsList() {
+  const fileContent = fs.readFileSync(path.resolve(__dirname, '../../.env.example'), 'utf8');
+  const result = fileContent.split('\n').map((line) => line.split('=')[0]);
+  return result;
+}
+
+function updateFileContent(envsEntries: Array<[ string, string ]>, presetId: keyof typeof PRESETS) {
+  const presetEnvsContent = envsEntries
+    .map(([ key, value ]) => `${ key }=${ value }`)
+    .join('\n');
+
+  const chainName = envsEntries.find(([ key ]) => key === 'NEXT_PUBLIC_NETWORK_NAME')?.[1] ?? 'Unknown';
+
+  const explorerUrl = PRESETS[presetId];
+
+  const localEnvsContent = Object.entries(LOCAL_ENVS)
+    .map(([ key, value ]) => `${ key }=${ value }`)
+    .join('\n');
+
+  const content =
+    `# Set of ENVs for ${ chainName } network explorer\n` +
+    '# ' + explorerUrl + '\n' +
+    `# This is an auto-generated file. To update all values, run "yarn preset:sync --name=${ presetId }"\n` +
+    '\n' +
+    '# Local ENVs\n' +
+    localEnvsContent + '\n' +
+    '\n' +
+    '# Instance ENVs\n' +
+    presetEnvsContent;
+
+  fs.writeFileSync(path.resolve(__dirname, `../../configs/envs/.env.${ presetId }`), content);
+}
+
+async function updatePresetFile(presetId: keyof typeof PRESETS) {
+  const secretEnvs = getSecretEnvsList();
+
+  const instanceUrl = PRESETS[presetId];
+  const response = await fetch(`${ instanceUrl }/node-api/config`);
+  const instanceConfig = await response.json() as Record<'envs', Record<string, string>>;
+
+  const ignoredEnvs = [
+    ...Object.keys(LOCAL_ENVS),
+    ...IGNORED_ENVS,
+    ...secretEnvs,
+  ];
+
+  const presetEnvsEntries = Object.entries(instanceConfig.envs)
+    .filter(([ key ]) => !ignoredEnvs.includes(key));
+
+  updateFileContent(presetEnvsEntries, presetId);
+}
+
+async function run() {
+  console.log(`🌀 Syncing preset configuration file...`);
+
+  const args = parseScriptArgs();
+  if (!args.name) {
+    console.log('🚨 No "--name" argument is provided. Exiting...');
+    return;
+  }
+
+  const presetId = args.name as keyof typeof PRESETS;
+  const instanceUrl = PRESETS[presetId];
+  if (!instanceUrl) {
+    console.log(`🚨 No preset with name "${ presetId }" found. Exiting...`);
+    return;
+  }
+
+  await updatePresetFile(presetId);
+
+  console.log(`✅ Done!`);
+}
+
+run();
diff --git a/tools/preset-sync/tsconfig.json b/tools/preset-sync/tsconfig.json
new file mode 100644
index 0000000000..b9056abc0f
--- /dev/null
+++ b/tools/preset-sync/tsconfig.json
@@ -0,0 +1,15 @@
+{
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+		"module": "node16",
+    	"target": "es2022",
+		"resolveJsonModule": false,
+		"isolatedModules": false,
+		"noEmit": false,
+		"moduleResolution": "node16"
+	},
+	"include": [ 
+		"./index.ts", 
+	]
+}
+  
\ No newline at end of file
diff --git a/tools/scripts/dev.preset.sh b/tools/scripts/dev.preset.sh
index c8566819e0..d0a0d49e66 100755
--- a/tools/scripts/dev.preset.sh
+++ b/tools/scripts/dev.preset.sh
@@ -17,7 +17,7 @@ fi
 # download assets for the running instance
 dotenv \
   -e $config_file \
-  -- bash -c './deploy/scripts/download_assets.sh ./public/assets'
+  -- bash -c './deploy/scripts/download_assets.sh ./public/assets/configs'
 
 yarn svg:build-sprite
 echo ""
@@ -28,5 +28,5 @@ dotenv \
   -v NEXT_PUBLIC_GIT_TAG=$(git describe --tags --abbrev=0) \
   -e $config_file \
   -e $secrets_file \
-  -- bash -c './deploy/scripts/make_envs_script.sh && next dev -- -p $NEXT_PUBLIC_APP_PORT' |
+  -- bash -c './deploy/scripts/make_envs_script.sh && next dev -p $NEXT_PUBLIC_APP_PORT' |
 pino-pretty
\ No newline at end of file
diff --git a/tools/scripts/dev.sh b/tools/scripts/dev.sh
index fabcad2ff4..e89950eac4 100755
--- a/tools/scripts/dev.sh
+++ b/tools/scripts/dev.sh
@@ -6,7 +6,7 @@ dotenv \
   -e .env.local \
   -e .env.development \
   -e .env \
-  -- bash -c './deploy/scripts/download_assets.sh ./public/assets'
+  -- bash -c './deploy/scripts/download_assets.sh ./public/assets/configs'
 
 yarn svg:build-sprite
 echo ""
@@ -20,5 +20,5 @@ dotenv \
   -e .env.local \
   -e .env.development \
   -e .env \
-  -- bash -c './deploy/scripts/make_envs_script.sh && next dev -- -p $NEXT_PUBLIC_APP_PORT' |
+  -- bash -c './deploy/scripts/make_envs_script.sh && next dev -p $NEXT_PUBLIC_APP_PORT' |
 pino-pretty
\ No newline at end of file
diff --git a/tools/scripts/favicon-generator.dev.sh b/tools/scripts/favicon-generator.dev.sh
index 9d69088a8f..16d8f8aeb7 100755
--- a/tools/scripts/favicon-generator.dev.sh
+++ b/tools/scripts/favicon-generator.dev.sh
@@ -1,5 +1,5 @@
 secrets_file="./configs/envs/.env.secrets"
-favicon_folder="./public/favicon/"
+favicon_folder="./public/assets/favicon/"
 master_url="https://raw.githubusercontent.com/blockscout/frontend/main/tools/scripts/favicon.svg"
 
 if [ ! -f "$secrets_file" ]; then
diff --git a/types/api/account.ts b/types/api/account.ts
index 0ae2eeb664..67a8c3adef 100644
--- a/types/api/account.ts
+++ b/types/api/account.ts
@@ -3,7 +3,7 @@ export interface AddressTag {
   address_hash: string;
   address: AddressParam;
   name: string;
-  id: string;
+  id: number;
 }
 
 export type AddressTags = Array<AddressTag>
@@ -36,6 +36,7 @@ export interface NotificationSettings {
   'native': NotificationDirection;
   'ERC-20': NotificationDirection;
   'ERC-721': NotificationDirection;
+  'ERC-404': NotificationDirection;
 }
 
 export interface NotificationMethods {
@@ -51,7 +52,7 @@ export interface Transaction {
 export interface TransactionTag {
   transaction_hash: string;
   name: string;
-  id: string;
+  id: number;
 }
 
 export type TransactionTags = Array<TransactionTag>
@@ -80,7 +81,7 @@ export interface WatchlistAddress {
   exchange_rate: string;
   notification_settings: NotificationSettings;
   notification_methods: NotificationMethods;
-  id: string;
+  id: number;
   address: AddressParam;
   tokens_count: number;
   tokens_fiat_value: string;
@@ -102,28 +103,11 @@ export type WatchlistResponse = {
   } | null;
 }
 
-export interface PublicTag {
-  website: string;
-  tags: string; // tag_1;tag_2;tag_3 etc.
-  is_owner: boolean;
-  id: number;
-  full_name: string;
-  email: string;
-  company: string;
-  addresses: Array<string>;
-  addresses_with_info: Array<AddressParam>;
-  additional_comment: string;
-}
-
-export type PublicTagNew = Omit<PublicTag, 'id' | 'addresses_with_info'>
-
-export type PublicTags = Array<PublicTag>;
-
 export type CustomAbis = Array<CustomAbi>
 
 export interface CustomAbi {
   name: string;
-  id: string;
+  id: number;
   contract_address_hash: string;
   contract_address: AddressParam;
   abi: Array<AbiItem>;
@@ -174,14 +158,6 @@ export type TransactionTagErrors = {
   identity_id?: Array<string>;
 }
 
-export type PublicTagErrors = {
-  additional_comment: Array<string>;
-  addresses: Array<string>;
-  email: Array<string>;
-  full_name: Array<string>;
-  tags: Array<string>;
-}
-
 export interface VerifiedAddress {
   userId: string;
   chainId: string;
diff --git a/types/api/address.ts b/types/api/address.ts
index 37955b7f28..2fe4e2d3ab 100644
--- a/types/api/address.ts
+++ b/types/api/address.ts
@@ -1,8 +1,9 @@
 import type { Transaction } from 'types/api/transaction';
 
-import type { UserTags } from './addressParams';
+import type { UserTags, AddressImplementation } from './addressParams';
 import type { Block } from './block';
 import type { InternalTransaction } from './internalTransaction';
+import type { MudWorldSchema, MudWorldTable } from './mudWorlds';
 import type { NFTTokenType, TokenInfo, TokenInstance, TokenType } from './token';
 import type { TokenTransfer, TokenTransferPagination } from './tokenTransfer';
 
@@ -15,20 +16,13 @@ export interface Address extends UserTags {
   ens_domain_name: string | null;
   // TODO: if we are happy with tabs-counters method, should we delete has_something fields?
   has_beacon_chain_withdrawals?: boolean;
-  has_custom_methods_read: boolean;
-  has_custom_methods_write: boolean;
   has_decompiled_code: boolean;
   has_logs: boolean;
-  has_methods_read: boolean;
-  has_methods_read_proxy: boolean;
-  has_methods_write: boolean;
-  has_methods_write_proxy: boolean;
   has_token_transfers: boolean;
   has_tokens: boolean;
   has_validated_blocks: boolean;
   hash: string;
-  implementation_address: string | null;
-  implementation_name: string | null;
+  implementations: Array<AddressImplementation> | null;
   is_contract: boolean;
   is_verified: boolean;
   name: string | null;
@@ -148,10 +142,13 @@ export interface AddressCoinBalanceHistoryResponse {
   } | null;
 }
 
-export type AddressCoinBalanceHistoryChart = Array<{
-  date: string;
-  value: string;
-}>
+export type AddressCoinBalanceHistoryChart = {
+  items: Array<{
+    date: string;
+    value: string;
+  }>;
+  days: number;
+};
 
 export interface AddressBlocksValidatedResponse {
   items: Array<Block>;
@@ -195,3 +192,56 @@ export type AddressTabsCounters = {
   validations_count: number | null;
   withdrawals_count: number | null;
 }
+
+// MUD framework
+export type AddressMudTableItem = {
+  schema: MudWorldSchema;
+  table: MudWorldTable;
+}
+
+export type AddressMudTables = {
+  items: Array<AddressMudTableItem>;
+  next_page_params: {
+    items_count: number;
+    table_id: string;
+  };
+}
+
+export type AddressMudTablesFilter = {
+  q?: string;
+}
+
+export type AddressMudRecords = {
+  items: Array<AddressMudRecordsItem>;
+  schema: MudWorldSchema;
+  table: MudWorldTable;
+  next_page_params: {
+    items_count: number;
+    key0: string;
+    key1: string;
+    key_bytes: string;
+  };
+}
+
+export type AddressMudRecordsItem = {
+  decoded: Record<string, string | Array<string>>;
+  id: string;
+  is_deleted: boolean;
+  timestamp: string;
+}
+
+export type AddressMudRecordsFilter = {
+  filter_key0?: string;
+  filter_key1?: string;
+}
+
+export type AddressMudRecordsSorting = {
+  sort: 'key0' | 'key1';
+  order: 'asc' | 'desc' | undefined;
+}
+
+export type AddressMudRecord = {
+  record: AddressMudRecordsItem;
+  schema: MudWorldSchema;
+  table: MudWorldTable;
+}
diff --git a/types/api/addressMetadata.ts b/types/api/addressMetadata.ts
new file mode 100644
index 0000000000..6840a8235f
--- /dev/null
+++ b/types/api/addressMetadata.ts
@@ -0,0 +1,54 @@
+import type { AlertStatus } from '@chakra-ui/react';
+
+export interface AddressMetadataInfo {
+  addresses: Record<string, {
+    tags: Array<AddressMetadataTag>;
+    reputation: number | null;
+  }>;
+}
+
+export type AddressMetadataTagType = 'name' | 'generic' | 'classifier' | 'information' | 'note' | 'protocol';
+
+// Response model from Metadata microservice API
+export interface AddressMetadataTag {
+  slug: string;
+  name: string;
+  tagType: AddressMetadataTagType;
+  ordinal: number;
+  meta: string | null;
+}
+
+// Response model from Blockscout API with parsed meta field
+export interface AddressMetadataTagApi extends Omit<AddressMetadataTag, 'meta'> {
+  meta: {
+    textColor?: string;
+    bgColor?: string;
+    tagIcon?: string;
+    tagUrl?: string;
+    tooltipIcon?: string;
+    tooltipTitle?: string;
+    tooltipDescription?: string;
+    tooltipUrl?: string;
+    appID?: string;
+    appMarketplaceURL?: string;
+    appLogoURL?: string;
+    appActionButtonText?: string;
+    warpcastHandle?: string;
+    data?: string;
+    alertBgColor?: string;
+    alertTextColor?: string;
+    alertStatus?: AlertStatus;
+  } | null;
+}
+
+// TAG SUBMISSION
+
+export interface PublicTagType {
+  id: string;
+  type: AddressMetadataTagType;
+  description: string;
+}
+
+export interface PublicTagTypesResponse {
+  tagTypes: Array<PublicTagType>;
+}
diff --git a/types/api/addressParams.ts b/types/api/addressParams.ts
index fe8cb3d90c..069302e808 100644
--- a/types/api/addressParams.ts
+++ b/types/api/addressParams.ts
@@ -1,3 +1,10 @@
+import type { AddressMetadataTagApi } from './addressMetadata';
+
+export interface AddressImplementation {
+  address: string;
+  name?: string | null;
+}
+
 export interface AddressTag {
   label: string;
   display_name: string;
@@ -17,11 +24,15 @@ export interface UserTags {
 
 export type AddressParamBasic = {
   hash: string;
-  implementation_name: string | null;
+  implementations: Array<AddressImplementation> | null;
   name: string | null;
   is_contract: boolean;
   is_verified: boolean | null;
   ens_domain_name: string | null;
+  metadata?: {
+    reputation: number | null;
+    tags: Array<AddressMetadataTagApi>;
+  } | null;
 }
 
 export type AddressParam = UserTags & AddressParamBasic;
diff --git a/types/api/addresses.ts b/types/api/addresses.ts
index 9c76000760..3533b67655 100644
--- a/types/api/addresses.ts
+++ b/types/api/addresses.ts
@@ -1,6 +1,6 @@
 import type { AddressParam } from './addressParams';
 
-export type AddressesItem = AddressParam &{ tx_count: string; coin_balance: string }
+export type AddressesItem = AddressParam & { tx_count: string; coin_balance: string | null }
 
 export type AddressesResponse = {
   items: Array<AddressesItem>;
@@ -11,3 +11,13 @@ export type AddressesResponse = {
   } | null;
   total_supply: string;
 }
+
+export interface AddressesMetadataSearchResult {
+  items: Array<AddressesItem>;
+  next_page_params: null;
+}
+
+export interface AddressesMetadataSearchFilters {
+  slug: string;
+  tag_type: string;
+}
diff --git a/types/api/arbitrumL2.ts b/types/api/arbitrumL2.ts
new file mode 100644
index 0000000000..5d64d35516
--- /dev/null
+++ b/types/api/arbitrumL2.ts
@@ -0,0 +1,119 @@
+import type { Block } from './block';
+import type { Transaction } from './transaction';
+
+export interface ArbitrumLatestDepositsItem {
+  completion_transaction_hash: string;
+  origination_timestamp: string | null;
+  origination_transaction_block_number: number | null;
+  origination_transaction_hash: string | null;
+}
+
+export interface ArbitrumLatestDepositsResponse {
+  items: Array<ArbitrumLatestDepositsItem>;
+}
+
+export type ArbitrumL2MessagesItem = {
+  completion_transaction_hash: string | null;
+  id: number;
+  origination_address: string;
+  origination_timestamp: string | null;
+  origination_transaction_block_number: number | null;
+  origination_transaction_hash: string;
+  status: 'initiated' | 'sent' | 'confirmed' | 'relayed';
+}
+
+export type ArbitrumL2MessagesResponse = {
+  items: Array<ArbitrumL2MessagesItem>;
+  next_page_params: {
+    direction: string;
+    id: number;
+    items_count: number;
+  };
+}
+
+export type ArbitrumL2TxData = {
+  hash: string | null;
+  status: string | null;
+  timestamp: string | null;
+}
+
+type ArbitrumL2BatchCommitmentTx = {
+  block_number: number;
+  hash: string;
+  status: string;
+  timestamp: string;
+}
+
+type BatchDataContainer = 'in_blob4844' | 'in_calldata' | 'in_anytrust' | 'in_celestia' | null;
+
+export type ArbitrumL2TxnBatchesItem = {
+  blocks_count: number;
+  commitment_transaction: ArbitrumL2BatchCommitmentTx;
+  number: number;
+  transactions_count: number;
+  batch_data_container: BatchDataContainer;
+}
+
+export type ArbitrumL2TxnBatchesResponse = {
+  items: Array<ArbitrumL2TxnBatchesItem>;
+  next_page_params: {
+    number: number;
+    items_count: number;
+  } | null;
+}
+
+export type ArbitrumL2TxnBatchDAAnytrust = {
+  batch_data_container: 'in_anytrust';
+  bls_signature: string;
+  data_hash: string;
+  timeout: string;
+  signers: Array<{
+    key: string;
+    trusted: boolean;
+    proof?: string;
+  }>;
+}
+
+export type ArbitrumL2TxnBatchDataAvailability = ArbitrumL2TxnBatchDAAnytrust | {
+  batch_data_container: Exclude<BatchDataContainer, 'in_anytrust'>;
+}
+
+export type ArbitrumL2TxnBatch = {
+  after_acc: string;
+  before_acc: string;
+  commitment_transaction: ArbitrumL2BatchCommitmentTx;
+  end_block: number;
+  start_block: number;
+  number: number;
+  transactions_count: number;
+  data_availability: ArbitrumL2TxnBatchDataAvailability;
+}
+
+export type ArbitrumL2BatchTxs = {
+  items: Array<Transaction>;
+  next_page_params: {
+    batch_number: string;
+    block_number: number;
+    index: number;
+    items_count: number;
+  } | null;
+}
+
+export type ArbitrumL2BatchBlocks = {
+  items: Array<Block>;
+  next_page_params: {
+    batch_number: string;
+    block_number: number;
+    items_count: number;
+  } | null;
+}
+
+export const ARBITRUM_L2_TX_BATCH_STATUSES = [
+  'Processed on rollup' as const,
+  'Sent to base' as const,
+  'Confirmed on base' as const,
+];
+
+export type ArbitrumBatchStatus = typeof ARBITRUM_L2_TX_BATCH_STATUSES[number];
+
+export type NewArbitrumBatchSocketResponse = { batch: ArbitrumL2TxnBatchesItem }
diff --git a/types/api/block.ts b/types/api/block.ts
index 2fc14d2745..73d46bb973 100644
--- a/types/api/block.ts
+++ b/types/api/block.ts
@@ -2,10 +2,21 @@ import type { AddressParam } from 'types/api/addressParams';
 import type { Reward } from 'types/api/reward';
 import type { Transaction } from 'types/api/transaction';
 
+import type { ArbitrumBatchStatus, ArbitrumL2TxData } from './arbitrumL2';
+import type { OptimisticL2BatchDataContainer, OptimisticL2BlobTypeEip4844, OptimisticL2BlobTypeCelestia } from './optimisticL2';
+import type { TokenInfo } from './token';
+import type { TokenTransfer } from './tokenTransfer';
 import type { ZkSyncBatchesItem } from './zkSyncL2';
 
 export type BlockType = 'block' | 'reorg' | 'uncle';
 
+export interface BlockBaseFeeCelo {
+  amount: string;
+  breakdown: Array<{ amount: string; percentage: number; address: AddressParam }>;
+  recipient: AddressParam;
+  token: TokenInfo;
+}
+
 export interface Block {
   height: number;
   timestamp: string;
@@ -48,6 +59,33 @@ export interface Block {
   zksync?: Omit<ZkSyncBatchesItem, 'number' | 'tx_count' | 'timestamp'> & {
     'batch_number': number | null;
   };
+  arbitrum?: ArbitrumBlockData;
+  optimism?: OptimismBlockData;
+  // CELO FIELDS
+  celo?: {
+    epoch_number: number;
+    is_epoch_block: boolean;
+    base_fee?: BlockBaseFeeCelo;
+  };
+}
+
+type ArbitrumBlockData = {
+  'batch_number': number;
+  'commitment_transaction': ArbitrumL2TxData;
+  'confirmation_transaction': ArbitrumL2TxData;
+  'delayed_messages': number;
+  'l1_block_height': number;
+  'send_count': number;
+  'send_root': string;
+  'status': ArbitrumBatchStatus;
+}
+
+export interface OptimismBlockData {
+  batch_data_container: OptimisticL2BatchDataContainer;
+  internal_id: number;
+  blobs: Array<OptimisticL2BlobTypeEip4844> | Array<OptimisticL2BlobTypeCelestia> | null;
+  l1_timestamp: string;
+  l1_tx_hashes: Array<string>;
 }
 
 export interface BlocksResponse {
@@ -90,3 +128,44 @@ export type BlockWithdrawalsItem = {
   receiver: AddressParam;
   validator_index: number;
 }
+
+export interface BlockCountdownResponse {
+  result: {
+    CountdownBlock: string;
+    CurrentBlock: string;
+    EstimateTimeInSec: string;
+    RemainingBlock: string;
+  } | null;
+}
+
+export interface BlockEpochElectionReward {
+  count: number;
+  token: TokenInfo<'ERC-20'>;
+  total: string;
+}
+
+export interface BlockEpoch {
+  number: number;
+  distribution: {
+    carbon_offsetting_transfer: TokenTransfer | null;
+    community_transfer: TokenTransfer | null;
+    reserve_bolster_transfer: TokenTransfer | null;
+  };
+  aggregated_election_rewards: {
+    delegated_payment: BlockEpochElectionReward | null;
+    group: BlockEpochElectionReward | null;
+    validator: BlockEpochElectionReward | null;
+    voter: BlockEpochElectionReward | null;
+  };
+}
+
+export interface BlockEpochElectionRewardDetails {
+  account: AddressParam;
+  amount: string;
+  associated_account: AddressParam;
+}
+
+export interface BlockEpochElectionRewardDetailsResponse {
+  items: Array<BlockEpochElectionRewardDetails>;
+  next_page_params: null;
+}
diff --git a/types/api/charts.ts b/types/api/charts.ts
index 5d74b38410..a5504ded12 100644
--- a/types/api/charts.ts
+++ b/types/api/charts.ts
@@ -18,3 +18,8 @@ export interface ChartMarketResponse {
   available_supply: string;
   chart_data: Array<ChartMarketItem>;
 }
+
+export interface ChartSecondaryCoinPriceResponse {
+  available_supply: string;
+  chart_data: Array<ChartMarketItem>;
+}
diff --git a/types/api/configs.ts b/types/api/configs.ts
index c04e29c359..b190c0f2b9 100644
--- a/types/api/configs.ts
+++ b/types/api/configs.ts
@@ -1,3 +1,7 @@
 export interface BackendVersionConfig {
   backend_version: string;
 }
+
+export interface CsvExportConfig {
+  limit: number;
+}
diff --git a/types/api/contract.ts b/types/api/contract.ts
index fb85eb9bdf..f2e1ad61d0 100644
--- a/types/api/contract.ts
+++ b/types/api/contract.ts
@@ -19,6 +19,20 @@ export type SmartContractLicenseType =
 'gnu_agpl_v3' |
 'bsl_1_1';
 
+export type SmartContractProxyType =
+  | 'eip1167'
+  | 'eip1967'
+  | 'eip1822'
+  | 'eip930'
+  | 'eip2535'
+  | 'master_copy'
+  | 'basic_implementation'
+  | 'basic_get_implementation'
+  | 'comptroller'
+  | 'clone_with_immutable_arguments'
+  | 'unknown'
+  | null;
+
 export interface SmartContract {
   deployed_bytecode: string | null;
   creation_bytecode: string | null;
@@ -27,12 +41,14 @@ export interface SmartContract {
   compiler_version: string | null;
   evm_version: string | null;
   optimization_enabled: boolean | null;
-  optimization_runs: number | null;
+  optimization_runs: number | string | null;
   name: string | null;
   verified_at: string | null;
+  is_blueprint: boolean | null;
   is_verified: boolean | null;
   is_verified_via_eth_bytecode_db: boolean | null;
   is_changed_bytecode: boolean | null;
+
   // sourcify info >>>
   is_verified_via_sourcify: boolean | null;
   is_fully_verified: boolean | null;
@@ -51,9 +67,11 @@ export interface SmartContract {
     remappings?: Array<string>;
   };
   verified_twin_address_hash: string | null;
-  minimal_proxy_address_hash: string | null;
+  proxy_type: SmartContractProxyType | null;
   language: string | null;
   license_type: SmartContractLicenseType | null;
+  certified?: boolean;
+  zk_compiler_version?: string;
 }
 
 export type SmartContractDecodedConstructorArg = [
@@ -70,80 +88,9 @@ export interface SmartContractExternalLibrary {
   name: string;
 }
 
-export interface SmartContractMethodBase {
-  inputs: Array<SmartContractMethodInput>;
-  outputs?: Array<SmartContractMethodOutput>;
-  constant: boolean;
-  name: string;
-  stateMutability: SmartContractMethodStateMutability;
-  type: 'function';
-  payable: boolean;
-  error?: string;
-  method_id: string;
-}
-
-export type SmartContractReadMethod = SmartContractMethodBase;
-
-export interface SmartContractWriteFallback {
-  payable?: true;
-  stateMutability: 'payable';
-  type: 'fallback';
-}
-
-export interface SmartContractWriteReceive {
-  payable?: true;
-  stateMutability: 'payable';
-  type: 'receive';
-}
-
-export type SmartContractWriteMethod = SmartContractMethodBase | SmartContractWriteFallback | SmartContractWriteReceive;
-
-export type SmartContractMethod = SmartContractReadMethod | SmartContractWriteMethod;
-
-export interface SmartContractMethodInput {
-  internalType?: string; // there could be any string, e.g "enum MyEnum"
-  name: string;
-  type: SmartContractMethodArgType;
-  components?: Array<SmartContractMethodInput>;
-  fieldType?: 'native_coin';
-}
-
-export interface SmartContractMethodOutput extends SmartContractMethodInput {
-  value?: string | boolean | object;
-}
-
-export interface SmartContractQueryMethodReadSuccess {
-  is_error: false;
-  result: {
-    names: Array<string | [ string, Array<string> ]>;
-    output: Array<{
-      type: string;
-      value: string | Array<unknown>;
-    }>;
-  };
-}
-
-export interface SmartContractQueryMethodReadError {
-  is_error: true;
-  result: {
-    code: number;
-    message: string;
-  } | {
-    error: string;
-  } | {
-    raw: string;
-  } | {
-    method_call: string;
-    method_id: string;
-    parameters: Array<{ 'name': string; 'type': string; 'value': string }>;
-  };
-}
-
-export type SmartContractQueryMethodRead = SmartContractQueryMethodReadSuccess | SmartContractQueryMethodReadError;
-
 // VERIFICATION
 
-export type SmartContractVerificationMethod = 'flattened-code' | 'standard-input' | 'sourcify' | 'multi-part'
+export type SmartContractVerificationMethodApi = 'flattened-code' | 'standard-input' | 'sourcify' | 'multi-part'
 | 'vyper-code' | 'vyper-multi-part' | 'vyper-standard-input';
 
 export interface SmartContractVerificationConfigRaw {
@@ -154,10 +101,8 @@ export interface SmartContractVerificationConfigRaw {
   vyper_evm_versions: Array<string>;
   is_rust_verifier_microservice_enabled: boolean;
   license_types: Record<SmartContractLicenseType, number>;
-}
-
-export interface SmartContractVerificationConfig extends SmartContractVerificationConfigRaw {
-  verification_options: Array<SmartContractVerificationMethod>;
+  zk_compiler_versions?: Array<string>;
+  zk_optimization_modes?: Array<string>;
 }
 
 export type SmartContractVerificationResponse = {
@@ -176,29 +121,6 @@ export interface SmartContractVerificationError {
   name?: Array<string>;
 }
 
-export type SolidityscanReport = {
-  scan_report: {
-    contractname: string;
-    scan_status: string;
-    scan_summary: {
-      issue_severity_distribution: {
-        critical: number;
-        gas: number;
-        high: number;
-        informational: number;
-        low: number;
-        medium: number;
-      };
-      lines_analyzed_count: number;
-      scan_time_taken: number;
-      score: string;
-      score_v2: string;
-      threat_score: string;
-    };
-    scanner_reference_url: string;
-  };
-}
-
 type SmartContractSecurityAudit = {
   audit_company_name: string;
   audit_publish_date: string;
diff --git a/types/api/contracts.ts b/types/api/contracts.ts
index 65fe537568..58d1bb4c22 100644
--- a/types/api/contracts.ts
+++ b/types/api/contracts.ts
@@ -3,6 +3,7 @@ import type { SmartContractLicenseType } from './contract';
 
 export interface VerifiedContract {
   address: AddressParam;
+  certified?: boolean;
   coin_balance: string;
   compiler_version: string;
   language: 'vyper' | 'yul' | 'solidity';
@@ -12,6 +13,7 @@ export interface VerifiedContract {
   verified_at: string;
   market_cap: string | null;
   license_type: SmartContractLicenseType | null;
+  zk_compiler_version?: string;
 }
 
 export interface VerifiedContractsResponse {
diff --git a/types/api/ens.ts b/types/api/ens.ts
index 6ee12f846b..16ac03ee31 100644
--- a/types/api/ens.ts
+++ b/types/api/ens.ts
@@ -1,71 +1,16 @@
-export interface EnsDomain {
-  id: string;
-  name: string;
-  resolved_address: {
-    hash: string;
-  } | null;
-  owner: {
-    hash: string;
-  } | null;
-  wrapped_owner: {
-    hash: string;
-  } | null;
-  registration_date?: string;
-  expiry_date: string | null;
-}
-
-export interface EnsDomainDetailed extends EnsDomain {
-  tokens: Array<{ id: string; contract_hash: string; type: 'NATIVE_DOMAIN_TOKEN' | 'WRAPPED_DOMAIN_TOKEN' }>;
-  registrant: {
-    hash: string;
-  } | null;
-  other_addresses: Record<string, string>;
-}
-
-export interface EnsDomainEvent {
-  transaction_hash: string;
-  timestamp: string;
-  from_address: {
-    hash: string;
-  } | null;
-  action?: string;
-}
-
-export interface EnsAddressLookupResponse {
-  items: Array<EnsDomain>;
-  next_page_params: {
-    page_token: string;
-    page_size: number;
-  } | null;
-}
-
-export interface EnsDomainEventsResponse {
-  items: Array<EnsDomainEvent>;
-}
-
-export interface EnsDomainLookupResponse {
-  items: Array<EnsDomain>;
-  next_page_params: {
-    page_token: string;
-    page_size: number;
-  } | null;
-}
+import type * as bens from '@blockscout/bens-types';
 
-export interface EnsAddressLookupFilters {
-  address: string | null;
-  resolved_to: boolean;
-  owned_by: boolean;
-  only_active: boolean;
+export interface EnsAddressLookupFilters extends Pick<bens.LookupAddressRequest, 'address' | 'resolved_to' | 'owned_by' | 'only_active'> {
+  protocols: Array<string> | undefined;
 }
 
-export interface EnsDomainLookupFilters {
-  name: string | null;
-  only_active: boolean;
+export interface EnsDomainLookupFilters extends Pick<bens.LookupDomainNameRequest, 'name' | 'only_active'> {
+  protocols: Array<string> | undefined;
 }
 
 export interface EnsLookupSorting {
   sort: 'registration_date';
-  order: 'ASC' | 'DESC';
+  order: Exclude<bens.Order, bens.Order.ORDER_UNSPECIFIED | bens.Order.UNRECOGNIZED>;
 }
 
 export type EnsDomainLookupFiltersOptions = Array<'resolved_to' | 'owned_by' | 'with_inactive'>;
diff --git a/types/api/mudWorlds.ts b/types/api/mudWorlds.ts
new file mode 100644
index 0000000000..b9c5eb4d91
--- /dev/null
+++ b/types/api/mudWorlds.ts
@@ -0,0 +1,30 @@
+import type { AddressParam } from './addressParams';
+
+export type MudWorldsResponse = {
+  items: Array<MudWorldItem>;
+  next_page_params: {
+    items_count: number;
+    world: string;
+  };
+}
+
+export type MudWorldItem = {
+  address: AddressParam;
+  coin_balance: string;
+  tx_count: number | null;
+}
+
+export type MudWorldSchema = {
+  key_names: Array<string>;
+  key_types: Array<string>;
+  value_names: Array<string>;
+  value_types: Array<string>;
+};
+
+export type MudWorldTable = {
+  table_full_name: string;
+  table_id: string;
+  table_name: string;
+  table_namespace: string;
+  table_type: string;
+}
diff --git a/types/api/noves.ts b/types/api/noves.ts
index 1d4b396716..2f85ca6391 100644
--- a/types/api/noves.ts
+++ b/types/api/noves.ts
@@ -20,6 +20,7 @@ export interface NovesClassificationData {
     type: string | null;
   };
   message?: string;
+  deployedContractAddress?: string;
 }
 
 export interface Approved {
diff --git a/types/api/optimisticL2.ts b/types/api/optimisticL2.ts
index 0d9496d69c..5c131f0d47 100644
--- a/types/api/optimisticL2.ts
+++ b/types/api/optimisticL2.ts
@@ -1,4 +1,6 @@
 import type { AddressParam } from './addressParams';
+import type { Block } from './block';
+import type { Transaction } from './transaction';
 
 export type OptimisticL2DepositsItem = {
   l1_block_number: number;
@@ -35,21 +37,82 @@ export type OptimisticL2OutputRootsResponse = {
   };
 }
 
+export type OptimisticL2BatchDataContainer = 'in_blob4844' | 'in_celestia' | 'in_calldata';
+
 export type OptimisticL2TxnBatchesItem = {
-  l1_tx_hashes: Array<string>;
+  internal_id: number;
+  batch_data_container?: OptimisticL2BatchDataContainer;
   l1_timestamp: string;
-  l2_block_number: number;
+  l1_tx_hashes: Array<string>;
+  l2_block_start: number;
+  l2_block_end: number;
   tx_count: number;
 }
 
 export type OptimisticL2TxnBatchesResponse = {
   items: Array<OptimisticL2TxnBatchesItem>;
   next_page_params: {
-    block_number: number;
+    id: number;
     items_count: number;
   };
 }
 
+export interface OptimisticL2BlobTypeEip4844 {
+  hash: string;
+  l1_timestamp: string;
+  l1_transaction_hash: string;
+}
+
+export interface OptimisticL2BlobTypeCelestia {
+  commitment: string;
+  height: number;
+  l1_timestamp: string;
+  l1_transaction_hash: string;
+  namespace: string;
+}
+
+interface OptimismL2TxnBatchBase {
+  internal_id: number;
+  l1_timestamp: string;
+  l1_tx_hashes: Array<string>;
+  l2_block_start: number;
+  l2_block_end: number;
+  tx_count: number;
+}
+
+export interface OptimismL2TxnBatchTypeCallData extends OptimismL2TxnBatchBase {
+  batch_data_container: 'in_calldata';
+}
+
+export interface OptimismL2TxnBatchTypeEip4844 extends OptimismL2TxnBatchBase {
+  batch_data_container: 'in_blob4844';
+  blobs: Array<OptimisticL2BlobTypeEip4844> | null;
+}
+
+export interface OptimismL2TxnBatchTypeCelestia extends OptimismL2TxnBatchBase {
+  batch_data_container: 'in_celestia';
+  blobs: Array<OptimisticL2BlobTypeCelestia> | null;
+}
+
+export type OptimismL2TxnBatch = OptimismL2TxnBatchTypeCallData | OptimismL2TxnBatchTypeEip4844 | OptimismL2TxnBatchTypeCelestia;
+
+export type OptimismL2BatchTxs = {
+  items: Array<Transaction>;
+  next_page_params: {
+    block_number: number;
+    index: number;
+    items_count: number;
+  } | null;
+}
+
+export type OptimismL2BatchBlocks = {
+  items: Array<Block>;
+  next_page_params: {
+    batch_number: number;
+    items_count: number;
+  } | null;
+}
+
 export type OptimisticL2WithdrawalsItem = {
   'challenge_period_end': string | null;
   'from': AddressParam | null;
@@ -61,15 +124,15 @@ export type OptimisticL2WithdrawalsItem = {
   'status': string;
 }
 
-export const WITHDRAWAL_STATUSES = [
-  'Waiting for state root',
-  'Ready to prove',
-  'In challenge period',
-  'Ready for relay',
-  'Relayed',
-] as const;
-
-export type OptimisticL2WithdrawalStatus = typeof WITHDRAWAL_STATUSES[number];
+export type OptimisticL2WithdrawalStatus =
+  'Waiting for state root' |
+  'Ready to prove' |
+  'In challenge period' |
+  'Waiting a game to resolve' |
+  'Ready to prove' |
+  'Proven' |
+  'Ready for relay' |
+  'Relayed';
 
 export type OptimisticL2WithdrawalsResponse = {
   items: Array<OptimisticL2WithdrawalsItem>;
@@ -78,3 +141,21 @@ export type OptimisticL2WithdrawalsResponse = {
     'nonce': string;
   };
 }
+
+export type OptimisticL2DisputeGamesResponse = {
+  items: Array<OptimisticL2DisputeGamesItem>;
+  'next_page_params': {
+    'items_count': number;
+    'index': number;
+  };
+}
+
+export type OptimisticL2DisputeGamesItem = {
+  contract_address: string;
+  created_at: string;
+  game_type: number;
+  index: number;
+  l2_block_number: number;
+  resolved_at: string | null;
+  status: string;
+}
diff --git a/types/api/search.ts b/types/api/search.ts
index aee756023a..8629e92895 100644
--- a/types/api/search.ts
+++ b/types/api/search.ts
@@ -22,6 +22,7 @@ export interface SearchResultAddressOrContractOrUniversalProfile {
   name: string | null;
   address: string;
   is_smart_contract_verified: boolean;
+  certified?: true;
   url?: string; // not used by the frontend, we build the url ourselves
   ens_info?: {
     address_hash: string;
@@ -31,6 +32,20 @@ export interface SearchResultAddressOrContractOrUniversalProfile {
   };
 }
 
+export interface SearchResultDomain {
+  type: 'ens_domain';
+  name: string | null;
+  address: string;
+  is_smart_contract_verified: boolean;
+  url?: string; // not used by the frontend, we build the url ourselves
+  ens_info: {
+    address_hash: string;
+    expiry_date?: string;
+    name: string;
+    names_count: number;
+  };
+}
+
 export interface SearchResultLabel {
   type: 'label';
   address: string;
@@ -68,13 +83,8 @@ export interface SearchResultUserOp {
   url?: string; // not used by the frontend, we build the url ourselves
 }
 
-export type SearchResultItem = SearchResultToken |
-SearchResultAddressOrContractOrUniversalProfile |
-SearchResultBlock |
-SearchResultTx |
-SearchResultLabel |
-SearchResultUserOp |
-SearchResultBlob;
+export type SearchResultItem = SearchResultToken | SearchResultAddressOrContractOrUniversalProfile | SearchResultBlock | SearchResultTx |
+SearchResultLabel | SearchResultUserOp | SearchResultBlob | SearchResultDomain;
 
 export interface SearchResult {
   items: Array<SearchResultItem>;
diff --git a/types/api/stats.ts b/types/api/stats.ts
index 40fe7d34e2..a1701a7c7e 100644
--- a/types/api/stats.ts
+++ b/types/api/stats.ts
@@ -3,19 +3,26 @@ export type HomeStats = {
   total_addresses: string;
   total_transactions: string;
   average_block_time: number;
+  coin_image?: string | null;
   coin_price: string | null;
   coin_price_change_percentage: number | null; // e.g -6.22
   total_gas_used: string;
-  transactions_today: string;
+  transactions_today: string | null;
   gas_used_today: string;
   gas_prices: GasPrices | null;
   gas_price_updated_at: string | null;
   gas_prices_update_in: number;
   static_gas_price: string | null;
-  market_cap: string;
+  market_cap: string | null;
   network_utilization_percentage: number;
   tvl: string | null;
   rootstock_locked_btc?: string | null;
+  last_output_root_size?: string | null;
+  secondary_coin_price?: string | null;
+  secondary_coin_image?: string | null;
+  celo?: {
+    epoch_number: number;
+  };
 }
 
 export type GasPrices = {
@@ -31,39 +38,3 @@ export interface GasPriceInfo {
   base_fee: number | null;
   priority_fee: number | null;
 }
-
-export type Counters = {
-  counters: Array<Counter>;
-}
-
-export type Counter = {
-  id: string;
-  value: string;
-  title: string;
-  description?: string;
-  units: string;
-}
-
-export type StatsCharts = {
-  sections: Array<StatsChartsSection>;
-}
-
-export type StatsChartsSection = {
-  id: string;
-  title: string;
-  charts: Array<StatsChartInfo>;
-}
-
-export type StatsChartInfo = {
-  id: string;
-  title: string;
-  description: string;
-  units: string | null;
-}
-
-export type StatsChart = { chart: Array<StatsChartItem> };
-
-export type StatsChartItem = {
-  date: string;
-  value: string;
-}
diff --git a/types/api/token.ts b/types/api/token.ts
index 7cae408f7d..58d4e484fb 100644
--- a/types/api/token.ts
+++ b/types/api/token.ts
@@ -61,6 +61,11 @@ export interface TokenInstance {
   owner: AddressParam | null;
 }
 
+export interface TokenInstanceMetadataSocketMessage {
+  token_id: number;
+  fetched_metadata: TokenInstance['metadata'];
+}
+
 export interface TokenInstanceTransfersCount {
   transfers_count: number;
 }
diff --git a/types/api/tokenTransfer.ts b/types/api/tokenTransfer.ts
index d0feaa7e2d..bb580516dd 100644
--- a/types/api/tokenTransfer.ts
+++ b/types/api/tokenTransfer.ts
@@ -17,10 +17,11 @@ export type Erc1155TotalPayload = {
 }
 
 export type Erc404TotalPayload = {
-  decimals: string | null;
-  value: string | null;
+  decimals: string;
+  value: string;
+  token_id: null;
 } | {
-  token_id: string | null;
+  token_id: string;
 };
 
 export type TokenTransfer = (
diff --git a/types/api/tokens.ts b/types/api/tokens.ts
index adeca8d768..6538e690ec 100644
--- a/types/api/tokens.ts
+++ b/types/api/tokens.ts
@@ -8,7 +8,7 @@ export type TokensResponse = {
     items_count: number;
     name: string;
     market_cap: string | null;
-  };
+  } | null;
 }
 
 export type TokensFilters = { q: string; type: Array<TokenType> | undefined };
diff --git a/types/api/transaction.ts b/types/api/transaction.ts
index 8f1fee017e..782120bb50 100644
--- a/types/api/transaction.ts
+++ b/types/api/transaction.ts
@@ -1,4 +1,5 @@
 import type { AddressParam } from './addressParams';
+import type { ArbitrumBatchStatus, ArbitrumL2TxData } from './arbitrumL2';
 import type { BlockTransactionsResponse } from './block';
 import type { DecodedInput } from './decodedInput';
 import type { Fee } from './fee';
@@ -76,6 +77,10 @@ export type Transaction = {
     validator_address: AddressParam;
     validator_fee: string;
   };
+  // Celo fields
+  celo?: {
+    gas_token: TokenInfo<'ERC-20'> | null;
+  };
   // zkEvm fields
   zkevm_verify_hash?: string;
   zkevm_batch_number?: number;
@@ -93,10 +98,36 @@ export type Transaction = {
   max_fee_per_blob_gas?: string;
   // Noves-fi
   translation?: NovesTxTranslation;
+  arbitrum?: ArbitrumTransactionData;
+}
+
+type ArbitrumTransactionData = {
+  batch_number: number;
+  commitment_transaction: ArbitrumL2TxData;
+  confirmation_transaction: ArbitrumL2TxData;
+  contains_message: 'incoming' | 'outcoming' | null;
+  gas_used_for_l1: string;
+  gas_used_for_l2: string;
+  network_fee: string;
+  poster_fee: string;
+  status: ArbitrumBatchStatus;
+  message_related_info: {
+    associated_l1_transaction: string | null;
+    message_status: ArbitrumMessageStatus;
+  };
 }
 
+export type ArbitrumMessageStatus = 'Relayed' | 'Syncing with base layer' | 'Waiting for confirmation' | 'Ready for relay' | 'Settlement pending';
+
 export const ZKEVM_L2_TX_STATUSES = [ 'Confirmed by Sequencer', 'L1 Confirmed' ];
 
+export interface TransactionsStats {
+  pending_transactions_count: string;
+  transaction_fees_avg_24h: string;
+  transaction_fees_sum_24h: string;
+  transactions_count_24h: string;
+}
+
 export type TransactionsResponse = TransactionsResponseValidated | TransactionsResponsePending;
 
 export interface TransactionsResponseValidated {
diff --git a/types/api/userOps.ts b/types/api/userOps.ts
index 7223f7f68e..2f7dcfdc26 100644
--- a/types/api/userOps.ts
+++ b/types/api/userOps.ts
@@ -1,4 +1,5 @@
 import type { AddressParamBasic } from './addressParams';
+import type { DecodedInput } from './decodedInput';
 
 export type UserOpsItem = {
   hash: string;
@@ -46,6 +47,9 @@ export type UserOp = {
   signature: string;
   nonce: string;
   call_data: string;
+  decoded_call_data: DecodedInput | null;
+  execute_call_data: string | null;
+  decoded_execute_call_data: DecodedInput | null;
   user_logs_start_index: number;
   user_logs_count: number;
   raw: {
diff --git a/types/api/validators.ts b/types/api/validators.ts
index ad6e33de96..18fe50962b 100644
--- a/types/api/validators.ts
+++ b/types/api/validators.ts
@@ -1,38 +1,67 @@
 import type { AddressParam } from './addressParams';
 
-export interface Validator {
+export interface ValidatorStability {
   address: AddressParam;
   blocks_validated_count: number;
   state: 'active' | 'probation' | 'inactive';
 }
 
-export interface ValidatorsResponse {
-  items: Array<Validator>;
+export interface ValidatorsStabilityResponse {
+  items: Array<ValidatorStability>;
   next_page_params: {
     'address_hash': string;
     'blocks_validated': string;
     'items_count': string;
-    'state': Validator['state'];
+    'state': ValidatorStability['state'];
   } | null;
 }
 
-export interface ValidatorsCountersResponse {
+export interface ValidatorsStabilityCountersResponse {
   active_validators_counter: string;
   active_validators_percentage: number;
   new_validators_counter_24h: string;
   validators_counter: string;
 }
 
-export interface ValidatorsFilters {
+export interface ValidatorsStabilityFilters {
   // address_hash: string | undefined; // right now API doesn't support filtering by address_hash
-  state_filter: Validator['state'] | undefined;
+  state_filter: ValidatorStability['state'] | undefined;
 }
 
-export interface ValidatorsSorting {
+export interface ValidatorsStabilitySorting {
   sort: 'state' | 'blocks_validated';
   order: 'asc' | 'desc';
 }
 
-export type ValidatorsSortingField = ValidatorsSorting['sort'];
+export type ValidatorsStabilitySortingField = ValidatorsStabilitySorting['sort'];
 
-export type ValidatorsSortingValue = `${ ValidatorsSortingField }-${ ValidatorsSorting['order'] }`;
+export type ValidatorsStabilitySortingValue = `${ ValidatorsStabilitySortingField }-${ ValidatorsStabilitySorting['order'] }`;
+
+export interface ValidatorBlackfort {
+  address: AddressParam;
+  name: string;
+  commission: number;
+  delegated_amount: string;
+  self_bonded_amount: string;
+}
+
+export interface ValidatorsBlackfortResponse {
+  items: Array<ValidatorBlackfort>;
+  next_page_params: {
+    'address_hash': string;
+  } | null;
+}
+
+export interface ValidatorsBlackfortCountersResponse {
+  new_validators_counter_24h: string;
+  validators_counter: string;
+}
+
+export interface ValidatorsBlackfortSorting {
+  sort: 'address_hash';
+  order: 'asc' | 'desc';
+}
+
+export type ValidatorsBlackfortSortingField = ValidatorsBlackfortSorting['sort'];
+
+export type ValidatorsBlackfortSortingValue = `${ ValidatorsBlackfortSortingField }-${ ValidatorsBlackfortSorting['order'] }`;
diff --git a/types/api/visualization.ts b/types/api/visualization.ts
deleted file mode 100644
index f80dc493b1..0000000000
--- a/types/api/visualization.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface VisualizedContract {
-  png: string | null;
-  svg: string | null;
-}
diff --git a/types/api/zkEvmL2.ts b/types/api/zkEvmL2.ts
index df80185cf6..04ebc265c0 100644
--- a/types/api/zkEvmL2.ts
+++ b/types/api/zkEvmL2.ts
@@ -1,5 +1,41 @@
 import type { Transaction } from './transaction';
 
+export type ZkEvmL2DepositsItem = {
+  block_number: number;
+  index: number;
+  l1_transaction_hash: string;
+  l2_transaction_hash: string | null;
+  timestamp: string;
+  value: string;
+  symbol: string;
+}
+
+export type ZkEvmL2DepositsResponse = {
+  items: Array<ZkEvmL2DepositsItem>;
+  next_page_params: {
+    items_count: number;
+    index: number;
+  };
+}
+
+export type ZkEvmL2WithdrawalsItem = {
+  block_number: number;
+  index: number;
+  l1_transaction_hash: string | null;
+  l2_transaction_hash: string;
+  timestamp: string;
+  value: string;
+  symbol: string;
+}
+
+export type ZkEvmL2WithdrawalsResponse = {
+  items: Array<ZkEvmL2WithdrawalsItem>;
+  next_page_params: {
+    items_count: number;
+    index: number;
+  };
+}
+
 export type ZkEvmL2TxnBatchesItem = {
   number: number;
   verify_tx_hash: string | null;
diff --git a/types/client/adProviders.ts b/types/client/adProviders.ts
index ac0418496d..df3962b9ec 100644
--- a/types/client/adProviders.ts
+++ b/types/client/adProviders.ts
@@ -1,6 +1,13 @@
 import type { ArrayElement } from 'types/utils';
 
-export const SUPPORTED_AD_BANNER_PROVIDERS = [ 'slise', 'adbutler', 'coinzilla', 'hype', 'getit', 'none' ] as const;
+export const SUPPORTED_AD_BANNER_PROVIDERS = [
+  'slise',
+  'adbutler',
+  'coinzilla',
+  'hype',
+  //   'getit', // temporary disabled
+  'none',
+] as const;
 export type AdBannerProviders = ArrayElement<typeof SUPPORTED_AD_BANNER_PROVIDERS>;
 
 export const SUPPORTED_AD_BANNER_ADDITIONAL_PROVIDERS = [ 'adbutler' ] as const;
diff --git a/types/client/address.ts b/types/client/address.ts
index 719aa339bf..e7a181ee3b 100644
--- a/types/client/address.ts
+++ b/types/client/address.ts
@@ -8,4 +8,8 @@ export type CsvExportParams = {
   type: 'logs';
   filterType?: 'topic';
   filterValue?: string;
+} | {
+  type: 'holders';
+  filterType?: undefined;
+  filterValue?: undefined;
 }
diff --git a/types/client/addressMetadata.ts b/types/client/addressMetadata.ts
new file mode 100644
index 0000000000..8281e1cf1b
--- /dev/null
+++ b/types/client/addressMetadata.ts
@@ -0,0 +1,10 @@
+import type { AddressMetadataTagApi } from 'types/api/addressMetadata';
+
+export interface AddressMetadataInfoFormatted {
+  addresses: Record<string, {
+    tags: Array<AddressMetadataTagFormatted>;
+    reputation: number | null;
+  }>;
+}
+
+export type AddressMetadataTagFormatted = AddressMetadataTagApi;
diff --git a/types/client/contract.ts b/types/client/contract.ts
index 63116a4072..66fca3531c 100644
--- a/types/client/contract.ts
+++ b/types/client/contract.ts
@@ -1,4 +1,4 @@
-import type { SmartContractLicenseType } from 'types/api/contract';
+import type { SmartContractLicenseType, SmartContractVerificationConfigRaw, SmartContractVerificationMethodApi } from 'types/api/contract';
 
 export interface ContractCodeIde {
   title: string;
@@ -12,3 +12,16 @@ export interface ContractLicense {
   label: string;
   title: string;
 }
+
+export const SMART_CONTRACT_EXTRA_VERIFICATION_METHODS = [
+  'solidity-hardhat' as const,
+  'solidity-foundry' as const,
+];
+
+export type SmartContractVerificationMethodExtra = (typeof SMART_CONTRACT_EXTRA_VERIFICATION_METHODS)[number];
+
+export type SmartContractVerificationMethod = SmartContractVerificationMethodApi | SmartContractVerificationMethodExtra;
+
+export interface SmartContractVerificationConfig extends SmartContractVerificationConfigRaw {
+  verification_options: Array<SmartContractVerificationMethod>;
+}
diff --git a/types/client/deFiDropdown.ts b/types/client/deFiDropdown.ts
new file mode 100644
index 0000000000..2d087f5a1b
--- /dev/null
+++ b/types/client/deFiDropdown.ts
@@ -0,0 +1,9 @@
+import type { IconName } from 'ui/shared/IconSvg';
+
+export type DeFiDropdownItem = {
+  text: string;
+  icon: IconName;
+} & (
+  { dappId: string; url?: never } |
+  { url: string; dappId?: never }
+);
diff --git a/types/client/gasRefuelProviderConfig.ts b/types/client/gasRefuelProviderConfig.ts
new file mode 100644
index 0000000000..d135952480
--- /dev/null
+++ b/types/client/gasRefuelProviderConfig.ts
@@ -0,0 +1,6 @@
+export type GasRefuelProviderConfig = {
+  name: string;
+  dapp_id?: string;
+  url_template: string;
+  logo?: string;
+};
diff --git a/types/client/marketplace.ts b/types/client/marketplace.ts
index 9063f538af..a6785311c7 100644
--- a/types/client/marketplace.ts
+++ b/types/client/marketplace.ts
@@ -1,4 +1,4 @@
-import type { SolidityscanReport } from 'types/api/contract';
+import type { SolidityScanReport, SolidityScanReportSeverityDistribution } from 'lib/solidityScan/schema';
 
 export type MarketplaceAppPreview = {
   id: string;
@@ -26,8 +26,15 @@ export type MarketplaceAppOverview = MarketplaceAppPreview & MarketplaceAppSocia
   site?: string;
 }
 
+export type AppRating = {
+  recordId: string;
+  value: number | undefined;
+  count?: number;
+}
+
 export type MarketplaceAppWithSecurityReport = MarketplaceAppOverview & {
   securityReport?: MarketplaceAppSecurityReport;
+  rating?: AppRating;
 }
 
 export enum MarketplaceCategory {
@@ -41,11 +48,6 @@ export enum ContractListTypes {
   VERIFIED = 'Verified',
 }
 
-export enum MarketplaceDisplayType {
-  DEFAULT = 'default',
-  SCORES = 'scores',
-}
-
 export type MarketplaceAppSecurityReport = {
   overallInfo: {
     verifiedNumber: number;
@@ -53,12 +55,12 @@ export type MarketplaceAppSecurityReport = {
     solidityScanContractsNumber: number;
     securityScore: number;
     totalIssues?: number;
-    issueSeverityDistribution: SolidityscanReport['scan_report']['scan_summary']['issue_severity_distribution'];
+    issueSeverityDistribution: SolidityScanReportSeverityDistribution;
   };
   contractsData: Array<{
     address: string;
     isVerified: boolean;
-    solidityScanReport?: SolidityscanReport['scan_report'] | null;
+    solidityScanReport?: SolidityScanReport['scan_report'] | null;
   }>;
 }
 
diff --git a/types/client/multichainProviderConfig.ts b/types/client/multichainProviderConfig.ts
new file mode 100644
index 0000000000..fbdced386f
--- /dev/null
+++ b/types/client/multichainProviderConfig.ts
@@ -0,0 +1,6 @@
+export type MultichainProviderConfig = {
+  name: string;
+  dapp_id?: string;
+  url_template: string;
+  logo?: string;
+};
diff --git a/types/client/navigation-items.ts b/types/client/navigation-items.ts
deleted file mode 100644
index 862b1cec84..0000000000
--- a/types/client/navigation-items.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import type React from 'react';
-
-import type { Route } from 'nextjs-routes';
-
-import type { IconName } from 'ui/shared/IconSvg';
-
-type NavIconOrComponent = {
-  icon?: IconName;
-} | {
-  iconComponent?: React.FC<{size?: number}>;
-};
-
-type NavItemCommon = {
-  text: string;
-} & NavIconOrComponent;
-
-export type NavItemInternal = NavItemCommon & {
-  nextRoute: Route;
-  isActive?: boolean;
-}
-
-export type NavItemExternal = {
-  text: string;
-  url: string;
-}
-
-export type NavItem = NavItemInternal | NavItemExternal
-
-export type NavGroupItem = NavItemCommon & {
-  isActive?: boolean;
-  subItems: Array<NavItem> | Array<Array<NavItem>>;
-}
-
-import type { ArrayElement } from '../utils';
-
-export const NAVIGATION_LINK_IDS = [ 'rpc_api', 'eth_rpc_api' ] as const;
-export type NavigationLinkId = ArrayElement<typeof NAVIGATION_LINK_IDS>;
diff --git a/types/client/navigation.ts b/types/client/navigation.ts
new file mode 100644
index 0000000000..8d9881eb8a
--- /dev/null
+++ b/types/client/navigation.ts
@@ -0,0 +1,39 @@
+import type React from 'react';
+
+import type { Route } from 'nextjs-routes';
+
+import type { IconName } from 'ui/shared/IconSvg';
+
+type NavIconOrComponent = {
+  icon?: IconName;
+} | {
+  iconComponent?: React.FC<{ size?: number; className?: string }>;
+};
+
+type NavItemCommon = {
+  text: string;
+} & NavIconOrComponent;
+
+export type NavItemInternal = NavItemCommon & {
+  nextRoute: Route;
+  isActive?: boolean;
+}
+
+export type NavItemExternal = {
+  text: string;
+  url: string;
+}
+
+export type NavItem = NavItemInternal | NavItemExternal
+
+export type NavGroupItem = NavItemCommon & {
+  isActive?: boolean;
+  subItems: Array<NavItem> | Array<Array<NavItem>>;
+}
+
+import type { ArrayElement } from '../utils';
+
+export const NAVIGATION_LINK_IDS = [ 'rpc_api', 'eth_rpc_api' ] as const;
+export type NavigationLinkId = ArrayElement<typeof NAVIGATION_LINK_IDS>;
+
+export type NavigationLayout = 'vertical' | 'horizontal';
diff --git a/types/client/rollup.ts b/types/client/rollup.ts
index 3e5e5da91d..a2775e289b 100644
--- a/types/client/rollup.ts
+++ b/types/client/rollup.ts
@@ -2,6 +2,7 @@ import type { ArrayElement } from 'types/utils';
 
 export const ROLLUP_TYPES = [
   'optimistic',
+  'arbitrum',
   'shibarium',
   'zkEvm',
   'zkSync',
diff --git a/types/client/search.ts b/types/client/search.ts
new file mode 100644
index 0000000000..ca02af1e3e
--- /dev/null
+++ b/types/client/search.ts
@@ -0,0 +1,14 @@
+import type * as api from 'types/api/search';
+
+export interface SearchResultFutureBlock {
+  type: 'block';
+  block_type: 'block';
+  block_number: number | string;
+  block_hash: string;
+  timestamp: undefined;
+  url?: string; // not used by the frontend, we build the url ourselves
+}
+
+export type SearchResultBlock = api.SearchResultBlock | SearchResultFutureBlock;
+
+export type SearchResultItem = api.SearchResultItem | SearchResultBlock;
diff --git a/types/client/validators.ts b/types/client/validators.ts
index 9fdc949d5d..3b806c4366 100644
--- a/types/client/validators.ts
+++ b/types/client/validators.ts
@@ -2,6 +2,7 @@ import type { ArrayElement } from 'types/utils';
 
 export const VALIDATORS_CHAIN_TYPE = [
   'stability',
+  'blackfort',
 ] as const;
 
 export type ValidatorsChainType = ArrayElement<typeof VALIDATORS_CHAIN_TYPE>;
diff --git a/types/homepage.ts b/types/homepage.ts
index b773176288..d8d06647c9 100644
--- a/types/homepage.ts
+++ b/types/homepage.ts
@@ -1 +1,31 @@
-export type ChainIndicatorId = 'daily_txs' | 'coin_price' | 'market_cap' | 'tvl';
+export const CHAIN_INDICATOR_IDS = [ 'daily_txs', 'coin_price', 'secondary_coin_price', 'market_cap', 'tvl' ] as const;
+export type ChainIndicatorId = typeof CHAIN_INDICATOR_IDS[number];
+
+export const HOME_STATS_WIDGET_IDS = [
+  'latest_batch',
+  'total_blocks',
+  'average_block_time',
+  'total_txs',
+  'latest_l1_state_batch',
+  'wallet_addresses',
+  'gas_tracker',
+  'btc_locked',
+  'current_epoch',
+] as const;
+export type HomeStatsWidgetId = typeof HOME_STATS_WIDGET_IDS[number];
+
+export interface HeroBannerButtonState {
+  background?: Array<string | undefined>;
+  text_color?: Array<string | undefined>;
+}
+
+export interface HeroBannerConfig {
+  background?: Array<string | undefined>;
+  text_color?: Array<string | undefined>;
+  border?: Array<string | undefined>;
+  button?: {
+    _default?: HeroBannerButtonState;
+    _hover?: HeroBannerButtonState;
+    _selected?: HeroBannerButtonState;
+  };
+}
diff --git a/types/networks.ts b/types/networks.ts
index 159f506634..fb729eb891 100644
--- a/types/networks.ts
+++ b/types/networks.ts
@@ -24,4 +24,6 @@ export interface NetworkExplorer {
   };
 }
 
-export type NetworkVerificationType = 'mining' | 'validation';
+export type NetworkVerificationTypeEnvs = 'mining' | 'validation';
+export type NetworkVerificationTypeComputed = 'posting' | 'sequencing';
+export type NetworkVerificationType = NetworkVerificationTypeEnvs | NetworkVerificationTypeComputed;
diff --git a/types/settings.ts b/types/settings.ts
new file mode 100644
index 0000000000..992205c4de
--- /dev/null
+++ b/types/settings.ts
@@ -0,0 +1,2 @@
+export const COLOR_THEME_IDS = [ 'light', 'dim', 'midnight', 'dark' ] as const;
+export type ColorThemeId = typeof COLOR_THEME_IDS[number];
diff --git a/types/ui.ts b/types/ui.ts
new file mode 100644
index 0000000000..119920c0f3
--- /dev/null
+++ b/types/ui.ts
@@ -0,0 +1,4 @@
+export interface FontFamily {
+  name: string;
+  url: string;
+}
diff --git a/types/utils.ts b/types/utils.ts
index 06bb70df3e..6cb7a82094 100644
--- a/types/utils.ts
+++ b/types/utils.ts
@@ -11,3 +11,9 @@ export type KeysOfObjectOrNull<T> = keyof ExcludeNull<T>;
 /** Combines members of an intersection into a readable type. */
 // https://twitter.com/mattpocockuk/status/1622730173446557697?s=20&t=NdpAcmEFXY01xkqU3KO0Mg
 export type Evaluate<Type> = { [key in keyof Type]: Type[key] } & unknown
+
+// Keeps in the object type only those properties that have the provided type (e.g only numbers)
+export type PickByType<T, X> = Record<
+{[K in keyof T]: T[K] extends X ? K : never}[keyof T],
+X
+>;
diff --git a/types/views/block.ts b/types/views/block.ts
index e924d6189b..838dc523b7 100644
--- a/types/views/block.ts
+++ b/types/views/block.ts
@@ -5,6 +5,8 @@ export const BLOCK_FIELDS_IDS = [
   'total_reward',
   'nonce',
   'miner',
+  'L1_status',
+  'batch',
 ] as const;
 
 export type BlockFieldId = ArrayElement<typeof BLOCK_FIELDS_IDS>;
diff --git a/types/views/tx.ts b/types/views/tx.ts
index 21800d80e0..d3a30adcc5 100644
--- a/types/views/tx.ts
+++ b/types/views/tx.ts
@@ -7,6 +7,8 @@ export const TX_FIELDS_IDS = [
   'tx_fee',
   'gas_fees',
   'burnt_fees',
+  'L1_status',
+  'batch',
 ] as const;
 
 export type TxFieldsId = ArrayElement<typeof TX_FIELDS_IDS>;
diff --git a/ui/address/AddressAccountHistory.tsx b/ui/address/AddressAccountHistory.tsx
index 5b7cf3aa7e..1165ee214d 100644
--- a/ui/address/AddressAccountHistory.tsx
+++ b/ui/address/AddressAccountHistory.tsx
@@ -7,6 +7,7 @@ import type { NovesHistoryFilterValue } from 'types/api/noves';
 import { NovesHistoryFilterValues } from 'types/api/noves';
 
 import getFilterValueFromQuery from 'lib/getFilterValueFromQuery';
+import useIsMounted from 'lib/hooks/useIsMounted';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { NOVES_TRANSLATE } from 'stubs/noves/NovesTranslate';
 import { generateListStub } from 'stubs/utils';
@@ -25,10 +26,13 @@ const getFilterValue = (getFilterValueFromQuery<NovesHistoryFilterValue>).bind(n
 
 type Props = {
   scrollRef?: React.RefObject<HTMLDivElement>;
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
 }
 
-const AddressAccountHistory = ({ scrollRef }: Props) => {
+const AddressAccountHistory = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
+  const isMounted = useIsMounted();
 
   const currentAddress = getQueryParamString(router.query.hash).toLowerCase();
 
@@ -39,6 +43,7 @@ const AddressAccountHistory = ({ scrollRef }: Props) => {
     pathParams: { address: currentAddress },
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: generateListStub<'noves_address_history'>(NOVES_TRANSLATE, 10, { hasNextPage: false, pageNumber: 1, pageSize: 10 }),
     },
   });
@@ -49,12 +54,16 @@ const AddressAccountHistory = ({ scrollRef }: Props) => {
     setFilterValue(newVal);
   }, [ ]);
 
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
   const actionBar = (
     <ActionBar mt={ -6 } pb={{ base: 6, md: 5 }}>
       <AccountHistoryFilter
         defaultFilter={ filterValue }
         onFilterChange={ handleFilterChange }
-        isActive={ Boolean(filterValue) }
+        hasActiveFilter={ Boolean(filterValue) }
         isLoading={ pagination.isLoading }
       />
 
diff --git a/ui/address/AddressAccountHistoryFilter.tsx b/ui/address/AddressAccountHistoryFilter.tsx
index d66519d635..b321051b27 100644
--- a/ui/address/AddressAccountHistoryFilter.tsx
+++ b/ui/address/AddressAccountHistoryFilter.tsx
@@ -1,54 +1,35 @@
-import {
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuOptionGroup,
-  MenuItemOption,
-  useDisclosure,
-} from '@chakra-ui/react';
 import React from 'react';
 
 import type { NovesHistoryFilterValue } from 'types/api/noves';
 
 import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
-import FilterButton from 'ui/shared/filters/FilterButton';
+import PopoverFilterRadio from 'ui/shared/filters/PopoverFilterRadio';
+
+const OPTIONS = [
+  { value: 'all', label: 'All' },
+  { value: 'received', label: 'Received from' },
+  { value: 'sent', label: 'Sent to' },
+];
 
 interface Props {
-  isActive: boolean;
+  hasActiveFilter: boolean;
   defaultFilter: NovesHistoryFilterValue;
   onFilterChange: (nextValue: string | Array<string>) => void;
   isLoading?: boolean;
 }
 
-const AccountHistoryFilter = ({ onFilterChange, defaultFilter, isActive, isLoading }: Props) => {
-  const { isOpen, onToggle } = useDisclosure();
+const AccountHistoryFilter = ({ onFilterChange, defaultFilter, hasActiveFilter, isLoading }: Props) => {
   const isInitialLoading = useIsInitialLoading(isLoading);
 
-  const onCloseMenu = React.useCallback(() => {
-    if (isOpen) {
-      onToggle();
-    }
-  }, [ isOpen, onToggle ]);
-
   return (
-    <Menu isOpen={ isOpen } onClose={ onCloseMenu }>
-      <MenuButton onClick={ onToggle }>
-        <FilterButton
-          isActive={ isOpen || isActive }
-          isLoading={ isInitialLoading }
-          onClick={ onToggle }
-          appliedFiltersNum={ isActive ? 1 : 0 }
-          as="div"
-        />
-      </MenuButton>
-      <MenuList zIndex={ 2 }>
-        <MenuOptionGroup defaultValue={ defaultFilter || 'all' } type="radio" onChange={ onFilterChange }>
-          <MenuItemOption value="all">All</MenuItemOption>
-          <MenuItemOption value="received">Received from</MenuItemOption>
-          <MenuItemOption value="sent">Sent to</MenuItemOption>
-        </MenuOptionGroup>
-      </MenuList>
-    </Menu>
+    <PopoverFilterRadio
+      name="account_history_filter"
+      options={ OPTIONS }
+      onChange={ onFilterChange }
+      hasActiveFilter={ hasActiveFilter }
+      isLoading={ isInitialLoading }
+      defaultValue={ defaultFilter || OPTIONS[0].value }
+    />
   );
 };
 
diff --git a/ui/address/AddressBlocksValidated.tsx b/ui/address/AddressBlocksValidated.tsx
index b72ef4776e..d102266802 100644
--- a/ui/address/AddressBlocksValidated.tsx
+++ b/ui/address/AddressBlocksValidated.tsx
@@ -8,29 +8,37 @@ import type { AddressBlocksValidatedResponse } from 'types/api/address';
 
 import config from 'configs/app';
 import { getResourceKey } from 'lib/api/useApiQuery';
+import useIsMounted from 'lib/hooks/useIsMounted';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import { currencyUnits } from 'lib/units';
 import { BLOCK } from 'stubs/block';
 import { generateListStub } from 'stubs/utils';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
-import SocketAlert from 'ui/shared/SocketAlert';
+import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
 import AddressBlocksValidatedListItem from './blocksValidated/AddressBlocksValidatedListItem';
 import AddressBlocksValidatedTableItem from './blocksValidated/AddressBlocksValidatedTableItem';
 
+const OVERLOAD_COUNT = 75;
+
 interface Props {
   scrollRef?: React.RefObject<HTMLDivElement>;
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
 }
 
-const AddressBlocksValidated = ({ scrollRef }: Props) => {
-  const [ socketAlert, setSocketAlert ] = React.useState(false);
+const AddressBlocksValidated = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
+  const [ socketAlert, setSocketAlert ] = React.useState('');
+  const [ newItemsCount, setNewItemsCount ] = React.useState(0);
+
   const queryClient = useQueryClient();
   const router = useRouter();
+  const isMounted = useIsMounted();
 
   const addressHash = String(router.query.hash);
   const query = useQueryWithPages({
@@ -38,6 +46,7 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
     pathParams: { hash: addressHash },
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_blocks_validated'>(
         BLOCK,
         50,
@@ -52,11 +61,11 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
   });
 
   const handleSocketError = React.useCallback(() => {
-    setSocketAlert(true);
+    setSocketAlert('An error has occurred while fetching new blocks. Please refresh the page to load new blocks.');
   }, []);
 
   const handleNewSocketMessage: SocketMessage.NewBlock['handler'] = React.useCallback((payload) => {
-    setSocketAlert(false);
+    setSocketAlert('');
 
     queryClient.setQueryData(
       getResourceKey('address_blocks_validated', { pathParams: { hash: addressHash } }),
@@ -65,6 +74,11 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
           return;
         }
 
+        if (prevData.items.length >= OVERLOAD_COUNT) {
+          setNewItemsCount(prev => prev + 1);
+          return prevData;
+        }
+
         return {
           ...prevData,
           items: [ payload.block, ...prevData.items ],
@@ -84,22 +98,32 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
     handler: handleNewSocketMessage,
   });
 
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
   const content = query.data?.items ? (
     <>
-      { socketAlert && <SocketAlert mb={ 6 }/> }
       <Hide below="lg" ssr={ false }>
-        <Table variant="simple" size="sm">
-          <Thead top={ query.pagination.isVisible ? 80 : 0 }>
+        <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }}>
+          <Thead top={ query.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }>
             <Tr>
-              <Th width="17%">Block</Th>
-              <Th width="17%">Age</Th>
-              <Th width="16%">Txn</Th>
-              <Th width="25%">Gas used</Th>
-              { !config.UI.views.block.hiddenFields?.total_reward &&
-              <Th width="25%" isNumeric>Reward { currencyUnits.ether }</Th> }
+              <Th>Block</Th>
+              <Th>Age</Th>
+              <Th>Txn</Th>
+              <Th>Gas used</Th>
+              { !config.UI.views.block.hiddenFields?.total_reward && !config.features.rollup.isEnabled &&
+              <Th isNumeric>Reward { currencyUnits.ether }</Th> }
             </Tr>
           </Thead>
           <Tbody>
+            <SocketNewItemsNotice.Desktop
+              url={ window.location.href }
+              num={ newItemsCount }
+              alert={ socketAlert }
+              type="block"
+              isLoading={ query.isPlaceholderData }
+            />
             { query.data.items.map((item, index) => (
               <AddressBlocksValidatedTableItem
                 key={ item.height + (query.isPlaceholderData ? String(index) : '') }
@@ -112,6 +136,15 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
         </Table>
       </Hide>
       <Show below="lg" ssr={ false }>
+        { query.pagination.page === 1 && (
+          <SocketNewItemsNotice.Mobile
+            url={ window.location.href }
+            num={ newItemsCount }
+            alert={ socketAlert }
+            type="block"
+            isLoading={ query.isPlaceholderData }
+          />
+        ) }
         { query.data.items.map((item, index) => (
           <AddressBlocksValidatedListItem
             key={ item.height + (query.isPlaceholderData ? String(index) : '') }
diff --git a/ui/address/AddressCoinBalance.pw.tsx b/ui/address/AddressCoinBalance.pw.tsx
index 95bcf16aa8..3950798784 100644
--- a/ui/address/AddressCoinBalance.pw.tsx
+++ b/ui/address/AddressCoinBalance.pw.tsx
@@ -1,41 +1,25 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as balanceHistoryMock from 'mocks/address/coinBalanceHistory';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import AddressCoinBalance from './AddressCoinBalance';
 
-const addressHash = 'hash';
-const BALANCE_HISTORY_API_URL = buildApiUrl('address_coin_balance', { hash: addressHash });
-const BALANCE_HISTORY_CHART_API_URL = buildApiUrl('address_coin_balance_chart', { hash: addressHash });
+const addressHash = '0x1234';
 const hooksConfig = {
   router: {
     query: { hash: addressHash },
   },
 };
 
-test('base view +@dark-mode +@mobile', async({ mount, page }) => {
-  await page.route(BALANCE_HISTORY_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(balanceHistoryMock.baseResponse),
-  }));
-  await page.route(BALANCE_HISTORY_CHART_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(balanceHistoryMock.chartResponse),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <AddressCoinBalance/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('base view +@dark-mode +@mobile', async({ render, page, mockApiResponse }) => {
+  await mockApiResponse('address_coin_balance', balanceHistoryMock.baseResponse, { pathParams: { hash: addressHash } });
+  await mockApiResponse('address_coin_balance_chart', balanceHistoryMock.chartResponse, { pathParams: { hash: addressHash } });
+  const component = await render(<AddressCoinBalance/>, { hooksConfig });
   await page.waitForFunction(() => {
     return document.querySelector('path[data-name="chart-Balances-small"]')?.getAttribute('opacity') === '1';
   });
+  await page.mouse.move(100, 100);
   await page.mouse.move(240, 100);
-
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/address/AddressCoinBalance.tsx b/ui/address/AddressCoinBalance.tsx
index 1f109cf366..ce5b5e9389 100644
--- a/ui/address/AddressCoinBalance.tsx
+++ b/ui/address/AddressCoinBalance.tsx
@@ -6,6 +6,7 @@ import type { SocketMessage } from 'lib/socket/types';
 import type { AddressCoinBalanceHistoryResponse } from 'types/api/address';
 
 import { getResourceKey } from 'lib/api/useApiQuery';
+import useIsMounted from 'lib/hooks/useIsMounted';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
@@ -17,10 +18,17 @@ import SocketAlert from 'ui/shared/SocketAlert';
 import AddressCoinBalanceChart from './coinBalance/AddressCoinBalanceChart';
 import AddressCoinBalanceHistory from './coinBalance/AddressCoinBalanceHistory';
 
-const AddressCoinBalance = () => {
+type Props = {
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
+}
+
+const AddressCoinBalance = ({ shouldRender = true, isQueryEnabled = true }: Props) => {
   const [ socketAlert, setSocketAlert ] = React.useState(false);
   const queryClient = useQueryClient();
   const router = useRouter();
+  const isMounted = useIsMounted();
+
   const scrollRef = React.useRef<HTMLDivElement>(null);
 
   const addressHash = getQueryParamString(router.query.hash);
@@ -29,6 +37,7 @@ const AddressCoinBalance = () => {
     pathParams: { hash: addressHash },
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_coin_balance'>(
         ADDRESS_COIN_BALANCE,
         50,
@@ -78,6 +87,10 @@ const AddressCoinBalance = () => {
     handler: handleNewSocketMessage,
   });
 
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
   return (
     <>
       { socketAlert && <SocketAlert mb={ 6 }/> }
diff --git a/ui/address/AddressContract.pw.tsx b/ui/address/AddressContract.pw.tsx
new file mode 100644
index 0000000000..5374c4ec21
--- /dev/null
+++ b/ui/address/AddressContract.pw.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+
+import * as addressMock from 'mocks/address/address';
+import * as contractInfoMock from 'mocks/contract/info';
+import * as contractMethodsMock from 'mocks/contract/methods';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import * as socketServer from 'playwright/fixtures/socketServer';
+import { test, expect } from 'playwright/lib';
+
+import AddressContract from './AddressContract.pwstory';
+
+const hash = addressMock.contract.hash;
+
+test.beforeEach(async({ mockApiResponse }) => {
+  await mockApiResponse('address', addressMock.contract, { pathParams: { hash } });
+  await mockApiResponse(
+    'contract',
+    { ...contractInfoMock.verified, abi: [ ...contractMethodsMock.read, ...contractMethodsMock.write ] },
+    { pathParams: { hash } },
+  );
+});
+
+test.describe('ABI functionality', () => {
+  test('read', async({ render, createSocket }) => {
+    const hooksConfig = {
+      router: {
+        query: { hash, tab: 'read_contract' },
+      },
+    };
+    const component = await render(<AddressContract/>, { hooksConfig }, { withSocket: true });
+    const socket = await createSocket();
+    await socketServer.joinChannel(socket, 'addresses:' + addressMock.contract.hash.toLowerCase());
+
+    await expect(component.getByRole('button', { name: 'Connect wallet' })).toBeVisible();
+    await component.getByText('FLASHLOAN_PREMIUM_TOTAL').click();
+    await expect(component.getByRole('button', { name: 'Read' })).toBeVisible();
+  });
+
+  test('read, no wallet client', async({ render, createSocket, mockEnvs }) => {
+    const hooksConfig = {
+      router: {
+        query: { hash, tab: 'read_contract' },
+      },
+    };
+    await mockEnvs(ENVS_MAP.noWalletClient);
+    const component = await render(<AddressContract/>, { hooksConfig }, { withSocket: true });
+    const socket = await createSocket();
+    await socketServer.joinChannel(socket, 'addresses:' + addressMock.contract.hash.toLowerCase());
+
+    await expect(component.getByRole('button', { name: 'Connect wallet' })).toBeHidden();
+    await component.getByText('FLASHLOAN_PREMIUM_TOTAL').click();
+    await expect(component.getByRole('button', { name: 'Read' })).toBeVisible();
+  });
+
+  test('write', async({ render, createSocket }) => {
+    const hooksConfig = {
+      router: {
+        query: { hash, tab: 'write_contract' },
+      },
+    };
+    const component = await render(<AddressContract/>, { hooksConfig }, { withSocket: true });
+    const socket = await createSocket();
+    await socketServer.joinChannel(socket, 'addresses:' + addressMock.contract.hash.toLowerCase());
+
+    await expect(component.getByRole('button', { name: 'Connect wallet' })).toBeVisible();
+    await component.getByText('setReserveInterestRateStrategyAddress').click();
+    await expect(component.getByLabel('2.').getByRole('button', { name: 'Simulate' })).toBeEnabled();
+    await expect(component.getByLabel('2.').getByRole('button', { name: 'Write' })).toBeEnabled();
+
+    await component.getByText('pause').click();
+    await expect(component.getByLabel('5.').getByRole('button', { name: 'Simulate' })).toBeHidden();
+    await expect(component.getByLabel('5.').getByRole('button', { name: 'Write' })).toBeEnabled();
+  });
+
+  test('write, no wallet client', async({ render, createSocket, mockEnvs }) => {
+    const hooksConfig = {
+      router: {
+        query: { hash, tab: 'write_contract' },
+      },
+    };
+    await mockEnvs(ENVS_MAP.noWalletClient);
+
+    const component = await render(<AddressContract/>, { hooksConfig }, { withSocket: true });
+    const socket = await createSocket();
+    await socketServer.joinChannel(socket, 'addresses:' + addressMock.contract.hash.toLowerCase());
+
+    await expect(component.getByRole('button', { name: 'Connect wallet' })).toBeHidden();
+    await component.getByText('setReserveInterestRateStrategyAddress').click();
+    await expect(component.getByLabel('2.').getByRole('button', { name: 'Simulate' })).toBeEnabled();
+    await expect(component.getByLabel('2.').getByRole('button', { name: 'Write' })).toBeDisabled();
+
+    await component.getByText('pause').click();
+    await expect(component.getByLabel('5.').getByRole('button', { name: 'Simulate' })).toBeHidden();
+    await expect(component.getByLabel('5.').getByRole('button', { name: 'Write' })).toBeDisabled();
+  });
+});
diff --git a/ui/address/AddressContract.pwstory.tsx b/ui/address/AddressContract.pwstory.tsx
new file mode 100644
index 0000000000..c558dd9ca2
--- /dev/null
+++ b/ui/address/AddressContract.pwstory.tsx
@@ -0,0 +1,18 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import useContractTabs from 'lib/hooks/useContractTabs';
+import getQueryParamString from 'lib/router/getQueryParamString';
+
+import AddressContract from './AddressContract';
+
+const AddressContractPwStory = () => {
+  const router = useRouter();
+  const hash = getQueryParamString(router.query.hash);
+  const addressQuery = useApiQuery('address', { pathParams: { hash } });
+  const { tabs } = useContractTabs(addressQuery.data, false);
+  return <AddressContract tabs={ tabs } shouldRender={ true } isLoading={ false }/>;
+};
+
+export default AddressContractPwStory;
diff --git a/ui/address/AddressContract.tsx b/ui/address/AddressContract.tsx
index a2dd58db5f..a349532a7a 100644
--- a/ui/address/AddressContract.tsx
+++ b/ui/address/AddressContract.tsx
@@ -3,29 +3,24 @@ import React from 'react';
 import type { RoutedSubTab } from 'ui/shared/Tabs/types';
 
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
-import Web3ModalProvider from 'ui/shared/Web3ModalProvider';
 
 interface Props {
   tabs: Array<RoutedSubTab>;
-  addressHash?: string;
+  isLoading: boolean;
+  shouldRender?: boolean;
 }
 
 const TAB_LIST_PROPS = {
   columnGap: 3,
 };
 
-const AddressContract = ({ tabs }: Props) => {
-  const fallback = React.useCallback(() => {
-    const noProviderTabs = tabs.filter(({ id }) => id === 'contact_code' || id.startsWith('read_'));
-    return (
-      <RoutedTabs tabs={ noProviderTabs } variant="outline" colorScheme="gray" size="sm" tabListProps={ TAB_LIST_PROPS }/>
-    );
-  }, [ tabs ]);
+const AddressContract = ({ tabs, isLoading, shouldRender }: Props) => {
+  if (!shouldRender) {
+    return null;
+  }
 
   return (
-    <Web3ModalProvider fallback={ fallback }>
-      <RoutedTabs tabs={ tabs } variant="outline" colorScheme="gray" size="sm" tabListProps={ TAB_LIST_PROPS }/>
-    </Web3ModalProvider>
+    <RoutedTabs tabs={ tabs } variant="outline" colorScheme="gray" size="sm" tabListProps={ TAB_LIST_PROPS } isLoading={ isLoading }/>
   );
 };
 
diff --git a/ui/address/AddressCsvExportLink.tsx b/ui/address/AddressCsvExportLink.tsx
index 6ef1d2dd0a..313de665c8 100644
--- a/ui/address/AddressCsvExportLink.tsx
+++ b/ui/address/AddressCsvExportLink.tsx
@@ -9,7 +9,7 @@ import config from 'configs/app';
 import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 
 interface Props {
   address: string;
diff --git a/ui/address/AddressDetails.pw.tsx b/ui/address/AddressDetails.pw.tsx
index 310c175141..7d49ae723d 100644
--- a/ui/address/AddressDetails.pw.tsx
+++ b/ui/address/AddressDetails.pw.tsx
@@ -1,121 +1,94 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import type { WalletProvider } from 'types/web3';
-
 import * as addressMock from 'mocks/address/address';
 import * as countersMock from 'mocks/address/counters';
 import * as tokensMock from 'mocks/address/tokens';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { test, expect, devices } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import AddressDetails from './AddressDetails';
 import MockAddressPage from './testUtils/MockAddressPage';
 import type { AddressQuery } from './utils/useAddressQuery';
 
 const ADDRESS_HASH = addressMock.hash;
-const API_URL_ADDRESS = buildApiUrl('address', { hash: ADDRESS_HASH });
-const API_URL_COUNTERS = buildApiUrl('address_counters', { hash: ADDRESS_HASH });
-const API_URL_TOKENS_ERC20 = buildApiUrl('address_tokens', { hash: ADDRESS_HASH }) + '?type=ERC-20';
-const API_URL_TOKENS_ERC721 = buildApiUrl('address_tokens', { hash: ADDRESS_HASH }) + '?type=ERC-721';
-const API_URL_TOKENS_ER1155 = buildApiUrl('address_tokens', { hash: ADDRESS_HASH }) + '?type=ERC-1155';
-const API_URL_TOKENS_ERC404 = buildApiUrl('address_tokens', { hash: ADDRESS_HASH }) + '?type=ERC-404';
 const hooksConfig = {
   router: {
     query: { hash: ADDRESS_HASH },
   },
 };
 
-test('contract +@mobile', async({ mount, page }) => {
-  await page.route(API_URL_ADDRESS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(addressMock.contract),
-  }));
-  await page.route(API_URL_COUNTERS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(countersMock.forContract),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <AddressDetails addressQuery={{ data: addressMock.contract } as AddressQuery}/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+  test('contract', async({ render, mockApiResponse, page }) => {
+    await mockApiResponse('address', addressMock.contract, { pathParams: { hash: ADDRESS_HASH } });
+    await mockApiResponse('address_counters', countersMock.forContract, { pathParams: { hash: ADDRESS_HASH } });
+
+    const component = await render(<AddressDetails addressQuery={{ data: addressMock.contract } as AddressQuery}/>, { hooksConfig });
+
+    await expect(component).toHaveScreenshot({
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
+    });
+  });
+
+  test('validator', async({ render, page, mockApiResponse }) => {
+    await mockApiResponse('address', addressMock.validator, { pathParams: { hash: ADDRESS_HASH } });
+    await mockApiResponse('address_counters', countersMock.forValidator, { pathParams: { hash: ADDRESS_HASH } });
+
+    const component = await render(<AddressDetails addressQuery={{ data: addressMock.validator } as AddressQuery}/>, { hooksConfig });
+
+    await expect(component).toHaveScreenshot({
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
+    });
   });
+
 });
 
-test('token', async({ mount, page }) => {
-  await page.route(API_URL_ADDRESS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(addressMock.token),
-  }));
-  await page.route(API_URL_COUNTERS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(countersMock.forToken),
-  }));
-  await page.route(API_URL_TOKENS_ERC20, async(route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(tokensMock.erc20List),
-  }), { times: 1 });
-  await page.route(API_URL_TOKENS_ERC721, async(route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(tokensMock.erc721List),
-  }), { times: 1 });
-  await page.route(API_URL_TOKENS_ER1155, async(route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(tokensMock.erc1155List),
-  }), { times: 1 });
-  await page.route(API_URL_TOKENS_ERC404, async(route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(tokensMock.erc404List),
-  }), { times: 1 });
-
-  await page.evaluate(() => {
-    window.ethereum = {
-      providers: [ { isMetaMask: true, _events: {} } ],
-    } as WalletProvider;
+test('contract', async({ render, page, mockApiResponse }) => {
+  await mockApiResponse('address', addressMock.contract, { pathParams: { hash: ADDRESS_HASH } });
+  await mockApiResponse('address_counters', countersMock.forContract, { pathParams: { hash: ADDRESS_HASH } });
+
+  const component = await render(<AddressDetails addressQuery={{ data: addressMock.contract } as AddressQuery}/>, { hooksConfig });
+
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
+});
 
-  const component = await mount(
-    <TestApp>
-      <MockAddressPage>
-        <AddressDetails addressQuery={{ data: addressMock.token } as AddressQuery}/>
-      </MockAddressPage>
-    </TestApp>,
+// there's an unexpected timeout occurred in this test
+test.fixme('token', async({ render, mockApiResponse, injectMetaMaskProvider, page }) => {
+  await mockApiResponse('address', addressMock.token, { pathParams: { hash: ADDRESS_HASH } });
+  await mockApiResponse('address_counters', countersMock.forToken, { pathParams: { hash: ADDRESS_HASH } });
+  await mockApiResponse('address_tokens', tokensMock.erc20List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-20' }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc721List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-721' }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc1155List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-1155' }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc404List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' }, times: 1 });
+  await injectMetaMaskProvider();
+
+  const component = await render(
+    <MockAddressPage>
+      <AddressDetails addressQuery={{ data: addressMock.token } as AddressQuery}/>
+    </MockAddressPage>,
     { hooksConfig },
   );
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-test('validator +@mobile', async({ mount, page }) => {
-  await page.route(API_URL_ADDRESS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(addressMock.validator),
-  }));
-  await page.route(API_URL_COUNTERS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(countersMock.forValidator),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <AddressDetails addressQuery={{ data: addressMock.validator } as AddressQuery}/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('validator', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse('address', addressMock.validator, { pathParams: { hash: ADDRESS_HASH } });
+  await mockApiResponse('address_counters', countersMock.forValidator, { pathParams: { hash: ADDRESS_HASH } });
+
+  const component = await render(<AddressDetails addressQuery={{ data: addressMock.validator } as AddressQuery}/>, { hooksConfig });
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
diff --git a/ui/address/AddressDetails.tsx b/ui/address/AddressDetails.tsx
index 662fd86a70..e781f5b519 100644
--- a/ui/address/AddressDetails.tsx
+++ b/ui/address/AddressDetails.tsx
@@ -2,20 +2,26 @@ import { Box, Text, Grid } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import config from 'configs/app';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import getNetworkValidationActionText from 'lib/networks/getNetworkValidationActionText';
+import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import AddressCounterItem from 'ui/address/details/AddressCounterItem';
 import ServiceDegradationWarning from 'ui/shared/alerts/ServiceDegradationWarning';
 import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 
 import AddressBalance from './details/AddressBalance';
+import AddressImplementations from './details/AddressImplementations';
 import AddressNameInfo from './details/AddressNameInfo';
+import AddressNetWorth from './details/AddressNetWorth';
+import AddressSaveOnGas from './details/AddressSaveOnGas';
 import TokenSelect from './tokenSelect/TokenSelect';
 import useAddressCountersQuery from './utils/useAddressCountersQuery';
 import type { AddressQuery } from './utils/useAddressQuery';
@@ -45,8 +51,7 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
   const error404Data = React.useMemo(() => ({
     hash: addressHash || '',
     is_contract: false,
-    implementation_name: null,
-    implementation_address: null,
+    implementations: null,
     token: null,
     watchlist_address_id: null,
     watchlist_names: null,
@@ -87,50 +92,69 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
         templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden"
       >
         <AddressNameInfo data={ data } isLoading={ addressQuery.isPlaceholderData }/>
+
         { data.is_contract && data.creation_tx_hash && data.creator_address_hash && (
-          <DetailsInfoItem
-            title="Creator"
-            hint="Transaction and address of creation"
-            isLoading={ addressQuery.isPlaceholderData }
-          >
-            <AddressEntity
-              address={{ hash: data.creator_address_hash }}
-              truncation="constant"
-              noIcon
-            />
-            <Text whiteSpace="pre"> at txn </Text>
-            <TxEntity hash={ data.creation_tx_hash } truncation="constant" noIcon noCopy={ false }/>
-          </DetailsInfoItem>
-        ) }
-        { data.is_contract && data.implementation_address && (
-          <DetailsInfoItem
-            title="Implementation"
-            hint="Implementation address of the proxy contract"
-            columnGap={ 1 }
-          >
-            <AddressEntity
-              address={{ hash: data.implementation_address, name: data.implementation_name, is_contract: true }}
+          <>
+            <DetailsInfoItem.Label
+              hint="Transaction and address of creation"
               isLoading={ addressQuery.isPlaceholderData }
-              noIcon
-            />
-          </DetailsInfoItem>
+            >
+              Creator
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value>
+              <AddressEntity
+                address={{ hash: data.creator_address_hash }}
+                truncation="constant"
+                noIcon
+              />
+              <Text whiteSpace="pre"> at txn </Text>
+              <TxEntity hash={ data.creation_tx_hash } truncation="constant" noIcon noCopy={ false }/>
+            </DetailsInfoItem.Value>
+          </>
         ) }
+        { data.is_contract && data.implementations && data.implementations?.length > 0 && (
+          <AddressImplementations
+            data={ data.implementations }
+            isLoading={ addressQuery.isPlaceholderData }
+          />
+        ) }
+
         <AddressBalance data={ data } isLoading={ addressQuery.isPlaceholderData }/>
+
         { data.has_tokens && (
-          <DetailsInfoItem
-            title="Tokens"
-            hint="All tokens in the account and total value"
-            alignSelf="center"
-            py={ 0 }
-          >
-            { addressQuery.data ? <TokenSelect onClick={ handleCounterItemClick }/> : <Box py="6px">0</Box> }
-          </DetailsInfoItem>
+          <>
+            <DetailsInfoItem.Label
+              hint="All tokens in the account and total value"
+            >
+              Tokens
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value py={ addressQuery.data ? 0 : undefined }>
+              { addressQuery.data ? <TokenSelect onClick={ handleCounterItemClick }/> : <Box>0</Box> }
+            </DetailsInfoItem.Value>
+          </>
         ) }
-        <DetailsInfoItem
-          title="Transactions"
+        { (config.features.multichainButton.isEnabled || (data.exchange_rate && data.has_tokens)) && (
+          <>
+            <DetailsInfoItem.Label
+              hint="Total net worth in USD of all tokens for the address"
+              isLoading={ addressQuery.isPlaceholderData }
+            >
+              Net worth
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value alignSelf="center" py={ 0 }>
+              <AddressNetWorth addressData={ addressQuery.data } addressHash={ addressHash } isLoading={ addressQuery.isPlaceholderData }/>
+            </DetailsInfoItem.Value>
+          </>
+        )
+        }
+
+        <DetailsInfoItem.Label
           hint="Number of transactions related to this address"
           isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
         >
+          Transactions
+        </DetailsInfoItem.Label>
+        <DetailsInfoItem.Value>
           { addressQuery.data ? (
             <AddressCounterItem
               prop="transactions_count"
@@ -142,78 +166,103 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
             />
           ) :
             0 }
-        </DetailsInfoItem>
+        </DetailsInfoItem.Value>
+
         { data.has_token_transfers && (
-          <DetailsInfoItem
-            title="Transfers"
-            hint="Number of transfers to/from this address"
-            isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
-          >
-            { addressQuery.data ? (
-              <AddressCounterItem
-                prop="token_transfers_count"
-                query={ countersQuery }
-                address={ data.hash }
-                onClick={ handleCounterItemClick }
-                isAddressQueryLoading={ addressQuery.isPlaceholderData }
-                isDegradedData={ addressQuery.isDegradedData }
-              />
-            ) :
-              0 }
-          </DetailsInfoItem>
+          <>
+            <DetailsInfoItem.Label
+              hint="Number of transfers to/from this address"
+              isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
+            >
+              Transfers
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value>
+              { addressQuery.data ? (
+                <AddressCounterItem
+                  prop="token_transfers_count"
+                  query={ countersQuery }
+                  address={ data.hash }
+                  onClick={ handleCounterItemClick }
+                  isAddressQueryLoading={ addressQuery.isPlaceholderData }
+                  isDegradedData={ addressQuery.isDegradedData }
+                />
+              ) :
+                0 }
+            </DetailsInfoItem.Value>
+          </>
         ) }
+
         { countersQuery.data?.gas_usage_count && (
-          <DetailsInfoItem
-            title="Gas used"
-            hint="Gas used by the address"
-            isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
-          >
-            { addressQuery.data ? (
-              <AddressCounterItem
-                prop="gas_usage_count"
-                query={ countersQuery }
-                address={ data.hash }
-                onClick={ handleCounterItemClick }
-                isAddressQueryLoading={ addressQuery.isPlaceholderData }
-                isDegradedData={ addressQuery.isDegradedData }
-              />
-            ) :
-              0 }
-          </DetailsInfoItem>
+          <>
+            <DetailsInfoItem.Label
+              hint="Gas used by the address"
+              isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
+            >
+              Gas used
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value>
+              { addressQuery.data ? (
+                <AddressCounterItem
+                  prop="gas_usage_count"
+                  query={ countersQuery }
+                  address={ data.hash }
+                  onClick={ handleCounterItemClick }
+                  isAddressQueryLoading={ addressQuery.isPlaceholderData }
+                  isDegradedData={ addressQuery.isDegradedData }
+                />
+              ) :
+                0 }
+              { !countersQuery.isPlaceholderData && countersQuery.data?.gas_usage_count && (
+                <AddressSaveOnGas
+                  gasUsed={ countersQuery.data.gas_usage_count }
+                  address={ data.hash }
+                />
+              ) }
+            </DetailsInfoItem.Value>
+          </>
         ) }
+
         { data.has_validated_blocks && (
-          <DetailsInfoItem
-            title="Blocks validated"
-            hint="Number of blocks validated by this validator"
-            isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
-          >
-            { addressQuery.data ? (
-              <AddressCounterItem
-                prop="validations_count"
-                query={ countersQuery }
-                address={ data.hash }
-                onClick={ handleCounterItemClick }
-                isAddressQueryLoading={ addressQuery.isPlaceholderData }
-                isDegradedData={ addressQuery.isDegradedData }
-              />
-            ) :
-              0 }
-          </DetailsInfoItem>
+          <>
+            <DetailsInfoItem.Label
+              hint={ `Number of blocks ${ getNetworkValidationActionText() } by this ${ getNetworkValidatorTitle() }` }
+              isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
+            >
+              { `Blocks ${ getNetworkValidationActionText() }` }
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value>
+              { addressQuery.data ? (
+                <AddressCounterItem
+                  prop="validations_count"
+                  query={ countersQuery }
+                  address={ data.hash }
+                  onClick={ handleCounterItemClick }
+                  isAddressQueryLoading={ addressQuery.isPlaceholderData }
+                  isDegradedData={ addressQuery.isDegradedData }
+                />
+              ) :
+                0 }
+            </DetailsInfoItem.Value>
+          </>
         ) }
+
         { data.block_number_balance_updated_at && (
-          <DetailsInfoItem
-            title="Last balance update"
-            hint="Block number in which the address was updated"
-            alignSelf="center"
-            py={{ base: '2px', lg: 1 }}
-            isLoading={ addressQuery.isPlaceholderData }
-          >
-            <BlockEntity
-              number={ data.block_number_balance_updated_at }
+          <>
+            <DetailsInfoItem.Label
+              hint="Block number in which the address was updated"
               isLoading={ addressQuery.isPlaceholderData }
-            />
-          </DetailsInfoItem>
+            >
+              Last balance update
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value>
+              <BlockEntity
+                number={ data.block_number_balance_updated_at }
+                isLoading={ addressQuery.isPlaceholderData }
+              />
+            </DetailsInfoItem.Value>
+          </>
         ) }
+
         <DetailsSponsoredItem isLoading={ addressQuery.isPlaceholderData }/>
       </Grid>
     </>
diff --git a/ui/address/AddressInternalTxs.pw.tsx b/ui/address/AddressInternalTxs.pw.tsx
index 38d8e6dab5..cce88f4c99 100644
--- a/ui/address/AddressInternalTxs.pw.tsx
+++ b/ui/address/AddressInternalTxs.pw.tsx
@@ -1,34 +1,25 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as internalTxsMock from 'mocks/txs/internalTxs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import AddressInternalTxs from './AddressInternalTxs';
 
 const ADDRESS_HASH = internalTxsMock.base.from.hash;
-const API_URL_TX_INTERNALS = buildApiUrl('address_internal_txs', { hash: ADDRESS_HASH });
 const hooksConfig = {
   router: {
     query: { hash: ADDRESS_HASH },
   },
 };
 
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(API_URL_TX_INTERNALS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(internalTxsMock.baseResponse),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address_internal_txs', internalTxsMock.baseResponse, { pathParams: { hash: ADDRESS_HASH } });
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <AddressInternalTxs/>
-    </TestApp>,
+    </Box>,
     { hooksConfig },
   );
-
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/address/AddressInternalTxs.tsx b/ui/address/AddressInternalTxs.tsx
index d4d302e39b..f870a237ba 100644
--- a/ui/address/AddressInternalTxs.tsx
+++ b/ui/address/AddressInternalTxs.tsx
@@ -6,6 +6,7 @@ import type { AddressFromToFilter } from 'types/api/address';
 import { AddressFromToFilterValues } from 'types/api/address';
 
 import getFilterValueFromQuery from 'lib/getFilterValueFromQuery';
+import useIsMounted from 'lib/hooks/useIsMounted';
 import { apos } from 'lib/html-entities';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { INTERNAL_TX } from 'stubs/internalTx';
@@ -22,8 +23,15 @@ import AddressIntTxsList from './internals/AddressIntTxsList';
 
 const getFilterValue = (getFilterValueFromQuery<AddressFromToFilter>).bind(null, AddressFromToFilterValues);
 
-const AddressInternalTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>}) => {
+type Props = {
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
+}
+const AddressInternalTxs = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
+  const isMounted = useIsMounted();
+
   const [ filterValue, setFilterValue ] = React.useState<AddressFromToFilter>(getFilterValue(router.query.filter));
 
   const hash = getQueryParamString(router.query.hash);
@@ -34,6 +42,7 @@ const AddressInternalTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
     filters: { filter: filterValue },
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_internal_txs'>(
         INTERNAL_TX,
         50,
@@ -55,6 +64,10 @@ const AddressInternalTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
     onFilterChange({ filter: newVal });
   }, [ onFilterChange ]);
 
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
   const content = data?.items ? (
     <>
       <Show below="lg" ssr={ false }>
@@ -71,7 +84,7 @@ const AddressInternalTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
       <AddressTxsFilter
         defaultFilter={ filterValue }
         onFilterChange={ handleFilterChange }
-        isActive={ Boolean(filterValue) }
+        hasActiveFilter={ Boolean(filterValue) }
         isLoading={ pagination.isLoading }
       />
       <AddressCsvExportLink
diff --git a/ui/address/AddressLogs.tsx b/ui/address/AddressLogs.tsx
index 5de923c0fd..be1db07c6b 100644
--- a/ui/address/AddressLogs.tsx
+++ b/ui/address/AddressLogs.tsx
@@ -1,6 +1,7 @@
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import useIsMounted from 'lib/hooks/useIsMounted';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { LOG } from 'stubs/log';
 import { generateListStub } from 'stubs/utils';
@@ -12,8 +13,15 @@ import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
 import AddressCsvExportLink from './AddressCsvExportLink';
 
-const AddressLogs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>}) => {
+type Props ={
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
+}
+
+const AddressLogs = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
+  const isMounted = useIsMounted();
 
   const hash = getQueryParamString(router.query.hash);
   const { data, isPlaceholderData, isError, pagination } = useQueryWithPages({
@@ -21,6 +29,7 @@ const AddressLogs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>
     pathParams: { hash },
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_logs'>(LOG, 3, { next_page_params: {
         block_number: 9005750,
         index: 42,
@@ -41,6 +50,10 @@ const AddressLogs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>
     </ActionBar>
   );
 
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
   const content = data?.items ? data.items.map((item, index) => <LogItem key={ index } { ...item } type="address" isLoading={ isPlaceholderData }/>) : null;
 
   return (
diff --git a/ui/address/AddressMud.tsx b/ui/address/AddressMud.tsx
new file mode 100644
index 0000000000..1848571125
--- /dev/null
+++ b/ui/address/AddressMud.tsx
@@ -0,0 +1,37 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import useIsMounted from 'lib/hooks/useIsMounted';
+
+import AddressMudRecord from './mud/AddressMudRecord';
+import AddressMudTable from './mud/AddressMudTable';
+import AddressMudTables from './mud/AddressMudTables';
+
+type Props ={
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
+}
+
+const AddressMud = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
+  const isMounted = useIsMounted();
+  const router = useRouter();
+  const tableId = router.query.table_id?.toString();
+  const recordId = router.query.record_id?.toString();
+
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
+  if (tableId && recordId) {
+    return <AddressMudRecord tableId={ tableId } recordId={ recordId } isQueryEnabled={ isQueryEnabled } scrollRef={ scrollRef }/>;
+  }
+
+  if (tableId) {
+    return <AddressMudTable tableId={ tableId } scrollRef={ scrollRef } isQueryEnabled={ isQueryEnabled }/>;
+  }
+
+  return <AddressMudTables scrollRef={ scrollRef } isQueryEnabled={ isQueryEnabled }/>;
+};
+
+export default AddressMud;
diff --git a/ui/address/AddressTokenTransfers.pw.tsx b/ui/address/AddressTokenTransfers.pw.tsx
index 3befb96359..f1cd2ffb00 100644
--- a/ui/address/AddressTokenTransfers.pw.tsx
+++ b/ui/address/AddressTokenTransfers.pw.tsx
@@ -1,126 +1,110 @@
 import { Box } from '@chakra-ui/react';
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
 import * as socketServer from 'playwright/fixtures/socketServer';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect, devices } from 'playwright/lib';
 
 import AddressTokenTransfers from './AddressTokenTransfers';
 
 const CURRENT_ADDRESS = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859';
-
-const API_URL = buildApiUrl('address_token_transfers', { hash: CURRENT_ADDRESS }) +
- '?token=0x1189a607CEac2f0E14867de4EB15b15C9FFB5859';
-
+const TOKEN_HASH = '0x1189a607CEac2f0E14867de4EB15b15C9FFB5859';
 const hooksConfig = {
   router: {
-    query: { hash: CURRENT_ADDRESS, token: '0x1189a607CEac2f0E14867de4EB15b15C9FFB5859' },
+    query: { hash: CURRENT_ADDRESS, token: TOKEN_HASH },
   },
 };
 
-const test = base.extend<socketServer.SocketServerFixture>({
-  createSocket: socketServer.createSocket,
-});
-
 // FIXME
 // test cases which use socket cannot run in parallel since the socket server always run on the same port
 test.describe.configure({ mode: 'serial' });
 
-test('with token filter and pagination', async({ mount, page }) => {
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
-  }));
+const tokenTransfersWithPagination = {
+  items: [ tokenTransferMock.erc1155A ],
+  next_page_params: { block_number: 1, index: 1, items_count: 1 },
+};
+const tokenTransfersWoPagination = {
+  items: [ tokenTransferMock.erc1155A ],
+  next_page_params: null,
+};
 
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+test('with token filter and pagination', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
+    pathParams: { hash: CURRENT_ADDRESS },
+    queryParams: { token: TOKEN_HASH },
+  });
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <AddressTokenTransfers/>
-    </TestApp>,
+    </Box>,
     { hooksConfig },
   );
-
   await expect(component).toHaveScreenshot();
 });
 
-test('with token filter and no pagination', async({ mount, page }) => {
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ] }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+test('with token filter and no pagination', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address_token_transfers', tokenTransfersWoPagination, {
+    pathParams: { hash: CURRENT_ADDRESS },
+    queryParams: { token: TOKEN_HASH },
+  });
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <AddressTokenTransfers/>
-    </TestApp>,
+    </Box>,
     { hooksConfig },
   );
-
   await expect(component).toHaveScreenshot();
 });
 
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  test('with token filter and pagination', async({ mount, page }) => {
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <Box h={{ base: '134px', lg: 6 }}/>
+  test('with token filter and pagination', async({ render, mockApiResponse }) => {
+    await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
+      pathParams: { hash: CURRENT_ADDRESS },
+      queryParams: { token: TOKEN_HASH },
+    });
+    const component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokenTransfers/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
     );
-
     await expect(component).toHaveScreenshot();
   });
 
-  test('with token filter and no pagination', async({ mount, page }) => {
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ] }),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <Box h={{ base: '134px', lg: 6 }}/>
+  test('with token filter and no pagination', async({ render, mockApiResponse }) => {
+    await mockApiResponse('address_token_transfers', tokenTransfersWoPagination, {
+      pathParams: { hash: CURRENT_ADDRESS },
+      queryParams: { token: TOKEN_HASH },
+    });
+    const component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokenTransfers/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
     );
-
     await expect(component).toHaveScreenshot();
   });
 });
 
 test.describe('socket', () => {
-  test('without overload', async({ mount, page, createSocket }) => {
+  test('without overload', async({ render, mockApiResponse, createSocket, page }) => {
     const hooksConfigNoToken = {
       router: {
         query: { hash: CURRENT_ADDRESS },
       },
     };
-
-    const API_URL_NO_TOKEN = buildApiUrl('address_token_transfers', { hash: CURRENT_ADDRESS }) + '?type=';
-
-    await page.route(API_URL_NO_TOKEN, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
-    }));
-
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
+      pathParams: { hash: CURRENT_ADDRESS },
+      queryParams: { type: [] },
+    });
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokenTransfers/>
-      </TestApp>,
+      </Box>,
       { hooksConfig: hooksConfigNoToken },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -137,26 +121,22 @@ test.describe('socket', () => {
     expect(itemsCountNew).toBe(4);
   });
 
-  test('with overload', async({ mount, page, createSocket }) => {
+  test('with overload', async({ render, mockApiResponse, page, createSocket }) => {
     const hooksConfigNoToken = {
       router: {
         query: { hash: CURRENT_ADDRESS },
       },
     };
-
-    const API_URL_NO_TOKEN = buildApiUrl('address_token_transfers', { hash: CURRENT_ADDRESS }) + '?type=';
-
-    await page.route(API_URL_NO_TOKEN, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
-    }));
-
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
+      pathParams: { hash: CURRENT_ADDRESS },
+      queryParams: { type: [] },
+    });
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokenTransfers overloadCount={ 2 }/>
-      </TestApp>,
+      </Box>,
       { hooksConfig: hooksConfigNoToken },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -176,26 +156,23 @@ test.describe('socket', () => {
     expect(counter?.startsWith('1 ')).toBe(true);
   });
 
-  test('without overload, with filters', async({ mount, page, createSocket }) => {
+  test('without overload, with filters', async({ render, mockApiResponse, page, createSocket }) => {
     const hooksConfigWithFilter = {
       router: {
         query: { hash: CURRENT_ADDRESS, type: 'ERC-1155' },
       },
     };
+    await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
+      pathParams: { hash: CURRENT_ADDRESS },
+      queryParams: { type: 'ERC-1155' },
+    });
 
-    const API_URL_WITH_FILTER = buildApiUrl('address_token_transfers', { hash: CURRENT_ADDRESS }) + '?type=ERC-1155';
-
-    await page.route(API_URL_WITH_FILTER, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
-    }));
-
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokenTransfers/>
-      </TestApp>,
+      </Box>,
       { hooksConfig: hooksConfigWithFilter },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -212,26 +189,23 @@ test.describe('socket', () => {
     expect(itemsCountNew).toBe(3);
   });
 
-  test('with overload, with filters', async({ mount, page, createSocket }) => {
+  test('with overload, with filters', async({ render, mockApiResponse, page, createSocket }) => {
     const hooksConfigWithFilter = {
       router: {
         query: { hash: CURRENT_ADDRESS, type: 'ERC-1155' },
       },
     };
+    await mockApiResponse('address_token_transfers', tokenTransfersWithPagination, {
+      pathParams: { hash: CURRENT_ADDRESS },
+      queryParams: { type: 'ERC-1155' },
+    });
 
-    const API_URL_WITH_FILTER = buildApiUrl('address_token_transfers', { hash: CURRENT_ADDRESS }) + '?type=ERC-1155';
-
-    await page.route(API_URL_WITH_FILTER, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ tokenTransferMock.erc1155A ], next_page_params: { block_number: 1 } }),
-    }));
-
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokenTransfers overloadCount={ 2 }/>
-      </TestApp>,
+      </Box>,
       { hooksConfig: hooksConfigWithFilter },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
diff --git a/ui/address/AddressTokenTransfers.tsx b/ui/address/AddressTokenTransfers.tsx
index 0ebba17f8e..8230b921ba 100644
--- a/ui/address/AddressTokenTransfers.tsx
+++ b/ui/address/AddressTokenTransfers.tsx
@@ -13,13 +13,14 @@ import { getResourceKey } from 'lib/api/useApiQuery';
 import getFilterValueFromQuery from 'lib/getFilterValueFromQuery';
 import getFilterValuesFromQuery from 'lib/getFilterValuesFromQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import useIsMounted from 'lib/hooks/useIsMounted';
 import { apos } from 'lib/html-entities';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import { TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
 import { getTokenTransfersStub } from 'stubs/token';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import HashStringShorten from 'ui/shared/HashStringShorten';
@@ -63,14 +64,17 @@ const matchFilters = (filters: Filters, tokenTransfer: TokenTransfer, address?:
 
 type Props = {
   scrollRef?: React.RefObject<HTMLDivElement>;
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
   // for tests only
   overloadCount?: number;
 }
 
-const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Props) => {
+const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
   const queryClient = useQueryClient();
   const isMobile = useIsMobile();
+  const isMounted = useIsMounted();
 
   const currentAddress = getQueryParamString(router.query.hash);
 
@@ -92,6 +96,7 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Pr
     filters: tokenFilter ? { token: tokenFilter } : filters,
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: getTokenTransfersStub(undefined, {
         block_number: 7793535,
         index: 46,
@@ -179,6 +184,18 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Pr
     handler: handleNewSocketMessage,
   });
 
+  const tokenData = React.useMemo(() => ({
+    address: tokenFilter || '',
+    name: '',
+    icon_url: '',
+    symbol: '',
+    type: 'ERC-20' as const,
+  }), [ tokenFilter ]);
+
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
   const numActiveFilters = (filters.type?.length || 0) + (filters.filter ? 1 : 0);
   const isActionBarHidden = !tokenFilter && !numActiveFilters && !data?.items.length && !currentAddress;
 
@@ -189,7 +206,7 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Pr
           data={ data?.items }
           baseAddress={ currentAddress }
           showTxInfo
-          top={ isActionBarHidden ? 0 : 80 }
+          top={ isActionBarHidden ? 0 : ACTION_BAR_HEIGHT_DESKTOP }
           enableTimeIncrement
           showSocketInfo={ pagination.page === 1 && !tokenFilter }
           socketInfoAlert={ socketAlert }
@@ -218,14 +235,6 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Pr
     </>
   ) : null;
 
-  const tokenData = React.useMemo(() => ({
-    address: tokenFilter || '',
-    name: '',
-    icon_url: '',
-    symbol: '',
-    type: 'ERC-20' as const,
-  }), [ tokenFilter ]);
-
   const tokenFilterComponent = tokenFilter && (
     <Flex alignItems="center" flexWrap="wrap" mb={{ base: isActionBarHidden ? 3 : 6, lg: 0 }} mr={ 4 }>
       <Text whiteSpace="nowrap" mr={ 2 } py={ 1 }>Filtered by token</Text>
diff --git a/ui/address/AddressTokens.pw.tsx b/ui/address/AddressTokens.pw.tsx
index 514b3aa7ad..3666588528 100644
--- a/ui/address/AddressTokens.pw.tsx
+++ b/ui/address/AddressTokens.pw.tsx
@@ -1,81 +1,53 @@
 import { Box } from '@chakra-ui/react';
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import type { AddressTokensResponse } from 'types/api/address';
+
 import * as addressMock from 'mocks/address/address';
 import * as tokensMock from 'mocks/address/tokens';
 import * as socketServer from 'playwright/fixtures/socketServer';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect, devices } from 'playwright/lib';
 
 import AddressTokens from './AddressTokens';
 
-const ADDRESS_HASH = addressMock.withName.hash;
-const API_URL_ADDRESS = buildApiUrl('address', { hash: ADDRESS_HASH });
-const API_URL_TOKENS = buildApiUrl('address_tokens', { hash: ADDRESS_HASH });
-const API_URL_NFT = buildApiUrl('address_nfts', { hash: ADDRESS_HASH }) + '?type=';
-const API_URL_COLLECTIONS = buildApiUrl('address_collections', { hash: ADDRESS_HASH }) + '?type=';
+const ADDRESS_HASH = addressMock.validator.hash;
 
 const nextPageParams = {
   items_count: 50,
   token_name: 'aaa',
-  token_type: '123',
+  token_type: 'ERC-20' as const,
   value: 1,
+  fiat_value: '1',
 };
 
-const test = base.extend({
-  page: async({ page }, use) => {
-    const response20 = {
-      items: [ tokensMock.erc20a, tokensMock.erc20b, tokensMock.erc20c, tokensMock.erc20d ],
-      next_page_params: nextPageParams,
-    };
-    const response721 = {
-      items: [ tokensMock.erc721a, tokensMock.erc721b, tokensMock.erc721c ],
-      next_page_params: nextPageParams,
-    };
-    const response1155 = {
-      items: [ tokensMock.erc1155a, tokensMock.erc1155b ],
-      next_page_params: nextPageParams,
-    };
-    const response404 = {
-      items: [ tokensMock.erc404a, tokensMock.erc404b ],
-      next_page_params: nextPageParams,
-    };
+test.beforeEach(async({ mockApiResponse }) => {
+  const response20: AddressTokensResponse = {
+    items: [ tokensMock.erc20a, tokensMock.erc20b, tokensMock.erc20c, tokensMock.erc20d ],
+    next_page_params: nextPageParams,
+  };
+  const response721: AddressTokensResponse = {
+    items: [ tokensMock.erc721a, tokensMock.erc721b, tokensMock.erc721c ],
+    next_page_params: nextPageParams,
+  };
+  const response1155: AddressTokensResponse = {
+    items: [ tokensMock.erc1155a, tokensMock.erc1155b ],
+    next_page_params: nextPageParams,
+  };
+  const response404: AddressTokensResponse = {
+    items: [ tokensMock.erc404a, tokensMock.erc404b ],
+    next_page_params: nextPageParams,
+  };
 
-    await page.route(API_URL_ADDRESS, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(addressMock.withName),
-    }));
-    await page.route(API_URL_TOKENS + '?type=ERC-20', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(response20),
-    }));
-    await page.route(API_URL_TOKENS + '?type=ERC-721', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(response721),
-    }));
-    await page.route(API_URL_TOKENS + '?type=ERC-1155', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(response1155),
-    }));
-    await page.route(API_URL_TOKENS + '?type=ERC-404', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(response404),
-    }));
-    await page.route(API_URL_NFT, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(tokensMock.nfts),
-    }));
-    await page.route(API_URL_COLLECTIONS, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(tokensMock.collections),
-    }));
-
-    use(page);
-  },
+  await mockApiResponse('address', addressMock.validator, { pathParams: { hash: ADDRESS_HASH } });
+  await mockApiResponse('address_tokens', response20, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-20' } });
+  await mockApiResponse('address_tokens', response721, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-721' } });
+  await mockApiResponse('address_tokens', response1155, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-1155' } });
+  await mockApiResponse('address_tokens', response404, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' } });
+  await mockApiResponse('address_nfts', tokensMock.nfts, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: [] } });
+  await mockApiResponse('address_collections', tokensMock.collections, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: [] } });
 });
 
-test('erc20 +@dark-mode', async({ mount }) => {
+test('erc20 +@dark-mode', async({ render }) => {
   const hooksConfig = {
     router: {
       query: { hash: ADDRESS_HASH, tab: 'tokens_erc20' },
@@ -83,18 +55,17 @@ test('erc20 +@dark-mode', async({ mount }) => {
     },
   };
 
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <AddressTokens/>
-    </TestApp>,
+    </Box>,
     { hooksConfig },
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('collections +@dark-mode', async({ mount }) => {
+test('collections +@dark-mode', async({ render }) => {
   const hooksConfig = {
     router: {
       query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },
@@ -102,18 +73,17 @@ test('collections +@dark-mode', async({ mount }) => {
     },
   };
 
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <AddressTokens/>
-    </TestApp>,
+    </Box>,
     { hooksConfig },
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('nfts +@dark-mode', async({ mount }) => {
+test('nfts +@dark-mode', async({ render }) => {
   const hooksConfig = {
     router: {
       query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },
@@ -121,11 +91,10 @@ test('nfts +@dark-mode', async({ mount }) => {
     },
   };
 
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <AddressTokens/>
-    </TestApp>,
+    </Box>,
     { hooksConfig },
   );
 
@@ -137,7 +106,7 @@ test('nfts +@dark-mode', async({ mount }) => {
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  test('erc20', async({ mount }) => {
+  test('erc20', async({ render }) => {
     const hooksConfig = {
       router: {
         query: { hash: ADDRESS_HASH, tab: 'tokens_erc20' },
@@ -145,18 +114,17 @@ test.describe('mobile', () => {
       },
     };
 
-    const component = await mount(
-      <TestApp>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    const component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokens/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
     );
 
     await expect(component).toHaveScreenshot();
   });
 
-  test('nfts', async({ mount }) => {
+  test('nfts', async({ render }) => {
     const hooksConfig = {
       router: {
         query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },
@@ -164,11 +132,10 @@ test.describe('mobile', () => {
       },
     };
 
-    const component = await mount(
-      <TestApp>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    const component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokens/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
     );
 
@@ -177,7 +144,7 @@ test.describe('mobile', () => {
     await expect(component).toHaveScreenshot();
   });
 
-  test('collections', async({ mount }) => {
+  test('collections', async({ render }) => {
     const hooksConfig = {
       router: {
         query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },
@@ -185,11 +152,10 @@ test.describe('mobile', () => {
       },
     };
 
-    const component = await mount(
-      <TestApp>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    const component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTokens/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
     );
 
@@ -197,13 +163,10 @@ test.describe('mobile', () => {
   });
 });
 
-base.describe('update balances via socket', () => {
-  const test = base.extend<socketServer.SocketServerFixture>({
-    createSocket: socketServer.createSocket,
-  });
+test.describe('update balances via socket', () => {
   test.describe.configure({ mode: 'serial' });
 
-  test('', async({ mount, page, createSocket }) => {
+  test('', async({ render, page, createSocket, mockApiResponse }) => {
     test.slow();
 
     const hooksConfig = {
@@ -230,41 +193,23 @@ base.describe('update balances via socket', () => {
       next_page_params: null,
     };
 
-    await page.route(API_URL_ADDRESS, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(addressMock.validator),
-    }));
-    await page.route(API_URL_TOKENS + '?type=ERC-20', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(response20),
-    }));
-    await page.route(API_URL_TOKENS + '?type=ERC-721', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(response721),
-    }));
-    await page.route(API_URL_TOKENS + '?type=ERC-1155', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(response1155),
-    }));
-    await page.route(API_URL_TOKENS + '?type=ERC-404', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(response404),
-    }));
-
-    const component = await mount(
-      <TestApp withSocket>
-        <Box>
-          <Box h={{ base: '134px', lg: 6 }}/>
-          <AddressTokens/>
-        </Box>
-      </TestApp>,
+    const erc20ApiUrl = await mockApiResponse('address_tokens', response20, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-20' } });
+    const erc721ApiUrl = await mockApiResponse('address_tokens', response721, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-721' } });
+    const erc1155ApiUrl = await mockApiResponse('address_tokens', response1155, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-1155' } });
+    const erc404ApiUrl = await mockApiResponse('address_tokens', response404, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' } });
+
+    const component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
+        <AddressTokens/>
+      </Box>,
       { hooksConfig },
+      { withSocket: true },
     );
 
-    await page.waitForResponse(API_URL_TOKENS + '?type=ERC-20');
-    await page.waitForResponse(API_URL_TOKENS + '?type=ERC-721');
-    await page.waitForResponse(API_URL_TOKENS + '?type=ERC-1155');
-    await page.waitForResponse(API_URL_TOKENS + '?type=ERC-404');
+    await page.waitForResponse(erc20ApiUrl);
+    await page.waitForResponse(erc721ApiUrl);
+    await page.waitForResponse(erc1155ApiUrl);
+    await page.waitForResponse(erc404ApiUrl);
 
     await expect(component).toHaveScreenshot();
 
diff --git a/ui/address/AddressTokens.tsx b/ui/address/AddressTokens.tsx
index 0e27a73f7d..d1aefe2c37 100644
--- a/ui/address/AddressTokens.tsx
+++ b/ui/address/AddressTokens.tsx
@@ -5,10 +5,12 @@ import React from 'react';
 import type { NFTTokenType } from 'types/api/token';
 import type { PaginationParams } from 'ui/shared/pagination/types';
 
+import config from 'configs/app';
 import { useAppContext } from 'lib/contexts/app';
 import * as cookies from 'lib/cookies';
 import getFilterValuesFromQuery from 'lib/getFilterValuesFromQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import useIsMounted from 'lib/hooks/useIsMounted';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
 import { ADDRESS_TOKEN_BALANCE_ERC_20, ADDRESS_NFT_1155, ADDRESS_COLLECTION } from 'stubs/address';
@@ -28,7 +30,8 @@ import TokenBalances from './tokens/TokenBalances';
 type TNftDisplayType = 'collection' | 'list';
 
 const TAB_LIST_PROPS = {
-  my: 3,
+  mt: 1,
+  mb: { base: 6, lg: 1 },
   py: 5,
   columnGap: 3,
 };
@@ -40,9 +43,15 @@ const TAB_LIST_PROPS_MOBILE = {
 
 const getTokenFilterValue = (getFilterValuesFromQuery<NFTTokenType>).bind(null, NFT_TOKEN_TYPE_IDS);
 
-const AddressTokens = () => {
+type Props = {
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
+}
+
+const AddressTokens = ({ shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
   const isMobile = useIsMobile();
+  const isMounted = useIsMounted();
 
   const scrollRef = React.useRef<HTMLDivElement>(null);
 
@@ -59,7 +68,7 @@ const AddressTokens = () => {
     filters: { type: 'ERC-20' },
     scrollRef,
     options: {
-      enabled: !tab || tab === 'tokens_erc20',
+      enabled: isQueryEnabled && (!tab || tab === 'tokens_erc20'),
       refetchOnMount: false,
       placeholderData: generateListStub<'address_tokens'>(ADDRESS_TOKEN_BALANCE_ERC_20, 10, { next_page_params: null }),
     },
@@ -70,7 +79,7 @@ const AddressTokens = () => {
     pathParams: { hash },
     scrollRef,
     options: {
-      enabled: tab === 'tokens_nfts' && nftDisplayType === 'collection',
+      enabled: isQueryEnabled && tab === 'tokens_nfts' && nftDisplayType === 'collection',
       placeholderData: generateListStub<'address_collections'>(ADDRESS_COLLECTION, 10, { next_page_params: null }),
     },
     filters: { type: tokenTypes },
@@ -81,7 +90,7 @@ const AddressTokens = () => {
     pathParams: { hash },
     scrollRef,
     options: {
-      enabled: tab === 'tokens_nfts' && nftDisplayType === 'list',
+      enabled: isQueryEnabled && tab === 'tokens_nfts' && nftDisplayType === 'list',
       placeholderData: generateListStub<'address_nfts'>(ADDRESS_NFT_1155, 10, { next_page_params: null }),
     },
     filters: { type: tokenTypes },
@@ -98,8 +107,12 @@ const AddressTokens = () => {
     setTokenTypes(value);
   }, [ nftsQuery, collectionsQuery ]);
 
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
   const nftTypeFilter = (
-    <PopoverFilter isActive={ tokenTypes && tokenTypes.length > 0 } contentProps={{ w: '200px' }} appliedFiltersNum={ tokenTypes?.length }>
+    <PopoverFilter contentProps={{ w: '200px' }} appliedFiltersNum={ tokenTypes?.length }>
       <TokenTypeFilter<NFTTokenType> nftOnly onChange={ handleTokenTypesChange } defaultValue={ tokenTypes }/>
     </PopoverFilter>
   );
@@ -107,7 +120,7 @@ const AddressTokens = () => {
   const hasActiveFilters = Boolean(tokenTypes?.length);
 
   const tabs = [
-    { id: 'tokens_erc20', title: 'ERC-20', component: <ERC20Tokens tokensQuery={ erc20Query }/> },
+    { id: 'tokens_erc20', title: `${ config.chain.tokenStandard }-20`, component: <ERC20Tokens tokensQuery={ erc20Query }/> },
     {
       id: 'tokens_nfts',
       title: 'NFTs',
diff --git a/ui/address/AddressTxs.pw.tsx b/ui/address/AddressTxs.pw.tsx
index b226debc32..487b88a008 100644
--- a/ui/address/AddressTxs.pw.tsx
+++ b/ui/address/AddressTxs.pw.tsx
@@ -1,84 +1,78 @@
 import { Box } from '@chakra-ui/react';
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import type { Locator } from '@playwright/test';
 import React from 'react';
 
 import * as txMock from 'mocks/txs/tx';
 import * as socketServer from 'playwright/fixtures/socketServer';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import AddressTxs from './AddressTxs';
 
 const CURRENT_ADDRESS = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859';
 
-const API_URL = buildApiUrl('address_txs', { hash: CURRENT_ADDRESS });
-
 const hooksConfig = {
   router: {
     query: { hash: CURRENT_ADDRESS },
   },
 };
+const DEFAULT_PAGINATION = { block_number: 1, index: 1, items_count: 1 };
 
-base.describe('base view', () => {
+test.describe('base view', () => {
   let component: Locator;
 
-  base.beforeEach(async({ page, mount }) => {
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [
-        txMock.base,
-        {
-          ...txMock.base,
-          hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3194',
-        },
-      ], next_page_params: { block: 1 } }),
-    }));
-
-    component = await mount(
-      <TestApp>
-        <Box h={{ base: '134px', lg: 6 }}/>
+  test.beforeEach(async({ render, mockApiResponse }) => {
+    await mockApiResponse(
+      'address_txs',
+      {
+        items: [
+          txMock.base,
+          { ...txMock.base, hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3194' },
+        ],
+        next_page_params: DEFAULT_PAGINATION,
+      },
+      { pathParams: { hash: CURRENT_ADDRESS } },
+    );
+    component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTxs/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
     );
   });
 
-  base('+@mobile', async() => {
+  test('+@mobile', async() => {
     await expect(component).toHaveScreenshot();
   });
 
-  base.describe('screen xl', () => {
-    base.use({ viewport: configs.viewport.xl });
+  test.describe('screen xl', () => {
+    test.use({ viewport: pwConfig.viewport.xl });
 
-    base('', async() => {
-      base.slow();
+    test('', async() => {
+      test.slow();
       await expect(component).toHaveScreenshot();
     });
   });
 });
 
-base.describe('socket', () => {
-  const test = base.extend<socketServer.SocketServerFixture>({
-    createSocket: socketServer.createSocket,
-  });
+test.describe('socket', () => {
   // FIXME
   // test cases which use socket cannot run in parallel since the socket server always run on the same port
   test.describe.configure({ mode: 'serial' });
 
-  test('without overload', async({ mount, page, createSocket }) => {
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ txMock.base ], next_page_params: { block: 1 } }),
-    }));
+  test('without overload', async({ render, mockApiResponse, page, createSocket }) => {
+    await mockApiResponse(
+      'address_txs',
+      { items: [ txMock.base ], next_page_params: DEFAULT_PAGINATION },
+      { pathParams: { hash: CURRENT_ADDRESS } },
+    );
 
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTxs/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -95,18 +89,19 @@ base.describe('socket', () => {
     expect(itemsCountNew).toBe(4);
   });
 
-  test('with update', async({ mount, page, createSocket }) => {
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ txMock.pending ], next_page_params: { block: 1 } }),
-    }));
+  test('with update', async({ render, mockApiResponse, page, createSocket }) => {
+    await mockApiResponse(
+      'address_txs',
+      { items: [ txMock.pending ], next_page_params: DEFAULT_PAGINATION },
+      { pathParams: { hash: CURRENT_ADDRESS } },
+    );
 
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTxs/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -123,18 +118,19 @@ base.describe('socket', () => {
     expect(itemsCountNew).toBe(3);
   });
 
-  test('with overload', async({ mount, page, createSocket }) => {
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ txMock.base ], next_page_params: { block: 1 } }),
-    }));
+  test('with overload', async({ render, mockApiResponse, page, createSocket }) => {
+    await mockApiResponse(
+      'address_txs',
+      { items: [ txMock.base ], next_page_params: DEFAULT_PAGINATION },
+      { pathParams: { hash: CURRENT_ADDRESS } },
+    );
 
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTxs overloadCount={ 2 }/>
-      </TestApp>,
+      </Box>,
       { hooksConfig },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -154,26 +150,25 @@ base.describe('socket', () => {
     expect(counter?.startsWith('2 ')).toBe(true);
   });
 
-  test('without overload, with filters', async({ mount, page, createSocket }) => {
+  test('without overload, with filters', async({ render, mockApiResponse, page, createSocket }) => {
     const hooksConfigWithFilter = {
       router: {
         query: { hash: CURRENT_ADDRESS, filter: 'from' },
       },
     };
 
-    const API_URL_WITH_FILTER = buildApiUrl('address_txs', { hash: CURRENT_ADDRESS }) + '?filter=from';
-
-    await page.route(API_URL_WITH_FILTER, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ txMock.base ], next_page_params: { block: 1 } }),
-    }));
+    await mockApiResponse(
+      'address_txs',
+      { items: [ txMock.base ], next_page_params: DEFAULT_PAGINATION },
+      { pathParams: { hash: CURRENT_ADDRESS }, queryParams: { filter: 'from' } },
+    );
 
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTxs/>
-      </TestApp>,
+      </Box>,
       { hooksConfig: hooksConfigWithFilter },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
@@ -190,26 +185,25 @@ base.describe('socket', () => {
     expect(itemsCountNew).toBe(3);
   });
 
-  test('with overload, with filters', async({ mount, page, createSocket }) => {
+  test('with overload, with filters', async({ render, mockApiResponse, page, createSocket }) => {
     const hooksConfigWithFilter = {
       router: {
         query: { hash: CURRENT_ADDRESS, filter: 'from' },
       },
     };
 
-    const API_URL_WITH_FILTER = buildApiUrl('address_txs', { hash: CURRENT_ADDRESS }) + '?filter=from';
-
-    await page.route(API_URL_WITH_FILTER, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [ txMock.base ], next_page_params: { block: 1 } }),
-    }));
+    await mockApiResponse(
+      'address_txs',
+      { items: [ txMock.base ], next_page_params: DEFAULT_PAGINATION },
+      { pathParams: { hash: CURRENT_ADDRESS }, queryParams: { filter: 'from' } },
+    );
 
-    await mount(
-      <TestApp withSocket>
-        <Box h={{ base: '134px', lg: 6 }}/>
+    await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTxs overloadCount={ 2 }/>
-      </TestApp>,
+      </Box>,
       { hooksConfig: hooksConfigWithFilter },
+      { withSocket: true },
     );
 
     const socket = await createSocket();
diff --git a/ui/address/AddressTxs.tsx b/ui/address/AddressTxs.tsx
index d272982c71..869d6c3422 100644
--- a/ui/address/AddressTxs.tsx
+++ b/ui/address/AddressTxs.tsx
@@ -10,12 +10,13 @@ import type { Transaction, TransactionsSortingField, TransactionsSortingValue, T
 import { getResourceKey } from 'lib/api/useApiQuery';
 import getFilterValueFromQuery from 'lib/getFilterValueFromQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import useIsMounted from 'lib/hooks/useIsMounted';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import { TX } from 'stubs/tx';
 import { generateListStub } from 'stubs/utils';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import getSortParamsFromValue from 'ui/shared/sort/getSortParamsFromValue';
@@ -47,13 +48,16 @@ const matchFilter = (filterValue: AddressFromToFilter, transaction: Transaction,
 
 type Props = {
   scrollRef?: React.RefObject<HTMLDivElement>;
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
   // for tests only
   overloadCount?: number;
 }
 
-const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Props) => {
+const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
   const queryClient = useQueryClient();
+  const isMounted = useIsMounted();
 
   const [ socketAlert, setSocketAlert ] = React.useState('');
   const [ newItemsCount, setNewItemsCount ] = React.useState(0);
@@ -71,6 +75,7 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Props) => {
     sorting: getSortParamsFromValue<TransactionsSortingValue, TransactionsSortingField, TransactionsSorting['order']>(sort),
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_txs'>(TX, 50, { next_page_params: {
         block_number: 9005713,
         index: 5,
@@ -156,11 +161,15 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Props) => {
     handler: handleNewSocketMessage,
   });
 
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
   const filter = (
     <AddressTxsFilter
       defaultFilter={ filterValue }
       onFilterChange={ handleFilterChange }
-      isActive={ Boolean(filterValue) }
+      hasActiveFilter={ Boolean(filterValue) }
       isLoading={ addressTxsQuery.pagination.isLoading }
     />
   );
@@ -192,7 +201,7 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Props) => {
         showSocketInfo={ addressTxsQuery.pagination.page === 1 }
         socketInfoAlert={ socketAlert }
         socketInfoNum={ newItemsCount }
-        top={ 80 }
+        top={ ACTION_BAR_HEIGHT_DESKTOP }
         sorting={ sort }
         setSort={ setSort }
       />
diff --git a/ui/address/AddressTxsFilter.tsx b/ui/address/AddressTxsFilter.tsx
index c566f1d91e..d3bdbd61fe 100644
--- a/ui/address/AddressTxsFilter.tsx
+++ b/ui/address/AddressTxsFilter.tsx
@@ -1,48 +1,35 @@
-import {
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuOptionGroup,
-  MenuItemOption,
-  useDisclosure,
-} from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressFromToFilter } from 'types/api/address';
 
 import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
-import FilterButton from 'ui/shared/filters/FilterButton';
+import PopoverFilterRadio from 'ui/shared/filters/PopoverFilterRadio';
+
+const OPTIONS = [
+  { value: 'all', label: 'All' },
+  { value: 'from', label: 'Outgoing transactions' },
+  { value: 'to', label: 'Incoming transactions' },
+];
 
 interface Props {
-  isActive: boolean;
+  hasActiveFilter: boolean;
   defaultFilter: AddressFromToFilter;
   onFilterChange: (nextValue: string | Array<string>) => void;
   isLoading?: boolean;
 }
 
-const AddressTxsFilter = ({ onFilterChange, defaultFilter, isActive, isLoading }: Props) => {
-  const { isOpen, onToggle } = useDisclosure();
+const AddressTxsFilter = ({ onFilterChange, defaultFilter, hasActiveFilter, isLoading }: Props) => {
   const isInitialLoading = useIsInitialLoading(isLoading);
 
   return (
-    <Menu>
-      <MenuButton>
-        <FilterButton
-          isActive={ isOpen || isActive }
-          isLoading={ isInitialLoading }
-          onClick={ onToggle }
-          appliedFiltersNum={ isActive ? 1 : 0 }
-          as="div"
-        />
-      </MenuButton>
-      <MenuList zIndex={ 2 }>
-        <MenuOptionGroup defaultValue={ defaultFilter || 'all' } title="Address" type="radio" onChange={ onFilterChange }>
-          <MenuItemOption value="all">All</MenuItemOption>
-          <MenuItemOption value="from">Outgoing transactions</MenuItemOption>
-          <MenuItemOption value="to">Incoming transactions</MenuItemOption>
-        </MenuOptionGroup>
-      </MenuList>
-    </Menu>
+    <PopoverFilterRadio
+      name="txs_filter"
+      options={ OPTIONS }
+      onChange={ onFilterChange }
+      hasActiveFilter={ hasActiveFilter }
+      isLoading={ isInitialLoading }
+      defaultValue={ defaultFilter || OPTIONS[0].value }
+    />
   );
 };
 
diff --git a/ui/address/AddressUserOps.tsx b/ui/address/AddressUserOps.tsx
index 7c93c83b47..2ef5a48bde 100644
--- a/ui/address/AddressUserOps.tsx
+++ b/ui/address/AddressUserOps.tsx
@@ -1,6 +1,7 @@
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import useIsMounted from 'lib/hooks/useIsMounted';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { USER_OPS_ITEM } from 'stubs/userOps';
 import { generateListStub } from 'stubs/utils';
@@ -9,10 +10,13 @@ import UserOpsContent from 'ui/userOps/UserOpsContent';
 
 type Props = {
   scrollRef?: React.RefObject<HTMLDivElement>;
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
 }
 
-const AddressUserOps = ({ scrollRef }: Props) => {
+const AddressUserOps = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
+  const isMounted = useIsMounted();
 
   const hash = getQueryParamString(router.query.hash);
 
@@ -20,7 +24,7 @@ const AddressUserOps = ({ scrollRef }: Props) => {
     resourceName: 'user_ops',
     scrollRef,
     options: {
-      enabled: Boolean(hash),
+      enabled: isQueryEnabled && Boolean(hash),
       placeholderData: generateListStub<'user_ops'>(USER_OPS_ITEM, 50, { next_page_params: {
         page_token: '10355938,0x5956a847d8089e254e02e5111cad6992b99ceb9e5c2dc4343fd53002834c4dc6',
         page_size: 50,
@@ -29,6 +33,10 @@ const AddressUserOps = ({ scrollRef }: Props) => {
     filters: { sender: hash },
   });
 
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
   return <UserOpsContent query={ userOpsQuery } showSender={ false }/>;
 };
 
diff --git a/ui/address/AddressWithdrawals.tsx b/ui/address/AddressWithdrawals.tsx
index bbc61e8730..600914f8b3 100644
--- a/ui/address/AddressWithdrawals.tsx
+++ b/ui/address/AddressWithdrawals.tsx
@@ -2,18 +2,25 @@ import { Show, Hide } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import useIsMounted from 'lib/hooks/useIsMounted';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { generateListStub } from 'stubs/utils';
 import { WITHDRAWAL } from 'stubs/withdrawals';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import BeaconChainWithdrawalsListItem from 'ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem';
 import BeaconChainWithdrawalsTable from 'ui/withdrawals/beaconChain/BeaconChainWithdrawalsTable';
 
-const AddressWithdrawals = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>}) => {
+type Props = {
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
+}
+const AddressWithdrawals = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
+  const isMounted = useIsMounted();
 
   const hash = getQueryParamString(router.query.hash);
 
@@ -22,12 +29,18 @@ const AddressWithdrawals = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
     pathParams: { hash },
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_withdrawals'>(WITHDRAWAL, 50, { next_page_params: {
         index: 5,
         items_count: 50,
       } }),
     },
   });
+
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
   const content = data?.items ? (
     <>
       <Show below="lg" ssr={ false }>
@@ -41,7 +54,12 @@ const AddressWithdrawals = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
         )) }
       </Show>
       <Hide below="lg" ssr={ false }>
-        <BeaconChainWithdrawalsTable items={ data.items } view="address" top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <BeaconChainWithdrawalsTable
+          items={ data.items }
+          view="address"
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+          isLoading={ isPlaceholderData }
+        />
       </Hide>
     </>
   ) : null ;
diff --git a/ui/address/SolidityscanReport.pw.tsx b/ui/address/SolidityscanReport.pw.tsx
index fd41c7a860..ba41a98511 100644
--- a/ui/address/SolidityscanReport.pw.tsx
+++ b/ui/address/SolidityscanReport.pw.tsx
@@ -1,27 +1,19 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as solidityscanReportMock from 'mocks/contract/solidityscanReport';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import SolidityscanReport from './SolidityscanReport';
 
 const addressHash = 'hash';
-const REPORT_API_URL = buildApiUrl('contract_solidityscan_report', { hash: addressHash });
-
-test('average report +@dark-mode +@mobile', async({ mount, page }) => {
-  await page.route(REPORT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(solidityscanReportMock.solidityscanReportAverage),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <SolidityscanReport hash={ addressHash }/>
-    </TestApp>,
-  );
 
+test('average report +@dark-mode +@mobile', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse(
+    'contract_solidity_scan_report',
+    solidityscanReportMock.solidityscanReportAverage,
+    { pathParams: { hash: addressHash } },
+  );
+  const component = await render(<SolidityscanReport hash={ addressHash }/>);
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 100, height: 50 } });
 
   await component.getByLabel('SolidityScan score').click();
@@ -29,16 +21,15 @@ test('average report +@dark-mode +@mobile', async({ mount, page }) => {
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 500 } });
 });
 
-test('great report', async({ mount, page }) => {
-  await page.route(REPORT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(solidityscanReportMock.solidityscanReportGreat),
-  }));
+test('great report', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse(
+    'contract_solidity_scan_report',
+    solidityscanReportMock.solidityscanReportGreat,
+    { pathParams: { hash: addressHash } },
+  );
 
-  const component = await mount(
-    <TestApp>
-      <SolidityscanReport hash={ addressHash }/>
-    </TestApp>,
+  const component = await render(
+    <SolidityscanReport hash={ addressHash }/>,
   );
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 100, height: 50 } });
@@ -48,16 +39,15 @@ test('great report', async({ mount, page }) => {
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 500 } });
 });
 
-test('low report', async({ mount, page }) => {
-  await page.route(REPORT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(solidityscanReportMock.solidityscanReportLow),
-  }));
+test('low report', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse(
+    'contract_solidity_scan_report',
+    solidityscanReportMock.solidityscanReportLow,
+    { pathParams: { hash: addressHash } },
+  );
 
-  const component = await mount(
-    <TestApp>
-      <SolidityscanReport hash={ addressHash }/>
-    </TestApp>,
+  const component = await render(
+    <SolidityscanReport hash={ addressHash }/>,
   );
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 100, height: 50 } });
diff --git a/ui/address/SolidityscanReport.tsx b/ui/address/SolidityscanReport.tsx
index 7032ffcd99..a704c53a1a 100644
--- a/ui/address/SolidityscanReport.tsx
+++ b/ui/address/SolidityscanReport.tsx
@@ -1,40 +1,37 @@
-import { Box, Text, chakra, Icon, Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
+import { Box, Text, Icon, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 
 // This icon doesn't work properly when it is in the sprite
 // Probably because of the gradient
 // eslint-disable-next-line no-restricted-imports
 import solidityScanIcon from 'icons/brands/solidity_scan.svg';
-import useApiQuery from 'lib/api/useApiQuery';
-import { SOLIDITYSCAN_REPORT } from 'stubs/contract';
-import LinkExternal from 'ui/shared/LinkExternal';
+import useFetchReport from 'lib/solidityScan/useFetchReport';
+import Popover from 'ui/shared/chakra/Popover';
+import LinkExternal from 'ui/shared/links/LinkExternal';
 import SolidityscanReportButton from 'ui/shared/solidityscanReport/SolidityscanReportButton';
 import SolidityscanReportDetails from 'ui/shared/solidityscanReport/SolidityscanReportDetails';
 import SolidityscanReportScore from 'ui/shared/solidityscanReport/SolidityscanReportScore';
 
 interface Props {
-  className?: string;
   hash: string;
 }
 
-const SolidityscanReport = ({ className, hash }: Props) => {
+const SolidityscanReport = ({ hash }: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
 
-  const { data, isPlaceholderData, isError } = useApiQuery('contract_solidityscan_report', {
-    pathParams: { hash },
-    queryOptions: {
-      enabled: Boolean(hash),
-      placeholderData: SOLIDITYSCAN_REPORT,
-    },
-  });
+  const { data, isPlaceholderData, isError } = useFetchReport({ hash });
 
-  const score = Number(data?.scan_report.scan_summary.score_v2);
+  if (isError || !data) {
+    return null;
+  }
+
+  const score = Number(data.scan_report.scan_summary.score_v2);
 
-  if (isError || !score) {
+  if (!score) {
     return null;
   }
 
-  const vulnerabilities = data?.scan_report.scan_summary.issue_severity_distribution;
+  const vulnerabilities = data.scan_report.scan_summary.issue_severity_distribution;
   const vulnerabilitiesCounts = vulnerabilities ? Object.values(vulnerabilities) : [];
   const vulnerabilitiesCount = vulnerabilitiesCounts.reduce((acc, val) => acc + val, 0);
 
@@ -42,16 +39,16 @@ const SolidityscanReport = ({ className, hash }: Props) => {
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
       <PopoverTrigger>
         <SolidityscanReportButton
-          className={ className }
           score={ score }
           isLoading={ isPlaceholderData }
           onClick={ onToggle }
+          isActive={ isOpen }
         />
       </PopoverTrigger>
       <PopoverContent w={{ base: '100vw', lg: '328px' }}>
         <PopoverBody px="26px" py="20px" fontSize="sm">
           <Box mb={ 5 } lineHeight="25px">
-            Contract analyzed for 140+ vulnerability patterns by
+            Contract analyzed for 240+ vulnerability patterns by
             <Icon as={ solidityScanIcon } mr={ 1 } ml="6px" w="23px" h="20px" display="inline-block" verticalAlign="middle"/>
             <Text fontWeight={ 600 } display="inline-block">SolidityScan</Text>
           </Box>
@@ -62,11 +59,11 @@ const SolidityscanReport = ({ className, hash }: Props) => {
               <SolidityscanReportDetails vulnerabilities={ vulnerabilities } vulnerabilitiesCount={ vulnerabilitiesCount }/>
             </Box>
           ) }
-          <LinkExternal href={ data?.scan_report.scanner_reference_url }>View full report</LinkExternal>
+          <LinkExternal href={ data.scan_report.scanner_reference_url }>View full report</LinkExternal>
         </PopoverBody>
       </PopoverContent>
     </Popover>
   );
 };
 
-export default chakra(SolidityscanReport);
+export default React.memo(SolidityscanReport);
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_contract-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_contract-1.png
new file mode 100644
index 0000000000..d78a586bf8
Binary files /dev/null and b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_contract-1.png differ
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_contract-mobile-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_contract-mobile-1.png
deleted file mode 100644
index 532df5851c..0000000000
Binary files a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_contract-mobile-1.png and /dev/null differ
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-contract-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-contract-1.png
new file mode 100644
index 0000000000..316486202e
Binary files /dev/null and b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-contract-1.png differ
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-validator-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-validator-1.png
new file mode 100644
index 0000000000..263b930fac
Binary files /dev/null and b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-validator-1.png differ
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_token-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_token-1.png
deleted file mode 100644
index a41b419d9b..0000000000
Binary files a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_token-1.png and /dev/null differ
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_validator-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_validator-1.png
new file mode 100644
index 0000000000..9a95c7b31f
Binary files /dev/null and b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_validator-1.png differ
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_validator-mobile-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_validator-mobile-1.png
deleted file mode 100644
index 4a98354191..0000000000
Binary files a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_validator-mobile-1.png and /dev/null differ
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_mobile_contract-mobile-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_mobile_contract-mobile-1.png
deleted file mode 100644
index 5f80ab8c8e..0000000000
Binary files a/ui/address/__screenshots__/AddressDetails.pw.tsx_mobile_contract-mobile-1.png and /dev/null differ
diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_mobile_validator-mobile-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_mobile_validator-mobile-1.png
deleted file mode 100644
index 65a58209b3..0000000000
Binary files a/ui/address/__screenshots__/AddressDetails.pw.tsx_mobile_validator-mobile-1.png and /dev/null differ
diff --git a/ui/address/accountHistory/AddressAccountHistoryListItem.tsx b/ui/address/accountHistory/AddressAccountHistoryListItem.tsx
index 46cf969932..3d5555c354 100644
--- a/ui/address/accountHistory/AddressAccountHistoryListItem.tsx
+++ b/ui/address/accountHistory/AddressAccountHistoryListItem.tsx
@@ -3,11 +3,11 @@ import React, { useMemo } from 'react';
 
 import type { NovesResponseData } from 'types/api/noves';
 
-import dayjs from 'lib/date/dayjs';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import NovesFromTo from 'ui/shared/Noves/NovesFromTo';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 type Props = {
   isPlaceholderData: boolean;
@@ -40,9 +40,12 @@ const AddressAccountHistoryListItem = (props: Props) => {
                 Action
             </Text>
           </Flex>
-          <Text color="text_secondary" fontSize="sm" fontWeight={ 500 }>
-            { dayjs(props.tx.rawTransactionData.timestamp * 1000).fromNow() }
-          </Text>
+          <TimeAgoWithTooltip
+            timestamp={ props.tx.rawTransactionData.timestamp * 1000 }
+            color="text_secondary"
+            borderRadius="sm"
+            fontWeight={ 500 }
+          />
         </Flex>
       </Skeleton>
       <Skeleton borderRadius="sm" isLoaded={ !props.isPlaceholderData }>
diff --git a/ui/address/accountHistory/AddressAccountHistoryTableItem.tsx b/ui/address/accountHistory/AddressAccountHistoryTableItem.tsx
index c3aa61a283..16211ba8f2 100644
--- a/ui/address/accountHistory/AddressAccountHistoryTableItem.tsx
+++ b/ui/address/accountHistory/AddressAccountHistoryTableItem.tsx
@@ -1,12 +1,12 @@
-import { Td, Tr, Skeleton, Text, Box } from '@chakra-ui/react';
+import { Td, Tr, Skeleton, Box } from '@chakra-ui/react';
 import React, { useMemo } from 'react';
 
 import type { NovesResponseData } from 'types/api/noves';
 
-import dayjs from 'lib/date/dayjs';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import NovesFromTo from 'ui/shared/Noves/NovesFromTo';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 type Props = {
   isPlaceholderData: boolean;
@@ -25,11 +25,13 @@ const AddressAccountHistoryTableItem = (props: Props) => {
   return (
     <Tr>
       <Td px={ 3 } py="18px" fontSize="sm" >
-        <Skeleton borderRadius="sm" flexShrink={ 0 } isLoaded={ !props.isPlaceholderData }>
-          <Text as="span" color="text_secondary">
-            { dayjs(props.tx.rawTransactionData.timestamp * 1000).fromNow() }
-          </Text>
-        </Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ props.tx.rawTransactionData.timestamp * 1000 }
+          isLoading={ props.isPlaceholderData }
+          color="text_secondary"
+          borderRadius="sm"
+          flexShrink={ 0 }
+        />
       </Td>
       <Td px={ 3 } py="18px" fontSize="sm" >
         <Skeleton borderRadius="sm" isLoaded={ !props.isPlaceholderData }>
diff --git a/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx b/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx
index 6627e72d61..1ec811a683 100644
--- a/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx
+++ b/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx
@@ -6,11 +6,11 @@ import type { Block } from 'types/api/block';
 
 import config from 'configs/app';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import { currencyUnits } from 'lib/units';
+import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
-import Utilization from 'ui/shared/Utilization/Utilization';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 type Props = Block & {
   page: number;
@@ -18,7 +18,6 @@ type Props = Block & {
 };
 
 const AddressBlocksValidatedListItem = (props: Props) => {
-  const timeAgo = useTimeAgoIncrement(props.timestamp, props.page === 1);
   const totalReward = getBlockTotalReward(props);
 
   return (
@@ -30,9 +29,13 @@ const AddressBlocksValidatedListItem = (props: Props) => {
           noIcon
           fontWeight={ 700 }
         />
-        <Skeleton isLoaded={ !props.isLoading } color="text_secondary" display="inline-block">
-          <span>{ timeAgo }</span>
-        </Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ props.timestamp }
+          enableIncrement={ props.page === 1 }
+          isLoading={ props.isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
       </Flex>
       <Flex columnGap={ 2 } w="100%">
         <Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Txn</Skeleton>
@@ -43,15 +46,13 @@ const AddressBlocksValidatedListItem = (props: Props) => {
       <Flex columnGap={ 2 } w="100%">
         <Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Gas used</Skeleton>
         <Skeleton isLoaded={ !props.isLoading } color="text_secondary">{ BigNumber(props.gas_used || 0).toFormat() }</Skeleton>
-        { props.gas_used && props.gas_used !== '0' && (
-          <Utilization
-            colorScheme="gray"
-            value={ BigNumber(props.gas_used || 0).dividedBy(BigNumber(props.gas_limit)).toNumber() }
-            isLoading={ props.isLoading }
-          />
-        ) }
+        <BlockGasUsed
+          gasUsed={ props.gas_used }
+          gasLimit={ props.gas_limit }
+          isLoading={ props.isLoading }
+        />
       </Flex>
-      { !config.UI.views.block.hiddenFields?.total_reward && (
+      { !config.UI.views.block.hiddenFields?.total_reward && !config.features.rollup.isEnabled && (
         <Flex columnGap={ 2 } w="100%">
           <Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Reward { currencyUnits.ether }</Skeleton>
           <Skeleton isLoaded={ !props.isLoading } color="text_secondary">{ totalReward.toFixed() }</Skeleton>
diff --git a/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx b/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx
index d6e68dfded..9ee38b297e 100644
--- a/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx
+++ b/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx
@@ -6,9 +6,9 @@ import type { Block } from 'types/api/block';
 
 import config from 'configs/app';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
-import Utilization from 'ui/shared/Utilization/Utilization';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 type Props = Block & {
   page: number;
@@ -16,7 +16,6 @@ type Props = Block & {
 };
 
 const AddressBlocksValidatedTableItem = (props: Props) => {
-  const timeAgo = useTimeAgoIncrement(props.timestamp, props.page === 1);
   const totalReward = getBlockTotalReward(props);
 
   return (
@@ -32,9 +31,13 @@ const AddressBlocksValidatedTableItem = (props: Props) => {
         />
       </Td>
       <Td>
-        <Skeleton isLoaded={ !props.isLoading } color="text_secondary" display="inline-block">
-          <span>{ timeAgo }</span>
-        </Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ props.timestamp }
+          enableIncrement={ props.page === 1 }
+          isLoading={ props.isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
       </Td>
       <Td>
         <Skeleton isLoaded={ !props.isLoading } display="inline-block" fontWeight="500">
@@ -46,16 +49,14 @@ const AddressBlocksValidatedTableItem = (props: Props) => {
           <Skeleton isLoaded={ !props.isLoading } flexBasis="80px">
             { BigNumber(props.gas_used || 0).toFormat() }
           </Skeleton>
-          { props.gas_used && props.gas_used !== '0' && (
-            <Utilization
-              colorScheme="gray"
-              value={ BigNumber(props.gas_used).dividedBy(BigNumber(props.gas_limit)).toNumber() }
-              isLoading={ props.isLoading }
-            />
-          ) }
+          <BlockGasUsed
+            gasUsed={ props.gas_used }
+            gasLimit={ props.gas_limit }
+            isLoading={ props.isLoading }
+          />
         </Flex>
       </Td>
-      { !config.UI.views.block.hiddenFields?.total_reward && (
+      { !config.UI.views.block.hiddenFields?.total_reward && !config.features.rollup.isEnabled && (
         <Td isNumeric display="flex" justifyContent="end">
           <Skeleton isLoaded={ !props.isLoading } display="inline-block">
             <span>{ totalReward.toFixed() }</span>
diff --git a/ui/address/coinBalance/AddressCoinBalanceChart.tsx b/ui/address/coinBalance/AddressCoinBalanceChart.tsx
index 4e551f1e8b..94542df368 100644
--- a/ui/address/coinBalance/AddressCoinBalanceChart.tsx
+++ b/ui/address/coinBalance/AddressCoinBalanceChart.tsx
@@ -15,10 +15,16 @@ const AddressCoinBalanceChart = ({ addressHash }: Props) => {
     pathParams: { hash: addressHash },
   });
 
-  const items = React.useMemo(() => data?.map(({ date, value }) => ({
-    date: new Date(date),
-    value: BigNumber(value).div(10 ** config.chain.currency.decimals).toNumber(),
-  })), [ data ]);
+  const items = React.useMemo(() => {
+    if (!data) {
+      return undefined;
+    }
+
+    return data.items.map(({ date, value }) => ({
+      date: new Date(date),
+      value: BigNumber(value).div(10 ** config.chain.currency.decimals).toNumber(),
+    }));
+  }, [ data ]);
 
   return (
     <ChartWidget
@@ -28,6 +34,7 @@ const AddressCoinBalanceChart = ({ addressHash }: Props) => {
       isLoading={ isPending }
       h="300px"
       units={ currencyUnits.ether }
+      emptyText={ data?.days && `Insufficient data for the past ${ data.days } days` }
     />
   );
 };
diff --git a/ui/address/coinBalance/AddressCoinBalanceHistory.tsx b/ui/address/coinBalance/AddressCoinBalanceHistory.tsx
index 31be2c4006..06563f58cb 100644
--- a/ui/address/coinBalance/AddressCoinBalanceHistory.tsx
+++ b/ui/address/coinBalance/AddressCoinBalanceHistory.tsx
@@ -7,7 +7,7 @@ import type { PaginationParams } from 'ui/shared/pagination/types';
 
 import type { ResourceError } from 'lib/api/resources';
 import { currencyUnits } from 'lib/units';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import { default as Thead } from 'ui/shared/TheadSticky';
@@ -27,7 +27,7 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
     <>
       <Hide below="lg" ssr={ false }>
         <Table variant="simple" size="sm">
-          <Thead top={ query.pagination.isVisible ? 80 : 0 }>
+          <Thead top={ query.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }>
             <Tr>
               <Th width="20%">Block</Th>
               <Th width="20%">Txn</Th>
diff --git a/ui/address/coinBalance/AddressCoinBalanceListItem.tsx b/ui/address/coinBalance/AddressCoinBalanceListItem.tsx
index 19ebf6f420..4f9a21dc74 100644
--- a/ui/address/coinBalance/AddressCoinBalanceListItem.tsx
+++ b/ui/address/coinBalance/AddressCoinBalanceListItem.tsx
@@ -5,11 +5,11 @@ import React from 'react';
 import type { AddressCoinBalanceHistoryItem } from 'types/api/address';
 
 import { WEI, ZERO } from 'lib/consts';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import { currencyUnits } from 'lib/units';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 type Props = AddressCoinBalanceHistoryItem & {
   page: number;
@@ -19,7 +19,6 @@ type Props = AddressCoinBalanceHistoryItem & {
 const AddressCoinBalanceListItem = (props: Props) => {
   const deltaBn = BigNumber(props.delta).div(WEI);
   const isPositiveDelta = deltaBn.gte(ZERO);
-  const timeAgo = useTimeAgoIncrement(props.block_timestamp, props.page === 1);
 
   return (
     <ListItemMobile rowGap={ 2 } isAnimated>
@@ -61,7 +60,12 @@ const AddressCoinBalanceListItem = (props: Props) => {
       ) }
       <Flex columnGap={ 2 } w="100%">
         <Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Age</Skeleton>
-        <Skeleton isLoaded={ !props.isLoading } color="text_secondary"><span>{ timeAgo }</span></Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ props.block_timestamp }
+          enableIncrement={ props.page === 1 }
+          isLoading={ props.isLoading }
+          color="text_secondary"
+        />
       </Flex>
     </ListItemMobile>
   );
diff --git a/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx b/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx
index 0e87a4d7fa..eff93d79a2 100644
--- a/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx
+++ b/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx
@@ -5,9 +5,9 @@ import React from 'react';
 import type { AddressCoinBalanceHistoryItem } from 'types/api/address';
 
 import { WEI, ZERO } from 'lib/consts';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 type Props = AddressCoinBalanceHistoryItem & {
   page: number;
@@ -17,7 +17,6 @@ type Props = AddressCoinBalanceHistoryItem & {
 const AddressCoinBalanceTableItem = (props: Props) => {
   const deltaBn = BigNumber(props.delta).div(WEI);
   const isPositiveDelta = deltaBn.gte(ZERO);
-  const timeAgo = useTimeAgoIncrement(props.block_timestamp, props.page === 1);
 
   return (
     <Tr>
@@ -43,9 +42,13 @@ const AddressCoinBalanceTableItem = (props: Props) => {
         ) }
       </Td>
       <Td>
-        <Skeleton isLoaded={ !props.isLoading } color="text_secondary" display="inline-block">
-          <span>{ timeAgo }</span>
-        </Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ props.block_timestamp }
+          enableIncrement={ props.page === 1 }
+          isLoading={ props.isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
       </Td>
       <Td isNumeric pr={ 1 }>
         <Skeleton isLoaded={ !props.isLoading } color="text_secondary" display="inline-block">
diff --git a/ui/address/contract/ContractCode.pw.tsx b/ui/address/contract/ContractCode.pw.tsx
index cbd660a941..179f483513 100644
--- a/ui/address/contract/ContractCode.pw.tsx
+++ b/ui/address/contract/ContractCode.pw.tsx
@@ -1,125 +1,70 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as addressMock from 'mocks/address/address';
 import { contractAudits } from 'mocks/contract/audits';
 import * as contractMock from 'mocks/contract/info';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
 import * as socketServer from 'playwright/fixtures/socketServer';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
-import MockAddressPage from 'ui/address/testUtils/MockAddressPage';
+import { test, expect } from 'playwright/lib';
 
-import ContractCode from './ContractCode';
+import ContractCode from './specs/ContractCode';
 
-const addressHash = 'hash';
-const CONTRACT_API_URL = buildApiUrl('contract', { hash: addressHash });
-const CONTRACT_AUDITS_API_URL = buildApiUrl('contract_security_audits', { hash: addressHash });
 const hooksConfig = {
   router: {
-    query: { hash: addressHash },
+    query: { hash: addressMock.contract.hash, tab: 'contract_code' },
   },
 };
 
-const test = base.extend<socketServer.SocketServerFixture>({
-  createSocket: socketServer.createSocket,
-});
-
 // FIXME
 // test cases which use socket cannot run in parallel since the socket server always run on the same port
 test.describe.configure({ mode: 'serial' });
 
-test('full view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
-  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMock.withChangedByteCode),
-  }));
-
-  const ADDRESS_API_URL = buildApiUrl('address', { hash: addressHash });
-  await page.route(ADDRESS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(addressMock.contract),
-  }));
-
-  const PROXY_CONTRACT_API_URL = buildApiUrl('contract', { hash: addressMock.contract.implementation_address as string });
-  await page.route(PROXY_CONTRACT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMock.withChangedByteCode),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <MockAddressPage>
-        <ContractCode addressHash={ addressHash } noSocket/>
-      </MockAddressPage>
-    </TestApp>,
-    { hooksConfig },
-  );
+let addressApiUrl: string;
 
-  await expect(component).toHaveScreenshot();
+test.beforeEach(async({ mockApiResponse, page }) => {
+  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => {
+    route.abort();
+  });
+  addressApiUrl = await mockApiResponse('address', addressMock.contract, { pathParams: { hash: addressMock.contract.hash } });
 });
 
-test('verified with changed byte code socket', async({ mount, page, createSocket }) => {
-  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMock.verified),
-  }));
-  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
+test('full view +@mobile +@dark-mode', async({ render, mockApiResponse, createSocket }) => {
+  await mockApiResponse('contract', contractMock.withChangedByteCode, { pathParams: { hash: addressMock.contract.hash } });
+  await mockApiResponse('contract', contractMock.withChangedByteCode, { pathParams: { hash: addressMock.contract.implementations?.[0].address as string } });
 
-  const component = await mount(
-    <TestApp withSocket>
-      <ContractCode addressHash={ addressHash }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const component = await render(<ContractCode/>, { hooksConfig }, { withSocket: true });
+  await createSocket();
 
+  await expect(component).toHaveScreenshot();
+});
+
+test('verified with changed byte code socket', async({ render, mockApiResponse, createSocket }) => {
+  await mockApiResponse('contract', contractMock.verified, { pathParams: { hash: addressMock.contract.hash } });
+
+  const component = await render(<ContractCode/>, { hooksConfig }, { withSocket: true });
   const socket = await createSocket();
-  const channel = await socketServer.joinChannel(socket, 'addresses:' + addressHash.toLowerCase());
+  const channel = await socketServer.joinChannel(socket, 'addresses:' + addressMock.contract.hash.toLowerCase());
   socketServer.sendMessage(socket, channel, 'changed_bytecode', {});
 
   await expect(component).toHaveScreenshot();
 });
 
-test('verified via lookup in eth_bytecode_db', async({ mount, page, createSocket }) => {
-  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMock.nonVerified),
-  }));
-  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
-
-  await mount(
-    <TestApp withSocket>
-      <ContractCode addressHash={ addressHash }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('verified via lookup in eth_bytecode_db', async({ render, mockApiResponse, createSocket, page }) => {
+  const contractApiUrl = await mockApiResponse('contract', contractMock.nonVerified, { pathParams: { hash: addressMock.contract.hash } });
+  await render(<ContractCode/>, { hooksConfig }, { withSocket: true });
 
   const socket = await createSocket();
-  const channel = await socketServer.joinChannel(socket, 'addresses:' + addressHash.toLowerCase());
-
-  await page.waitForResponse(CONTRACT_API_URL);
+  const channel = await socketServer.joinChannel(socket, 'addresses:' + addressMock.contract.hash.toLowerCase());
+  await page.waitForResponse(contractApiUrl);
   socketServer.sendMessage(socket, channel, 'smart_contract_was_verified', {});
-
-  const request = await page.waitForRequest(CONTRACT_API_URL);
+  const request = await page.waitForRequest(addressApiUrl);
 
   expect(request).toBeTruthy();
 });
 
-test('verified with multiple sources', async({ mount, page }) => {
-  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMock.withMultiplePaths),
-  }));
-  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
-
-  await mount(
-    <TestApp>
-      <ContractCode addressHash={ addressHash } noSocket/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('verified with multiple sources', async({ render, page, mockApiResponse }) => {
+  await mockApiResponse('contract', contractMock.withMultiplePaths, { pathParams: { hash: addressMock.contract.hash } });
+  await render(<ContractCode/>, { hooksConfig }, { withSocket: true });
 
   const section = page.locator('section', { hasText: 'Contract source code' });
   await expect(section).toHaveScreenshot();
@@ -131,155 +76,82 @@ test('verified with multiple sources', async({ mount, page }) => {
   await expect(section).toHaveScreenshot();
 });
 
-test('verified via sourcify', async({ mount, page }) => {
-  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMock.verifiedViaSourcify),
-  }));
-  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
-
-  await mount(
-    <TestApp>
-      <ContractCode addressHash={ addressHash } noSocket/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('verified via sourcify', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse('contract', contractMock.verifiedViaSourcify, { pathParams: { hash: addressMock.contract.hash } });
+  await render(<ContractCode/>, { hooksConfig }, { withSocket: true });
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 110 } });
 });
 
-test('verified via eth bytecode db', async({ mount, page }) => {
-  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMock.verifiedViaEthBytecodeDb),
-  }));
-  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
-
-  await mount(
-    <TestApp>
-      <ContractCode addressHash={ addressHash } noSocket/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('verified via eth bytecode db', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse('contract', contractMock.verifiedViaEthBytecodeDb, { pathParams: { hash: addressMock.contract.hash } });
+  await render(<ContractCode/>, { hooksConfig }, { withSocket: true });
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 110 } });
 });
 
-test('self destructed', async({ mount, page }) => {
-  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMock.selfDestructed),
-  }));
-  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
-
-  await mount(
-    <TestApp>
-      <ContractCode addressHash={ addressHash } noSocket/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('self destructed', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse('contract', contractMock.selfDestructed, { pathParams: { hash: addressMock.contract.hash } });
+  await render(<ContractCode/>, { hooksConfig }, { withSocket: true });
 
   const section = page.locator('section', { hasText: 'Contract creation code' });
   await expect(section).toHaveScreenshot();
 });
 
-test('with twin address alert +@mobile', async({ mount, page }) => {
-  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMock.withTwinAddress),
-  }));
-  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
-
-  const component = await mount(
-    <TestApp>
-      <ContractCode addressHash={ addressHash } noSocket/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('with twin address alert +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('contract', contractMock.withTwinAddress, { pathParams: { hash: addressMock.contract.hash } });
+  const component = await render(<ContractCode/>, { hooksConfig }, { withSocket: true });
 
   await expect(component.getByRole('alert')).toHaveScreenshot();
 });
 
-test('with proxy address alert +@mobile', async({ mount, page }) => {
-  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMock.withProxyAddress),
-  }));
-  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
-
-  const component = await mount(
-    <TestApp>
-      <ContractCode addressHash={ addressHash } noSocket/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('with proxy address alert +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('contract', contractMock.withProxyAddress, { pathParams: { hash: addressMock.contract.hash } });
+  const component = await render(<ContractCode/>, { hooksConfig }, { withSocket: true });
 
   await expect(component.getByRole('alert')).toHaveScreenshot();
 });
 
-test('non verified', async({ mount, page }) => {
-  await page.route(CONTRACT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMock.nonVerified),
-  }));
-  await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
+test('with certified icon +@mobile', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse('contract', contractMock.certified, { pathParams: { hash: addressMock.contract.hash } });
+  await render(<ContractCode/>, { hooksConfig });
 
-  const component = await mount(
-    <TestApp>
-      <ContractCode addressHash={ addressHash } noSocket/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 120 } });
+});
+
+test('non verified', async({ render, mockApiResponse }) => {
+  await mockApiResponse('contract', contractMock.nonVerified, { pathParams: { hash: addressMock.contract.hash } });
+  const component = await render(<ContractCode/>, { hooksConfig }, { withSocket: true });
 
   await expect(component).toHaveScreenshot();
 });
 
+test('zkSync contract', async({ render, mockApiResponse, page, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.zkSyncRollup);
+  await mockApiResponse('contract', contractMock.zkSync, { pathParams: { hash: addressMock.contract.hash } });
+  await render(<ContractCode/>, { hooksConfig }, { withSocket: true });
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
+});
+
 test.describe('with audits feature', () => {
 
-  const withAuditsTest = test.extend({
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    context: contextWithEnvs(configs.UIEnvs.hasContractAuditReports) as any,
+  test.beforeEach(async({ mockEnvs }) => {
+    await mockEnvs(ENVS_MAP.hasContractAuditReports);
   });
 
-  withAuditsTest('no audits', async({ mount, page }) => {
-    await page.route(CONTRACT_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(contractMock.verified),
-    }));
-    await page.route(CONTRACT_AUDITS_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ items: [] }),
-    }));
-    await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
-
-    const component = await mount(
-      <TestApp>
-        <ContractCode addressHash={ addressHash } noSocket/>
-      </TestApp>,
-      { hooksConfig },
-    );
+  test('no audits', async({ render, mockApiResponse }) => {
+    await mockApiResponse('contract', contractMock.verified, { pathParams: { hash: addressMock.contract.hash } });
+    await mockApiResponse('contract_security_audits', { items: [] }, { pathParams: { hash: addressMock.contract.hash } });
+    const component = await render(<ContractCode/>, { hooksConfig }, { withSocket: true });
 
     await expect(component).toHaveScreenshot();
   });
 
-  withAuditsTest('has audits', async({ mount, page }) => {
-    await page.route(CONTRACT_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(contractMock.verified),
-    }));
-    await page.route(CONTRACT_AUDITS_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(contractAudits),
-    }));
-
-    await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/**', (route) => route.abort());
-
-    const component = await mount(
-      <TestApp>
-        <ContractCode addressHash={ addressHash } noSocket/>
-      </TestApp>,
-      { hooksConfig },
-    );
+  test('has audits', async({ render, mockApiResponse }) => {
+    await mockApiResponse('contract', contractMock.verified, { pathParams: { hash: addressMock.contract.hash } });
+    await mockApiResponse('contract_security_audits', contractAudits, { pathParams: { hash: addressMock.contract.hash } });
+    const component = await render(<ContractCode/>, { hooksConfig }, { withSocket: true });
 
     await expect(component).toHaveScreenshot();
   });
diff --git a/ui/address/contract/ContractCode.tsx b/ui/address/contract/ContractCode.tsx
index 7b77ebe3b5..a75f3a37fc 100644
--- a/ui/address/contract/ContractCode.tsx
+++ b/ui/address/contract/ContractCode.tsx
@@ -1,32 +1,37 @@
-import { Flex, Skeleton, Button, Grid, GridItem, Alert, Link, chakra, Box } from '@chakra-ui/react';
+import { Flex, Skeleton, Button, Grid, GridItem, Alert, chakra, Box, useColorModeValue } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
 import { useQueryClient } from '@tanstack/react-query';
+import type { Channel } from 'phoenix';
 import React from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
 import type { Address as AddressInfo } from 'types/api/address';
+import type { SmartContract } from 'types/api/contract';
 
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
-import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
+import type { ResourceError } from 'lib/api/resources';
+import { getResourceKey } from 'lib/api/useApiQuery';
 import { CONTRACT_LICENSES } from 'lib/contracts/licenses';
 import dayjs from 'lib/date/dayjs';
-import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
-import * as stubs from 'stubs/contract';
+import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import LinkExternal from 'ui/shared/LinkExternal';
-import LinkInternal from 'ui/shared/LinkInternal';
+import Hint from 'ui/shared/Hint';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
 
+import ContractCodeProxyPattern from './ContractCodeProxyPattern';
 import ContractSecurityAudits from './ContractSecurityAudits';
 import ContractSourceCode from './ContractSourceCode';
 
 type Props = {
   addressHash?: string;
-  // prop for pw tests only
-  noSocket?: boolean;
+  contractQuery: UseQueryResult<SmartContract, ResourceError<unknown>>;
+  channel: Channel | undefined;
 }
 
 type InfoItemProps = {
@@ -34,30 +39,37 @@ type InfoItemProps = {
   content: string | React.ReactNode;
   className?: string;
   isLoading: boolean;
+  hint?: string;
 }
 
-const InfoItem = chakra(({ label, content, className, isLoading }: InfoItemProps) => (
+const InfoItem = chakra(({ label, content, hint, className, isLoading }: InfoItemProps) => (
   <GridItem display="flex" columnGap={ 6 } wordBreak="break-all" className={ className } alignItems="baseline">
-    <Skeleton isLoaded={ !isLoading } w="170px" flexShrink={ 0 } fontWeight={ 500 }>{ label }</Skeleton>
+    <Skeleton isLoaded={ !isLoading } w="170px" flexShrink={ 0 } fontWeight={ 500 }>
+      <Flex alignItems="center">
+        { label }
+        { hint && (
+          <Hint
+            label={ hint }
+            ml={ 2 }
+            color={ useColorModeValue('gray.600', 'gray.400') }
+            tooltipProps={{ placement: 'bottom' }}
+          />
+        ) }
+      </Flex>
+    </Skeleton>
     <Skeleton isLoaded={ !isLoading }>{ content }</Skeleton>
   </GridItem>
 ));
 
-const ContractCode = ({ addressHash, noSocket }: Props) => {
-  const [ isQueryEnabled, setIsQueryEnabled ] = React.useState(false);
+const rollupFeature = config.features.rollup;
+
+const ContractCode = ({ addressHash, contractQuery, channel }: Props) => {
   const [ isChangedBytecodeSocket, setIsChangedBytecodeSocket ] = React.useState<boolean>();
 
   const queryClient = useQueryClient();
   const addressInfo = queryClient.getQueryData<AddressInfo>(getResourceKey('address', { pathParams: { hash: addressHash } }));
 
-  const { data, isPlaceholderData, isError } = useApiQuery('contract', {
-    pathParams: { hash: addressHash },
-    queryOptions: {
-      enabled: Boolean(addressHash) && (noSocket || isQueryEnabled),
-      refetchOnMount: false,
-      placeholderData: addressInfo?.is_verified ? stubs.CONTRACT_CODE_VERIFIED : stubs.CONTRACT_CODE_UNVERIFIED,
-    },
-  });
+  const { data, isPlaceholderData, isError } = contractQuery;
 
   const handleChangedBytecodeMessage: SocketMessage.AddressChangedBytecode['handler'] = React.useCallback(() => {
     setIsChangedBytecodeSocket(true);
@@ -72,14 +84,6 @@ const ContractCode = ({ addressHash, noSocket }: Props) => {
     });
   }, [ addressHash, queryClient ]);
 
-  const enableQuery = React.useCallback(() => setIsQueryEnabled(true), []);
-
-  const channel = useSocketChannel({
-    topic: `addresses:${ addressHash?.toLowerCase() }`,
-    isDisabled: !addressHash,
-    onJoin: enableQuery,
-    onSocketError: enableQuery,
-  });
   useSocketMessage({
     channel,
     event: 'changed_bytecode',
@@ -195,9 +199,24 @@ const ContractCode = ({ addressHash, noSocket }: Props) => {
     return null;
   })();
 
+  const contractNameWithCertifiedIcon = data?.is_verified ? (
+    <Flex alignItems="center">
+      { data.name }
+      { data.certified && <ContractCertifiedLabel iconSize={ 5 } boxSize={ 5 } ml={ 2 }/> }
+    </Flex>
+  ) : null;
+
   return (
     <>
       <Flex flexDir="column" rowGap={ 2 } mb={ 6 } _empty={{ display: 'none' }}>
+        { data?.is_blueprint && (
+          <Box>
+            <span>This is an </span>
+            <LinkExternal href="https://eips.ethereum.org/EIPS/eip-5202">
+              ERC-5202 Blueprint contract
+            </LinkExternal>
+          </Box>
+        ) }
         { data?.is_verified && (
           <Skeleton isLoaded={ !isPlaceholderData }>
             <Alert status="success" flexWrap="wrap" rowGap={ 3 } columnGap={ 5 }>
@@ -212,11 +231,11 @@ const ContractCode = ({ addressHash, noSocket }: Props) => {
             Warning! Contract bytecode has been changed and does not match the verified one. Therefore, interaction with this smart contract may be risky.
           </Alert>
         ) }
-        { !data?.is_verified && data?.verified_twin_address_hash && !data?.minimal_proxy_address_hash && (
+        { !data?.is_verified && data?.verified_twin_address_hash && (!data?.proxy_type || data.proxy_type === 'unknown') && (
           <Alert status="warning" whiteSpace="pre-wrap" flexWrap="wrap">
             <span>Contract is not verified. However, we found a verified contract with the same bytecode in Blockscout DB </span>
             <AddressEntity
-              address={{ hash: data.verified_twin_address_hash, is_contract: true, implementation_name: null }}
+              address={{ hash: data.verified_twin_address_hash, is_contract: true }}
               truncation="constant"
               fontSize="sm"
               fontWeight="500"
@@ -228,33 +247,31 @@ const ContractCode = ({ addressHash, noSocket }: Props) => {
             <span> page</span>
           </Alert>
         ) }
-        { data?.minimal_proxy_address_hash && (
-          <Alert status="warning" flexWrap="wrap" whiteSpace="pre-wrap">
-            <span>Minimal Proxy Contract for </span>
-            <AddressEntity
-              address={{ hash: data.minimal_proxy_address_hash, is_contract: true, implementation_name: null }}
-              truncation="constant"
-              fontSize="sm"
-              fontWeight="500"
-              noCopy
-            />
-            <span>. </span>
-            <Box>
-              <Link href="https://eips.ethereum.org/EIPS/eip-1167">EIP-1167</Link>
-              <span> - minimal bytecode implementation that delegates all calls to a known address</span>
-            </Box>
-          </Alert>
-        ) }
+        { data?.proxy_type && <ContractCodeProxyPattern type={ data.proxy_type }/> }
       </Flex>
       { data?.is_verified && (
         <Grid templateColumns={{ base: '1fr', lg: '1fr 1fr' }} rowGap={ 4 } columnGap={ 6 } mb={ 8 }>
-          { data.name && <InfoItem label="Contract name" content={ data.name } isLoading={ isPlaceholderData }/> }
+          { data.name && <InfoItem label="Contract name" content={ contractNameWithCertifiedIcon } isLoading={ isPlaceholderData }/> }
           { data.compiler_version && <InfoItem label="Compiler version" content={ data.compiler_version } isLoading={ isPlaceholderData }/> }
+          { data.zk_compiler_version && <InfoItem label="ZK compiler version" content={ data.zk_compiler_version } isLoading={ isPlaceholderData }/> }
           { data.evm_version && <InfoItem label="EVM version" content={ data.evm_version } textTransform="capitalize" isLoading={ isPlaceholderData }/> }
-          { licenseLink && <InfoItem label="License" content={ licenseLink } isLoading={ isPlaceholderData }/> }
+          { licenseLink && (
+            <InfoItem
+              label="License"
+              content={ licenseLink }
+              hint="License type is entered manually during verification. The initial source code may contain a different license type than the one displayed."
+              isLoading={ isPlaceholderData }
+            />
+          ) }
           { typeof data.optimization_enabled === 'boolean' &&
             <InfoItem label="Optimization enabled" content={ data.optimization_enabled ? 'true' : 'false' } isLoading={ isPlaceholderData }/> }
-          { data.optimization_runs && <InfoItem label="Optimization runs" content={ String(data.optimization_runs) } isLoading={ isPlaceholderData }/> }
+          { data.optimization_runs !== null && (
+            <InfoItem
+              label={ rollupFeature.isEnabled && rollupFeature.type === 'zkSync' ? 'Optimization mode' : 'Optimization runs' }
+              content={ String(data.optimization_runs) }
+              isLoading={ isPlaceholderData }
+            />
+          ) }
           { data.verified_at &&
             <InfoItem label="Verified at" content={ dayjs(data.verified_at).format('llll') } wordBreak="break-word" isLoading={ isPlaceholderData }/> }
           { data.file_path && <InfoItem label="Contract file path" content={ data.file_path } wordBreak="break-word" isLoading={ isPlaceholderData }/> }
@@ -276,10 +293,10 @@ const ContractCode = ({ addressHash, noSocket }: Props) => {
             isLoading={ isPlaceholderData }
           />
         ) }
-        { data?.source_code && (
+        { data?.source_code && addressHash && (
           <ContractSourceCode
             address={ addressHash }
-            implementationAddress={ addressInfo?.implementation_address ?? undefined }
+            implementations={ addressInfo?.implementations || undefined }
           />
         ) }
         { data?.compiler_settings ? (
diff --git a/ui/address/contract/ContractCodeIdes.tsx b/ui/address/contract/ContractCodeIdes.tsx
index 5207f74c68..fc06317043 100644
--- a/ui/address/contract/ContractCodeIdes.tsx
+++ b/ui/address/contract/ContractCodeIdes.tsx
@@ -1,16 +1,29 @@
-import { Flex, Button, chakra, Popover, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, Image, useColorModeValue } from '@chakra-ui/react';
+import {
+  Flex,
+  Button,
+  chakra,
+  PopoverTrigger,
+  PopoverBody,
+  PopoverContent,
+  Image,
+  Skeleton,
+  useDisclosure,
+  useColorModeValue,
+} from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
+import Popover from 'ui/shared/chakra/Popover';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkExternal from 'ui/shared/LinkExternal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
 
 interface Props {
   className?: string;
   hash: string;
+  isLoading?: string;
 }
 
-const ContractCodeIde = ({ className, hash }: Props) => {
+const ContractCodeIde = ({ className, hash, isLoading }: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
   const defaultIconColor = useColorModeValue('gray.600', 'gray.500');
 
@@ -31,6 +44,10 @@ const ContractCodeIde = ({ className, hash }: Props) => {
       });
   }, [ defaultIconColor, hash ]);
 
+  if (isLoading) {
+    return <Skeleton h={ 8 } w="92px" borderRadius="base"/>;
+  }
+
   if (ideLinks.length === 0) {
     return null;
   }
@@ -44,6 +61,7 @@ const ContractCodeIde = ({ className, hash }: Props) => {
           variant="outline"
           colorScheme="gray"
           onClick={ onToggle }
+          isActive={ isOpen }
           aria-label="Open source code in IDE"
           fontWeight={ 500 }
           px={ 2 }
diff --git a/ui/address/contract/ContractCodeProxyPattern.pw.tsx b/ui/address/contract/ContractCodeProxyPattern.pw.tsx
new file mode 100644
index 0000000000..a2e97768c0
--- /dev/null
+++ b/ui/address/contract/ContractCodeProxyPattern.pw.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { test, expect } from 'playwright/lib';
+
+import ContractCodeProxyPattern from './ContractCodeProxyPattern';
+
+test('proxy type with link +@mobile', async({ render }) => {
+  const component = await render(<ContractCodeProxyPattern type="eip1167"/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('proxy type with link but without description', async({ render }) => {
+  const component = await render(<ContractCodeProxyPattern type="master_copy"/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('proxy type without link', async({ render }) => {
+  const component = await render(<ContractCodeProxyPattern type="basic_implementation"/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/contract/ContractCodeProxyPattern.tsx b/ui/address/contract/ContractCodeProxyPattern.tsx
new file mode 100644
index 0000000000..9279af0f62
--- /dev/null
+++ b/ui/address/contract/ContractCodeProxyPattern.tsx
@@ -0,0 +1,89 @@
+import { Alert } from '@chakra-ui/react';
+import React from 'react';
+
+import type { SmartContractProxyType } from 'types/api/contract';
+
+import LinkExternal from 'ui/shared/links/LinkExternal';
+
+interface Props {
+  type: NonNullable<SmartContractProxyType>;
+}
+
+const PROXY_TYPES: Record<NonNullable<SmartContractProxyType>, {
+  name: string;
+  link?: string;
+  description?: string;
+}> = {
+  eip1167: {
+    name: 'EIP-1167',
+    link: 'https://eips.ethereum.org/EIPS/eip-1167',
+    description: 'Minimal proxy',
+  },
+  eip1967: {
+    name: 'EIP-1967',
+    link: 'https://eips.ethereum.org/EIPS/eip-1967',
+    description: 'Proxy storage slots',
+  },
+  eip1822: {
+    name: 'EIP-1822',
+    link: 'https://eips.ethereum.org/EIPS/eip-1822',
+    description: 'Universal upgradeable proxy standard (UUPS)',
+  },
+  eip2535: {
+    name: 'EIP-2535',
+    link: 'https://eips.ethereum.org/EIPS/eip-2535',
+    description: 'Diamond proxy',
+  },
+  eip930: {
+    name: 'ERC-930',
+    link: 'https://github.com/ethereum/EIPs/issues/930',
+    description: 'Eternal storage',
+  },
+  clone_with_immutable_arguments: {
+    name: 'Clones with immutable arguments',
+    link: 'https://github.com/wighawag/clones-with-immutable-args',
+  },
+  master_copy: {
+    name: 'GnosisSafe',
+    link: 'https://github.com/safe-global/safe-smart-account',
+  },
+  comptroller: {
+    name: 'Compound protocol',
+    link: 'https://github.com/compound-finance/compound-protocol',
+  },
+  basic_implementation: {
+    name: 'public implementation getter in proxy smart-contract',
+  },
+  basic_get_implementation: {
+    name: 'public getImplementation getter in proxy smart-contract',
+  },
+  unknown: {
+    name: 'Unknown proxy pattern',
+  },
+};
+
+const ContractCodeProxyPattern = ({ type }: Props) => {
+  const proxyInfo = PROXY_TYPES[type];
+
+  if (!proxyInfo || type === 'unknown') {
+    return null;
+  }
+
+  return (
+    <Alert status="warning" flexWrap="wrap" whiteSpace="pre-wrap">
+      { proxyInfo.link ? (
+        <>
+          This proxy smart-contract is detected via <LinkExternal href={ proxyInfo.link }>{ proxyInfo.name }</LinkExternal>
+          { proxyInfo.description && ` - ${ proxyInfo.description }` }
+        </>
+      ) : (
+        <>
+          This proxy smart-contract is detected via { proxyInfo.name }
+          { proxyInfo.description && ` - ${ proxyInfo.description }` }
+        </>
+      ) }
+    </Alert>
+  );
+};
+
+export default React.memo(ContractCodeProxyPattern);
diff --git a/ui/address/contract/ContractConnectWallet.tsx b/ui/address/contract/ContractConnectWallet.tsx
deleted file mode 100644
index 9263495bce..0000000000
--- a/ui/address/contract/ContractConnectWallet.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Alert, Button, Flex } from '@chakra-ui/react';
-import React from 'react';
-
-import useIsMobile from 'lib/hooks/useIsMobile';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import useWallet from 'ui/snippets/walletMenu/useWallet';
-
-const ContractConnectWallet = () => {
-  const { isModalOpening, isModalOpen, connect, disconnect, address, isWalletConnected } = useWallet({ source: 'Smart contracts' });
-  const isMobile = useIsMobile();
-
-  const content = (() => {
-    if (!isWalletConnected) {
-      return (
-        <>
-          <span>Disconnected</span>
-          <Button
-            ml={ 3 }
-            onClick={ connect }
-            size="sm"
-            variant="outline"
-            isLoading={ isModalOpening || isModalOpen }
-            loadingText="Connect wallet"
-          >
-              Connect wallet
-          </Button>
-        </>
-      );
-    }
-
-    return (
-      <Flex columnGap={ 3 } rowGap={ 3 } alignItems={{ base: 'flex-start', lg: 'center' }} flexDir={{ base: 'column', lg: 'row' }}>
-        <Flex alignItems="center">
-          <span>Connected to </span>
-          <AddressEntity
-            address={{ hash: address }}
-            truncation={ isMobile ? 'constant' : 'dynamic' }
-            fontWeight={ 600 }
-            ml={ 2 }
-          />
-        </Flex>
-        <Button onClick={ disconnect } size="sm" variant="outline">Disconnect</Button>
-      </Flex>
-    );
-  })();
-
-  return <Alert mb={ 6 } status={ address ? 'success' : 'warning' }>{ content }</Alert>;
-};
-
-export default ContractConnectWallet;
diff --git a/ui/address/contract/ContractCustomAbiAlert.tsx b/ui/address/contract/ContractCustomAbiAlert.tsx
deleted file mode 100644
index f78566dff3..0000000000
--- a/ui/address/contract/ContractCustomAbiAlert.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Alert } from '@chakra-ui/react';
-import React from 'react';
-
-const ContractCustomAbiAlert = () => {
-  return (
-    <Alert status="warning" mb={ 4 }>
-        Note: Contract with custom ABI is only meant for debugging purpose and it is the user’s responsibility to ensure that the provided ABI
-        matches the contract, otherwise errors may occur or results returned may be incorrect.
-        Blockscout is not responsible for any losses that arise from the use of Read & Write contract.
-    </Alert>
-  );
-};
-
-export default React.memo(ContractCustomAbiAlert);
diff --git a/ui/address/contract/ContractExternalLibraries.tsx b/ui/address/contract/ContractExternalLibraries.tsx
index 4c89b5af69..83df015e2b 100644
--- a/ui/address/contract/ContractExternalLibraries.tsx
+++ b/ui/address/contract/ContractExternalLibraries.tsx
@@ -7,10 +7,10 @@ import {
   Modal,
   ModalCloseButton,
   ModalContent,
-  Popover,
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
+  Skeleton,
   StackDivider,
   useDisclosure,
   VStack,
@@ -21,12 +21,14 @@ import type { SmartContractExternalLibrary } from 'types/api/contract';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { apos } from 'lib/html-entities';
+import Popover from 'ui/shared/chakra/Popover';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   className?: string;
   data: Array<SmartContractExternalLibrary>;
+  isLoading?: boolean;
 }
 
 const Item = (data: SmartContractExternalLibrary) => {
@@ -34,7 +36,7 @@ const Item = (data: SmartContractExternalLibrary) => {
     <Flex flexDir="column" py={ 2 } w="100%" rowGap={ 1 }>
       <Box>{ data.name }</Box>
       <AddressEntity
-        address={{ hash: data.address_hash, is_contract: true, implementation_name: null }}
+        address={{ hash: data.address_hash, is_contract: true }}
         query={{ tab: 'contract' }}
         fontSize="sm"
         fontWeight="500"
@@ -44,10 +46,14 @@ const Item = (data: SmartContractExternalLibrary) => {
   );
 };
 
-const ContractExternalLibraries = ({ className, data }: Props) => {
+const ContractExternalLibraries = ({ className, data, isLoading }: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
   const isMobile = useIsMobile();
 
+  if (isLoading) {
+    return <Skeleton h={ 8 } w="150px" borderRadius="base"/>;
+  }
+
   if (data.length === 0) {
     return null;
   }
@@ -59,6 +65,7 @@ const ContractExternalLibraries = ({ className, data }: Props) => {
       variant="outline"
       colorScheme="gray"
       onClick={ onToggle }
+      isActive={ isOpen }
       fontWeight={ 600 }
       px={ 2 }
       aria-label="View external libraries"
@@ -80,6 +87,8 @@ const ContractExternalLibraries = ({ className, data }: Props) => {
         divider={ <StackDivider borderColor="divider"/> }
         spacing={ 2 }
         mt={ 4 }
+        maxH={{ lg: '50vh' }}
+        overflowY="scroll"
       >
         { data.map((item) => <Item key={ item.address_hash } { ...item }/>) }
       </VStack>
diff --git a/ui/address/contract/ContractImplementationAddress.tsx b/ui/address/contract/ContractImplementationAddress.tsx
deleted file mode 100644
index 2483bd1c44..0000000000
--- a/ui/address/contract/ContractImplementationAddress.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Flex } from '@chakra-ui/react';
-import { useQueryClient } from '@tanstack/react-query';
-import React from 'react';
-
-import type { Address as TAddress } from 'types/api/address';
-
-import { getResourceKey } from 'lib/api/useApiQuery';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-
-interface Props {
-  hash: string | undefined;
-}
-
-const ContractImplementationAddress = ({ hash }: Props) => {
-  const queryClient = useQueryClient();
-  const data = queryClient.getQueryData<TAddress>(getResourceKey('address', {
-    pathParams: { hash },
-  }));
-
-  if (!data?.implementation_address) {
-    return null;
-  }
-
-  return (
-    <Flex mb={ 6 } flexWrap="wrap" columnGap={ 2 }>
-      <span>Implementation address:</span>
-      <AddressEntity address={{ hash: data.implementation_address, is_contract: true }} noIcon noCopy/>
-    </Flex>
-  );
-};
-
-export default React.memo(ContractImplementationAddress);
diff --git a/ui/address/contract/ContractMethodConstant.tsx b/ui/address/contract/ContractMethodConstant.tsx
deleted file mode 100644
index 016668e89b..0000000000
--- a/ui/address/contract/ContractMethodConstant.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Checkbox, Flex, chakra } from '@chakra-ui/react';
-import BigNumber from 'bignumber.js';
-import type { ChangeEvent } from 'react';
-import React from 'react';
-import { getAddress } from 'viem';
-
-import type { SmartContractMethodOutput } from 'types/api/contract';
-
-import { WEI } from 'lib/consts';
-import { currencyUnits } from 'lib/units';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-
-function castValueToString(value: number | string | boolean | object | bigint | undefined): string {
-  switch (typeof value) {
-    case 'string':
-      return value;
-    case 'boolean':
-      return String(value);
-    case 'undefined':
-      return '';
-    case 'number':
-      return value.toLocaleString(undefined, { useGrouping: false });
-    case 'bigint':
-      return value.toString();
-    case 'object':
-      return JSON.stringify(value, undefined, 2);
-  }
-}
-
-interface Props {
-  data: SmartContractMethodOutput;
-}
-
-const ContractMethodStatic = ({ data }: Props) => {
-  const [ value, setValue ] = React.useState<string>(castValueToString(data.value));
-  const [ label, setLabel ] = React.useState(currencyUnits.wei.toUpperCase());
-
-  const handleCheckboxChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
-    const initialValue = castValueToString(data.value);
-
-    if (event.target.checked) {
-      setValue(BigNumber(initialValue).div(WEI).toFixed());
-      setLabel(currencyUnits.ether.toUpperCase());
-    } else {
-      setValue(BigNumber(initialValue).toFixed());
-      setLabel(currencyUnits.wei.toUpperCase());
-    }
-  }, [ data.value ]);
-
-  const content = (() => {
-    if (typeof data.value === 'string' && data.type === 'address' && data.value) {
-      return (
-        <AddressEntity
-          address={{ hash: getAddress(data.value) }}
-          noIcon
-        />
-      );
-    }
-
-    return <chakra.span wordBreak="break-all" whiteSpace="pre-wrap">({ data.type }): { String(value) }</chakra.span>;
-  })();
-
-  return (
-    <Flex flexDir={{ base: 'column', lg: 'row' }} columnGap={ 2 } rowGap={ 2 }>
-      { content }
-      { (data.type.includes('int256') || data.type.includes('int128')) && <Checkbox onChange={ handleCheckboxChange }>{ label }</Checkbox> }
-    </Flex>
-  );
-};
-
-export default ContractMethodStatic;
diff --git a/ui/address/contract/ContractMethodsAccordion.tsx b/ui/address/contract/ContractMethodsAccordion.tsx
deleted file mode 100644
index b1e4c4bf6b..0000000000
--- a/ui/address/contract/ContractMethodsAccordion.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Accordion, Box, Flex, Link } from '@chakra-ui/react';
-import _range from 'lodash/range';
-import React from 'react';
-import { scroller } from 'react-scroll';
-
-import type { SmartContractMethod } from 'types/api/contract';
-
-import ContractMethodsAccordionItem from './ContractMethodsAccordionItem';
-
-interface Props<T extends SmartContractMethod> {
-  data: Array<T>;
-  addressHash?: string;
-  renderItemContent: (item: T, index: number, id: number) => React.ReactNode;
-  tab: string;
-}
-
-const ContractMethodsAccordion = <T extends SmartContractMethod>({ data, addressHash, renderItemContent, tab }: Props<T>) => {
-  const [ expandedSections, setExpandedSections ] = React.useState<Array<number>>(data.length === 1 ? [ 0 ] : []);
-  const [ id, setId ] = React.useState(0);
-
-  React.useEffect(() => {
-    const hash = window.location.hash.replace('#', '');
-
-    if (!hash) {
-      return;
-    }
-
-    const index = data.findIndex((item) => 'method_id' in item && item.method_id === hash);
-    if (index > -1) {
-      scroller.scrollTo(`method_${ hash }`, {
-        duration: 500,
-        smooth: true,
-        offset: -100,
-      });
-      setExpandedSections([ index ]);
-    }
-  }, [ data ]);
-
-  const handleAccordionStateChange = React.useCallback((newValue: Array<number>) => {
-    setExpandedSections(newValue);
-  }, []);
-
-  const handleExpandAll = React.useCallback(() => {
-    if (!data) {
-      return;
-    }
-
-    if (expandedSections.length < data.length) {
-      setExpandedSections(_range(0, data.length));
-    } else {
-      setExpandedSections([]);
-    }
-  }, [ data, expandedSections.length ]);
-
-  const handleReset = React.useCallback(() => {
-    setId((id) => id + 1);
-  }, []);
-
-  if (data.length === 0) {
-    return null;
-  }
-
-  return (
-    <>
-      <Flex mb={ 3 }>
-        <Box fontWeight={ 500 } mr="auto">Contract information</Box>
-        { data.length > 1 && (
-          <Link onClick={ handleExpandAll }>
-            { expandedSections.length === data.length ? 'Collapse' : 'Expand' } all
-          </Link>
-        ) }
-        <Link onClick={ handleReset } ml={ 3 }>Reset</Link>
-      </Flex>
-      <Accordion allowMultiple position="relative" onChange={ handleAccordionStateChange } index={ expandedSections }>
-        { data.map((item, index) => (
-          <ContractMethodsAccordionItem
-            key={ index }
-            data={ item }
-            id={ id }
-            index={ index }
-            addressHash={ addressHash }
-            renderContent={ renderItemContent as (item: SmartContractMethod, index: number, id: number) => React.ReactNode }
-            tab={ tab }
-          />
-        )) }
-      </Accordion>
-    </>
-  );
-};
-
-export default React.memo(ContractMethodsAccordion) as typeof ContractMethodsAccordion;
diff --git a/ui/address/contract/ContractMethodsAccordionItem.tsx b/ui/address/contract/ContractMethodsAccordionItem.tsx
deleted file mode 100644
index b30c0d998b..0000000000
--- a/ui/address/contract/ContractMethodsAccordionItem.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Tooltip, useClipboard, useDisclosure } from '@chakra-ui/react';
-import React from 'react';
-import { Element } from 'react-scroll';
-
-import type { SmartContractMethod } from 'types/api/contract';
-
-import { route } from 'nextjs-routes';
-
-import config from 'configs/app';
-import Hint from 'ui/shared/Hint';
-import IconSvg from 'ui/shared/IconSvg';
-
-interface Props<T extends SmartContractMethod> {
-  data: T;
-  index: number;
-  id: number;
-  addressHash?: string;
-  renderContent: (item: T, index: number, id: number) => React.ReactNode;
-  tab: string;
-}
-
-const ContractMethodsAccordionItem = <T extends SmartContractMethod>({ data, index, id, addressHash, renderContent, tab }: Props<T>) => {
-  const url = React.useMemo(() => {
-    if (!('method_id' in data)) {
-      return '';
-    }
-
-    return config.app.baseUrl + route({
-      pathname: '/address/[hash]',
-      query: {
-        hash: addressHash ?? '',
-        tab,
-      },
-      hash: data.method_id,
-    });
-  }, [ addressHash, data, tab ]);
-
-  const { hasCopied, onCopy } = useClipboard(url, 1000);
-  const { isOpen, onOpen, onClose } = useDisclosure();
-
-  const handleCopyLinkClick = React.useCallback((event: React.MouseEvent) => {
-    event.stopPropagation();
-    onCopy();
-  }, [ onCopy ]);
-
-  return (
-    <AccordionItem as="section" _first={{ borderTopWidth: 0 }} _last={{ borderBottomWidth: 0 }}>
-      { ({ isExpanded }) => (
-        <>
-          <Element as="h2" name={ 'method_id' in data ? `method_${ data.method_id }` : '' }>
-            <AccordionButton px={ 0 } py={ 3 } _hover={{ bgColor: 'inherit' }} wordBreak="break-all" textAlign="left" as="div" cursor="pointer">
-              { 'method_id' in data && (
-                <Tooltip label={ hasCopied ? 'Copied!' : 'Copy link' } isOpen={ isOpen || hasCopied } onClose={ onClose }>
-                  <Box
-                    boxSize={ 5 }
-                    color="text_secondary"
-                    _hover={{ color: 'link_hovered' }}
-                    mr={ 2 }
-                    onClick={ handleCopyLinkClick }
-                    onMouseEnter={ onOpen }
-                    onMouseLeave={ onClose }
-                  >
-                    <IconSvg name="link" boxSize={ 5 }/>
-                  </Box>
-                </Tooltip>
-              ) }
-              <Box as="span" fontWeight={ 500 } mr={ 1 }>
-                { index + 1 }. { data.type === 'fallback' || data.type === 'receive' ? data.type : data.name }
-              </Box>
-              { data.type === 'fallback' && (
-                <Hint
-                  label={
-                    `The fallback function is executed on a call to the contract if none of the other functions match 
-                    the given function signature, or if no data was supplied at all and there is no receive Ether function. 
-                    The fallback function always receives data, but in order to also receive Ether it must be marked payable.`
-                  }/>
-              ) }
-              { data.type === 'receive' && (
-                <Hint
-                  label={
-                    `The receive function is executed on a call to the contract with empty calldata. 
-                    This is the function that is executed on plain Ether transfers (e.g. via .send() or .transfer()). 
-                    If no such function exists, but a payable fallback function exists, the fallback function will be called on a plain Ether transfer. 
-                    If neither a receive Ether nor a payable fallback function is present, 
-                    the contract cannot receive Ether through regular transactions and throws an exception.`
-                  }/>
-              ) }
-              <AccordionIcon transform={ isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)' } color="gray.500"/>
-            </AccordionButton>
-          </Element>
-          <AccordionPanel pb={ 4 } pr={ 0 } pl="28px" w="calc(100% - 6px)">
-            { renderContent(data, index, id) }
-          </AccordionPanel>
-        </>
-      ) }
-    </AccordionItem>
-  );
-};
-
-export default React.memo(ContractMethodsAccordionItem);
diff --git a/ui/address/contract/ContractRead.pw.tsx b/ui/address/contract/ContractRead.pw.tsx
deleted file mode 100644
index 1dc215d070..0000000000
--- a/ui/address/contract/ContractRead.pw.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { test, expect } from '@playwright/experimental-ct-react';
-import React from 'react';
-
-import * as contractMethodsMock from 'mocks/contract/methods';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-
-import ContractRead from './ContractRead';
-
-const addressHash = 'hash';
-const CONTRACT_READ_METHODS_API_URL = buildApiUrl('contract_methods_read', { hash: addressHash }) + '?is_custom_abi=false';
-const CONTRACT_QUERY_METHOD_API_URL = buildApiUrl('contract_method_query', { hash: addressHash }) + '?is_custom_abi=false';
-const hooksConfig = {
-  router: {
-    query: { hash: addressHash },
-  },
-};
-
-test('base view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(CONTRACT_READ_METHODS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMethodsMock.read),
-  }));
-  await page.route(CONTRACT_QUERY_METHOD_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMethodsMock.readResultSuccess),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <ContractRead/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  await component.getByText(/expand all/i).click();
-
-  await expect(component).toHaveScreenshot();
-
-  await component.getByPlaceholder(/address/i).fill('0xa113Ce24919C08a26C952E81681dAc861d6a2466');
-  await component.getByText(/read/i).click();
-
-  await component.getByText(/wei/i).click();
-
-  await expect(component).toHaveScreenshot();
-});
diff --git a/ui/address/contract/ContractRead.tsx b/ui/address/contract/ContractRead.tsx
deleted file mode 100644
index 7a2fd94ded..0000000000
--- a/ui/address/contract/ContractRead.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { Alert, Flex } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
-import React from 'react';
-
-import type { SmartContractReadMethod, SmartContractQueryMethodRead } from 'types/api/contract';
-
-import useApiFetch from 'lib/api/useApiFetch';
-import useApiQuery from 'lib/api/useApiQuery';
-import getQueryParamString from 'lib/router/getQueryParamString';
-import ContractMethodsAccordion from 'ui/address/contract/ContractMethodsAccordion';
-import ContentLoader from 'ui/shared/ContentLoader';
-import DataFetchAlert from 'ui/shared/DataFetchAlert';
-
-import ContractConnectWallet from './ContractConnectWallet';
-import ContractCustomAbiAlert from './ContractCustomAbiAlert';
-import ContractImplementationAddress from './ContractImplementationAddress';
-import ContractMethodConstant from './ContractMethodConstant';
-import ContractReadResult from './ContractReadResult';
-import ContractMethodForm from './methodForm/ContractMethodForm';
-import useWatchAccount from './useWatchAccount';
-
-const ContractRead = () => {
-  const apiFetch = useApiFetch();
-  const account = useWatchAccount();
-  const router = useRouter();
-
-  const tab = getQueryParamString(router.query.tab);
-  const addressHash = getQueryParamString(router.query.hash);
-  const isProxy = tab === 'read_proxy';
-  const isCustomAbi = tab === 'read_custom_methods';
-
-  const { data, isPending, isError } = useApiQuery(isProxy ? 'contract_methods_read_proxy' : 'contract_methods_read', {
-    pathParams: { hash: addressHash },
-    queryParams: {
-      is_custom_abi: isCustomAbi ? 'true' : 'false',
-      from: account?.address,
-    },
-    queryOptions: {
-      enabled: Boolean(addressHash),
-    },
-  });
-
-  const handleMethodFormSubmit = React.useCallback(async(item: SmartContractReadMethod, args: Array<unknown>) => {
-    return apiFetch<'contract_method_query', SmartContractQueryMethodRead>('contract_method_query', {
-      pathParams: { hash: addressHash },
-      queryParams: {
-        is_custom_abi: isCustomAbi ? 'true' : 'false',
-      },
-      fetchParams: {
-        method: 'POST',
-        body: {
-          args,
-          method_id: item.method_id,
-          contract_type: isProxy ? 'proxy' : 'regular',
-          from: account?.address,
-        },
-      },
-    });
-  }, [ account?.address, addressHash, apiFetch, isCustomAbi, isProxy ]);
-
-  const renderItemContent = React.useCallback((item: SmartContractReadMethod, index: number, id: number) => {
-    if (item.error) {
-      return <Alert status="error" fontSize="sm" wordBreak="break-word">{ item.error }</Alert>;
-    }
-
-    if (item.outputs?.some(({ value }) => value !== undefined && value !== null)) {
-      return (
-        <Flex flexDir="column" rowGap={ 1 }>
-          { item.outputs.map((output, index) => <ContractMethodConstant key={ index } data={ output }/>) }
-        </Flex>
-      );
-    }
-
-    return (
-      <ContractMethodForm
-        key={ id + '_' + index }
-        data={ item }
-        onSubmit={ handleMethodFormSubmit }
-        resultComponent={ ContractReadResult }
-        methodType="read"
-      />
-    );
-  }, [ handleMethodFormSubmit ]);
-
-  if (isError) {
-    return <DataFetchAlert/>;
-  }
-
-  if (isPending) {
-    return <ContentLoader/>;
-  }
-
-  if (data.length === 0 && !isProxy) {
-    return <span>No public read functions were found for this contract.</span>;
-  }
-
-  return (
-    <>
-      { isCustomAbi && <ContractCustomAbiAlert/> }
-      { account && <ContractConnectWallet/> }
-      { isProxy && <ContractImplementationAddress hash={ addressHash }/> }
-      <ContractMethodsAccordion data={ data } addressHash={ addressHash } renderItemContent={ renderItemContent } tab={ tab }/>
-    </>
-  );
-};
-
-export default React.memo(ContractRead);
diff --git a/ui/address/contract/ContractReadResult.pw.tsx b/ui/address/contract/ContractReadResult.pw.tsx
deleted file mode 100644
index 35b4991a0c..0000000000
--- a/ui/address/contract/ContractReadResult.pw.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { test, expect } from '@playwright/experimental-ct-react';
-import React from 'react';
-
-import type { ContractMethodReadResult } from './types';
-
-import * as contractMethodsMock from 'mocks/contract/methods';
-import TestApp from 'playwright/TestApp';
-
-import ContractReadResult from './ContractReadResult';
-
-const item = contractMethodsMock.read[0];
-const onSettle = () => Promise.resolve();
-
-test.use({ viewport: { width: 500, height: 500 } });
-
-test('default error', async({ mount }) => {
-  const result: ContractMethodReadResult = {
-    is_error: true,
-    result: {
-      error: 'I am an error',
-    },
-  };
-  const component = await mount(
-    <TestApp>
-      <ContractReadResult item={ item } onSettle={ onSettle } result={ result }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('error with code', async({ mount }) => {
-  const result: ContractMethodReadResult = {
-    is_error: true,
-    result: {
-      message: 'I am an error',
-      code: -32017,
-    },
-  };
-  const component = await mount(
-    <TestApp>
-      <ContractReadResult item={ item } onSettle={ onSettle } result={ result }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('raw error', async({ mount }) => {
-  const result: ContractMethodReadResult = {
-    is_error: true,
-    result: {
-      raw: '49276d20616c7761797320726576657274696e67207769746820616e206572726f72',
-    },
-  };
-  const component = await mount(
-    <TestApp>
-      <ContractReadResult item={ item } onSettle={ onSettle } result={ result }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('complex error', async({ mount }) => {
-  const result: ContractMethodReadResult = {
-    is_error: true,
-    result: {
-      method_call: 'SomeCustomError(address addr, uint256 balance)',
-      method_id: '50289a9f',
-      parameters: [
-        { name: 'addr', type: 'address', value: '0x850e73b42f48e91ebaedf8f00a74f6147e485c5a' },
-        { name: 'balance', type: 'uint256', value: '14' },
-      ],
-    },
-  };
-  const component = await mount(
-    <TestApp>
-      <ContractReadResult item={ item } onSettle={ onSettle } result={ result }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('success', async({ mount }) => {
-  const result: ContractMethodReadResult = {
-    is_error: false,
-    result: {
-      names: [ 'address' ],
-      output: [ { type: 'address', value: '0x0000000000000000000000000000000000000000' } ],
-    },
-  };
-  const component = await mount(
-    <TestApp>
-      <ContractReadResult item={ item } onSettle={ onSettle } result={ result }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('complex success', async({ mount }) => {
-  const result: ContractMethodReadResult = {
-    is_error: false,
-    result: {
-      names: [
-        [
-          'data',
-          [ 'totalSupply', 'owner', 'symbol' ],
-        ],
-        'supports721',
-        'page',
-      ],
-      output: [
-        {
-          type: 'tuple[uint256,address,string]',
-          value: [ 1000, '0xe150519ae293922cfe6217feba3add4726f5e851', 'AOC_INCUBATORS' ],
-        },
-        { type: 'bool', value: 'true' },
-        { type: 'uint256[]', value: [ 1, 2, 3, 4, 5 ] },
-      ],
-    },
-  };
-  const component = await mount(
-    <TestApp>
-      <ContractReadResult item={ item } onSettle={ onSettle } result={ result }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
diff --git a/ui/address/contract/ContractReadResult.tsx b/ui/address/contract/ContractReadResult.tsx
deleted file mode 100644
index 28f701eb9b..0000000000
--- a/ui/address/contract/ContractReadResult.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { Alert, Box, chakra, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-import type { ContractMethodReadResult } from './types';
-import type { SmartContractQueryMethodReadSuccess, SmartContractReadMethod } from 'types/api/contract';
-
-import hexToUtf8 from 'lib/hexToUtf8';
-
-const TUPLE_TYPE_REGEX = /\[(.+)\]/;
-
-const ContractReadResultError = ({ children }: {children: React.ReactNode}) => {
-  return (
-    <Alert status="error" mt={ 3 } p={ 4 } borderRadius="md" fontSize="sm" wordBreak="break-word" whiteSpace="pre-wrap">
-      { children }
-    </Alert>
-  );
-};
-
-interface ItemProps {
-  output: SmartContractQueryMethodReadSuccess['result']['output'][0];
-  name: SmartContractQueryMethodReadSuccess['result']['names'][0];
-}
-
-const ContractReadResultItem = ({ output, name }: ItemProps) => {
-  if (Array.isArray(name)) {
-    const [ structName, argNames ] = name;
-    const argTypes = output.type.match(TUPLE_TYPE_REGEX)?.[1].split(',');
-
-    return (
-      <>
-        <p>
-          <chakra.span fontWeight={ 500 }>  { structName }</chakra.span>
-          <span> ({ output.type }) :</span>
-        </p>
-        { argNames.map((argName, argIndex) => {
-          return (
-            <p key={ argName }>
-              <chakra.span fontWeight={ 500 }>      { argName }</chakra.span>
-              <span>{ argTypes?.[argIndex] ? ` (${ argTypes[argIndex] })` : '' } : { String(output.value[argIndex]) }</span>
-            </p>
-          );
-        }) }
-      </>
-    );
-  }
-
-  return (
-    <p>
-      <span>  </span>
-      { name && <chakra.span fontWeight={ 500 }>{ name } </chakra.span> }
-      <span>({ output.type }) : { String(output.value) }</span>
-    </p>
-  );
-};
-
-interface Props {
-  item: SmartContractReadMethod;
-  result: ContractMethodReadResult;
-  onSettle: () => void;
-}
-
-const ContractReadResult = ({ item, result, onSettle }: Props) => {
-  const resultBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
-
-  React.useEffect(() => {
-    onSettle();
-  }, [ onSettle ]);
-
-  if ('status' in result) {
-    return <ContractReadResultError>{ result.statusText }</ContractReadResultError>;
-  }
-
-  if (result.is_error) {
-    if ('error' in result.result) {
-      return <ContractReadResultError>{ result.result.error }</ContractReadResultError>;
-    }
-
-    if ('message' in result.result) {
-      return <ContractReadResultError>[{ result.result.code }] { result.result.message }</ContractReadResultError>;
-    }
-
-    if ('raw' in result.result) {
-      return <ContractReadResultError>{ `Revert reason: ${ hexToUtf8(result.result.raw) }` }</ContractReadResultError>;
-    }
-
-    if ('method_id' in result.result) {
-      return <ContractReadResultError>{ JSON.stringify(result.result, undefined, 2) }</ContractReadResultError>;
-    }
-
-    return <ContractReadResultError>Something went wrong.</ContractReadResultError>;
-  }
-
-  return (
-    <Box mt={ 3 } p={ 4 } borderRadius="md" bgColor={ resultBgColor } fontSize="sm" whiteSpace="break-spaces" wordBreak="break-all">
-      <p>
-        [ <chakra.span fontWeight={ 500 }>{ 'name' in item ? item.name : '' }</chakra.span> method response ]
-      </p>
-      <p>[</p>
-      { result.result.output.map((output, index) => <ContractReadResultItem key={ index } output={ output } name={ result.result.names[index] }/>) }
-      <p>]</p>
-    </Box>
-  );
-};
-
-export default React.memo(ContractReadResult);
diff --git a/ui/address/contract/ContractSecurityAudits.tsx b/ui/address/contract/ContractSecurityAudits.tsx
index cac7c356b0..ce6e2fc9b3 100644
--- a/ui/address/contract/ContractSecurityAudits.tsx
+++ b/ui/address/contract/ContractSecurityAudits.tsx
@@ -7,12 +7,10 @@ import useApiQuery from 'lib/api/useApiQuery';
 import dayjs from 'lib/date/dayjs';
 import ContainerWithScrollY from 'ui/shared/ContainerWithScrollY';
 import FormModal from 'ui/shared/FormModal';
-import LinkExternal from 'ui/shared/LinkExternal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
 
 import ContractSubmitAuditForm from './contractSubmitAuditForm/ContractSubmitAuditForm';
 
-const SCROLL_GRADIENT_HEIGHT = 24;
-
 type Props = {
   addressHash?: string;
 }
@@ -27,17 +25,6 @@ const ContractSecurityAudits = ({ addressHash }: Props) => {
     },
   });
 
-  const containerRef = React.useRef<HTMLDivElement>(null);
-  const [ hasScroll, setHasScroll ] = React.useState(false);
-
-  React.useEffect(() => {
-    if (!containerRef.current) {
-      return;
-    }
-
-    setHasScroll(containerRef.current.scrollHeight >= containerRef.current.clientHeight + SCROLL_GRADIENT_HEIGHT / 2);
-  }, []);
-
   const formTitle = 'Submit audit';
 
   const modalProps = useDisclosure();
@@ -52,12 +39,10 @@ const ContractSecurityAudits = ({ addressHash }: Props) => {
       { data?.items && data.items.length > 0 && (
         <Box position="relative">
           <ContainerWithScrollY
-            gradientHeight={ SCROLL_GRADIENT_HEIGHT }
-            hasScroll={ hasScroll }
+            gradientHeight={ 24 }
             rowGap={ 1 }
             w="100%"
             maxH="80px"
-            ref={ containerRef }
             mt={ 2 }
           >
             { data.items.map(item => (
diff --git a/ui/address/contract/ContractSourceCode.tsx b/ui/address/contract/ContractSourceCode.tsx
index d1ca1cba9f..e1ca2acd28 100644
--- a/ui/address/contract/ContractSourceCode.tsx
+++ b/ui/address/contract/ContractSourceCode.tsx
@@ -1,27 +1,21 @@
-import { Box, Flex, Select, Skeleton, Text, Tooltip } from '@chakra-ui/react';
+import { Flex, Select, Skeleton, Text, Tooltip } from '@chakra-ui/react';
 import React from 'react';
 
+import type { AddressImplementation } from 'types/api/addressParams';
 import type { SmartContract } from 'types/api/contract';
-import type { ArrayElement } from 'types/utils';
 
 import { route } from 'nextjs-routes';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import * as stubs from 'stubs/contract';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import CodeEditor from 'ui/shared/monaco/CodeEditor';
 import formatFilePath from 'ui/shared/monaco/utils/formatFilePath';
 
 import ContractCodeIdes from './ContractCodeIdes';
 import ContractExternalLibraries from './ContractExternalLibraries';
 
-const SOURCE_CODE_OPTIONS = [
-  { id: 'primary', label: 'Proxy' } as const,
-  { id: 'secondary', label: 'Implementation' } as const,
-];
-type SourceCodeType = ArrayElement<typeof SOURCE_CODE_OPTIONS>['id'];
-
 function getEditorData(contractInfo: SmartContract | undefined) {
   if (!contractInfo || !contractInfo.source_code) {
     return undefined;
@@ -44,155 +38,130 @@ function getEditorData(contractInfo: SmartContract | undefined) {
   ];
 }
 
+interface SourceContractOption {
+  address: string;
+  label: string;
+}
+
 interface Props {
-  address?: string;
-  implementationAddress?: string;
+  address: string;
+  implementations?: Array<AddressImplementation>;
 }
 
-const ContractSourceCode = ({ address, implementationAddress }: Props) => {
-  const [ sourceType, setSourceType ] = React.useState<SourceCodeType>('primary');
+export const ContractSourceCode = ({ address, implementations }: Props) => {
 
-  const primaryContractQuery = useApiQuery('contract', {
-    pathParams: { hash: address },
-    queryOptions: {
-      enabled: Boolean(address),
-      refetchOnMount: false,
-      placeholderData: stubs.CONTRACT_CODE_VERIFIED,
-    },
-  });
+  const options: Array<SourceContractOption> = React.useMemo(() => {
+    return [
+      { label: 'Proxy', address },
+      ...(implementations || [])
+        .filter((item) => item.name && item.address !== address)
+        .map(({ name, address }, item, array) => ({ address, label: array.length === 1 ? 'Implementation' : `Impl: ${ name }` })),
+    ];
+  }, [ address, implementations ]);
+
+  const [ sourceContract, setSourceContract ] = React.useState<SourceContractOption>(options[0]);
 
-  const secondaryContractQuery = useApiQuery('contract', {
-    pathParams: { hash: implementationAddress },
+  const contractQuery = useApiQuery('contract', {
+    pathParams: { hash: sourceContract.address },
     queryOptions: {
-      enabled: Boolean(implementationAddress),
       refetchOnMount: false,
       placeholderData: stubs.CONTRACT_CODE_VERIFIED,
     },
   });
 
-  const isLoading = implementationAddress ?
-    primaryContractQuery.isPlaceholderData || secondaryContractQuery.isPlaceholderData :
-    primaryContractQuery.isPlaceholderData;
+  const editorData = React.useMemo(() => {
+    return getEditorData(contractQuery.data);
+  }, [ contractQuery.data ]);
 
-  const primaryEditorData = React.useMemo(() => {
-    return getEditorData(primaryContractQuery.data);
-  }, [ primaryContractQuery.data ]);
+  const isLoading = contractQuery.isPlaceholderData;
 
-  const secondaryEditorData = React.useMemo(() => {
-    return secondaryContractQuery.isPlaceholderData ? undefined : getEditorData(secondaryContractQuery.data);
-  }, [ secondaryContractQuery.data, secondaryContractQuery.isPlaceholderData ]);
-
-  const activeContract = sourceType === 'secondary' ? secondaryContractQuery.data : primaryContractQuery.data;
-  const activeContractData = sourceType === 'secondary' ? secondaryEditorData : primaryEditorData;
+  const handleSelectChange = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
+    const nextOption = options.find(({ address }) => address === event.target.value);
+    if (nextOption) {
+      setSourceContract(nextOption);
+    }
+  }, [ options ]);
 
   const heading = (
     <Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>
       <span>Contract source code</span>
-      { activeContract?.language &&
-        <Text whiteSpace="pre" as="span" variant="secondary" textTransform="capitalize"> ({ activeContract.language })</Text> }
+      { contractQuery.data?.language &&
+        <Text whiteSpace="pre" as="span" variant="secondary" textTransform="capitalize"> ({ contractQuery.data.language })</Text> }
     </Skeleton>
   );
 
-  const diagramLinkAddress = (() => {
-    if (!activeContract?.can_be_visualized_via_sol2uml) {
-      return;
-    }
-    return sourceType === 'secondary' ? implementationAddress : address;
-  })();
+  const select = options.length > 1 ? (
+    <Select
+      size="xs"
+      value={ sourceContract.address }
+      onChange={ handleSelectChange }
+      w="auto"
+      maxW={{ lg: '200px', xl: '400px' }}
+      whiteSpace="nowrap"
+      textOverflow="ellipsis"
+      fontWeight={ 600 }
+      borderRadius="base"
+    >
+      { options.map((option) => <option key={ option.address } value={ option.address }>{ option.label }</option>) }
+    </Select>
+  ) : null;
 
-  const diagramLink = diagramLinkAddress ? (
+  const externalLibraries = contractQuery.data?.external_libraries ?
+    <ContractExternalLibraries data={ contractQuery.data.external_libraries } isLoading={ isLoading }/> :
+    null;
+
+  const diagramLink = contractQuery?.data?.can_be_visualized_via_sol2uml ? (
     <Tooltip label="Visualize contract code using Sol2Uml JS library">
       <LinkInternal
-        href={ route({ pathname: '/visualize/sol2uml', query: { address: diagramLinkAddress } }) }
+        href={ route({ pathname: '/visualize/sol2uml', query: { address: sourceContract.address } }) }
         ml={{ base: '0', lg: 'auto' }}
+        isLoading={ isLoading }
       >
         <Skeleton isLoaded={ !isLoading }>
-          View UML diagram
+            View UML diagram
         </Skeleton>
       </LinkInternal>
     </Tooltip>
   ) : null;
 
-  const copyToClipboard = activeContractData?.length === 1 ?
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-    <CopyToClipboard text={ activeContractData[0].source_code } isLoading={ isLoading } ml={{ base: 'auto', lg: diagramLink ? '0' : 'auto' }}/> :
-    null;
-
-  const ides = sourceType === 'secondary' ? <ContractCodeIdes hash={ implementationAddress }/> : <ContractCodeIdes hash={ address }/>;
-
-  const handleSelectChange = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
-    setSourceType(event.target.value as SourceCodeType);
-  }, []);
-
-  const editorSourceTypeSelector = !secondaryContractQuery.isPlaceholderData && secondaryContractQuery.data?.source_code ? (
-    <Select
-      size="xs"
-      value={ sourceType }
-      onChange={ handleSelectChange }
-      focusBorderColor="none"
-      w="auto"
-      fontWeight={ 600 }
-      borderRadius="base"
-    >
-      { SOURCE_CODE_OPTIONS.map((option) => <option key={ option.id } value={ option.id }>{ option.label }</option>) }
-    </Select>
-  ) : null;
-
-  const externalLibraries = (() => {
-    if (sourceType === 'secondary') {
-      return secondaryContractQuery.data?.external_libraries && <ContractExternalLibraries data={ secondaryContractQuery.data.external_libraries }/>;
-    }
+  const ides = <ContractCodeIdes hash={ sourceContract.address } isLoading={ isLoading }/>;
 
-    return primaryContractQuery.data?.external_libraries && <ContractExternalLibraries data={ primaryContractQuery.data.external_libraries }/>;
-  })();
+  const copyToClipboard = contractQuery.data && editorData?.length === 1 ? (
+    <CopyToClipboard
+      text={ contractQuery.data.source_code }
+      isLoading={ isLoading }
+      ml={{ base: 'auto', lg: diagramLink ? '0' : 'auto' }}
+    />
+  ) :
+    null;
 
   const content = (() => {
     if (isLoading) {
       return <Skeleton h="557px" w="100%"/>;
     }
 
-    if (!primaryEditorData) {
+    if (!editorData) {
       return null;
     }
 
     return (
-      <>
-        <Box display={ sourceType === 'primary' ? 'block' : 'none' }>
-          <CodeEditor
-            data={ primaryEditorData }
-            remappings={ primaryContractQuery.data?.compiler_settings?.remappings }
-            libraries={ primaryContractQuery.data?.external_libraries ?? undefined }
-            language={ primaryContractQuery.data?.language ?? undefined }
-            mainFile={ primaryEditorData[0]?.file_path }
-            contractName={ primaryContractQuery.data?.name || undefined }
-          />
-        </Box>
-        { secondaryEditorData && (
-          <Box display={ sourceType === 'secondary' ? 'block' : 'none' }>
-            <CodeEditor
-              data={ secondaryEditorData }
-              remappings={ secondaryContractQuery.data?.compiler_settings?.remappings }
-              libraries={ secondaryContractQuery.data?.external_libraries ?? undefined }
-              language={ secondaryContractQuery.data?.language ?? undefined }
-              mainFile={ secondaryEditorData?.[0]?.file_path }
-              contractName={ secondaryContractQuery.data?.name || undefined }
-            />
-          </Box>
-        ) }
-      </>
+      <CodeEditor
+        key={ sourceContract.address }
+        data={ editorData }
+        remappings={ contractQuery.data?.compiler_settings?.remappings }
+        libraries={ contractQuery.data?.external_libraries ?? undefined }
+        language={ contractQuery.data?.language ?? undefined }
+        mainFile={ editorData[0]?.file_path }
+        contractName={ contractQuery.data?.name ?? undefined }
+      />
     );
   })();
 
-  if (!primaryEditorData) {
-    return null;
-  }
-
   return (
     <section>
       <Flex alignItems="center" mb={ 3 } columnGap={ 3 } rowGap={ 2 } flexWrap="wrap">
         { heading }
-        { editorSourceTypeSelector }
+        { select }
         { externalLibraries }
         { diagramLink }
         { ides }
diff --git a/ui/address/contract/ContractWrite.pw.tsx b/ui/address/contract/ContractWrite.pw.tsx
deleted file mode 100644
index bf3007d2e0..0000000000
--- a/ui/address/contract/ContractWrite.pw.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { test, expect } from '@playwright/experimental-ct-react';
-import React from 'react';
-
-import * as contractMethodsMock from 'mocks/contract/methods';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-
-import ContractWrite from './ContractWrite';
-
-const addressHash = 'hash';
-const CONTRACT_WRITE_METHODS_API_URL = buildApiUrl('contract_methods_write', { hash: addressHash }) + '?is_custom_abi=false';
-const hooksConfig = {
-  router: {
-    query: { hash: addressHash },
-  },
-};
-
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(CONTRACT_WRITE_METHODS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contractMethodsMock.write),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <ContractWrite/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  await component.getByText(/expand all/i).click();
-
-  await expect(component).toHaveScreenshot();
-});
diff --git a/ui/address/contract/ContractWrite.tsx b/ui/address/contract/ContractWrite.tsx
deleted file mode 100644
index 1b282fb508..0000000000
--- a/ui/address/contract/ContractWrite.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import { useRouter } from 'next/router';
-import React from 'react';
-import { useAccount, useWalletClient, useSwitchChain } from 'wagmi';
-
-import type { SmartContractWriteMethod } from 'types/api/contract';
-
-import config from 'configs/app';
-import useApiQuery from 'lib/api/useApiQuery';
-import getQueryParamString from 'lib/router/getQueryParamString';
-import ContractMethodsAccordion from 'ui/address/contract/ContractMethodsAccordion';
-import ContentLoader from 'ui/shared/ContentLoader';
-import DataFetchAlert from 'ui/shared/DataFetchAlert';
-
-import ContractConnectWallet from './ContractConnectWallet';
-import ContractCustomAbiAlert from './ContractCustomAbiAlert';
-import ContractImplementationAddress from './ContractImplementationAddress';
-import ContractWriteResult from './ContractWriteResult';
-import ContractMethodForm from './methodForm/ContractMethodForm';
-import useContractAbi from './useContractAbi';
-import { getNativeCoinValue, prepareAbi } from './utils';
-
-const ContractWrite = () => {
-  const { data: walletClient } = useWalletClient();
-  const { isConnected, chainId } = useAccount();
-  const { switchChainAsync } = useSwitchChain();
-
-  const router = useRouter();
-
-  const tab = getQueryParamString(router.query.tab);
-  const addressHash = getQueryParamString(router.query.hash);
-  const isProxy = tab === 'write_proxy';
-  const isCustomAbi = tab === 'write_custom_methods';
-
-  const { data, isPending, isError } = useApiQuery(isProxy ? 'contract_methods_write_proxy' : 'contract_methods_write', {
-    pathParams: { hash: addressHash },
-    queryParams: {
-      is_custom_abi: isCustomAbi ? 'true' : 'false',
-    },
-    queryOptions: {
-      enabled: Boolean(addressHash),
-      refetchOnMount: false,
-    },
-  });
-
-  const contractAbi = useContractAbi({ addressHash, isProxy, isCustomAbi });
-
-  const handleMethodFormSubmit = React.useCallback(async(item: SmartContractWriteMethod, args: Array<unknown>) => {
-    if (!isConnected) {
-      throw new Error('Wallet is not connected');
-    }
-
-    if (chainId && String(chainId) !== config.chain.id) {
-      await switchChainAsync?.({ chainId: Number(config.chain.id) });
-    }
-
-    if (!contractAbi) {
-      throw new Error('Something went wrong. Try again later.');
-    }
-
-    if (item.type === 'receive' || item.type === 'fallback') {
-      const value = getNativeCoinValue(args[0]);
-      const hash = await walletClient?.sendTransaction({
-        to: addressHash as `0x${ string }` | undefined,
-        value,
-      });
-      return { hash };
-    }
-
-    const methodName = item.name;
-
-    if (!methodName) {
-      throw new Error('Method name is not defined');
-    }
-
-    const _args = args.slice(0, item.inputs.length);
-    const value = getNativeCoinValue(args[item.inputs.length]);
-    const abi = prepareAbi(contractAbi, item);
-
-    const hash = await walletClient?.writeContract({
-      args: _args,
-      abi,
-      functionName: methodName,
-      address: addressHash as `0x${ string }`,
-      value,
-    });
-
-    return { hash };
-  }, [ isConnected, chainId, contractAbi, walletClient, addressHash, switchChainAsync ]);
-
-  const renderItemContent = React.useCallback((item: SmartContractWriteMethod, index: number, id: number) => {
-    return (
-      <ContractMethodForm
-        key={ id + '_' + index }
-        data={ item }
-        onSubmit={ handleMethodFormSubmit }
-        resultComponent={ ContractWriteResult }
-        methodType="write"
-      />
-    );
-  }, [ handleMethodFormSubmit ]);
-
-  if (isError) {
-    return <DataFetchAlert/>;
-  }
-
-  if (isPending) {
-    return <ContentLoader/>;
-  }
-
-  if (data.length === 0 && !isProxy) {
-    return <span>No public write functions were found for this contract.</span>;
-  }
-
-  return (
-    <>
-      { isCustomAbi && <ContractCustomAbiAlert/> }
-      <ContractConnectWallet/>
-      { isProxy && <ContractImplementationAddress hash={ addressHash }/> }
-      <ContractMethodsAccordion data={ data } addressHash={ addressHash } renderItemContent={ renderItemContent } tab={ tab }/>
-    </>
-  );
-};
-
-export default React.memo(ContractWrite);
diff --git a/ui/address/contract/ContractWriteResult.tsx b/ui/address/contract/ContractWriteResult.tsx
deleted file mode 100644
index 3cc755d131..0000000000
--- a/ui/address/contract/ContractWriteResult.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { useWaitForTransactionReceipt } from 'wagmi';
-
-import type { ResultComponentProps } from './methodForm/types';
-import type { ContractMethodWriteResult } from './types';
-import type { SmartContractWriteMethod } from 'types/api/contract';
-
-import ContractWriteResultDumb from './ContractWriteResultDumb';
-
-const ContractWriteResult = ({ result, onSettle }: ResultComponentProps<SmartContractWriteMethod>) => {
-  const txHash = result && 'hash' in result ? result.hash as `0x${ string }` : undefined;
-  const txInfo = useWaitForTransactionReceipt({
-    hash: txHash,
-  });
-
-  return <ContractWriteResultDumb result={ result as ContractMethodWriteResult } onSettle={ onSettle } txInfo={ txInfo }/>;
-};
-
-export default React.memo(ContractWriteResult) as typeof ContractWriteResult;
diff --git a/ui/address/contract/ContractWriteResultDumb.pw.tsx b/ui/address/contract/ContractWriteResultDumb.pw.tsx
deleted file mode 100644
index e916ab90c6..0000000000
--- a/ui/address/contract/ContractWriteResultDumb.pw.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { test, expect } from '@playwright/experimental-ct-react';
-import React from 'react';
-
-import TestApp from 'playwright/TestApp';
-
-import ContractWriteResultDumb from './ContractWriteResultDumb';
-
-test('loading', async({ mount }) => {
-  const props = {
-    txInfo: {
-      status: 'pending' as const,
-      error: null,
-    },
-    result: {
-      hash: '0x363574E6C5C71c343d7348093D84320c76d5Dd29' as `0x${ string }`,
-    },
-    onSettle: () => {},
-  };
-
-  const component = await mount(
-    <TestApp>
-      <ContractWriteResultDumb { ...props }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('success', async({ mount }) => {
-  const props = {
-    txInfo: {
-      status: 'success' as const,
-      error: null,
-    },
-    result: {
-      hash: '0x363574E6C5C71c343d7348093D84320c76d5Dd29' as `0x${ string }`,
-    },
-    onSettle: () => {},
-  };
-
-  const component = await mount(
-    <TestApp>
-      <ContractWriteResultDumb { ...props }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('error +@mobile', async({ mount }) => {
-  const props = {
-    txInfo: {
-      status: 'error' as const,
-      error: {
-        // eslint-disable-next-line max-len
-        message: 'missing revert data in call exception; Transaction reverted without a reason string [ See: https://links.ethers.org/v5-errors-CALL_EXCEPTION ]',
-      } as Error,
-    },
-    result: {
-      hash: '0x363574E6C5C71c343d7348093D84320c76d5Dd29' as `0x${ string }`,
-    },
-    onSettle: () => {},
-  };
-
-  const component = await mount(
-    <TestApp>
-      <ContractWriteResultDumb { ...props }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-test('error in result', async({ mount }) => {
-  const props = {
-    txInfo: {
-      status: 'idle' as const,
-      error: null,
-    },
-    result: {
-      message: 'wallet is not connected',
-    } as Error,
-    onSettle: () => {},
-  };
-
-  const component = await mount(
-    <TestApp>
-      <ContractWriteResultDumb { ...props }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
diff --git a/ui/address/contract/ContractWriteResultDumb.tsx b/ui/address/contract/ContractWriteResultDumb.tsx
deleted file mode 100644
index 3b898fb570..0000000000
--- a/ui/address/contract/ContractWriteResultDumb.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { Box, chakra, Spinner } from '@chakra-ui/react';
-import React from 'react';
-
-import type { ContractMethodWriteResult } from './types';
-
-import { route } from 'nextjs-routes';
-
-import LinkInternal from 'ui/shared/LinkInternal';
-
-interface Props {
-  result: ContractMethodWriteResult;
-  onSettle: () => void;
-  txInfo: {
-    status: 'loading' | 'success' | 'error' | 'idle' | 'pending';
-    error: Error | null;
-  };
-}
-
-const ContractWriteResultDumb = ({ result, onSettle, txInfo }: Props) => {
-  const txHash = result && 'hash' in result ? result.hash : undefined;
-
-  React.useEffect(() => {
-    if (txInfo.status !== 'pending') {
-      onSettle();
-    }
-  }, [ onSettle, txInfo.status ]);
-
-  if (!result) {
-    return null;
-  }
-
-  const isErrorResult = 'message' in result;
-
-  const txLink = txHash ? (
-    <LinkInternal href={ route({ pathname: '/tx/[hash]', query: { hash: txHash } }) }>View transaction details</LinkInternal>
-  ) : null;
-
-  const content = (() => {
-    if (isErrorResult) {
-      return (
-        <>
-          <span>Error: </span>
-          <span>{ result.message }</span>
-        </>
-      );
-    }
-
-    switch (txInfo.status) {
-      case 'success': {
-        return (
-          <>
-            <span>Transaction has been confirmed. </span>
-            { txLink }
-          </>
-        );
-      }
-
-      case 'pending': {
-        return (
-          <>
-            <Spinner size="sm" mr={ 3 }/>
-            <chakra.span verticalAlign="text-bottom">
-              { 'Waiting for transaction\'s confirmation. ' }
-              { txLink }
-            </chakra.span>
-          </>
-        );
-      }
-
-      case 'error': {
-        return (
-          <>
-            <span>Error: </span>
-            <span>{ txInfo.error ? txInfo.error.message : 'Something went wrong' } </span>
-            { txLink }
-          </>
-        );
-      }
-    }
-  })();
-
-  return (
-    <Box
-      fontSize="sm"
-      mt={ 3 }
-      alignItems="center"
-      whiteSpace="pre-wrap"
-      wordBreak="break-all"
-      color={ txInfo.status === 'error' || isErrorResult ? 'error' : undefined }
-    >
-      { content }
-    </Box>
-  );
-};
-
-export default React.memo(ContractWriteResultDumb);
diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-certified-icon-mobile-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-certified-icon-mobile-1.png
new file mode 100644
index 0000000000..9d405d4a33
Binary files /dev/null and b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-certified-icon-mobile-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-proxy-address-alert-mobile-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-proxy-address-alert-mobile-1.png
index f60ab9af44..a73642ee31 100644
Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-proxy-address-alert-mobile-1.png and b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-proxy-address-alert-mobile-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_zkSync-contract-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_zkSync-contract-1.png
new file mode 100644
index 0000000000..62b1522862
Binary files /dev/null and b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_zkSync-contract-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_mobile_with-certified-icon-mobile-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_mobile_with-certified-icon-mobile-1.png
new file mode 100644
index 0000000000..964b95edd1
Binary files /dev/null and b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_mobile_with-certified-icon-mobile-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_mobile_with-proxy-address-alert-mobile-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_mobile_with-proxy-address-alert-mobile-1.png
index b9c761a578..5cccb20269 100644
Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_mobile_with-proxy-address-alert-mobile-1.png and b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_mobile_with-proxy-address-alert-mobile-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractCodeProxyPattern.pw.tsx_default_proxy-type-with-link-but-without-description-1.png b/ui/address/contract/__screenshots__/ContractCodeProxyPattern.pw.tsx_default_proxy-type-with-link-but-without-description-1.png
new file mode 100644
index 0000000000..fb30558ac5
Binary files /dev/null and b/ui/address/contract/__screenshots__/ContractCodeProxyPattern.pw.tsx_default_proxy-type-with-link-but-without-description-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractCodeProxyPattern.pw.tsx_default_proxy-type-with-link-mobile-1.png b/ui/address/contract/__screenshots__/ContractCodeProxyPattern.pw.tsx_default_proxy-type-with-link-mobile-1.png
new file mode 100644
index 0000000000..de8096a45a
Binary files /dev/null and b/ui/address/contract/__screenshots__/ContractCodeProxyPattern.pw.tsx_default_proxy-type-with-link-mobile-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractCodeProxyPattern.pw.tsx_default_proxy-type-without-link-1.png b/ui/address/contract/__screenshots__/ContractCodeProxyPattern.pw.tsx_default_proxy-type-without-link-1.png
new file mode 100644
index 0000000000..3fe126ef5b
Binary files /dev/null and b/ui/address/contract/__screenshots__/ContractCodeProxyPattern.pw.tsx_default_proxy-type-without-link-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractCodeProxyPattern.pw.tsx_mobile_proxy-type-with-link-mobile-1.png b/ui/address/contract/__screenshots__/ContractCodeProxyPattern.pw.tsx_mobile_proxy-type-with-link-mobile-1.png
new file mode 100644
index 0000000000..e45ff371ef
Binary files /dev/null and b/ui/address/contract/__screenshots__/ContractCodeProxyPattern.pw.tsx_mobile_proxy-type-with-link-mobile-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png
deleted file mode 100644
index f19ba84553..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-2.png b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-2.png
deleted file mode 100644
index 9402cd11fc..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-2.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_default_base-view-mobile-dark-mode-1.png
deleted file mode 100644
index 82900c2f57..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_default_base-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_default_base-view-mobile-dark-mode-2.png b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_default_base-view-mobile-dark-mode-2.png
deleted file mode 100644
index 635406e6f5..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_default_base-view-mobile-dark-mode-2.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_mobile_base-view-mobile-dark-mode-1.png b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_mobile_base-view-mobile-dark-mode-1.png
deleted file mode 100644
index 930ca02a9e..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_mobile_base-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_mobile_base-view-mobile-dark-mode-2.png b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_mobile_base-view-mobile-dark-mode-2.png
deleted file mode 100644
index b5d534a0d0..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_mobile_base-view-mobile-dark-mode-2.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_complex-error-1.png b/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_complex-error-1.png
deleted file mode 100644
index 80741a58e9..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_complex-error-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_complex-success-1.png b/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_complex-success-1.png
deleted file mode 100644
index 695b1df2c6..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_complex-success-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_default-error-1.png b/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_default-error-1.png
deleted file mode 100644
index 31c2a142c1..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_default-error-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_error-with-code-1.png b/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_error-with-code-1.png
deleted file mode 100644
index 680fbde860..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_error-with-code-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_raw-error-1.png b/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_raw-error-1.png
deleted file mode 100644
index dfbf8524ab..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_raw-error-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_success-1.png b/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_success-1.png
deleted file mode 100644
index 0010723b55..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_success-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractWrite.pw.tsx_default_base-view-mobile-1.png b/ui/address/contract/__screenshots__/ContractWrite.pw.tsx_default_base-view-mobile-1.png
deleted file mode 100644
index e58e9c4755..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractWrite.pw.tsx_default_base-view-mobile-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractWrite.pw.tsx_mobile_base-view-mobile-1.png b/ui/address/contract/__screenshots__/ContractWrite.pw.tsx_mobile_base-view-mobile-1.png
deleted file mode 100644
index c9a99a0bfb..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractWrite.pw.tsx_mobile_base-view-mobile-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_error-in-result-1.png b/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_error-in-result-1.png
deleted file mode 100644
index 30a20b5510..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_error-in-result-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_error-mobile-1.png b/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_error-mobile-1.png
deleted file mode 100644
index e9ec6c1578..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_error-mobile-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_loading-1.png b/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_loading-1.png
deleted file mode 100644
index 986269100c..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_loading-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_success-1.png b/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_success-1.png
deleted file mode 100644
index 49697a5f42..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_default_success-1.png and /dev/null differ
diff --git a/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_mobile_error-mobile-1.png b/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_mobile_error-mobile-1.png
deleted file mode 100644
index ec96baa0f5..0000000000
Binary files a/ui/address/contract/__screenshots__/ContractWriteResultDumb.pw.tsx_mobile_error-mobile-1.png and /dev/null differ
diff --git a/ui/address/contract/contractSubmitAuditForm/ContractSubmitAuditForm.pw.tsx b/ui/address/contract/contractSubmitAuditForm/ContractSubmitAuditForm.pw.tsx
index d82adea521..a9053cad83 100644
--- a/ui/address/contract/contractSubmitAuditForm/ContractSubmitAuditForm.pw.tsx
+++ b/ui/address/contract/contractSubmitAuditForm/ContractSubmitAuditForm.pw.tsx
@@ -1,18 +1,11 @@
-import { test, expect } from '@playwright/experimental-ct-react';
+import noop from 'lodash/noop';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import ContractSubmitAuditForm from './ContractSubmitAuditForm';
 
-test('base view', async({ mount }) => {
-
-  const component = await mount(
-    <TestApp>
-      { /* eslint-disable-next-line react/jsx-no-bind */ }
-      <ContractSubmitAuditForm address="hash" onSuccess={ () => {} }/>
-    </TestApp>,
-  );
-
+test('base view', async({ render }) => {
+  const component = await render(<ContractSubmitAuditForm address="hash" onSuccess={ noop }/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/address/contract/methodForm/ContractMethodFieldInputArray.tsx b/ui/address/contract/methodForm/ContractMethodFieldInputArray.tsx
deleted file mode 100644
index 85a2611e90..0000000000
--- a/ui/address/contract/methodForm/ContractMethodFieldInputArray.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import { Flex } from '@chakra-ui/react';
-import React from 'react';
-import { useFormContext } from 'react-hook-form';
-
-import type { SmartContractMethodInput, SmartContractMethodArgType } from 'types/api/contract';
-
-import ContractMethodArrayButton from './ContractMethodArrayButton';
-import type { Props as AccordionProps } from './ContractMethodFieldAccordion';
-import ContractMethodFieldAccordion from './ContractMethodFieldAccordion';
-import ContractMethodFieldInput from './ContractMethodFieldInput';
-import ContractMethodFieldInputTuple from './ContractMethodFieldInputTuple';
-import ContractMethodFieldLabel from './ContractMethodFieldLabel';
-import { getFieldLabel } from './utils';
-
-interface Props extends Pick<AccordionProps, 'onAddClick' | 'onRemoveClick' | 'index'> {
-  data: SmartContractMethodInput;
-  level: number;
-  basePath: string;
-  isDisabled: boolean;
-}
-
-const ContractMethodFieldInputArray = ({ data, level, basePath, onAddClick, onRemoveClick, index: parentIndex, isDisabled }: Props) => {
-  const { formState: { errors } } = useFormContext();
-  const fieldsWithErrors = Object.keys(errors);
-  const isInvalid = fieldsWithErrors.some((field) => field.startsWith(basePath));
-
-  const [ registeredIndices, setRegisteredIndices ] = React.useState([ 0 ]);
-
-  const handleAddButtonClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    setRegisteredIndices((prev) => [ ...prev, prev[prev.length - 1] + 1 ]);
-  }, []);
-
-  const handleRemoveButtonClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    const itemIndex = event.currentTarget.getAttribute('data-index');
-    if (itemIndex) {
-      setRegisteredIndices((prev) => prev.filter((index) => index !== Number(itemIndex)));
-    }
-  }, [ ]);
-
-  const getItemData = (index: number) => {
-    const childrenType = data.type.slice(0, -2) as SmartContractMethodArgType;
-    const childrenInternalType = data.internalType?.slice(0, parentIndex !== undefined ? -4 : -2).replaceAll('struct ', '');
-
-    const namePostfix = childrenInternalType ? ' ' + childrenInternalType : '';
-    const nameParentIndex = parentIndex !== undefined ? `${ parentIndex + 1 }.` : '';
-    const nameIndex = index + 1;
-
-    return {
-      ...data,
-      type: childrenType,
-      name: `#${ nameParentIndex + nameIndex }${ namePostfix }`,
-    };
-  };
-  const isNestedArray = data.type.includes('[][]');
-
-  if (isNestedArray) {
-    return (
-      <ContractMethodFieldAccordion
-        level={ level }
-        label={ getFieldLabel(data) }
-        isInvalid={ isInvalid }
-      >
-        { registeredIndices.map((registeredIndex, index) => {
-          const itemData = getItemData(index);
-
-          return (
-            <ContractMethodFieldInputArray
-              key={ registeredIndex }
-              data={ itemData }
-              basePath={ `${ basePath }:${ registeredIndex }` }
-              level={ level + 1 }
-              onAddClick={ index === registeredIndices.length - 1 ? handleAddButtonClick : undefined }
-              onRemoveClick={ registeredIndices.length > 1 ? handleRemoveButtonClick : undefined }
-              index={ registeredIndex }
-              isDisabled={ isDisabled }
-            />
-          );
-        }) }
-      </ContractMethodFieldAccordion>
-    );
-  }
-
-  const isTupleArray = data.type.includes('tuple');
-
-  if (isTupleArray) {
-    return (
-      <ContractMethodFieldAccordion
-        level={ level }
-        label={ getFieldLabel(data) }
-        onAddClick={ onAddClick }
-        onRemoveClick={ onRemoveClick }
-        index={ parentIndex }
-        isInvalid={ isInvalid }
-      >
-        { registeredIndices.map((registeredIndex, index) => {
-          const itemData = getItemData(index);
-
-          return (
-            <ContractMethodFieldInputTuple
-              key={ registeredIndex }
-              data={ itemData }
-              basePath={ `${ basePath }:${ registeredIndex }` }
-              level={ level + 1 }
-              onAddClick={ index === registeredIndices.length - 1 ? handleAddButtonClick : undefined }
-              onRemoveClick={ registeredIndices.length > 1 ? handleRemoveButtonClick : undefined }
-              index={ registeredIndex }
-              isDisabled={ isDisabled }
-            />
-          );
-        }) }
-      </ContractMethodFieldAccordion>
-    );
-  }
-
-  // primitive value array
-  return (
-    <Flex flexDir={{ base: 'column', md: 'row' }} alignItems="flex-start" columnGap={ 3 } px="6px">
-      <ContractMethodFieldLabel data={ data } level={ level }/>
-      <Flex flexDir="column" rowGap={ 1 } w="100%">
-        { registeredIndices.map((registeredIndex, index) => {
-          const itemData = getItemData(index);
-
-          return (
-            <Flex key={ registeredIndex } alignItems="flex-start" columnGap={ 3 }>
-              <ContractMethodFieldInput
-                data={ itemData }
-                hideLabel
-                path={ `${ basePath }:${ index }` }
-                level={ level }
-                px={ 0 }
-                isDisabled={ isDisabled }
-              />
-              { registeredIndices.length > 1 &&
-                <ContractMethodArrayButton index={ registeredIndex } onClick={ handleRemoveButtonClick } type="remove" my="6px"/> }
-              { index === registeredIndices.length - 1 &&
-                <ContractMethodArrayButton index={ registeredIndex } onClick={ handleAddButtonClick } type="add" my="6px"/> }
-            </Flex>
-          );
-        }) }
-      </Flex>
-    </Flex>
-  );
-};
-
-export default React.memo(ContractMethodFieldInputArray);
diff --git a/ui/address/contract/methodForm/ContractMethodForm.tsx b/ui/address/contract/methodForm/ContractMethodForm.tsx
deleted file mode 100644
index ff2c5e31d9..0000000000
--- a/ui/address/contract/methodForm/ContractMethodForm.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import { Box, Button, Flex, chakra } from '@chakra-ui/react';
-import _mapValues from 'lodash/mapValues';
-import React from 'react';
-import type { SubmitHandler } from 'react-hook-form';
-import { useForm, FormProvider } from 'react-hook-form';
-
-import type { ContractMethodCallResult } from '../types';
-import type { ResultComponentProps } from './types';
-import type { SmartContractMethod, SmartContractMethodInput } from 'types/api/contract';
-
-import config from 'configs/app';
-import * as mixpanel from 'lib/mixpanel/index';
-
-import ContractMethodFieldInput from './ContractMethodFieldInput';
-import ContractMethodFieldInputArray from './ContractMethodFieldInputArray';
-import ContractMethodFieldInputTuple from './ContractMethodFieldInputTuple';
-import ContractMethodFormOutputs from './ContractMethodFormOutputs';
-import { ARRAY_REGEXP, transformFormDataToMethodArgs } from './utils';
-import type { ContractMethodFormFields } from './utils';
-
-interface Props<T extends SmartContractMethod> {
-  data: T;
-  onSubmit: (data: T, args: Array<unknown>) => Promise<ContractMethodCallResult<T>>;
-  resultComponent: (props: ResultComponentProps<T>) => JSX.Element | null;
-  methodType: 'read' | 'write';
-}
-
-const ContractMethodForm = <T extends SmartContractMethod>({ data, onSubmit, resultComponent: ResultComponent, methodType }: Props<T>) => {
-
-  const [ result, setResult ] = React.useState<ContractMethodCallResult<T>>();
-  const [ isLoading, setLoading ] = React.useState(false);
-
-  const formApi = useForm<ContractMethodFormFields>({
-    mode: 'all',
-    shouldUnregister: true,
-  });
-
-  const onFormSubmit: SubmitHandler<ContractMethodFormFields> = React.useCallback(async(formData) => {
-    // The API used for reading from contracts expects all values to be strings.
-    const formattedData = methodType === 'read' ?
-      _mapValues(formData, (value) => value !== undefined ? String(value) : undefined) :
-      formData;
-    const args = transformFormDataToMethodArgs(formattedData);
-
-    setResult(undefined);
-    setLoading(true);
-
-    onSubmit(data, args)
-      .then((result) => {
-        setResult(result);
-      })
-      .catch((error) => {
-        setResult(error?.error || error?.data || (error?.reason && { message: error.reason }) || error);
-        setLoading(false);
-      })
-      .finally(() => {
-        mixpanel.logEvent(mixpanel.EventTypes.CONTRACT_INTERACTION, {
-          'Method type': methodType === 'write' ? 'Write' : 'Read',
-          'Method name': 'name' in data ? data.name : 'Fallback',
-        });
-      });
-  }, [ data, methodType, onSubmit ]);
-
-  const handleTxSettle = React.useCallback(() => {
-    setLoading(false);
-  }, []);
-
-  const handleFormChange = React.useCallback(() => {
-    result && setResult(undefined);
-  }, [ result ]);
-
-  const inputs: Array<SmartContractMethodInput> = React.useMemo(() => {
-    return [
-      ...('inputs' in data ? data.inputs : []),
-      ...('stateMutability' in data && data.stateMutability === 'payable' ? [ {
-        name: `Send native ${ config.chain.currency.symbol || 'coin' } in WEI`,
-        type: 'uint256' as const,
-        internalType: 'uint256' as const,
-        fieldType: 'native_coin' as const,
-      } ] : []),
-    ];
-  }, [ data ]);
-
-  const outputs = 'outputs' in data && data.outputs ? data.outputs : [];
-
-  return (
-    <Box>
-      <FormProvider { ...formApi }>
-        <chakra.form
-          noValidate
-          onSubmit={ formApi.handleSubmit(onFormSubmit) }
-          onChange={ handleFormChange }
-        >
-          <Flex flexDir="column" rowGap={ 3 } mb={ 6 } _empty={{ display: 'none' }}>
-            { inputs.map((input, index) => {
-              if (input.components && input.type === 'tuple') {
-                return <ContractMethodFieldInputTuple key={ index } data={ input } basePath={ `${ index }` } level={ 0 } isDisabled={ isLoading }/>;
-              }
-
-              const arrayMatch = input.type.match(ARRAY_REGEXP);
-              if (arrayMatch) {
-                return <ContractMethodFieldInputArray key={ index } data={ input } basePath={ `${ index }` } level={ 0 } isDisabled={ isLoading }/>;
-              }
-
-              return <ContractMethodFieldInput key={ index } data={ input } path={ `${ index }` } isDisabled={ isLoading } level={ 0 }/>;
-            }) }
-          </Flex>
-          <Button
-            isLoading={ isLoading }
-            loadingText={ methodType === 'write' ? 'Write' : 'Read' }
-            variant="outline"
-            size="sm"
-            flexShrink={ 0 }
-            width="min-content"
-            px={ 4 }
-            type="submit"
-          >
-            { methodType === 'write' ? 'Write' : 'Read' }
-          </Button>
-        </chakra.form>
-      </FormProvider>
-      { methodType === 'read' && <ContractMethodFormOutputs data={ outputs }/> }
-      { result && <ResultComponent item={ data } result={ result } onSettle={ handleTxSettle }/> }
-    </Box>
-  );
-};
-
-export default React.memo(ContractMethodForm) as typeof ContractMethodForm;
diff --git a/ui/address/contract/methodForm/ContractMethodFormOutputs.tsx b/ui/address/contract/methodForm/ContractMethodFormOutputs.tsx
deleted file mode 100644
index 9876266514..0000000000
--- a/ui/address/contract/methodForm/ContractMethodFormOutputs.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Flex, chakra } from '@chakra-ui/react';
-import React from 'react';
-
-import type { SmartContractMethodOutput } from 'types/api/contract';
-
-import IconSvg from 'ui/shared/IconSvg';
-
-interface Props {
-  data: Array<SmartContractMethodOutput>;
-}
-
-const ContractMethodFormOutputs = ({ data }: Props) => {
-  if (data.length === 0) {
-    return null;
-  }
-
-  return (
-    <Flex mt={ 3 } fontSize="sm">
-      <IconSvg name="arrows/down-right" boxSize={ 5 } mr={ 1 }/>
-      <p>
-        { data.map(({ type, name }, index) => {
-          return (
-            <React.Fragment key={ index }>
-              <chakra.span fontWeight={ 500 }>{ name } </chakra.span>
-              <span>{ name ? `(${ type })` : type }</span>
-              { index < data.length - 1 && <span>, </span> }
-            </React.Fragment>
-          );
-        }) }
-      </p>
-    </Flex>
-  );
-};
-
-export default React.memo(ContractMethodFormOutputs);
diff --git a/ui/address/contract/methodForm/__screenshots__/ContractMethodForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/ui/address/contract/methodForm/__screenshots__/ContractMethodForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png
deleted file mode 100644
index 0efe77db56..0000000000
Binary files a/ui/address/contract/methodForm/__screenshots__/ContractMethodForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/address/contract/methodForm/__screenshots__/ContractMethodForm.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/address/contract/methodForm/__screenshots__/ContractMethodForm.pw.tsx_default_base-view-mobile-dark-mode-1.png
deleted file mode 100644
index c5bc0169c9..0000000000
Binary files a/ui/address/contract/methodForm/__screenshots__/ContractMethodForm.pw.tsx_default_base-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/address/contract/methodForm/__screenshots__/ContractMethodForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png b/ui/address/contract/methodForm/__screenshots__/ContractMethodForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png
deleted file mode 100644
index c386ad9a29..0000000000
Binary files a/ui/address/contract/methodForm/__screenshots__/ContractMethodForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/address/contract/methodForm/types.ts b/ui/address/contract/methodForm/types.ts
deleted file mode 100644
index 845d6d3621..0000000000
--- a/ui/address/contract/methodForm/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { ContractMethodCallResult } from '../types';
-import type { SmartContractMethod } from 'types/api/contract';
-
-export interface ResultComponentProps<T extends SmartContractMethod> {
-  item: T;
-  result: ContractMethodCallResult<T>;
-  onSettle: () => void;
-}
diff --git a/ui/address/contract/methodForm/useArgTypeMatchInt.tsx b/ui/address/contract/methodForm/useArgTypeMatchInt.tsx
deleted file mode 100644
index fa6b994021..0000000000
--- a/ui/address/contract/methodForm/useArgTypeMatchInt.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { SmartContractMethodArgType } from 'types/api/contract';
-
-import { INT_REGEXP, getIntBoundaries } from './utils';
-
-interface Params {
-  argType: SmartContractMethodArgType;
-}
-
-export interface MatchInt {
-  isUnsigned: boolean;
-  power: string;
-  min: bigint;
-  max: bigint;
-}
-
-export default function useArgTypeMatchInt({ argType }: Params): MatchInt | null {
-  const match = argType.match(INT_REGEXP);
-  if (!match) {
-    return null;
-  }
-
-  const [ , isUnsigned, power = '256' ] = match;
-  const [ min, max ] = getIntBoundaries(Number(power), Boolean(isUnsigned));
-
-  return { isUnsigned: Boolean(isUnsigned), power, min, max };
-}
diff --git a/ui/address/contract/methodForm/utils.test.ts b/ui/address/contract/methodForm/utils.test.ts
deleted file mode 100644
index f49b3fe9f9..0000000000
--- a/ui/address/contract/methodForm/utils.test.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { transformFormDataToMethodArgs } from './utils';
-
-describe('transformFormDataToMethodArgs', () => {
-  it('should transform form data to method args array', () => {
-    const formData = {
-      '1': '1',
-      '2': '2',
-      '0:1': '0:1',
-      '0:0:0': '0:0:0',
-      '0:0:1:0': '0:0:1:0',
-      '0:0:1:3': '0:0:1:3',
-      '0:0:2:1:0': '0:0:2:1:0',
-      '0:0:2:1:1': '0:0:2:1:1',
-      '0:0:2:2:0': '0:0:2:2:0',
-      '0:0:2:2:2': '0:0:2:2:2',
-      '0:0:2:5:3': '0:0:2:5:3',
-      '0:0:2:5:8': '0:0:2:5:8',
-    };
-    const result = transformFormDataToMethodArgs(formData);
-    expect(result).toEqual([
-      [
-        [
-          '0:0:0',
-          [
-            '0:0:1:0',
-            '0:0:1:3',
-          ],
-          [
-            [
-              '0:0:2:1:0',
-              '0:0:2:1:1',
-            ],
-            [
-              '0:0:2:2:0',
-              '0:0:2:2:2',
-            ],
-            [
-              '0:0:2:5:3',
-              '0:0:2:5:8',
-            ],
-          ],
-        ],
-        '0:1',
-      ],
-      '1',
-      '2',
-    ]);
-  });
-});
diff --git a/ui/address/contract/methodForm/utils.ts b/ui/address/contract/methodForm/utils.ts
deleted file mode 100644
index 61515577d3..0000000000
--- a/ui/address/contract/methodForm/utils.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import _set from 'lodash/set';
-
-import type { SmartContractMethodInput } from 'types/api/contract';
-
-export type ContractMethodFormFields = Record<string, string | boolean | undefined>;
-
-export const INT_REGEXP = /^(u)?int(\d+)?$/i;
-
-export const BYTES_REGEXP = /^bytes(\d+)?$/i;
-
-export const ARRAY_REGEXP = /^(.*)\[(\d*)\]$/;
-
-export const getIntBoundaries = (power: number, isUnsigned: boolean) => {
-  const maxUnsigned = BigInt(2 ** power);
-  const max = isUnsigned ? maxUnsigned - BigInt(1) : maxUnsigned / BigInt(2) - BigInt(1);
-  const min = isUnsigned ? BigInt(0) : -maxUnsigned / BigInt(2);
-  return [ min, max ];
-};
-
-export function transformFormDataToMethodArgs(formData: ContractMethodFormFields) {
-  const result: Array<unknown> = [];
-
-  for (const field in formData) {
-    const value = formData[field];
-    if (value !== undefined) {
-      _set(result, field.replaceAll(':', '.'), value);
-    }
-  }
-
-  return filterOurEmptyItems(result);
-}
-
-function filterOurEmptyItems(array: Array<unknown>): Array<unknown> {
-  // The undefined value may occur in two cases:
-  //    1. When an optional form field is left blank by the user.
-  //        The only optional field is the native coin value, which is safely handled in the form submit handler.
-  //    2. When the user adds and removes items from a field array.
-  //        In this scenario, empty items need to be filtered out to maintain the correct sequence of arguments.
-  return array
-    .map((item) => Array.isArray(item) ? filterOurEmptyItems(item) : item)
-    .filter((item) => item !== undefined);
-}
-
-export function getFieldLabel(input: SmartContractMethodInput, isRequired?: boolean) {
-  const name = input.name || input.internalType || '<unnamed argument>';
-  return `${ name } (${ input.type })${ isRequired ? '*' : '' }`;
-}
diff --git a/ui/address/contract/methods/ContractAbi.tsx b/ui/address/contract/methods/ContractAbi.tsx
new file mode 100644
index 0000000000..19e91a1bd1
--- /dev/null
+++ b/ui/address/contract/methods/ContractAbi.tsx
@@ -0,0 +1,73 @@
+import { Accordion, Box, Flex, Link } from '@chakra-ui/react';
+import _range from 'lodash/range';
+import React from 'react';
+
+import type { SmartContractMethod } from './types';
+
+import ContractAbiItem from './ContractAbiItem';
+import useFormSubmit from './useFormSubmit';
+import useScrollToMethod from './useScrollToMethod';
+
+interface Props {
+  abi: Array<SmartContractMethod>;
+  addressHash: string;
+  tab: string;
+}
+
+const ContractAbi = ({ abi, addressHash, tab }: Props) => {
+  const [ expandedSections, setExpandedSections ] = React.useState<Array<number>>(abi.length === 1 ? [ 0 ] : []);
+  const [ id, setId ] = React.useState(0);
+
+  useScrollToMethod(abi, setExpandedSections);
+
+  const handleFormSubmit = useFormSubmit({ addressHash });
+
+  const handleAccordionStateChange = React.useCallback((newValue: Array<number>) => {
+    setExpandedSections(newValue);
+  }, []);
+
+  const handleExpandAll = React.useCallback(() => {
+    if (!abi) {
+      return;
+    }
+
+    if (expandedSections.length < abi.length) {
+      setExpandedSections(_range(0, abi.length));
+    } else {
+      setExpandedSections([]);
+    }
+  }, [ abi, expandedSections.length ]);
+
+  const handleReset = React.useCallback(() => {
+    setId((id) => id + 1);
+  }, []);
+
+  return (
+    <>
+      <Flex mb={ 3 }>
+        <Box fontWeight={ 500 } mr="auto">Contract information</Box>
+        { abi.length > 1 && (
+          <Link onClick={ handleExpandAll }>
+            { expandedSections.length === abi.length ? 'Collapse' : 'Expand' } all
+          </Link>
+        ) }
+        <Link onClick={ handleReset } ml={ 3 }>Reset</Link>
+      </Flex>
+      <Accordion allowMultiple position="relative" onChange={ handleAccordionStateChange } index={ expandedSections }>
+        { abi.map((item, index) => (
+          <ContractAbiItem
+            key={ index }
+            data={ item }
+            id={ id }
+            index={ index }
+            addressHash={ addressHash }
+            tab={ tab }
+            onSubmit={ handleFormSubmit }
+          />
+        )) }
+      </Accordion>
+    </>
+  );
+};
+
+export default React.memo(ContractAbi);
diff --git a/ui/address/contract/methods/ContractAbiItem.tsx b/ui/address/contract/methods/ContractAbiItem.tsx
new file mode 100644
index 0000000000..9796b12d47
--- /dev/null
+++ b/ui/address/contract/methods/ContractAbiItem.tsx
@@ -0,0 +1,113 @@
+import { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Alert, Box } from '@chakra-ui/react';
+import React from 'react';
+import { Element } from 'react-scroll';
+
+import type { FormSubmitHandler, SmartContractMethod } from './types';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import Tag from 'ui/shared/chakra/Tag';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import Hint from 'ui/shared/Hint';
+
+import ContractMethodForm from './form/ContractMethodForm';
+import { getElementName } from './useScrollToMethod';
+
+interface Props {
+  data: SmartContractMethod;
+  index: number;
+  id: number;
+  addressHash: string;
+  tab: string;
+  onSubmit: FormSubmitHandler;
+}
+
+const ContractAbiItem = ({ data, index, id, addressHash, tab, onSubmit }: Props) => {
+  const [ attempt, setAttempt ] = React.useState(0);
+
+  const url = React.useMemo(() => {
+    if (!('method_id' in data)) {
+      return '';
+    }
+
+    return config.app.baseUrl + route({
+      pathname: '/address/[hash]',
+      query: {
+        hash: addressHash ?? '',
+        tab,
+      },
+      hash: data.method_id,
+    });
+  }, [ addressHash, data, tab ]);
+
+  const handleCopyLinkClick = React.useCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+  }, []);
+
+  const handleCopyMethodIdClick = React.useCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+  }, []);
+
+  const handleReset = React.useCallback(() => {
+    setAttempt((prev) => prev + 1);
+  }, []);
+
+  return (
+    <AccordionItem as="section" _first={{ borderTopWidth: 0 }} _last={{ borderBottomWidth: 0 }}>
+      { ({ isExpanded }) => (
+        <>
+          <Element as="h2" name={ 'method_id' in data ? getElementName(data.method_id) : '' }>
+            <AccordionButton px={ 0 } py={ 3 } _hover={{ bgColor: 'inherit' }} wordBreak="break-all" textAlign="left" as="div" cursor="pointer">
+              { 'method_id' in data && <CopyToClipboard text={ url } onClick={ handleCopyLinkClick } type="link" mr={ 2 } ml={ 0 } color="text_secondary"/> }
+              <Box as="span" fontWeight={ 500 } mr={ 1 }>
+                { index + 1 }. { data.type === 'fallback' || data.type === 'receive' ? data.type : data.name }
+              </Box>
+              { data.type === 'fallback' && (
+                <Hint
+                  label={
+                    `The fallback function is executed on a call to the contract if none of the other functions match 
+                    the given function signature, or if no data was supplied at all and there is no receive Ether function. 
+                    The fallback function always receives data, but in order to also receive Ether it must be marked payable.`
+                  }/>
+              ) }
+              { data.type === 'receive' && (
+                <Hint
+                  label={
+                    `The receive function is executed on a call to the contract with empty calldata. 
+                    This is the function that is executed on plain Ether transfers (e.g. via .send() or .transfer()). 
+                    If no such function exists, but a payable fallback function exists, the fallback function will be called on a plain Ether transfer. 
+                    If neither a receive Ether nor a payable fallback function is present, 
+                    the contract cannot receive Ether through regular transactions and throws an exception.`
+                  }/>
+              ) }
+              { 'method_id' in data && (
+                <>
+                  <Tag>{ data.method_id }</Tag>
+                  <CopyToClipboard text={ `${ data.name } (${ data.method_id })` } onClick={ handleCopyMethodIdClick }/>
+                </>
+              ) }
+              <AccordionIcon transform={ isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)' } color="gray.500"/>
+            </AccordionButton>
+          </Element>
+          <AccordionPanel pb={ 4 } pr={ 0 } pl="28px" w="calc(100% - 6px)">
+            { 'is_invalid' in data && data.is_invalid ? (
+              <Alert status="warning">An error occurred while parsing the method signature.</Alert>
+            ) : (
+              <ContractMethodForm
+                key={ id + '_' + index + '_' + attempt }
+                data={ data }
+                attempt={ attempt }
+                onSubmit={ onSubmit }
+                onReset={ handleReset }
+                isOpen={ isExpanded }
+              />
+            ) }
+          </AccordionPanel>
+        </>
+      ) }
+    </AccordionItem>
+  );
+};
+
+export default React.memo(ContractAbiItem);
diff --git a/ui/address/contract/methods/ContractConnectWallet.tsx b/ui/address/contract/methods/ContractConnectWallet.tsx
new file mode 100644
index 0000000000..9fc87de735
--- /dev/null
+++ b/ui/address/contract/methods/ContractConnectWallet.tsx
@@ -0,0 +1,63 @@
+import { Alert, Button, Flex, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import useWallet from 'ui/snippets/walletMenu/useWallet';
+
+interface Props {
+  isLoading?: boolean;
+}
+
+const ContractConnectWallet = ({ isLoading }: Props) => {
+  const { isModalOpening, isModalOpen, connect, disconnect, address, isWalletConnected } = useWallet({ source: 'Smart contracts' });
+  const isMobile = useIsMobile();
+
+  const content = (() => {
+    if (!isWalletConnected) {
+      return (
+        <>
+          <span>Disconnected</span>
+          <Button
+            ml={ 3 }
+            onClick={ connect }
+            size="sm"
+            variant="outline"
+            isLoading={ isModalOpening || isModalOpen }
+            loadingText="Connect wallet"
+          >
+              Connect wallet
+          </Button>
+        </>
+      );
+    }
+
+    return (
+      <Flex columnGap={ 3 } rowGap={ 3 } alignItems={{ base: 'flex-start', lg: 'center' }} flexDir={{ base: 'column', lg: 'row' }}>
+        <Flex alignItems="center">
+          <span>Connected to </span>
+          <AddressEntity
+            address={{ hash: address }}
+            truncation={ isMobile ? 'constant' : 'dynamic' }
+            fontWeight={ 600 }
+            ml={ 2 }
+          />
+        </Flex>
+        <Button onClick={ disconnect } size="sm" variant="outline">Disconnect</Button>
+      </Flex>
+    );
+  })();
+
+  return (
+    <Skeleton isLoaded={ !isLoading } mb={ 6 }>
+      <Alert status={ address ? 'success' : 'warning' }>
+        { content }
+      </Alert>
+    </Skeleton>
+  );
+};
+
+const Fallback = () => null;
+
+export default config.features.blockchainInteraction.isEnabled ? ContractConnectWallet : Fallback;
diff --git a/ui/address/contract/methods/ContractCustomAbiAlert.tsx b/ui/address/contract/methods/ContractCustomAbiAlert.tsx
new file mode 100644
index 0000000000..d381d87fd3
--- /dev/null
+++ b/ui/address/contract/methods/ContractCustomAbiAlert.tsx
@@ -0,0 +1,20 @@
+import { Alert, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  isLoading?: boolean;
+}
+
+const ContractCustomAbiAlert = ({ isLoading }: Props) => {
+  return (
+    <Skeleton isLoaded={ !isLoading }>
+      <Alert status="warning" mb={ 6 }>
+        Note: Contract with custom ABI is only meant for debugging purpose and it is the user’s responsibility to ensure that the provided ABI
+        matches the contract, otherwise errors may occur or results returned may be incorrect.
+        Blockscout is not responsible for any losses that arise from the use of Read & Write contract.
+      </Alert>
+    </Skeleton>
+  );
+};
+
+export default React.memo(ContractCustomAbiAlert);
diff --git a/ui/address/contract/methods/ContractImplementationAddress.tsx b/ui/address/contract/methods/ContractImplementationAddress.tsx
new file mode 100644
index 0000000000..6eabc1e86c
--- /dev/null
+++ b/ui/address/contract/methods/ContractImplementationAddress.tsx
@@ -0,0 +1,66 @@
+import { Flex, Select, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressImplementation } from 'types/api/addressParams';
+
+import { route } from 'nextjs-routes';
+
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import LinkNewTab from 'ui/shared/links/LinkNewTab';
+
+interface Props {
+  selectedItem: AddressImplementation;
+  onItemSelect: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  implementations: Array<AddressImplementation>;
+  isLoading?: boolean;
+}
+
+const ContractImplementationAddress = ({ selectedItem, onItemSelect, implementations, isLoading }: Props) => {
+
+  if (isLoading) {
+    return <Skeleton mb={ 6 } h={ 6 } w={{ base: '300px', lg: '500px' }}/>;
+  }
+
+  if (implementations.length === 0) {
+    return null;
+  }
+
+  if (implementations.length === 1) {
+    return (
+      <Flex mb={ 6 } flexWrap="wrap" columnGap={ 2 } rowGap={ 2 }>
+        <span>Implementation address:</span>
+        <AddressEntity
+          address={{ hash: implementations[0].address, is_contract: true, is_verified: true }}
+        />
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex mb={ 6 } flexWrap="wrap" columnGap={ 2 } rowGap={ 2 } alignItems="center">
+      <span>Implementation address:</span>
+      <Select
+        size="xs"
+        value={ selectedItem.address }
+        onChange={ onItemSelect }
+        w="auto"
+        fontWeight={ 600 }
+        borderRadius="base"
+      >
+        { implementations.map((implementation) => (
+          <option key={ implementation.address } value={ implementation.address }>
+            { implementation.name }
+          </option>
+        )) }
+      </Select>
+      <CopyToClipboard text={ selectedItem.address } ml={ 1 }/>
+      <LinkNewTab
+        label="Open contract details page in new tab"
+        href={ route({ pathname: '/address/[hash]', query: { hash: selectedItem.address, tab: 'contract' } }) }
+      />
+    </Flex>
+  );
+};
+
+export default React.memo(ContractImplementationAddress);
diff --git a/ui/address/contract/methods/ContractMethods.tsx b/ui/address/contract/methods/ContractMethods.tsx
new file mode 100644
index 0000000000..eb7e00ee65
--- /dev/null
+++ b/ui/address/contract/methods/ContractMethods.tsx
@@ -0,0 +1,41 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { MethodType, SmartContractMethod } from './types';
+
+import getQueryParamString from 'lib/router/getQueryParamString';
+import ContentLoader from 'ui/shared/ContentLoader';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+
+import ContractAbi from './ContractAbi';
+
+interface Props {
+  abi: Array<SmartContractMethod>;
+  isLoading?: boolean;
+  isError?: boolean;
+  type: MethodType;
+}
+
+const ContractMethods = ({ abi, isLoading, isError, type }: Props) => {
+
+  const router = useRouter();
+
+  const tab = getQueryParamString(router.query.tab);
+  const addressHash = getQueryParamString(router.query.hash);
+
+  if (isLoading) {
+    return <ContentLoader/>;
+  }
+
+  if (isError) {
+    return <DataFetchAlert/>;
+  }
+
+  if (abi.length === 0) {
+    return <span>No public { type } functions were found for this contract.</span>;
+  }
+
+  return <ContractAbi abi={ abi } tab={ tab } addressHash={ addressHash }/>;
+};
+
+export default React.memo(ContractMethods);
diff --git a/ui/address/contract/methods/ContractMethodsCustom.tsx b/ui/address/contract/methods/ContractMethodsCustom.tsx
new file mode 100644
index 0000000000..abb86494ec
--- /dev/null
+++ b/ui/address/contract/methods/ContractMethodsCustom.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import type { MethodType, SmartContractMethod } from './types';
+
+import ContractConnectWallet from './ContractConnectWallet';
+import ContractCustomAbiAlert from './ContractCustomAbiAlert';
+import ContractMethods from './ContractMethods';
+
+interface Props {
+  abi: Array<SmartContractMethod>;
+  isLoading?: boolean;
+  type: MethodType;
+}
+
+const ContractMethodsCustom = ({ abi, isLoading, type }: Props) => {
+
+  return (
+    <>
+      <ContractConnectWallet isLoading={ isLoading }/>
+      <ContractCustomAbiAlert isLoading={ isLoading }/>
+      <ContractMethods abi={ abi } isLoading={ isLoading } type={ type }/>
+    </>
+  );
+};
+
+export default React.memo(ContractMethodsCustom);
diff --git a/ui/address/contract/methods/ContractMethodsProxy.pw.tsx b/ui/address/contract/methods/ContractMethodsProxy.pw.tsx
new file mode 100644
index 0000000000..5d4d7516ec
--- /dev/null
+++ b/ui/address/contract/methods/ContractMethodsProxy.pw.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+import * as addressMock from 'mocks/address/address';
+import * as contractMock from 'mocks/contract/info';
+import * as methodsMock from 'mocks/contract/methods';
+import { test, expect } from 'playwright/lib';
+
+import ContractMethodsProxy from './ContractMethodsProxy';
+
+const addressHash = addressMock.hash;
+
+test('with one implementation +@mobile', async({ render, mockApiResponse }) => {
+  const hooksConfig = {
+    router: {
+      query: { hash: addressHash, tab: 'read_proxy' },
+    },
+  };
+  const implementations = [
+    { address: '0x2F4F4A52295940C576417d29F22EEb92B440eC89', name: 'HomeBridge' },
+  ];
+  await mockApiResponse('contract', { ...contractMock.verified, abi: methodsMock.read }, { pathParams: { hash: implementations[0].address } });
+
+  const component = await render(<ContractMethodsProxy implementations={ implementations } type="read"/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
+
+test('with multiple implementations +@mobile', async({ render, mockApiResponse }) => {
+  const hooksConfig = {
+    router: {
+      query: { hash: addressHash, tab: 'read_proxy' },
+    },
+  };
+  const implementations = [
+    { address: '0x2F4F4A52295940C576417d29F22EEb92B440eC89', name: 'HomeBridge' },
+    { address: '0xc9e91eDeA9DC16604022e4E5b437Df9c64EdB05A', name: 'Diamond' },
+  ];
+  await mockApiResponse('contract', { ...contractMock.verified, abi: methodsMock.read }, { pathParams: { hash: implementations[0].address } });
+
+  const component = await render(<ContractMethodsProxy implementations={ implementations } type="read"/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/contract/methods/ContractMethodsProxy.tsx b/ui/address/contract/methods/ContractMethodsProxy.tsx
new file mode 100644
index 0000000000..a6b0337f85
--- /dev/null
+++ b/ui/address/contract/methods/ContractMethodsProxy.tsx
@@ -0,0 +1,61 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import type { MethodType } from './types';
+import type { AddressImplementation } from 'types/api/addressParams';
+
+import useApiQuery from 'lib/api/useApiQuery';
+
+import ContractConnectWallet from './ContractConnectWallet';
+import ContractImplementationAddress from './ContractImplementationAddress';
+import ContractMethods from './ContractMethods';
+import { isReadMethod, isWriteMethod } from './utils';
+
+interface Props {
+  type: MethodType;
+  implementations: Array<AddressImplementation>;
+  isLoading?: boolean;
+}
+
+const ContractMethodsProxy = ({ type, implementations, isLoading: isInitialLoading }: Props) => {
+
+  const [ selectedItem, setSelectedItem ] = React.useState(implementations[0]);
+
+  const contractQuery = useApiQuery('contract', {
+    pathParams: { hash: selectedItem.address },
+    queryOptions: {
+      enabled: Boolean(selectedItem.address),
+      refetchOnMount: false,
+    },
+  });
+
+  const handleItemSelect = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
+    const nextOption = implementations.find(({ address }) => address === event.target.value);
+    if (nextOption) {
+      setSelectedItem(nextOption);
+    }
+  }, [ implementations ]);
+
+  const abi = contractQuery.data?.abi?.filter(type === 'read' ? isReadMethod : isWriteMethod) || [];
+
+  return (
+    <Box>
+      <ContractConnectWallet isLoading={ isInitialLoading }/>
+      <ContractImplementationAddress
+        implementations={ implementations }
+        selectedItem={ selectedItem }
+        onItemSelect={ handleItemSelect }
+        isLoading={ isInitialLoading }
+      />
+      <ContractMethods
+        key={ selectedItem.address }
+        abi={ abi }
+        isLoading={ isInitialLoading || contractQuery.isPending }
+        isError={ contractQuery.isError }
+        type={ type }
+      />
+    </Box>
+  );
+};
+
+export default React.memo(ContractMethodsProxy);
diff --git a/ui/address/contract/methods/ContractMethodsRegular.pw.tsx b/ui/address/contract/methods/ContractMethodsRegular.pw.tsx
new file mode 100644
index 0000000000..eb6b1fb4ee
--- /dev/null
+++ b/ui/address/contract/methods/ContractMethodsRegular.pw.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import * as addressMock from 'mocks/address/address';
+import * as methodsMock from 'mocks/contract/methods';
+import { test, expect } from 'playwright/lib';
+
+import ContractMethodsRegular from './ContractMethodsRegular';
+
+const addressHash = addressMock.hash;
+
+test('read methods', async({ render, mockContractReadResponse }) => {
+  // for some reason it takes a long time for "wagmi" library to parse response result in the test environment
+  // so I had to increase the test timeout
+  test.slow();
+
+  const hooksConfig = {
+    router: {
+      query: { hash: addressHash, tab: 'read_contract' },
+    },
+  };
+
+  await mockContractReadResponse({
+    abiItem: methodsMock.read[1],
+    address: addressHash,
+    result: [ 'USDC' ],
+  });
+
+  const component = await render(<ContractMethodsRegular abi={ methodsMock.read } type="read"/>, { hooksConfig });
+  await component.getByText(/expand all/i).click();
+
+  await expect(component.getByText('USDC')).toBeVisible({ timeout: 20_000 });
+  await expect(component).toHaveScreenshot();
+});
+
+test('write methods +@dark-mode +@mobile', async({ render }) => {
+  const hooksConfig = {
+    router: {
+      query: { hash: addressHash, tab: 'write_contract' },
+    },
+  };
+
+  const component = await render(<ContractMethodsRegular abi={ methodsMock.write } type="write"/>, { hooksConfig });
+  await component.getByText(/expand all/i).click();
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/contract/methods/ContractMethodsRegular.tsx b/ui/address/contract/methods/ContractMethodsRegular.tsx
new file mode 100644
index 0000000000..1254d3c8a5
--- /dev/null
+++ b/ui/address/contract/methods/ContractMethodsRegular.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import type { MethodType, SmartContractMethod } from './types';
+
+import ContractConnectWallet from './ContractConnectWallet';
+import ContractMethods from './ContractMethods';
+
+interface Props {
+  abi: Array<SmartContractMethod>;
+  isLoading?: boolean;
+  type: MethodType;
+}
+
+const ContractMethodsRegular = ({ abi, isLoading, type }: Props) => {
+
+  return (
+    <>
+      <ContractConnectWallet isLoading={ isLoading }/>
+      <ContractMethods abi={ abi } isLoading={ isLoading } type={ type }/>
+    </>
+  );
+};
+
+export default React.memo(ContractMethodsRegular);
diff --git a/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_default_with-multiple-implementations-mobile-1.png b/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_default_with-multiple-implementations-mobile-1.png
new file mode 100644
index 0000000000..5fc0d17994
Binary files /dev/null and b/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_default_with-multiple-implementations-mobile-1.png differ
diff --git a/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_default_with-one-implementation-mobile-1.png b/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_default_with-one-implementation-mobile-1.png
new file mode 100644
index 0000000000..d5dcadbc39
Binary files /dev/null and b/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_default_with-one-implementation-mobile-1.png differ
diff --git a/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_mobile_with-multiple-implementations-mobile-1.png b/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_mobile_with-multiple-implementations-mobile-1.png
new file mode 100644
index 0000000000..ce31564e4e
Binary files /dev/null and b/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_mobile_with-multiple-implementations-mobile-1.png differ
diff --git a/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_mobile_with-one-implementation-mobile-1.png b/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_mobile_with-one-implementation-mobile-1.png
new file mode 100644
index 0000000000..a0ea56b320
Binary files /dev/null and b/ui/address/contract/methods/__screenshots__/ContractMethodsProxy.pw.tsx_mobile_with-one-implementation-mobile-1.png differ
diff --git a/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_dark-color-mode_write-methods-dark-mode-mobile-1.png b/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_dark-color-mode_write-methods-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..1dcd29d361
Binary files /dev/null and b/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_dark-color-mode_write-methods-dark-mode-mobile-1.png differ
diff --git a/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_default_read-methods-1.png b/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_default_read-methods-1.png
new file mode 100644
index 0000000000..6192e4df90
Binary files /dev/null and b/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_default_read-methods-1.png differ
diff --git a/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_default_write-methods-dark-mode-mobile-1.png b/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_default_write-methods-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..e620bff054
Binary files /dev/null and b/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_default_write-methods-dark-mode-mobile-1.png differ
diff --git a/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_mobile_write-methods-dark-mode-mobile-1.png b/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_mobile_write-methods-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..dbe1277a94
Binary files /dev/null and b/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_mobile_write-methods-dark-mode-mobile-1.png differ
diff --git a/ui/address/contract/methodForm/ContractMethodArrayButton.tsx b/ui/address/contract/methods/form/ContractMethodArrayButton.tsx
similarity index 100%
rename from ui/address/contract/methodForm/ContractMethodArrayButton.tsx
rename to ui/address/contract/methods/form/ContractMethodArrayButton.tsx
diff --git a/ui/address/contract/methodForm/ContractMethodFieldAccordion.tsx b/ui/address/contract/methods/form/ContractMethodFieldAccordion.tsx
similarity index 100%
rename from ui/address/contract/methodForm/ContractMethodFieldAccordion.tsx
rename to ui/address/contract/methods/form/ContractMethodFieldAccordion.tsx
diff --git a/ui/address/contract/methodForm/ContractMethodFieldInput.tsx b/ui/address/contract/methods/form/ContractMethodFieldInput.tsx
similarity index 91%
rename from ui/address/contract/methodForm/ContractMethodFieldInput.tsx
rename to ui/address/contract/methods/form/ContractMethodFieldInput.tsx
index 1a899f65bd..118f5be8b4 100644
--- a/ui/address/contract/methodForm/ContractMethodFieldInput.tsx
+++ b/ui/address/contract/methods/form/ContractMethodFieldInput.tsx
@@ -3,32 +3,33 @@ import React from 'react';
 import { useController, useFormContext } from 'react-hook-form';
 import { NumericFormat } from 'react-number-format';
 
-import type { SmartContractMethodInput } from 'types/api/contract';
+import type { ContractAbiItemInput } from '../types';
 
 import ClearButton from 'ui/shared/ClearButton';
 
 import ContractMethodFieldLabel from './ContractMethodFieldLabel';
 import ContractMethodMultiplyButton from './ContractMethodMultiplyButton';
-import useArgTypeMatchInt from './useArgTypeMatchInt';
 import useFormatFieldValue from './useFormatFieldValue';
 import useValidateField from './useValidateField';
+import { matchInt } from './utils';
 
 interface Props {
-  data: SmartContractMethodInput;
+  data: ContractAbiItemInput;
   hideLabel?: boolean;
   path: string;
   className?: string;
   isDisabled: boolean;
+  isOptional?: boolean;
   level: number;
 }
 
-const ContractMethodFieldInput = ({ data, hideLabel, path: name, className, isDisabled, level }: Props) => {
+const ContractMethodFieldInput = ({ data, hideLabel, path: name, className, isDisabled, isOptional: isOptionalProp, level }: Props) => {
   const ref = React.useRef<HTMLInputElement>(null);
 
   const isNativeCoin = data.fieldType === 'native_coin';
-  const isOptional = isNativeCoin;
+  const isOptional = isOptionalProp || isNativeCoin;
 
-  const argTypeMatchInt = useArgTypeMatchInt({ argType: data.type });
+  const argTypeMatchInt = React.useMemo(() => matchInt(data.type), [ data.type ]);
   const validate = useValidateField({ isOptional, argType: data.type, argTypeMatchInt });
   const format = useFormatFieldValue({ argType: data.type, argTypeMatchInt });
 
diff --git a/ui/address/contract/methods/form/ContractMethodFieldInputArray.tsx b/ui/address/contract/methods/form/ContractMethodFieldInputArray.tsx
new file mode 100644
index 0000000000..0c98d14589
--- /dev/null
+++ b/ui/address/contract/methods/form/ContractMethodFieldInputArray.tsx
@@ -0,0 +1,165 @@
+import { Flex } from '@chakra-ui/react';
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import type { ContractAbiItemInput } from '../types';
+
+import ContractMethodArrayButton from './ContractMethodArrayButton';
+import type { Props as AccordionProps } from './ContractMethodFieldAccordion';
+import ContractMethodFieldAccordion from './ContractMethodFieldAccordion';
+import ContractMethodFieldInput from './ContractMethodFieldInput';
+import ContractMethodFieldInputTuple from './ContractMethodFieldInputTuple';
+import ContractMethodFieldLabel from './ContractMethodFieldLabel';
+import { getFieldLabel, matchArray, transformDataForArrayItem } from './utils';
+
+interface Props extends Pick<AccordionProps, 'onAddClick' | 'onRemoveClick' | 'index'> {
+  data: ContractAbiItemInput;
+  level: number;
+  basePath: string;
+  isDisabled: boolean;
+  isArrayElement?: boolean;
+  size?: number;
+}
+
+const ContractMethodFieldInputArray = ({
+  data,
+  level,
+  basePath,
+  onAddClick,
+  onRemoveClick,
+  index: parentIndex,
+  isDisabled,
+  isArrayElement,
+}: Props) => {
+  const { formState: { errors } } = useFormContext();
+  const fieldsWithErrors = Object.keys(errors);
+  const isInvalid = fieldsWithErrors.some((field) => field.startsWith(basePath));
+
+  const arrayMatch = matchArray(data.type);
+  const hasFixedSize = arrayMatch !== null && arrayMatch.size !== Infinity;
+
+  const [ registeredIndices, setRegisteredIndices ] = React.useState(hasFixedSize ? Array(arrayMatch.size).fill(0).map((_, i) => i) : [ 0 ]);
+
+  const handleAddButtonClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    setRegisteredIndices((prev) => [ ...prev, prev[prev.length - 1] + 1 ]);
+  }, []);
+
+  const handleRemoveButtonClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    const itemIndex = event.currentTarget.getAttribute('data-index');
+    if (itemIndex) {
+      setRegisteredIndices((prev) => prev.filter((index) => index !== Number(itemIndex)));
+    }
+  }, [ ]);
+
+  if (arrayMatch?.isNested) {
+    return (
+      <>
+        {
+          registeredIndices.map((registeredIndex, index) => {
+            const itemData = transformDataForArrayItem(data, index);
+            const itemBasePath = `${ basePath }:${ registeredIndex }`;
+            const itemIsInvalid = fieldsWithErrors.some((field) => field.startsWith(itemBasePath));
+
+            return (
+              <ContractMethodFieldAccordion
+                key={ registeredIndex }
+                level={ level + 1 }
+                label={ getFieldLabel(itemData) }
+                isInvalid={ itemIsInvalid }
+                onAddClick={ !hasFixedSize && index === registeredIndices.length - 1 ? handleAddButtonClick : undefined }
+                onRemoveClick={ !hasFixedSize && registeredIndices.length > 1 ? handleRemoveButtonClick : undefined }
+                index={ registeredIndex }
+              >
+                <ContractMethodFieldInputArray
+                  key={ registeredIndex }
+                  data={ itemData }
+                  basePath={ itemBasePath }
+                  level={ level + 1 }
+                  isDisabled={ isDisabled }
+                  isArrayElement
+                />
+              </ContractMethodFieldAccordion>
+            );
+          })
+        }
+      </>
+    );
+  }
+
+  const isTupleArray = arrayMatch?.itemType.includes('tuple');
+
+  if (isTupleArray) {
+    const content = (
+      <>
+        { registeredIndices.map((registeredIndex, index) => {
+          const itemData = transformDataForArrayItem(data, index);
+
+          return (
+            <ContractMethodFieldInputTuple
+              key={ registeredIndex }
+              data={ itemData }
+              basePath={ `${ basePath }:${ registeredIndex }` }
+              level={ level + 1 }
+              onAddClick={ !hasFixedSize && index === registeredIndices.length - 1 ? handleAddButtonClick : undefined }
+              onRemoveClick={ !hasFixedSize && registeredIndices.length > 1 ? handleRemoveButtonClick : undefined }
+              index={ registeredIndex }
+              isDisabled={ isDisabled }
+              isOptional={ registeredIndices.length === 1 }
+            />
+          );
+        }) }
+      </>
+    );
+
+    if (isArrayElement) {
+      return content;
+    }
+
+    return (
+      <ContractMethodFieldAccordion
+        level={ level }
+        label={ getFieldLabel(data) }
+        onAddClick={ onAddClick }
+        onRemoveClick={ onRemoveClick }
+        index={ parentIndex }
+        isInvalid={ isInvalid }
+      >
+        { content }
+      </ContractMethodFieldAccordion>
+    );
+  }
+
+  // primitive value array
+  return (
+    <Flex flexDir={{ base: 'column', md: 'row' }} alignItems="flex-start" columnGap={ 3 } px="6px">
+      { !isArrayElement && <ContractMethodFieldLabel data={ data } level={ level } isOptional={ registeredIndices.length === 1 }/> }
+      <Flex flexDir="column" rowGap={ 1 } w="100%">
+        { registeredIndices.map((registeredIndex, index) => {
+          const itemData = transformDataForArrayItem(data, index);
+
+          return (
+            <Flex key={ registeredIndex } alignItems="flex-start" columnGap={ 3 }>
+              <ContractMethodFieldInput
+                data={ itemData }
+                hideLabel
+                path={ `${ basePath }:${ index }` }
+                level={ level }
+                px={ 0 }
+                isDisabled={ isDisabled }
+                isOptional={ registeredIndices.length === 1 }
+              />
+              { !hasFixedSize && registeredIndices.length > 1 &&
+                <ContractMethodArrayButton index={ registeredIndex } onClick={ handleRemoveButtonClick } type="remove" my="6px"/> }
+              { !hasFixedSize && index === registeredIndices.length - 1 &&
+                <ContractMethodArrayButton index={ registeredIndex } onClick={ handleAddButtonClick } type="add" my="6px"/> }
+            </Flex>
+          );
+        }) }
+      </Flex>
+    </Flex>
+  );
+};
+
+export default React.memo(ContractMethodFieldInputArray);
diff --git a/ui/address/contract/methodForm/ContractMethodFieldInputTuple.tsx b/ui/address/contract/methods/form/ContractMethodFieldInputTuple.tsx
similarity index 79%
rename from ui/address/contract/methodForm/ContractMethodFieldInputTuple.tsx
rename to ui/address/contract/methods/form/ContractMethodFieldInputTuple.tsx
index 79adfb0d8a..339b391d66 100644
--- a/ui/address/contract/methodForm/ContractMethodFieldInputTuple.tsx
+++ b/ui/address/contract/methods/form/ContractMethodFieldInputTuple.tsx
@@ -1,26 +1,31 @@
 import React from 'react';
 import { useFormContext } from 'react-hook-form';
 
-import type { SmartContractMethodInput } from 'types/api/contract';
+import type { ContractAbiItemInput } from '../types';
 
 import type { Props as AccordionProps } from './ContractMethodFieldAccordion';
 import ContractMethodFieldAccordion from './ContractMethodFieldAccordion';
 import ContractMethodFieldInput from './ContractMethodFieldInput';
 import ContractMethodFieldInputArray from './ContractMethodFieldInputArray';
-import { ARRAY_REGEXP, getFieldLabel } from './utils';
+import { getFieldLabel, matchArray } from './utils';
 
 interface Props extends Pick<AccordionProps, 'onAddClick' | 'onRemoveClick' | 'index'> {
-  data: SmartContractMethodInput;
+  data: ContractAbiItemInput;
   basePath: string;
   level: number;
   isDisabled: boolean;
+  isOptional?: boolean;
 }
 
-const ContractMethodFieldInputTuple = ({ data, basePath, level, isDisabled, ...accordionProps }: Props) => {
+const ContractMethodFieldInputTuple = ({ data, basePath, level, isDisabled, isOptional, ...accordionProps }: Props) => {
   const { formState: { errors } } = useFormContext();
   const fieldsWithErrors = Object.keys(errors);
   const isInvalid = fieldsWithErrors.some((field) => field.startsWith(basePath));
 
+  if (!('components' in data)) {
+    return null;
+  }
+
   return (
     <ContractMethodFieldAccordion
       { ...accordionProps }
@@ -29,7 +34,7 @@ const ContractMethodFieldInputTuple = ({ data, basePath, level, isDisabled, ...a
       isInvalid={ isInvalid }
     >
       { data.components?.map((component, index) => {
-        if (component.components && component.type === 'tuple') {
+        if ('components' in component && component.type === 'tuple') {
           return (
             <ContractMethodFieldInputTuple
               key={ index }
@@ -41,15 +46,14 @@ const ContractMethodFieldInputTuple = ({ data, basePath, level, isDisabled, ...a
           );
         }
 
-        const arrayMatch = component.type.match(ARRAY_REGEXP);
+        const arrayMatch = matchArray(component.type);
         if (arrayMatch) {
-          const [ , itemType ] = arrayMatch;
           return (
             <ContractMethodFieldInputArray
               key={ index }
               data={ component }
               basePath={ `${ basePath }:${ index }` }
-              level={ itemType === 'tuple' ? level + 1 : level }
+              level={ arrayMatch.itemType === 'tuple' ? level + 1 : level }
               isDisabled={ isDisabled }
             />
           );
@@ -61,6 +65,7 @@ const ContractMethodFieldInputTuple = ({ data, basePath, level, isDisabled, ...a
             data={ component }
             path={ `${ basePath }:${ index }` }
             isDisabled={ isDisabled }
+            isOptional={ isOptional }
             level={ level }
           />
         );
diff --git a/ui/address/contract/methodForm/ContractMethodFieldLabel.tsx b/ui/address/contract/methods/form/ContractMethodFieldLabel.tsx
similarity index 86%
rename from ui/address/contract/methodForm/ContractMethodFieldLabel.tsx
rename to ui/address/contract/methods/form/ContractMethodFieldLabel.tsx
index ea2b4be02c..305738fe12 100644
--- a/ui/address/contract/methodForm/ContractMethodFieldLabel.tsx
+++ b/ui/address/contract/methods/form/ContractMethodFieldLabel.tsx
@@ -1,12 +1,12 @@
 import { Box, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-import type { SmartContractMethodInput } from 'types/api/contract';
+import type { ContractAbiItemInput } from '../types';
 
 import { getFieldLabel } from './utils';
 
 interface Props {
-  data: SmartContractMethodInput;
+  data: ContractAbiItemInput;
   isOptional?: boolean;
   level: number;
 }
diff --git a/ui/address/contract/methodForm/ContractMethodForm.pw.tsx b/ui/address/contract/methods/form/ContractMethodForm.pw.tsx
similarity index 79%
rename from ui/address/contract/methodForm/ContractMethodForm.pw.tsx
rename to ui/address/contract/methods/form/ContractMethodForm.pw.tsx
index 2fd5fbb589..5f27845759 100644
--- a/ui/address/contract/methodForm/ContractMethodForm.pw.tsx
+++ b/ui/address/contract/methods/form/ContractMethodForm.pw.tsx
@@ -1,16 +1,15 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import type { SmartContractWriteMethod } from 'types/api/contract';
+import type { FormSubmitHandler, SmartContractMethod } from '../types';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import ContractMethodForm from './ContractMethodForm';
 
-const onSubmit = () => Promise.resolve({ hash: '0x0000' as `0x${ string }` });
-const resultComponent = () => null;
+const onSubmit: FormSubmitHandler = () => Promise.resolve({ source: 'wallet_client' as const, data: { hash: '0x0000' as `0x${ string }` } });
+const onReset = () => {};
 
-const data: SmartContractWriteMethod = {
+const data: SmartContractMethod = {
   inputs: [
     // TUPLE
     {
@@ -53,6 +52,13 @@ const data: SmartContractWriteMethod = {
       type: 'tuple[][]',
     },
 
+    // TOP LEVEL NESTED ARRAY
+    {
+      internalType: 'int256[2][][3]',
+      name: 'ParentArray',
+      type: 'int256[2][][3]',
+    },
+
     // LITERALS
     { internalType: 'bytes32', name: 'fulfillerConduitKey', type: 'bytes32' },
     { internalType: 'address', name: 'recipient', type: 'address' },
@@ -91,17 +97,16 @@ const data: SmartContractWriteMethod = {
   constant: false,
 };
 
-test('base view +@mobile +@dark-mode', async({ mount }) => {
-
-  const component = await mount(
-    <TestApp>
-      <ContractMethodForm<SmartContractWriteMethod>
-        data={ data }
-        onSubmit={ onSubmit }
-        resultComponent={ resultComponent }
-        methodType="write"
-      />
-    </TestApp>,
+test('base view +@mobile +@dark-mode', async({ render }) => {
+
+  const component = await render(
+    <ContractMethodForm
+      data={ data }
+      onSubmit={ onSubmit }
+      onReset={ onReset }
+      isOpen
+      attempt={ 0 }
+    />,
   );
 
   // fill top level fields
@@ -125,9 +130,13 @@ test('base view +@mobile +@dark-mode', async({ mount }) => {
   await component.getByText('struct FulfillmentComponent[][]').click();
   await component.getByRole('button', { name: 'add' }).nth(1).click();
   await component.getByText('#1 FulfillmentComponent[]').click();
-  await component.getByText('#1.1 FulfillmentComponent').click();
+  await component.getByLabel('#1 FulfillmentComponent[] (tuple[])').getByText('#1 FulfillmentComponent (tuple)').click();
   await component.getByRole('button', { name: 'add' }).nth(1).click();
 
+  await component.getByText('ParentArray (int256[2][][3])').click();
+  await component.getByText('#1 int256[2][] (int256[2][])').click();
+  await component.getByLabel('#1 int256[2][] (int256[2][])').getByText('#1 int256[2] (int256[2])').click();
+
   // submit form
   await component.getByRole('button', { name: 'Write' }).click();
 
diff --git a/ui/address/contract/methods/form/ContractMethodForm.tsx b/ui/address/contract/methods/form/ContractMethodForm.tsx
new file mode 100644
index 0000000000..f63c8a9ba5
--- /dev/null
+++ b/ui/address/contract/methods/form/ContractMethodForm.tsx
@@ -0,0 +1,249 @@
+import { Box, Button, Flex, Tooltip, chakra } from '@chakra-ui/react';
+import React from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm, FormProvider } from 'react-hook-form';
+import type { AbiFunction } from 'viem';
+
+import type { FormSubmitHandler, FormSubmitResult, MethodCallStrategy, SmartContractMethod } from '../types';
+
+import config from 'configs/app';
+import * as mixpanel from 'lib/mixpanel/index';
+import IconSvg from 'ui/shared/IconSvg';
+
+import { isReadMethod } from '../utils';
+import ContractMethodFieldAccordion from './ContractMethodFieldAccordion';
+import ContractMethodFieldInput from './ContractMethodFieldInput';
+import ContractMethodFieldInputArray from './ContractMethodFieldInputArray';
+import ContractMethodFieldInputTuple from './ContractMethodFieldInputTuple';
+import ContractMethodResultPublicClient from './ContractMethodResultPublicClient';
+import ContractMethodResultWalletClient from './ContractMethodResultWalletClient';
+import { getFieldLabel, matchArray, transformFormDataToMethodArgs } from './utils';
+import type { ContractMethodFormFields } from './utils';
+
+// eslint-disable-next-line max-len
+const NO_WALLET_CLIENT_TEXT = 'Blockchain interaction is not available at the moment since WalletConnect is not configured for this application. Please contact the service maintainer to make necessary changes in the service configuration.';
+
+interface Props {
+  data: SmartContractMethod;
+  attempt: number;
+  onSubmit: FormSubmitHandler;
+  isOpen: boolean;
+  onReset: () => void;
+}
+
+const ContractMethodForm = ({ data, attempt, onSubmit, onReset, isOpen }: Props) => {
+
+  const [ result, setResult ] = React.useState<FormSubmitResult>();
+  const [ isLoading, setLoading ] = React.useState(false);
+  const [ callStrategy, setCallStrategy ] = React.useState<MethodCallStrategy>();
+  const callStrategyRef = React.useRef(callStrategy);
+
+  const formApi = useForm<ContractMethodFormFields>({
+    mode: 'all',
+    shouldUnregister: true,
+  });
+
+  const handleButtonClick = React.useCallback((event: React.MouseEvent) => {
+    const callStrategy = event?.currentTarget.getAttribute('data-call-strategy');
+    setCallStrategy(callStrategy as MethodCallStrategy);
+    callStrategyRef.current = callStrategy as MethodCallStrategy;
+  }, []);
+
+  const methodType = isReadMethod(data) ? 'read' : 'write';
+
+  const onFormSubmit: SubmitHandler<ContractMethodFormFields> = React.useCallback(async(formData) => {
+    const args = transformFormDataToMethodArgs(formData);
+
+    setResult(undefined);
+    setLoading(true);
+
+    onSubmit(data, args, callStrategyRef.current)
+      .then((result) => {
+        setResult(result);
+      })
+      .catch((error: Error) => {
+        setResult({
+          source: callStrategyRef.current === 'write' ? 'wallet_client' : 'public_client',
+          data: error,
+        });
+        setLoading(false);
+      })
+      .finally(() => {
+        mixpanel.logEvent(mixpanel.EventTypes.CONTRACT_INTERACTION, {
+          'Method type': methodType === 'write' ? 'Write' : 'Read',
+          'Method name': 'name' in data ? data.name : 'Fallback',
+        });
+      });
+  }, [ data, methodType, onSubmit ]);
+
+  React.useEffect(() => {
+    if (isOpen && !callStrategyRef.current && attempt === 0) {
+      const hasConstantOutputs = isReadMethod(data) && data.inputs.length === 0;
+      if (hasConstantOutputs) {
+        setCallStrategy('read');
+        callStrategyRef.current = 'read';
+        onFormSubmit({});
+      }
+    }
+  }, [ data, isOpen, onFormSubmit, attempt ]);
+
+  const handleResultSettle = React.useCallback(() => {
+    setLoading(false);
+  }, []);
+
+  const handleFormChange = React.useCallback(() => {
+    result && setResult(undefined);
+  }, [ result ]);
+
+  const inputs: AbiFunction['inputs'] = React.useMemo(() => {
+    return [
+      ...('inputs' in data && data.inputs ? data.inputs : []),
+      ...('stateMutability' in data && data.stateMutability === 'payable' ? [ {
+        name: `Send native ${ config.chain.currency.symbol || 'coin' }`,
+        type: 'uint256' as const,
+        internalType: 'uint256' as const,
+        fieldType: 'native_coin' as const,
+      } ] : []),
+    ];
+  }, [ data ]);
+
+  const primaryButton = (() => {
+    const isDisabled = !config.features.blockchainInteraction.isEnabled && methodType === 'write';
+    const text = methodType === 'write' ? 'Write' : 'Read';
+    const buttonCallStrategy = methodType === 'write' ? 'write' : 'read';
+
+    return (
+      <Tooltip label={ isDisabled ? NO_WALLET_CLIENT_TEXT : undefined } maxW="300px">
+        <Button
+          isLoading={ callStrategy === buttonCallStrategy && isLoading }
+          isDisabled={ isLoading || isDisabled }
+          onClick={ handleButtonClick }
+          loadingText={ text }
+          variant="outline"
+          size="sm"
+          flexShrink={ 0 }
+          width="min-content"
+          px={ 4 }
+          type="submit"
+          data-call-strategy={ buttonCallStrategy }
+        >
+          { text }
+        </Button>
+      </Tooltip>
+    );
+  })();
+
+  const secondaryButton = (() => {
+    if (methodType === 'read') {
+      return null;
+    }
+
+    const hasOutputs = 'outputs' in data && data.outputs.length > 0;
+    if (!hasOutputs) {
+      return null;
+    }
+
+    const text = 'Simulate';
+    const buttonCallStrategy = 'simulate';
+
+    return (
+      <Button
+        isLoading={ callStrategy === buttonCallStrategy && isLoading }
+        isDisabled={ isLoading }
+        onClick={ handleButtonClick }
+        loadingText={ text }
+        variant="outline"
+        size="sm"
+        flexShrink={ 0 }
+        width="min-content"
+        px={ 4 }
+        mr={ 3 }
+        type="submit"
+        data-call-strategy={ buttonCallStrategy }
+      >
+        { text }
+      </Button>
+    );
+  })();
+
+  return (
+    <Box>
+      <FormProvider { ...formApi }>
+        <chakra.form
+          noValidate
+          onSubmit={ formApi.handleSubmit(onFormSubmit) }
+          onChange={ handleFormChange }
+        >
+          <Flex flexDir="column" rowGap={ 3 } mb={ 6 } _empty={{ display: 'none' }}>
+            { inputs.map((input, index) => {
+              const props = {
+                data: input,
+                basePath: `${ index }`,
+                isDisabled: isLoading,
+                level: 0,
+              };
+
+              if ('components' in input && input.components && input.type === 'tuple') {
+                return <ContractMethodFieldInputTuple key={ index } { ...props }/>;
+              }
+
+              const arrayMatch = matchArray(input.type);
+              if (arrayMatch) {
+                if (arrayMatch.isNested) {
+                  const fieldsWithErrors = Object.keys(formApi.formState.errors);
+                  const isInvalid = fieldsWithErrors.some((field) => field.startsWith(index + ':'));
+
+                  return (
+                    <ContractMethodFieldAccordion
+                      key={ index }
+                      level={ 0 }
+                      label={ getFieldLabel(input) }
+                      isInvalid={ isInvalid }
+                    >
+                      <ContractMethodFieldInputArray { ...props }/>
+                    </ContractMethodFieldAccordion>
+                  );
+
+                }
+
+                return <ContractMethodFieldInputArray key={ index } { ...props }/>;
+              }
+
+              return <ContractMethodFieldInput key={ index } { ...props } path={ `${ index }` }/>;
+            }) }
+          </Flex>
+          { secondaryButton }
+          { primaryButton }
+          { result && !isLoading && (
+            <Button
+              variant="simple"
+              colorScheme="blue"
+              size="sm"
+              onClick={ onReset }
+              ml={ 1 }
+            >
+              <IconSvg name="repeat" boxSize={ 5 } mr={ 1 }/>
+            Reset
+            </Button>
+          ) }
+        </chakra.form>
+      </FormProvider>
+      { result && result.source === 'wallet_client' && (
+        <ContractMethodResultWalletClient
+          data={ result.data }
+          onSettle={ handleResultSettle }
+        />
+      ) }
+      { 'outputs' in data && data.outputs.length > 0 && (
+        <ContractMethodResultPublicClient
+          data={ result && result.source === 'public_client' ? result.data : undefined }
+          onSettle={ handleResultSettle }
+          abiItem={ data }
+          mode={ result && result.source === 'public_client' ? 'result' : 'preview' }
+        />
+      ) }
+    </Box>
+  );
+};
+
+export default React.memo(ContractMethodForm) as typeof ContractMethodForm;
diff --git a/ui/address/contract/methodForm/ContractMethodMultiplyButton.tsx b/ui/address/contract/methods/form/ContractMethodMultiplyButton.tsx
similarity index 98%
rename from ui/address/contract/methodForm/ContractMethodMultiplyButton.tsx
rename to ui/address/contract/methods/form/ContractMethodMultiplyButton.tsx
index 7b12ab727e..7c443996b4 100644
--- a/ui/address/contract/methodForm/ContractMethodMultiplyButton.tsx
+++ b/ui/address/contract/methods/form/ContractMethodMultiplyButton.tsx
@@ -1,6 +1,5 @@
 import {
   chakra,
-  Popover,
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
@@ -14,6 +13,7 @@ import {
 import React from 'react';
 
 import { times } from 'lib/html-entities';
+import Popover from 'ui/shared/chakra/Popover';
 import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
@@ -76,6 +76,7 @@ const ContractMethodMultiplyButton = ({ onClick, isDisabled }: Props) => {
             ml={ 1 }
             p={ 0 }
             onClick={ onToggle }
+            isActive={ isOpen }
             isDisabled={ isDisabled }
           >
             <IconSvg
diff --git a/ui/address/contract/methods/form/ContractMethodResultPublicClient.pw.tsx b/ui/address/contract/methods/form/ContractMethodResultPublicClient.pw.tsx
new file mode 100644
index 0000000000..bfe7f29457
--- /dev/null
+++ b/ui/address/contract/methods/form/ContractMethodResultPublicClient.pw.tsx
@@ -0,0 +1,167 @@
+import React from 'react';
+import type { AbiFunction } from 'viem';
+
+import { test, expect } from 'playwright/lib';
+
+import ContractMethodResultPublicClient from './ContractMethodResultPublicClient';
+import { ErrorStory } from './ContractMethodResultPublicClient.pwstory';
+
+const abiItem: AbiFunction = {
+  inputs: [],
+  name: 'testAbiMethod',
+  stateMutability: 'view',
+  type: 'function',
+  outputs: [
+    // PRIMITIVES
+    { internalType: 'address', name: 'owner', type: 'address' },
+    { internalType: 'uint256', name: 'validatorsCount', type: 'uint256' },
+    { internalType: 'bool', name: '', type: 'bool' },
+
+    // ARRAY OF PRIMITIVES
+    { internalType: 'address[]', name: 'interChainClients', type: 'address[]' },
+
+    // NESTED ARRAY
+    { internalType: 'uint256[2][]', name: 'chainIds', type: 'uint256[2][]' },
+
+    // TUPLE
+    {
+      components: [
+        {
+          components: [
+            { internalType: 'bool', name: 'executed', type: 'bool' },
+            { internalType: 'uint56', name: 'snapshotId', type: 'uint56' },
+            { internalType: 'string', name: 'descriptionURL', type: 'string' },
+          ],
+          internalType: 'struct IGovValidators.ProposalCore',
+          name: 'core',
+          type: 'tuple',
+        },
+      ],
+      internalType: 'struct IGovValidators.ExternalProposal',
+      name: '',
+      type: 'tuple',
+    },
+
+    // ARRAY OF TUPLE
+    {
+      components: [
+        {
+          components: [
+            { internalType: 'enum IGovValidators.ProposalType', name: 'proposalType', type: 'uint8' },
+            { internalType: 'bytes', name: 'data', type: 'bytes' },
+            {
+              components: [
+                { internalType: 'bool', name: 'executed', type: 'bool' },
+                { internalType: 'uint56', name: 'snapshotId', type: 'uint56' },
+              ],
+              internalType: 'struct IGovValidators.ProposalCore',
+              name: 'core',
+              type: 'tuple',
+            },
+          ],
+          internalType: 'struct IGovValidators.InternalProposal',
+          name: 'proposal',
+          type: 'tuple',
+        },
+        { internalType: 'enum IGovValidators.ProposalState', name: 'proposalState', type: 'uint8' },
+      ],
+      internalType: 'struct IGovValidators.InternalProposalView[]',
+      name: 'internalProposals',
+      type: 'tuple[]',
+    },
+  ],
+};
+
+const result = [
+  '0x0000000000000000000000000000000000000000',
+  BigInt(42),
+  false,
+  [
+    '0x92a309C640c3f6AF4F84FE40120fD02b58E3Aa96',
+    '0x588c7Bda9366EEf83EdF67049a1C45f737aFFe0F',
+  ],
+  [
+    [ BigInt(11_000), BigInt(12_000), BigInt(13_000) ],
+    [ BigInt(21_000), BigInt(22_000) ],
+  ],
+  {
+    core: {
+      executed: true,
+      snapshotId: BigInt(77),
+      descriptionURL: '',
+    },
+  },
+  [
+    {
+      proposalState: 1,
+      proposal: {
+        proposalType: 100,
+        data: '0x000100',
+        core: {
+          executed: true,
+          snapshotId: 111,
+        },
+      },
+    },
+    {
+      proposalState: 3,
+      proposal: {
+        proposalType: 300,
+        data: '0x000300',
+        core: {
+          executed: true,
+          snapshotId: 333,
+        },
+      },
+    },
+  ],
+];
+
+const onSettle = () => {};
+
+test('preview mode', async({ render }) => {
+  const component = await render(
+    <ContractMethodResultPublicClient
+      abiItem={ abiItem }
+      data={ undefined }
+      mode="preview"
+      onSettle={ onSettle }
+    />,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('result mode', async({ render }) => {
+  const component = await render(
+    <ContractMethodResultPublicClient
+      abiItem={ abiItem }
+      data={ result }
+      mode="result"
+      onSettle={ onSettle }
+    />,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('error', async({ render }) => {
+  const component = await render(
+    <ErrorStory
+      abiItem={ abiItem }
+      mode="result"
+      onSettle={ onSettle }
+    />,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('single output', async({ render }) => {
+  const component = await render(
+    <ContractMethodResultPublicClient
+      abiItem={{ ...abiItem, outputs: abiItem.outputs.slice(3, 4) }}
+      data={ result[3] }
+      mode="result"
+      onSettle={ onSettle }
+    />,
+  );
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/contract/methods/form/ContractMethodResultPublicClient.pwstory.tsx b/ui/address/contract/methods/form/ContractMethodResultPublicClient.pwstory.tsx
new file mode 100644
index 0000000000..22621a3f94
--- /dev/null
+++ b/ui/address/contract/methods/form/ContractMethodResultPublicClient.pwstory.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+import type { Props } from './ContractMethodResultPublicClient';
+import ContractMethodResultPublicClient from './ContractMethodResultPublicClient';
+
+export const ErrorStory = (props: Omit<Props, 'data'>) => {
+  const result = new Error('Something went wrong');
+
+  return <ContractMethodResultPublicClient { ...props } data={ result }/>;
+};
diff --git a/ui/address/contract/methods/form/ContractMethodResultPublicClient.tsx b/ui/address/contract/methods/form/ContractMethodResultPublicClient.tsx
new file mode 100644
index 0000000000..d63d452805
--- /dev/null
+++ b/ui/address/contract/methods/form/ContractMethodResultPublicClient.tsx
@@ -0,0 +1,65 @@
+import { Alert, Flex, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+import type { AbiFunction } from 'viem';
+
+import type { FormSubmitResultPublicClient, ResultViewMode } from '../types';
+
+import ResultItem from './resultPublicClient/Item';
+
+export interface Props {
+  data: FormSubmitResultPublicClient['data'];
+  abiItem: AbiFunction;
+  onSettle: () => void;
+  mode: ResultViewMode;
+}
+
+const ContractMethodResultPublicClient = ({ data, abiItem, onSettle, mode: modeProps }: Props) => {
+  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  React.useEffect(() => {
+    if (modeProps === 'result') {
+      onSettle();
+    }
+  }, [ onSettle, modeProps ]);
+
+  const formattedData = (() => {
+    return abiItem.outputs.length > 1 && Array.isArray(data) ? data : [ data ];
+  })();
+
+  const isError = data instanceof Error;
+  const mode = isError ? 'preview' : modeProps;
+
+  return (
+    <>
+      { isError && (
+        <Alert status="error" mt={ 3 } p={ 4 } borderRadius="md" fontSize="sm" wordBreak="break-word" whiteSpace="pre-wrap">
+          { 'shortMessage' in data && typeof data.shortMessage === 'string' ? data.shortMessage : data.message }
+        </Alert>
+      ) }
+      <Flex
+        flexDir="column"
+        rowGap={ 2 }
+        mt={ 3 }
+        p={ 4 }
+        borderRadius="md"
+        bgColor={ bgColor }
+        color={ mode === 'preview' ? 'gray.500' : undefined }
+        fontSize="sm"
+        lineHeight="20px"
+        whiteSpace="break-spaces"
+        wordBreak="break-all"
+      >
+        { abiItem.outputs.map((output, index) => (
+          <ResultItem
+            key={ index }
+            abiParameter={ output }
+            data={ isError ? undefined : formattedData[index] }
+            mode={ mode }
+          />
+        )) }
+      </Flex>
+    </>
+  );
+};
+
+export default React.memo(ContractMethodResultPublicClient);
diff --git a/ui/address/contract/methods/form/ContractMethodResultWalletClient.pw.tsx b/ui/address/contract/methods/form/ContractMethodResultWalletClient.pw.tsx
new file mode 100644
index 0000000000..f7d54b925f
--- /dev/null
+++ b/ui/address/contract/methods/form/ContractMethodResultWalletClient.pw.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+
+import { test, expect } from 'playwright/lib';
+
+import type { PropsDumb } from './ContractMethodResultWalletClient';
+import { ContractMethodResultWalletClientDumb } from './ContractMethodResultWalletClient';
+
+test('loading', async({ render }) => {
+  const props = {
+    txInfo: {
+      status: 'pending' as const,
+      error: null,
+    } as PropsDumb['txInfo'],
+    data: {
+      hash: '0x363574E6C5C71c343d7348093D84320c76d5Dd29' as `0x${ string }`,
+    },
+    onSettle: () => {},
+  };
+
+  const component = await render(<ContractMethodResultWalletClientDumb { ...props }/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('success', async({ render }) => {
+  const props = {
+    txInfo: {
+      status: 'success' as const,
+      error: null,
+    } as PropsDumb['txInfo'],
+    data: {
+      hash: '0x363574E6C5C71c343d7348093D84320c76d5Dd29' as `0x${ string }`,
+    },
+    onSettle: () => {},
+  };
+
+  const component = await render(<ContractMethodResultWalletClientDumb { ...props }/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('error +@mobile', async({ render }) => {
+  const props = {
+    txInfo: {
+      status: 'error' as const,
+      error: {
+        // eslint-disable-next-line max-len
+        message: 'missing revert data in call exception; Transaction reverted without a reason string [ See: https://links.ethers.org/v5-errors-CALL_EXCEPTION ]',
+      } as Error,
+    } as PropsDumb['txInfo'],
+    data: {
+      hash: '0x363574E6C5C71c343d7348093D84320c76d5Dd29' as `0x${ string }`,
+    },
+    onSettle: () => {},
+  };
+
+  const component = await render(<ContractMethodResultWalletClientDumb { ...props }/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('error in result', async({ render }) => {
+  const props = {
+    txInfo: {
+      status: 'idle' as const,
+      error: null,
+    } as unknown as PropsDumb['txInfo'],
+    data: {
+      message: 'wallet is not connected',
+    } as Error,
+    onSettle: () => {},
+  };
+
+  const component = await render(<ContractMethodResultWalletClientDumb { ...props }/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/contract/methods/form/ContractMethodResultWalletClient.tsx b/ui/address/contract/methods/form/ContractMethodResultWalletClient.tsx
new file mode 100644
index 0000000000..eb4009c77b
--- /dev/null
+++ b/ui/address/contract/methods/form/ContractMethodResultWalletClient.tsx
@@ -0,0 +1,106 @@
+import { chakra, Spinner, Box, Alert } from '@chakra-ui/react';
+import React from 'react';
+import type { UseWaitForTransactionReceiptReturnType } from 'wagmi';
+import { useWaitForTransactionReceipt } from 'wagmi';
+
+import type { FormSubmitResultWalletClient } from '../types';
+
+import { route } from 'nextjs-routes';
+
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+interface Props {
+  data: FormSubmitResultWalletClient['data'];
+  onSettle: () => void;
+}
+
+const ContractMethodResultWalletClient = ({ data, onSettle }: Props) => {
+  const txHash = data && 'hash' in data ? data.hash as `0x${ string }` : undefined;
+  const txInfo = useWaitForTransactionReceipt({
+    hash: txHash,
+  });
+
+  return <ContractMethodResultWalletClientDumb data={ data } onSettle={ onSettle } txInfo={ txInfo }/>;
+};
+
+export interface PropsDumb {
+  data: FormSubmitResultWalletClient['data'];
+  onSettle: () => void;
+  txInfo: UseWaitForTransactionReceiptReturnType;
+}
+
+export const ContractMethodResultWalletClientDumb = ({ data, onSettle, txInfo }: PropsDumb) => {
+  const txHash = data && 'hash' in data ? data.hash : undefined;
+
+  React.useEffect(() => {
+    if (txInfo.status !== 'pending') {
+      onSettle();
+    }
+  }, [ onSettle, txInfo.status ]);
+
+  if (!data) {
+    return null;
+  }
+
+  const isErrorResult = 'message' in data;
+
+  const txLink = txHash ? (
+    <LinkInternal href={ route({ pathname: '/tx/[hash]', query: { hash: txHash } }) }>View transaction details</LinkInternal>
+  ) : null;
+
+  const content = (() => {
+    if (isErrorResult) {
+      return (
+        <Alert status="error">
+          { data.message }
+        </Alert>
+      );
+    }
+
+    switch (txInfo.status) {
+      case 'success': {
+        return (
+          <>
+            <span>Transaction has been confirmed. </span>
+            { txLink }
+          </>
+        );
+      }
+
+      case 'pending': {
+        return (
+          <>
+            <Spinner size="sm" mr={ 3 }/>
+            <chakra.span verticalAlign="text-bottom">
+              { 'Waiting for transaction\'s confirmation. ' }
+              { txLink }
+            </chakra.span>
+          </>
+        );
+      }
+
+      case 'error': {
+        return (
+          <Alert status="error" flexDir="column" alignItems="flex-start" rowGap={ 1 }>
+            Error: { txInfo.error ? txInfo.error.message : 'Something went wrong' } { txLink }
+          </Alert>
+        );
+      }
+    }
+  })();
+
+  return (
+    <Box
+      fontSize="sm"
+      mt={ 3 }
+      alignItems="center"
+      whiteSpace="pre-wrap"
+      wordBreak="break-all"
+      color={ txInfo.status === 'error' || isErrorResult ? 'error' : undefined }
+    >
+      { content }
+    </Box>
+  );
+};
+
+export default React.memo(ContractMethodResultWalletClient);
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..dd5ef5c23e
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodForm.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodForm.pw.tsx_default_base-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..c412b91d8d
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodForm.pw.tsx_default_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..ef20023cd6
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_error-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_error-1.png
new file mode 100644
index 0000000000..4db5bb4c5c
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_error-1.png differ
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_preview-mode-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_preview-mode-1.png
new file mode 100644
index 0000000000..146393b7ac
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_preview-mode-1.png differ
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_result-mode-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_result-mode-1.png
new file mode 100644
index 0000000000..a5b87f60ed
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_result-mode-1.png differ
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_single-output-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_single-output-1.png
new file mode 100644
index 0000000000..39edb97ec1
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultPublicClient.pw.tsx_default_single-output-1.png differ
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_error-in-result-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_error-in-result-1.png
new file mode 100644
index 0000000000..8e35f6bb49
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_error-in-result-1.png differ
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_error-mobile-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_error-mobile-1.png
new file mode 100644
index 0000000000..7d3fe4ef4a
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_error-mobile-1.png differ
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_loading-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_loading-1.png
new file mode 100644
index 0000000000..d80cc80e2f
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_loading-1.png differ
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_success-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_success-1.png
new file mode 100644
index 0000000000..4bd45c7a0b
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_default_success-1.png differ
diff --git a/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_mobile_error-mobile-1.png b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_mobile_error-mobile-1.png
new file mode 100644
index 0000000000..a7cb6fb4d4
Binary files /dev/null and b/ui/address/contract/methods/form/__screenshots__/ContractMethodResultWalletClient.pw.tsx_mobile_error-mobile-1.png differ
diff --git a/ui/address/contract/methods/form/resultPublicClient/Item.tsx b/ui/address/contract/methods/form/resultPublicClient/Item.tsx
new file mode 100644
index 0000000000..09f095ed0d
--- /dev/null
+++ b/ui/address/contract/methods/form/resultPublicClient/Item.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import type { AbiParameter } from 'viem';
+
+import type { ResultViewMode } from '../../types';
+
+import { matchArray } from '../utils';
+import ItemArray from './ItemArray';
+import ItemPrimitive from './ItemPrimitive';
+import ItemTuple from './ItemTuple';
+
+interface Props {
+  abiParameter: AbiParameter;
+  data: unknown;
+  mode: ResultViewMode;
+  level?: number;
+}
+
+const Item = ({ abiParameter, data, mode, level = 0 }: Props) => {
+
+  const arrayMatch = React.useMemo(() => matchArray(abiParameter.type), [ abiParameter.type ]);
+  if (arrayMatch) {
+    if (!Array.isArray(data)) {
+      if (arrayMatch.itemType === 'tuple' && mode === 'preview' && 'components' in abiParameter) {
+        const previewData = Object.fromEntries(abiParameter.components.map(({ name }) => ([ name ?? '', undefined ])));
+        return <ItemArray abiParameter={ abiParameter } data={ [ previewData ] } mode={ mode } level={ level } arrayMatch={ arrayMatch }/>;
+      }
+      return <ItemPrimitive abiParameter={ abiParameter } data={ data || (mode === 'preview' ? undefined : '[ ]') } level={ level }/>;
+    }
+    return <ItemArray abiParameter={ abiParameter } data={ data } level={ level } mode={ mode } arrayMatch={ arrayMatch }/>;
+  }
+
+  const tupleMatch = abiParameter.type.includes('tuple');
+  if (tupleMatch) {
+    return <ItemTuple abiParameter={ abiParameter } data={ data } mode={ mode } level={ level }/>;
+  }
+
+  return <ItemPrimitive abiParameter={ abiParameter } data={ data } level={ level }/>;
+};
+
+export default React.memo(Item);
diff --git a/ui/address/contract/methods/form/resultPublicClient/ItemArray.tsx b/ui/address/contract/methods/form/resultPublicClient/ItemArray.tsx
new file mode 100644
index 0000000000..73bfce24fd
--- /dev/null
+++ b/ui/address/contract/methods/form/resultPublicClient/ItemArray.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import type { AbiParameter } from 'viem';
+
+import type { ResultViewMode } from '../../types';
+
+import { matchArray, type MatchArray } from '../utils';
+import ItemLabel from './ItemLabel';
+import ItemPrimitive from './ItemPrimitive';
+import ItemTuple from './ItemTuple';
+import { printRowOffset } from './utils';
+
+interface Props {
+  abiParameter: AbiParameter;
+  data: Array<unknown>;
+  mode: ResultViewMode;
+  level: number;
+  arrayMatch: MatchArray;
+}
+
+const ItemArray = ({ abiParameter, data, level, arrayMatch, mode }: Props) => {
+
+  const itemAbiParameter = React.useMemo(() => {
+    const type = arrayMatch.itemType;
+    const internalType = matchArray(abiParameter.internalType || '')?.itemType;
+    return { ...abiParameter, type, internalType };
+  }, [ abiParameter, arrayMatch.itemType ]);
+
+  const content = (() => {
+    if (arrayMatch.isNested && data.every(Array.isArray)) {
+      const itemArrayMatch = matchArray(arrayMatch.itemType);
+
+      if (itemArrayMatch) {
+        return data.map((item, index) => (
+          <ItemArray
+            key={ index }
+            abiParameter={ itemAbiParameter }
+            data={ item }
+            mode={ mode }
+            arrayMatch={ itemArrayMatch }
+            level={ level + 1 }
+          />
+        ));
+      }
+    }
+
+    if (arrayMatch.itemType === 'tuple') {
+      return data.map((item, index) => (
+        <ItemTuple
+          key={ index }
+          abiParameter={ itemAbiParameter }
+          data={ item }
+          mode={ mode }
+          level={ level + 1 }
+        />
+      ));
+    }
+
+    return data.map((item, index) => (
+      <ItemPrimitive
+        key={ index }
+        abiParameter={ itemAbiParameter }
+        data={ item }
+        level={ level + 1 }
+        hideLabel
+      />
+    ));
+  })();
+
+  return (
+    <p>
+      <p>
+        <span>{ printRowOffset(level) }</span>
+        <ItemLabel abiParameter={ abiParameter }/>
+        <span>[{ data.length === 0 ? ' ]' : '' }</span>
+      </p>
+      { content }
+      { data.length > 0 && <p>{ printRowOffset(level) }]</p> }
+    </p>
+  );
+};
+
+export default React.memo(ItemArray);
diff --git a/ui/address/contract/methods/form/resultPublicClient/ItemLabel.tsx b/ui/address/contract/methods/form/resultPublicClient/ItemLabel.tsx
new file mode 100644
index 0000000000..1b0d3f9a8d
--- /dev/null
+++ b/ui/address/contract/methods/form/resultPublicClient/ItemLabel.tsx
@@ -0,0 +1,18 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+import type { AbiParameter } from 'viem';
+
+interface Props {
+  abiParameter: AbiParameter;
+}
+
+const ItemLabel = ({ abiParameter }: Props) => {
+  return (
+    <>
+      { abiParameter.name && <chakra.span fontWeight={ 500 }>{ abiParameter.name } </chakra.span> }
+      <span>({ abiParameter.type }) : </span>
+    </>
+  );
+};
+
+export default React.memo(ItemLabel);
diff --git a/ui/address/contract/methods/form/resultPublicClient/ItemPrimitive.tsx b/ui/address/contract/methods/form/resultPublicClient/ItemPrimitive.tsx
new file mode 100644
index 0000000000..377c78eb7f
--- /dev/null
+++ b/ui/address/contract/methods/form/resultPublicClient/ItemPrimitive.tsx
@@ -0,0 +1,75 @@
+import { Tooltip } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+import type { AbiParameter } from 'viem';
+
+import { route } from 'nextjs-routes';
+
+import { WEI } from 'lib/consts';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+import { matchInt } from '../utils';
+import ItemLabel from './ItemLabel';
+import { printRowOffset } from './utils';
+
+function castValueToString(value: unknown): string {
+  switch (typeof value) {
+    case 'string':
+      return value === '' ? `""` : value;
+    case 'undefined':
+      return '';
+    case 'number':
+      return value.toLocaleString(undefined, { useGrouping: false });
+    case 'bigint':
+      return value.toString();
+    case 'boolean':
+    default:
+      return String(value);
+  }
+}
+
+const INT_TOOLTIP_THRESHOLD = 10 ** 9;
+
+interface Props {
+  abiParameter: AbiParameter;
+  data: unknown;
+  level: number;
+  hideLabel?: boolean;
+}
+
+const ItemPrimitive = ({ abiParameter, data, level, hideLabel }: Props) => {
+
+  const value = (() => {
+    if (abiParameter.type === 'address' && typeof data === 'string') {
+      return (
+        <>
+          <LinkInternal href={ route({ pathname: '/address/[hash]', query: { hash: data } }) }>{ data }</LinkInternal>
+          <CopyToClipboard text={ data } size={ 4 } verticalAlign="sub"/>
+        </>
+      );
+    }
+
+    const intMatch = matchInt(abiParameter.type);
+    if (intMatch && typeof data === 'bigint' && intMatch.max > INT_TOOLTIP_THRESHOLD && data > INT_TOOLTIP_THRESHOLD) {
+      const dividedValue = BigNumber(data.toString()).div(WEI);
+      return (
+        <Tooltip label={ dividedValue.toLocaleString() + ' ETH' }>
+          <span>{ castValueToString(data) }</span>
+        </Tooltip>
+      );
+    }
+
+    return <span>{ castValueToString(data) }</span>;
+  })();
+
+  return (
+    <p>
+      <span>{ printRowOffset(level) }</span>
+      { !hideLabel && <ItemLabel abiParameter={ abiParameter }/> }
+      { value }
+    </p>
+  );
+};
+
+export default React.memo(ItemPrimitive);
diff --git a/ui/address/contract/methods/form/resultPublicClient/ItemTuple.tsx b/ui/address/contract/methods/form/resultPublicClient/ItemTuple.tsx
new file mode 100644
index 0000000000..4b5a1f13ee
--- /dev/null
+++ b/ui/address/contract/methods/form/resultPublicClient/ItemTuple.tsx
@@ -0,0 +1,43 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+import type { AbiParameter } from 'viem';
+
+import type { ResultViewMode } from '../../types';
+
+import Item from './Item';
+import { printRowOffset } from './utils';
+
+interface Props {
+  abiParameter: AbiParameter;
+  data: unknown;
+  level: number;
+  mode: ResultViewMode;
+}
+
+const ItemTuple = ({ abiParameter, data, mode, level }: Props) => {
+  return (
+    <div>
+      <p>
+        <span>{ printRowOffset(level) }</span>
+        <chakra.span fontWeight={ 500 }>{ abiParameter.name || abiParameter.internalType }</chakra.span>
+        <span> { '{' }</span>
+      </p>
+      { 'components' in abiParameter && abiParameter.components.map((component, index) => {
+        const dataObj = typeof data === 'object' && data !== null ? data : undefined;
+        const itemData = dataObj && component.name && component.name in dataObj ? dataObj[component.name as keyof typeof dataObj] : undefined;
+        return (
+          <Item
+            key={ index }
+            abiParameter={ component }
+            data={ itemData }
+            mode={ mode }
+            level={ level + 1 }
+          />
+        );
+      }) }
+      <p>{ printRowOffset(level) }{ '}' }</p>
+    </div>
+  );
+};
+
+export default React.memo(ItemTuple);
diff --git a/ui/address/contract/methods/form/resultPublicClient/utils.ts b/ui/address/contract/methods/form/resultPublicClient/utils.ts
new file mode 100644
index 0000000000..f05415e63c
--- /dev/null
+++ b/ui/address/contract/methods/form/resultPublicClient/utils.ts
@@ -0,0 +1,2 @@
+const TAB_SIZE = 2;
+export const printRowOffset = (level: number) => ' '.repeat(level * TAB_SIZE);
diff --git a/ui/address/contract/methodForm/useFormatFieldValue.tsx b/ui/address/contract/methods/form/useFormatFieldValue.tsx
similarity index 86%
rename from ui/address/contract/methodForm/useFormatFieldValue.tsx
rename to ui/address/contract/methods/form/useFormatFieldValue.tsx
index 6c82c682b3..70bd8270fe 100644
--- a/ui/address/contract/methodForm/useFormatFieldValue.tsx
+++ b/ui/address/contract/methods/form/useFormatFieldValue.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
 
-import type { SmartContractMethodArgType } from 'types/api/contract';
-
-import type { MatchInt } from './useArgTypeMatchInt';
+import type { MatchInt } from './utils';
 
 interface Params {
-  argType: SmartContractMethodArgType;
+  argType: string;
   argTypeMatchInt: MatchInt | null;
 }
 
diff --git a/ui/address/contract/methodForm/useValidateField.tsx b/ui/address/contract/methods/form/useValidateField.tsx
similarity index 93%
rename from ui/address/contract/methodForm/useValidateField.tsx
rename to ui/address/contract/methods/form/useValidateField.tsx
index 5151cffcba..de9d506f31 100644
--- a/ui/address/contract/methodForm/useValidateField.tsx
+++ b/ui/address/contract/methods/form/useValidateField.tsx
@@ -1,13 +1,11 @@
 import React from 'react';
 import { getAddress, isAddress, isHex } from 'viem';
 
-import type { SmartContractMethodArgType } from 'types/api/contract';
-
-import type { MatchInt } from './useArgTypeMatchInt';
+import type { MatchInt } from './utils';
 import { BYTES_REGEXP } from './utils';
 
 interface Params {
-  argType: SmartContractMethodArgType;
+  argType: string;
   argTypeMatchInt: MatchInt | null;
   isOptional: boolean;
 }
diff --git a/ui/address/contract/methods/form/utils.test.ts b/ui/address/contract/methods/form/utils.test.ts
new file mode 100644
index 0000000000..bedfc413d2
--- /dev/null
+++ b/ui/address/contract/methods/form/utils.test.ts
@@ -0,0 +1,77 @@
+import { transformFormDataToMethodArgs } from './utils';
+
+describe('transformFormDataToMethodArgs', () => {
+  it('should transform form data to method args array', () => {
+    const formData = {
+      '1': '1',
+      '2': '2',
+      '0:1': '0:1',
+      '0:0:0': '0:0:0',
+      '0:0:1:0': '0:0:1:0',
+      '0:0:1:3': '0:0:1:3',
+      '0:0:2:1:0': '0:0:2:1:0',
+      '0:0:2:1:1': '0:0:2:1:1',
+      '0:0:2:2:0': '0:0:2:2:0',
+      '0:0:2:2:2': '0:0:2:2:2',
+      '0:0:2:5:3': '0:0:2:5:3',
+      '0:0:2:5:8': '0:0:2:5:8',
+    };
+    const result = transformFormDataToMethodArgs(formData);
+    expect(result).toEqual([
+      [
+        [
+          '0:0:0',
+          [
+            '0:0:1:0',
+            '0:0:1:3',
+          ],
+          [
+            [
+              '0:0:2:1:0',
+              '0:0:2:1:1',
+            ],
+            [
+              '0:0:2:2:0',
+              '0:0:2:2:2',
+            ],
+            [
+              '0:0:2:5:3',
+              '0:0:2:5:8',
+            ],
+          ],
+        ],
+        '0:1',
+      ],
+      '1',
+      '2',
+    ]);
+  });
+
+  it('should leave the arg if it is an empty array', () => {
+    const formData = {
+      // simple array
+      '0:0': undefined,
+
+      // nested array
+      '1:0:0': undefined,
+      '1:1:0': '1',
+      '1:1:1': '2',
+
+      // array in a tuple
+      '2:0': 'duck',
+      '2:1:0': undefined,
+    };
+    const result = transformFormDataToMethodArgs(formData);
+    expect(result).toEqual([
+      [],
+      [
+        [],
+        [ '1', '2' ],
+      ],
+      [
+        'duck',
+        [],
+      ],
+    ]);
+  });
+});
diff --git a/ui/address/contract/methods/form/utils.ts b/ui/address/contract/methods/form/utils.ts
new file mode 100644
index 0000000000..060683172c
--- /dev/null
+++ b/ui/address/contract/methods/form/utils.ts
@@ -0,0 +1,101 @@
+import _set from 'lodash/set';
+
+import type { ContractAbiItemInput } from '../types';
+
+export type ContractMethodFormFields = Record<string, string | boolean | undefined>;
+
+export const INT_REGEXP = /^(u)?int(\d+)?$/i;
+
+export const BYTES_REGEXP = /^bytes(\d+)?$/i;
+
+export const ARRAY_REGEXP = /^(.*)\[(\d*)\]$/;
+
+export interface MatchArray {
+  itemType: string;
+  size: number;
+  isNested: boolean;
+}
+
+export const matchArray = (argType: string): MatchArray | null => {
+  const match = argType.match(ARRAY_REGEXP);
+  if (!match) {
+    return null;
+  }
+
+  const [ , itemType, size ] = match;
+  const isNested = Boolean(matchArray(itemType));
+
+  return {
+    itemType,
+    size: size ? Number(size) : Infinity,
+    isNested,
+  };
+};
+
+export interface MatchInt {
+  isUnsigned: boolean;
+  power: string;
+  min: bigint;
+  max: bigint;
+}
+
+export const matchInt = (argType: string): MatchInt | null => {
+  const match = argType.match(INT_REGEXP);
+  if (!match) {
+    return null;
+  }
+
+  const [ , isUnsigned, power = '256' ] = match;
+  const [ min, max ] = getIntBoundaries(Number(power), Boolean(isUnsigned));
+
+  return { isUnsigned: Boolean(isUnsigned), power, min, max };
+};
+
+export const transformDataForArrayItem = (data: ContractAbiItemInput, index: number): ContractAbiItemInput => {
+  const arrayMatchType = matchArray(data.type);
+  const arrayMatchInternalType = data.internalType ? matchArray(data.internalType) : null;
+  const childrenInternalType = arrayMatchInternalType?.itemType.replaceAll('struct ', '');
+
+  const postfix = childrenInternalType ? ' ' + childrenInternalType : '';
+
+  return {
+    ...data,
+    type: arrayMatchType?.itemType || data.type,
+    internalType: childrenInternalType,
+    name: `#${ index + 1 }${ postfix }`,
+  };
+};
+
+export const getIntBoundaries = (power: number, isUnsigned: boolean) => {
+  const maxUnsigned = BigInt(2 ** power);
+  const max = isUnsigned ? maxUnsigned - BigInt(1) : maxUnsigned / BigInt(2) - BigInt(1);
+  const min = isUnsigned ? BigInt(0) : -maxUnsigned / BigInt(2);
+  return [ min, max ];
+};
+
+export function transformFormDataToMethodArgs(formData: ContractMethodFormFields) {
+  const result: Array<unknown> = [];
+
+  for (const field in formData) {
+    const value = formData[field];
+    _set(result, field.replaceAll(':', '.'), value);
+  }
+
+  return filterOutEmptyItems(result);
+}
+
+function filterOutEmptyItems(array: Array<unknown>): Array<unknown> {
+  // The undefined value may occur in two cases:
+  //    1. When an optional form field is left blank by the user.
+  //        The only optional field is the native coin value, which is safely handled in the form submit handler.
+  //    2. When the user adds and removes items from a field array.
+  //        In this scenario, empty items need to be filtered out to maintain the correct sequence of arguments.
+  return array
+    .map((item) => Array.isArray(item) ? filterOutEmptyItems(item) : item)
+    .filter((item) => item !== undefined);
+}
+
+export function getFieldLabel(input: ContractAbiItemInput, isRequired?: boolean) {
+  const name = input.name || input.internalType || '<unnamed argument>';
+  return `${ name } (${ input.type })${ isRequired ? '*' : '' }`;
+}
diff --git a/ui/address/contract/methods/types.ts b/ui/address/contract/methods/types.ts
new file mode 100644
index 0000000000..1882b77a9f
--- /dev/null
+++ b/ui/address/contract/methods/types.ts
@@ -0,0 +1,24 @@
+import type { AbiFunction, AbiFallback, AbiReceive } from 'abitype';
+
+export type ContractAbiItemInput = AbiFunction['inputs'][number] & { fieldType?: 'native_coin' };
+
+export type MethodType = 'read' | 'write';
+export type MethodCallStrategy = 'read' | 'write' | 'simulate';
+export type ResultViewMode = 'preview' | 'result';
+
+export type SmartContractMethodCustomFields = { method_id: string } | { is_invalid: boolean };
+export type SmartContractMethodRead = AbiFunction & SmartContractMethodCustomFields;
+export type SmartContractMethodWrite = AbiFunction & SmartContractMethodCustomFields | AbiFallback | AbiReceive;
+export type SmartContractMethod = SmartContractMethodRead | SmartContractMethodWrite;
+
+export interface FormSubmitResultPublicClient {
+  source: 'public_client';
+  data: unknown | Error;
+}
+export interface FormSubmitResultWalletClient {
+  source: 'wallet_client';
+  data: { hash: `0x${ string }` } | Error;
+}
+export type FormSubmitResult = FormSubmitResultPublicClient | FormSubmitResultWalletClient;
+
+export type FormSubmitHandler = (item: SmartContractMethod, args: Array<unknown>, submitType: MethodCallStrategy | undefined) => Promise<FormSubmitResult>;
diff --git a/ui/address/contract/methods/useCallMethodPublicClient.ts b/ui/address/contract/methods/useCallMethodPublicClient.ts
new file mode 100644
index 0000000000..fab792816d
--- /dev/null
+++ b/ui/address/contract/methods/useCallMethodPublicClient.ts
@@ -0,0 +1,47 @@
+import React from 'react';
+import { getAddress } from 'viem';
+import { usePublicClient } from 'wagmi';
+
+import type { FormSubmitResult, MethodCallStrategy, SmartContractMethod } from './types';
+
+import config from 'configs/app';
+import useAccount from 'lib/web3/useAccount';
+
+interface Params {
+  item: SmartContractMethod;
+  args: Array<unknown>;
+  addressHash: string;
+  strategy: Exclude<MethodCallStrategy, 'write'>;
+}
+
+export default function useCallMethodPublicClient(): (params: Params) => Promise<FormSubmitResult> {
+  const publicClient = usePublicClient({ chainId: Number(config.chain.id) });
+  const { address: account } = useAccount();
+
+  return React.useCallback(async({ args, item, addressHash, strategy }) => {
+    if (!('name' in item)) {
+      throw new Error('Unknown contract method');
+    }
+
+    if (!publicClient) {
+      throw new Error('Public Client is not defined');
+    }
+
+    const address = getAddress(addressHash);
+
+    const params = {
+      abi: [ item ],
+      functionName: item.name,
+      args: args,
+      address,
+      account,
+    };
+
+    const result = strategy === 'read' ? await publicClient.readContract(params) : await publicClient.simulateContract(params);
+    return {
+      source: 'public_client' as const,
+      data: strategy === 'read' ? result : result.result,
+    };
+
+  }, [ account, publicClient ]);
+}
diff --git a/ui/address/contract/methods/useCallMethodWalletClient.ts b/ui/address/contract/methods/useCallMethodWalletClient.ts
new file mode 100644
index 0000000000..ff04768b4b
--- /dev/null
+++ b/ui/address/contract/methods/useCallMethodWalletClient.ts
@@ -0,0 +1,73 @@
+import React from 'react';
+import { getAddress, type Abi } from 'viem';
+import { useAccount, useWalletClient, useSwitchChain } from 'wagmi';
+
+import type { FormSubmitResult, SmartContractMethod } from './types';
+
+import config from 'configs/app';
+
+import { getNativeCoinValue } from './utils';
+
+interface Params {
+  item: SmartContractMethod;
+  args: Array<unknown>;
+  addressHash: string;
+}
+
+export default function useCallMethodWalletClient(): (params: Params) => Promise<FormSubmitResult> {
+  const { data: walletClient } = useWalletClient();
+  const { isConnected, chainId, address: account } = useAccount();
+  const { switchChainAsync } = useSwitchChain();
+
+  return React.useCallback(async({ args, item, addressHash }) => {
+    if (!isConnected) {
+      throw new Error('Wallet is not connected');
+    }
+
+    if (!walletClient) {
+      throw new Error('Wallet Client is not defined');
+    }
+
+    if (chainId && String(chainId) !== config.chain.id) {
+      await switchChainAsync?.({ chainId: Number(config.chain.id) });
+    }
+
+    const address = getAddress(addressHash);
+
+    if (item.type === 'receive' || item.type === 'fallback') {
+      const value = getNativeCoinValue(args[0]);
+      const hash = await walletClient.sendTransaction({
+        to: address,
+        value,
+      });
+      return { source: 'wallet_client', data: { hash } };
+    }
+
+    const methodName = item.name;
+
+    if (!methodName) {
+      throw new Error('Method name is not defined');
+    }
+
+    const _args = args.slice(0, item.inputs.length);
+    const value = getNativeCoinValue(args[item.inputs.length]);
+
+    const hash = await walletClient.writeContract({
+      args: _args,
+      // Here we provide the ABI as an array containing only one item from the submitted form.
+      // This is a workaround for the issue with the "viem" library.
+      // It lacks a "method_id" field to uniquely identify the correct method and instead attempts to find a method based on its name.
+      // But the name is not unique in the contract ABI and this behavior in the "viem" could result in calling the wrong method.
+      // See related issues:
+      //    - https://github.com/blockscout/frontend/issues/1032,
+      //    - https://github.com/blockscout/frontend/issues/1327
+      abi: [ item ] as Abi,
+      functionName: methodName,
+      address,
+      value,
+      account,
+    });
+
+    return { source: 'wallet_client', data: { hash } };
+  }, [ chainId, isConnected, switchChainAsync, walletClient, account ]);
+}
diff --git a/ui/address/contract/methods/useFormSubmit.ts b/ui/address/contract/methods/useFormSubmit.ts
new file mode 100644
index 0000000000..7c1f171d8b
--- /dev/null
+++ b/ui/address/contract/methods/useFormSubmit.ts
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import type { FormSubmitHandler } from './types';
+
+import config from 'configs/app';
+
+import useCallMethodPublicClient from './useCallMethodPublicClient';
+import useCallMethodWalletClient from './useCallMethodWalletClient';
+
+interface Params {
+  addressHash: string;
+}
+
+function useFormSubmit({ addressHash }: Params): FormSubmitHandler {
+  const callMethodWalletClient = useCallMethodWalletClient();
+  const callMethodPublicClient = useCallMethodPublicClient();
+
+  return React.useCallback(async(item, args, strategy) => {
+    switch (strategy) {
+      case 'read':
+      case 'simulate': {
+        return callMethodPublicClient({ args, item, addressHash, strategy });
+      }
+      case 'write': {
+        return callMethodWalletClient({ args, item, addressHash });
+      }
+
+      default: {
+        throw new Error(`Unknown call strategy "${ strategy }"`);
+      }
+    }
+  }, [ addressHash, callMethodWalletClient, callMethodPublicClient ]);
+}
+
+function useFormSubmitFallback({ addressHash }: Params): FormSubmitHandler {
+  const callMethodPublicClient = useCallMethodPublicClient();
+
+  return React.useCallback(async(item, args, strategy) => {
+    switch (strategy) {
+      case 'read':
+      case 'simulate': {
+        return callMethodPublicClient({ args, item, addressHash, strategy });
+      }
+
+      default: {
+        throw new Error(`Unknown call strategy "${ strategy }"`);
+      }
+    }
+
+  }, [ callMethodPublicClient, addressHash ]);
+}
+
+const hook = config.features.blockchainInteraction.isEnabled ? useFormSubmit : useFormSubmitFallback;
+
+export default hook;
diff --git a/ui/address/contract/methods/useScrollToMethod.ts b/ui/address/contract/methods/useScrollToMethod.ts
new file mode 100644
index 0000000000..34ed8daec1
--- /dev/null
+++ b/ui/address/contract/methods/useScrollToMethod.ts
@@ -0,0 +1,26 @@
+import React from 'react';
+import { scroller } from 'react-scroll';
+
+import type { SmartContractMethod } from './types';
+
+export const getElementName = (id: string) => `method_${ id }`;
+
+export default function useScrollToMethod(data: Array<SmartContractMethod>, onScroll: (indices: Array<number>) => void) {
+  React.useEffect(() => {
+    const id = window.location.hash.replace('#', '');
+
+    if (!id) {
+      return;
+    }
+
+    const index = data.findIndex((item) => 'method_id' in item && item.method_id === id);
+    if (index > -1) {
+      scroller.scrollTo(getElementName(id), {
+        duration: 500,
+        smooth: true,
+        offset: -100,
+      });
+      onScroll([ index ]);
+    }
+  }, [ data, onScroll ]);
+}
diff --git a/ui/address/contract/methods/utils.ts b/ui/address/contract/methods/utils.ts
new file mode 100644
index 0000000000..a7f2716929
--- /dev/null
+++ b/ui/address/contract/methods/utils.ts
@@ -0,0 +1,63 @@
+import type { Abi } from 'abitype';
+import type { AbiFunction } from 'viem';
+import { toFunctionSelector } from 'viem';
+
+import type { SmartContractMethodCustomFields, SmartContractMethodRead, SmartContractMethodWrite } from './types';
+
+export const getNativeCoinValue = (value: unknown) => {
+  if (typeof value !== 'string') {
+    return BigInt(0);
+  }
+
+  return BigInt(value);
+};
+
+interface DividedAbi {
+  read: Array<SmartContractMethodRead>;
+  write: Array<SmartContractMethodWrite>;
+}
+
+export const isReadMethod = (method: Abi[number]): method is SmartContractMethodRead =>
+  method.type === 'function' && (
+    method.constant || method.stateMutability === 'view' || method.stateMutability === 'pure'
+  );
+
+export const isWriteMethod = (method: Abi[number]): method is SmartContractMethodWrite =>
+  (method.type === 'function' || method.type === 'fallback' || method.type === 'receive') &&
+    !isReadMethod(method);
+
+const enrichWithMethodId = (method: AbiFunction): SmartContractMethodCustomFields => {
+  try {
+    return {
+      method_id: toFunctionSelector(method).slice(2),
+    };
+  } catch (error) {
+    return {
+      is_invalid: true,
+    };
+  }
+};
+
+export function divideAbiIntoMethodTypes(abi: Abi): DividedAbi {
+  return {
+    read: abi
+      .filter(isReadMethod)
+      .map((method) => ({
+        ...method,
+        ...enrichWithMethodId(method),
+      })),
+    write: abi
+      .filter(isWriteMethod)
+      .map((method) => {
+
+        if (method.type !== 'function') {
+          return method;
+        }
+
+        return {
+          ...method,
+          ...enrichWithMethodId(method),
+        };
+      }),
+  };
+}
diff --git a/ui/address/contract/specs/ContractCode.tsx b/ui/address/contract/specs/ContractCode.tsx
new file mode 100644
index 0000000000..ac2ee1305e
--- /dev/null
+++ b/ui/address/contract/specs/ContractCode.tsx
@@ -0,0 +1,16 @@
+import { useRouter } from 'next/router';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import useContractTabs from 'lib/hooks/useContractTabs';
+import getQueryParamString from 'lib/router/getQueryParamString';
+
+const ContractCode = () => {
+  const router = useRouter();
+  const hash = getQueryParamString(router.query.hash);
+  const addressQuery = useApiQuery('address', { pathParams: { hash } });
+  const { tabs } = useContractTabs(addressQuery.data, false);
+  const content = tabs.find(({ id }) => id === 'contract_code')?.component;
+  return content ?? null;
+};
+
+export default ContractCode;
diff --git a/ui/address/contract/types.ts b/ui/address/contract/types.ts
deleted file mode 100644
index 26753dcbf1..0000000000
--- a/ui/address/contract/types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { SmartContractQueryMethodRead, SmartContractMethod, SmartContractReadMethod } from 'types/api/contract';
-
-import type { ResourceError } from 'lib/api/resources';
-
-export type MethodFormFields = Record<string, string | Array<string>>;
-export type MethodFormFieldsFormatted = Record<string, MethodArgType>;
-
-export type MethodArgType = string | boolean | Array<MethodArgType>;
-
-export type ContractMethodReadResult = SmartContractQueryMethodRead | ResourceError;
-
-export type ContractMethodWriteResult = Error | { hash: `0x${ string }` | undefined } | undefined;
-
-export type ContractMethodCallResult<T extends SmartContractMethod> =
-    T extends SmartContractReadMethod ? ContractMethodReadResult : ContractMethodWriteResult;
diff --git a/ui/address/contract/useContractAbi.tsx b/ui/address/contract/useContractAbi.tsx
deleted file mode 100644
index d2bd337951..0000000000
--- a/ui/address/contract/useContractAbi.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useQueryClient } from '@tanstack/react-query';
-import type { Abi } from 'abitype';
-import React from 'react';
-
-import type { Address } from 'types/api/address';
-
-import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
-
-interface Params {
-  addressHash?: string;
-  isProxy?: boolean;
-  isCustomAbi?: boolean;
-}
-
-export default function useContractAbi({ addressHash, isProxy, isCustomAbi }: Params): Abi | undefined {
-  const queryClient = useQueryClient();
-
-  const { data: contractInfo } = useApiQuery('contract', {
-    pathParams: { hash: addressHash },
-    queryOptions: {
-      enabled: Boolean(addressHash),
-      refetchOnMount: false,
-    },
-  });
-
-  const addressInfo = queryClient.getQueryData<Address>(getResourceKey('address', {
-    pathParams: { hash: addressHash },
-  }));
-
-  const { data: proxyInfo } = useApiQuery('contract', {
-    pathParams: { hash: addressInfo?.implementation_address || '' },
-    queryOptions: {
-      enabled: Boolean(addressInfo?.implementation_address),
-      refetchOnMount: false,
-    },
-  });
-
-  const { data: customInfo } = useApiQuery('contract_methods_write', {
-    pathParams: { hash: addressHash },
-    queryParams: { is_custom_abi: 'true' },
-    queryOptions: {
-      enabled: Boolean(addressInfo?.has_custom_methods_write),
-      refetchOnMount: false,
-    },
-  });
-
-  return React.useMemo(() => {
-    if (isProxy) {
-      return proxyInfo?.abi ?? undefined;
-    }
-
-    if (isCustomAbi) {
-      return customInfo as Abi;
-    }
-
-    return contractInfo?.abi ?? undefined;
-  }, [ contractInfo?.abi, customInfo, isCustomAbi, isProxy, proxyInfo?.abi ]);
-}
diff --git a/ui/address/contract/useWatchAccount.tsx b/ui/address/contract/useWatchAccount.tsx
deleted file mode 100644
index ac19b2f55e..0000000000
--- a/ui/address/contract/useWatchAccount.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { watchAccount, getAccount } from '@wagmi/core';
-import React from 'react';
-import type { Config } from 'wagmi';
-import { useConfig } from 'wagmi';
-
-export function getWalletAccount(config: Config) {
-  try {
-    return getAccount(config);
-  } catch (error) {
-    return null;
-  }
-}
-
-export default function useWatchAccount() {
-  const config = useConfig();
-  const [ account, setAccount ] = React.useState(getWalletAccount(config));
-
-  React.useEffect(() => {
-    if (!account) {
-      return;
-    }
-
-    return watchAccount(config, {
-      onChange(account) {
-        setAccount(account);
-      },
-    });
-  }, [ account, config ]);
-
-  return account;
-}
diff --git a/ui/address/contract/utils.test.ts b/ui/address/contract/utils.test.ts
deleted file mode 100644
index 47e12d3b67..0000000000
--- a/ui/address/contract/utils.test.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { prepareAbi } from './utils';
-
-describe('function prepareAbi()', () => {
-  const commonAbi = [
-    {
-      inputs: [
-        { internalType: 'address', name: '_pool', type: 'address' },
-        { internalType: 'address', name: '_token', type: 'address' },
-        { internalType: 'uint256', name: '_denominator', type: 'uint256' },
-      ],
-      stateMutability: 'nonpayable' as const,
-      type: 'constructor' as const,
-    },
-    {
-      anonymous: false,
-      inputs: [
-        { indexed: false, internalType: 'uint256[]', name: 'indices', type: 'uint256[]' },
-      ],
-      name: 'CompleteDirectDepositBatch',
-      type: 'event' as const,
-    },
-    {
-      inputs: [
-        { internalType: 'address', name: '_fallbackUser', type: 'address' },
-        { internalType: 'string', name: '_zkAddress', type: 'string' },
-      ],
-      name: 'directNativeDeposit',
-      outputs: [
-        { internalType: 'uint256', name: '', type: 'uint256' },
-      ],
-      stateMutability: 'payable' as const,
-      type: 'function' as const,
-    },
-  ];
-
-  const method = {
-    inputs: [
-      { internalType: 'address' as const, name: '_fallbackUser', type: 'address' as const },
-      { internalType: 'string' as const, name: '_zkAddress', type: 'string' as const },
-    ],
-    name: 'directNativeDeposit',
-    outputs: [
-      { internalType: 'uint256' as const, name: '', type: 'uint256' as const },
-    ],
-    stateMutability: 'payable' as const,
-    type: 'function' as const,
-    constant: false,
-    payable: true,
-    method_id: '0x2e0e2d3e',
-  };
-
-  it('if there is only one method with provided name, does nothing', () => {
-    const abi = prepareAbi(commonAbi, method);
-    expect(abi).toHaveLength(commonAbi.length);
-  });
-
-  it('if there are two or more methods with the same name and inputs length, filters out those which input types are not matched', () => {
-    const abi = prepareAbi([
-      ...commonAbi,
-      {
-        inputs: [
-          { internalType: 'address', name: '_fallbackUser', type: 'address' },
-          { internalType: 'bytes', name: '_rawZkAddress', type: 'bytes' },
-        ],
-        name: 'directNativeDeposit',
-        outputs: [
-          { internalType: 'uint256', name: '', type: 'uint256' },
-        ],
-        stateMutability: 'payable',
-        type: 'function',
-      },
-    ], method);
-
-    expect(abi).toHaveLength(commonAbi.length);
-
-    const item = abi.find((item) => 'name' in item ? item.name === method.name : false);
-    expect(item).toEqual(commonAbi[2]);
-  });
-
-  it('if there are two or more methods with the same name and different inputs length, filters out those which inputs are not matched', () => {
-    const abi = prepareAbi([
-      ...commonAbi,
-      {
-        inputs: [
-          { internalType: 'address', name: '_fallbackUser', type: 'address' },
-        ],
-        name: 'directNativeDeposit',
-        outputs: [
-          { internalType: 'uint256', name: '', type: 'uint256' },
-        ],
-        stateMutability: 'payable',
-        type: 'function',
-      },
-    ], method);
-
-    expect(abi).toHaveLength(commonAbi.length);
-
-    const item = abi.find((item) => 'name' in item ? item.name === method.name : false);
-    expect(item).toEqual(commonAbi[2]);
-  });
-});
diff --git a/ui/address/contract/utils.ts b/ui/address/contract/utils.ts
deleted file mode 100644
index 8fa04e839c..0000000000
--- a/ui/address/contract/utils.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { Abi } from 'abitype';
-
-import type { SmartContractWriteMethod } from 'types/api/contract';
-
-export const getNativeCoinValue = (value: unknown) => {
-  if (typeof value !== 'string') {
-    return BigInt(0);
-  }
-
-  return BigInt(value);
-};
-
-export function prepareAbi(abi: Abi, item: SmartContractWriteMethod): Abi {
-  if ('name' in item) {
-    const hasMethodsWithSameName = abi.filter((abiItem) => 'name' in abiItem ? abiItem.name === item.name : false).length > 1;
-
-    if (hasMethodsWithSameName) {
-      return abi.filter((abiItem) => {
-        if (!('name' in abiItem)) {
-          return true;
-        }
-
-        if (abiItem.name !== item.name) {
-          return true;
-        }
-
-        if (abiItem.inputs.length !== item.inputs.length) {
-          return false;
-        }
-
-        return abiItem.inputs.every(({ name, type }) => {
-          const itemInput = item.inputs.find((input) => input.name === name);
-          return Boolean(itemInput) && itemInput?.type === type;
-        });
-      });
-    }
-  }
-
-  return abi;
-}
diff --git a/ui/address/details/AddressBalance.tsx b/ui/address/details/AddressBalance.tsx
index 37450d3325..59ca449214 100644
--- a/ui/address/details/AddressBalance.tsx
+++ b/ui/address/details/AddressBalance.tsx
@@ -10,7 +10,8 @@ import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import { currencyUnits } from 'lib/units';
 import CurrencyValue from 'ui/shared/CurrencyValue';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import NativeTokenIcon from 'ui/shared/NativeTokenIcon';
 
 interface Props {
   data: Pick<Address, 'block_number_balance_updated_at' | 'coin_balance' | 'hash' | 'exchange_rate'>;
@@ -65,24 +66,27 @@ const AddressBalance = ({ data, isLoading }: Props) => {
   });
 
   return (
-    <DetailsInfoItem
-      title="Balance"
-      hint={ `Address balance in ${ currencyUnits.ether }. Doesn't include ERC20, ERC721 and ERC1155 tokens` }
-      flexWrap="nowrap"
-      alignItems="flex-start"
-      isLoading={ isLoading }
-    >
-      <CurrencyValue
-        value={ data.coin_balance || '0' }
-        exchangeRate={ data.exchange_rate }
-        decimals={ String(config.chain.currency.decimals) }
-        currency={ currencyUnits.ether }
-        accuracyUsd={ 2 }
-        accuracy={ 8 }
-        flexWrap="wrap"
+    <>
+      <DetailsInfoItem.Label
+        hint={ `${ currencyUnits.ether } balance` }
         isLoading={ isLoading }
-      />
-    </DetailsInfoItem>
+      >
+        Balance
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value alignSelf="center" flexWrap="nowrap">
+        <NativeTokenIcon boxSize={ 6 } mr={ 2 } isLoading={ isLoading }/>
+        <CurrencyValue
+          value={ data.coin_balance || '0' }
+          exchangeRate={ data.exchange_rate }
+          decimals={ String(config.chain.currency.decimals) }
+          currency={ currencyUnits.ether }
+          accuracyUsd={ 2 }
+          accuracy={ 8 }
+          flexWrap="wrap"
+          isLoading={ isLoading }
+        />
+      </DetailsInfoItem.Value>
+    </>
   );
 };
 
diff --git a/ui/address/details/AddressCounterItem.tsx b/ui/address/details/AddressCounterItem.tsx
index 39af50f2df..2354967e22 100644
--- a/ui/address/details/AddressCounterItem.tsx
+++ b/ui/address/details/AddressCounterItem.tsx
@@ -8,7 +8,7 @@ import type { AddressCounters } from 'types/api/address';
 import { route } from 'nextjs-routes';
 
 import type { ResourceError } from 'lib/api/resources';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 
 interface Props {
   prop: keyof AddressCounters;
diff --git a/ui/address/details/AddressFavoriteButton.tsx b/ui/address/details/AddressFavoriteButton.tsx
index 8ce50e6c56..44a8dd56d0 100644
--- a/ui/address/details/AddressFavoriteButton.tsx
+++ b/ui/address/details/AddressFavoriteButton.tsx
@@ -49,9 +49,13 @@ const AddressFavoriteButton = ({ className, hash, watchListId }: Props) => {
   }, [ deleteModalProps ]);
 
   const formData = React.useMemo(() => {
+    if (typeof watchListId !== 'number') {
+      return;
+    }
+
     return {
       address_hash: hash,
-      id: String(watchListId),
+      id: watchListId,
     };
   }, [ hash, watchListId ]);
 
@@ -83,12 +87,14 @@ const AddressFavoriteButton = ({ className, hash, watchListId }: Props) => {
         onSuccess={ handleAddOrDeleteSuccess }
         data={ formData }
       />
-      <DeleteAddressModal
-        { ...deleteModalProps }
-        onClose={ handleDeleteModalClose }
-        data={ formData }
-        onSuccess={ handleAddOrDeleteSuccess }
-      />
+      { formData && (
+        <DeleteAddressModal
+          { ...deleteModalProps }
+          onClose={ handleDeleteModalClose }
+          data={ formData }
+          onSuccess={ handleAddOrDeleteSuccess }
+        />
+      ) }
     </>
   );
 };
diff --git a/ui/address/details/AddressImplementations.tsx b/ui/address/details/AddressImplementations.tsx
new file mode 100644
index 0000000000..0e8151d1f7
--- /dev/null
+++ b/ui/address/details/AddressImplementations.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+
+import type { AddressImplementation } from 'types/api/addressParams';
+
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+
+interface Props {
+  data: Array<AddressImplementation>;
+  isLoading?: boolean;
+}
+
+const AddressImplementations = ({ data, isLoading }: Props) => {
+  const hasManyItems = data.length > 1;
+  const [ hasScroll, setHasScroll ] = React.useState(false);
+
+  return (
+    <>
+      <DetailsInfoItem.Label
+        hint={ `Implementation${ hasManyItems ? 's' : '' } address${ hasManyItems ? 'es' : '' } of the proxy contract` }
+        isLoading={ isLoading }
+        hasScroll={ hasScroll }
+      >
+        { `Implementation${ hasManyItems ? 's' : '' }` }
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.ValueWithScroll
+        gradientHeight={ 48 }
+        onScrollVisibilityChange={ setHasScroll }
+        rowGap={ 2 }
+        maxH="200px"
+      >
+        { data.map((item) => (
+          <AddressEntity
+            key={ item.address }
+            address={{ hash: item.address, name: item.name, is_contract: true }}
+            isLoading={ isLoading }
+            noIcon
+          />
+        )) }
+      </DetailsInfoItem.ValueWithScroll>
+    </>
+  );
+};
+
+export default React.memo(AddressImplementations);
diff --git a/ui/address/details/AddressMetadataAlert.pw.tsx b/ui/address/details/AddressMetadataAlert.pw.tsx
new file mode 100644
index 0000000000..7fedde5059
--- /dev/null
+++ b/ui/address/details/AddressMetadataAlert.pw.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import * as metadataMock from 'mocks/metadata/address';
+import { test, expect } from 'playwright/lib';
+
+import AddressMetadataAlert from './AddressMetadataAlert';
+
+test('base view', async({ render }) => {
+  const component = await render(<AddressMetadataAlert tags={ [ metadataMock.noteTag ] }/>);
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/details/AddressMetadataAlert.tsx b/ui/address/details/AddressMetadataAlert.tsx
new file mode 100644
index 0000000000..aced9dc091
--- /dev/null
+++ b/ui/address/details/AddressMetadataAlert.tsx
@@ -0,0 +1,44 @@
+import { Alert, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
+
+interface Props {
+  tags: Array<AddressMetadataTagFormatted> | undefined;
+  className?: string;
+}
+
+const AddressMetadataAlert = ({ tags, className }: Props) => {
+  const noteTag = tags?.find(({ tagType }) => tagType === 'note');
+  if (!noteTag) {
+    return null;
+  }
+
+  const content = noteTag.meta?.data;
+
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <Alert
+      className={ className }
+      status={ noteTag.meta?.alertStatus ?? 'error' }
+      bgColor={ noteTag.meta?.alertBgColor }
+      color={ noteTag.meta?.alertTextColor }
+      whiteSpace="pre-wrap"
+      display="inline-block"
+      sx={{
+        '& a': {
+          color: 'link',
+          _hover: {
+            color: 'link_hovered',
+          },
+        },
+      }}
+      dangerouslySetInnerHTML={{ __html: content }}
+    />
+  );
+};
+
+export default React.memo(chakra(AddressMetadataAlert));
diff --git a/ui/address/details/AddressNameInfo.tsx b/ui/address/details/AddressNameInfo.tsx
index cf6d7fa5b5..d9d8dc9122 100644
--- a/ui/address/details/AddressNameInfo.tsx
+++ b/ui/address/details/AddressNameInfo.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import type { Address } from 'types/api/address';
 
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 
 interface Props {
@@ -14,46 +14,58 @@ interface Props {
 const AddressNameInfo = ({ data, isLoading }: Props) => {
   if (data.token) {
     return (
-      <DetailsInfoItem
-        title="Token name"
-        hint="Token name and symbol"
-        isLoading={ isLoading }
-      >
-        <TokenEntity
-          token={ data.token }
+      <>
+        <DetailsInfoItem.Label
+          hint="Token name and symbol"
           isLoading={ isLoading }
-          noIcon
-          noCopy
-        />
-      </DetailsInfoItem>
+        >
+          Token name
+        </DetailsInfoItem.Label>
+        <DetailsInfoItem.Value>
+          <TokenEntity
+            token={ data.token }
+            isLoading={ isLoading }
+            noIcon
+            noCopy
+          />
+        </DetailsInfoItem.Value>
+      </>
     );
   }
 
   if (data.is_contract && data.name) {
     return (
-      <DetailsInfoItem
-        title="Contract name"
-        hint="The name found in the source code of the Contract"
-        isLoading={ isLoading }
-      >
-        <Skeleton isLoaded={ !isLoading }>
-          { data.name }
-        </Skeleton>
-      </DetailsInfoItem>
+      <>
+        <DetailsInfoItem.Label
+          hint="The name found in the source code of the Contract"
+          isLoading={ isLoading }
+        >
+          Contract name
+        </DetailsInfoItem.Label>
+        <DetailsInfoItem.Value>
+          <Skeleton isLoaded={ !isLoading }>
+            { data.name }
+          </Skeleton>
+        </DetailsInfoItem.Value>
+      </>
     );
   }
 
   if (data.name) {
     return (
-      <DetailsInfoItem
-        title="Validator name"
-        hint="The name of the validator"
-        isLoading={ isLoading }
-      >
-        <Skeleton isLoaded={ !isLoading }>
-          { data.name }
-        </Skeleton>
-      </DetailsInfoItem>
+      <>
+        <DetailsInfoItem.Label
+          hint="The name of the validator"
+          isLoading={ isLoading }
+        >
+          Validator name
+        </DetailsInfoItem.Label>
+        <DetailsInfoItem.Value>
+          <Skeleton isLoaded={ !isLoading }>
+            { data.name }
+          </Skeleton>
+        </DetailsInfoItem.Value>
+      </>
     );
   }
 
diff --git a/ui/address/details/AddressNetWorth.pw.tsx b/ui/address/details/AddressNetWorth.pw.tsx
new file mode 100644
index 0000000000..6dc5d34caf
--- /dev/null
+++ b/ui/address/details/AddressNetWorth.pw.tsx
@@ -0,0 +1,63 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import * as addressMock from 'mocks/address/address';
+import * as tokensMock from 'mocks/address/tokens';
+import { test, expect } from 'playwright/lib';
+
+import AddressNetWorth from './AddressNetWorth';
+
+const ADDRESS_HASH = addressMock.hash;
+const ICON_URL = 'https://localhost:3000/my-icon.png';
+
+test.beforeEach(async({ mockApiResponse }) => {
+  await mockApiResponse('address_tokens', tokensMock.erc20List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-20' } });
+  await mockApiResponse('address_tokens', tokensMock.erc721List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-721' } });
+  await mockApiResponse('address_tokens', tokensMock.erc1155List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-1155' } });
+  await mockApiResponse('address_tokens', tokensMock.erc404List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' } });
+});
+
+test('base view', async({ render }) => {
+  const component = await render(<AddressNetWorth addressData={ addressMock.eoa } addressHash={ ADDRESS_HASH }/>);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('with multichain button internal +@dark-mode', async({ render, mockEnvs, mockAssetResponse }) => {
+  await mockEnvs([
+    [
+      'NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG',
+      `{"name": "duck", "dapp_id": "duck", "url_template": "https://duck.url/{address}", "logo": "${ ICON_URL }"}` ],
+  ]);
+  await mockAssetResponse(ICON_URL, './playwright/mocks/image_svg.svg');
+
+  const component = await render(<AddressNetWorth addressData={ addressMock.eoa } addressHash={ ADDRESS_HASH }/>);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('with multichain button external', async({ render, mockEnvs, mockAssetResponse }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG', `{"name": "duck", "url_template": "https://duck.url/{address}", "logo": "${ ICON_URL }"}` ],
+  ]);
+  await mockAssetResponse(ICON_URL, './playwright/mocks/image_svg.svg');
+
+  const component = await render(<AddressNetWorth addressData={ addressMock.eoa } addressHash={ ADDRESS_HASH }/>);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('with multichain button internal small screen', async({ render, mockEnvs, mockAssetResponse }) => {
+  await mockEnvs([
+    [
+      'NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG',
+      `{"name": "duck", "dapp_id": "duck", "url_template": "https://duck.url/{address}", "logo": "${ ICON_URL }"}` ],
+  ]);
+  await mockAssetResponse(ICON_URL, './playwright/mocks/image_svg.svg');
+
+  const component = await render(
+    <Box w="300px"><AddressNetWorth addressData={ addressMock.eoa } addressHash={ ADDRESS_HASH }/></Box>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/details/AddressNetWorth.tsx b/ui/address/details/AddressNetWorth.tsx
new file mode 100644
index 0000000000..59fb0368cb
--- /dev/null
+++ b/ui/address/details/AddressNetWorth.tsx
@@ -0,0 +1,113 @@
+import { Image, Skeleton, Text, Flex } from '@chakra-ui/react';
+import _capitalize from 'lodash/capitalize';
+import React from 'react';
+
+import type { Address } from 'types/api/address';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import getCurrencyValue from 'lib/getCurrencyValue';
+import * as mixpanel from 'lib/mixpanel/index';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import TextSeparator from 'ui/shared/TextSeparator';
+
+import { getTokensTotalInfo } from '../utils/tokenUtils';
+import useFetchTokens from '../utils/useFetchTokens';
+
+const TEMPLATE_ADDRESS = '{address}';
+
+const multichainFeature = config.features.multichainButton;
+
+type Props = {
+  addressHash: string;
+  addressData?: Address;
+  isLoading?: boolean;
+}
+
+const AddressNetWorth = ({ addressData, isLoading, addressHash }: Props) => {
+  const { data, isError, isPending } = useFetchTokens({ hash: addressData?.hash, enabled: addressData?.has_tokens });
+
+  const { usdBn: nativeUsd } = getCurrencyValue({
+    value: addressData?.coin_balance || '0',
+    accuracy: 8,
+    accuracyUsd: 2,
+    exchangeRate: addressData?.exchange_rate,
+    decimals: String(config.chain.currency.decimals),
+  });
+
+  const { usd, isOverflow } = getTokensTotalInfo(data);
+  const prefix = isOverflow ? '>' : '';
+
+  const totalUsd = nativeUsd.plus(usd);
+
+  const onMultichainClick = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.BUTTON_CLICK, { Content: 'Multichain', Source: 'address' });
+  }, []);
+
+  let multichainItem = null;
+
+  if (multichainFeature.isEnabled && !addressData?.is_contract) {
+    const buttonContent = (
+      <>
+        { multichainFeature.logoUrl &&
+          <Image src={ multichainFeature.logoUrl } alt={ multichainFeature.name } boxSize={ 5 } mr={ 2 } borderRadius="4px" overflow="hidden"/>
+        }
+        { _capitalize(multichainFeature.name) }</>
+    );
+
+    const linkProps = {
+      variant: 'subtle' as const,
+      display: 'flex',
+      alignItems: 'center',
+      fontSize: 'sm',
+      lineHeight: 5,
+      fontWeight: 500,
+      onClick: onMultichainClick,
+    };
+
+    try {
+      const portfolioUrlString = multichainFeature.urlTemplate.replace(TEMPLATE_ADDRESS, addressHash);
+      const portfolioUrl = new URL(portfolioUrlString);
+      portfolioUrl.searchParams.append('utm_source', 'blockscout');
+      portfolioUrl.searchParams.append('utm_medium', 'address');
+      const dappId = multichainFeature.dappId;
+      multichainItem = (
+        <>
+          <TextSeparator mx={ 0 } color="gray.500"/>
+          <Flex alignItems="center" gap={ 2 }>
+            <Text>Multichain</Text>
+            { typeof dappId === 'string' ? (
+              <LinkInternal
+                href={ route({ pathname: '/apps/[id]', query: { id: dappId, url: portfolioUrl.toString() } }) }
+                { ...linkProps }
+              >
+                { buttonContent }
+              </LinkInternal>
+            ) : (
+              <LinkExternal
+                href={ portfolioUrl.toString() }
+                { ...linkProps }
+              >
+                { buttonContent }
+              </LinkExternal>
+            ) }
+          </Flex>
+        </>
+      );
+    } catch (error) {}
+
+  }
+
+  return (
+    <Skeleton display="flex" alignItems="center" flexWrap="wrap" isLoaded={ !isLoading && !(addressData?.has_tokens && isPending) } gap={ 2 }>
+      <Text>
+        { (isError || !addressData?.exchange_rate) ? 'N/A' : `${ prefix }$${ totalUsd.toFormat(2) }` }
+      </Text>
+      { multichainItem }
+    </Skeleton>
+  );
+};
+
+export default AddressNetWorth;
diff --git a/ui/address/details/AddressQrCode.pw.tsx b/ui/address/details/AddressQrCode.pw.tsx
index aef931f75e..1ae1c71187 100644
--- a/ui/address/details/AddressQrCode.pw.tsx
+++ b/ui/address/details/AddressQrCode.pw.tsx
@@ -1,18 +1,12 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as addressMock from 'mocks/address/address';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import AddressQrCode from './AddressQrCode';
 
-test('default view +@mobile +@dark-mode', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <AddressQrCode address={ addressMock.withoutName }/>
-    </TestApp>,
-  );
+test('default view +@mobile +@dark-mode', async({ render, page }) => {
+  await render(<AddressQrCode address={ addressMock.withoutName }/>);
   await page.getByRole('button', { name: /qr code/i }).click();
-
   await expect(page).toHaveScreenshot();
 });
diff --git a/ui/address/details/AddressSaveOnGas.tsx b/ui/address/details/AddressSaveOnGas.tsx
new file mode 100644
index 0000000000..b21a3b9973
--- /dev/null
+++ b/ui/address/details/AddressSaveOnGas.tsx
@@ -0,0 +1,88 @@
+import { Image, Skeleton } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import React from 'react';
+import * as v from 'valibot';
+
+import config from 'configs/app';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import TextSeparator from 'ui/shared/TextSeparator';
+
+const feature = config.features.saveOnGas;
+
+const responseSchema = v.object({
+  percent: v.number(),
+});
+
+const ERROR_NAME = 'Invalid response schema';
+
+interface Props {
+  gasUsed: string;
+  address: string;
+}
+
+const AddressSaveOnGas = ({ gasUsed, address }: Props) => {
+
+  const gasUsedNumber = Number(gasUsed);
+
+  const query = useQuery({
+    queryKey: [ 'gas_hawk_saving_potential', { address } ],
+    queryFn: async() => {
+      if (!feature.isEnabled) {
+        return;
+      }
+
+      const response = await fetch(feature.apiUrlTemplate.replace('<address>', address));
+      const data = await response.json();
+      return data;
+    },
+    select: (response) => {
+      const parsedResponse = v.safeParse(responseSchema, response);
+
+      if (!parsedResponse.success) {
+        throw Error('Invalid response schema');
+      }
+
+      return parsedResponse.output;
+    },
+    placeholderData: { percent: 42 },
+    enabled: feature.isEnabled && gasUsedNumber > 0,
+  });
+
+  const errorMessage = query.error && 'message' in query.error ? query.error.message : undefined;
+
+  React.useEffect(() => {
+    if (errorMessage === ERROR_NAME) {
+      fetch('/node-api/monitoring/invalid-api-schema', {
+        method: 'POST',
+        body: JSON.stringify({
+          resource: 'gas_hawk_saving_potential',
+          url: feature.isEnabled ? feature.apiUrlTemplate.replace('<address>', address) : undefined,
+        }),
+      });
+    }
+  }, [ address, errorMessage ]);
+
+  if (gasUsedNumber <= 0 || !feature.isEnabled || query.isError || !query.data?.percent) {
+    return null;
+  }
+
+  const percent = Math.round(query.data.percent);
+
+  if (percent < 1) {
+    return null;
+  }
+
+  return (
+    <>
+      <TextSeparator color="divider"/>
+      <Skeleton isLoaded={ !query.isPlaceholderData } display="flex" alignItems="center" columnGap={ 2 }>
+        <Image src="/static/gas_hawk_logo.svg" w="15px" h="20px" alt="GasHawk logo"/>
+        <LinkExternal href="https://www.gashawk.io" fontSize="sm">
+          Save { percent.toLocaleString(undefined, { maximumFractionDigits: 0 }) }% with GasHawk
+        </LinkExternal>
+      </Skeleton>
+    </>
+  );
+};
+
+export default React.memo(AddressSaveOnGas);
diff --git a/ui/address/details/__screenshots__/AddressMetadataAlert.pw.tsx_default_base-view-1.png b/ui/address/details/__screenshots__/AddressMetadataAlert.pw.tsx_default_base-view-1.png
new file mode 100644
index 0000000000..68bf3dc7d0
Binary files /dev/null and b/ui/address/details/__screenshots__/AddressMetadataAlert.pw.tsx_default_base-view-1.png differ
diff --git a/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_dark-color-mode_with-multichain-button-internal-dark-mode-1.png b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_dark-color-mode_with-multichain-button-internal-dark-mode-1.png
new file mode 100644
index 0000000000..227173d78e
Binary files /dev/null and b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_dark-color-mode_with-multichain-button-internal-dark-mode-1.png differ
diff --git a/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_base-view-1.png b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_base-view-1.png
new file mode 100644
index 0000000000..3bd28c250c
Binary files /dev/null and b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_base-view-1.png differ
diff --git a/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-external-1.png b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-external-1.png
new file mode 100644
index 0000000000..e2eea3d91a
Binary files /dev/null and b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-external-1.png differ
diff --git a/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-internal-dark-mode-1.png b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-internal-dark-mode-1.png
new file mode 100644
index 0000000000..3bbd9df98c
Binary files /dev/null and b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-internal-dark-mode-1.png differ
diff --git a/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-internal-small-screen-1.png b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-internal-small-screen-1.png
new file mode 100644
index 0000000000..d94432402c
Binary files /dev/null and b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-internal-small-screen-1.png differ
diff --git a/ui/address/ensDomains/AddressEnsDomains.pw.tsx b/ui/address/ensDomains/AddressEnsDomains.pw.tsx
index 8f75aede6d..81ff0f41d3 100644
--- a/ui/address/ensDomains/AddressEnsDomains.pw.tsx
+++ b/ui/address/ensDomains/AddressEnsDomains.pw.tsx
@@ -1,37 +1,39 @@
-import { test, expect } from '@playwright/experimental-ct-react';
+import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
-import config from 'configs/app';
+import type * as bens from '@blockscout/bens-types';
+
+import type { ResourceError } from 'lib/api/resources';
 import * as ensDomainMock from 'mocks/ens/domain';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import AddressEnsDomains from './AddressEnsDomains';
 
-const ADDRESS_HASH = ensDomainMock.ensDomainA.owner?.hash ?? '';
-const ADDRESSES_LOOKUP_API_URL = buildApiUrl('addresses_lookup', { chainId: config.chain.id }) +
-  `?address=${ ADDRESS_HASH }&resolved_to=true&owned_by=true&only_active=true&order=ASC`;
+const ADDRESS_HASH = ensDomainMock.ensDomainA.owner?.hash as string;
 
-test('base view', async({ mount, page }) => {
-  await page.route(ADDRESSES_LOOKUP_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({
+test('base view', async({ render, page, mockAssetResponse }) => {
+  const query = {
+    data: {
       items: [
         ensDomainMock.ensDomainA,
         ensDomainMock.ensDomainB,
         ensDomainMock.ensDomainC,
         ensDomainMock.ensDomainD,
       ],
-    }),
-  }));
+      next_page_params: null,
+    },
+    isPending: false,
+    isError: false,
+  } as unknown as UseQueryResult<bens.LookupAddressResponse, ResourceError<unknown>>;
+  await mockAssetResponse(ensDomainMock.ensDomainA.protocol?.icon_url as string, './playwright/mocks/image_s.jpg');
 
-  const component = await mount(
-    <TestApp>
-      <AddressEnsDomains addressHash={ ADDRESS_HASH } mainDomainName={ ensDomainMock.ensDomainA.name }/>
-    </TestApp>,
+  const component = await render(
+    <AddressEnsDomains
+      query={ query }
+      addressHash={ ADDRESS_HASH }
+      mainDomainName={ ensDomainMock.ensDomainA.name }
+    />,
   );
-
   await component.getByText('4').click();
-
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 550, height: 350 } });
 });
diff --git a/ui/address/ensDomains/AddressEnsDomains.tsx b/ui/address/ensDomains/AddressEnsDomains.tsx
index af57b5bd20..fe046db30a 100644
--- a/ui/address/ensDomains/AddressEnsDomains.tsx
+++ b/ui/address/ensDomains/AddressEnsDomains.tsx
@@ -1,24 +1,40 @@
-import { Box, Button, chakra, Flex, Grid, Hide, Popover, PopoverBody, PopoverContent, PopoverTrigger, Show, Skeleton, useDisclosure } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  Flex,
+  Grid,
+  Hide,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Show,
+  Skeleton,
+  useDisclosure,
+  chakra,
+} from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
 import _clamp from 'lodash/clamp';
 import React from 'react';
 
-import type { EnsDomain } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
 import { route } from 'nextjs-routes';
 
-import config from 'configs/app';
-import useApiQuery from 'lib/api/useApiQuery';
+import type { ResourceError } from 'lib/api/resources';
 import dayjs from 'lib/date/dayjs';
+import Popover from 'ui/shared/chakra/Popover';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import PopoverTriggerTooltip from 'ui/shared/PopoverTriggerTooltip';
 
 interface Props {
+  query: UseQueryResult<bens.LookupAddressResponse, ResourceError<unknown>>;
   addressHash: string;
-  mainDomainName: string | null;
+  mainDomainName: string | null | undefined;
 }
 
-const DomainsGrid = ({ data }: { data: Array<EnsDomain> }) => {
+const DomainsGrid = ({ data }: { data: Array<bens.Domain> }) => {
   return (
     <Grid
       templateColumns={{ base: `repeat(${ _clamp(data.length, 1, 2) }, 1fr)`, lg: `repeat(${ _clamp(data.length, 1, 3) }, 1fr)` }}
@@ -26,24 +42,15 @@ const DomainsGrid = ({ data }: { data: Array<EnsDomain> }) => {
       rowGap={ 4 }
       mt={ 2 }
     >
-      { data.slice(0, 9).map((domain) => <EnsEntity key={ domain.id } name={ domain.name } noCopy/>) }
+      { data.slice(0, 9).map((domain) => <EnsEntity key={ domain.id } domain={ domain.name } protocol={ domain.protocol } noCopy/>) }
     </Grid>
   );
 };
 
-const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
+const AddressEnsDomains = ({ query, addressHash, mainDomainName }: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
 
-  const { data, isPending, isError } = useApiQuery('addresses_lookup', {
-    pathParams: { chainId: config.chain.id },
-    queryParams: {
-      address: addressHash,
-      resolved_to: true,
-      owned_by: true,
-      only_active: true,
-      order: 'ASC',
-    },
-  });
+  const { data, isPending, isError } = query;
 
   if (isError) {
     return null;
@@ -57,9 +64,9 @@ const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
     return null;
   }
 
-  const mainDomain = data.items.find((domain) => domain.name === mainDomainName);
+  const mainDomain = data.items.find((domain) => mainDomainName && domain.name === mainDomainName);
   const ownedDomains = data.items.filter((domain) => {
-    if (domain.name === mainDomainName) {
+    if (mainDomainName && domain.name === mainDomainName) {
       return false;
     }
 
@@ -90,25 +97,28 @@ const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
       <PopoverTrigger>
-        <Button
-          size="sm"
-          variant="outline"
-          colorScheme="gray"
-          onClick={ onToggle }
-          aria-label="Address domains"
-          fontWeight={ 500 }
-          px={ 2 }
-          h="32px"
-          flexShrink={ 0 }
-        >
-          <IconSvg name="ENS_slim" boxSize={ 5 }/>
-          <Show above="xl">
-            <chakra.span ml={ 1 }>{ totalRecords } Domain{ data.items.length > 1 ? 's' : '' }</chakra.span>
-          </Show>
-          <Hide above="xl">
-            <chakra.span ml={ 1 }>{ totalRecords }</chakra.span>
-          </Hide>
-        </Button>
+        <PopoverTriggerTooltip label="List of names resolved or owned by this address">
+          <Button
+            size="sm"
+            variant="outline"
+            colorScheme="gray"
+            onClick={ onToggle }
+            isActive={ isOpen }
+            aria-label="Address domains"
+            fontWeight={ 500 }
+            px={ 2 }
+            h="32px"
+            flexShrink={ 0 }
+          >
+            <IconSvg name="ENS_slim" boxSize={ 5 }/>
+            <Show above="xl">
+              <chakra.span ml={ 1 }>{ totalRecords } Domain{ data.items.length > 1 ? 's' : '' }</chakra.span>
+            </Show>
+            <Hide above="xl">
+              <chakra.span ml={ 1 }>{ totalRecords }</chakra.span>
+            </Hide>
+          </Button>
+        </PopoverTriggerTooltip>
       </PopoverTrigger>
       <PopoverContent w={{ base: '100vw', lg: '500px' }}>
         <PopoverBody px={ 6 } py={ 5 } fontSize="sm" display="flex" flexDir="column" rowGap={ 5 } alignItems="flex-start">
@@ -116,7 +126,7 @@ const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
             <Box w="100%">
               <chakra.span color="text_secondary" fontSize="xs">Primary*</chakra.span>
               <Flex alignItems="center" fontSize="md" mt={ 2 }>
-                <EnsEntity name={ mainDomain.name } fontWeight={ 600 } noCopy/>
+                <EnsEntity domain={ mainDomain.name } protocol={ mainDomain.protocol } fontWeight={ 600 } noCopy/>
                 { mainDomain.expiry_date &&
                     <chakra.span color="text_secondary" whiteSpace="pre"> (expires { dayjs(mainDomain.expiry_date).fromNow() })</chakra.span> }
               </Flex>
diff --git a/ui/address/internals/AddressIntTxsListItem.tsx b/ui/address/internals/AddressIntTxsListItem.tsx
index 4b0861e706..2e38defecb 100644
--- a/ui/address/internals/AddressIntTxsListItem.tsx
+++ b/ui/address/internals/AddressIntTxsListItem.tsx
@@ -5,7 +5,6 @@ import React from 'react';
 import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
 import { currencyUnits } from 'lib/units';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import Tag from 'ui/shared/chakra/Tag';
@@ -13,6 +12,7 @@ import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
 type Props = InternalTransaction & { currentAddress: string; isLoading?: boolean };
@@ -47,9 +47,13 @@ const TxInternalsListItem = ({
           fontWeight={ 700 }
           truncation="constant_long"
         />
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm">
-          <span>{ dayjs(timestamp).fromNow() }</span>
-        </Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+          fontWeight="400"
+          fontSize="sm"
+        />
       </Flex>
       <HStack spacing={ 1 }>
         <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Block</Skeleton>
diff --git a/ui/address/internals/AddressIntTxsTable.tsx b/ui/address/internals/AddressIntTxsTable.tsx
index 83e0f13f7a..e4549fcc2b 100644
--- a/ui/address/internals/AddressIntTxsTable.tsx
+++ b/ui/address/internals/AddressIntTxsTable.tsx
@@ -19,7 +19,7 @@ const AddressIntTxsTable = ({ data, currentAddress, isLoading }: Props) => {
   return (
     <AddressHighlightProvider>
       <Table variant="simple" size="sm">
-        <Thead top={ 80 }>
+        <Thead top={ 68 }>
           <Tr>
             <Th width="15%">Parent txn hash</Th>
             <Th width="15%">Type</Th>
diff --git a/ui/address/internals/AddressIntTxsTableItem.tsx b/ui/address/internals/AddressIntTxsTableItem.tsx
index 49f83d5100..d19730773d 100644
--- a/ui/address/internals/AddressIntTxsTableItem.tsx
+++ b/ui/address/internals/AddressIntTxsTableItem.tsx
@@ -5,12 +5,12 @@ import React from 'react';
 import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import config from 'configs/app';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import Tag from 'ui/shared/chakra/Tag';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
 type Props = InternalTransaction & { currentAddress: string; isLoading?: boolean }
@@ -32,8 +32,6 @@ const AddressIntTxsTableItem = ({
   const typeTitle = TX_INTERNALS_ITEMS.find(({ id }) => id === type)?.title;
   const toData = to ? to : createdContract;
 
-  const timeAgo = useTimeAgoIncrement(timestamp, true);
-
   return (
     <Tr alignItems="top">
       <Td verticalAlign="middle">
@@ -45,11 +43,14 @@ const AddressIntTxsTableItem = ({
             noIcon
             truncation="constant_long"
           />
-          { timestamp && (
-            <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm">
-              <span>{ timeAgo }</span>
-            </Skeleton>
-          ) }
+          <TimeAgoWithTooltip
+            timestamp={ timestamp }
+            enableIncrement
+            isLoading={ isLoading }
+            color="text_secondary"
+            fontWeight="400"
+            fontSize="sm"
+          />
         </Flex>
       </Td>
       <Td verticalAlign="middle">
diff --git a/ui/address/mud/AddressMudBreadcrumbs.tsx b/ui/address/mud/AddressMudBreadcrumbs.tsx
new file mode 100644
index 0000000000..5d2eedff40
--- /dev/null
+++ b/ui/address/mud/AddressMudBreadcrumbs.tsx
@@ -0,0 +1,119 @@
+import { Box, useColorModeValue, chakra, Grid } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import isBrowser from 'lib/isBrowser';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+import useAddressQuery from '../utils/useAddressQuery';
+
+type TableViewProps = {
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  className?: string;
+  hash: string;
+  tableId: string;
+  tableName: string;
+}
+
+type RecordViewProps = TableViewProps & {
+  recordId: string;
+  recordName: string;
+}
+
+type BreadcrumbItemProps = {
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  text: string;
+  href: string;
+  isLast?: boolean;
+}
+
+const BreadcrumbItem = ({ text, href, isLast, scrollRef }: BreadcrumbItemProps) => {
+  const iconColor = useColorModeValue('gray.300', 'gray.600');
+
+  const currentUrl = isBrowser() ? window.location.href : '';
+
+  const onLinkClick = React.useCallback(() => {
+    window.setTimeout(() => {
+      // cannot do scroll instantly, have to wait a little
+      scrollRef?.current?.scrollIntoView({ behavior: 'smooth' });
+    }, 500);
+  }, [ scrollRef ]);
+
+  if (isLast) {
+    return (
+      <Grid gap={ 2 } overflow="hidden" templateColumns="auto 24px" alignItems="center">
+        <Box
+          overflow="hidden"
+          whiteSpace="nowrap"
+          textOverflow="ellipsis"
+        >
+          { text }
+        </Box>
+        <CopyToClipboard text={ currentUrl } type="link" mx={ 0 } color="text_secondary"/>
+      </Grid>
+    );
+  }
+
+  return (
+    <Grid gap={ 2 } overflow="hidden" templateColumns="auto 24px" alignItems="center">
+      <LinkInternal
+        href={ href }
+        onClick={ onLinkClick }
+        overflow="hidden"
+        textOverflow="ellipsis"
+        whiteSpace="nowrap"
+      >
+        { text }
+      </LinkInternal>
+      { !isLast && <IconSvg name="arrows/east" boxSize={ 6 } color={ iconColor }/> }
+    </Grid>
+  );
+};
+
+const AddressMudBreadcrumbs = (props: TableViewProps | RecordViewProps) => {
+  const queryParams = { tab: 'mud', hash: props.hash };
+  const isMobile = useIsMobile();
+
+  const addressQuery = useAddressQuery({ hash: props.hash });
+
+  return (
+    <Box
+      display={ isMobile ? 'flex' : 'grid' }
+      flexWrap="wrap"
+      gridTemplateColumns="20px auto auto auto"
+      gap={ 2 }
+      alignItems="center"
+      className={ props.className }
+      width="fit-content"
+      fontSize="sm"
+    >
+      <IconSvg name="MUD" boxSize={ 5 } color={ addressQuery.data?.is_verified ? 'green.500' : 'text_secondary' }/>
+      <BreadcrumbItem
+        text="MUD World"
+        href={ route({ pathname: '/address/[hash]', query: queryParams }) }
+        scrollRef={ props.scrollRef }
+      />
+      <BreadcrumbItem
+        text={ props.tableName }
+        href={ route({ pathname: '/address/[hash]', query: { ...queryParams, table_id: props.tableId } }) }
+        isLast={ !('recordId' in props) }
+        scrollRef={ props.scrollRef }
+      />
+      { ('recordId' in props) && (
+        <BreadcrumbItem
+          text={ props.recordName }
+          href={ route({ pathname: '/address/[hash]', query: { ...queryParams, table_id: props.tableId, record_id: props.recordId } }) }
+          isLast
+          scrollRef={ props.scrollRef }
+
+        />
+      ) }
+    </Box>
+  );
+};
+
+export default React.memo(chakra(AddressMudBreadcrumbs));
diff --git a/ui/address/mud/AddressMudRecord.pw.tsx b/ui/address/mud/AddressMudRecord.pw.tsx
new file mode 100644
index 0000000000..bd806698ff
--- /dev/null
+++ b/ui/address/mud/AddressMudRecord.pw.tsx
@@ -0,0 +1,46 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { mudRecord } from 'mocks/mud/mudTables';
+import { test, expect, devices } from 'playwright/lib';
+
+import AddressMudRecord from './AddressMudRecord';
+
+const ADDRESS_HASH = 'hash';
+const TABLE_ID = '123';
+const RECORD_ID = '234';
+const hooksConfig = {
+  router: {
+    query: { hash: ADDRESS_HASH },
+  },
+};
+
+test('base view', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address_mud_record', mudRecord, { pathParams: { hash: ADDRESS_HASH, table_id: TABLE_ID, record_id: RECORD_ID } });
+
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
+      <AddressMudRecord tableId={ TABLE_ID } recordId={ RECORD_ID }/>
+    </Box>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('base view', async({ render, mockApiResponse }) => {
+    await mockApiResponse('address_mud_record', mudRecord, { pathParams: { hash: ADDRESS_HASH, table_id: TABLE_ID, record_id: RECORD_ID } });
+
+    const component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
+        <AddressMudRecord tableId={ TABLE_ID } recordId={ RECORD_ID }/>
+      </Box>,
+      { hooksConfig },
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+});
diff --git a/ui/address/mud/AddressMudRecord.tsx b/ui/address/mud/AddressMudRecord.tsx
new file mode 100644
index 0000000000..b47ae5657b
--- /dev/null
+++ b/ui/address/mud/AddressMudRecord.tsx
@@ -0,0 +1,95 @@
+import { Box, Td, Tr, Flex, Text, Table, Show, Hide, Divider, VStack } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import dayjs from 'lib/date/dayjs';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import ContentLoader from 'ui/shared/ContentLoader';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import TruncatedValue from 'ui/shared/TruncatedValue';
+
+import AddressMudBreadcrumbs from './AddressMudBreadcrumbs';
+import AddressMudRecordValues from './AddressMudRecordValues';
+import { getValueString } from './utils';
+
+type Props ={
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  isQueryEnabled?: boolean;
+  tableId: string;
+  recordId: string;
+}
+
+const AddressMudRecord = ({ tableId, recordId, isQueryEnabled = true, scrollRef }: Props) => {
+  const router = useRouter();
+
+  const hash = getQueryParamString(router.query.hash);
+
+  const { data, isLoading, isError } = useApiQuery('address_mud_record', {
+    pathParams: { hash, table_id: tableId, record_id: recordId },
+    queryOptions: {
+      enabled: isQueryEnabled,
+    },
+  });
+
+  if (isLoading) {
+    return <ContentLoader/>;
+  }
+
+  if (isError) {
+    return <DataFetchAlert/>;
+  }
+
+  return (
+    <>
+      { data && (
+        <AddressMudBreadcrumbs
+          hash={ hash }
+          tableId={ tableId }
+          tableName={ data?.table.table_full_name }
+          recordId={ recordId }
+          recordName={ data.record.id }
+          mb={ 6 }
+          scrollRef={ scrollRef }
+        />
+      ) }
+      <Show above="lg" ssr={ false }>
+        <Table borderRadius="8px" style={{ tableLayout: 'auto' }} width="100%" overflow="hidden">
+          { data?.schema.key_names.length && data?.schema.key_names.map((keyName, index) => (
+            <Tr key={ keyName } borderBottomStyle={ index === data.schema.key_names.length - 1 ? 'hidden' : 'solid' }>
+              <Td fontWeight={ 600 } whiteSpace="nowrap" fontSize="sm">
+                { keyName } ({ data.schema.key_types[index] })
+              </Td>
+              <Td colSpan={ 2 } fontSize="sm">
+                <Flex justifyContent="space-between">
+                  <TruncatedValue value={ getValueString(data.record.decoded[keyName]) } mr={ 2 }/>
+                  { index === 0 && <Box color="text_secondary">{ dayjs(data.record.timestamp).format('lll') }</Box> }
+                </Flex>
+              </Td>
+            </Tr>
+          )) }
+          <AddressMudRecordValues data={ data }/>
+        </Table>
+      </Show>
+      <Hide above="lg" ssr={ false }>
+        <>
+          { data?.schema.key_names.length && data?.schema.key_names.map((keyName, index) => (
+            <VStack gap={ 1 } key={ keyName } alignItems="start" fontSize="sm">
+              <Divider/>
+              <Text fontWeight={ 600 } whiteSpace="nowrap">
+                { keyName } ({ data.schema.key_types[index] })
+              </Text>
+              <Text wordBreak="break-word">{ getValueString(data.record.decoded[keyName]) }</Text>
+              { index === 0 && <Box color="text_secondary">{ dayjs(data.record.timestamp).format('lll') }</Box> }
+            </VStack>
+          )) }
+          <Table borderRadius="8px" style={{ tableLayout: 'auto' }} width="100%" mt={ 2 } overflow="hidden">
+            <AddressMudRecordValues data={ data }/>
+          </Table>
+        </>
+      </Hide>
+    </>
+  );
+};
+
+export default AddressMudRecord;
diff --git a/ui/address/mud/AddressMudRecordValues.tsx b/ui/address/mud/AddressMudRecordValues.tsx
new file mode 100644
index 0000000000..9deb9f63a1
--- /dev/null
+++ b/ui/address/mud/AddressMudRecordValues.tsx
@@ -0,0 +1,43 @@
+import { Box, Td, Tr, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressMudRecord } from 'types/api/address';
+
+import { getValueString } from './utils';
+
+type Props ={
+  data?: AddressMudRecord;
+}
+
+const AddressMudRecordValues = ({ data }: Props) => {
+  const valuesBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  if (!data?.schema.value_names.length) {
+    return null;
+  }
+
+  return (
+    <>
+      <Tr backgroundColor={ valuesBgColor } borderBottomStyle="hidden" >
+        <Td fontWeight={ 600 } w="100px" fontSize="sm">Field</Td>
+        <Td fontWeight={ 600 } w="90px" fontSize="sm">Type</Td>
+        <Td fontWeight={ 600 } fontSize="sm">Value</Td>
+      </Tr>
+      {
+        data?.schema.value_names.map((valName, index) => (
+          <Tr key={ valName } backgroundColor={ valuesBgColor } borderBottomStyle="hidden">
+            <Td fontSize="sm" w="100px" py={ 0 } pb={ 4 } pr={ 0 }wordBreak="break-all">{ valName }</Td>
+            <Td fontSize="sm" w="90px" py={ 0 } pb={ 4 } wordBreak="break-all">{ data.schema.value_types[index] }</Td>
+            <Td fontSize="sm" wordBreak="break-word" py={ 0 } pb={ 4 }>
+              <Box>
+                { getValueString(data.record.decoded[valName]) }
+              </Box>
+            </Td>
+          </Tr>
+        ))
+      }
+    </>
+  );
+};
+
+export default AddressMudRecordValues;
diff --git a/ui/address/mud/AddressMudRecordsKeyFilter.tsx b/ui/address/mud/AddressMudRecordsKeyFilter.tsx
new file mode 100644
index 0000000000..43e24c85af
--- /dev/null
+++ b/ui/address/mud/AddressMudRecordsKeyFilter.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+import FilterInput from 'ui/shared/filters/FilterInput';
+import TableColumnFilter from 'ui/shared/filters/TableColumnFilter';
+
+type Props = {
+  value?: string;
+  handleFilterChange: (val: string) => void;
+  title: string;
+  columnName: string;
+  isLoading?: boolean;
+}
+
+const AddressMudRecordsKeyFilter = ({ value = '', handleFilterChange, columnName, title, isLoading }: Props) => {
+  const [ filterValue, setFilterValue ] = React.useState<string>(value);
+
+  const onFilter = React.useCallback(() => {
+    handleFilterChange(filterValue);
+  }, [ handleFilterChange, filterValue ]);
+
+  return (
+    <TableColumnFilter
+      columnName={ columnName }
+      title={ title }
+      isActive={ Boolean(value) }
+      isFilled={ filterValue !== value }
+      onFilter={ onFilter }
+      isLoading={ isLoading }
+      w="350px"
+    >
+      <FilterInput
+        initialValue={ value }
+        size="xs"
+        onChange={ setFilterValue }
+        placeholder={ columnName }
+      />
+    </TableColumnFilter>
+  );
+};
+
+export default AddressMudRecordsKeyFilter;
diff --git a/ui/address/mud/AddressMudRecordsTable.tsx b/ui/address/mud/AddressMudRecordsTable.tsx
new file mode 100644
index 0000000000..4a90edb89d
--- /dev/null
+++ b/ui/address/mud/AddressMudRecordsTable.tsx
@@ -0,0 +1,225 @@
+import type { StyleProps } from '@chakra-ui/react';
+import { Box, Link, Table, Tbody, Td, Th, Tr, Flex, useColorModeValue, useBoolean, Tooltip } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { AddressMudRecords, AddressMudRecordsFilter, AddressMudRecordsSorting } from 'types/api/address';
+
+import { route } from 'nextjs-routes';
+
+import capitalizeFirstLetter from 'lib/capitalizeFirstLetter';
+import dayjs from 'lib/date/dayjs';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import AddressMudRecordsKeyFilter from './AddressMudRecordsKeyFilter';
+import { getNameTypeText, getValueString } from './utils';
+
+const COL_MIN_WIDTH = 180;
+const COL_MIN_WIDTH_MOBILE = 140;
+const CUT_COL_WIDTH = 36;
+const MIN_CUT_COUNT = 2;
+
+type Props = {
+  data: AddressMudRecords;
+  top: number;
+  sorting?: AddressMudRecordsSorting;
+  toggleSorting: (key: AddressMudRecordsSorting['sort']) => void;
+  setFilters: React.Dispatch<React.SetStateAction<AddressMudRecordsFilter>>;
+  filters: AddressMudRecordsFilter;
+  toggleTableHasHorizontalScroll: () => void;
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  hash: string;
+}
+
+const AddressMudRecordsTable = ({
+  data,
+  top,
+  sorting,
+  toggleSorting,
+  filters,
+  setFilters,
+  toggleTableHasHorizontalScroll,
+  scrollRef,
+  hash,
+}: Props) => {
+  const totalColsCut = data.schema.key_names.length + data.schema.value_names.length;
+  const isMobile = useIsMobile(false);
+  const [ colsCutCount, setColsCutCount ] = React.useState<number>(isMobile ? MIN_CUT_COUNT : 0);
+  const [ isOpened, setIsOpened ] = useBoolean(false);
+  const [ hasCut, setHasCut ] = useBoolean(isMobile ? totalColsCut > MIN_CUT_COUNT : true);
+
+  const containerRef = React.useRef<HTMLTableElement>(null);
+  const tableRef = React.useRef<HTMLTableElement>(null);
+
+  const router = useRouter();
+
+  const toggleIsOpen = React.useCallback(() => {
+    isOpened && tableRef.current?.scroll({ left: 0 });
+    setIsOpened.toggle();
+    toggleTableHasHorizontalScroll();
+  }, [ setIsOpened, toggleTableHasHorizontalScroll, isOpened ]);
+
+  const onRecordClick = React.useCallback((e: React.MouseEvent) => {
+    if (e.metaKey || e.ctrlKey) {
+      // Allow opening in a new tab/window with right-click or ctrl/cmd+click
+      return;
+    }
+
+    e.preventDefault();
+
+    const recordId = e.currentTarget.getAttribute('data-id');
+    if (recordId) {
+      router.push(
+        { pathname: '/address/[hash]', query: { hash, tab: 'mud', table_id: data.table.table_id, record_id: recordId } },
+        undefined,
+        { shallow: true },
+      );
+    }
+    scrollRef?.current?.scrollIntoView();
+  }, [ router, scrollRef, hash, data.table.table_id ]);
+
+  const handleFilterChange = React.useCallback((field: keyof AddressMudRecordsFilter) => (val: string) => {
+    setFilters(prev => {
+      const newVal = { ...prev };
+      newVal[field] = val;
+      return newVal;
+    });
+  }, [ setFilters ]);
+
+  const onKeySortClick = React.useCallback(
+    (e: React.MouseEvent) => toggleSorting('key' + e.currentTarget.getAttribute('data-id') as AddressMudRecordsSorting['sort']),
+    [ toggleSorting ],
+  );
+
+  const keyBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  React.useEffect(() => {
+    if (hasCut && !colsCutCount && containerRef.current) {
+      const count = Math.floor((containerRef.current.getBoundingClientRect().width - CUT_COL_WIDTH) / COL_MIN_WIDTH);
+      if (totalColsCut > MIN_CUT_COUNT && count - 1 < totalColsCut) {
+        setColsCutCount(count - 1);
+      } else {
+        setHasCut.off();
+      }
+    }
+  }, [ colsCutCount, data.schema, hasCut, setHasCut, totalColsCut ]);
+
+  const colW = isMobile ? COL_MIN_WIDTH_MOBILE : COL_MIN_WIDTH;
+
+  const keys = (isOpened || !hasCut) ? data.schema.key_names : data.schema.key_names.slice(0, colsCutCount);
+  const values = (isOpened || !hasCut) ? data.schema.value_names : data.schema.value_names.slice(0, colsCutCount - data.schema.key_names.length);
+  const colsCount = (isOpened || !hasCut) ? totalColsCut : colsCutCount;
+
+  const tdStyles: StyleProps = {
+    wordBreak: 'break-word',
+    whiteSpace: 'normal',
+    minW: `${ colW }px`,
+    w: `${ 100 / colsCount }%`,
+    verticalAlign: 'top',
+    lineHeight: '20px',
+  };
+
+  const hasHorizontalScroll = isMobile || isOpened;
+
+  if (hasCut && !colsCutCount) {
+    return <Box w="100%" ref={ containerRef }></Box>;
+  }
+
+  const cutButton = (
+    <Th width={ `${ CUT_COL_WIDTH }px ` } verticalAlign="baseline">
+      <Tooltip label={ isOpened ? 'Hide columns' : 'Show all columns' }>
+        <Link onClick={ toggleIsOpen } aria-label="show/hide columns">...</Link>
+      </Tooltip>
+    </Th>
+  );
+
+  return (
+    // can't implement both horizontal table scroll and sticky header
+    <Box maxW="100%" overflowX={ hasHorizontalScroll ? 'scroll' : 'unset' } whiteSpace="nowrap" ref={ tableRef }>
+      <Table variant="simple" size="sm" style={{ tableLayout: 'fixed' }}>
+        <Thead top={ hasHorizontalScroll ? 0 : top } display={ hasHorizontalScroll ? 'table' : 'table-header-group' } w="100%">
+          <Tr >
+            { keys.map((keyName, index) => {
+              const text = getNameTypeText(keyName, data.schema.key_types[index]);
+              return (
+                <Th key={ keyName } { ...tdStyles }>
+                  { index < 2 ? (
+                    <Flex alignItems="center">
+                      <Link
+                        onClick={ onKeySortClick }
+                        data-id={ index }
+                        display="flex"
+                        alignItems="start"
+                        lineHeight="20px"
+                        mr={ 2 }
+                      >
+                        { sorting?.sort === `key${ index }` && sorting.order && (
+                          <Box minW="24px" w="24px" mr={ 2 }>
+                            <IconSvg
+                              name="arrows/east"
+                              boxSize={ 5 }
+                              transform={ sorting.order === 'asc' ? 'rotate(-90deg)' : 'rotate(90deg)' }
+                            />
+                          </Box>
+                        ) }
+                        { text }
+                      </Link>
+                      <Box minW="20px" w="20px">
+                        <AddressMudRecordsKeyFilter
+                          value={ filters[index === 0 ? 'filter_key0' : 'filter_key1'] }
+                          title={ text }
+                          columnName={ keyName }
+                          handleFilterChange={ handleFilterChange(index === 0 ? 'filter_key0' : 'filter_key1') }
+                        />
+                      </Box>
+                    </Flex>
+                  ) : text }
+                </Th>
+              );
+            }) }
+            { values.map((valName, index) => (
+              <Th key={ valName } { ...tdStyles }>
+                { capitalizeFirstLetter(valName) } ({ data.schema.value_types[index] })
+              </Th>
+            )) }
+            { hasCut && !isOpened && cutButton }
+            <Th { ...tdStyles } w={ `${ colW }px` }>Modified</Th>
+            { hasCut && isOpened && cutButton }
+          </Tr>
+        </Thead>
+        <Tbody display={ hasHorizontalScroll ? 'table' : 'table-row-group' } w="100%">
+          { data.items.map((item) => (
+            <Tr key={ item.id }>
+              { keys.map((keyName, index) => (
+                <Td key={ keyName } backgroundColor={ keyBgColor } { ...tdStyles }>
+                  { index === 0 ? (
+                    <LinkInternal
+                      onClick={ onRecordClick }
+                      data-id={ item.id }
+                      fontWeight={ 700 }
+                      href={ route({ pathname: '/address/[hash]', query: { hash, tab: 'mud', table_id: data.table.table_id, record_id: item.id } }) }
+                    >
+                      { getValueString(item.decoded[keyName]) }
+                    </LinkInternal>
+                  ) : getValueString(item.decoded[keyName]) }
+                  <CopyToClipboard text={ item.decoded[keyName] }/>
+                </Td>
+              )) }
+              { values.map((valName) =>
+                <Td key={ valName } { ...tdStyles }>{ getValueString(item.decoded[valName]) }</Td>) }
+              { hasCut && !isOpened && <Td width={ `${ CUT_COL_WIDTH }px ` }></Td> }
+              <Td { ...tdStyles } color="text_secondary" w={ `${ colW }px` }>{ dayjs(item.timestamp).format('lll') }</Td>
+              { hasCut && isOpened && <Td width={ `${ CUT_COL_WIDTH }px ` }></Td> }
+            </Tr>
+          )) }
+        </Tbody>
+      </Table>
+    </Box>
+  );
+};
+
+export default AddressMudRecordsTable;
diff --git a/ui/address/mud/AddressMudTable.pw.tsx b/ui/address/mud/AddressMudTable.pw.tsx
new file mode 100644
index 0000000000..a5e5b1116c
--- /dev/null
+++ b/ui/address/mud/AddressMudTable.pw.tsx
@@ -0,0 +1,59 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { mudRecords } from 'mocks/mud/mudTables';
+import { test, expect } from 'playwright/lib';
+
+import AddressMudTable from './AddressMudTable';
+
+const ADDRESS_HASH = 'hash';
+const TABLE_ID = '123';
+const hooksConfig = {
+  router: {
+    query: { hash: ADDRESS_HASH },
+  },
+};
+
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address_mud_records', mudRecords, { pathParams: { hash: ADDRESS_HASH, table_id: TABLE_ID } });
+
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
+      <AddressMudTable tableId={ TABLE_ID }/>
+    </Box>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('expanded view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address_mud_records', mudRecords, { pathParams: { hash: ADDRESS_HASH, table_id: TABLE_ID } });
+
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
+      <AddressMudTable tableId={ TABLE_ID }/>
+    </Box>,
+    { hooksConfig },
+  );
+
+  await component.locator('a[aria-label="show/hide columns"]').first().click();
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('empty +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse(
+    'address_mud_records',
+    { ...mudRecords, items: [] },
+    { pathParams: { hash: ADDRESS_HASH, table_id: TABLE_ID } });
+
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
+      <AddressMudTable tableId={ TABLE_ID }/>
+    </Box>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/mud/AddressMudTable.tsx b/ui/address/mud/AddressMudTable.tsx
new file mode 100644
index 0000000000..c1ebdf73d4
--- /dev/null
+++ b/ui/address/mud/AddressMudTable.tsx
@@ -0,0 +1,164 @@
+import { Box, HStack, Tag, TagCloseButton, chakra, useBoolean } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { AddressMudRecordsFilter, AddressMudRecordsSorting } from 'types/api/address';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import { apos, nbsp } from 'lib/html-entities';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import ContentLoader from 'ui/shared/ContentLoader';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import { getNextOrderValue } from 'ui/shared/sort/getNextSortValue';
+import getSortParamsFromQuery from 'ui/shared/sort/getSortParamsFromQuery';
+
+import AddressMudBreadcrumbs from './AddressMudBreadcrumbs';
+import AddressMudRecordsTable from './AddressMudRecordsTable';
+import { getNameTypeText, SORT_SEQUENCE } from './utils';
+
+const BREADCRUMBS_HEIGHT = 60;
+const FILTERS_HEIGHT = 44;
+
+type Props ={
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  isQueryEnabled?: boolean;
+  tableId: string;
+}
+
+type FilterKeys = keyof AddressMudRecordsFilter;
+
+const AddressMudTable = ({ scrollRef, tableId, isQueryEnabled = true }: Props) => {
+  const router = useRouter();
+  const [ sorting, setSorting ] =
+    React.useState<AddressMudRecordsSorting | undefined>(getSortParamsFromQuery<AddressMudRecordsSorting>(router.query, SORT_SEQUENCE));
+  const [ filters, setFilters ] = React.useState<AddressMudRecordsFilter>({});
+  const isMobile = useIsMobile();
+  const [ tableHasHorizontalScroll, setTableHasHorizontalScroll ] = useBoolean(isMobile);
+
+  const hash = getQueryParamString(router.query.hash);
+
+  const { data, isLoading, isError, pagination, onSortingChange } = useQueryWithPages({
+    resourceName: 'address_mud_records',
+    pathParams: { hash, table_id: tableId },
+    filters,
+    sorting,
+    scrollRef,
+    options: {
+      // no placeholder data because the structure of a table is unpredictable
+      enabled: isQueryEnabled,
+    },
+  });
+
+  const toggleSorting = React.useCallback((val: AddressMudRecordsSorting['sort']) => {
+    const newSorting = { sort: val, order: getNextOrderValue(sorting?.sort === val ? sorting.order : undefined) };
+    setSorting(newSorting);
+    onSortingChange(newSorting);
+  }, [ onSortingChange, sorting ]);
+
+  const onRemoveFilterClick = React.useCallback((key: FilterKeys) => () => {
+    setFilters(prev => {
+      const newFilters = { ...prev };
+      delete newFilters[key];
+      return newFilters;
+    });
+  }, []);
+
+  const hasActiveFilters = Object.values(filters).some(Boolean);
+
+  const actionBarHeight = React.useMemo(() => {
+    const heightWithoutFilters = pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : BREADCRUMBS_HEIGHT;
+
+    return hasActiveFilters ? heightWithoutFilters + FILTERS_HEIGHT : heightWithoutFilters;
+  }, [ pagination.isVisible, hasActiveFilters ]);
+
+  if (isLoading) {
+    return <ContentLoader/>;
+  }
+
+  const filtersTags = hasActiveFilters ? (
+    <HStack gap={ 3 } mb={ 1 } flexWrap="wrap">
+      { Object.entries(filters).map(([ key, value ]) => {
+        const index = key as FilterKeys === 'filter_key0' ? 0 : 1;
+        return (
+          <Tag display="inline-flex" key={ key } maxW="360px" colorScheme="blue">
+            <chakra.span color="text_secondary" >{
+              getNameTypeText(data?.schema.key_names[index] || '', data?.schema.key_types[index] || '') }
+            </chakra.span>
+            <chakra.span color="text" overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">
+              { nbsp }
+              { value }
+            </chakra.span>
+            <TagCloseButton onClick={ onRemoveFilterClick(key as FilterKeys) }/>
+          </Tag>
+        );
+      }) }
+    </HStack>
+  ) : null;
+
+  const breadcrumbs = data ? (
+    <AddressMudBreadcrumbs
+      hash={ hash }
+      tableId={ tableId }
+      tableName={ data?.table.table_full_name }
+      scrollRef={ scrollRef }
+      mb={ hasActiveFilters ? 4 : 0 }
+    />
+  ) : null;
+
+  const actionBar = (!isMobile || hasActiveFilters || pagination.isVisible) && (
+    <ActionBar mt={ -6 } showShadow={ tableHasHorizontalScroll } justifyContent="space-between" alignItems={ hasActiveFilters ? 'start' : 'center' }>
+      <Box>
+        { !isMobile && breadcrumbs }
+        { filtersTags }
+      </Box>
+      <Pagination ml={{ base: 0, lg: 8 }} { ...pagination }/>
+    </ActionBar>
+  );
+
+  const content = data?.items ? (
+    <AddressMudRecordsTable
+      data={ data }
+      top={ actionBarHeight }
+      sorting={ sorting }
+      toggleSorting={ toggleSorting }
+      setFilters={ setFilters }
+      filters={ filters }
+      toggleTableHasHorizontalScroll={ setTableHasHorizontalScroll.toggle }
+      scrollRef={ scrollRef }
+      hash={ hash }
+    />
+  ) : null;
+
+  const emptyText = (
+    <>
+      <chakra.span>There are no records for </chakra.span>
+      { data?.table.table_full_name ? <chakra.span fontWeight={ 600 }>{ data?.table.table_full_name }</chakra.span> : 'this table' }
+    </>
+  );
+
+  return (
+    <>
+      { isMobile && (
+        <Box mb={ 6 }>{ breadcrumbs }</Box>
+      ) }
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText={ emptyText }
+        filterProps={{
+          emptyFilteredText: `Couldn${ apos }t find records that match your filter query.`,
+          hasActiveFilters: Object.values(filters).some(Boolean),
+        }}
+        content={ content }
+        actionBar={ actionBar }
+        showActionBarIfEmpty={ !isMobile }
+        mt={ data?.items.length ? 0 : 2 }
+      />
+    </>
+  );
+};
+
+export default AddressMudTable;
diff --git a/ui/address/mud/AddressMudTables.pw.tsx b/ui/address/mud/AddressMudTables.pw.tsx
new file mode 100644
index 0000000000..b9bdbabd5f
--- /dev/null
+++ b/ui/address/mud/AddressMudTables.pw.tsx
@@ -0,0 +1,42 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { mudTables } from 'mocks/mud/mudTables';
+import { test, expect } from 'playwright/lib';
+
+import AddressMudTables from './AddressMudTables';
+
+const ADDRESS_HASH = 'hash';
+const hooksConfig = {
+  router: {
+    query: { hash: ADDRESS_HASH, q: 'o' },
+  },
+};
+
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address_mud_tables', mudTables, { pathParams: { hash: ADDRESS_HASH }, queryParams: { q: 'o' } });
+
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
+      <AddressMudTables/>
+    </Box>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('with schema opened +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address_mud_tables', mudTables, { pathParams: { hash: ADDRESS_HASH }, queryParams: { q: 'o' } });
+
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
+      <AddressMudTables/>
+    </Box>,
+    { hooksConfig },
+  );
+
+  await component.locator('div[aria-label="View schema"]').first().click();
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/address/mud/AddressMudTables.tsx b/ui/address/mud/AddressMudTables.tsx
new file mode 100644
index 0000000000..50c2a6b70b
--- /dev/null
+++ b/ui/address/mud/AddressMudTables.tsx
@@ -0,0 +1,107 @@
+import { Hide, Show } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import useDebounce from 'lib/hooks/useDebounce';
+import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
+import { apos } from 'lib/html-entities';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { ADDRESS_MUD_TABLE_ITEM } from 'stubs/address';
+import { generateListStub } from 'stubs/utils';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import FilterInput from 'ui/shared/filters/FilterInput';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+
+import AddressMudTablesListItem from './AddressMudTablesListItem';
+import AddressMudTablesTable from './AddressMudTablesTable';
+
+type Props ={
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  isQueryEnabled?: boolean;
+}
+
+const AddressMudTables = ({ scrollRef, isQueryEnabled = true }: Props) => {
+  const router = useRouter();
+
+  const hash = getQueryParamString(router.query.hash);
+  const q = getQueryParamString(router.query.q);
+  const [ searchTerm, setSearchTerm ] = React.useState<string>(q || '');
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+
+  const { data, isPlaceholderData, isError, pagination } = useQueryWithPages({
+    resourceName: 'address_mud_tables',
+    pathParams: { hash },
+    filters: { q: debouncedSearchTerm },
+    scrollRef,
+    options: {
+      enabled: isQueryEnabled,
+      placeholderData: generateListStub<'address_mud_tables'>(ADDRESS_MUD_TABLE_ITEM, 3, { next_page_params: {
+        items_count: 50,
+        table_id: '1',
+      } }),
+    },
+  });
+
+  const isInitialLoading = useIsInitialLoading(isPlaceholderData);
+
+  const searchInput = (
+    <FilterInput
+      w={{ base: '100%', lg: '360px' }}
+      minW={{ base: 'auto', lg: '250px' }}
+      size="xs"
+      onChange={ setSearchTerm }
+      placeholder="Search by name, namespace or table ID..."
+      initialValue={ searchTerm }
+      isLoading={ isInitialLoading }
+    />
+  );
+
+  const actionBar = (
+    <ActionBar mt={ -6 } showShadow justifyContent="space-between">
+      { searchInput }
+      <Pagination ml={{ base: 0, lg: 8 }} { ...pagination }/>
+    </ActionBar>
+  );
+
+  const content = data?.items ? (
+    <>
+      <Hide below="lg" ssr={ false }>
+        <AddressMudTablesTable
+          items={ data.items }
+          isLoading={ isPlaceholderData }
+          top={ ACTION_BAR_HEIGHT_DESKTOP }
+          scrollRef={ scrollRef }
+          hash={ hash }
+        />
+      </Hide>
+      <Show below="lg" ssr={ false }>
+        { data.items.map((item, index) => (
+          <AddressMudTablesListItem
+            key={ item.table.table_id + (isPlaceholderData ? String(index) : '') }
+            item={ item }
+            isLoading={ isPlaceholderData }
+            hash={ hash }
+          />
+        )) }
+      </Show>
+    </>
+  ) : null;
+
+  return (
+    <DataListDisplay
+      isError={ isError }
+      items={ data?.items }
+      emptyText="There are no tables for this address."
+      filterProps={{
+        emptyFilteredText: `Couldn${ apos }t find tables that match your filter query.`,
+        hasActiveFilters: Boolean(searchTerm),
+      }}
+      content={ content }
+      actionBar={ actionBar }
+    />
+  );
+};
+
+export default AddressMudTables;
diff --git a/ui/address/mud/AddressMudTablesListItem.tsx b/ui/address/mud/AddressMudTablesListItem.tsx
new file mode 100644
index 0000000000..e3e5aa74bd
--- /dev/null
+++ b/ui/address/mud/AddressMudTablesListItem.tsx
@@ -0,0 +1,114 @@
+import { Divider, Text, Skeleton, useBoolean, Flex, Link, VStack, chakra, Box, Grid, GridItem } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { AddressMudTableItem } from 'types/api/address';
+
+import { route } from 'nextjs-routes';
+
+import Tag from 'ui/shared/chakra/Tag';
+import HashStringShorten from 'ui/shared/HashStringShorten';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+
+type Props = {
+  item: AddressMudTableItem;
+  isLoading: boolean;
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  hash: string;
+};
+
+const AddressMudTablesListItem = ({ item, isLoading, scrollRef, hash }: Props) => {
+  const [ isOpened, setIsOpened ] = useBoolean(false);
+
+  const router = useRouter();
+
+  const onTableClick = React.useCallback((e: React.MouseEvent) => {
+    if (e.metaKey || e.ctrlKey) {
+      // Allow opening in a new tab/window with right-click or ctrl/cmd+click
+      return;
+    }
+
+    e.preventDefault();
+
+    const tableId = e.currentTarget.getAttribute('data-id');
+    if (tableId) {
+      router.push(
+        { pathname: '/address/[hash]', query: { hash, tab: 'mud', table_id: tableId } },
+        undefined,
+        { shallow: true },
+      );
+    }
+
+    scrollRef?.current?.scrollIntoView();
+  }, [ router, scrollRef, hash ]);
+
+  return (
+    <ListItemMobile rowGap={ 3 } fontSize="sm" py={ 3 }>
+      <Flex w="100%">
+        <Skeleton isLoaded={ !isLoading }>
+          <Link display="block">
+            <IconSvg
+              name="arrows/east-mini"
+              transform={ isOpened ? 'rotate(270deg)' : 'rotate(180deg)' }
+              boxSize={ 6 }
+              cursor="pointer"
+              onClick={ setIsOpened.toggle }
+              transitionDuration="faster"
+              aria-label="View schema"
+            />
+          </Link>
+        </Skeleton>
+        <Box flexGrow="1">
+          <Flex justifyContent="space-between" height={ 6 } alignItems="center" mb={ 3 }>
+            <Skeleton isLoaded={ !isLoading }>
+              <LinkInternal
+                onClick={ onTableClick }
+                data-id={ item.table.table_id }
+                fontWeight={ 500 }
+                href={ route({ pathname: '/address/[hash]', query: { hash, tab: 'mud', table_id: item.table.table_id } }) }
+              >
+                { item.table.table_full_name }
+              </LinkInternal>
+            </Skeleton>
+            <Skeleton isLoaded={ !isLoading } color="text_secondary">
+              { item.table.table_type }
+            </Skeleton>
+          </Flex>
+          <Skeleton isLoaded={ !isLoading } color="text_secondary">
+            <HashStringShorten hash={ item.table.table_id } type="long"/>
+          </Skeleton>
+        </Box>
+      </Flex>
+
+      { isOpened && (
+        <Grid templateColumns="48px 1fr" gap="8px 24px" fontWeight={ 500 } w="100%">
+          { Boolean(item.schema.key_names.length) && (
+            <>
+              <Text lineHeight="24px">Key</Text>
+              <VStack gap={ 1 } alignItems="start">
+                { item.schema.key_names.map((name, index) => (
+                  <Tag key={ name }>
+                    <chakra.span fontWeight={ 700 }>{ item.schema.key_types[index] }</chakra.span> { name }
+                  </Tag>
+                )) }
+              </VStack>
+            </>
+          ) }
+          <GridItem colSpan={ 2 }><Divider/></GridItem>
+          <Text lineHeight="24px">Value</Text>
+          <VStack gap={ 1 } alignItems="start">
+            { item.schema.value_names.map((name, index) => (
+              <Text key={ name }>
+                <chakra.span fontWeight={ 700 }>{ item.schema.value_types[index] }</chakra.span> { name }
+              </Text>
+            )) }
+          </VStack>
+        </Grid>
+      ) }
+    </ListItemMobile>
+  );
+};
+
+export default React.memo(AddressMudTablesListItem);
diff --git a/ui/address/mud/AddressMudTablesTable.tsx b/ui/address/mud/AddressMudTablesTable.tsx
new file mode 100644
index 0000000000..3ff787edd6
--- /dev/null
+++ b/ui/address/mud/AddressMudTablesTable.tsx
@@ -0,0 +1,45 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressMudTables } from 'types/api/address';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import AddressMudTablesTableItem from './AddressMudTablesTableItem';
+
+type Props = {
+  items: AddressMudTables['items'];
+  isLoading: boolean;
+  top: number;
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  hash: string;
+}
+
+//sorry for the naming
+const AddressMudTablesTable = ({ items, isLoading, top, scrollRef, hash }: Props) => {
+  return (
+    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }}>
+      <Thead top={ top }>
+        <Tr>
+          <Th width="24px"></Th>
+          <Th>Full name</Th>
+          <Th>Table ID</Th>
+          <Th>Type</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <AddressMudTablesTableItem
+            key={ item.table.table_id + (isLoading ? String(index) : '') }
+            item={ item }
+            isLoading={ isLoading }
+            scrollRef={ scrollRef }
+            hash={ hash }
+          />
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default AddressMudTablesTable;
diff --git a/ui/address/mud/AddressMudTablesTableItem.tsx b/ui/address/mud/AddressMudTablesTableItem.tsx
new file mode 100644
index 0000000000..66d72a2a48
--- /dev/null
+++ b/ui/address/mud/AddressMudTablesTableItem.tsx
@@ -0,0 +1,124 @@
+import { Td, Tr, Text, Skeleton, useBoolean, Link, Table, VStack, chakra } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { AddressMudTableItem } from 'types/api/address';
+
+import { route } from 'nextjs-routes';
+
+import Tag from 'ui/shared/chakra/Tag';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+type Props = {
+  item: AddressMudTableItem;
+  isLoading: boolean;
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  hash: string;
+};
+
+const AddressMudTablesTableItem = ({ item, isLoading, scrollRef, hash }: Props) => {
+  const [ isOpened, setIsOpened ] = useBoolean(false);
+
+  const router = useRouter();
+
+  const onTableClick = React.useCallback((e: React.MouseEvent) => {
+    if (e.metaKey || e.ctrlKey) {
+      // Allow opening in a new tab/window with right-click or ctrl/cmd+click
+      return;
+    }
+
+    e.preventDefault();
+
+    const tableId = e.currentTarget.getAttribute('data-id');
+    if (tableId) {
+      router.push(
+        { pathname: '/address/[hash]', query: { hash, tab: 'mud', table_id: tableId } },
+        undefined,
+        { shallow: true },
+      );
+    }
+    scrollRef?.current?.scrollIntoView();
+  }, [ router, scrollRef, hash ]);
+
+  return (
+    <>
+      <Tr borderBottomStyle={ isOpened ? 'hidden' : 'unset' }>
+        <Td verticalAlign="middle">
+          <Skeleton isLoaded={ !isLoading }>
+            <Link display="block">
+              <IconSvg
+                name="arrows/east-mini"
+                transform={ isOpened ? 'rotate(270deg)' : 'rotate(180deg)' }
+                boxSize={ 6 }
+                cursor="pointer"
+                onClick={ setIsOpened.toggle }
+                transitionDuration="faster"
+                aria-label="View schema"
+              />
+            </Link>
+          </Skeleton>
+        </Td>
+        <Td verticalAlign="middle">
+          <Skeleton isLoaded={ !isLoading }>
+            <LinkInternal
+              href={ route({ pathname: '/address/[hash]', query: { hash, tab: 'mud', table_id: item.table.table_id } }) }
+              data-id={ item.table.table_id }
+              onClick={ onTableClick }
+              fontWeight={ 700 }
+            >
+              { item.table.table_full_name }
+            </LinkInternal>
+          </Skeleton>
+        </Td>
+        <Td verticalAlign="middle">
+          <Skeleton isLoaded={ !isLoading }>
+            { item.table.table_id }
+          </Skeleton>
+        </Td>
+        <Td verticalAlign="middle">
+          <Skeleton isLoaded={ !isLoading }>
+            { item.table.table_type }
+          </Skeleton>
+        </Td>
+      </Tr>
+      { isOpened && (
+        <Tr>
+          <Td pt={ 0 }></Td>
+          <Td colSpan={ 3 } pt={ 0 }>
+            <Table>
+              { Boolean(item.schema.key_names.length) && (
+                <Tr>
+                  <Td width="80px" fontSize="sm" fontWeight={ 600 } py={ 2 } pl={ 0 } verticalAlign="middle">Key</Td>
+                  <Td py={ 2 }>
+                    <VStack gap={ 1 } alignItems="start">
+                      { item.schema.key_names.map((name, index) => (
+                        <Tag key={ name }>
+                          <chakra.span fontWeight={ 700 }>{ item.schema.key_types[index] }</chakra.span> { name }
+                        </Tag>
+                      )) }
+                    </VStack>
+                  </Td>
+                </Tr>
+              ) }
+              <Tr borderBottomStyle="hidden">
+                <Td width="80px" fontSize="sm" fontWeight={ 600 } py={ 2 } pl={ 0 } >Value</Td>
+                <Td fontSize="sm" py={ 2 }>
+                  <VStack gap={ 1 } alignItems="start">
+                    { item.schema.value_names.map((name, index) => (
+                      <Text key={ name }>
+                        <chakra.span fontWeight={ 700 }>{ item.schema.value_types[index] }</chakra.span> { name }
+                      </Text>
+                    )) }
+                  </VStack>
+                </Td>
+              </Tr>
+            </Table>
+          </Td>
+        </Tr>
+      ) }
+    </>
+  );
+};
+
+export default React.memo(AddressMudTablesTableItem);
diff --git a/ui/address/mud/__screenshots__/AddressMudRecord.pw.tsx_default_base-view-1.png b/ui/address/mud/__screenshots__/AddressMudRecord.pw.tsx_default_base-view-1.png
new file mode 100644
index 0000000000..55f2e12222
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudRecord.pw.tsx_default_base-view-1.png differ
diff --git a/ui/address/mud/__screenshots__/AddressMudRecord.pw.tsx_default_mobile-base-view-1.png b/ui/address/mud/__screenshots__/AddressMudRecord.pw.tsx_default_mobile-base-view-1.png
new file mode 100644
index 0000000000..f9ff22f598
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudRecord.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_default_base-view-mobile-1.png b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..071efa92e1
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_default_empty-mobile-1.png b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_default_empty-mobile-1.png
new file mode 100644
index 0000000000..aa2bd1d9c5
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_default_empty-mobile-1.png differ
diff --git a/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_default_expanded-view-mobile-1.png b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_default_expanded-view-mobile-1.png
new file mode 100644
index 0000000000..89376e122d
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_default_expanded-view-mobile-1.png differ
diff --git a/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_mobile_base-view-mobile-1.png b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..3ea36f0988
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_mobile_empty-mobile-1.png b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_mobile_empty-mobile-1.png
new file mode 100644
index 0000000000..f70838b411
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_mobile_empty-mobile-1.png differ
diff --git a/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_mobile_expanded-view-mobile-1.png b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_mobile_expanded-view-mobile-1.png
new file mode 100644
index 0000000000..648c68ac72
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudTable.pw.tsx_mobile_expanded-view-mobile-1.png differ
diff --git a/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_default_base-view-mobile-1.png b/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..47c26ad9ba
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_default_with-schema-opened-mobile-1.png b/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_default_with-schema-opened-mobile-1.png
new file mode 100644
index 0000000000..7d81eab310
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_default_with-schema-opened-mobile-1.png differ
diff --git a/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_mobile_base-view-mobile-1.png b/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..faabaccd35
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_mobile_with-schema-opened-mobile-1.png b/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_mobile_with-schema-opened-mobile-1.png
new file mode 100644
index 0000000000..67988657b1
Binary files /dev/null and b/ui/address/mud/__screenshots__/AddressMudTables.pw.tsx_mobile_with-schema-opened-mobile-1.png differ
diff --git a/ui/address/mud/utils.ts b/ui/address/mud/utils.ts
new file mode 100644
index 0000000000..259926daac
--- /dev/null
+++ b/ui/address/mud/utils.ts
@@ -0,0 +1,18 @@
+import capitalizeFirstLetter from 'lib/capitalizeFirstLetter';
+
+export const SORT_SEQUENCE: Record<'key0' | 'key1', Array<'desc' | 'asc' | undefined>> = {
+  key0: [ 'desc', 'asc', undefined ],
+  key1: [ 'desc', 'asc', undefined ],
+};
+
+export const getNameTypeText = (name: string, type: string) => {
+  return capitalizeFirstLetter(name) + ' (' + type + ')';
+};
+
+export const getValueString = (value: string | Array<string>) => {
+  if (Array.isArray(value)) {
+    return value.join(', ');
+  }
+
+  return value.toString();
+};
diff --git a/ui/address/tokenSelect/TokenSelect.pw.tsx b/ui/address/tokenSelect/TokenSelect.pw.tsx
index e58975e540..26b50461e8 100644
--- a/ui/address/tokenSelect/TokenSelect.pw.tsx
+++ b/ui/address/tokenSelect/TokenSelect.pw.tsx
@@ -1,70 +1,39 @@
 import { Flex } from '@chakra-ui/react';
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import * as addressMock from 'mocks/address/address';
 import * as tokensMock from 'mocks/address/tokens';
 import { tokenInfoERC20a } from 'mocks/tokens/tokenInfo';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect, devices } from 'playwright/lib';
 import MockAddressPage from 'ui/address/testUtils/MockAddressPage';
 
 import TokenSelect from './TokenSelect';
 
 const ASSET_URL = tokenInfoERC20a.icon_url as string;
-const TOKENS_ERC20_API_URL = buildApiUrl('address_tokens', { hash: '1' }) + '?type=ERC-20';
-const TOKENS_ERC721_API_URL = buildApiUrl('address_tokens', { hash: '1' }) + '?type=ERC-721';
-const TOKENS_ER1155_API_URL = buildApiUrl('address_tokens', { hash: '1' }) + '?type=ERC-1155';
-const TOKENS_ER404_API_URL = buildApiUrl('address_tokens', { hash: '1' }) + '?type=ERC-404';
-const ADDRESS_API_URL = buildApiUrl('address', { hash: '1' });
+const ADDRESS_HASH = addressMock.hash;
 const hooksConfig = {
   router: {
-    query: { hash: '1' },
+    query: { hash: ADDRESS_HASH },
   },
 };
 const CLIPPING_AREA = { x: 0, y: 0, width: 360, height: 500 };
 
-const test = base.extend({
-  page: async({ page }, use) => {
-    await page.route(ASSET_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-    await page.route(ADDRESS_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ hash: '1' }),
-    }), { times: 1 });
-    await page.route(TOKENS_ERC20_API_URL, async(route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(tokensMock.erc20List),
-    }), { times: 1 });
-    await page.route(TOKENS_ERC721_API_URL, async(route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(tokensMock.erc721List),
-    }), { times: 1 });
-    await page.route(TOKENS_ER1155_API_URL, async(route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(tokensMock.erc1155List),
-    }), { times: 1 });
-    await page.route(TOKENS_ER404_API_URL, async(route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(tokensMock.erc404List),
-    }), { times: 1 });
-
-    use(page);
-  },
+test.beforeEach(async({ mockApiResponse, mockAssetResponse }) => {
+  await mockAssetResponse(ASSET_URL, './playwright/mocks/image_s.jpg');
+  await mockApiResponse('address', addressMock.validator, { pathParams: { hash: ADDRESS_HASH }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc20List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-20' }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc721List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-721' }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc1155List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-1155' }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc404List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' }, times: 1 });
 });
 
-test('base view +@dark-mode', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <MockAddressPage>
-        <Flex>
-          <TokenSelect/>
-        </Flex>
-      </MockAddressPage>
-    </TestApp>,
+test('base view +@dark-mode', async({ render, page }) => {
+  await render(
+    <MockAddressPage>
+      <Flex>
+        <TokenSelect/>
+      </Flex>
+    </MockAddressPage>,
     { hooksConfig },
   );
 
@@ -81,15 +50,13 @@ test('base view +@dark-mode', async({ mount, page }) => {
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  test('base view', async({ mount, page }) => {
-    await mount(
-      <TestApp>
-        <MockAddressPage>
-          <Flex>
-            <TokenSelect/>
-          </Flex>
-        </MockAddressPage>
-      </TestApp>,
+  test('base view', async({ render, page }) => {
+    await render(
+      <MockAddressPage>
+        <Flex>
+          <TokenSelect/>
+        </Flex>
+      </MockAddressPage>,
       { hooksConfig },
     );
 
@@ -100,15 +67,13 @@ test.describe('mobile', () => {
   });
 });
 
-test('sort', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <MockAddressPage>
-        <Flex>
-          <TokenSelect/>
-        </Flex>
-      </MockAddressPage>
-    </TestApp>,
+test('sort', async({ render, page }) => {
+  await render(
+    <MockAddressPage>
+      <Flex>
+        <TokenSelect/>
+      </Flex>
+    </MockAddressPage>,
     { hooksConfig },
   );
   await page.getByRole('button', { name: /select/i }).click();
@@ -123,15 +88,13 @@ test('sort', async({ mount, page }) => {
   await expect(page).toHaveScreenshot({ clip: CLIPPING_AREA });
 });
 
-test('filter', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <MockAddressPage>
-        <Flex>
-          <TokenSelect/>
-        </Flex>
-      </MockAddressPage>
-    </TestApp>,
+test('filter', async({ render, page }) => {
+  await render(
+    <MockAddressPage>
+      <Flex>
+        <TokenSelect/>
+      </Flex>
+    </MockAddressPage>,
     { hooksConfig },
   );
   await page.getByRole('button', { name: /select/i }).click();
@@ -140,42 +103,24 @@ test('filter', async({ mount, page }) => {
   await expect(page).toHaveScreenshot({ clip: CLIPPING_AREA });
 });
 
-base('long values', async({ mount, page }) => {
-  await page.route(ASSET_URL, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
-  await page.route(ADDRESS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ hash: '1' }),
-  }), { times: 1 });
-  await page.route(TOKENS_ERC20_API_URL, async(route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ items: [ tokensMock.erc20LongSymbol, tokensMock.erc20BigAmount ] }),
-  }), { times: 1 });
-  await page.route(TOKENS_ERC721_API_URL, async(route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ items: [ tokensMock.erc721LongSymbol ] }),
-  }), { times: 1 });
-  await page.route(TOKENS_ER1155_API_URL, async(route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ items: [ tokensMock.erc1155LongId ] }),
-  }), { times: 1 });
-  await page.route(TOKENS_ER404_API_URL, async(route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(tokensMock.erc404List),
-  }), { times: 1 });
-
-  await mount(
-    <TestApp>
-      <MockAddressPage>
-        <Flex>
-          <TokenSelect/>
-        </Flex>
-      </MockAddressPage>
-    </TestApp>,
+test('long values', async({ render, page, mockApiResponse }) => {
+  await mockApiResponse('address_tokens', {
+    items: [ tokensMock.erc20LongSymbol, tokensMock.erc20BigAmount ], next_page_params: null,
+  }, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-20' }, times: 1 });
+  await mockApiResponse('address_tokens', {
+    items: [ tokensMock.erc721LongSymbol ], next_page_params: null,
+  }, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-721' }, times: 1 });
+  await mockApiResponse('address_tokens', {
+    items: [ tokensMock.erc1155LongId ], next_page_params: null,
+  }, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-1155' }, times: 1 });
+  await mockApiResponse('address_tokens', tokensMock.erc404List, { pathParams: { hash: ADDRESS_HASH }, queryParams: { type: 'ERC-404' }, times: 1 });
+
+  await render(
+    <MockAddressPage>
+      <Flex>
+        <TokenSelect/>
+      </Flex>
+    </MockAddressPage>,
     { hooksConfig },
   );
   await page.getByRole('button', { name: /select/i }).click();
diff --git a/ui/address/tokenSelect/TokenSelect.tsx b/ui/address/tokenSelect/TokenSelect.tsx
index 3cada7e253..0bc02b17c6 100644
--- a/ui/address/tokenSelect/TokenSelect.tsx
+++ b/ui/address/tokenSelect/TokenSelect.tsx
@@ -55,7 +55,7 @@ const TokenSelect = ({ onClick }: Props) => {
   }
 
   return (
-    <Flex columnGap={ 3 } mt={{ base: '6px', lg: 0 }}>
+    <Flex columnGap={ 3 } mt={{ base: 1, lg: 0 }}>
       { isMobile ?
         <TokenSelectMobile data={ data } isLoading={ tokensIsFetching === 1 }/> :
         <TokenSelectDesktop data={ data } isLoading={ tokensIsFetching === 1 }/>
diff --git a/ui/address/tokenSelect/TokenSelectButton.tsx b/ui/address/tokenSelect/TokenSelectButton.tsx
index 773c06569c..9662b20cc9 100644
--- a/ui/address/tokenSelect/TokenSelectButton.tsx
+++ b/ui/address/tokenSelect/TokenSelectButton.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Skeleton, Text, useColorModeValue } from '@chakra-ui/react';
+import { Box, Button, Skeleton, chakra, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import type { FormattedData } from './types';
@@ -39,20 +39,21 @@ const TokenSelectButton = ({ isOpen, isLoading, onClick, data }: Props, ref: Rea
         variant="outline"
         colorScheme="gray"
         onClick={ handleClick }
+        isActive={ isOpen }
         aria-label="Token select"
       >
         <IconSvg name="tokens" boxSize={ 4 } mr={ 2 }/>
-        <Text fontWeight={ 600 }>{ prefix }{ num }</Text>
-        <Text
+        <chakra.span fontWeight={ 600 }>{ prefix }{ num }</chakra.span>
+        <chakra.span
           whiteSpace="pre"
-          variant="secondary"
+          color="text_secondary"
           fontWeight={ 400 }
           maxW={{ base: 'calc(100vw - 230px)', lg: '500px' }}
           overflow="hidden"
           textOverflow="ellipsis"
         >
           { space }({ prefix }${ usd.toFormat(2) })
-        </Text>
+        </chakra.span>
         <IconSvg name="arrows/east-mini" transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' } transitionDuration="faster" boxSize={ 5 } ml={ 3 }/>
       </Button>
       { isLoading && !isOpen && <Skeleton h="100%" w="100%" position="absolute" top={ 0 } left={ 0 } bgColor={ skeletonBgColor } borderRadius="base"/> }
diff --git a/ui/address/tokenSelect/TokenSelectDesktop.tsx b/ui/address/tokenSelect/TokenSelectDesktop.tsx
index 858bb5a443..c354866114 100644
--- a/ui/address/tokenSelect/TokenSelectDesktop.tsx
+++ b/ui/address/tokenSelect/TokenSelectDesktop.tsx
@@ -1,8 +1,10 @@
-import { Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
+import { PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 
 import type { FormattedData } from './types';
 
+import Popover from 'ui/shared/chakra/Popover';
+
 import TokenSelectButton from './TokenSelectButton';
 import TokenSelectMenu from './TokenSelectMenu';
 import useTokenSelect from './useTokenSelect';
diff --git a/ui/address/tokenSelect/TokenSelectItem.tsx b/ui/address/tokenSelect/TokenSelectItem.tsx
index fc7d6cde27..94d12f24a5 100644
--- a/ui/address/tokenSelect/TokenSelectItem.tsx
+++ b/ui/address/tokenSelect/TokenSelectItem.tsx
@@ -6,7 +6,7 @@ import { route } from 'nextjs-routes';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
 import type { TokenEnhancedData } from '../utils/tokenUtils';
diff --git a/ui/address/tokenSelect/TokenSelectMenu.tsx b/ui/address/tokenSelect/TokenSelectMenu.tsx
index 22f87950ed..41c8129d11 100644
--- a/ui/address/tokenSelect/TokenSelectMenu.tsx
+++ b/ui/address/tokenSelect/TokenSelectMenu.tsx
@@ -6,6 +6,7 @@ import React from 'react';
 import type { FormattedData } from './types';
 import type { TokenType } from 'types/api/token';
 
+import { getTokenTypeName } from 'lib/token/tokenTypes';
 import IconSvg from 'ui/shared/IconSvg';
 
 import type { Sort } from '../utils/tokenUtils';
@@ -24,7 +25,6 @@ interface Props {
 
 const TokenSelectMenu = ({ erc20sort, erc1155sort, erc404sort, filteredData, onInputChange, onSortClick, searchTerm }: Props) => {
   const searchIconColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
-  const inputBorderColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.200');
 
   const hasFilteredResult = _sumBy(Object.values(filteredData), ({ items }) => items.length) > 0;
 
@@ -39,7 +39,7 @@ const TokenSelectMenu = ({ erc20sort, erc1155sort, erc404sort, filteredData, onI
           placeholder="Search by token name"
           ml="1px"
           onChange={ onInputChange }
-          borderColor={ inputBorderColor }
+          bgColor="dialog_bg"
         />
       </InputGroup>
       <Flex flexDir="column" rowGap={ 6 }>
@@ -74,9 +74,11 @@ const TokenSelectMenu = ({ erc20sort, erc1155sort, erc404sort, filteredData, onI
           return (
             <Box key={ type }>
               <Flex justifyContent="space-between">
-                <Text mb={ 3 } color="gray.500" fontWeight={ 600 } fontSize="sm">{ type } tokens ({ numPrefix }{ tokenInfo.items.length })</Text>
+                <Text mb={ 3 } color="gray.500" fontWeight={ 600 } fontSize="sm">
+                  { getTokenTypeName(type) } tokens ({ numPrefix }{ tokenInfo.items.length })
+                </Text>
                 { hasSort && (
-                  <Link data-type={ type } onClick={ onSortClick } aria-label={ `Sort ${ type } tokens` }>
+                  <Link data-type={ type } onClick={ onSortClick } aria-label={ `Sort ${ getTokenTypeName(type) } tokens` }>
                     <IconSvg name="arrows/east" boxSize={ 5 } transform={ arrowTransform } transitionDuration="faster"/>
                   </Link>
                 ) }
diff --git a/ui/address/tokens/AddressCollections.tsx b/ui/address/tokens/AddressCollections.tsx
index 2be76c5c87..16b4202508 100644
--- a/ui/address/tokens/AddressCollections.tsx
+++ b/ui/address/tokens/AddressCollections.tsx
@@ -8,7 +8,7 @@ import { apos } from 'lib/html-entities';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import NftFallback from 'ui/shared/nft/NftFallback';
 import Pagination from 'ui/shared/pagination/Pagination';
 import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
@@ -64,7 +64,7 @@ const AddressCollections = ({ collectionsQuery, address, hasActiveFilters }: Pro
         </Flex>
         <Grid
           w="100%"
-          mb={ 7 }
+          mb={ 6 }
           columnGap={{ base: 3, lg: 6 }}
           rowGap={{ base: 3, lg: 6 }}
           gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }}
diff --git a/ui/address/tokens/ERC20TokensTableItem.tsx b/ui/address/tokens/ERC20TokensTableItem.tsx
index d1d8457457..8f1f491db9 100644
--- a/ui/address/tokens/ERC20TokensTableItem.tsx
+++ b/ui/address/tokens/ERC20TokensTableItem.tsx
@@ -23,11 +23,7 @@ const ERC20TokensTableItem = ({
 
   return (
     <Tr
-      sx={{
-        '&:hover [aria-label="Add token to wallet"]': {
-          opacity: 1,
-        },
-      }}
+      role="group"
     >
       <Td verticalAlign="middle">
         <TokenEntity
@@ -46,7 +42,7 @@ const ERC20TokensTableItem = ({
             truncation="constant"
             noIcon
           />
-          <AddressAddToWallet token={ token } ml={ 4 } isLoading={ isLoading } opacity="0"/>
+          <AddressAddToWallet token={ token } ml={ 4 } isLoading={ isLoading } opacity="0" _groupHover={{ opacity: 1 }}/>
         </Flex>
       </Td>
       <Td isNumeric verticalAlign="middle">
diff --git a/ui/address/tokens/NFTItem.tsx b/ui/address/tokens/NFTItem.tsx
index 9ed44b2248..12c43d015c 100644
--- a/ui/address/tokens/NFTItem.tsx
+++ b/ui/address/tokens/NFTItem.tsx
@@ -6,6 +6,7 @@ import type { AddressNFT } from 'types/api/address';
 import { route } from 'nextjs-routes';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
+import { getTokenTypeName } from 'lib/token/tokenTypes';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import NftMedia from 'ui/shared/nft/NftMedia';
@@ -23,7 +24,7 @@ const NFTItem = ({ token, value, isLoading, withTokenLink, ...tokenInstance }: P
   return (
     <NFTItemContainer position="relative">
       <Skeleton isLoaded={ !isLoading }>
-        <LightMode><Tag background="gray.50" zIndex={ 1 } position="absolute" top="18px" right="18px">{ token.type }</Tag></LightMode>
+        <LightMode><Tag background="gray.50" zIndex={ 1 } position="absolute" top="18px" right="18px">{ getTokenTypeName(token.type) }</Tag></LightMode>
       </Skeleton>
       <Link href={ isLoading ? undefined : tokenInstanceLink }>
         <NftMedia
@@ -31,6 +32,7 @@ const NFTItem = ({ token, value, isLoading, withTokenLink, ...tokenInstance }: P
           animationUrl={ tokenInstance?.animation_url ?? null }
           imageUrl={ tokenInstance?.image_url ?? null }
           isLoading={ isLoading }
+          autoplayVideo={ false }
         />
       </Link>
       <Flex justifyContent="space-between" w="100%" flexWrap="wrap">
diff --git a/ui/address/tokens/TokenBalances.tsx b/ui/address/tokens/TokenBalances.tsx
index 76f8ef75e5..7c4f5055fc 100644
--- a/ui/address/tokens/TokenBalances.tsx
+++ b/ui/address/tokens/TokenBalances.tsx
@@ -8,6 +8,8 @@ import { ZERO } from 'lib/consts';
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { currencyUnits } from 'lib/units';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import IconSvg from 'ui/shared/IconSvg';
+import NativeTokenIcon from 'ui/shared/NativeTokenIcon';
 
 import { getTokensTotalInfo } from '../utils/tokenUtils';
 import useFetchTokens from '../utils/useFetchTokens';
@@ -42,28 +44,30 @@ const TokenBalances = () => {
   const prefix = tokensInfo.isOverflow ? '>' : '';
   const totalUsd = nativeUsd.plus(tokensInfo.usd);
   const tokensNumText = tokensInfo.num > 0 ?
-    ` | ${ prefix }${ tokensInfo.num } ${ tokensInfo.num > 1 ? 'tokens' : 'token' }` :
-    '';
+    `${ prefix }${ tokensInfo.num } ${ tokensInfo.num > 1 ? 'tokens' : 'token' }` :
+    '0';
 
   return (
     <Flex columnGap={ 3 } rowGap={ 3 } mt={{ base: '6px', lg: 0 }} flexDirection={{ base: 'column', lg: 'row' }}>
       <TokenBalancesItem
         name="Net Worth"
-        value={ addressData?.exchange_rate ? `${ prefix }$${ totalUsd.toFormat(2) } USD` : 'N/A' }
+        value={ addressData?.exchange_rate ? `${ prefix }$${ totalUsd.toFormat(2) }` : 'N/A' }
         isLoading={ addressQuery.isPending || tokenQuery.isPending }
+        icon={ <IconSvg name="wallet" boxSize="20px" flexShrink={ 0 } color="text_secondary"/> }
       />
       <TokenBalancesItem
         name={ `${ currencyUnits.ether } Balance` }
-        value={ (!nativeUsd.eq(ZERO) ? `$${ nativeUsd.toFormat(2) } USD | ` : '') + `${ nativeValue } ${ currencyUnits.ether }` }
+        value={ `${ nativeValue } ${ currencyUnits.ether }` }
+        valueSecondary={ !nativeUsd.eq(ZERO) ? `$${ nativeUsd.toFormat(2) }` : '' }
         isLoading={ addressQuery.isPending || tokenQuery.isPending }
+        icon={ <NativeTokenIcon boxSize="20px"/> }
       />
       <TokenBalancesItem
         name="Tokens"
-        value={
-          `${ prefix }$${ tokensInfo.usd.toFormat(2) } USD ` +
-          tokensNumText
-        }
+        value={ tokensNumText }
+        valueSecondary={ `${ prefix }$${ tokensInfo.usd.toFormat(2) }` }
         isLoading={ addressQuery.isPending || tokenQuery.isPending }
+        icon={ <IconSvg name="tokens" boxSize="20px" flexShrink={ 0 } color="text_secondary"/> }
       />
     </Flex>
   );
diff --git a/ui/address/tokens/TokenBalancesItem.tsx b/ui/address/tokens/TokenBalancesItem.tsx
index fcd3c08752..9f3b65ca28 100644
--- a/ui/address/tokens/TokenBalancesItem.tsx
+++ b/ui/address/tokens/TokenBalancesItem.tsx
@@ -1,20 +1,29 @@
 import { Box, Flex, Skeleton, Text, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-import IconSvg from 'ui/shared/IconSvg';
+type Props = {
+  name: string;
+  value: string;
+  icon: React.ReactNode;
+  valueSecondary?: string;
+  isLoading: boolean;
+}
 
-const TokenBalancesItem = ({ name, value, isLoading }: {name: string; value: string; isLoading: boolean }) => {
+const TokenBalancesItem = ({ name, icon, value, valueSecondary, isLoading }: Props) => {
 
   const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
   return (
-    <Flex p={ 5 } bgColor={ bgColor } borderRadius="16px" alignItems="center">
-      <IconSvg name="wallet" boxSize="30px" mr={ 3 } flexShrink={ 0 }/>
-      <Box>
-        <Text variant="secondary" fontSize="xs">{ name }</Text>
-        <Skeleton isLoaded={ !isLoading } fontWeight="500" whiteSpace="pre-wrap" wordBreak="break-word">{ value }</Skeleton>
-      </Box>
-    </Flex>
+    <Box px="12px" py="10px" bgColor={ bgColor } borderRadius="base">
+      <Text variant="secondary" fontSize="xs" fontWeight={ 500 } mb={ 1 }>{ name }</Text>
+      <Flex alignItems="center">
+        { icon }
+        <Skeleton isLoaded={ !isLoading } fontWeight="500" whiteSpace="pre-wrap" wordBreak="break-word" display="flex" ml={ 2 }>
+          { value }
+          { Boolean(valueSecondary) && <Text color="text_secondary"> ({ valueSecondary })</Text> }
+        </Skeleton>
+      </Flex>
+    </Box>
   );
 };
 
diff --git a/ui/address/utils/useAddressCountersQuery.ts b/ui/address/utils/useAddressCountersQuery.ts
index c0dc4ee995..44397fc59e 100644
--- a/ui/address/utils/useAddressCountersQuery.ts
+++ b/ui/address/utils/useAddressCountersQuery.ts
@@ -24,7 +24,7 @@ interface Params {
   addressQuery: AddressQuery;
 }
 
-export default function useAddressQuery({ hash, addressQuery }: Params): AddressCountersQuery {
+export default function useAddressCountersQuery({ hash, addressQuery }: Params): AddressCountersQuery {
   const enabled = Boolean(hash) && !addressQuery.isPlaceholderData;
 
   const apiQuery = useApiQuery<'address_counters', { status: number }>('address_counters', {
diff --git a/ui/address/utils/useAddressQuery.ts b/ui/address/utils/useAddressQuery.ts
index 141ce56d72..64a43cb581 100644
--- a/ui/address/utils/useAddressQuery.ts
+++ b/ui/address/utils/useAddressQuery.ts
@@ -22,15 +22,16 @@ export type AddressQuery = UseQueryResult<Address, ResourceError<{ status: numbe
 
 interface Params {
   hash: string;
+  isEnabled?: boolean;
 }
 
-export default function useAddressQuery({ hash }: Params): AddressQuery {
+export default function useAddressQuery({ hash, isEnabled = true }: Params): AddressQuery {
   const [ isRefetchEnabled, setRefetchEnabled ] = React.useState(false);
 
   const apiQuery = useApiQuery<'address', { status: number }>('address', {
     pathParams: { hash },
     queryOptions: {
-      enabled: Boolean(hash),
+      enabled: isEnabled && Boolean(hash),
       placeholderData: ADDRESS_INFO,
       refetchOnMount: false,
       retry: (failureCount, error) => {
@@ -74,19 +75,12 @@ export default function useAddressQuery({ hash }: Params): AddressQuery {
         creation_tx_hash: null,
         exchange_rate: null,
         ens_domain_name: null,
-        has_custom_methods_read: false,
-        has_custom_methods_write: false,
         has_decompiled_code: false,
         has_logs: false,
-        has_methods_read: false,
-        has_methods_read_proxy: false,
-        has_methods_write: false,
-        has_methods_write_proxy: false,
         has_token_transfers: false,
         has_tokens: false,
         has_validated_blocks: false,
-        implementation_address: null,
-        implementation_name: null,
+        implementations: null,
         is_contract: false,
         is_verified: false,
         name: null,
diff --git a/ui/address/utils/useCheckDomainNameParam.ts b/ui/address/utils/useCheckDomainNameParam.ts
new file mode 100644
index 0000000000..f5cc9fd631
--- /dev/null
+++ b/ui/address/utils/useCheckDomainNameParam.ts
@@ -0,0 +1,46 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+
+const DOMAIN_NAME_REGEXP = /.\../;
+
+export default function useCheckDomainNameParam(hashOrDomainName: string) {
+  const router = useRouter();
+  const maybeDomainName = DOMAIN_NAME_REGEXP.test(hashOrDomainName);
+  const isQueryEnabled = config.features.nameService.isEnabled && maybeDomainName;
+  const [ isLoading, setIsLoading ] = React.useState(isQueryEnabled);
+
+  const domainLookupQuery = useApiQuery('domains_lookup', {
+    pathParams: { chainId: config.chain.id },
+    queryParams: {
+      name: hashOrDomainName,
+      only_active: false,
+    },
+    queryOptions: {
+      enabled: isQueryEnabled,
+    },
+  });
+
+  React.useEffect(() => {
+    if (domainLookupQuery.isPending) {
+      return;
+    }
+
+    const firstDomainAddress = domainLookupQuery.data?.items[0]?.resolved_address?.hash;
+    if (firstDomainAddress) {
+      router.replace({ pathname: '/address/[hash]', query: { hash: firstDomainAddress } });
+    } else {
+      setIsLoading(false);
+    }
+  }, [ domainLookupQuery.isPending, domainLookupQuery.data, router ]);
+
+  React.useEffect(() => {
+    if (!maybeDomainName) {
+      setIsLoading(false);
+    }
+  }, [ maybeDomainName ]);
+
+  return isLoading;
+}
diff --git a/ui/address/utils/useFetchTokens.ts b/ui/address/utils/useFetchTokens.ts
index 53055d9ced..0ef43b146d 100644
--- a/ui/address/utils/useFetchTokens.ts
+++ b/ui/address/utils/useFetchTokens.ts
@@ -12,6 +12,7 @@ import useSocketMessage from 'lib/socket/useSocketMessage';
 import { calculateUsdValue } from './tokenUtils';
 interface Props {
   hash?: string;
+  enabled?: boolean;
 }
 
 const tokenBalanceItemIdentityFactory = (match: AddressTokenBalance) => (item: AddressTokenBalance) => ((
@@ -20,26 +21,26 @@ const tokenBalanceItemIdentityFactory = (match: AddressTokenBalance) => (item: A
   match.token_instance?.id === item.token_instance?.id
 ));
 
-export default function useFetchTokens({ hash }: Props) {
+export default function useFetchTokens({ hash, enabled }: Props) {
   const erc20query = useApiQuery('address_tokens', {
     pathParams: { hash },
     queryParams: { type: 'ERC-20' },
-    queryOptions: { enabled: Boolean(hash), refetchOnMount: false },
+    queryOptions: { enabled: Boolean(hash) && enabled, refetchOnMount: false },
   });
   const erc721query = useApiQuery('address_tokens', {
     pathParams: { hash },
     queryParams: { type: 'ERC-721' },
-    queryOptions: { enabled: Boolean(hash), refetchOnMount: false },
+    queryOptions: { enabled: Boolean(hash) && enabled, refetchOnMount: false },
   });
   const erc1155query = useApiQuery('address_tokens', {
     pathParams: { hash },
     queryParams: { type: 'ERC-1155' },
-    queryOptions: { enabled: Boolean(hash), refetchOnMount: false },
+    queryOptions: { enabled: Boolean(hash) && enabled, refetchOnMount: false },
   });
   const erc404query = useApiQuery('address_tokens', {
     pathParams: { hash },
     queryParams: { type: 'ERC-404' },
-    queryOptions: { enabled: Boolean(hash), refetchOnMount: false },
+    queryOptions: { enabled: Boolean(hash) && enabled, refetchOnMount: false },
   });
 
   const queryClient = useQueryClient();
diff --git a/ui/addressVerification/AddressVerificationModal.tsx b/ui/addressVerification/AddressVerificationModal.tsx
index b70d472dc7..b36de3fd7e 100644
--- a/ui/addressVerification/AddressVerificationModal.tsx
+++ b/ui/addressVerification/AddressVerificationModal.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import type { AddressVerificationFormFirstStepFields, AddressCheckStatusSuccess } from './types';
 import type { VerifiedAddress } from 'types/api/account';
 
+import config from 'configs/app';
 import * as mixpanel from 'lib/mixpanel/index';
 import IconSvg from 'ui/shared/IconSvg';
 import Web3ModalProvider from 'ui/shared/Web3ModalProvider';
@@ -76,8 +77,13 @@ const AddressVerificationModal = ({ defaultAddress, isOpen, onClose, onSubmit, o
     },
     {
       title: 'Copy and sign message',
-      content: <AddressVerificationStepSignature { ...data } onContinue={ handleGoToThirdStep }/>,
-      fallback: <AddressVerificationStepSignature { ...data } onContinue={ handleGoToThirdStep } noWeb3Provider/>,
+      content: (
+        <AddressVerificationStepSignature
+          { ...data }
+          onContinue={ handleGoToThirdStep }
+          noWeb3Provider={ !config.features.blockchainInteraction.isEnabled }
+        />
+      ),
     },
     {
       title: 'Congrats! Address is verified.',
@@ -100,14 +106,14 @@ const AddressVerificationModal = ({ defaultAddress, isOpen, onClose, onSubmit, o
         <ModalHeader fontWeight="500" textStyle="h3" mb={ 6 }>
           { stepIndex !== 0 && (
             <Link mr={ 3 } onClick={ handleGoToPrevStep }>
-              <IconSvg name="arrows/east" boxSize={ 6 } transform="rotate(180deg)" verticalAlign="middle"/>
+              <IconSvg name="arrows/east" boxSize={ 6 } transform="rotate(180deg)" verticalAlign="middle" color="gray.400"/>
             </Link>
           ) }
           <span>{ step.title }</span>
         </ModalHeader>
         <ModalCloseButton/>
         <ModalBody mb={ 0 }>
-          <Web3ModalProvider fallback={ step?.fallback || step.content }>
+          <Web3ModalProvider>
             { step.content }
           </Web3ModalProvider>
         </ModalBody>
diff --git a/ui/addressVerification/fields/AddressVerificationFieldAddress.tsx b/ui/addressVerification/fields/AddressVerificationFieldAddress.tsx
index 868505d158..f4b959cf4e 100644
--- a/ui/addressVerification/fields/AddressVerificationFieldAddress.tsx
+++ b/ui/addressVerification/fields/AddressVerificationFieldAddress.tsx
@@ -1,4 +1,4 @@
-import { FormControl, Input, useColorModeValue } from '@chakra-ui/react';
+import { FormControl, Input } from '@chakra-ui/react';
 import React from 'react';
 import type { Control, ControllerRenderProps, FormState } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
@@ -15,13 +15,11 @@ interface Props {
 }
 
 const AddressVerificationFieldAddress = ({ formState, control }: Props) => {
-  const backgroundColor = useColorModeValue('white', 'gray.900');
-
   const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, 'address'>}) => {
     const error = 'address' in formState.errors ? formState.errors.address : undefined;
 
     return (
-      <FormControl variant="floating" id={ field.name } isRequired size="md" backgroundColor={ backgroundColor } mt={ 8 }>
+      <FormControl variant="floating" id={ field.name } isRequired size="md" bgColor="dialog_bg" mt={ 8 }>
         <Input
           { ...field }
           required
@@ -29,11 +27,12 @@ const AddressVerificationFieldAddress = ({ formState, control }: Props) => {
           maxLength={ ADDRESS_LENGTH }
           isDisabled={ formState.isSubmitting }
           autoComplete="off"
+          bgColor="dialog_bg"
         />
         <InputPlaceholder text="Smart contract address (0x...)" error={ error }/>
       </FormControl>
     );
-  }, [ formState.errors, formState.isSubmitting, backgroundColor ]);
+  }, [ formState.errors, formState.isSubmitting ]);
 
   return (
     <Controller
diff --git a/ui/addressVerification/fields/AddressVerificationFieldMessage.tsx b/ui/addressVerification/fields/AddressVerificationFieldMessage.tsx
index 44db8bc302..ac87d9006d 100644
--- a/ui/addressVerification/fields/AddressVerificationFieldMessage.tsx
+++ b/ui/addressVerification/fields/AddressVerificationFieldMessage.tsx
@@ -1,4 +1,4 @@
-import { FormControl, Textarea, useColorModeValue } from '@chakra-ui/react';
+import { FormControl, Textarea } from '@chakra-ui/react';
 import React from 'react';
 import type { Control, ControllerRenderProps, FormState } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
@@ -15,25 +15,24 @@ interface Props {
 }
 
 const AddressVerificationFieldMessage = ({ formState, control }: Props) => {
-  const backgroundColor = useColorModeValue('white', 'gray.900');
-
   const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, 'message'>}) => {
     const error = 'message' in formState.errors ? formState.errors.message : undefined;
 
     return (
-      <FormControl variant="floating" id={ field.name } isRequired size="md" backgroundColor={ backgroundColor }>
+      <FormControl variant="floating" id={ field.name } isRequired size="md" bgColor="dialog_bg">
         <Textarea
           { ...field }
           required
           isInvalid={ Boolean(error) }
-          isDisabled
+          isReadOnly
           autoComplete="off"
           maxH={{ base: '140px', lg: '80px' }}
+          bgColor="dialog_bg"
         />
-        <InputPlaceholder text="Message to sign" error={ error } isInModal/>
+        <InputPlaceholder text="Message to sign" error={ error }/>
       </FormControl>
     );
-  }, [ formState.errors, backgroundColor ]);
+  }, [ formState.errors ]);
 
   return (
     <Controller
diff --git a/ui/addressVerification/fields/AddressVerificationFieldSignature.tsx b/ui/addressVerification/fields/AddressVerificationFieldSignature.tsx
index a0df3bfed5..c6dfd20c0c 100644
--- a/ui/addressVerification/fields/AddressVerificationFieldSignature.tsx
+++ b/ui/addressVerification/fields/AddressVerificationFieldSignature.tsx
@@ -1,4 +1,4 @@
-import { FormControl, Input, useColorModeValue } from '@chakra-ui/react';
+import { FormControl, Input } from '@chakra-ui/react';
 import React from 'react';
 import type { Control, ControllerRenderProps, FormState } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
@@ -16,24 +16,23 @@ interface Props {
 }
 
 const AddressVerificationFieldSignature = ({ formState, control }: Props) => {
-  const backgroundColor = useColorModeValue('white', 'gray.900');
-
   const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, 'signature'>}) => {
     const error = 'signature' in formState.errors ? formState.errors.signature : undefined;
 
     return (
-      <FormControl variant="floating" id={ field.name } isRequired size="md" backgroundColor={ backgroundColor }>
+      <FormControl variant="floating" id={ field.name } isRequired size="md" bgColor="dialog_bg">
         <Input
           { ...field }
           required
           isInvalid={ Boolean(error) }
           isDisabled={ formState.isSubmitting }
           autoComplete="off"
+          bgColor="dialog_bg"
         />
         <InputPlaceholder text="Signature hash" error={ error }/>
       </FormControl>
     );
-  }, [ formState.errors, formState.isSubmitting, backgroundColor ]);
+  }, [ formState.errors, formState.isSubmitting ]);
 
   return (
     <Controller
diff --git a/ui/addressVerification/steps/AddressVerificationStepAddress.pw.tsx b/ui/addressVerification/steps/AddressVerificationStepAddress.pw.tsx
index 3efcd497f8..643c9aa7c5 100644
--- a/ui/addressVerification/steps/AddressVerificationStepAddress.pw.tsx
+++ b/ui/addressVerification/steps/AddressVerificationStepAddress.pw.tsx
@@ -1,35 +1,28 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import buildUrl from 'lib/api/buildUrl';
 import * as mocks from 'mocks/account/verifiedAddresses';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import AddressVerificationStepAddress from './AddressVerificationStepAddress';
 
-const CHECK_ADDRESS_URL = buildApiUrl('address_verification', { chainId: '1', type: ':prepare' });
+const CHECK_ADDRESS_URL = buildUrl('address_verification', { chainId: '1', type: ':prepare' });
 
-test('base view', async({ mount, page }) => {
+test('base view', async({ render, page }) => {
   await page.route(CHECK_ADDRESS_URL, (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(mocks.ADDRESS_CHECK_RESPONSE.SUCCESS),
   }));
-
   const props = {
     onContinue: () => {},
     defaultAddress: mocks.VERIFIED_ADDRESS.NEW_ITEM.contractAddress,
   };
 
-  await mount(
-    <TestApp>
-      <AddressVerificationStepAddress { ...props }/>
-    </TestApp>,
-  );
-
+  await render(<AddressVerificationStepAddress { ...props }/>);
   await expect(page).toHaveScreenshot();
 });
 
-test('SOURCE_CODE_NOT_VERIFIED_ERROR view +@mobile', async({ mount, page }) => {
+test('SOURCE_CODE_NOT_VERIFIED_ERROR view +@mobile', async({ render, page }) => {
   await page.route(CHECK_ADDRESS_URL, (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(mocks.ADDRESS_CHECK_RESPONSE.SOURCE_CODE_NOT_VERIFIED_ERROR),
@@ -39,11 +32,7 @@ test('SOURCE_CODE_NOT_VERIFIED_ERROR view +@mobile', async({ mount, page }) => {
     onContinue: () => {},
   };
 
-  await mount(
-    <TestApp>
-      <AddressVerificationStepAddress { ...props }/>
-    </TestApp>,
-  );
+  await render(<AddressVerificationStepAddress { ...props }/>);
 
   const addressInput = page.getByLabel(/smart contract address/i);
   await addressInput.focus();
diff --git a/ui/addressVerification/steps/AddressVerificationStepAddress.tsx b/ui/addressVerification/steps/AddressVerificationStepAddress.tsx
index a757d9b2b9..5cf1c9d223 100644
--- a/ui/addressVerification/steps/AddressVerificationStepAddress.tsx
+++ b/ui/addressVerification/steps/AddressVerificationStepAddress.tsx
@@ -16,7 +16,7 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
 import useApiFetch from 'lib/api/useApiFetch';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import AdminSupportText from 'ui/shared/texts/AdminSupportText';
 
 import AddressVerificationFieldAddress from '../fields/AddressVerificationFieldAddress';
@@ -105,7 +105,7 @@ const AddressVerificationStepAddress = ({ defaultAddress, onContinue }: Props) =
       { rootError && <Alert status="warning" mt={ 3 }>{ rootError }</Alert> }
       <AddressVerificationFieldAddress formState={ formState } control={ control }/>
       <Flex alignItems={{ base: 'flex-start', lg: 'center' }} mt={ 8 } columnGap={ 5 } rowGap={ 2 } flexDir={{ base: 'column', lg: 'row' }}>
-        <Button size="lg" type="submit" isDisabled={ formState.isSubmitting } flexShrink={ 0 }>
+        <Button size="lg" type="submit" isLoading={ formState.isSubmitting } loadingText="Continue" flexShrink={ 0 }>
             Continue
         </Button>
         <AdminSupportText/>
diff --git a/ui/addressVerification/steps/AddressVerificationStepSignature.pw.tsx b/ui/addressVerification/steps/AddressVerificationStepSignature.pw.tsx
index bda66934aa..eefb340949 100644
--- a/ui/addressVerification/steps/AddressVerificationStepSignature.pw.tsx
+++ b/ui/addressVerification/steps/AddressVerificationStepSignature.pw.tsx
@@ -1,15 +1,14 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import buildUrl from 'lib/api/buildUrl';
 import * as mocks from 'mocks/account/verifiedAddresses';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import AddressVerificationStepSignature from './AddressVerificationStepSignature';
 
-const VERIFY_ADDRESS_URL = buildApiUrl('address_verification', { chainId: '1', type: ':verify' });
+const VERIFY_ADDRESS_URL = buildUrl('address_verification', { chainId: '1', type: ':verify' });
 
-test('base view', async({ mount, page }) => {
+test('base view', async({ render, page }) => {
   await page.route(VERIFY_ADDRESS_URL, (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(mocks.ADDRESS_VERIFY_RESPONSE.SUCCESS),
@@ -22,16 +21,11 @@ test('base view', async({ mount, page }) => {
     signingMessage: mocks.ADDRESS_CHECK_RESPONSE.SUCCESS.result.signingMessage,
   };
 
-  await mount(
-    <TestApp>
-      <AddressVerificationStepSignature { ...props }/>
-    </TestApp>,
-  );
-
+  await render(<AddressVerificationStepSignature { ...props }/>);
   await expect(page).toHaveScreenshot();
 });
 
-test('INVALID_SIGNER_ERROR view +@mobile', async({ mount, page }) => {
+test('INVALID_SIGNER_ERROR view +@mobile', async({ render, page }) => {
   await page.route(VERIFY_ADDRESS_URL, (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(mocks.ADDRESS_VERIFY_RESPONSE.INVALID_SIGNER_ERROR),
@@ -44,11 +38,7 @@ test('INVALID_SIGNER_ERROR view +@mobile', async({ mount, page }) => {
     ...mocks.ADDRESS_CHECK_RESPONSE.SUCCESS.result,
   };
 
-  await mount(
-    <TestApp>
-      <AddressVerificationStepSignature { ...props }/>
-    </TestApp>,
-  );
+  await render(<AddressVerificationStepSignature { ...props }/>);
 
   const signatureInput = page.getByLabel(/signature hash/i);
   await signatureInput.fill(mocks.SIGNATURE);
diff --git a/ui/addresses/AddressesListItem.tsx b/ui/addresses/AddressesListItem.tsx
index d147ff7970..462db87c80 100644
--- a/ui/addresses/AddressesListItem.tsx
+++ b/ui/addresses/AddressesListItem.tsx
@@ -25,7 +25,7 @@ const AddressesListItem = ({
   isLoading,
 }: Props) => {
 
-  const addressBalance = BigNumber(item.coin_balance).div(BigNumber(10 ** config.chain.currency.decimals));
+  const addressBalance = BigNumber(item.coin_balance || 0).div(BigNumber(10 ** config.chain.currency.decimals));
 
   return (
     <ListItemMobile rowGap={ 3 }>
diff --git a/ui/addresses/AddressesTable.tsx b/ui/addresses/AddressesTable.tsx
index 60634f96c7..9fac6d7081 100644
--- a/ui/addresses/AddressesTable.tsx
+++ b/ui/addresses/AddressesTable.tsx
@@ -25,8 +25,7 @@ const AddressesTable = ({ items, totalSupply, pageStartIndex, top, isLoading }:
       <Thead top={ top }>
         <Tr>
           <Th width="64px">Rank</Th>
-          <Th width={ hasPercentage ? '30%' : '40%' }>Address</Th>
-          <Th width="20%" pl={ 10 }>Public tag</Th>
+          <Th width={ hasPercentage ? '50%' : '60%' }>Address</Th>
           <Th width={ hasPercentage ? '20%' : '25%' } isNumeric>{ `Balance ${ currencyUnits.ether }` }</Th>
           { hasPercentage && <Th width="15%" isNumeric>Percentage</Th> }
           <Th width="15%" isNumeric>Txn count</Th>
diff --git a/ui/addresses/AddressesTableItem.tsx b/ui/addresses/AddressesTableItem.tsx
index 6210fd0134..06d849c211 100644
--- a/ui/addresses/AddressesTableItem.tsx
+++ b/ui/addresses/AddressesTableItem.tsx
@@ -1,4 +1,4 @@
-import { Tr, Td, Text, Skeleton } from '@chakra-ui/react';
+import { Tr, Td, Text, Skeleton, Flex } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -24,7 +24,7 @@ const AddressesTableItem = ({
   isLoading,
 }: Props) => {
 
-  const addressBalance = BigNumber(item.coin_balance).div(BigNumber(10 ** config.chain.currency.decimals));
+  const addressBalance = BigNumber(item.coin_balance || 0).div(BigNumber(10 ** config.chain.currency.decimals));
   const addressBalanceChunks = addressBalance.dp(8).toFormat().split('.');
 
   return (
@@ -35,22 +35,21 @@ const AddressesTableItem = ({
         </Skeleton>
       </Td>
       <Td>
-        <AddressEntity
-          address={ item }
-          isLoading={ isLoading }
-          fontWeight={ 700 }
-          my="2px"
-        />
-      </Td>
-      <Td pl={ 10 }>
-        { item.public_tags && item.public_tags.length ? item.public_tags.map(tag => (
-          <Tag key={ tag.label } isLoading={ isLoading } isTruncated>{ tag.display_name }</Tag>
-        )) : null }
+        <Flex alignItems="center" columnGap={ 2 }>
+          <AddressEntity
+            address={ item }
+            isLoading={ isLoading }
+            fontWeight={ 700 }
+            my="2px"
+          />
+          { item.public_tags && item.public_tags.length ? item.public_tags.map(tag => (
+            <Tag key={ tag.label } isLoading={ isLoading } isTruncated>{ tag.display_name }</Tag>
+          )) : null }
+        </Flex>
       </Td>
       <Td isNumeric>
         <Skeleton isLoaded={ !isLoading } display="inline-block" maxW="100%">
-          <Text lineHeight="24px" as="span">{ addressBalanceChunks[0] }</Text>
-          { addressBalanceChunks[1] && <Text lineHeight="24px" as="span">.</Text> }
+          <Text lineHeight="24px" as="span">{ addressBalanceChunks[0] + (addressBalanceChunks[1] ? '.' : '') }</Text>
           <Text lineHeight="24px" variant="secondary" as="span">{ addressBalanceChunks[1] }</Text>
         </Skeleton>
       </Td>
diff --git a/ui/addressesLabelSearch/AddressesLabelSearchListItem.tsx b/ui/addressesLabelSearch/AddressesLabelSearchListItem.tsx
new file mode 100644
index 0000000000..f2145f93c7
--- /dev/null
+++ b/ui/addressesLabelSearch/AddressesLabelSearchListItem.tsx
@@ -0,0 +1,48 @@
+import { HStack, Skeleton } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { AddressesItem } from 'types/api/addresses';
+
+import config from 'configs/app';
+import { currencyUnits } from 'lib/units';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+
+type Props = {
+  item: AddressesItem;
+  isLoading?: boolean;
+}
+
+const AddressesLabelSearchListItem = ({
+  item,
+  isLoading,
+}: Props) => {
+
+  const addressBalance = BigNumber(item.coin_balance || 0).div(BigNumber(10 ** config.chain.currency.decimals));
+
+  return (
+    <ListItemMobile rowGap={ 3 }>
+      <AddressEntity
+        address={ item }
+        isLoading={ isLoading }
+        fontWeight={ 700 }
+        w="100%"
+      />
+      <HStack spacing={ 3 } maxW="100%" alignItems="flex-start">
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 } flexShrink={ 0 }>{ `Balance ${ currencyUnits.ether }` }</Skeleton>
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" minW="0" whiteSpace="pre-wrap">
+          <span>{ addressBalance.dp(8).toFormat() }</span>
+        </Skeleton>
+      </HStack>
+      <HStack spacing={ 3 }>
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Txn count</Skeleton>
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary">
+          <span>{ Number(item.tx_count).toLocaleString() }</span>
+        </Skeleton>
+      </HStack>
+    </ListItemMobile>
+  );
+};
+
+export default React.memo(AddressesLabelSearchListItem);
diff --git a/ui/addressesLabelSearch/AddressesLabelSearchTable.tsx b/ui/addressesLabelSearch/AddressesLabelSearchTable.tsx
new file mode 100644
index 0000000000..8a91ecc05d
--- /dev/null
+++ b/ui/addressesLabelSearch/AddressesLabelSearchTable.tsx
@@ -0,0 +1,40 @@
+import { Table, Tbody, Tr, Th } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressesItem } from 'types/api/addresses';
+
+import { currencyUnits } from 'lib/units';
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import AddressesLabelSearchTableItem from './AddressesLabelSearchTableItem';
+
+interface Props {
+  items: Array<AddressesItem>;
+  top: number;
+  isLoading?: boolean;
+}
+
+const AddressesLabelSearchTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table variant="simple" size="sm">
+      <Thead top={ top }>
+        <Tr>
+          <Th width="70%">Address</Th>
+          <Th width="15%" isNumeric>{ `Balance ${ currencyUnits.ether }` }</Th>
+          <Th width="15%" isNumeric>Txn count</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <AddressesLabelSearchTableItem
+            key={ item.hash + (isLoading ? index : '') }
+            item={ item }
+            isLoading={ isLoading }
+          />
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default AddressesLabelSearchTable;
diff --git a/ui/addressesLabelSearch/AddressesLabelSearchTableItem.tsx b/ui/addressesLabelSearch/AddressesLabelSearchTableItem.tsx
new file mode 100644
index 0000000000..b768a56783
--- /dev/null
+++ b/ui/addressesLabelSearch/AddressesLabelSearchTableItem.tsx
@@ -0,0 +1,48 @@
+import { Tr, Td, Text, Skeleton } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { AddressesItem } from 'types/api/addresses';
+
+import config from 'configs/app';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+
+type Props = {
+  item: AddressesItem;
+  isLoading?: boolean;
+}
+
+const AddressesLabelSearchTableItem = ({
+  item,
+  isLoading,
+}: Props) => {
+
+  const addressBalance = BigNumber(item.coin_balance || 0).div(BigNumber(10 ** config.chain.currency.decimals));
+  const addressBalanceChunks = addressBalance.dp(8).toFormat().split('.');
+
+  return (
+    <Tr>
+      <Td>
+        <AddressEntity
+          address={ item }
+          isLoading={ isLoading }
+          fontWeight={ 700 }
+          my="2px"
+        />
+      </Td>
+      <Td isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="inline-block" maxW="100%">
+          <Text lineHeight="24px" as="span">{ addressBalanceChunks[0] + (addressBalanceChunks[1] ? '.' : '') }</Text>
+          <Text lineHeight="24px" variant="secondary" as="span">{ addressBalanceChunks[1] }</Text>
+        </Skeleton>
+      </Td>
+      <Td isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="inline-block" lineHeight="24px">
+          { Number(item.tx_count).toLocaleString() }
+        </Skeleton>
+      </Td>
+    </Tr>
+  );
+};
+
+export default React.memo(AddressesLabelSearchTableItem);
diff --git a/ui/apiKey/ApiKeyModal/ApiKeyForm.tsx b/ui/apiKey/ApiKeyModal/ApiKeyForm.tsx
index b1f6bf4aa8..c14bf58f1c 100644
--- a/ui/apiKey/ApiKeyModal/ApiKeyForm.tsx
+++ b/ui/apiKey/ApiKeyModal/ApiKeyForm.tsx
@@ -4,7 +4,6 @@ import {
   FormControl,
   FormLabel,
   Input,
-  useColorModeValue,
 } from '@chakra-ui/react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import React, { useCallback } from 'react';
@@ -42,7 +41,6 @@ const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
   });
   const apiFetch = useApiFetch();
   const queryClient = useQueryClient();
-  const formBackgroundColor = useColorModeValue('white', 'gray.900');
 
   const updateApiKey = (data: Inputs) => {
     const body = { name: data.name };
@@ -102,25 +100,27 @@ const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
       <FormControl variant="floating" id="address">
         <Input
           { ...field }
-          isDisabled={ true }
+          bgColor="dialog_bg"
+          isReadOnly
         />
-        <FormLabel data-in-modal="true">Auto-generated API key token</FormLabel>
+        <FormLabel>Auto-generated API key token</FormLabel>
       </FormControl>
     );
   }, []);
 
   const renderNameInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'name'>}) => {
     return (
-      <FormControl variant="floating" id="name" isRequired backgroundColor={ formBackgroundColor }>
+      <FormControl variant="floating" id="name" isRequired bgColor="dialog_bg">
         <Input
           { ...field }
           isInvalid={ Boolean(errors.name) }
           maxLength={ NAME_MAX_LENGTH }
+          bgColor="dialog_bg"
         />
         <InputPlaceholder text="Application name for API key (e.g Web3 project)" error={ errors.name }/>
       </FormControl>
     );
-  }, [ errors, formBackgroundColor ]);
+  }, [ errors ]);
 
   return (
     <form noValidate onSubmit={ handleSubmit(onSubmit) }>
diff --git a/ui/blob/BlobData.pw.tsx b/ui/blob/BlobData.pw.tsx
index 487ad0e69c..959a5a4a13 100644
--- a/ui/blob/BlobData.pw.tsx
+++ b/ui/blob/BlobData.pw.tsx
@@ -1,53 +1,31 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import BlobData from './BlobData';
 import imageBlobWithZeroesBytes from './image_with_zeroes.blob';
 
 test.use({ viewport: { width: 500, height: 300 } });
 
-test('text', async({ mount }) => {
+test('text', async({ render }) => {
   // eslint-disable-next-line max-len
   const data = '0xE2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A280E2A3A4E2A1B6E2A0BFE2A0BFE2A0B7E2A3B6E2A384E2A080E2A080E2A080E2A080E2A0800AE2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A3B0E2A1BFE2A081E2A080E2A080E2A280E2A380E2A180E2A099E2A3B7E2A180E2A080E2A080E2A0800AE2A080E2A080E2A080E2A180E2A080E2A080E2A080E2A080E2A080E2A2A0E2A3BFE2A081E2A080E2A080E2A080E2A098E2A0BFE2A083E2A080E2A2B8E2A3BFE2A3BFE2A3BFE2A3BF0AE2A080E2A3A0E2A1BFE2A09BE2A2B7E2A3A6E2A180E2A080E2A080E2A088E2A3BFE2A184E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A3B8E2A3BFE2A3BFE2A3BFE2A09F0AE2A2B0E2A1BFE2A081E2A080E2A080E2A099E2A2BFE2A3A6E2A3A4E2A3A4E2A3BCE2A3BFE2A384E2A080E2A080E2A080E2A080E2A080E2A2B4E2A19FE2A09BE2A08BE2A081E2A0800AE2A3BFE2A087E2A080E2A080E2A080E2A080E2A080E2A089E2A089E2A089E2A089E2A089E2A081E2A080E2A080E2A080E2A080E2A080E2A088E2A3BFE2A180E2A080E2A080E2A0800AE2A3BFE2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A2B9E2A187E2A080E2A080E2A0800AE2A3BFE2A186E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A3BCE2A187E2A080E2A080E2A0800AE2A0B8E2A3B7E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A2A0E2A1BFE2A080E2A080E2A080E2A0800AE2A080E2A0B9E2A3B7E2A3A4E2A380E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A380E2A3B0E2A1BFE2A081E2A080E2A080E2A080E2A0800AE2A080E2A080E2A080E2A089E2A099E2A09BE2A0BFE2A0B6E2A3B6E2A3B6E2A3B6E2A3B6E2A3B6E2A0B6E2A0BFE2A09FE2A09BE2A089E2A080E2A080E2A080E2A080E2A080E2A080';
-
-  const component = await mount(
-    <TestApp>
-      <BlobData hash="0x01" data={ data }/>
-    </TestApp>,
-  );
-
+  const component = await render(<BlobData hash="0x01" data={ data }/>);
   await expect(component).toHaveScreenshot();
-
   await component.locator('select').selectOption('UTF-8');
-
   await expect(component).toHaveScreenshot();
 });
 
-test('image', async({ mount }) => {
+test('image', async({ render }) => {
   // eslint-disable-next-line max-len
   const data = '0x89504E470D0A1A0A0000000D494844520000003C0000003C0403000000C8D2C4410000000467414D410000B18F0BFC6105000000017352474200AECE1CE900000027504C54454C69712B6CB02A6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB0F4205A540000000C74524E5300ED2F788CD91B99475C09B969CFA99D0000004F7A5458745261772070726F66696C65207479706520697074630000789CE3CA2C2849E6520003230B2E630B1323134B9314031320448034C3640323B35420CBD8D4C8C4CCC41CC407CB8048A04A2E0028950EE32A226D1F0000000970485973000084DF000084DF0195C81C33000000F24944415438CB636000018E983367CE482780D90CDA40F6991D0C4820152472A60ACCE6DA03629F4E40929E03961602B39964C09C0624691B24690E88F48461215D03160903B3D962C01C07842C2758C341A80643B0B40484C3646C6C5C78E6E016171723A8E215262EEE31670E161B1B7731304C05AB155EC08002C0D172E6F80206884DBB50651938CF4003FE0CBA4390E3C56064482F53525252C329CD562A2828283A0197340B22AAB0494332C311FCD2C747A547A58996C69998D8F12745B68DA0846C85331B2CEAE8E8681A81D91F8B348C4605D0527B02A4283FA88026CD05163EAAC0900ED21EC9800EC0C2110C002BBA9FE999B920330000000049454E44AE426082';
-
-  const component = await mount(
-    <TestApp>
-      <BlobData hash="0x01" data={ data }/>
-    </TestApp>,
-  );
-
+  const component = await render(<BlobData hash="0x01" data={ data }/>);
   await expect(component).toHaveScreenshot();
-
   await component.locator('select').selectOption('Base64');
-
   await expect(component).toHaveScreenshot();
 });
 
-test('image blob with zeroes bytes', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <BlobData hash="0x01" data={ imageBlobWithZeroesBytes }/>
-    </TestApp>,
-  );
-
+test('image blob with zeroes bytes', async({ render }) => {
+  const component = await render(<BlobData hash="0x01" data={ imageBlobWithZeroesBytes }/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/blob/BlobData.tsx b/ui/blob/BlobData.tsx
index da7980c84c..dad79e30fa 100644
--- a/ui/blob/BlobData.tsx
+++ b/ui/blob/BlobData.tsx
@@ -108,7 +108,6 @@ const BlobData = ({ data, isLoading, hash }: Props) => {
             borderRadius="base"
             value={ format }
             onChange={ handleSelectChange }
-            focusBorderColor="none"
             w="auto"
           >
             { formats.map((format) => (
diff --git a/ui/blob/BlobInfo.tsx b/ui/blob/BlobInfo.tsx
index 4f93cf3756..c322563fe0 100644
--- a/ui/blob/BlobInfo.tsx
+++ b/ui/blob/BlobInfo.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import type { Blob } from 'types/api/blobs';
 
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
 import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
@@ -30,53 +30,73 @@ const BlobInfo = ({ data, isLoading }: Props) => {
           </Skeleton>
         </GridItem>
       ) }
+
       { data.kzg_proof && (
-        <DetailsInfoItem
-          title="Proof"
-          hint="Zero knowledge proof. Allows for quick verification of commitment"
-          isLoading={ isLoading }
-        >
-          <Skeleton isLoaded={ !isLoading } overflow="hidden" whiteSpace="pre-wrap" wordBreak="break-all" lineHeight={ 6 } my="-2px">
-            { data.kzg_proof }
-            <CopyToClipboard text={ data.kzg_proof } isLoading={ isLoading }/>
-          </Skeleton>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Zero knowledge proof. Allows for quick verification of commitment"
+            isLoading={ isLoading }
+          >
+            Proof
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !isLoading } overflow="hidden" whiteSpace="pre-wrap" wordBreak="break-all" lineHeight={ 6 } my="-2px">
+              { data.kzg_proof }
+              <CopyToClipboard text={ data.kzg_proof } isLoading={ isLoading }/>
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       { data.kzg_commitment && (
-        <DetailsInfoItem
-          title="Commitment"
-          hint="Commitment to the data in the blob"
-          isLoading={ isLoading }
-        >
-          <Skeleton isLoaded={ !isLoading } overflow="hidden" whiteSpace="pre-wrap" wordBreak="break-all" lineHeight={ 6 } my="-2px">
-            { data.kzg_commitment }
-            <CopyToClipboard text={ data.kzg_commitment } isLoading={ isLoading }/>
-          </Skeleton>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Commitment to the data in the blob"
+            isLoading={ isLoading }
+          >
+            Commitment
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !isLoading } overflow="hidden" whiteSpace="pre-wrap" wordBreak="break-all" lineHeight={ 6 } my="-2px">
+              { data.kzg_commitment }
+              <CopyToClipboard text={ data.kzg_commitment } isLoading={ isLoading }/>
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       { data.blob_data && (
-        <DetailsInfoItem
-          title="Size, bytes"
-          hint="Blob size in bytes"
-          isLoading={ isLoading }
-        >
-          <Skeleton isLoaded={ !isLoading } overflow="hidden" whiteSpace="pre-wrap" wordBreak="break-all">
-            { (data.blob_data.replace('0x', '').length / 2).toLocaleString() }
-          </Skeleton>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Blob size in bytes"
+            isLoading={ isLoading }
+          >
+            Size, bytes
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !isLoading } overflow="hidden" whiteSpace="pre-wrap" wordBreak="break-all">
+              { (data.blob_data.replace('0x', '').length / 2).toLocaleString() }
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
       ) }
 
       { data.blob_data && <DetailsInfoItemDivider/> }
 
       { data.transaction_hashes[0] && (
-        <DetailsInfoItem
-          title="Transaction hash"
-          hint="Hash of the transaction with this blob"
-          isLoading={ isLoading }
-        >
-          <TxEntity hash={ data.transaction_hashes[0].transaction_hash } isLoading={ isLoading } noIcon noCopy={ false }/>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Hash of the transaction with this blob"
+            isLoading={ isLoading }
+          >
+        Transaction hash
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <TxEntity hash={ data.transaction_hashes[0].transaction_hash } isLoading={ isLoading } noIcon noCopy={ false }/>
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       <DetailsSponsoredItem isLoading={ isLoading }/>
 
       { data.blob_data && (
diff --git a/ui/block/BlockDetails.pw.tsx b/ui/block/BlockDetails.pw.tsx
index d2868bb5d6..a10a06ef5a 100644
--- a/ui/block/BlockDetails.pw.tsx
+++ b/ui/block/BlockDetails.pw.tsx
@@ -1,10 +1,8 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as blockMock from 'mocks/blocks/block';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import BlockDetails from './BlockDetails';
 import type { BlockQuery } from './useBlockQuery';
@@ -15,77 +13,56 @@ const hooksConfig = {
   },
 };
 
-test('regular block +@mobile +@dark-mode', async({ mount, page }) => {
+test('regular block +@mobile +@dark-mode', async({ render, page }) => {
   const query = {
     data: blockMock.base,
     isPending: false,
   } as BlockQuery;
 
-  const component = await mount(
-    <TestApp>
-      <BlockDetails query={ query }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const component = await render(<BlockDetails query={ query }/>, { hooksConfig });
 
   await page.getByText('View details').click();
 
   await expect(component).toHaveScreenshot();
 });
 
-test('genesis block', async({ mount, page }) => {
+test('genesis block', async({ render, page }) => {
   const query = {
     data: blockMock.genesis,
     isPending: false,
   } as BlockQuery;
 
-  const component = await mount(
-    <TestApp>
-      <BlockDetails query={ query }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const component = await render(<BlockDetails query={ query }/>, { hooksConfig });
 
   await page.getByText('View details').click();
 
   await expect(component).toHaveScreenshot();
 });
 
-test('with blob txs', async({ mount, page }) => {
+test('with blob txs', async({ render, page, mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED', 'true' ],
+  ]);
   const query = {
     data: blockMock.withBlobTxs,
     isPending: false,
   } as BlockQuery;
 
-  const component = await mount(
-    <TestApp>
-      <BlockDetails query={ query }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const component = await render(<BlockDetails query={ query }/>, { hooksConfig });
 
   await page.getByText('View details').click();
 
   await expect(component).toHaveScreenshot();
 });
 
-const customFieldsTest = test.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.viewsEnvs.block.hiddenFields) as any,
-});
-
-customFieldsTest('rootstock custom fields', async({ mount, page }) => {
+test('rootstock custom fields', async({ render, page, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.blockHiddenFields);
   const query = {
     data: blockMock.rootstock,
     isPending: false,
   } as BlockQuery;
 
-  const component = await mount(
-    <TestApp>
-      <BlockDetails query={ query }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const component = await render(<BlockDetails query={ query }/>, { hooksConfig });
 
   await page.getByText('View details').click();
 
diff --git a/ui/block/BlockDetails.tsx b/ui/block/BlockDetails.tsx
index b065cfdb5b..3ade2d9ec2 100644
--- a/ui/block/BlockDetails.tsx
+++ b/ui/block/BlockDetails.tsx
@@ -1,10 +1,11 @@
-import { Grid, GridItem, Text, Link, Box, Tooltip, useColorModeValue, Skeleton } from '@chakra-ui/react';
+import { Grid, GridItem, Text, Link, Box, Tooltip, Skeleton } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import capitalize from 'lodash/capitalize';
 import { useRouter } from 'next/router';
 import React from 'react';
 import { scroller, Element } from 'react-scroll';
 
+import { ARBITRUM_L2_TX_BATCH_STATUSES } from 'types/api/arbitrumL2';
 import { ZKSYNC_L2_TX_BATCH_STATUSES } from 'types/api/zkSyncL2';
 
 import { route } from 'nextjs-routes';
@@ -12,27 +13,33 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import getBlockReward from 'lib/block/getBlockReward';
 import { GWEI, WEI, WEI_IN_GWEI, ZERO } from 'lib/consts';
+import getArbitrumVerificationStepStatus from 'lib/getArbitrumVerificationStepStatus';
 import { space } from 'lib/html-entities';
+import getNetworkValidationActionText from 'lib/networks/getNetworkValidationActionText';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { currencyUnits } from 'lib/units';
+import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA';
+import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
 import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
-import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import PrevNext from 'ui/shared/PrevNext';
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
-import TextSeparator from 'ui/shared/TextSeparator';
+import StatusTag from 'ui/shared/statusTag/StatusTag';
 import Utilization from 'ui/shared/Utilization/Utilization';
 import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps';
 import ZkSyncL2TxnBatchHashesInfo from 'ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo';
 
+import BlockDetailsBaseFeeCelo from './details/BlockDetailsBaseFeeCelo';
 import BlockDetailsBlobInfo from './details/BlockDetailsBlobInfo';
 import type { BlockQuery } from './useBlockQuery';
 
@@ -47,8 +54,6 @@ const BlockDetails = ({ query }: Props) => {
   const router = useRouter();
   const heightOrHash = getQueryParamString(router.query.height_or_hash);
 
-  const separatorColor = useColorModeValue('gray.200', 'gray.700');
-
   const { data, isPlaceholderData } = query;
 
   const handleCutClick = React.useCallback(() => {
@@ -112,13 +117,7 @@ const BlockDetails = ({ query }: Props) => {
     );
   })();
 
-  const verificationTitle = (() => {
-    if (rollupFeature.isEnabled && rollupFeature.type === 'zkEvm') {
-      return 'Sequenced by';
-    }
-
-    return config.chain.verificationType === 'validation' ? 'Validated by' : 'Mined by';
-  })();
+  const verificationTitle = `${ capitalize(getNetworkValidationActionText()) } by`;
 
   const txsNum = (() => {
     const blockTxsNum = (
@@ -127,9 +126,9 @@ const BlockDetails = ({ query }: Props) => {
       </LinkInternal>
     );
 
-    const blockBlobTxsNum = data.blob_tx_count ? (
+    const blockBlobTxsNum = (config.features.dataAvailability.isEnabled && data.blob_tx_count) ? (
       <>
-        <span> and </span>
+        <span> including </span>
         <LinkInternal href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: heightOrHash, tab: 'blob_txs' } }) }>
           { data.blob_tx_count } blob txn{ data.blob_tx_count === 1 ? '' : 's' }
         </LinkInternal>
@@ -163,11 +162,13 @@ const BlockDetails = ({ query }: Props) => {
       templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
       overflow="hidden"
     >
-      <DetailsInfoItem
-        title={ `${ blockTypeLabel } height` }
+      <DetailsInfoItem.Label
         hint="The block height of a particular block is defined as the number of blocks preceding it in the blockchain"
         isLoading={ isPlaceholderData }
       >
+        { blockTypeLabel } height
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData }>
           { data.height }
         </Skeleton>
@@ -180,222 +181,361 @@ const BlockDetails = ({ query }: Props) => {
           isPrevDisabled={ data.height === 0 }
           isLoading={ isPlaceholderData }
         />
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Size"
+      </DetailsInfoItem.Value>
+
+      { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && (
+        <>
+          <DetailsInfoItem.Label
+            hint="The most recent L1 block height as of this L2 block"
+            isLoading={ isPlaceholderData }
+          >
+            L1 block height
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <BlockEntityL1 isLoading={ isPlaceholderData } number={ data.arbitrum.l1_block_height }/>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && !config.UI.views.block.hiddenFields?.batch && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Batch number"
+            isLoading={ isPlaceholderData }
+          >
+            Batch
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            { data.arbitrum.batch_number ?
+              <BatchEntityL2 isLoading={ isPlaceholderData } number={ data.arbitrum.batch_number }/> :
+              <Skeleton isLoaded={ !isPlaceholderData }>Pending</Skeleton> }
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { rollupFeature.isEnabled && rollupFeature.type === 'optimistic' && data.optimism && !config.UI.views.block.hiddenFields?.batch && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Batch number"
+            isLoading={ isPlaceholderData }
+          >
+            Batch
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value columnGap={ 3 }>
+            { data.optimism.internal_id ?
+              <BatchEntityL2 isLoading={ isPlaceholderData } number={ data.optimism.internal_id }/> :
+              <Skeleton isLoaded={ !isPlaceholderData }>Pending</Skeleton> }
+            { data.optimism.batch_data_container && (
+              <OptimisticL2TxnBatchDA
+                container={ data.optimism.batch_data_container }
+                isLoading={ isPlaceholderData }
+              />
+            ) }
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      <DetailsInfoItem.Label
         hint="Size of the block in bytes"
         isLoading={ isPlaceholderData }
       >
+        Size
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData }>
           { data.size.toLocaleString() }
         </Skeleton>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Timestamp"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Date & time at which block was produced."
         isLoading={ isPlaceholderData }
       >
+        Timestamp
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <DetailsTimestamp timestamp={ data.timestamp } isLoading={ isPlaceholderData }/>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Transactions"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="The number of transactions in the block"
         isLoading={ isPlaceholderData }
       >
+        Transactions
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData }>
           { txsNum }
         </Skeleton>
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
+
       { config.features.beaconChain.isEnabled && Boolean(data.withdrawals_count) && (
-        <DetailsInfoItem
-          title="Withdrawals"
-          hint="The number of beacon withdrawals in the block"
-          isLoading={ isPlaceholderData }
-        >
-          <Skeleton isLoaded={ !isPlaceholderData }>
-            <LinkInternal href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: heightOrHash, tab: 'withdrawals' } }) }>
-              { data.withdrawals_count } withdrawal{ data.withdrawals_count === 1 ? '' : 's' }
-            </LinkInternal>
-          </Skeleton>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="The number of beacon withdrawals in the block"
+            isLoading={ isPlaceholderData }
+          >
+            Withdrawals
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !isPlaceholderData }>
+              <LinkInternal href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: heightOrHash, tab: 'withdrawals' } }) }>
+                { data.withdrawals_count } withdrawal{ data.withdrawals_count === 1 ? '' : 's' }
+              </LinkInternal>
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
       ) }
 
-      { rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && data.zksync && (
+      { rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && data.zksync && !config.UI.views.block.hiddenFields?.batch && (
         <>
-          <DetailsInfoItem
-            title="Batch"
+          <DetailsInfoItem.Label
             hint="Batch number"
             isLoading={ isPlaceholderData }
           >
-            { data.zksync.batch_number ? (
-              <BatchEntityL2
-                isLoading={ isPlaceholderData }
-                number={ data.zksync.batch_number }
-              />
-            ) : <Skeleton isLoaded={ !isPlaceholderData }>Pending</Skeleton> }
-          </DetailsInfoItem>
-          <DetailsInfoItem
-            title="Status"
+            Batch
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            { data.zksync.batch_number ?
+              <BatchEntityL2 isLoading={ isPlaceholderData } number={ data.zksync.batch_number }/> :
+              <Skeleton isLoaded={ !isPlaceholderData }>Pending</Skeleton> }
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+      { !config.UI.views.block.hiddenFields?.L1_status && rollupFeature.isEnabled &&
+        ((rollupFeature.type === 'zkSync' && data.zksync) || (rollupFeature.type === 'arbitrum' && data.arbitrum)) &&
+      (
+        <>
+          <DetailsInfoItem.Label
             hint="Status is the short interpretation of the batch lifecycle"
             isLoading={ isPlaceholderData }
           >
-            <VerificationSteps steps={ ZKSYNC_L2_TX_BATCH_STATUSES } currentStep={ data.zksync.status } isLoading={ isPlaceholderData }/>
-          </DetailsInfoItem>
+            Status
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            { rollupFeature.type === 'zkSync' && data.zksync &&
+              <VerificationSteps steps={ ZKSYNC_L2_TX_BATCH_STATUSES } currentStep={ data.zksync.status } isLoading={ isPlaceholderData }/> }
+            { rollupFeature.type === 'arbitrum' && data.arbitrum && (
+              <VerificationSteps
+                steps={ ARBITRUM_L2_TX_BATCH_STATUSES }
+                currentStep={ data.arbitrum.status }
+                currentStepPending={ getArbitrumVerificationStepStatus(data.arbitrum) === 'pending' }
+                isLoading={ isPlaceholderData }
+              />
+            ) }
+          </DetailsInfoItem.Value>
         </>
       ) }
 
       { !config.UI.views.block.hiddenFields?.miner && (
-        <DetailsInfoItem
-          title={ verificationTitle }
-          hint="A block producer who successfully included the block onto the blockchain"
-          columnGap={ 1 }
-          isLoading={ isPlaceholderData }
-        >
-          <AddressEntity
-            address={ data.miner }
+        <>
+          <DetailsInfoItem.Label
+            hint="A block producer who successfully included the block onto the blockchain"
             isLoading={ isPlaceholderData }
-          />
-          { /* api doesn't return the block processing time yet */ }
-          { /* <Text>{ dayjs.duration(block.minedIn, 'second').humanize(true) }</Text> */ }
-        </DetailsInfoItem>
+          >
+            { verificationTitle }
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <AddressEntity
+              address={ data.miner }
+              isLoading={ isPlaceholderData }
+            />
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' &&
+        (data.arbitrum?.commitment_transaction.hash || data.arbitrum?.confirmation_transaction.hash) &&
+      (
+        <>
+          <DetailsInfoItemDivider/>
+          { data.arbitrum?.commitment_transaction.hash && (
+            <>
+              <DetailsInfoItem.Label
+                hint="L1 transaction containing this batch commitment"
+                isLoading={ isPlaceholderData }
+              >
+                Commitment tx
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <TxEntityL1 hash={ data.arbitrum?.commitment_transaction.hash } isLoading={ isPlaceholderData }/>
+                { data.arbitrum?.commitment_transaction.status === 'finalized' && <StatusTag type="ok" text="Finalized" ml={ 2 }/> }
+              </DetailsInfoItem.Value>
+            </>
+          ) }
+          { data.arbitrum?.confirmation_transaction.hash && (
+            <>
+              <DetailsInfoItem.Label
+                hint="L1 transaction containing confirmation of this batch"
+                isLoading={ isPlaceholderData }
+              >
+                Confirmation tx
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <TxEntityL1 hash={ data.arbitrum?.confirmation_transaction.hash } isLoading={ isPlaceholderData }/>
+                { data.arbitrum?.commitment_transaction.status === 'finalized' && <StatusTag type="ok" text="Finalized" ml={ 2 }/> }
+              </DetailsInfoItem.Value>
+            </>
+          ) }
+        </>
       ) }
+
       { !rollupFeature.isEnabled && !totalReward.isEqualTo(ZERO) && !config.UI.views.block.hiddenFields?.total_reward && (
-        <DetailsInfoItem
-          title="Block reward"
-          hint={
-            `For each block, the ${ validatorTitle } is rewarded with a finite amount of ${ config.chain.currency.symbol || 'native token' } 
+        <>
+          <DetailsInfoItem.Label
+            hint={
+              `For each block, the ${ validatorTitle } is rewarded with a finite amount of ${ config.chain.currency.symbol || 'native token' }
           on top of the fees paid for all transactions in the block`
-          }
-          columnGap={ 1 }
-          isLoading={ isPlaceholderData }
-        >
-          <Skeleton isLoaded={ !isPlaceholderData }>
-            { totalReward.dividedBy(WEI).toFixed() } { currencyUnits.ether }
-          </Skeleton>
-          { rewardBreakDown }
-        </DetailsInfoItem>
+            }
+            isLoading={ isPlaceholderData }
+          >
+          Block reward
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value columnGap={ 1 }>
+            <Skeleton isLoaded={ !isPlaceholderData }>
+              { totalReward.dividedBy(WEI).toFixed() } { currencyUnits.ether }
+            </Skeleton>
+            { rewardBreakDown }
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       { data.rewards
         ?.filter(({ type }) => type !== 'Validator Reward' && type !== 'Miner Reward')
         .map(({ type, reward }) => (
-          <DetailsInfoItem
-            key={ type }
-            title={ type }
-            // is this text correct for validators?
-            hint={ `Amount of distributed reward. ${ capitalize(validatorTitle) }s receive a static block reward + Tx fees + uncle fees` }
-          >
-            { BigNumber(reward).dividedBy(WEI).toFixed() } { currencyUnits.ether }
-          </DetailsInfoItem>
+          <React.Fragment key={ type }>
+            <DetailsInfoItem.Label
+              hint={ `Amount of distributed reward. ${ capitalize(validatorTitle) }s receive a static block reward + Tx fees + uncle fees` }
+            >
+              { type }
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value>
+              { BigNumber(reward).dividedBy(WEI).toFixed() } { currencyUnits.ether }
+            </DetailsInfoItem.Value>
+          </React.Fragment>
         ))
       }
 
       <DetailsInfoItemDivider/>
 
-      <DetailsInfoItem
-        title="Gas used"
+      { data.celo?.base_fee && <BlockDetailsBaseFeeCelo data={ data.celo.base_fee }/> }
+
+      <DetailsInfoItem.Label
         hint="The total gas amount used in the block and its percentage of gas filled in the block"
         isLoading={ isPlaceholderData }
       >
+        Gas used
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData }>
           { BigNumber(data.gas_used || 0).toFormat() }
         </Skeleton>
-        <Utilization
-          ml={ 4 }
-          colorScheme="gray"
-          value={ BigNumber(data.gas_used || 0).dividedBy(BigNumber(data.gas_limit)).toNumber() }
+        <BlockGasUsed
+          gasUsed={ data.gas_used }
+          gasLimit={ data.gas_limit }
           isLoading={ isPlaceholderData }
+          ml={ 4 }
+          gasTarget={ data.gas_target_percentage }
         />
-        { data.gas_target_percentage && (
-          <>
-            <TextSeparator color={ separatorColor } mx={ 1 }/>
-            <GasUsedToTargetRatio value={ data.gas_target_percentage } isLoading={ isPlaceholderData }/>
-          </>
-        ) }
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Gas limit"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Total gas limit provided by all transactions in the block"
         isLoading={ isPlaceholderData }
       >
+        Gas limit
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData }>
           { BigNumber(data.gas_limit).toFormat() }
         </Skeleton>
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
+
       { data.minimum_gas_price && (
-        <DetailsInfoItem
-          title="Minimum gas price"
-          hint="The minimum gas price a transaction should have in order to be included in this block"
-          isLoading={ isPlaceholderData }
-        >
-          <Skeleton isLoaded={ !isPlaceholderData }>
-            { BigNumber(data.minimum_gas_price).dividedBy(GWEI).toFormat() } { currencyUnits.gwei }
-          </Skeleton>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="The minimum gas price a transaction should have in order to be included in this block"
+            isLoading={ isPlaceholderData }
+          >
+        Minimum gas price
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !isPlaceholderData }>
+              { BigNumber(data.minimum_gas_price).dividedBy(GWEI).toFormat() } { currencyUnits.gwei }
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       { data.base_fee_per_gas && (
-        <DetailsInfoItem
-          title="Base fee per gas"
-          hint="Minimum fee required per unit of gas. Fee adjusts based on network congestion"
-          isLoading={ isPlaceholderData }
-        >
-          { isPlaceholderData ? (
-            <Skeleton isLoaded={ !isPlaceholderData } h="20px" maxW="380px" w="100%"/>
-          ) : (
-            <>
-              <Text>{ BigNumber(data.base_fee_per_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text>
-              <Text variant="secondary" whiteSpace="pre">
-                { space }({ BigNumber(data.base_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })
-              </Text>
-            </>
-          ) }
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Minimum fee required per unit of gas. Fee adjusts based on network congestion"
+            isLoading={ isPlaceholderData }
+          >
+            Base fee per gas
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            { isPlaceholderData ? (
+              <Skeleton isLoaded={ !isPlaceholderData } h="20px" maxW="380px" w="100%"/>
+            ) : (
+              <>
+                <Text>{ BigNumber(data.base_fee_per_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text>
+                <Text variant="secondary" whiteSpace="pre">
+                  { space }({ BigNumber(data.base_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })
+                </Text>
+              </>
+            ) }
+          </DetailsInfoItem.Value>
+        </>
       ) }
-      { !config.UI.views.block.hiddenFields?.burnt_fees && !burntFees.isEqualTo(ZERO) && (
-        <DetailsInfoItem
-          title="Burnt fees"
-          hint={
-            `Amount of ${ config.chain.currency.symbol || 'native token' } burned from transactions included in the block.
 
-          Equals Block Base Fee per Gas * Gas Used`
-          }
-          isLoading={ isPlaceholderData }
-        >
-          <IconSvg name="flame" boxSize={ 5 } color="gray.500" isLoading={ isPlaceholderData }/>
-          <Skeleton isLoaded={ !isPlaceholderData } ml={ 2 }>
-            { burntFees.dividedBy(WEI).toFixed() } { currencyUnits.ether }
-          </Skeleton>
-          { !txFees.isEqualTo(ZERO) && (
-            <Tooltip label="Burnt fees / Txn fees * 100%">
-              <Box>
-                <Utilization
-                  ml={ 4 }
-                  value={ burntFees.dividedBy(txFees).toNumber() }
-                  isLoading={ isPlaceholderData }
-                />
-              </Box>
-            </Tooltip>
-          ) }
-        </DetailsInfoItem>
+      { !config.UI.views.block.hiddenFields?.burnt_fees && !burntFees.isEqualTo(ZERO) && (
+        <>
+          <DetailsInfoItem.Label
+            hint={
+              `Amount of ${ config.chain.currency.symbol || 'native token' } burned from transactions included in the block.
+              Equals Block Base Fee per Gas * Gas Used`
+            }
+            isLoading={ isPlaceholderData }
+          >
+            Burnt fees
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <IconSvg name="flame" boxSize={ 5 } color="gray.500" isLoading={ isPlaceholderData }/>
+            <Skeleton isLoaded={ !isPlaceholderData } ml={ 2 }>
+              { burntFees.dividedBy(WEI).toFixed() } { currencyUnits.ether }
+            </Skeleton>
+            { !txFees.isEqualTo(ZERO) && (
+              <Tooltip label="Burnt fees / Txn fees * 100%">
+                <Box>
+                  <Utilization
+                    ml={ 4 }
+                    value={ burntFees.dividedBy(txFees).toNumber() }
+                    isLoading={ isPlaceholderData }
+                  />
+                </Box>
+              </Tooltip>
+            ) }
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       { data.priority_fee !== null && BigNumber(data.priority_fee).gt(ZERO) && (
-        <DetailsInfoItem
-          title="Priority fee / Tip"
-          hint="User-defined tips sent to validator for transaction priority/inclusion"
-          isLoading={ isPlaceholderData }
-        >
-          <Skeleton isLoaded={ !isPlaceholderData }>
-            { BigNumber(data.priority_fee).dividedBy(WEI).toFixed() } { currencyUnits.ether }
-          </Skeleton>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="User-defined tips sent to validator for transaction priority/inclusion"
+            isLoading={ isPlaceholderData }
+          >
+            Priority fee / Tip
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !isPlaceholderData }>
+              { BigNumber(data.priority_fee).dividedBy(WEI).toFixed() } { currencyUnits.ether }
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
       ) }
-      { /* api doesn't support extra data yet */ }
-      { /* <DetailsInfoItem
-        title="Extra data"
-        hint={ `Any data that can be included by the ${ validatorTitle } in the block` }
-      >
-        <Text whiteSpace="pre">{ data.extra_data } </Text>
-        <Text variant="secondary">(Hex: { data.extra_data })</Text>
-      </DetailsInfoItem> */ }
 
       { /* CUT */ }
       <GridItem colSpan={{ base: undefined, lg: 2 }}>
@@ -424,121 +564,182 @@ const BlockDetails = ({ query }: Props) => {
           { !isPlaceholderData && <BlockDetailsBlobInfo data={ data }/> }
 
           { data.bitcoin_merged_mining_header && (
-            <DetailsInfoItem
-              title="Bitcoin merged mining header"
-              hint="Merged-mining field: Bitcoin header"
-              flexWrap="nowrap"
-              alignSelf="flex-start"
-            >
-              <Box whiteSpace="nowrap" overflow="hidden">
-                <HashStringShortenDynamic hash={ data.bitcoin_merged_mining_header }/>
-              </Box>
-              <CopyToClipboard text={ data.bitcoin_merged_mining_header }/>
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="Merged-mining field: Bitcoin header"
+              >
+                Bitcoin merged mining header
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value
+                flexWrap="nowrap"
+                alignSelf="flex-start"
+              >
+                <Box whiteSpace="nowrap" overflow="hidden">
+                  <HashStringShortenDynamic hash={ data.bitcoin_merged_mining_header }/>
+                </Box>
+                <CopyToClipboard text={ data.bitcoin_merged_mining_header }/>
+              </DetailsInfoItem.Value>
+            </>
           ) }
+
           { data.bitcoin_merged_mining_coinbase_transaction && (
-            <DetailsInfoItem
-              title="Bitcoin merged mining coinbase transaction"
-              hint="Merged-mining field: Coinbase transaction"
-            >
-              <RawDataSnippet
-                data={ data.bitcoin_merged_mining_coinbase_transaction }
-                isLoading={ isPlaceholderData }
-                showCopy={ false }
-                textareaMaxHeight="100px"
-              />
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="Merged-mining field: Coinbase transaction"
+              >
+                Bitcoin merged mining coinbase transaction
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <RawDataSnippet
+                  data={ data.bitcoin_merged_mining_coinbase_transaction }
+                  isLoading={ isPlaceholderData }
+                  showCopy={ false }
+                  textareaMaxHeight="100px"
+                />
+              </DetailsInfoItem.Value>
+            </>
           ) }
+
           { data.bitcoin_merged_mining_merkle_proof && (
-            <DetailsInfoItem
-              title="Bitcoin merged mining Merkle proof"
-              hint="Merged-mining field: Merkle proof"
-            >
-              <RawDataSnippet
-                data={ data.bitcoin_merged_mining_merkle_proof }
-                isLoading={ isPlaceholderData }
-                showCopy={ false }
-                textareaMaxHeight="100px"
-              />
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="Merged-mining field: Merkle proof"
+              >
+                Bitcoin merged mining Merkle proof
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <RawDataSnippet
+                  data={ data.bitcoin_merged_mining_merkle_proof }
+                  isLoading={ isPlaceholderData }
+                  showCopy={ false }
+                  textareaMaxHeight="100px"
+                />
+              </DetailsInfoItem.Value>
+            </>
           ) }
+
           { data.hash_for_merged_mining && (
-            <DetailsInfoItem
-              title="Hash for merged mining"
-              hint="Merged-mining field: Rootstock block header hash"
-              flexWrap="nowrap"
-              alignSelf="flex-start"
-            >
-              <Box whiteSpace="nowrap" overflow="hidden">
-                <HashStringShortenDynamic hash={ data.hash_for_merged_mining }/>
-              </Box>
-              <CopyToClipboard text={ data.hash_for_merged_mining }/>
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="Merged-mining field: Rootstock block header hash"
+              >
+                Hash for merged mining
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value
+                flexWrap="nowrap"
+                alignSelf="flex-start"
+              >
+                <Box whiteSpace="nowrap" overflow="hidden">
+                  <HashStringShortenDynamic hash={ data.hash_for_merged_mining }/>
+                </Box>
+                <CopyToClipboard text={ data.hash_for_merged_mining }/>
+              </DetailsInfoItem.Value>
+            </>
           ) }
 
-          <DetailsInfoItem
-            title="Difficulty"
+          <DetailsInfoItem.Label
             hint={ `Block difficulty for ${ validatorTitle }, used to calibrate block generation time` }
           >
-            <Box whiteSpace="nowrap" overflow="hidden">
-              <HashStringShortenDynamic hash={ BigNumber(data.difficulty).toFormat() }/>
-            </Box>
-          </DetailsInfoItem>
+            Difficulty
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value overflow="hidden">
+            <HashStringShortenDynamic hash={ BigNumber(data.difficulty).toFormat() }/>
+          </DetailsInfoItem.Value>
+
           { data.total_difficulty && (
-            <DetailsInfoItem
-              title="Total difficulty"
-              hint="Total difficulty of the chain until this block"
-            >
-              <Box whiteSpace="nowrap" overflow="hidden">
+            <>
+              <DetailsInfoItem.Label
+                hint="Total difficulty of the chain until this block"
+              >
+                Total difficulty
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value overflow="hidden">
                 <HashStringShortenDynamic hash={ BigNumber(data.total_difficulty).toFormat() }/>
-              </Box>
-            </DetailsInfoItem>
+              </DetailsInfoItem.Value>
+            </>
           ) }
 
           <DetailsInfoItemDivider/>
 
-          <DetailsInfoItem
-            title="Hash"
+          <DetailsInfoItem.Label
             hint="The SHA256 hash of the block"
-            flexWrap="nowrap"
           >
-            <Box overflow="hidden">
+            Hash
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value flexWrap="nowrap">
+            <Box overflow="hidden" >
               <HashStringShortenDynamic hash={ data.hash }/>
             </Box>
             <CopyToClipboard text={ data.hash }/>
-          </DetailsInfoItem>
+          </DetailsInfoItem.Value>
+
           { data.height > 0 && (
-            <DetailsInfoItem
-              title="Parent hash"
-              hint="The hash of the block from which this block was generated"
-              flexWrap="nowrap"
-            >
-              <LinkInternal
-                href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.height - 1) } }) }
-                overflow="hidden"
-                whiteSpace="nowrap"
+            <>
+              <DetailsInfoItem.Label
+                hint="The hash of the block from which this block was generated"
               >
-                <HashStringShortenDynamic
-                  hash={ data.parent_hash }
-                />
-              </LinkInternal>
-              <CopyToClipboard text={ data.parent_hash }/>
-            </DetailsInfoItem>
+                Parent hash
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value flexWrap="nowrap">
+                <LinkInternal
+                  href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.height - 1) } }) }
+                  overflow="hidden"
+                  whiteSpace="nowrap"
+                >
+                  <HashStringShortenDynamic
+                    hash={ data.parent_hash }
+                  />
+                </LinkInternal>
+                <CopyToClipboard text={ data.parent_hash }/>
+              </DetailsInfoItem.Value>
+            </>
           ) }
-          { /* api doesn't support state root yet */ }
-          { /* <DetailsInfoItem
-            title="State root"
-            hint="The root of the state trie"
-          >
-            <Text wordBreak="break-all" whiteSpace="break-spaces">{ data.state_root }</Text>
-          </DetailsInfoItem> */ }
+
+          { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && (
+            <>
+              <DetailsInfoItem.Label
+                hint="The cumulative number of L2 to L1 transactions as of this block"
+                isLoading={ isPlaceholderData }
+              >
+                Send count
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                { data.arbitrum.send_count.toLocaleString() }
+              </DetailsInfoItem.Value>
+
+              <DetailsInfoItem.Label
+                hint="The root of the Merkle accumulator representing all L2 to L1 transactions as of this block"
+                isLoading={ isPlaceholderData }
+              >
+                Send root
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                { data.arbitrum.send_root }
+              </DetailsInfoItem.Value>
+
+              <DetailsInfoItem.Label
+                hint="The number of delayed L1 to L2 messages read as of this block"
+                isLoading={ isPlaceholderData }
+              >
+                Delayed messages
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                { data.arbitrum.delayed_messages.toLocaleString() }
+              </DetailsInfoItem.Value>
+            </>
+          ) }
+
           { !config.UI.views.block.hiddenFields?.nonce && (
-            <DetailsInfoItem
-              title="Nonce"
-              hint="Block nonce is a value used during mining to demonstrate proof of work for a block"
-            >
-              { data.nonce }
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="Block nonce is a value used during mining to demonstrate proof of work for a block"
+              >
+                Nonce
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                { data.nonce }
+              </DetailsInfoItem.Value>
+            </>
           ) }
         </>
       ) }
diff --git a/ui/block/BlockEpochRewards.tsx b/ui/block/BlockEpochRewards.tsx
new file mode 100644
index 0000000000..86f6785600
--- /dev/null
+++ b/ui/block/BlockEpochRewards.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { BLOCK_EPOCH } from 'stubs/block';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+
+import BlockEpochElectionRewards from './epochRewards/BlockEpochElectionRewards';
+import BlockEpochRewardsDistribution from './epochRewards/BlockEpochRewardsDistribution';
+
+interface Props {
+  heightOrHash: string;
+}
+
+const BlockEpochRewards = ({ heightOrHash }: Props) => {
+  const query = useApiQuery('block_epoch', {
+    pathParams: {
+      height_or_hash: heightOrHash,
+    },
+    queryOptions: {
+      placeholderData: BLOCK_EPOCH,
+    },
+  });
+
+  if (query.isError) {
+    return <DataFetchAlert/>;
+  }
+
+  if (!query.data) {
+    return <span>No block epoch rewards data</span>;
+  }
+
+  return (
+    <>
+      <BlockEpochRewardsDistribution data={ query.data } isLoading={ query.isPlaceholderData }/>
+      <BlockEpochElectionRewards data={ query.data } isLoading={ query.isPlaceholderData }/>
+    </>
+  );
+};
+
+export default React.memo(BlockEpochRewards);
diff --git a/ui/block/BlockWithdrawals.tsx b/ui/block/BlockWithdrawals.tsx
index 3b479fe418..a73b912a32 100644
--- a/ui/block/BlockWithdrawals.tsx
+++ b/ui/block/BlockWithdrawals.tsx
@@ -9,6 +9,7 @@ import BeaconChainWithdrawalsTable from 'ui/withdrawals/beaconChain/BeaconChainW
 type Props = {
   blockWithdrawalsQuery: QueryWithPagesResult<'block_withdrawals'>;
 }
+const TABS_HEIGHT = 88;
 
 const BlockWithdrawals = ({ blockWithdrawalsQuery }: Props) => {
   const content = blockWithdrawalsQuery.data?.items ? (
@@ -24,7 +25,7 @@ const BlockWithdrawals = ({ blockWithdrawalsQuery }: Props) => {
         <BeaconChainWithdrawalsTable
           items={ blockWithdrawalsQuery.data.items }
           isLoading={ blockWithdrawalsQuery.isPlaceholderData }
-          top={ blockWithdrawalsQuery.pagination.isVisible ? 80 : 0 }
+          top={ blockWithdrawalsQuery.pagination.isVisible ? TABS_HEIGHT : 0 }
           view="block"
         />
       </Hide>
diff --git a/ui/block/details/BlockDetailsBaseFeeCelo.pw.tsx b/ui/block/details/BlockDetailsBaseFeeCelo.pw.tsx
new file mode 100644
index 0000000000..699f88b544
--- /dev/null
+++ b/ui/block/details/BlockDetailsBaseFeeCelo.pw.tsx
@@ -0,0 +1,23 @@
+import { Grid } from '@chakra-ui/react';
+import React from 'react';
+
+import type { BlockBaseFeeCelo } from 'types/api/block';
+
+import * as blockMock from 'mocks/blocks/block';
+import { test, expect } from 'playwright/lib';
+
+import BlockDetailsBaseFeeCelo from './BlockDetailsBaseFeeCelo';
+
+test('base view +@mobile', async({ render }) => {
+  const component = await render(
+    <Grid
+      columnGap={ 8 }
+      rowGap={{ base: 3, lg: 3 }}
+      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
+      overflow="hidden"
+    >
+      <BlockDetailsBaseFeeCelo data={ blockMock.celo.celo?.base_fee as BlockBaseFeeCelo }/>
+    </Grid>,
+  );
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/block/details/BlockDetailsBaseFeeCelo.tsx b/ui/block/details/BlockDetailsBaseFeeCelo.tsx
new file mode 100644
index 0000000000..a8d1e78357
--- /dev/null
+++ b/ui/block/details/BlockDetailsBaseFeeCelo.tsx
@@ -0,0 +1,97 @@
+import { Box, Flex, Link } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { AddressParam } from 'types/api/addressParams';
+import type { BlockBaseFeeCelo } from 'types/api/block';
+import type { TokenInfo } from 'types/api/token';
+
+import { WEI, ZERO_ADDRESS } from 'lib/consts';
+import AddressFromTo from 'ui/shared/address/AddressFromTo';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import IconSvg from 'ui/shared/IconSvg';
+
+type ItemProps = BlockBaseFeeCelo['breakdown'][number] & {
+  addressFrom: AddressParam;
+  token: TokenInfo;
+}
+
+const BreakDownItem = ({ amount, percentage, address, addressFrom, token }: ItemProps) => {
+  const isBurning = address.hash === ZERO_ADDRESS;
+
+  return (
+    <Flex alignItems="center" columnGap={ 2 } rowGap={ 1 } flexWrap="wrap">
+      <Box color="text_secondary">{ percentage }% of amount</Box>
+      <Flex columnGap={ 2 }>
+        { BigNumber(amount).dividedBy(WEI).toFixed() }
+        <TokenEntity token={ token } noCopy onlySymbol/>
+      </Flex>
+      { isBurning ? (
+        <>
+          <AddressEntity address={ addressFrom } truncation="constant"/>
+          <IconSvg name="flame" boxSize={ 5 } color="gray.500"/>
+          <Box color="text_secondary">burnt</Box>
+        </>
+      ) : <AddressFromTo from={ addressFrom } to={ address }/> }
+    </Flex>
+  );
+};
+
+interface Props {
+  data: BlockBaseFeeCelo;
+}
+
+const BlockDetailsBaseFeeCelo = ({ data }: Props) => {
+  const totalBaseFee = BigNumber(data.amount).dividedBy(WEI).toFixed();
+
+  const totalFeeLabel = (
+    <Box whiteSpace="pre-wrap">
+      <span>The FeeHandler regularly burns 80% of its tokens. Non-CELO tokens are swapped to CELO beforehand. The remaining 20% are sent to the </span>
+      <Link isExternal href="https://www.ultragreen.money">Green Fund</Link>
+      <span>.</span>
+    </Box>
+  );
+
+  return (
+    <>
+      <DetailsInfoItem.Label
+        hint="The contract receiving the base fee, responsible for handling fee usage. This contract is controlled by governance process."
+      >
+        Base fee handler
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <AddressEntity address={ data.recipient }/>
+      </DetailsInfoItem.Value>
+      <DetailsInfoItem.Label
+        hint={ totalFeeLabel }
+        type="popover"
+      >
+        Base fee total
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value display="block">
+        <Flex columnGap={ 2 }>
+          { totalBaseFee }
+          <TokenEntity token={ data.token } noCopy onlySymbol/>
+        </Flex>
+        { data.breakdown.length > 0 && (
+          <Flex flexDir="column" rowGap={ 2 } mt={ 2 }>
+            { data.breakdown.map((item, index) => (
+              <BreakDownItem
+                key={ index }
+                { ...item }
+                addressFrom={ data.recipient }
+                token={ data.token }
+              />
+            )) }
+          </Flex>
+        ) }
+      </DetailsInfoItem.Value>
+      <DetailsInfoItemDivider/>
+    </>
+  );
+};
+
+export default React.memo(BlockDetailsBaseFeeCelo);
diff --git a/ui/block/details/BlockDetailsBlobInfo.tsx b/ui/block/details/BlockDetailsBlobInfo.tsx
index 71f53b583a..c8a170eb73 100644
--- a/ui/block/details/BlockDetailsBlobInfo.tsx
+++ b/ui/block/details/BlockDetailsBlobInfo.tsx
@@ -7,7 +7,7 @@ import type { Block } from 'types/api/block';
 import { WEI, WEI_IN_GWEI, ZERO } from 'lib/consts';
 import { space } from 'lib/html-entities';
 import { currencyUnits } from 'lib/units';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
 import IconSvg from 'ui/shared/IconSvg';
 import Utilization from 'ui/shared/Utilization/Utilization';
@@ -33,51 +33,67 @@ const BlockDetailsBlobInfo = ({ data }: Props) => {
     <>
 
       { data.blob_gas_price && (
-        <DetailsInfoItem
-          title="Blob gas price"
-          // eslint-disable-next-line max-len
-          hint="Price per unit of gas used for for blob deployment. Blob gas is independent of normal gas. Both gas prices can affect the priority of transaction execution."
-        >
-          <Text>{ BigNumber(data.blob_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text>
-          <Text variant="secondary" whiteSpace="pre">
-            { space }({ BigNumber(data.blob_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })
-          </Text>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            // eslint-disable-next-line max-len
+            hint="Price per unit of gas used for for blob deployment. Blob gas is independent of normal gas. Both gas prices can affect the priority of transaction execution."
+          >
+            Blob gas price
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Text>{ BigNumber(data.blob_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text>
+            <Text variant="secondary" whiteSpace="pre">
+              { space }({ BigNumber(data.blob_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })
+            </Text>
+          </DetailsInfoItem.Value>
+        </>
       ) }
       { data.blob_gas_used && (
-        <DetailsInfoItem
-          title="Blob gas used"
-          hint="Actual amount of gas used by the blobs in this block"
-        >
-          <Text>{ BigNumber(data.blob_gas_used).toFormat() }</Text>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Actual amount of gas used by the blobs in this block"
+          >
+            Blob gas used
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Text>{ BigNumber(data.blob_gas_used).toFormat() }</Text>
+          </DetailsInfoItem.Value>
+        </>
       ) }
       { !burntBlobFees.isEqualTo(ZERO) && (
-        <DetailsInfoItem
-          title="Blob burnt fees"
-          hint={ `Amount of ${ currencyUnits.ether } used for blobs in this block` }
-        >
-          <IconSvg name="flame" boxSize={ 5 } color="gray.500" mr={ 2 }/>
-          { burntBlobFees.dividedBy(WEI).toFixed() } { currencyUnits.ether }
-          { !blobFees.isEqualTo(ZERO) && (
-            <Tooltip label="Blob burnt fees / Txn fees * 100%">
-              <div>
-                <Utilization ml={ 4 } value={ burntBlobFees.dividedBy(blobFees).toNumber() }/>
-              </div>
-            </Tooltip>
-          ) }
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint={ `Amount of ${ currencyUnits.ether } used for blobs in this block` }
+          >
+            Blob burnt fees
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <IconSvg name="flame" boxSize={ 5 } color="gray.500" mr={ 2 }/>
+            { burntBlobFees.dividedBy(WEI).toFixed() } { currencyUnits.ether }
+            { !blobFees.isEqualTo(ZERO) && (
+              <Tooltip label="Blob burnt fees / Txn fees * 100%">
+                <div>
+                  <Utilization ml={ 4 } value={ burntBlobFees.dividedBy(blobFees).toNumber() }/>
+                </div>
+              </Tooltip>
+            ) }
+          </DetailsInfoItem.Value>
+        </>
       ) }
       { data.excess_blob_gas && (
-        <DetailsInfoItem
-          title="Excess blob gas"
-          hint="A running total of blob gas consumed in excess of the target, prior to the block."
-        >
-          <Text>{ BigNumber(data.excess_blob_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text>
-          <Text variant="secondary" whiteSpace="pre">
-            { space }({ BigNumber(data.excess_blob_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })
-          </Text>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="A running total of blob gas consumed in excess of the target, prior to the block."
+          >
+            Excess blob gas
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Text>{ BigNumber(data.excess_blob_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text>
+            <Text variant="secondary" whiteSpace="pre">
+              { space }({ BigNumber(data.excess_blob_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })
+            </Text>
+          </DetailsInfoItem.Value>
+        </>
       ) }
       <DetailsInfoItemDivider/>
     </>
diff --git a/ui/block/details/__screenshots__/BlockDetailsBaseFeeCelo.pw.tsx_default_base-view-mobile-1.png b/ui/block/details/__screenshots__/BlockDetailsBaseFeeCelo.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..f79c5b535a
Binary files /dev/null and b/ui/block/details/__screenshots__/BlockDetailsBaseFeeCelo.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/block/details/__screenshots__/BlockDetailsBaseFeeCelo.pw.tsx_mobile_base-view-mobile-1.png b/ui/block/details/__screenshots__/BlockDetailsBaseFeeCelo.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..a3a82ac3b1
Binary files /dev/null and b/ui/block/details/__screenshots__/BlockDetailsBaseFeeCelo.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/block/epochRewards/BlockEpochElectionRewardDetailsDesktop.tsx b/ui/block/epochRewards/BlockEpochElectionRewardDetailsDesktop.tsx
new file mode 100644
index 0000000000..3f118103c3
--- /dev/null
+++ b/ui/block/epochRewards/BlockEpochElectionRewardDetailsDesktop.tsx
@@ -0,0 +1,102 @@
+import { Box, Grid, GridItem, Text, useColorModeValue } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { BlockEpoch } from 'types/api/block';
+import type { TokenInfo } from 'types/api/token';
+
+import getCurrencyValue from 'lib/getCurrencyValue';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import ContentLoader from 'ui/shared/ContentLoader';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import useLazyLoadedList from 'ui/shared/pagination/useLazyLoadedList';
+
+import { formatRewardType, getRewardDetailsTableTitles } from './utils';
+
+interface Props {
+  type: keyof BlockEpoch['aggregated_election_rewards'];
+  token: TokenInfo;
+}
+
+const BlockEpochElectionRewardDetailsDesktop = ({ type, token }: Props) => {
+  const rootRef = React.useRef<HTMLDivElement>(null);
+
+  const router = useRouter();
+  const heightOrHash = getQueryParamString(router.query.height_or_hash);
+
+  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  const { cutRef, query } = useLazyLoadedList({
+    rootRef,
+    resourceName: 'block_election_rewards',
+    pathParams: { height_or_hash: heightOrHash, reward_type: formatRewardType(type) },
+    queryOptions: {
+      refetchOnMount: false,
+    },
+  });
+
+  const titles = getRewardDetailsTableTitles(type);
+
+  return (
+    <Box
+      p={ 4 }
+      bgColor={ bgColor }
+      borderRadius="base"
+      maxH="360px"
+      overflowY="scroll"
+      fontWeight={ 400 }
+      lineHeight={ 5 }
+    >
+      { query.data && (
+        <Grid
+          gridTemplateColumns="min-content min-content min-content"
+          rowGap={ 5 }
+          columnGap={ 5 }
+        >
+          <GridItem fontWeight={ 600 } mb={ 1 } whiteSpace="nowrap">
+            { titles[0] }
+          </GridItem>
+          <GridItem fontWeight={ 600 } mb={ 1 } whiteSpace="nowrap" textAlign="right">
+            Amount { token.symbol }
+          </GridItem>
+          <GridItem fontWeight={ 600 } mb={ 1 } whiteSpace="nowrap">
+            { titles[1] }
+          </GridItem>
+
+          { query.data?.pages
+            .map((page) => page.items)
+            .flat()
+            .map((item, index) => {
+
+              const amount = getCurrencyValue({
+                value: item.amount,
+                decimals: token.decimals,
+              });
+
+              return (
+                <React.Fragment key={ index }>
+                  <GridItem>
+                    <AddressEntity address={ item.account } noIcon truncation="constant"/>
+                  </GridItem>
+                  <GridItem textAlign="right">
+                    { amount.valueStr }
+                  </GridItem>
+                  <GridItem>
+                    <AddressEntity address={ item.associated_account } noIcon truncation="constant"/>
+                  </GridItem>
+                </React.Fragment>
+              );
+            }) }
+        </Grid>
+      ) }
+
+      { query.isFetching && <ContentLoader maxW="200px" mt={ 3 }/> }
+
+      { query.isError && <Text color="error" mt={ 3 }>Something went wrong. Unable to load next page.</Text> }
+
+      <Box h="0" w="100px" ref={ cutRef }/>
+    </Box>
+  );
+};
+
+export default React.memo(BlockEpochElectionRewardDetailsDesktop);
diff --git a/ui/block/epochRewards/BlockEpochElectionRewardDetailsMobile.tsx b/ui/block/epochRewards/BlockEpochElectionRewardDetailsMobile.tsx
new file mode 100644
index 0000000000..c22fa452d4
--- /dev/null
+++ b/ui/block/epochRewards/BlockEpochElectionRewardDetailsMobile.tsx
@@ -0,0 +1,77 @@
+import { Box, Flex, Text, useColorModeValue } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { BlockEpoch } from 'types/api/block';
+import type { TokenInfo } from 'types/api/token';
+
+import getCurrencyValue from 'lib/getCurrencyValue';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import ContentLoader from 'ui/shared/ContentLoader';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import useLazyLoadedList from 'ui/shared/pagination/useLazyLoadedList';
+
+import { formatRewardType } from './utils';
+
+interface Props {
+  type: keyof BlockEpoch['aggregated_election_rewards'];
+  token: TokenInfo;
+}
+
+const BlockEpochElectionRewardDetailsMobile = ({ type, token }: Props) => {
+  const rootRef = React.useRef<HTMLDivElement>(null);
+
+  const router = useRouter();
+  const heightOrHash = getQueryParamString(router.query.height_or_hash);
+
+  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  const { cutRef, query } = useLazyLoadedList({
+    rootRef,
+    resourceName: 'block_election_rewards',
+    pathParams: { height_or_hash: heightOrHash, reward_type: formatRewardType(type) },
+    queryOptions: {
+      refetchOnMount: false,
+    },
+  });
+
+  return (
+    <Flex flexDir="column" rowGap={ 3 } p={ 4 } bgColor={ bgColor } borderRadius="base" maxH="360px" overflowY="scroll">
+
+      { query.data?.pages
+        .map((page) => page.items)
+        .flat()
+        .map((item, index) => {
+
+          const amount = getCurrencyValue({
+            value: item.amount,
+            decimals: token.decimals,
+          });
+
+          return (
+            <Flex key={ index } flexDir="column" alignItems="flex-start" rowGap={ 1 } fontWeight={ 400 }>
+              <AddressEntity address={ item.account } noIcon w="100%"/>
+              <Flex columnGap={ 1 } alignItems="center">
+                <Box flexShrink={ 0 } color="text_secondary">got</Box>
+                <Box>{ amount.valueStr }</Box>
+                <TokenEntity token={ token } noIcon onlySymbol w="auto"/>
+              </Flex>
+              <Flex columnGap={ 1 } alignItems="center" w="100%">
+                <Box flexShrink={ 0 } color="text_secondary">on behalf of</Box>
+                <AddressEntity address={ item.associated_account } noIcon/>
+              </Flex>
+            </Flex>
+          );
+        }) }
+
+      { query.isFetching && <ContentLoader maxW="200px" mt={ 3 }/> }
+
+      { query.isError && <Text color="error" mt={ 3 }>Something went wrong. Unable to load next page.</Text> }
+
+      <Box h="0" w="100px" mt="-12px" ref={ cutRef }/>
+    </Flex>
+  );
+};
+
+export default React.memo(BlockEpochElectionRewardDetailsMobile);
diff --git a/ui/block/epochRewards/BlockEpochElectionRewardType.tsx b/ui/block/epochRewards/BlockEpochElectionRewardType.tsx
new file mode 100644
index 0000000000..3534837b1f
--- /dev/null
+++ b/ui/block/epochRewards/BlockEpochElectionRewardType.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import type { BlockEpoch } from 'types/api/block';
+
+import Tag from 'ui/shared/chakra/Tag';
+
+interface Props {
+  type: keyof BlockEpoch['aggregated_election_rewards'];
+  isLoading?: boolean;
+}
+
+const BlockEpochElectionRewardType = ({ type, isLoading }: Props) => {
+  switch (type) {
+    case 'delegated_payment':
+      return <Tag colorScheme="blue" isLoading={ isLoading }>Delegated payments</Tag>;
+    case 'group':
+      return <Tag colorScheme="teal" isLoading={ isLoading }>Validator group rewards</Tag>;
+    case 'validator':
+      return <Tag colorScheme="purple" isLoading={ isLoading }>Validator rewards</Tag>;
+    case 'voter':
+      return <Tag colorScheme="yellow" isLoading={ isLoading }>Voting rewards</Tag>;
+  }
+};
+
+export default React.memo(BlockEpochElectionRewardType);
diff --git a/ui/block/epochRewards/BlockEpochElectionRewards.pw.tsx b/ui/block/epochRewards/BlockEpochElectionRewards.pw.tsx
new file mode 100644
index 0000000000..4bc4b1264c
--- /dev/null
+++ b/ui/block/epochRewards/BlockEpochElectionRewards.pw.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import * as blockEpochMock from 'mocks/blocks/epoch';
+import { test, expect } from 'playwright/lib';
+
+import BlockEpochElectionRewards from './BlockEpochElectionRewards';
+
+const heightOrHash = '1234';
+const hooksConfig = {
+  router: {
+    query: { height_or_hash: heightOrHash },
+  },
+};
+
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse(
+    'block_election_rewards',
+    blockEpochMock.electionRewardDetails1,
+    { pathParams: { height_or_hash: heightOrHash, reward_type: 'voter' } },
+  );
+  const component = await render(<BlockEpochElectionRewards data={ blockEpochMock.blockEpoch1 }/>, { hooksConfig });
+  await component.getByText('Voting rewards').click();
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/block/epochRewards/BlockEpochElectionRewards.tsx b/ui/block/epochRewards/BlockEpochElectionRewards.tsx
new file mode 100644
index 0000000000..e5002878eb
--- /dev/null
+++ b/ui/block/epochRewards/BlockEpochElectionRewards.tsx
@@ -0,0 +1,72 @@
+import { Box, Heading, Hide, Show, Table, Tbody, Th, Thead, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { BlockEpoch } from 'types/api/block';
+
+import BlockEpochElectionRewardsListItem from './BlockEpochElectionRewardsListItem';
+import BlockEpochElectionRewardsTableItem from './BlockEpochElectionRewardsTableItem';
+
+interface Props {
+  data: BlockEpoch;
+  isLoading?: boolean;
+}
+
+const BlockEpochElectionRewards = ({ data, isLoading }: Props) => {
+  return (
+    <Box mt={ 8 }>
+      <Heading as="h4" size="sm" mb={ 3 }>Election rewards</Heading>
+      <Hide below="lg" ssr={ false }>
+        <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }}>
+          <Thead>
+            <Tr>
+              <Th width="24px"/>
+              <Th width="180px">Reward type</Th>
+              <Th/>
+              <Th isNumeric>Value</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            { Object.entries(data.aggregated_election_rewards).map((entry) => {
+              const key = entry[0] as keyof BlockEpoch['aggregated_election_rewards'];
+              const value = entry[1];
+
+              if (!value) {
+                return null;
+              }
+
+              return (
+                <BlockEpochElectionRewardsTableItem
+                  key={ key }
+                  type={ key }
+                  isLoading={ isLoading }
+                  data={ value }
+                />
+              );
+            }) }
+          </Tbody>
+        </Table>
+      </Hide>
+      <Show below="lg" ssr={ false }>
+        { Object.entries(data.aggregated_election_rewards).map((entry) => {
+          const key = entry[0] as keyof BlockEpoch['aggregated_election_rewards'];
+          const value = entry[1];
+
+          if (!value) {
+            return null;
+          }
+
+          return (
+            <BlockEpochElectionRewardsListItem
+              key={ key }
+              type={ key }
+              isLoading={ isLoading }
+              data={ value }
+            />
+          );
+        }) }
+      </Show>
+    </Box>
+  );
+};
+
+export default React.memo(BlockEpochElectionRewards);
diff --git a/ui/block/epochRewards/BlockEpochElectionRewardsListItem.tsx b/ui/block/epochRewards/BlockEpochElectionRewardsListItem.tsx
new file mode 100644
index 0000000000..359e08a646
--- /dev/null
+++ b/ui/block/epochRewards/BlockEpochElectionRewardsListItem.tsx
@@ -0,0 +1,78 @@
+import { Box, Flex, IconButton, Skeleton, useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+import type { BlockEpoch, BlockEpochElectionReward } from 'types/api/block';
+
+import getCurrencyValue from 'lib/getCurrencyValue';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import IconSvg from 'ui/shared/IconSvg';
+
+import BlockEpochElectionRewardDetailsMobile from './BlockEpochElectionRewardDetailsMobile';
+import BlockEpochElectionRewardType from './BlockEpochElectionRewardType';
+
+interface Props {
+  data: BlockEpochElectionReward;
+  type: keyof BlockEpoch['aggregated_election_rewards'];
+  isLoading?: boolean;
+}
+
+const BlockEpochElectionRewardsListItem = ({ data, isLoading, type }: Props) => {
+  const section = useDisclosure();
+
+  const { valueStr } = getCurrencyValue({
+    value: data.total,
+    decimals: data.token.decimals,
+    accuracy: 2,
+  });
+
+  return (
+    <Box
+      py={ 3 }
+      borderBottomWidth="1px"
+      borderColor="divider"
+      fontSize="sm"
+      onClick={ isLoading || !data.count ? undefined : section.onToggle }
+      cursor={ isLoading || !data.count ? undefined : 'pointer' }
+    >
+      <Flex my="3px" columnGap={ 3 } alignItems="center" flexWrap="wrap" rowGap={ 1 }>
+        { data.count ? (
+          <Skeleton isLoaded={ !isLoading } display="flex" borderRadius="sm">
+            <IconButton
+              aria-label={ section.isOpen ? 'Collapse section' : 'Expand section' }
+              variant="link"
+              boxSize={ 6 }
+              flexShrink={ 0 }
+              icon={ (
+                <IconSvg
+                  name="arrows/east-mini"
+                  boxSize={ 6 }
+                  transform={ section.isOpen ? 'rotate(270deg)' : 'rotate(180deg)' }
+                  transitionDuration="faster"
+                />
+              ) }
+            />
+          </Skeleton>
+        ) : <Box boxSize={ 6 }/> }
+        <BlockEpochElectionRewardType type={ type } isLoading={ isLoading }/>
+        <Skeleton isLoaded={ !isLoading }>{ data.count }</Skeleton>
+        <Flex columnGap={ 2 } alignItems="center" ml="auto" fontWeight={ 500 }>
+          <Skeleton isLoaded={ !isLoading }>{ valueStr }</Skeleton>
+          <TokenEntity
+            token={ data.token }
+            noCopy
+            onlySymbol
+            w="auto"
+            isLoading={ isLoading }
+          />
+        </Flex>
+      </Flex>
+      { section.isOpen && (
+        <Box mt={ 2 }>
+          <BlockEpochElectionRewardDetailsMobile type={ type } token={ data.token }/>
+        </Box>
+      ) }
+    </Box>
+  );
+};
+
+export default React.memo(BlockEpochElectionRewardsListItem);
diff --git a/ui/block/epochRewards/BlockEpochElectionRewardsTableItem.tsx b/ui/block/epochRewards/BlockEpochElectionRewardsTableItem.tsx
new file mode 100644
index 0000000000..b6062710b7
--- /dev/null
+++ b/ui/block/epochRewards/BlockEpochElectionRewardsTableItem.tsx
@@ -0,0 +1,89 @@
+import { Flex, IconButton, Skeleton, Td, Tr, useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+import type { BlockEpoch, BlockEpochElectionReward } from 'types/api/block';
+
+import getCurrencyValue from 'lib/getCurrencyValue';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import IconSvg from 'ui/shared/IconSvg';
+
+import BlockEpochElectionRewardDetailsDesktop from './BlockEpochElectionRewardDetailsDesktop';
+import BlockEpochElectionRewardType from './BlockEpochElectionRewardType';
+import { getRewardNumText } from './utils';
+
+interface Props {
+  data: BlockEpochElectionReward;
+  type: keyof BlockEpoch['aggregated_election_rewards'];
+  isLoading?: boolean;
+}
+
+const BlockEpochElectionRewardsTableItem = ({ isLoading, data, type }: Props) => {
+  const section = useDisclosure();
+
+  const { valueStr } = getCurrencyValue({
+    value: data.total,
+    decimals: data.token.decimals,
+  });
+
+  const mainRowBorderColor = section.isOpen ? 'transparent' : 'divider';
+
+  return (
+    <>
+      <Tr
+        onClick={ isLoading || !data.count ? undefined : section.onToggle }
+        cursor={ isLoading || !data.count ? undefined : 'pointer' }
+      >
+        <Td borderColor={ mainRowBorderColor }>
+          { Boolean(data.count) && (
+            <Skeleton isLoaded={ !isLoading } display="flex" borderRadius="sm">
+              <IconButton
+                aria-label={ section.isOpen ? 'Collapse section' : 'Expand section' }
+                variant="link"
+                boxSize={ 6 }
+                flexShrink={ 0 }
+                icon={ (
+                  <IconSvg
+                    name="arrows/east-mini"
+                    boxSize={ 6 }
+                    transform={ section.isOpen ? 'rotate(270deg)' : 'rotate(180deg)' }
+                    transitionDuration="faster"
+                  />
+                ) }
+              />
+            </Skeleton>
+          ) }
+        </Td>
+        <Td borderColor={ mainRowBorderColor }>
+          <BlockEpochElectionRewardType type={ type } isLoading={ isLoading }/>
+        </Td>
+        <Td borderColor={ mainRowBorderColor }>
+          <Skeleton isLoaded={ !isLoading } fontWeight={ 400 } my={ 1 }>
+            { getRewardNumText(type, data.count) }
+          </Skeleton>
+        </Td>
+        <Td borderColor={ mainRowBorderColor }>
+          <Flex columnGap={ 2 } alignItems="center" justifyContent="flex-end" my="2px">
+            <Skeleton isLoaded={ !isLoading }>{ valueStr }</Skeleton>
+            <TokenEntity
+              token={ data.token }
+              noCopy
+              onlySymbol
+              w="auto"
+              isLoading={ isLoading }
+            />
+          </Flex>
+        </Td>
+      </Tr>
+      { section.isOpen && (
+        <Tr>
+          <Td/>
+          <Td colSpan={ 3 } pr={ 0 } pt={ 0 }>
+            <BlockEpochElectionRewardDetailsDesktop type={ type } token={ data.token }/>
+          </Td>
+        </Tr>
+      ) }
+    </>
+  );
+};
+
+export default React.memo(BlockEpochElectionRewardsTableItem);
diff --git a/ui/block/epochRewards/BlockEpochRewardsDistribution.tsx b/ui/block/epochRewards/BlockEpochRewardsDistribution.tsx
new file mode 100644
index 0000000000..449bde3730
--- /dev/null
+++ b/ui/block/epochRewards/BlockEpochRewardsDistribution.tsx
@@ -0,0 +1,70 @@
+import { Grid } from '@chakra-ui/react';
+import React from 'react';
+
+import type { BlockEpoch } from 'types/api/block';
+
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import TokenTransferSnippet from 'ui/shared/TokenTransferSnippet/TokenTransferSnippet';
+
+interface Props {
+  data: BlockEpoch;
+  isLoading?: boolean;
+}
+
+const BlockEpochRewardsDistribution = ({ data, isLoading }: Props) => {
+
+  if (!data.distribution.community_transfer && !data.distribution.carbon_offsetting_transfer && !data.distribution.reserve_bolster_transfer) {
+    return null;
+  }
+
+  return (
+    <Grid
+      columnGap={ 8 }
+      rowGap={{ base: 3, lg: 3 }}
+      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
+      overflow="hidden"
+    >
+      { data.distribution.community_transfer && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Funds allocation to support Celo projects and community initiatives"
+            isLoading={ isLoading }
+          >
+            Community fund
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <TokenTransferSnippet data={ data.distribution.community_transfer } isLoading={ isLoading } noAddressIcons={ false }/>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+      { data.distribution.carbon_offsetting_transfer && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Funds allocation to support projects that make Celo carbon-negative"
+            isLoading={ isLoading }
+          >
+            Carbon offset fund
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <TokenTransferSnippet data={ data.distribution.carbon_offsetting_transfer } isLoading={ isLoading } noAddressIcons={ false }/>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+      { data.distribution.reserve_bolster_transfer && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Funds allocation to strengthen Celo’s reserve for network stability and security"
+            isLoading={ isLoading }
+          >
+            Reserve bolster
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <TokenTransferSnippet data={ data.distribution.reserve_bolster_transfer } isLoading={ isLoading } noAddressIcons={ false }/>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+    </Grid>
+  );
+};
+
+export default React.memo(BlockEpochRewardsDistribution);
diff --git a/ui/block/epochRewards/__screenshots__/BlockEpochElectionRewards.pw.tsx_default_base-view-mobile-1.png b/ui/block/epochRewards/__screenshots__/BlockEpochElectionRewards.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..8e374f0aa1
Binary files /dev/null and b/ui/block/epochRewards/__screenshots__/BlockEpochElectionRewards.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/block/epochRewards/__screenshots__/BlockEpochElectionRewards.pw.tsx_mobile_base-view-mobile-1.png b/ui/block/epochRewards/__screenshots__/BlockEpochElectionRewards.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..6bff78753a
Binary files /dev/null and b/ui/block/epochRewards/__screenshots__/BlockEpochElectionRewards.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/block/epochRewards/utils.ts b/ui/block/epochRewards/utils.ts
new file mode 100644
index 0000000000..8c318e1fc1
--- /dev/null
+++ b/ui/block/epochRewards/utils.ts
@@ -0,0 +1,44 @@
+import type { BlockEpoch } from 'types/api/block';
+
+export function getRewardNumText(type: keyof BlockEpoch['aggregated_election_rewards'], num: number) {
+  const postfix1 = num !== 1 ? 's' : '';
+  const postfix2 = num !== 1 ? 'es' : '';
+
+  const text = (() => {
+    switch (type) {
+      case 'delegated_payment':
+        return 'payment' + postfix1;
+      case 'group':
+        return 'group reward' + postfix1;
+      case 'validator':
+        return 'validator' + postfix1;
+      case 'voter':
+        return 'voting address' + postfix2;
+      default:
+        return '';
+    }
+  })();
+
+  if (!text) {
+    return '';
+  }
+
+  return `${ num } ${ text }`;
+}
+
+export function getRewardDetailsTableTitles(type: keyof BlockEpoch['aggregated_election_rewards']): [string, string] {
+  switch (type) {
+    case 'delegated_payment':
+      return [ 'Beneficiary', 'Validator' ];
+    case 'group':
+      return [ 'Validator group', 'Associated validator' ];
+    case 'validator':
+      return [ 'Validator', 'Validator group' ];
+    case 'voter':
+      return [ 'Voter', 'Validator group' ];
+  }
+}
+
+export function formatRewardType(type: keyof BlockEpoch['aggregated_election_rewards']) {
+  return type.replaceAll('_', '-');
+}
diff --git a/ui/blockCountdown/BlockCountdownTimer.tsx b/ui/blockCountdown/BlockCountdownTimer.tsx
new file mode 100644
index 0000000000..98860a4865
--- /dev/null
+++ b/ui/blockCountdown/BlockCountdownTimer.tsx
@@ -0,0 +1,55 @@
+import { HStack, StackDivider, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import { SECOND } from 'lib/consts';
+
+import BlockCountdownTimerItem from './BlockCountdownTimerItem';
+import splitSecondsInPeriods from './splitSecondsInPeriods';
+
+interface Props {
+  value: number;
+  onFinish: () => void;
+}
+
+const BlockCountdownTimer = ({ value: initialValue, onFinish }: Props) => {
+
+  const [ value, setValue ] = React.useState(initialValue);
+
+  const bgColor = useColorModeValue('gray.50', 'whiteAlpha.100');
+
+  React.useEffect(() => {
+    const intervalId = window.setInterval(() => {
+      setValue((prev) => {
+        if (prev > 1) {
+          return prev - 1;
+        }
+
+        onFinish();
+        return 0;
+      });
+    }, SECOND);
+
+    return () => {
+      window.clearInterval(intervalId);
+    };
+  }, [ initialValue, onFinish ]);
+
+  const periods = splitSecondsInPeriods(value);
+
+  return (
+    <HStack
+      bgColor={ bgColor }
+      mt={{ base: 6, lg: 8 }}
+      p={{ base: 3, lg: 4 }}
+      borderRadius="base"
+      divider={ <StackDivider borderColor="divider"/> }
+    >
+      <BlockCountdownTimerItem label="Days" value={ periods.days }/>
+      <BlockCountdownTimerItem label="Hours" value={ periods.hours }/>
+      <BlockCountdownTimerItem label="Minutes" value={ periods.minutes }/>
+      <BlockCountdownTimerItem label="Seconds" value={ periods.seconds }/>
+    </HStack>
+  );
+};
+
+export default React.memo(BlockCountdownTimer);
diff --git a/ui/blockCountdown/BlockCountdownTimerItem.tsx b/ui/blockCountdown/BlockCountdownTimerItem.tsx
new file mode 100644
index 0000000000..e653de2a59
--- /dev/null
+++ b/ui/blockCountdown/BlockCountdownTimerItem.tsx
@@ -0,0 +1,32 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import TruncatedValue from 'ui/shared/TruncatedValue';
+
+interface Props {
+  label: string;
+  value: string;
+}
+
+const BlockCountdownTimerItem = ({ label, value }: Props) => {
+  return (
+    <Box
+      minW={{ base: '70px', lg: '100px' }}
+      textAlign="center"
+      overflow="hidden"
+      flex="1 1 auto"
+    >
+      <TruncatedValue
+        value={ value }
+        fontFamily="heading"
+        fontSize={{ base: '40px', lg: '48px' }}
+        lineHeight="48px"
+        fontWeight={ 600 }
+        w="100%"
+      />
+      <Box fontSize="sm" lineHeight="20px" mt={ 1 } color="text_secondary">{ label }</Box>
+    </Box>
+  );
+};
+
+export default React.memo(BlockCountdownTimerItem);
diff --git a/ui/blockCountdown/createGoogleCalendarLink.ts b/ui/blockCountdown/createGoogleCalendarLink.ts
new file mode 100644
index 0000000000..da45281f24
--- /dev/null
+++ b/ui/blockCountdown/createGoogleCalendarLink.ts
@@ -0,0 +1,30 @@
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import dayjs from 'lib/date/dayjs';
+interface Params {
+  timeFromNow: number;
+  blockHeight: string;
+}
+
+const DATE_FORMAT = 'YYYYMMDDTHHmm';
+
+export default function createGoogleCalendarLink({ timeFromNow, blockHeight }: Params): string {
+
+  const date = dayjs().add(timeFromNow, 's');
+  const name = `Block #${ blockHeight } reminder | ${ config.chain.name }`;
+  const description = `#${ blockHeight } block creation time on ${ config.chain.name } blockchain.`;
+  const startTime = date.format(DATE_FORMAT);
+  const endTime = date.add(15, 'minutes').format(DATE_FORMAT);
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const blockUrl = config.app.baseUrl + route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: blockHeight } });
+
+  const url = new URL('calendar/render', 'https://www.google.com/');
+  url.searchParams.append('action', 'TEMPLATE');
+  url.searchParams.append('text', name);
+  url.searchParams.append('details', description + '\n' + blockUrl);
+  url.searchParams.append('dates', `${ startTime }/${ endTime }`);
+  url.searchParams.append('ctz', timeZone);
+
+  return url.toString();
+}
diff --git a/ui/blockCountdown/createIcsFileBlob.ts b/ui/blockCountdown/createIcsFileBlob.ts
new file mode 100644
index 0000000000..8f53e52848
--- /dev/null
+++ b/ui/blockCountdown/createIcsFileBlob.ts
@@ -0,0 +1,35 @@
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import type dayjs from 'lib/date/dayjs';
+
+interface Params {
+  date: dayjs.Dayjs;
+  blockHeight: string;
+}
+
+const DATE_FORMAT = 'YYYYMMDDTHHmmss';
+
+export default function createIcsFileBlob({ date, blockHeight }: Params): Blob {
+  const name = `Block #${ blockHeight } reminder | ${ config.chain.name }`;
+  const description = `#${ blockHeight } block creation time on ${ config.chain.name } blockchain.`;
+  const startTime = date.format(DATE_FORMAT);
+  const endTime = date.add(15, 'minutes').format(DATE_FORMAT);
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const blockUrl = config.app.baseUrl + route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: blockHeight } });
+
+  const icsContent = `BEGIN:VCALENDAR
+VERSION:2.0
+BEGIN:VEVENT
+SUMMARY:${ name }
+DESCRIPTION:${ description }
+DTSTART;TZID=${ timeZone }:${ startTime }
+DTEND;TZID=${ timeZone }:${ endTime }
+URL:${ blockUrl }
+END:VEVENT
+END:VCALENDAR`;
+
+  const blob = new Blob([ icsContent ], { type: 'text/calendar' });
+
+  return blob;
+}
diff --git a/ui/blockCountdown/splitSecondsInPeriods.ts b/ui/blockCountdown/splitSecondsInPeriods.ts
new file mode 100644
index 0000000000..b187ba5e0e
--- /dev/null
+++ b/ui/blockCountdown/splitSecondsInPeriods.ts
@@ -0,0 +1,15 @@
+import _padStart from 'lodash/padStart';
+
+export default function splitSecondsInPeriods(value: number) {
+  const seconds = value % 60;
+  const minutes = (value - seconds) / 60 % 60;
+  const hours = (value - seconds - minutes * 60) / (60 * 60) % 24;
+  const days = (value - seconds - minutes * 60 - hours * 60 * 60) / (60 * 60 * 24);
+
+  return {
+    seconds: _padStart(String(seconds), 2, '0'),
+    minutes: _padStart(String(minutes), 2, '0'),
+    hours: _padStart(String(hours), 2, '0'),
+    days: _padStart(String(days), 2, '0'),
+  };
+}
diff --git a/ui/blocks/BlockTimestamp.tsx b/ui/blocks/BlockTimestamp.tsx
deleted file mode 100644
index 1f7b7f4325..0000000000
--- a/ui/blocks/BlockTimestamp.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Skeleton, chakra } from '@chakra-ui/react';
-import React from 'react';
-
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
-
-interface Props {
-  ts: string;
-  isEnabled?: boolean;
-  isLoading?: boolean;
-  className?: string;
-}
-
-const BlockTimestamp = ({ ts, isEnabled, isLoading, className }: Props) => {
-  const timeAgo = useTimeAgoIncrement(ts, isEnabled);
-
-  return (
-    <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight={ 400 } className={ className } display="inline-block">
-      <span>{ timeAgo }</span>
-    </Skeleton>
-  );
-};
-
-export default React.memo(chakra(BlockTimestamp));
diff --git a/ui/blocks/BlocksContent.tsx b/ui/blocks/BlocksContent.tsx
index 3a0faa67e6..65862ca1ca 100644
--- a/ui/blocks/BlocksContent.tsx
+++ b/ui/blocks/BlocksContent.tsx
@@ -5,6 +5,8 @@ import React from 'react';
 import type { SocketMessage } from 'lib/socket/types';
 import type { BlockType, BlocksResponse } from 'types/api/block';
 
+import { route } from 'nextjs-routes';
+
 import { getResourceKey } from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useSocketChannel from 'lib/socket/useSocketChannel';
@@ -13,18 +15,23 @@ import BlocksList from 'ui/blocks/BlocksList';
 import BlocksTable from 'ui/blocks/BlocksTable';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import Pagination from 'ui/shared/pagination/Pagination';
 import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 
 const OVERLOAD_COUNT = 75;
+const TABS_HEIGHT = 88;
 
 interface Props {
   type?: BlockType;
-  query: QueryWithPagesResult<'blocks'>;
+  query: QueryWithPagesResult<'blocks'> | QueryWithPagesResult<'optimistic_l2_txn_batch_blocks'>;
+  enableSocket?: boolean;
+  top?: number;
 }
 
-const BlocksContent = ({ type, query }: Props) => {
+const BlocksContent = ({ type, query, enableSocket = true, top }: Props) => {
   const queryClient = useQueryClient();
   const isMobile = useIsMobile();
   const [ socketAlert, setSocketAlert ] = React.useState('');
@@ -70,7 +77,7 @@ const BlocksContent = ({ type, query }: Props) => {
     topic: 'blocks:new_block',
     onSocketClose: handleSocketClose,
     onSocketError: handleSocketError,
-    isDisabled: query.isPlaceholderData || query.isError || query.pagination.page !== 1,
+    isDisabled: query.isPlaceholderData || query.isError || query.pagination.page !== 1 || !enableSocket,
   });
   useSocketMessage({
     channel,
@@ -81,7 +88,7 @@ const BlocksContent = ({ type, query }: Props) => {
   const content = query.data?.items ? (
     <>
       <Box display={{ base: 'block', lg: 'none' }}>
-        { query.pagination.page === 1 && (
+        { query.pagination.page === 1 && enableSocket && (
           <SocketNewItemsNotice.Mobile
             url={ window.location.href }
             num={ newItemsCount }
@@ -95,10 +102,10 @@ const BlocksContent = ({ type, query }: Props) => {
       <Box display={{ base: 'none', lg: 'block' }}>
         <BlocksTable
           data={ query.data.items }
-          top={ query.pagination.isVisible ? 80 : 0 }
+          top={ top || (query.pagination.isVisible ? TABS_HEIGHT : 0) }
           page={ query.pagination.page }
           isLoading={ query.isPlaceholderData }
-          showSocketInfo={ query.pagination.page === 1 }
+          showSocketInfo={ query.pagination.page === 1 && enableSocket }
           socketInfoNum={ newItemsCount }
           socketInfoAlert={ socketAlert }
         />
@@ -106,8 +113,12 @@ const BlocksContent = ({ type, query }: Props) => {
     </>
   ) : null;
 
-  const actionBar = isMobile && query.pagination.isVisible ? (
+  const actionBar = isMobile ? (
     <ActionBar mt={ -6 }>
+      <LinkInternal display="inline-flex" alignItems="center" href={ route({ pathname: '/block/countdown' }) }>
+        <IconSvg name="hourglass" boxSize={ 5 } mr={ 2 }/>
+        <span>Block countdown</span>
+      </LinkInternal>
       <Pagination ml="auto" { ...query.pagination }/>
     </ActionBar>
   ) : null;
diff --git a/ui/blocks/BlocksListItem.tsx b/ui/blocks/BlocksListItem.tsx
index b037221691..6bf4d34bbf 100644
--- a/ui/blocks/BlocksListItem.tsx
+++ b/ui/blocks/BlocksListItem.tsx
@@ -1,4 +1,4 @@
-import { Flex, Skeleton, Text, Box, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Skeleton, Text, Box, Tooltip } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import capitalize from 'lodash/capitalize';
 import React from 'react';
@@ -12,14 +12,13 @@ import getBlockTotalReward from 'lib/block/getBlockTotalReward';
 import { WEI } from 'lib/consts';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import { currencyUnits } from 'lib/units';
-import BlockTimestamp from 'ui/blocks/BlockTimestamp';
+import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
-import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
-import TextSeparator from 'ui/shared/TextSeparator';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 interface Props {
@@ -35,8 +34,6 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
   const burntFees = BigNumber(data.burnt_fees || 0);
   const txFees = BigNumber(data.tx_fees || 0);
 
-  const separatorColor = useColorModeValue('gray.200', 'gray.700');
-
   return (
     <ListItemMobile rowGap={ 3 } key={ String(data.height) } isAnimated>
       <Flex justifyContent="space-between" w="100%">
@@ -48,8 +45,20 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
             noIcon
             fontWeight={ 600 }
           />
+          { data.celo?.is_epoch_block && (
+            <Tooltip label={ `Finalized epoch #${ data.celo.epoch_number }` }>
+              <IconSvg name="checkered_flag" boxSize={ 5 } p="1px" isLoading={ isLoading } flexShrink={ 0 }/>
+            </Tooltip>
+          ) }
         </Flex>
-        <BlockTimestamp ts={ data.timestamp } isEnabled={ enableTimeIncrement } isLoading={ isLoading }/>
+        <TimeAgoWithTooltip
+          timestamp={ data.timestamp }
+          enableIncrement={ enableTimeIncrement }
+          isLoading={ isLoading }
+          color="text_secondary"
+          fontWeight={ 400 }
+          display="inline-block"
+        />
       </Flex>
       <Flex columnGap={ 2 }>
         <Text fontWeight={ 500 }>Size</Text>
@@ -85,13 +94,12 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
           <Skeleton isLoaded={ !isLoading } display="inline-block" color="text_secondary" mr={ 4 }>
             <span>{ BigNumber(data.gas_used || 0).toFormat() }</span>
           </Skeleton>
-          <Utilization colorScheme="gray" value={ BigNumber(data.gas_used || 0).div(BigNumber(data.gas_limit)).toNumber() } isLoading={ isLoading }/>
-          { data.gas_target_percentage && (
-            <>
-              <TextSeparator color={ separatorColor } mx={ 1 }/>
-              <GasUsedToTargetRatio value={ data.gas_target_percentage } isLoading={ isLoading }/>
-            </>
-          ) }
+          <BlockGasUsed
+            gasUsed={ data.gas_used }
+            gasLimit={ data.gas_limit }
+            isLoading={ isLoading }
+            gasTarget={ data.gas_target_percentage }
+          />
         </Flex>
       </Box>
       { !isRollup && !config.UI.views.block.hiddenFields?.total_reward && (
diff --git a/ui/blocks/BlocksTabSlot.tsx b/ui/blocks/BlocksTabSlot.tsx
index d89d248ad9..73504f8642 100644
--- a/ui/blocks/BlocksTabSlot.tsx
+++ b/ui/blocks/BlocksTabSlot.tsx
@@ -3,9 +3,13 @@ import React from 'react';
 
 import type { PaginationParams } from 'ui/shared/pagination/types';
 
+import { route } from 'nextjs-routes';
+
 import useApiQuery from 'lib/api/useApiQuery';
 import { nbsp } from 'lib/html-entities';
 import { HOMEPAGE_STATS } from 'stubs/stats';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import Pagination from 'ui/shared/pagination/Pagination';
 
 interface Props {
@@ -31,6 +35,10 @@ const BlocksTabSlot = ({ pagination }: Props) => {
           </Skeleton>
         </Box>
       ) }
+      <LinkInternal display="inline-flex" alignItems="center" href={ route({ pathname: '/block/countdown' }) }>
+        <IconSvg name="hourglass" boxSize={ 5 } mr={ 2 }/>
+        <span>Block countdown</span>
+      </LinkInternal>
       <Pagination my={ 1 } { ...pagination }/>
     </Flex>
   );
diff --git a/ui/blocks/BlocksTable.tsx b/ui/blocks/BlocksTable.tsx
index 9a422d0de5..410c238520 100644
--- a/ui/blocks/BlocksTable.tsx
+++ b/ui/blocks/BlocksTable.tsx
@@ -43,7 +43,7 @@ const BlocksTable = ({ data, isLoading, top, page, showSocketInfo, socketInfoNum
       <Table variant="simple" minWidth="1040px" size="md" fontWeight={ 500 }>
         <Thead top={ top }>
           <Tr>
-            <Th width="125px">Block</Th>
+            <Th width="150px">Block</Th>
             <Th width="120px">Size, bytes</Th>
             { !config.UI.views.block.hiddenFields?.miner &&
             <Th width={ `${ VALIDATOR_COL_WEIGHT / widthBase * 100 }%` } minW="160px">{ capitalize(getNetworkValidatorTitle()) }</Th> }
diff --git a/ui/blocks/BlocksTableItem.tsx b/ui/blocks/BlocksTableItem.tsx
index fd5e434bcc..80af501a61 100644
--- a/ui/blocks/BlocksTableItem.tsx
+++ b/ui/blocks/BlocksTableItem.tsx
@@ -10,13 +10,12 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
 import { WEI } from 'lib/consts';
-import BlockTimestamp from 'ui/blocks/BlockTimestamp';
+import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
-import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkInternal from 'ui/shared/LinkInternal';
-import TextSeparator from 'ui/shared/TextSeparator';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 interface Props {
@@ -32,7 +31,6 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
   const burntFees = BigNumber(data.burnt_fees || 0);
   const txFees = BigNumber(data.tx_fees || 0);
 
-  const separatorColor = useColorModeValue('gray.200', 'gray.700');
   const burntFeesIconColor = useColorModeValue('gray.500', 'inherit');
 
   return (
@@ -46,6 +44,11 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
     >
       <Td fontSize="sm">
         <Flex columnGap={ 2 } alignItems="center" mb={ 2 }>
+          { data.celo?.is_epoch_block && (
+            <Tooltip label={ `Finalized epoch #${ data.celo.epoch_number }` }>
+              <IconSvg name="checkered_flag" boxSize={ 5 } p="1px" isLoading={ isLoading } flexShrink={ 0 }/>
+            </Tooltip>
+          ) }
           <Tooltip isDisabled={ data.type !== 'reorg' } label="Chain reorganizations">
             <BlockEntity
               isLoading={ isLoading }
@@ -58,7 +61,14 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
             />
           </Tooltip>
         </Flex>
-        <BlockTimestamp ts={ data.timestamp } isEnabled={ enableTimeIncrement } isLoading={ isLoading }/>
+        <TimeAgoWithTooltip
+          timestamp={ data.timestamp }
+          enableIncrement={ enableTimeIncrement }
+          isLoading={ isLoading }
+          color="text_secondary"
+          fontWeight={ 400 }
+          display="inline-block"
+        />
       </Td>
       <Td fontSize="sm">
         <Skeleton isLoaded={ !isLoading } display="inline-block">
@@ -86,33 +96,24 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
           </Skeleton>
         ) : data.tx_count }
       </Td>
+      <Td fontSize="sm">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ BigNumber(data.gas_used || 0).toFormat() }</Skeleton>
+        <Flex mt={ 2 }>
+          <BlockGasUsed
+            gasUsed={ data.gas_used }
+            gasLimit={ data.gas_limit }
+            isLoading={ isLoading }
+            gasTarget={ data.gas_target_percentage }
+          />
+        </Flex>
+      </Td>
       { !isRollup && !config.UI.views.block.hiddenFields?.total_reward && (
         <Td fontSize="sm">
-          <Skeleton isLoaded={ !isLoading } display="inline-block">{ BigNumber(data.gas_used || 0).toFormat() }</Skeleton>
-          <Flex mt={ 2 }>
-            <Tooltip label={ isLoading ? undefined : 'Gas Used %' }>
-              <Box>
-                <Utilization
-                  colorScheme="gray"
-                  value={ BigNumber(data.gas_used || 0).dividedBy(BigNumber(data.gas_limit)).toNumber() }
-                  isLoading={ isLoading }
-                />
-              </Box>
-            </Tooltip>
-            { data.gas_target_percentage && (
-              <>
-                <TextSeparator color={ separatorColor } mx={ 1 }/>
-                <GasUsedToTargetRatio value={ data.gas_target_percentage } isLoading={ isLoading }/>
-              </>
-            ) }
-          </Flex>
+          <Skeleton isLoaded={ !isLoading } display="inline-block">
+            { totalReward.toFixed(8) }
+          </Skeleton>
         </Td>
       ) }
-      <Td fontSize="sm">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
-          { totalReward.toFixed(8) }
-        </Skeleton>
-      </Td>
       { !isRollup && !config.UI.views.block.hiddenFields?.burnt_fees && (
         <Td fontSize="sm">
           <Flex alignItems="center" columnGap={ 2 }>
diff --git a/ui/contractVerification/ContractVerificationForm.pw.tsx b/ui/contractVerification/ContractVerificationForm.pw.tsx
index 44b219f38d..245cb1df31 100644
--- a/ui/contractVerification/ContractVerificationForm.pw.tsx
+++ b/ui/contractVerification/ContractVerificationForm.pw.tsx
@@ -1,10 +1,10 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import type { SmartContractVerificationConfig } from 'types/api/contract';
+import type { SmartContractVerificationConfig } from 'types/client/contract';
 
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
 import * as socketServer from 'playwright/fixtures/socketServer';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import ContractVerificationForm from './ContractVerificationForm';
 
@@ -38,6 +38,8 @@ const formConfig: SmartContractVerificationConfig = {
     'vyper-code',
     'vyper-multi-part',
     'vyper-standard-input',
+    'solidity-hardhat',
+    'solidity-foundry',
   ],
   vyper_compiler_versions: [
     'v0.3.7+commit.6020b8bb',
@@ -72,13 +74,8 @@ const formConfig: SmartContractVerificationConfig = {
   },
 };
 
-test('flatten source code method +@dark-mode +@mobile', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <ContractVerificationForm config={ formConfig } hash={ hash }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('flatten source code method +@dark-mode +@mobile', async({ render, page }) => {
+  const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
 
   // select license
   await component.getByLabel(/contract license/i).focus();
@@ -88,7 +85,7 @@ test('flatten source code method +@dark-mode +@mobile', async({ mount, page }) =
   // select method
   await component.getByLabel(/verification method/i).focus();
   await component.getByLabel(/verification method/i).fill('solidity');
-  await page.getByRole('button', { name: /flattened source code/i }).click();
+  await page.getByRole('button', { name: /single file/i }).click();
 
   await page.getByText(/add contract libraries/i).click();
   await page.locator('button[aria-label="add"]').click();
@@ -96,13 +93,8 @@ test('flatten source code method +@dark-mode +@mobile', async({ mount, page }) =
   await expect(component).toHaveScreenshot();
 });
 
-test('standard input json method', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <ContractVerificationForm config={ formConfig } hash={ hash }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('standard input json method', async({ render, page }) => {
+  const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
 
   // select method
   await component.getByLabel(/verification method/i).focus();
@@ -113,17 +105,13 @@ test('standard input json method', async({ mount, page }) => {
 });
 
 test.describe('sourcify', () => {
-  const testWithSocket = test.extend<socketServer.SocketServerFixture>({
-    createSocket: socketServer.createSocket,
-  });
-  testWithSocket.describe.configure({ mode: 'serial', timeout: 20_000 });
+  test.describe.configure({ mode: 'serial', timeout: 20_000 });
 
-  testWithSocket('with multiple contracts', async({ mount, page, createSocket }) => {
-    const component = await mount(
-      <TestApp withSocket>
-        <ContractVerificationForm config={ formConfig } hash={ hash }/>
-      </TestApp>,
+  test('with multiple contracts', async({ render, page, createSocket }) => {
+    const component = await render(
+      <ContractVerificationForm config={ formConfig } hash={ hash }/>,
       { hooksConfig },
+      { withSocket: true },
     );
 
     // select method
@@ -163,13 +151,8 @@ test.describe('sourcify', () => {
   });
 });
 
-test('multi-part files method', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <ContractVerificationForm config={ formConfig } hash={ hash }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('multi-part files method', async({ render, page }) => {
+  const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
 
   // select method
   await component.getByLabel(/verification method/i).focus();
@@ -179,13 +162,8 @@ test('multi-part files method', async({ mount, page }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('vyper contract method', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <ContractVerificationForm config={ formConfig } hash={ hash }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('vyper contract method', async({ render, page }) => {
+  const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
 
   // select method
   await component.getByLabel(/verification method/i).focus();
@@ -195,13 +173,8 @@ test('vyper contract method', async({ mount, page }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('vyper multi-part method', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <ContractVerificationForm config={ formConfig } hash={ hash }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('vyper multi-part method', async({ render, page }) => {
+  const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
 
   // select method
   await component.getByLabel(/verification method/i).focus();
@@ -211,13 +184,8 @@ test('vyper multi-part method', async({ mount, page }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('vyper vyper-standard-input method', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <ContractVerificationForm config={ formConfig } hash={ hash }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('vyper vyper-standard-input method', async({ render, page }) => {
+  const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
 
   // select method
   await component.getByLabel(/verification method/i).focus();
@@ -226,3 +194,39 @@ test('vyper vyper-standard-input method', async({ mount, page }) => {
 
   await expect(component).toHaveScreenshot();
 });
+
+test('solidity-hardhat method', async({ render, page }) => {
+  const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
+
+  // select method
+  await component.getByLabel(/verification method/i).focus();
+  await component.getByLabel(/verification method/i).fill('hardhat');
+  await page.getByRole('button', { name: /hardhat/i }).click();
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('solidity-foundry method', async({ render, page }) => {
+  const component = await render(<ContractVerificationForm config={ formConfig } hash={ hash }/>, { hooksConfig });
+
+  // select method
+  await component.getByLabel(/verification method/i).focus();
+  await component.getByLabel(/verification method/i).fill('foundry');
+  await page.getByRole('button', { name: /foundry/i }).click();
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('verification of zkSync contract', async({ render, mockEnvs }) => {
+  const zkSyncFormConfig: SmartContractVerificationConfig = {
+    ...formConfig,
+    verification_options: [ 'standard-input' ],
+    zk_compiler_versions: [ 'v1.4.1', 'v1.4.0', 'v1.3.23', 'v1.3.22' ],
+    zk_optimization_modes: [ '0', '1', '2', '3', 's', 'z' ],
+  };
+
+  await mockEnvs(ENVS_MAP.zkSyncRollup);
+  const component = await render(<ContractVerificationForm config={ zkSyncFormConfig } hash={ hash }/>, { hooksConfig });
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/contractVerification/ContractVerificationForm.tsx b/ui/contractVerification/ContractVerificationForm.tsx
index 8b77e1010c..4457b64280 100644
--- a/ui/contractVerification/ContractVerificationForm.tsx
+++ b/ui/contractVerification/ContractVerificationForm.tsx
@@ -5,7 +5,8 @@ import { useForm, FormProvider } from 'react-hook-form';
 
 import type { FormFields } from './types';
 import type { SocketMessage } from 'lib/socket/types';
-import type { SmartContractVerificationMethod, SmartContractVerificationConfig, SmartContract } from 'types/api/contract';
+import type { SmartContract, SmartContractVerificationMethodApi } from 'types/api/contract';
+import type { SmartContractVerificationConfig } from 'types/client/contract';
 
 import { route } from 'nextjs-routes';
 
@@ -22,6 +23,8 @@ import ContractVerificationFieldLicenseType from './fields/ContractVerificationF
 import ContractVerificationFieldMethod from './fields/ContractVerificationFieldMethod';
 import ContractVerificationFlattenSourceCode from './methods/ContractVerificationFlattenSourceCode';
 import ContractVerificationMultiPartFile from './methods/ContractVerificationMultiPartFile';
+import ContractVerificationSolidityFoundry from './methods/ContractVerificationSolidityFoundry';
+import ContractVerificationSolidityHardhat from './methods/ContractVerificationSolidityHardhat';
 import ContractVerificationSourcify from './methods/ContractVerificationSourcify';
 import ContractVerificationStandardInput from './methods/ContractVerificationStandardInput';
 import ContractVerificationVyperContract from './methods/ContractVerificationVyperContract';
@@ -30,7 +33,7 @@ import ContractVerificationVyperStandardInput from './methods/ContractVerificati
 import { prepareRequestBody, formatSocketErrors, getDefaultValues, METHOD_LABELS } from './utils';
 
 interface Props {
-  method?: SmartContractVerificationMethod;
+  method?: SmartContractVerificationMethodApi;
   config: SmartContractVerificationConfig;
   hash?: string;
 }
@@ -38,7 +41,7 @@ interface Props {
 const ContractVerificationForm = ({ method: methodFromQuery, config, hash }: Props) => {
   const formApi = useForm<FormFields>({
     mode: 'onBlur',
-    defaultValues: methodFromQuery ? getDefaultValues(methodFromQuery, config, hash, null) : undefined,
+    defaultValues: getDefaultValues(methodFromQuery, config, hash, null),
   });
   const { control, handleSubmit, watch, formState, setError, reset, getFieldState } = formApi;
   const submitPromiseResolver = React.useRef<(value: unknown) => void>();
@@ -159,6 +162,8 @@ const ContractVerificationForm = ({ method: methodFromQuery, config, hash }: Pro
       'vyper-code': <ContractVerificationVyperContract config={ config }/>,
       'vyper-multi-part': <ContractVerificationVyperMultiPartFile/>,
       'vyper-standard-input': <ContractVerificationVyperStandardInput/>,
+      'solidity-hardhat': <ContractVerificationSolidityHardhat config={ config }/>,
+      'solidity-foundry': <ContractVerificationSolidityFoundry/>,
     };
   }, [ config ]);
   const method = watch('method');
@@ -193,7 +198,7 @@ const ContractVerificationForm = ({ method: methodFromQuery, config, hash }: Pro
           />
         </Grid>
         { content }
-        { Boolean(method) && (
+        { Boolean(method) && method.value !== 'solidity-hardhat' && method.value !== 'solidity-foundry' && (
           <Button
             variant="solid"
             size="lg"
diff --git a/ui/contractVerification/ContractVerificationFormCodeSnippet.tsx b/ui/contractVerification/ContractVerificationFormCodeSnippet.tsx
new file mode 100644
index 0000000000..d234eb9447
--- /dev/null
+++ b/ui/contractVerification/ContractVerificationFormCodeSnippet.tsx
@@ -0,0 +1,16 @@
+import { Code } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  code: string;
+}
+
+const ContractVerificationFormCodeSnippet = ({ code }: Props) => {
+  return (
+    <Code whiteSpace="pre-wrap" wordBreak="break-all" p={ 2 } borderRadius="base">
+      { code }
+    </Code>
+  );
+};
+
+export default React.memo(ContractVerificationFormCodeSnippet);
diff --git a/ui/contractVerification/ContractVerificationMethod.tsx b/ui/contractVerification/ContractVerificationMethod.tsx
index 24bef17bf4..9e5a081f36 100644
--- a/ui/contractVerification/ContractVerificationMethod.tsx
+++ b/ui/contractVerification/ContractVerificationMethod.tsx
@@ -4,14 +4,15 @@ import React from 'react';
 interface Props {
   title: string;
   children: React.ReactNode;
+  disableScroll?: boolean;
 }
 
-const ContractVerificationMethod = ({ title, children }: Props) => {
+const ContractVerificationMethod = ({ title, children, disableScroll }: Props) => {
   const ref = React.useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
-    ref.current?.scrollIntoView({ behavior: 'smooth' });
-  }, []);
+    !disableScroll && ref.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [ disableScroll ]);
 
   return (
     <section ref={ ref }>
diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_solidity-foundry-method-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_solidity-foundry-method-1.png
new file mode 100644
index 0000000000..c0a83737c5
Binary files /dev/null and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_solidity-foundry-method-1.png differ
diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_solidity-hardhat-method-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_solidity-hardhat-method-1.png
new file mode 100644
index 0000000000..17c901c969
Binary files /dev/null and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_solidity-hardhat-method-1.png differ
diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_verification-of-zkSync-contract-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_verification-of-zkSync-contract-1.png
new file mode 100644
index 0000000000..45ebc4da4b
Binary files /dev/null and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_verification-of-zkSync-contract-1.png differ
diff --git a/ui/contractVerification/fields/ContractVerificationFieldCode.tsx b/ui/contractVerification/fields/ContractVerificationFieldCode.tsx
index 4e956558d6..c489c69a00 100644
--- a/ui/contractVerification/fields/ContractVerificationFieldCode.tsx
+++ b/ui/contractVerification/fields/ContractVerificationFieldCode.tsx
@@ -1,4 +1,4 @@
-import { FormControl, Link, Textarea } from '@chakra-ui/react';
+import { FormControl, Textarea } from '@chakra-ui/react';
 import React from 'react';
 import type { ControllerRenderProps } from 'react-hook-form';
 import { useFormContext, Controller } from 'react-hook-form';
@@ -43,12 +43,7 @@ const ContractVerificationFieldCode = ({ isVyper }: Props) => {
         rules={{ required: true }}
       />
       { isVyper ? null : (
-        <>
-          <span>We recommend using flattened code. This is necessary if your code utilizes a library or inherits dependencies. Use the </span>
-          <Link href="https://github.com/poanetwork/solidity-flattener" target="_blank">POA solidity flattener</Link>
-          <span> or the </span>
-          <Link href="https://www.npmjs.com/package/truffle-flattener" target="_blank">Truffle flattener</Link>
-        </>
+        <span>If your code utilizes a library or inherits dependencies, we recommend using other verification methods instead.</span>
       ) }
     </ContractVerificationFormRow>
   );
diff --git a/ui/contractVerification/fields/ContractVerificationFieldCompiler.tsx b/ui/contractVerification/fields/ContractVerificationFieldCompiler.tsx
index 4d19802460..c706ce02ae 100644
--- a/ui/contractVerification/fields/ContractVerificationFieldCompiler.tsx
+++ b/ui/contractVerification/fields/ContractVerificationFieldCompiler.tsx
@@ -5,7 +5,7 @@ import type { ControllerRenderProps } from 'react-hook-form';
 import { useFormContext, Controller } from 'react-hook-form';
 
 import type { FormFields } from '../types';
-import type { SmartContractVerificationConfig } from 'types/api/contract';
+import type { SmartContractVerificationConfig } from 'types/client/contract';
 
 import { getResourceKey } from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
diff --git a/ui/contractVerification/fields/ContractVerificationFieldEvmVersion.tsx b/ui/contractVerification/fields/ContractVerificationFieldEvmVersion.tsx
index ce56eec145..1f10cc0b07 100644
--- a/ui/contractVerification/fields/ContractVerificationFieldEvmVersion.tsx
+++ b/ui/contractVerification/fields/ContractVerificationFieldEvmVersion.tsx
@@ -5,7 +5,7 @@ import type { ControllerRenderProps } from 'react-hook-form';
 import { useFormContext, Controller } from 'react-hook-form';
 
 import type { FormFields } from '../types';
-import type { SmartContractVerificationConfig } from 'types/api/contract';
+import type { SmartContractVerificationConfig } from 'types/client/contract';
 
 import { getResourceKey } from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
diff --git a/ui/contractVerification/fields/ContractVerificationFieldMethod.tsx b/ui/contractVerification/fields/ContractVerificationFieldMethod.tsx
index 83d4090c0e..5eebcd701a 100644
--- a/ui/contractVerification/fields/ContractVerificationFieldMethod.tsx
+++ b/ui/contractVerification/fields/ContractVerificationFieldMethod.tsx
@@ -1,7 +1,6 @@
 import {
   Link,
   chakra,
-  Popover,
   PopoverTrigger,
   Portal,
   PopoverContent,
@@ -18,9 +17,10 @@ import type { ControllerRenderProps, Control } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
 import type { FormFields } from '../types';
-import type { SmartContractVerificationConfig, SmartContractVerificationMethod } from 'types/api/contract';
+import type { SmartContractVerificationMethod, SmartContractVerificationConfig } from 'types/client/contract';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
+import Popover from 'ui/shared/chakra/Popover';
 import FancySelect from 'ui/shared/FancySelect/FancySelect';
 import IconSvg from 'ui/shared/IconSvg';
 
@@ -51,6 +51,7 @@ const ContractVerificationFieldMethod = ({ control, isDisabled, methods }: Props
         isDisabled={ isDisabled }
         isRequired
         isAsync={ false }
+        isReadOnly={ options.length === 1 }
       />
     );
   }, [ isDisabled, isMobile, options ]);
@@ -58,7 +59,7 @@ const ContractVerificationFieldMethod = ({ control, isDisabled, methods }: Props
   const renderPopoverListItem = React.useCallback((method: SmartContractVerificationMethod) => {
     switch (method) {
       case 'flattened-code':
-        return <ListItem key={ method }>Verification through flattened source code.</ListItem>;
+        return <ListItem key={ method }>Verification through a single file.</ListItem>;
       case 'multi-part':
         return <ListItem key={ method }>Verification of multi-part Solidity files.</ListItem>;
       case 'sourcify':
@@ -93,6 +94,10 @@ const ContractVerificationFieldMethod = ({ control, isDisabled, methods }: Props
             <span> file.</span>
           </ListItem>
         );
+      case 'solidity-hardhat':
+        return <ListItem key={ method }>Verification through Hardhat plugin.</ListItem>;
+      case 'solidity-foundry':
+        return <ListItem key={ method }>Verification through Foundry.</ListItem>;
     }
   }, []);
 
@@ -105,7 +110,7 @@ const ContractVerificationFieldMethod = ({ control, isDisabled, methods }: Props
         <Popover trigger="hover" isLazy placement={ isMobile ? 'bottom-end' : 'right-start' } offset={ [ -8, 8 ] }>
           <PopoverTrigger>
             <chakra.span display="inline-block" ml={ 1 } cursor="pointer" verticalAlign="middle" h="22px">
-              <IconSvg name="info" boxSize={ 5 } color="link" _hover={{ color: 'link_hovered' }}/>
+              <IconSvg name="info" boxSize={ 5 } color="icon_info" _hover={{ color: 'link_hovered' }}/>
             </chakra.span>
           </PopoverTrigger>
           <Portal>
diff --git a/ui/contractVerification/fields/ContractVerificationFieldSources.tsx b/ui/contractVerification/fields/ContractVerificationFieldSources.tsx
index 17d0f7f016..f8bf351ca5 100644
--- a/ui/contractVerification/fields/ContractVerificationFieldSources.tsx
+++ b/ui/contractVerification/fields/ContractVerificationFieldSources.tsx
@@ -18,13 +18,14 @@ type FileTypes = '.sol' | '.yul' | '.json' | '.vy'
 interface Props {
   name?: 'sources' | 'interfaces';
   fileTypes: Array<FileTypes>;
+  fullFilePath?: boolean;
   multiple?: boolean;
   required?: boolean;
   title: string;
   hint: string | React.ReactNode;
 }
 
-const ContractVerificationFieldSources = ({ fileTypes, multiple, required, title, hint, name = 'sources' }: Props) => {
+const ContractVerificationFieldSources = ({ fileTypes, multiple, required, title, hint, name = 'sources', fullFilePath }: Props) => {
   const { setValue, getValues, control, formState, clearErrors } = useFormContext<FormFields>();
 
   const error = (() => {
@@ -114,7 +115,7 @@ const ContractVerificationFieldSources = ({ fileTypes, multiple, required, title
               rowGap={ 2 }
               w="100%"
             >
-              <DragAndDropArea onDrop={ onChange } p={{ base: 3, lg: 6 }} isDisabled={ formState.isSubmitting }>
+              <DragAndDropArea onDrop={ onChange } fullFilePath={ fullFilePath } p={{ base: 3, lg: 6 }} isDisabled={ formState.isSubmitting }>
                 { hasValue ? renderFiles(field.value) : renderUploadButton() }
               </DragAndDropArea>
             </Flex>
@@ -123,7 +124,7 @@ const ContractVerificationFieldSources = ({ fileTypes, multiple, required, title
         { errorElement }
       </>
     );
-  }, [ fileTypes, multiple, commonError, formState.isSubmitting, renderFiles, renderUploadButton ]);
+  }, [ fileTypes, multiple, commonError, formState.isSubmitting, renderFiles, renderUploadButton, fullFilePath ]);
 
   const validateFileType = React.useCallback(async(value: FieldPathValue<FormFields, typeof name>): Promise<ValidateResult> => {
     if (Array.isArray(value)) {
diff --git a/ui/contractVerification/fields/ContractVerificationFieldZkCompiler.tsx b/ui/contractVerification/fields/ContractVerificationFieldZkCompiler.tsx
new file mode 100644
index 0000000000..fd00f4c7b8
--- /dev/null
+++ b/ui/contractVerification/fields/ContractVerificationFieldZkCompiler.tsx
@@ -0,0 +1,70 @@
+import { Box, Link } from '@chakra-ui/react';
+import { useQueryClient } from '@tanstack/react-query';
+import React from 'react';
+import type { ControllerRenderProps } from 'react-hook-form';
+import { useFormContext, Controller } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+import type { SmartContractVerificationConfig } from 'types/client/contract';
+
+import { getResourceKey } from 'lib/api/useApiQuery';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import FancySelect from 'ui/shared/FancySelect/FancySelect';
+import IconSvg from 'ui/shared/IconSvg';
+
+import ContractVerificationFormRow from '../ContractVerificationFormRow';
+
+const OPTIONS_LIMIT = 50;
+
+const ContractVerificationFieldZkCompiler = () => {
+  const { formState, control } = useFormContext<FormFields>();
+  const isMobile = useIsMobile();
+  const queryClient = useQueryClient();
+  const config = queryClient.getQueryData<SmartContractVerificationConfig>(getResourceKey('contract_verification_config'));
+
+  const options = React.useMemo(() => (
+    config?.zk_compiler_versions?.map((option) => ({ label: option, value: option })) || []
+  ), [ config?.zk_compiler_versions ]);
+
+  const loadOptions = React.useCallback(async(inputValue: string) => {
+    return options
+      .filter(({ label }) => !inputValue || label.toLowerCase().includes(inputValue.toLowerCase()))
+      .slice(0, OPTIONS_LIMIT);
+  }, [ options ]);
+
+  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'zk_compiler'>}) => {
+    const error = 'zk_compiler' in formState.errors ? formState.errors.zk_compiler : undefined;
+
+    return (
+      <FancySelect
+        { ...field }
+        loadOptions={ loadOptions }
+        defaultOptions
+        size={ isMobile ? 'md' : 'lg' }
+        placeholder="ZK compiler (enter version or use the dropdown)"
+        placeholderIcon={ <IconSvg name="search"/> }
+        isDisabled={ formState.isSubmitting }
+        error={ error }
+        isRequired
+        isAsync
+      />
+    );
+  }, [ formState.errors, formState.isSubmitting, isMobile, loadOptions ]);
+
+  return (
+    <ContractVerificationFormRow>
+      <Controller
+        name="zk_compiler"
+        control={ control }
+        render={ renderControl }
+        rules={{ required: true }}
+      />
+      <Box>
+        <Link isExternal href="https://docs.zksync.io/zk-stack/components/compiler/specification#glossary">zksolc</Link>
+        <span> compiler version.</span>
+      </Box>
+    </ContractVerificationFormRow>
+  );
+};
+
+export default React.memo(ContractVerificationFieldZkCompiler);
diff --git a/ui/contractVerification/methods/ContractVerificationFlattenSourceCode.tsx b/ui/contractVerification/methods/ContractVerificationFlattenSourceCode.tsx
index f3333697e5..ee258e1c97 100644
--- a/ui/contractVerification/methods/ContractVerificationFlattenSourceCode.tsx
+++ b/ui/contractVerification/methods/ContractVerificationFlattenSourceCode.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { SmartContractVerificationConfig } from 'types/api/contract';
+import type { SmartContractVerificationConfig } from 'types/client/contract';
 
 import ContractVerificationMethod from '../ContractVerificationMethod';
 import ContractVerificationFieldAutodetectArgs from '../fields/ContractVerificationFieldAutodetectArgs';
diff --git a/ui/contractVerification/methods/ContractVerificationMultiPartFile.tsx b/ui/contractVerification/methods/ContractVerificationMultiPartFile.tsx
index da2967a9e8..8212b3b583 100644
--- a/ui/contractVerification/methods/ContractVerificationMultiPartFile.tsx
+++ b/ui/contractVerification/methods/ContractVerificationMultiPartFile.tsx
@@ -18,6 +18,7 @@ const ContractVerificationMultiPartFile = () => {
       <ContractVerificationFieldSources
         fileTypes={ FILE_TYPES }
         multiple
+        fullFilePath
         required
         title="Sources *.sol or *.yul files"
         hint="Upload all Solidity or Yul contract source files."
diff --git a/ui/contractVerification/methods/ContractVerificationSolidityFoundry.tsx b/ui/contractVerification/methods/ContractVerificationSolidityFoundry.tsx
new file mode 100644
index 0000000000..a481631c3c
--- /dev/null
+++ b/ui/contractVerification/methods/ContractVerificationSolidityFoundry.tsx
@@ -0,0 +1,41 @@
+import { Box, Flex, Link } from '@chakra-ui/react';
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import config from 'configs/app';
+
+import ContractVerificationFormCodeSnippet from '../ContractVerificationFormCodeSnippet';
+import ContractVerificationFormRow from '../ContractVerificationFormRow';
+import ContractVerificationMethod from '../ContractVerificationMethod';
+
+const ContractVerificationSolidityFoundry = () => {
+  const { watch } = useFormContext<FormFields>();
+  const address = watch('address');
+
+  const codeSnippet = `forge verify-contract \\
+  --rpc-url ${ config.chain.rpcUrl || `${ config.api.endpoint }/api/eth-rpc` } \\
+  --verifier blockscout \\
+  --verifier-url '${ config.api.endpoint }/api/' \\
+  ${ address || '<address>' } \\
+  [contractFile]:[contractName]`;
+
+  return (
+    <ContractVerificationMethod title="Contract verification via Foundry">
+      <ContractVerificationFormRow>
+        <Flex flexDir="column">
+          <ContractVerificationFormCodeSnippet code={ codeSnippet }/>
+        </Flex>
+        <Box whiteSpace="pre-wrap">
+          <span>Full tutorial about contract verification via Foundry on Blockscout is available </span>
+          <Link href="https://docs.blockscout.com/for-users/verifying-a-smart-contract/foundry-verification" target="_blank">
+            here
+          </Link>
+        </Box>
+      </ContractVerificationFormRow>
+    </ContractVerificationMethod>
+  );
+};
+
+export default React.memo(ContractVerificationSolidityFoundry);
diff --git a/ui/contractVerification/methods/ContractVerificationSolidityHardhat.tsx b/ui/contractVerification/methods/ContractVerificationSolidityHardhat.tsx
new file mode 100644
index 0000000000..d779aea9e4
--- /dev/null
+++ b/ui/contractVerification/methods/ContractVerificationSolidityHardhat.tsx
@@ -0,0 +1,68 @@
+import { Box, Flex, Link } from '@chakra-ui/react';
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+import type { SmartContractVerificationConfig } from 'types/client/contract';
+
+import config from 'configs/app';
+
+import ContractVerificationFormCodeSnippet from '../ContractVerificationFormCodeSnippet';
+import ContractVerificationFormRow from '../ContractVerificationFormRow';
+import ContractVerificationMethod from '../ContractVerificationMethod';
+
+const ContractVerificationSolidityHardhat = ({ config: formConfig }: { config: SmartContractVerificationConfig }) => {
+  const chainNameSlug = config.chain.name?.toLowerCase().split(' ').join('-');
+  const { watch } = useFormContext<FormFields>();
+  const address = watch('address');
+
+  const latestSolidityVersion = formConfig.solidity_compiler_versions.find((version) => !version.includes('nightly'))?.split('+')[0];
+
+  const firstCodeSnippet = `const config: HardhatUserConfig = {
+  solidity: "${ latestSolidityVersion || '0.8.24' }", // replace if necessary
+  networks: {
+    '${ chainNameSlug }': {
+      url: '${ config.chain.rpcUrl || `${ config.api.endpoint }/api/eth-rpc` }'
+    },
+  },
+  etherscan: {
+    apiKey: {
+      '${ chainNameSlug }': 'empty'
+    },
+    customChains: [
+      {
+        network: "${ chainNameSlug }",
+        chainId: ${ config.chain.id },
+        urls: {
+          apiURL: "${ config.api.endpoint }/api",
+          browserURL: "${ config.app.baseUrl }"
+        }
+      }
+    ]
+  }
+};`;
+
+  const secondCodeSnippet = `npx hardhat verify \\
+  --network ${ chainNameSlug } \\
+  ${ address || '<address>' } \\
+  [...constructorArgs]`;
+
+  return (
+    <ContractVerificationMethod title="Contract verification via Solidity Hardhat plugin">
+      <ContractVerificationFormRow>
+        <Flex flexDir="column" rowGap={ 3 }>
+          <ContractVerificationFormCodeSnippet code={ firstCodeSnippet }/>
+          <ContractVerificationFormCodeSnippet code={ secondCodeSnippet }/>
+        </Flex>
+        <Box whiteSpace="pre-wrap">
+          <span>Full tutorial about contract verification via Hardhat on Blockscout is available </span>
+          <Link href="https://docs.blockscout.com/for-users/verifying-a-smart-contract/hardhat-verification-plugin" target="_blank">
+            here
+          </Link>
+        </Box>
+      </ContractVerificationFormRow>
+    </ContractVerificationMethod>
+  );
+};
+
+export default React.memo(ContractVerificationSolidityHardhat);
diff --git a/ui/contractVerification/methods/ContractVerificationStandardInput.tsx b/ui/contractVerification/methods/ContractVerificationStandardInput.tsx
index 75c30ff3eb..9f0e9b0974 100644
--- a/ui/contractVerification/methods/ContractVerificationStandardInput.tsx
+++ b/ui/contractVerification/methods/ContractVerificationStandardInput.tsx
@@ -1,20 +1,25 @@
 import React from 'react';
 
-import type { SmartContractVerificationConfig } from 'types/api/contract';
+import type { SmartContractVerificationConfig } from 'types/client/contract';
+
+import config from 'configs/app';
 
 import ContractVerificationMethod from '../ContractVerificationMethod';
 import ContractVerificationFieldAutodetectArgs from '../fields/ContractVerificationFieldAutodetectArgs';
 import ContractVerificationFieldCompiler from '../fields/ContractVerificationFieldCompiler';
 import ContractVerificationFieldName from '../fields/ContractVerificationFieldName';
 import ContractVerificationFieldSources from '../fields/ContractVerificationFieldSources';
+import ContractVerificationFieldZkCompiler from '../fields/ContractVerificationFieldZkCompiler';
 
 const FILE_TYPES = [ '.json' as const ];
+const rollupFeature = config.features.rollup;
 
 const ContractVerificationStandardInput = ({ config }: { config: SmartContractVerificationConfig }) => {
   return (
-    <ContractVerificationMethod title="Contract verification via Solidity (standard JSON input) ">
+    <ContractVerificationMethod title="Contract verification via Solidity (standard JSON input) " disableScroll={ config.verification_options.length === 1 }>
       { !config?.is_rust_verifier_microservice_enabled && <ContractVerificationFieldName/> }
       <ContractVerificationFieldCompiler/>
+      { rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && <ContractVerificationFieldZkCompiler/> }
       <ContractVerificationFieldSources
         fileTypes={ FILE_TYPES }
         title="Standard Input JSON"
diff --git a/ui/contractVerification/methods/ContractVerificationVyperContract.tsx b/ui/contractVerification/methods/ContractVerificationVyperContract.tsx
index 734cad9bc2..f5a975d7ab 100644
--- a/ui/contractVerification/methods/ContractVerificationVyperContract.tsx
+++ b/ui/contractVerification/methods/ContractVerificationVyperContract.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { SmartContractVerificationConfig } from 'types/api/contract';
+import type { SmartContractVerificationConfig } from 'types/client/contract';
 
 import ContractVerificationMethod from '../ContractVerificationMethod';
 import ContractVerificationFieldCode from '../fields/ContractVerificationFieldCode';
diff --git a/ui/contractVerification/methods/ContractVerificationVyperMultiPartFile.tsx b/ui/contractVerification/methods/ContractVerificationVyperMultiPartFile.tsx
index 607d7dad82..0d3148c448 100644
--- a/ui/contractVerification/methods/ContractVerificationVyperMultiPartFile.tsx
+++ b/ui/contractVerification/methods/ContractVerificationVyperMultiPartFile.tsx
@@ -37,6 +37,7 @@ const ContractVerificationVyperMultiPartFile = () => {
         name="interfaces"
         fileTypes={ INTERFACE_TYPES }
         multiple
+        fullFilePath
         title="Interfaces (.vy or .json)"
         hint={ interfacesHint }
       />
diff --git a/ui/contractVerification/types.ts b/ui/contractVerification/types.ts
index 47081c8838..b526b3c830 100644
--- a/ui/contractVerification/types.ts
+++ b/ui/contractVerification/types.ts
@@ -1,4 +1,5 @@
-import type { SmartContractLicenseType, SmartContractVerificationMethod } from 'types/api/contract';
+import type { SmartContractLicenseType } from 'types/api/contract';
+import type { SmartContractVerificationMethod } from 'types/client/contract';
 import type { Option } from 'ui/shared/FancySelect/types';
 
 export interface ContractLibrary {
@@ -43,6 +44,18 @@ export interface FormFieldsStandardInput {
   license_type: LicenseOption | null;
 }
 
+export interface FormFieldsStandardInputZk {
+  address: string;
+  method: MethodOption;
+  name: string;
+  compiler: Option | null;
+  zk_compiler: Option | null;
+  sources: Array<File>;
+  autodetect_constructor_args: boolean;
+  constructor_args: string;
+  license_type: LicenseOption | null;
+}
+
 export interface FormFieldsSourcify {
   address: string;
   method: MethodOption;
@@ -92,5 +105,5 @@ export interface FormFieldsVyperStandardInput {
   license_type: LicenseOption | null;
 }
 
-export type FormFields = FormFieldsFlattenSourceCode | FormFieldsStandardInput | FormFieldsSourcify |
+export type FormFields = FormFieldsFlattenSourceCode | FormFieldsStandardInput | FormFieldsStandardInputZk | FormFieldsSourcify |
 FormFieldsMultiPartFile | FormFieldsVyperContract | FormFieldsVyperMultiPartFile | FormFieldsVyperStandardInput;
diff --git a/ui/contractVerification/useFormConfigQuery.tsx b/ui/contractVerification/useFormConfigQuery.tsx
index cb4da6e6b8..974ca2ec59 100644
--- a/ui/contractVerification/useFormConfigQuery.tsx
+++ b/ui/contractVerification/useFormConfigQuery.tsx
@@ -1,3 +1,4 @@
+import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 
 import { isValidVerificationMethod, sortVerificationMethods } from './utils';
@@ -8,7 +9,10 @@ export default function useFormConfigQuery(enabled: boolean) {
       select: (data) => {
         return {
           ...data,
-          verification_options: data.verification_options.filter(isValidVerificationMethod).sort(sortVerificationMethods),
+          verification_options: [
+            ...data.verification_options,
+            ...config.UI.views.address.extraVerificationMethods,
+          ].filter(isValidVerificationMethod).sort(sortVerificationMethods),
         };
       },
       enabled,
diff --git a/ui/contractVerification/utils.ts b/ui/contractVerification/utils.ts
index 5791b12566..a4e8b17190 100644
--- a/ui/contractVerification/utils.ts
+++ b/ui/contractVerification/utils.ts
@@ -7,16 +7,16 @@ import type {
   FormFieldsMultiPartFile,
   FormFieldsSourcify,
   FormFieldsStandardInput,
+  FormFieldsStandardInputZk,
   FormFieldsVyperContract,
   FormFieldsVyperMultiPartFile,
   FormFieldsVyperStandardInput,
 } from './types';
 import type {
-  SmartContractVerificationMethod,
   SmartContractVerificationError,
-  SmartContractVerificationConfig,
   SmartContractLicenseType,
 } from 'types/api/contract';
+import type { SmartContractVerificationConfig, SmartContractVerificationMethod } from 'types/client/contract';
 
 import type { Params as FetchParams } from 'lib/hooks/useFetch';
 
@@ -25,19 +25,23 @@ export const SUPPORTED_VERIFICATION_METHODS: Array<SmartContractVerificationMeth
   'standard-input',
   'sourcify',
   'multi-part',
+  'solidity-hardhat',
+  'solidity-foundry',
   'vyper-code',
   'vyper-multi-part',
   'vyper-standard-input',
 ];
 
 export const METHOD_LABELS: Record<SmartContractVerificationMethod, string> = {
-  'flattened-code': 'Solidity (Flattened source code)',
+  'flattened-code': 'Solidity (Single file)',
   'standard-input': 'Solidity (Standard JSON input)',
   sourcify: 'Solidity (Sourcify)',
   'multi-part': 'Solidity (Multi-part files)',
   'vyper-code': 'Vyper (Contract)',
   'vyper-multi-part': 'Vyper (Multi-part files)',
   'vyper-standard-input': 'Vyper (Standard JSON input)',
+  'solidity-hardhat': 'Solidity (Hardhat)',
+  'solidity-foundry': 'Solidity (Foundry)',
 };
 
 export const DEFAULT_VALUES: Record<SmartContractVerificationMethod, FormFields> = {
@@ -129,14 +133,41 @@ export const DEFAULT_VALUES: Record<SmartContractVerificationMethod, FormFields>
     sources: [],
     license_type: null,
   },
+  'solidity-hardhat': {
+    address: '',
+    method: {
+      value: 'solidity-hardhat' as const,
+      label: METHOD_LABELS['solidity-hardhat'],
+    },
+    compiler: null,
+    sources: [],
+    license_type: null,
+  },
+  'solidity-foundry': {
+    address: '',
+    method: {
+      value: 'solidity-foundry' as const,
+      label: METHOD_LABELS['solidity-foundry'],
+    },
+    compiler: null,
+    sources: [],
+    license_type: null,
+  },
 };
 
 export function getDefaultValues(
-  method: SmartContractVerificationMethod,
+  methodParam: SmartContractVerificationMethod | undefined,
   config: SmartContractVerificationConfig,
   hash: string | undefined,
   licenseType: FormFields['license_type'],
 ) {
+  const singleMethod = config.verification_options.length === 1 ? config.verification_options[0] : undefined;
+  const method = singleMethod || methodParam;
+
+  if (!method) {
+    return;
+  }
+
   const defaultValues: FormFields = { ...DEFAULT_VALUES[method], address: hash || '', license_type: licenseType };
 
   if ('evm_version' in defaultValues) {
@@ -156,6 +187,13 @@ export function getDefaultValues(
     }
   }
 
+  if (singleMethod) {
+    defaultValues.method = {
+      label: METHOD_LABELS[config.verification_options[0]],
+      value: config.verification_options[0],
+    };
+  }
+
   return defaultValues;
 }
 
@@ -200,7 +238,7 @@ export function prepareRequestBody(data: FormFields): FetchParams['body'] {
     }
 
     case 'standard-input': {
-      const _data = data as FormFieldsStandardInput;
+      const _data = data as (FormFieldsStandardInput | FormFieldsStandardInputZk);
 
       const body = new FormData();
       _data.compiler && body.set('compiler_version', _data.compiler.value);
@@ -210,6 +248,9 @@ export function prepareRequestBody(data: FormFields): FetchParams['body'] {
       body.set('constructor_args', _data.constructor_args);
       addFilesToFormData(body, _data.sources, 'files');
 
+      // zkSync fields
+      'zk_compiler' in _data && _data.zk_compiler && body.set('zk_compiler_version', _data.zk_compiler.value);
+
       return body;
     }
 
diff --git a/ui/csvExport/CsvExportForm.tsx b/ui/csvExport/CsvExportForm.tsx
index 1105757b2c..f68ea87dda 100644
--- a/ui/csvExport/CsvExportForm.tsx
+++ b/ui/csvExport/CsvExportForm.tsx
@@ -1,4 +1,4 @@
-import { Button, chakra, Flex } from '@chakra-ui/react';
+import { Alert, Button, chakra, Flex } from '@chakra-ui/react';
 import React from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm, FormProvider } from 'react-hook-form';
@@ -11,9 +11,9 @@ import type { ResourceName } from 'lib/api/resources';
 import dayjs from 'lib/date/dayjs';
 import downloadBlob from 'lib/downloadBlob';
 import useToast from 'lib/hooks/useToast';
+import FormFieldReCaptcha from 'ui/shared/forms/fields/FormFieldReCaptcha';
 
 import CsvExportFormField from './CsvExportFormField';
-import CsvExportFormReCaptcha from './CsvExportFormReCaptcha';
 
 interface Props {
   hash: string;
@@ -21,9 +21,10 @@ interface Props {
   filterType?: CsvExportParams['filterType'] | null;
   filterValue?: CsvExportParams['filterValue'] | null;
   fileNameTemplate: string;
+  exportType: CsvExportParams['type'] | undefined;
 }
 
-const CsvExportForm = ({ hash, resource, filterType, filterValue, fileNameTemplate }: Props) => {
+const CsvExportForm = ({ hash, resource, filterType, filterValue, fileNameTemplate, exportType }: Props) => {
   const formApi = useForm<FormFields>({
     mode: 'onBlur',
     defaultValues: {
@@ -36,10 +37,10 @@ const CsvExportForm = ({ hash, resource, filterType, filterValue, fileNameTempla
 
   const onFormSubmit: SubmitHandler<FormFields> = React.useCallback(async(data) => {
     try {
-      const url = buildUrl(resource, undefined, {
+      const url = buildUrl(resource, { hash } as never, {
         address_id: hash,
-        from_period: data.from,
-        to_period: data.to,
+        from_period: exportType !== 'holders' ? data.from : null,
+        to_period: exportType !== 'holders' ? data.to : null,
         filter_type: filterType,
         filter_value: filterValue,
         recaptcha_response: data.reCaptcha,
@@ -56,11 +57,11 @@ const CsvExportForm = ({ hash, resource, filterType, filterValue, fileNameTempla
       }
 
       const blob = await response.blob();
-      downloadBlob(
-        blob,
-        `${ fileNameTemplate }_${ hash }_${ data.from }_${ data.to }
-        ${ filterType && filterValue ? '_with_filter_type_' + filterType + '_value_' + filterValue : '' }.csv`,
-      );
+      const fileName = exportType === 'holders' ?
+        `${ fileNameTemplate }_${ hash }.csv` :
+        // eslint-disable-next-line max-len
+        `${ fileNameTemplate }_${ hash }_${ data.from }_${ data.to }${ filterType && filterValue ? '_with_filter_type_' + filterType + '_value_' + filterValue : '' }.csv`;
+      downloadBlob(blob, fileName);
 
     } catch (error) {
       toast({
@@ -73,7 +74,14 @@ const CsvExportForm = ({ hash, resource, filterType, filterValue, fileNameTempla
       });
     }
 
-  }, [ fileNameTemplate, hash, resource, filterType, filterValue, toast ]);
+  }, [ resource, hash, exportType, filterType, filterValue, fileNameTemplate, toast ]);
+
+  const disabledFeatureMessage = (
+    <Alert status="error">
+      CSV export is not available at the moment since reCaptcha is not configured for this application.
+      Please contact the service maintainer to make necessary changes in the service configuration.
+    </Alert>
+  );
 
   return (
     <FormProvider { ...formApi }>
@@ -82,9 +90,9 @@ const CsvExportForm = ({ hash, resource, filterType, filterValue, fileNameTempla
         onSubmit={ handleSubmit(onFormSubmit) }
       >
         <Flex columnGap={ 5 } rowGap={ 3 } flexDir={{ base: 'column', lg: 'row' }} alignItems={{ base: 'flex-start', lg: 'center' }} flexWrap="wrap">
-          <CsvExportFormField name="from" formApi={ formApi }/>
-          <CsvExportFormField name="to" formApi={ formApi }/>
-          <CsvExportFormReCaptcha formApi={ formApi }/>
+          { exportType !== 'holders' && <CsvExportFormField name="from" formApi={ formApi }/> }
+          { exportType !== 'holders' && <CsvExportFormField name="to" formApi={ formApi }/> }
+          <FormFieldReCaptcha disabledFeatureMessage={ disabledFeatureMessage }/>
         </Flex>
         <Button
           variant="solid"
diff --git a/ui/csvExport/CsvExportFormReCaptcha.tsx b/ui/csvExport/CsvExportFormReCaptcha.tsx
deleted file mode 100644
index a3df1467f8..0000000000
--- a/ui/csvExport/CsvExportFormReCaptcha.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Alert } from '@chakra-ui/react';
-import React from 'react';
-import ReCaptcha from 'react-google-recaptcha';
-import type { UseFormReturn } from 'react-hook-form';
-
-import type { FormFields } from './types';
-
-import config from 'configs/app';
-
-interface Props {
-  formApi: UseFormReturn<FormFields>;
-}
-
-const CsvExportFormReCaptcha = ({ formApi }: Props) => {
-
-  const ref = React.useRef<ReCaptcha>(null);
-
-  React.useEffect(() => {
-    formApi.register('reCaptcha', { required: true, shouldUnregister: true });
-
-    return () => {
-      formApi.unregister('reCaptcha');
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  React.useEffect(() => {
-    ref.current?.reset();
-    formApi.trigger('reCaptcha');
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ formApi.formState.submitCount ]);
-
-  const handleReCaptchaChange = React.useCallback((token: string | null) => {
-    if (token) {
-      formApi.clearErrors('reCaptcha');
-      formApi.setValue('reCaptcha', token, { shouldValidate: true });
-    }
-  }, [ formApi ]);
-
-  const handleReCaptchaExpire = React.useCallback(() => {
-    formApi.resetField('reCaptcha');
-    formApi.setError('reCaptcha', { type: 'required' });
-  }, [ formApi ]);
-
-  const feature = config.features.csvExport;
-
-  if (!feature.isEnabled) {
-    return (
-      <Alert status="error">
-        CSV export is not available at the moment since reCaptcha is not configured for this application.
-        Please contact the service maintainer to make necessary changes in the service configuration.
-      </Alert>
-    );
-  }
-
-  return (
-    <ReCaptcha
-      className="recaptcha"
-      ref={ ref }
-      sitekey={ feature.reCaptcha.siteKey }
-      onChange={ handleReCaptchaChange }
-      onExpired={ handleReCaptchaExpire }
-    />
-  );
-};
-
-export default CsvExportFormReCaptcha;
diff --git a/ui/customAbi/CustomAbiModal/CustomAbiForm.tsx b/ui/customAbi/CustomAbiModal/CustomAbiForm.tsx
index ed36d0f522..2248312215 100644
--- a/ui/customAbi/CustomAbiModal/CustomAbiForm.tsx
+++ b/ui/customAbi/CustomAbiModal/CustomAbiForm.tsx
@@ -4,7 +4,6 @@ import {
   FormControl,
   Input,
   Textarea,
-  useColorModeValue,
 } from '@chakra-ui/react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import React, { useCallback } from 'react';
@@ -61,8 +60,6 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
     });
   };
 
-  const formBackgroundColor = useColorModeValue('white', 'gray.900');
-
   const mutation = useMutation({
     mutationFn: customAbiKey,
     onSuccess: (data) => {
@@ -101,7 +98,7 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
 
   const onSubmit: SubmitHandler<Inputs> = useCallback((formData) => {
     setAlertVisible(false);
-    mutation.mutate({ ...formData, id: data?.id });
+    mutation.mutate({ ...formData, id: data?.id ? String(data.id) : undefined });
   }, [ mutation, data, setAlertVisible ]);
 
   const renderContractAddressInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'contract_address_hash'>}) => {
@@ -109,38 +106,40 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
       <AddressInput<Inputs, 'contract_address_hash'>
         field={ field }
         error={ errors.contract_address_hash }
-        backgroundColor={ formBackgroundColor }
+        bgColor="dialog_bg"
         placeholder="Smart contract address (0x...)"
       />
     );
-  }, [ errors, formBackgroundColor ]);
+  }, [ errors ]);
 
   const renderNameInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'name'>}) => {
     return (
-      <FormControl variant="floating" id="name" isRequired backgroundColor={ formBackgroundColor }>
+      <FormControl variant="floating" id="name" isRequired bgColor="dialog_bg">
         <Input
           { ...field }
           isInvalid={ Boolean(errors.name) }
           maxLength={ NAME_MAX_LENGTH }
+          bgColor="dialog_bg"
         />
         <InputPlaceholder text="Project name" error={ errors.name }/>
       </FormControl>
     );
-  }, [ errors, formBackgroundColor ]);
+  }, [ errors ]);
 
   const renderAbiInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'abi'>}) => {
     return (
-      <FormControl variant="floating" id="abi" isRequired backgroundColor={ formBackgroundColor }>
+      <FormControl variant="floating" id="abi" isRequired bgColor="dialog_bg">
         <Textarea
           { ...field }
           size="lg"
           minH="300px"
           isInvalid={ Boolean(errors.abi) }
+          bgColor="dialog_bg"
         />
         <InputPlaceholder text="Custom ABI [{...}] (JSON format)" error={ errors.abi }/>
       </FormControl>
     );
-  }, [ errors, formBackgroundColor ]);
+  }, [ errors ]);
 
   return (
     <form noValidate onSubmit={ handleSubmit(onSubmit) }>
diff --git a/ui/customAbi/CustomAbiTable/CustomAbiTable.tsx b/ui/customAbi/CustomAbiTable/CustomAbiTable.tsx
index e09aea306e..8fa60c32dc 100644
--- a/ui/customAbi/CustomAbiTable/CustomAbiTable.tsx
+++ b/ui/customAbi/CustomAbiTable/CustomAbiTable.tsx
@@ -30,7 +30,7 @@ const CustomAbiTable = ({ data, isLoading, onDeleteClick, onEditClick }: Props)
       <Tbody>
         { data?.map((item, index) => (
           <CustomAbiTableItem
-            key={ item.id + (isLoading ? index : '') }
+            key={ item.id + (isLoading ? String(index) : '') }
             item={ item }
             isLoading={ isLoading }
             onDeleteClick={ onDeleteClick }
diff --git a/ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx b/ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx
index 352b8d2b27..94cdd9e2f9 100644
--- a/ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx
+++ b/ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx
@@ -5,20 +5,18 @@ import React from 'react';
 import type { OptimisticL2DepositsItem } from 'types/api/optimisticL2';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
 import AddressEntityL1 from 'ui/shared/entities/address/AddressEntityL1';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
 type Props = { item: OptimisticL2DepositsItem; isLoading?: boolean };
 
 const OptimisticDepositsListItem = ({ item, isLoading }: Props) => {
-  const timeAgo = dayjs(item.l1_block_timestamp).fromNow();
-
   if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') {
     return null;
   }
@@ -50,7 +48,11 @@ const OptimisticDepositsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ timeAgo }</Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ item.l1_block_timestamp }
+          isLoading={ isLoading }
+          display="inline-block"
+        />
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn hash</ListItemMobileGrid.Label>
@@ -67,7 +69,7 @@ const OptimisticDepositsListItem = ({ item, isLoading }: Props) => {
       <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn origin</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <AddressEntityL1
-          address={{ hash: item.l1_tx_origin, name: '', is_contract: false, is_verified: false, implementation_name: '', ens_domain_name: null }}
+          address={{ hash: item.l1_tx_origin, name: '', is_contract: false, is_verified: false, ens_domain_name: null, implementations: null }}
           isLoading={ isLoading }
           noCopy
           truncation="constant"
diff --git a/ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx b/ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx
index 2a5e2d073f..2284839a18 100644
--- a/ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx
+++ b/ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx
@@ -5,18 +5,17 @@ import React from 'react';
 import type { OptimisticL2DepositsItem } from 'types/api/optimisticL2';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
 import AddressEntityL1 from 'ui/shared/entities/address/AddressEntityL1';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
  type Props = { item: OptimisticL2DepositsItem; isLoading?: boolean };
 
 const OptimisticDepositsTableItem = ({ item, isLoading }: Props) => {
-  const timeAgo = dayjs(item.l1_block_timestamp).fromNow();
 
   if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') {
     return null;
@@ -45,7 +44,12 @@ const OptimisticDepositsTableItem = ({ item, isLoading }: Props) => {
         />
       </Td>
       <Td verticalAlign="middle" pr={ 12 }>
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block"><span>{ timeAgo }</span></Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ item.l1_block_timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
       </Td>
       <Td verticalAlign="middle">
         <TxEntityL1
@@ -59,7 +63,7 @@ const OptimisticDepositsTableItem = ({ item, isLoading }: Props) => {
       </Td>
       <Td verticalAlign="middle">
         <AddressEntityL1
-          address={{ hash: item.l1_tx_origin, name: '', is_contract: false, is_verified: false, implementation_name: '', ens_domain_name: null }}
+          address={{ hash: item.l1_tx_origin, name: '', is_contract: false, is_verified: false, ens_domain_name: null, implementations: null }}
           isLoading={ isLoading }
           truncation="constant"
           noCopy
diff --git a/ui/deposits/shibarium/DepositsListItem.tsx b/ui/deposits/shibarium/DepositsListItem.tsx
index 0c53e319e8..53d88f515f 100644
--- a/ui/deposits/shibarium/DepositsListItem.tsx
+++ b/ui/deposits/shibarium/DepositsListItem.tsx
@@ -1,23 +1,20 @@
-import { Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ShibariumDepositsItem } from 'types/api/shibarium';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
 import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 const feature = config.features.rollup;
 
 type Props = { item: ShibariumDepositsItem; isLoading?: boolean };
 
 const DepositsListItem = ({ item, isLoading }: Props) => {
-  const timeAgo = dayjs(item.timestamp).fromNow();
-
   if (!(feature.isEnabled && feature.type === 'shibarium')) {
     return null;
   }
@@ -70,7 +67,11 @@ const DepositsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ timeAgo }</Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          isLoading={ isLoading }
+          display="inline-block"
+        />
       </ListItemMobileGrid.Value>
 
     </ListItemMobileGrid.Container>
diff --git a/ui/deposits/shibarium/DepositsTableItem.tsx b/ui/deposits/shibarium/DepositsTableItem.tsx
index 7c38f52dd5..da23f68ecc 100644
--- a/ui/deposits/shibarium/DepositsTableItem.tsx
+++ b/ui/deposits/shibarium/DepositsTableItem.tsx
@@ -1,21 +1,20 @@
-import { Td, Tr, Skeleton } from '@chakra-ui/react';
+import { Td, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ShibariumDepositsItem } from 'types/api/shibarium';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
 import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 const feature = config.features.rollup;
 
  type Props = { item: ShibariumDepositsItem; isLoading?: boolean };
 
 const DepositsTableItem = ({ item, isLoading }: Props) => {
-  const timeAgo = dayjs(item.timestamp).fromNow();
 
   if (!(feature.isEnabled && feature.type === 'shibarium')) {
     return null;
@@ -59,7 +58,12 @@ const DepositsTableItem = ({ item, isLoading }: Props) => {
         />
       </Td>
       <Td verticalAlign="middle" pr={ 12 }>
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block"><span>{ timeAgo }</span></Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
       </Td>
     </Tr>
   );
diff --git a/ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx b/ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx
new file mode 100644
index 0000000000..4ec6b525f2
--- /dev/null
+++ b/ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx
@@ -0,0 +1,99 @@
+import { Skeleton, chakra } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { ZkEvmL2DepositsItem } from 'types/api/zkEvmL2';
+
+import config from 'configs/app';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: ZkEvmL2DepositsItem; isLoading?: boolean };
+
+const ZkEvmL2DepositsListItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'zkEvm') {
+    return null;
+  }
+
+  return (
+    <ListItemMobileGrid.Container>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 block</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BlockEntityL1
+          number={ item.block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Index</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { item.index }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TxEntityL1
+          isLoading={ isLoading }
+          hash={ item.l1_transaction_hash }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          isLoading={ isLoading }
+          display="inline-block"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        { item.l2_transaction_hash ? (
+          <TxEntity
+            isLoading={ isLoading }
+            hash={ item.l2_transaction_hash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+          />
+        ) : (
+          <chakra.span>
+          Pending Claim
+          </chakra.span>
+        ) }
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { BigNumber(item.value).toFormat() }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Token</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { item.symbol }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default ZkEvmL2DepositsListItem;
diff --git a/ui/deposits/zkEvmL2/ZkEvmL2DepositsTable.tsx b/ui/deposits/zkEvmL2/ZkEvmL2DepositsTable.tsx
new file mode 100644
index 0000000000..7311abf3ab
--- /dev/null
+++ b/ui/deposits/zkEvmL2/ZkEvmL2DepositsTable.tsx
@@ -0,0 +1,39 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ZkEvmL2DepositsItem } from 'types/api/zkEvmL2';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import ZkEvmL2DepositsTableItem from './ZkEvmL2DepositsTableItem';
+
+ type Props = {
+   items: Array<ZkEvmL2DepositsItem>;
+   top: number;
+   isLoading?: boolean;
+ }
+
+const ZkEvmL2DepositsTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px">
+      <Thead top={ top }>
+        <Tr>
+          <Th>L1 block</Th>
+          <Th>Index</Th>
+          <Th>L1 txn hash</Th>
+          <Th>Age</Th>
+          <Th>L2 txn hash</Th>
+          <Th isNumeric>Value</Th>
+          <Th>Token</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <ZkEvmL2DepositsTableItem key={ String(item.index) + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default ZkEvmL2DepositsTable;
diff --git a/ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx b/ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx
new file mode 100644
index 0000000000..962135741b
--- /dev/null
+++ b/ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx
@@ -0,0 +1,86 @@
+import { Td, Tr, Skeleton, chakra } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { ZkEvmL2DepositsItem } from 'types/api/zkEvmL2';
+
+import config from 'configs/app';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+ type Props = { item: ZkEvmL2DepositsItem; isLoading?: boolean };
+
+const ZkEvmL2DepositsTableItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'zkEvm') {
+    return null;
+  }
+
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <BlockEntityL1
+          number={ item.block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+          noIcon
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading }>
+          <span>{ item.index }</span>
+        </Skeleton>
+      </Td>
+      <Td verticalAlign="middle">
+        <TxEntityL1
+          isLoading={ isLoading }
+          hash={ item.l1_transaction_hash }
+          truncation="constant_long"
+          noIcon
+          fontSize="sm"
+          lineHeight={ 5 }
+        />
+      </Td>
+      <Td verticalAlign="middle" pr={ 12 }>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        { item.l2_transaction_hash ? (
+          <TxEntity
+            isLoading={ isLoading }
+            hash={ item.l2_transaction_hash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+            noIcon
+          />
+        ) : (
+          <chakra.span color="text_secondary">
+            Pending Claim
+          </chakra.span>
+        ) }
+      </Td>
+      <Td verticalAlign="middle" isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          <span>{ BigNumber(item.value).toFormat() }</span>
+        </Skeleton>
+      </Td>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          <span>{ item.symbol }</span>
+        </Skeleton>
+      </Td>
+    </Tr>
+  );
+};
+
+export default ZkEvmL2DepositsTableItem;
diff --git a/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesListItem.tsx b/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesListItem.tsx
new file mode 100644
index 0000000000..27d83573c5
--- /dev/null
+++ b/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesListItem.tsx
@@ -0,0 +1,84 @@
+import { Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { OptimisticL2DisputeGamesItem } from 'types/api/optimisticL2';
+
+import config from 'configs/app';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
+import HashStringShorten from 'ui/shared/HashStringShorten';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: OptimisticL2DisputeGamesItem; isLoading?: boolean };
+
+const OptimisticL2DisputeGamesListItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') {
+    return null;
+  }
+
+  return (
+    <ListItemMobileGrid.Container>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Index</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value fontWeight={ 600 } color="text">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.index }</Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Game type</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.game_type }</Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Address</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value color="text">
+        <Skeleton isLoaded={ !isLoading } display="flex" overflow="hidden" w="100%" alignItems="center">
+          <HashStringShorten hash={ item.contract_address } type="long"/>
+          <CopyToClipboard text={ item.contract_address } ml={ 2 } isLoading={ isLoading }/>
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 block #</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BlockEntityL2
+          isLoading={ isLoading }
+          number={ item.l2_block_number }
+          fontSize="sm"
+          lineHeight={ 5 }
+          noIcon
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TimeAgoWithTooltip
+          timestamp={ item.created_at }
+          isLoading={ isLoading }
+          display="inline-block"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Status</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value color="text">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.status }</Skeleton>
+      </ListItemMobileGrid.Value>
+
+      { item.resolved_at && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>Resolution age</ListItemMobileGrid.Label><ListItemMobileGrid.Value>
+            <TimeAgoWithTooltip
+              timestamp={ item.resolved_at }
+              isLoading={ isLoading }
+              display="inline-block"
+            />
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default OptimisticL2DisputeGamesListItem;
diff --git a/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTable.tsx b/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTable.tsx
new file mode 100644
index 0000000000..79179c6109
--- /dev/null
+++ b/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTable.tsx
@@ -0,0 +1,43 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { OptimisticL2DisputeGamesItem } from 'types/api/optimisticL2';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import OptimisticL2DisputeGamesTableItem from './OptimisticL2DisputeGamesTableItem';
+
+type Props = {
+  items: Array<OptimisticL2DisputeGamesItem>;
+  top: number;
+  isLoading?: boolean;
+}
+
+const OptimisticL2DisputeGamesTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px">
+      <Thead top={ top }>
+        <Tr>
+          <Th>Index</Th>
+          <Th>Game type</Th>
+          <Th>Address</Th>
+          <Th>L2 block #</Th>
+          <Th>Age</Th>
+          <Th>Status</Th>
+          <Th>Resolution age</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <OptimisticL2DisputeGamesTableItem
+            key={ String(item.index) + (isLoading ? index : '') }
+            item={ item }
+            isLoading={ isLoading }
+          />
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default OptimisticL2DisputeGamesTable;
diff --git a/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTableItem.tsx b/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTableItem.tsx
new file mode 100644
index 0000000000..dd55542b5d
--- /dev/null
+++ b/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTableItem.tsx
@@ -0,0 +1,68 @@
+import { Flex, Td, Tr, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { OptimisticL2DisputeGamesItem } from 'types/api/optimisticL2';
+
+import config from 'configs/app';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
+import HashStringShorten from 'ui/shared/HashStringShorten';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const faultProofSystemFeature = config.features.faultProofSystem;
+
+type Props = { item: OptimisticL2DisputeGamesItem; isLoading?: boolean };
+
+const OptimisticL2DisputeGamesTableItem = ({ item, isLoading }: Props) => {
+  if (!faultProofSystemFeature.isEnabled) {
+    return null;
+  }
+
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.index }</Skeleton>
+      </Td>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.game_type }</Skeleton>
+      </Td>
+      <Td verticalAlign="middle">
+        <Flex overflow="hidden" w="100%" alignItems="center">
+          <Skeleton isLoaded={ !isLoading }>
+            <HashStringShorten hash={ item.contract_address } type="long"/>
+          </Skeleton>
+          <CopyToClipboard text={ item.contract_address } ml={ 2 } isLoading={ isLoading }/>
+        </Flex>
+      </Td>
+      <Td verticalAlign="middle">
+        <BlockEntityL2
+          isLoading={ isLoading }
+          number={ item.l2_block_number }
+          fontSize="sm"
+          lineHeight={ 5 }
+          noIcon
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <TimeAgoWithTooltip
+          timestamp={ item.created_at }
+          isLoading={ isLoading }
+          display="inline-block"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.status }</Skeleton>
+      </Td>
+      <Td>
+        <TimeAgoWithTooltip
+          timestamp={ item.resolved_at }
+          fallbackText="N/A"
+          isLoading={ isLoading }
+          display="inline-block"
+        />
+      </Td>
+    </Tr>
+  );
+};
+
+export default OptimisticL2DisputeGamesTableItem;
diff --git a/ui/gasTracker/GasTrackerChart.tsx b/ui/gasTracker/GasTrackerChart.tsx
index 8bab0d8d1b..a85991db8c 100644
--- a/ui/gasTracker/GasTrackerChart.tsx
+++ b/ui/gasTracker/GasTrackerChart.tsx
@@ -7,7 +7,7 @@ import useApiQuery from 'lib/api/useApiQuery';
 import { STATS_CHARTS } from 'stubs/stats';
 import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import ChartWidgetContainer from 'ui/stats/ChartWidgetContainer';
 
 const GAS_PRICE_CHART_ID = 'averageGasPrice';
diff --git a/ui/gasTracker/GasTrackerPriceSnippet.pw.tsx b/ui/gasTracker/GasTrackerPriceSnippet.pw.tsx
index 77ae96cad3..ac81323c70 100644
--- a/ui/gasTracker/GasTrackerPriceSnippet.pw.tsx
+++ b/ui/gasTracker/GasTrackerPriceSnippet.pw.tsx
@@ -1,60 +1,88 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import type { GasPriceInfo } from 'types/api/stats';
+
 import * as statsMock from 'mocks/stats/index';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import * as configs from 'playwright/utils/configs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import GasTrackerPriceSnippet from './GasTrackerPriceSnippet';
 
-test.use({ viewport: configs.viewport.md });
+test.use({ viewport: pwConfig.viewport.md });
 
-const data = statsMock.base.gas_prices.fast;
+const data = statsMock.base.gas_prices?.fast as GasPriceInfo;
 const clip = { x: 0, y: 0, width: 334, height: 204 };
 
-test('with usd as primary unit +@dark-mode', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <GasTrackerPriceSnippet
-        data={ data }
-        type="fast"
-        isLoading={ false }
-      />
-    </TestApp>,
+test('with usd as primary unit +@dark-mode', async({ render, page }) => {
+  await render(
+    <GasTrackerPriceSnippet
+      data={ data }
+      type="fast"
+      isLoading={ false }
+    />,
   );
   await expect(page).toHaveScreenshot({ clip });
 });
 
-test('loading state', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <GasTrackerPriceSnippet
-        data={ data }
-        type="fast"
-        isLoading={ true }
-      />
-    </TestApp>,
+test('loading state', async({ render, page }) => {
+  await render(
+    <GasTrackerPriceSnippet
+      data={ data }
+      type="fast"
+      isLoading={ true }
+    />,
   );
   await expect(page).toHaveScreenshot({ clip });
 });
 
-const gweiUnitsTest = test.extend({
-  context: contextWithEnvs([
-    { name: 'NEXT_PUBLIC_GAS_TRACKER_UNITS', value: '["gwei","usd"]' },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
+test('with gwei as primary unit +@dark-mode', async({ render, page, mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_GAS_TRACKER_UNITS', '["gwei","usd"]' ],
+  ]);
+  await render(
+    <GasTrackerPriceSnippet
+      data={ data }
+      type="slow"
+      isLoading={ false }
+    />,
+  );
+  await expect(page).toHaveScreenshot({ clip });
 });
 
-gweiUnitsTest('with gwei as primary unit +@dark-mode', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <GasTrackerPriceSnippet
-        data={ data }
-        type="slow"
-        isLoading={ false }
-      />
-    </TestApp>,
+test('with zero values', async({ render, page }) => {
+  const data = {
+    fiat_price: '1.74',
+    price: 0.0,
+    time: 0,
+    base_fee: 0,
+    priority_fee: 0,
+  };
+
+  await render(
+    <GasTrackerPriceSnippet
+      data={ data }
+      type="slow"
+      isLoading={ false }
+    />,
+  );
+  await expect(page).toHaveScreenshot({ clip });
+});
+
+test('with small values', async({ render, page }) => {
+  const data = {
+    fiat_price: '0.0042',
+    price: 0.042,
+    time: 0,
+    base_fee: 0,
+    priority_fee: 0,
+  };
+
+  await render(
+    <GasTrackerPriceSnippet
+      data={ data }
+      type="slow"
+      isLoading={ false }
+    />,
   );
   await expect(page).toHaveScreenshot({ clip });
 });
diff --git a/ui/gasTracker/GasTrackerPriceSnippet.tsx b/ui/gasTracker/GasTrackerPriceSnippet.tsx
index 575fc2d732..f9ebe01445 100644
--- a/ui/gasTracker/GasTrackerPriceSnippet.tsx
+++ b/ui/gasTracker/GasTrackerPriceSnippet.tsx
@@ -32,6 +32,7 @@ const GasTrackerPriceSnippet = ({ data, type, isLoading }: Props) => {
     average: useColorModeValue('gray.50', 'whiteAlpha.200'),
     slow: useColorModeValue('gray.50', 'whiteAlpha.200'),
   };
+  const borderColor = useColorModeValue('gray.200', 'whiteAlpha.300');
 
   return (
     <Box
@@ -41,6 +42,11 @@ const GasTrackerPriceSnippet = ({ data, type, isLoading }: Props) => {
       py={ 6 }
       w={{ lg: 'calc(100% / 3)' }}
       bgColor={ bgColors[type] }
+      _notLast={{
+        borderColor: borderColor,
+        borderRightWidth: { lg: '2px' },
+        borderBottomWidth: { base: '2px', lg: '0' },
+      }}
     >
       <Skeleton textStyle="h3" isLoaded={ !isLoading } w="fit-content">{ TITLES[type] }</Skeleton>
       <Flex columnGap={ 3 } alignItems="center" mt={ 3 }>
@@ -50,14 +56,14 @@ const GasTrackerPriceSnippet = ({ data, type, isLoading }: Props) => {
         </Skeleton>
       </Flex>
       <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" mt={ 3 } w="fit-content">
-        { data.price && data.fiat_price && <GasPrice data={ data } prefix={ `${ asymp } ` } unitMode="secondary"/> }
+        { data.price !== null && data.fiat_price !== null && <GasPrice data={ data } prefix={ `${ asymp } ` } unitMode="secondary"/> }
         <span> per transaction</span>
-        { data.time && <span> / { (data.time / SECOND).toLocaleString(undefined, { maximumFractionDigits: 1 }) }s</span> }
+        { typeof data.time === 'number' && data.time > 0 && <span> / { (data.time / SECOND).toLocaleString(undefined, { maximumFractionDigits: 1 }) }s</span> }
       </Skeleton>
       <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" mt={ 2 } w="fit-content" whiteSpace="pre">
-        { data.base_fee && <span>Base { data.base_fee.toLocaleString(undefined, { maximumFractionDigits: 0 }) }</span> }
-        { data.base_fee && data.priority_fee && <span> / </span> }
-        { data.priority_fee && <span>Priority { data.priority_fee.toLocaleString(undefined, { maximumFractionDigits: 0 }) }</span> }
+        { typeof data.base_fee === 'number' && <span>Base { data.base_fee.toLocaleString(undefined, { maximumFractionDigits: 0 }) }</span> }
+        { typeof data.base_fee === 'number' && typeof data.priority_fee === 'number' && <span> / </span> }
+        { typeof data.priority_fee === 'number' && <span>Priority { data.priority_fee.toLocaleString(undefined, { maximumFractionDigits: 0 }) }</span> }
       </Skeleton>
     </Box>
   );
diff --git a/ui/gasTracker/GasTrackerPrices.tsx b/ui/gasTracker/GasTrackerPrices.tsx
index ffbe0162e9..2f90ec16b3 100644
--- a/ui/gasTracker/GasTrackerPrices.tsx
+++ b/ui/gasTracker/GasTrackerPrices.tsx
@@ -21,13 +21,6 @@ const GasTrackerPrices = ({ prices, isLoading }: Props) => {
       borderWidth="2px"
       borderRadius="xl"
       overflow="hidden"
-      sx={{
-        'li:not(:last-child)': {
-          borderColor: borderColor,
-          borderRightWidth: { lg: '2px' },
-          borderBottomWidth: { base: '2px', lg: '0' },
-        },
-      }}
     >
       { prices.fast && <GasTrackerPriceSnippet type="fast" data={ prices.fast } isLoading={ isLoading }/> }
       { prices.average && <GasTrackerPriceSnippet type="average" data={ prices.average } isLoading={ isLoading }/> }
diff --git a/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_default_with-small-values-1.png b/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_default_with-small-values-1.png
new file mode 100644
index 0000000000..73d69ebb5f
Binary files /dev/null and b/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_default_with-small-values-1.png differ
diff --git a/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_default_with-zero-values-1.png b/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_default_with-zero-values-1.png
new file mode 100644
index 0000000000..b5fb82273f
Binary files /dev/null and b/ui/gasTracker/__screenshots__/GasTrackerPriceSnippet.pw.tsx_default_with-zero-values-1.png differ
diff --git a/ui/home/HeroBanner.pw.tsx b/ui/home/HeroBanner.pw.tsx
new file mode 100644
index 0000000000..ea9735a78f
--- /dev/null
+++ b/ui/home/HeroBanner.pw.tsx
@@ -0,0 +1,39 @@
+import type { BrowserContext } from '@playwright/test';
+import React from 'react';
+
+import * as profileMock from 'mocks/user/profile';
+import { contextWithAuth } from 'playwright/fixtures/auth';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
+
+import HeroBanner from './HeroBanner';
+
+const authTest = test.extend<{ context: BrowserContext }>({
+  context: contextWithAuth,
+});
+
+authTest('customization +@dark-mode', async({ render, page, mockEnvs, mockApiResponse, mockAssetResponse }) => {
+  const IMAGE_URL = 'https://localhost:3000/my-image.png';
+
+  await mockEnvs([
+    // eslint-disable-next-line max-len
+    [ 'NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG', `{"background":["lightpink","no-repeat center/cover url(${ IMAGE_URL })"],"text_color":["deepskyblue","white"],"border":["3px solid green","3px dashed yellow"],"button":{"_default":{"background":["deeppink"],"text_color":["white"]},"_selected":{"background":["lime"]}}}` ],
+  ]);
+
+  await page.route(IMAGE_URL, (route) => {
+    return route.fulfill({
+      status: 200,
+      path: './playwright/mocks/image_long.jpg',
+    });
+  });
+
+  await mockApiResponse('user_info', profileMock.base);
+  await mockAssetResponse(profileMock.base.avatar, './playwright/mocks/image_s.jpg');
+
+  const component = await render(<HeroBanner/>);
+
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
+});
diff --git a/ui/home/HeroBanner.tsx b/ui/home/HeroBanner.tsx
new file mode 100644
index 0000000000..9ad893a668
--- /dev/null
+++ b/ui/home/HeroBanner.tsx
@@ -0,0 +1,69 @@
+import { Box, Flex, Heading, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import AdBanner from 'ui/shared/ad/AdBanner';
+import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
+import SearchBar from 'ui/snippets/searchBar/SearchBar';
+import WalletMenuDesktop from 'ui/snippets/walletMenu/WalletMenuDesktop';
+
+const BACKGROUND_DEFAULT = 'radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%), var(--chakra-colors-blue-400)';
+const TEXT_COLOR_DEFAULT = 'white';
+const BORDER_DEFAULT = 'none';
+
+const HeroBanner = () => {
+  const background = useColorModeValue(
+    config.UI.homepage.heroBanner?.background?.[0] || config.UI.homepage.plate.background || BACKGROUND_DEFAULT,
+    config.UI.homepage.heroBanner?.background?.[1] || config.UI.homepage.plate.background || BACKGROUND_DEFAULT,
+  );
+
+  const textColor = useColorModeValue(
+    config.UI.homepage.heroBanner?.text_color?.[0] || config.UI.homepage.plate.textColor || TEXT_COLOR_DEFAULT,
+    config.UI.homepage.heroBanner?.text_color?.[1] || config.UI.homepage.plate.textColor || TEXT_COLOR_DEFAULT,
+  );
+
+  const border = useColorModeValue(
+    config.UI.homepage.heroBanner?.border?.[0] || BORDER_DEFAULT,
+    config.UI.homepage.heroBanner?.border?.[1] || BORDER_DEFAULT,
+  );
+
+  return (
+    <Flex
+      w="100%"
+      background={ background }
+      border={ border }
+      borderRadius="md"
+      p={{ base: 4, lg: 8 }}
+      columnGap={ 8 }
+      alignItems="center"
+    >
+      <Box flexGrow={ 1 }>
+        <Flex mb={{ base: 2, lg: 3 }} justifyContent="space-between" alignItems="center" columnGap={ 2 }>
+          <Heading
+            as="h1"
+            fontSize={{ base: '18px', lg: '30px' }}
+            lineHeight={{ base: '24px', lg: '36px' }}
+            fontWeight={{ base: 500, lg: 700 }}
+            color={ textColor }
+          >
+            {
+              config.meta.seo.enhancedDataEnabled ?
+                `${ config.chain.name } blockchain explorer` :
+                `${ config.chain.name } explorer`
+            }
+          </Heading>
+          { config.UI.navigation.layout === 'vertical' && (
+            <Box display={{ base: 'none', lg: 'flex' }}>
+              { config.features.account.isEnabled && <ProfileMenuDesktop isHomePage/> }
+              { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop isHomePage/> }
+            </Box>
+          ) }
+        </Flex>
+        <SearchBar isHomepage/>
+      </Box>
+      <AdBanner platform="mobile" w="fit-content" flexShrink={ 0 } borderRadius="md" overflow="hidden" display={{ base: 'none', lg: 'block ' }}/>
+    </Flex>
+  );
+};
+
+export default React.memo(HeroBanner);
diff --git a/ui/home/LatestBlocks.pw.tsx b/ui/home/LatestBlocks.pw.tsx
index 140c7e6af9..0852902c50 100644
--- a/ui/home/LatestBlocks.pw.tsx
+++ b/ui/home/LatestBlocks.pw.tsx
@@ -1,145 +1,49 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as blockMock from 'mocks/blocks/block';
 import * as statsMock from 'mocks/stats/index';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
 import * as socketServer from 'playwright/fixtures/socketServer';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { test, expect } from 'playwright/lib';
 
 import LatestBlocks from './LatestBlocks';
 
-const STATS_API_URL = buildApiUrl('stats');
-const BLOCKS_API_URL = buildApiUrl('homepage_blocks');
-
-export const test = base.extend<socketServer.SocketServerFixture>({
-  createSocket: socketServer.createSocket,
-});
-
-test('default view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(STATS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
-  await page.route(BLOCKS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      blockMock.base,
-      blockMock.base2,
-    ]),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LatestBlocks/>
-    </TestApp>,
-  );
-
+test('default view +@mobile +@dark-mode', async({ render, mockApiResponse }) => {
+  await mockApiResponse('stats', statsMock.base);
+  await mockApiResponse('homepage_blocks', [ blockMock.base, blockMock.base2 ]);
+  const component = await render(<LatestBlocks/>);
   await expect(component).toHaveScreenshot();
 });
 
-const testL2 = test.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
-testL2('L2 view', async({ mount, page }) => {
-  await page.route(STATS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
-  await page.route(BLOCKS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      blockMock.base,
-      blockMock.base2,
-    ]),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LatestBlocks/>
-    </TestApp>,
-  );
-
+test('L2 view', async({ render, mockEnvs, mockApiResponse }) => {
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  await mockApiResponse('stats', statsMock.base);
+  await mockApiResponse('homepage_blocks', [ blockMock.base, blockMock.base2 ]);
+  const component = await render(<LatestBlocks/>);
   await expect(component).toHaveScreenshot();
 });
 
-const testNoReward = test.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.viewsEnvs.block.hiddenFields) as any,
-});
-
-testNoReward('no reward view', async({ mount, page }) => {
-  await page.route(STATS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
-  await page.route(BLOCKS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      blockMock.base,
-      blockMock.base2,
-    ]),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LatestBlocks/>
-    </TestApp>,
-  );
-
+test('no reward view', async({ render, mockEnvs, mockApiResponse }) => {
+  await mockEnvs(ENVS_MAP.blockHiddenFields);
+  await mockApiResponse('stats', statsMock.base);
+  await mockApiResponse('homepage_blocks', [ blockMock.base, blockMock.base2 ]);
+  const component = await render(<LatestBlocks/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('with long block height', async({ mount, page }) => {
-  await page.route(STATS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
-  await page.route(BLOCKS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      {
-        ...blockMock.base,
-        height: 123456789012345,
-      },
-    ]),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LatestBlocks/>
-    </TestApp>,
-  );
-
+test('with long block height', async({ render, mockApiResponse }) => {
+  await mockApiResponse('stats', statsMock.base);
+  await mockApiResponse('homepage_blocks', [ { ...blockMock.base, height: 123456789012345 } ]);
+  const component = await render(<LatestBlocks/>);
   await expect(component).toHaveScreenshot();
 });
 
 test.describe('socket', () => {
   test.describe.configure({ mode: 'serial' });
-
-  test('new item', async({ mount, page, createSocket }) => {
-    await page.route(STATS_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(statsMock.base),
-    }));
-    await page.route(BLOCKS_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify([
-        blockMock.base,
-        blockMock.base2,
-      ]),
-    }));
-
-    const component = await mount(
-      <TestApp withSocket>
-        <LatestBlocks/>
-      </TestApp>,
-    );
-
+  test('new item', async({ render, mockApiResponse, createSocket }) => {
+    await mockApiResponse('stats', statsMock.base);
+    await mockApiResponse('homepage_blocks', [ blockMock.base, blockMock.base2 ]);
+    const component = await render(<LatestBlocks/>, undefined, { withSocket: true });
     const socket = await createSocket();
     const channel = await socketServer.joinChannel(socket, 'blocks:new_block');
     socketServer.sendMessage(socket, channel, 'new_block', {
@@ -150,7 +54,6 @@ test.describe('socket', () => {
         timestamp: '2022-11-11T11:59:58Z',
       },
     });
-
     await expect(component).toHaveScreenshot();
   });
 });
diff --git a/ui/home/LatestBlocks.tsx b/ui/home/LatestBlocks.tsx
index e6afdf3213..2f6692aa1e 100644
--- a/ui/home/LatestBlocks.tsx
+++ b/ui/home/LatestBlocks.tsx
@@ -1,4 +1,4 @@
-import { Box, Heading, Flex, Text, VStack, Skeleton } from '@chakra-ui/react';
+import { chakra, Box, Heading, Flex, Text, VStack, Skeleton } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { AnimatePresence } from 'framer-motion';
 import React from 'react';
@@ -16,7 +16,7 @@ import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import { BLOCK } from 'stubs/block';
 import { HOMEPAGE_STATS } from 'stubs/stats';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 
 import LatestBlocksItem from './LatestBlocksItem';
 
@@ -69,7 +69,7 @@ const LatestBlocks = () => {
   let content;
 
   if (isError) {
-    content = <Text>No data. Please reload page.</Text>;
+    content = <Text>No data. Please reload the page.</Text>;
   }
 
   if (data) {
@@ -77,17 +77,7 @@ const LatestBlocks = () => {
 
     content = (
       <>
-        { statsQueryResult.data?.network_utilization_percentage !== undefined && (
-          <Skeleton isLoaded={ !statsQueryResult.isPlaceholderData } mb={{ base: 6, lg: 3 }} display="inline-block">
-            <Text as="span" fontSize="sm">
-              Network utilization:{ nbsp }
-            </Text>
-            <Text as="span" fontSize="sm" color="blue.400" fontWeight={ 700 }>
-              { statsQueryResult.data?.network_utilization_percentage.toFixed(2) }%
-            </Text>
-          </Skeleton>
-        ) }
-        <VStack spacing={ 3 } mb={ 4 } overflow="hidden" alignItems="stretch">
+        <VStack spacing={ 2 } mb={ 3 } overflow="hidden" alignItems="stretch">
           <AnimatePresence initial={ false } >
             { dataToShow.map(((block, index) => (
               <LatestBlocksItem
@@ -107,8 +97,26 @@ const LatestBlocks = () => {
 
   return (
     <Box width={{ base: '100%', lg: '280px' }} flexShrink={ 0 }>
-      <Heading as="h4" size="sm" mb={ 4 }>Latest blocks</Heading>
-      { content }
+      <Heading as="h4" size="sm">Latest blocks</Heading>
+      { statsQueryResult.data?.network_utilization_percentage !== undefined && (
+        <Skeleton isLoaded={ !statsQueryResult.isPlaceholderData } mt={ 1 } display="inline-block">
+          <Text as="span" fontSize="sm">
+              Network utilization:{ nbsp }
+          </Text>
+          <Text as="span" fontSize="sm" color="blue.400" fontWeight={ 700 }>
+            { statsQueryResult.data?.network_utilization_percentage.toFixed(2) }%
+          </Text>
+        </Skeleton>
+      ) }
+      { statsQueryResult.data?.celo && (
+        <Box whiteSpace="pre-wrap" fontSize="sm">
+          <span>Current epoch: </span>
+          <chakra.span fontWeight={ 700 }>#{ statsQueryResult.data.celo.epoch_number }</chakra.span>
+        </Box>
+      ) }
+      <Box mt={ 3 }>
+        { content }
+      </Box>
     </Box>
   );
 };
diff --git a/ui/home/LatestBlocksItem.tsx b/ui/home/LatestBlocksItem.tsx
index b0d9f69006..54419c2e0d 100644
--- a/ui/home/LatestBlocksItem.tsx
+++ b/ui/home/LatestBlocksItem.tsx
@@ -3,6 +3,7 @@ import {
   Flex,
   Grid,
   Skeleton,
+  Tooltip,
 } from '@chakra-ui/react';
 import { motion } from 'framer-motion';
 import React from 'react';
@@ -12,9 +13,10 @@ import type { Block } from 'types/api/block';
 import config from 'configs/app';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
-import BlockTimestamp from 'ui/blocks/BlockTimestamp';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import IconSvg from 'ui/shared/IconSvg';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 type Props = {
   block: Block;
@@ -34,7 +36,7 @@ const LatestBlocksItem = ({ block, isLoading }: Props) => {
       borderRadius="md"
       border="1px solid"
       borderColor="divider"
-      p={ 6 }
+      p={ 3 }
     >
       <Flex alignItems="center" overflow="hidden" w="100%" mb={ 3 }>
         <BlockEntity
@@ -46,10 +48,18 @@ const LatestBlocksItem = ({ block, isLoading }: Props) => {
           fontWeight={ 500 }
           mr="auto"
         />
-        <BlockTimestamp
-          ts={ block.timestamp }
-          isEnabled={ !isLoading }
+        { block.celo?.is_epoch_block && (
+          <Tooltip label={ `Finalized epoch #${ block.celo.epoch_number }` }>
+            <IconSvg name="checkered_flag" boxSize={ 5 } p="1px" ml={ 2 } isLoading={ isLoading } flexShrink={ 0 }/>
+          </Tooltip>
+        ) }
+        <TimeAgoWithTooltip
+          timestamp={ block.timestamp }
+          enableIncrement={ !isLoading }
           isLoading={ isLoading }
+          color="text_secondary"
+          fontWeight={ 400 }
+          display="inline-block"
           fontSize="sm"
           flexShrink={ 0 }
           ml={ 2 }
diff --git a/ui/home/LatestDeposits.pw.tsx b/ui/home/LatestDeposits.pw.tsx
deleted file mode 100644
index 44886e6496..0000000000
--- a/ui/home/LatestDeposits.pw.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
-import React from 'react';
-
-import * as depositMock from 'mocks/l2deposits/deposits';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
-
-import LatestDeposits from './LatestDeposits';
-
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
-test('default view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(buildApiUrl('homepage_deposits'), (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(depositMock.data.items),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LatestDeposits/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
diff --git a/ui/home/LatestDeposits.tsx b/ui/home/LatestDeposits.tsx
deleted file mode 100644
index ed5518e722..0000000000
--- a/ui/home/LatestDeposits.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Box, Flex, Text } from '@chakra-ui/react';
-import React from 'react';
-
-import type { SocketMessage } from 'lib/socket/types';
-
-import { route } from 'nextjs-routes';
-
-import useApiQuery from 'lib/api/useApiQuery';
-import useGradualIncrement from 'lib/hooks/useGradualIncrement';
-import useIsMobile from 'lib/hooks/useIsMobile';
-import useSocketChannel from 'lib/socket/useSocketChannel';
-import useSocketMessage from 'lib/socket/useSocketMessage';
-import { L2_DEPOSIT_ITEM } from 'stubs/L2';
-import LinkInternal from 'ui/shared/LinkInternal';
-import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
-
-import LatestDepositsItem from './LatestDepositsItem';
-
-const LatestDeposits = () => {
-  const isMobile = useIsMobile();
-  const itemsCount = isMobile ? 2 : 6;
-  const { data, isPlaceholderData, isError } = useApiQuery('homepage_deposits', {
-    queryOptions: {
-      placeholderData: Array(itemsCount).fill(L2_DEPOSIT_ITEM),
-    },
-  });
-
-  const [ num, setNum ] = useGradualIncrement(0);
-  const [ socketAlert, setSocketAlert ] = React.useState('');
-
-  const handleSocketClose = React.useCallback(() => {
-    setSocketAlert('Connection is lost. Please reload page.');
-  }, []);
-
-  const handleSocketError = React.useCallback(() => {
-    setSocketAlert('An error has occurred while fetching new transactions. Please reload page.');
-  }, []);
-
-  const handleNewDepositMessage: SocketMessage.NewDeposits['handler'] = React.useCallback((payload) => {
-    setNum(payload.deposits);
-  }, [ setNum ]);
-
-  const channel = useSocketChannel({
-    topic: 'optimism_deposits:new_deposits',
-    onSocketClose: handleSocketClose,
-    onSocketError: handleSocketError,
-    isDisabled: false,
-  });
-
-  useSocketMessage({
-    channel,
-    event: 'deposits',
-    handler: handleNewDepositMessage,
-  });
-
-  if (isError) {
-    return <Text mt={ 4 }>No data. Please reload page.</Text>;
-  }
-
-  if (data) {
-    const depositsUrl = route({ pathname: '/deposits' });
-    return (
-      <>
-        <SocketNewItemsNotice borderBottomRadius={ 0 } url={ depositsUrl } num={ num } alert={ socketAlert } type="deposit" isLoading={ isPlaceholderData }/>
-        <Box mb={{ base: 3, lg: 4 }}>
-          { data.slice(0, itemsCount).map(((item, index) => (
-            <LatestDepositsItem
-              key={ item.l2_tx_hash + (isPlaceholderData ? index : '') }
-              item={ item }
-              isLoading={ isPlaceholderData }
-            />
-          ))) }
-        </Box>
-        <Flex justifyContent="center">
-          <LinkInternal fontSize="sm" href={ depositsUrl }>View all deposits</LinkInternal>
-        </Flex>
-      </>
-    );
-  }
-
-  return null;
-};
-
-export default LatestDeposits;
diff --git a/ui/home/LatestDepositsItem.tsx b/ui/home/LatestDepositsItem.tsx
deleted file mode 100644
index 813a41f743..0000000000
--- a/ui/home/LatestDepositsItem.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import {
-  Box,
-  Flex,
-  Grid,
-  Skeleton,
-} from '@chakra-ui/react';
-import React from 'react';
-
-import type { OptimisticL2DepositsItem } from 'types/api/optimisticL2';
-
-import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
-import useIsMobile from 'lib/hooks/useIsMobile';
-import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
-import TxEntity from 'ui/shared/entities/tx/TxEntity';
-import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-
-const feature = config.features.rollup;
-
-type Props = {
-  item: OptimisticL2DepositsItem;
-  isLoading?: boolean;
-}
-
-const LatestDepositsItem = ({ item, isLoading }: Props) => {
-  const timeAgo = dayjs(item.l1_block_timestamp).fromNow();
-  const isMobile = useIsMobile();
-
-  if (!feature.isEnabled || feature.type !== 'optimistic') {
-    return null;
-  }
-
-  const l1BlockLink = (
-    <BlockEntityL1
-      number={ item.l1_block_number }
-      isLoading={ isLoading }
-      fontSize="sm"
-      lineHeight={ 5 }
-      fontWeight={ 700 }
-    />
-  );
-
-  const l1TxLink = (
-    <TxEntityL1
-      isLoading={ isLoading }
-      hash={ item.l1_tx_hash }
-      fontSize="sm"
-      lineHeight={ 5 }
-      truncation={ isMobile ? 'constant_long' : 'dynamic' }
-    />
-  );
-
-  const l2TxLink = (
-    <TxEntity
-      isLoading={ isLoading }
-      hash={ item.l2_tx_hash }
-      fontSize="sm"
-      lineHeight={ 5 }
-      truncation={ isMobile ? 'constant_long' : 'dynamic' }
-    />
-  );
-
-  const content = (() => {
-    if (isMobile) {
-      return (
-        <>
-          <Flex justifyContent="space-between" alignItems="center" mb={ 1 }>
-            { l1BlockLink }
-            <Skeleton isLoaded={ !isLoading } color="text_secondary">
-              <span>{ timeAgo }</span>
-            </Skeleton>
-          </Flex>
-          <Grid gridTemplateColumns="56px auto">
-            <Skeleton isLoaded={ !isLoading } my="5px" w="fit-content">
-              L1 txn
-            </Skeleton>
-            { l1TxLink }
-            <Skeleton isLoaded={ !isLoading } my="3px" w="fit-content">
-              L2 txn
-            </Skeleton>
-            { l2TxLink }
-          </Grid>
-        </>
-      );
-    }
-
-    return (
-      <Grid width="100%" columnGap={ 4 } rowGap={ 2 } templateColumns="max-content max-content auto" w="100%">
-        { l1BlockLink }
-        <Skeleton isLoaded={ !isLoading } w="fit-content" h="fit-content" my="5px">
-          L1 txn
-        </Skeleton>
-        { l1TxLink }
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" w="fit-content" h="fit-content" my="2px">
-          <span>{ timeAgo }</span>
-        </Skeleton>
-        <Skeleton isLoaded={ !isLoading } w="fit-content" h="fit-content" my="2px">
-          L2 txn
-        </Skeleton>
-        { l2TxLink }
-      </Grid>
-    );
-  })();
-
-  return (
-    <Box
-      width="100%"
-      borderTop="1px solid"
-      borderColor="divider"
-      py={ 4 }
-      px={{ base: 0, lg: 4 }}
-      _last={{ borderBottom: '1px solid', borderColor: 'divider' }}
-      fontSize="sm"
-      lineHeight={ 5 }
-    >
-      { content }
-    </Box>
-  );
-};
-
-export default React.memo(LatestDepositsItem);
diff --git a/ui/home/LatestTxs.pw.tsx b/ui/home/LatestTxs.pw.tsx
index 6e16add22f..a3b0d4880d 100644
--- a/ui/home/LatestTxs.pw.tsx
+++ b/ui/home/LatestTxs.pw.tsx
@@ -1,10 +1,8 @@
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as txMock from 'mocks/txs/tx';
 import * as socketServer from 'playwright/fixtures/socketServer';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test as base, expect, devices } from 'playwright/lib';
 
 import LatestTxs from './LatestTxs';
 
@@ -14,44 +12,28 @@ export const test = base.extend<socketServer.SocketServerFixture>({
 
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
-  test('default view', async({ mount, page }) => {
-    await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify([
-        txMock.base,
-        txMock.withContractCreation,
-        txMock.withTokenTransfer,
-        txMock.withWatchListNames,
-      ]),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <LatestTxs/>
-      </TestApp>,
-    );
-
-    await expect(component).toHaveScreenshot();
-  });
-});
-
-test('default view +@dark-mode', async({ mount, page }) => {
-  await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
+  test('default view', async({ render, mockApiResponse }) => {
+    await mockApiResponse('homepage_txs', [
       txMock.base,
       txMock.withContractCreation,
       txMock.withTokenTransfer,
       txMock.withWatchListNames,
-    ]),
-  }));
+    ]);
 
-  const component = await mount(
-    <TestApp>
-      <LatestTxs/>
-    </TestApp>,
-  );
+    const component = await render(<LatestTxs/>);
+    await expect(component).toHaveScreenshot();
+  });
+});
+
+test('default view +@dark-mode', async({ render, mockApiResponse }) => {
+  await mockApiResponse('homepage_txs', [
+    txMock.base,
+    txMock.withContractCreation,
+    txMock.withTokenTransfer,
+    txMock.withWatchListNames,
+  ]);
 
+  const component = await render(<LatestTxs/>);
   await expect(component).toHaveScreenshot();
 });
 
@@ -65,27 +47,17 @@ test.describe('socket', () => {
     },
   };
 
-  test('new item', async({ mount, page, createSocket }) => {
-    await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify([
-        txMock.base,
-        txMock.withContractCreation,
-        txMock.withTokenTransfer,
-      ]),
-    }));
-
-    const component = await mount(
-      <TestApp withSocket>
-        <LatestTxs/>
-      </TestApp>,
-      { hooksConfig },
-    );
+  test('new item', async({ render, mockApiResponse, createSocket }) => {
+    await mockApiResponse('homepage_txs', [
+      txMock.base,
+      txMock.withContractCreation,
+      txMock.withTokenTransfer,
+    ]);
 
+    const component = await render(<LatestTxs/>, { hooksConfig }, { withSocket: true });
     const socket = await createSocket();
     const channel = await socketServer.joinChannel(socket, 'transactions:new_transaction');
     socketServer.sendMessage(socket, channel, 'transaction', { transaction: 1 });
-
     await expect(component).toHaveScreenshot();
   });
 });
diff --git a/ui/home/LatestTxs.tsx b/ui/home/LatestTxs.tsx
index 37b4ea695a..290bdf337e 100644
--- a/ui/home/LatestTxs.tsx
+++ b/ui/home/LatestTxs.tsx
@@ -8,7 +8,7 @@ import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useNewTxsSocket from 'lib/hooks/useNewTxsSocket';
 import { TX } from 'stubs/tx';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 
 import LatestTxsItem from './LatestTxsItem';
@@ -26,7 +26,7 @@ const LatestTransactions = () => {
   const { num, socketAlert } = useNewTxsSocket();
 
   if (isError) {
-    return <Text mt={ 4 }>No data. Please reload page.</Text>;
+    return <Text mt={ 4 }>No data. Please reload the page.</Text>;
   }
 
   if (data) {
@@ -44,7 +44,7 @@ const LatestTransactions = () => {
           ))) }
         </Box>
         <AddressHighlightProvider>
-          <Box mb={ 4 } display={{ base: 'none', lg: 'block' }}>
+          <Box mb={ 3 } display={{ base: 'none', lg: 'block' }}>
             { data.slice(0, txsCount).map(((tx, index) => (
               <LatestTxsItem
                 key={ tx.hash + (isPlaceholderData ? index : '') }
diff --git a/ui/home/LatestTxsItem.tsx b/ui/home/LatestTxsItem.tsx
index 80219ccb68..7fcc367f8f 100644
--- a/ui/home/LatestTxsItem.tsx
+++ b/ui/home/LatestTxsItem.tsx
@@ -12,12 +12,12 @@ import type { Transaction } from 'types/api/transaction';
 
 import config from 'configs/app';
 import getValueWithUnit from 'lib/getValueWithUnit';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import { currencyUnits } from 'lib/units';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
-import TxFeeStability from 'ui/shared/tx/TxFeeStability';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TxFee from 'ui/shared/tx/TxFee';
 import TxWatchListTags from 'ui/shared/tx/TxWatchListTags';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 import TxType from 'ui/txs/TxType';
@@ -29,14 +29,13 @@ type Props = {
 
 const LatestTxsItem = ({ tx, isLoading }: Props) => {
   const dataTo = tx.to ? tx.to : tx.created_contract;
-  const timeAgo = useTimeAgoIncrement(tx.timestamp || '0', true);
   const columnNum = config.UI.views.tx.hiddenFields?.value && config.UI.views.tx.hiddenFields?.tx_fee ? 2 : 3;
 
   return (
     <Grid
       gridTemplateColumns={{
-        lg: columnNum === 2 ? '3fr minmax(auto, 180px)' : '3fr minmax(auto, 180px) 150px',
-        xl: columnNum === 2 ? '3fr minmax(auto, 250px)' : '3fr minmax(auto, 275px) 150px',
+        lg: columnNum === 2 ? '3fr minmax(auto, 180px)' : '3fr minmax(auto, 180px) 170px',
+        xl: columnNum === 2 ? '3fr minmax(auto, 250px)' : '3fr minmax(auto, 275px) 170px',
       }}
       gridGap={ 8 }
       width="100%"
@@ -65,18 +64,16 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
               hash={ tx.hash }
               fontWeight="700"
             />
-            { tx.timestamp && (
-              <Skeleton
-                isLoaded={ !isLoading }
-                color="text_secondary"
-                fontWeight="400"
-                fontSize="sm"
-                flexShrink={ 0 }
-                ml={ 2 }
-              >
-                <span>{ timeAgo }</span>
-              </Skeleton>
-            ) }
+            <TimeAgoWithTooltip
+              timestamp={ tx.timestamp }
+              enableIncrement
+              isLoading={ isLoading }
+              color="text_secondary"
+              fontWeight="400"
+              fontSize="sm"
+              flexShrink={ 0 }
+              ml={ 2 }
+            />
           </Flex>
         </Box>
       </Flex>
@@ -89,18 +86,14 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
       <Flex flexDir="column">
         { !config.UI.views.tx.hiddenFields?.value && (
           <Skeleton isLoaded={ !isLoading } my="3px">
-            <Text as="span" whiteSpace="pre">{ currencyUnits.ether } </Text>
-            <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() }</Text>
+            <Text as="span" whiteSpace="pre">Value </Text>
+            <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() } { currencyUnits.ether }</Text>
           </Skeleton>
         ) }
         { !config.UI.views.tx.hiddenFields?.tx_fee && (
           <Skeleton isLoaded={ !isLoading } display="flex" whiteSpace="pre" my="3px">
             <Text as="span">Fee </Text>
-            { tx.stability_fee ? (
-              <TxFeeStability data={ tx.stability_fee } accuracy={ 5 } color="text_secondary" hideUsd/>
-            ) : (
-              <Text as="span" variant="secondary">{ tx.fee.value ? getValueWithUnit(tx.fee.value).dp(5).toFormat() : '-' }</Text>
-            ) }
+            <TxFee tx={ tx } accuracy={ 5 } color="text_secondary"/>
           </Skeleton>
         ) }
       </Flex>
diff --git a/ui/home/LatestTxsItemMobile.tsx b/ui/home/LatestTxsItemMobile.tsx
index b75886f12e..e3d88bd9d0 100644
--- a/ui/home/LatestTxsItemMobile.tsx
+++ b/ui/home/LatestTxsItemMobile.tsx
@@ -11,12 +11,12 @@ import type { Transaction } from 'types/api/transaction';
 
 import config from 'configs/app';
 import getValueWithUnit from 'lib/getValueWithUnit';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import { currencyUnits } from 'lib/units';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
-import TxFeeStability from 'ui/shared/tx/TxFeeStability';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TxFee from 'ui/shared/tx/TxFee';
 import TxWatchListTags from 'ui/shared/tx/TxWatchListTags';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 import TxType from 'ui/txs/TxType';
@@ -28,7 +28,6 @@ type Props = {
 
 const LatestTxsItem = ({ tx, isLoading }: Props) => {
   const dataTo = tx.to ? tx.to : tx.created_contract;
-  const timeAgo = useTimeAgoIncrement(tx.timestamp || '0', true);
 
   return (
     <Box
@@ -60,11 +59,15 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
           fontWeight="700"
           truncation="constant_long"
         />
-        { tx.timestamp && (
-          <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm" ml={ 3 }>
-            <span>{ timeAgo }</span>
-          </Skeleton>
-        ) }
+        <TimeAgoWithTooltip
+          timestamp={ tx.timestamp }
+          enableIncrement
+          isLoading={ isLoading }
+          color="text_secondary"
+          fontWeight="400"
+          fontSize="sm"
+          ml={ 3 }
+        />
       </Flex>
       <AddressFromTo
         from={ tx.from }
@@ -76,18 +79,14 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
       />
       { !config.UI.views.tx.hiddenFields?.value && (
         <Skeleton isLoaded={ !isLoading } mb={ 2 } fontSize="sm" w="fit-content">
-          <Text as="span">Value { currencyUnits.ether } </Text>
-          <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() }</Text>
+          <Text as="span">Value </Text>
+          <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() } { currencyUnits.ether }</Text>
         </Skeleton>
       ) }
       { !config.UI.views.tx.hiddenFields?.tx_fee && (
         <Skeleton isLoaded={ !isLoading } fontSize="sm" w="fit-content" display="flex" whiteSpace="pre">
-          <Text as="span">Fee { !config.UI.views.tx.hiddenFields?.fee_currency ? `${ currencyUnits.ether } ` : '' }</Text>
-          { tx.stability_fee ? (
-            <TxFeeStability data={ tx.stability_fee } accuracy={ 5 } color="text_secondary" hideUsd/>
-          ) : (
-            <Text as="span" variant="secondary">{ tx.fee.value ? getValueWithUnit(tx.fee.value).dp(5).toFormat() : '-' }</Text>
-          ) }
+          <Text as="span">Fee </Text>
+          <TxFee tx={ tx } accuracy={ 5 } color="text_secondary"/>
         </Skeleton>
       ) }
     </Box>
diff --git a/ui/home/LatestWatchlistTxs.tsx b/ui/home/LatestWatchlistTxs.tsx
index f191b80d96..89a12eb719 100644
--- a/ui/home/LatestWatchlistTxs.tsx
+++ b/ui/home/LatestWatchlistTxs.tsx
@@ -7,7 +7,7 @@ import useApiQuery from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
 import { TX } from 'stubs/tx';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 
 import LatestTxsItem from './LatestTxsItem';
 import LatestTxsItemMobile from './LatestTxsItemMobile';
@@ -23,7 +23,7 @@ const LatestWatchlistTxs = () => {
   });
 
   if (isError) {
-    return <Text mt={ 4 }>No data. Please reload page.</Text>;
+    return <Text mt={ 4 }>No data. Please reload the page.</Text>;
   }
 
   if (!data?.length) {
diff --git a/ui/home/LatestZkEvmL2Batches.pw.tsx b/ui/home/LatestZkEvmL2Batches.pw.tsx
deleted file mode 100644
index ee27d19012..0000000000
--- a/ui/home/LatestZkEvmL2Batches.pw.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
-import React from 'react';
-
-import { txnBatchesData } from 'mocks/zkevmL2txnBatches/zkevmL2txnBatches';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
-
-import LatestZkEvmL2Batches from './LatestZkEvmL2Batches';
-
-const BATCHES_API_URL = buildApiUrl('homepage_zkevm_l2_batches');
-
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.zkEvmRollup) as any,
-});
-
-test('default view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(BATCHES_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(txnBatchesData),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LatestZkEvmL2Batches/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
diff --git a/ui/home/LatestZkEvmL2Batches.tsx b/ui/home/LatestZkEvmL2Batches.tsx
deleted file mode 100644
index 246991b285..0000000000
--- a/ui/home/LatestZkEvmL2Batches.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { Box, Heading, Flex, Text, VStack } from '@chakra-ui/react';
-import { useQueryClient } from '@tanstack/react-query';
-import { AnimatePresence } from 'framer-motion';
-import React from 'react';
-
-import type { SocketMessage } from 'lib/socket/types';
-import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2';
-
-import { route } from 'nextjs-routes';
-
-import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
-import useIsMobile from 'lib/hooks/useIsMobile';
-import useSocketChannel from 'lib/socket/useSocketChannel';
-import useSocketMessage from 'lib/socket/useSocketMessage';
-import { ZKEVM_L2_TXN_BATCHES_ITEM } from 'stubs/zkEvmL2';
-import LinkInternal from 'ui/shared/LinkInternal';
-
-import LatestZkevmL2BatchItem from './LatestZkevmL2BatchItem';
-
-const LatestZkEvmL2Batches = () => {
-  const isMobile = useIsMobile();
-  const batchesMaxCount = isMobile ? 2 : 5;
-  const queryClient = useQueryClient();
-
-  const { data, isPlaceholderData, isError } = useApiQuery('homepage_zkevm_l2_batches', {
-    queryOptions: {
-      placeholderData: { items: Array(batchesMaxCount).fill(ZKEVM_L2_TXN_BATCHES_ITEM) },
-    },
-  });
-
-  const handleNewBatchMessage: SocketMessage.NewZkEvmL2Batch['handler'] = React.useCallback((payload) => {
-    queryClient.setQueryData(getResourceKey('homepage_zkevm_l2_batches'), (prevData: { items: Array<ZkEvmL2TxnBatchesItem> } | undefined) => {
-      const newItems = prevData?.items ? [ ...prevData.items ] : [];
-
-      if (newItems.some((batch => batch.number === payload.batch.number))) {
-        return { items: newItems };
-      }
-
-      return { items: [ payload.batch, ...newItems ].sort((b1, b2) => b2.number - b1.number).slice(0, batchesMaxCount) };
-    });
-  }, [ queryClient, batchesMaxCount ]);
-
-  const channel = useSocketChannel({
-    topic: 'zkevm_batches:new_zkevm_confirmed_batch',
-    isDisabled: isPlaceholderData || isError,
-  });
-  useSocketMessage({
-    channel,
-    event: 'new_zkevm_confirmed_batch',
-    handler: handleNewBatchMessage,
-  });
-
-  let content;
-
-  if (isError) {
-    content = <Text>No data. Please reload page.</Text>;
-  }
-
-  if (data) {
-    const dataToShow = data.items.slice(0, batchesMaxCount);
-
-    content = (
-      <>
-        <VStack spacing={ 3 } mb={ 4 } overflow="hidden" alignItems="stretch">
-          <AnimatePresence initial={ false } >
-            { dataToShow.map(((batch, index) => (
-              <LatestZkevmL2BatchItem
-                key={ batch.number + (isPlaceholderData ? String(index) : '') }
-                batch={ batch }
-                isLoading={ isPlaceholderData }
-              />
-            ))) }
-          </AnimatePresence>
-        </VStack>
-        <Flex justifyContent="center">
-          <LinkInternal fontSize="sm" href={ route({ pathname: '/batches' }) }>View all batches</LinkInternal>
-        </Flex>
-      </>
-    );
-  }
-
-  return (
-    <Box width={{ base: '100%', lg: '280px' }} flexShrink={ 0 }>
-      <Heading as="h4" size="sm" mb={ 4 }>Latest batches</Heading>
-      { content }
-    </Box>
-  );
-};
-
-export default LatestZkEvmL2Batches;
diff --git a/ui/home/LatestZkevmL2BatchItem.tsx b/ui/home/LatestZkevmL2BatchItem.tsx
deleted file mode 100644
index b2d8b93bb3..0000000000
--- a/ui/home/LatestZkevmL2BatchItem.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import {
-  Box,
-  Flex,
-  Skeleton,
-} from '@chakra-ui/react';
-import { motion } from 'framer-motion';
-import React from 'react';
-
-import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2';
-
-import { route } from 'nextjs-routes';
-
-import BlockTimestamp from 'ui/blocks/BlockTimestamp';
-import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
-import LinkInternal from 'ui/shared/LinkInternal';
-import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus';
-
-type Props = {
-  batch: ZkEvmL2TxnBatchesItem;
-  isLoading?: boolean;
-}
-
-const LatestZkevmL2BatchItem = ({ batch, isLoading }: Props) => {
-  return (
-    <Box
-      as={ motion.div }
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ display: 'none' }}
-      transitionDuration="normal"
-      transitionTimingFunction="linear"
-      borderRadius="md"
-      border="1px solid"
-      borderColor="divider"
-      p={ 6 }
-    >
-      <Flex alignItems="center" overflow="hidden" w="100%" mb={ 3 }>
-        <BatchEntityL2
-          isLoading={ isLoading }
-          number={ batch.number }
-          tailLength={ 2 }
-          fontSize="xl"
-          lineHeight={ 7 }
-          fontWeight={ 500 }
-          mr="auto"
-        />
-        <BlockTimestamp
-          ts={ batch.timestamp }
-          isEnabled={ !isLoading }
-          isLoading={ isLoading }
-          fontSize="sm"
-          flexShrink={ 0 }
-          ml={ 2 }
-        />
-      </Flex>
-      <Flex alignItems="center" justifyContent="space-between" w="100%" flexWrap="wrap">
-        <Flex alignItems="center">
-          <Skeleton isLoaded={ !isLoading } mr={ 2 }>Txn</Skeleton>
-          <LinkInternal
-            href={ route({ pathname: '/batches/[number]', query: { number: batch.number.toString(), tab: 'txs' } }) }
-            isLoading={ isLoading }
-          >
-            <Skeleton isLoaded={ !isLoading }>
-              { batch.tx_count }
-            </Skeleton>
-          </LinkInternal>
-        </Flex>
-        <ZkEvmL2TxnBatchStatus status={ batch.status } isLoading={ isLoading }/>
-      </Flex>
-    </Box>
-  );
-};
-
-export default LatestZkevmL2BatchItem;
diff --git a/ui/home/Stats.pw.tsx b/ui/home/Stats.pw.tsx
index b16da823e4..9add012cba 100644
--- a/ui/home/Stats.pw.tsx
+++ b/ui/home/Stats.pw.tsx
@@ -1,91 +1,48 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import type { Locator } from '@playwright/test';
 import React from 'react';
 
 import * as statsMock from 'mocks/stats/index';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { test, expect } from 'playwright/lib';
 
 import Stats from './Stats';
 
-const API_URL = buildApiUrl('stats');
-
 test.describe('all items', () => {
   let component: Locator;
 
-  test.beforeEach(async({ page, mount }) => {
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(statsMock.withBtcLocked),
-    }));
-
-    component = await mount(
-      <TestApp>
-        <Stats/>
-      </TestApp>,
-    );
+  test.beforeEach(async({ render, mockApiResponse, mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_HOMEPAGE_STATS', '["total_blocks","average_block_time","total_txs","wallet_addresses","gas_tracker","btc_locked"]' ],
+    ]);
+    await mockApiResponse('stats', statsMock.withBtcLocked);
+    component = await render(<Stats/>);
   });
 
   test('+@mobile +@dark-mode', async() => {
     await expect(component).toHaveScreenshot();
   });
-
-  test.describe('screen xl', () => {
-    test.use({ viewport: configs.viewport.xl });
-
-    test('', async() => {
-      await expect(component).toHaveScreenshot();
-    });
-  });
 });
 
-test.describe('4 items', () => {
-  const extendedTest = test.extend({
-    context: contextWithEnvs([
-      { name: 'NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME', value: 'false' },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ]) as any,
-  });
-
-  extendedTest('default view +@mobile -@default', async({ mount, page }) => {
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(statsMock.base),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <Stats/>
-      </TestApp>,
-    );
+test('no gas info', async({ render, mockApiResponse }) => {
+  await mockApiResponse('stats', statsMock.withoutGasInfo);
+  const component = await render(<Stats/>);
 
-    await expect(component).toHaveScreenshot();
-  });
+  await expect(component).toHaveScreenshot();
 });
 
-test.describe('3 items', () => {
-  const extendedTest = test.extend({
-    context: contextWithEnvs([
-      { name: 'NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME', value: 'false' },
-      { name: 'NEXT_PUBLIC_GAS_TRACKER_ENABLED', value: 'false' },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ]) as any,
-  });
-
-  extendedTest('default view +@mobile -@default', async({ mount, page }) => {
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(statsMock.base),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <Stats/>
-      </TestApp>,
-    );
+test('4 items default view +@mobile -@default', async({ render, mockApiResponse, mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_HOMEPAGE_STATS', '["total_txs","gas_tracker","wallet_addresses","total_blocks"]' ],
+  ]);
+  await mockApiResponse('stats', statsMock.base);
+  const component = await render(<Stats/>);
+  await expect(component).toHaveScreenshot();
+});
 
-    await expect(component).toHaveScreenshot();
-  });
+test('3 items default view +@mobile -@default', async({ render, mockApiResponse, mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_HOMEPAGE_STATS', '["total_txs","wallet_addresses","total_blocks"]' ],
+  ]);
+  await mockApiResponse('stats', statsMock.base);
+  const component = await render(<Stats/>);
+  await expect(component).toHaveScreenshot();
 });
diff --git a/ui/home/Stats.tsx b/ui/home/Stats.tsx
index eb2b49cdd7..ab00e80cf1 100644
--- a/ui/home/Stats.tsx
+++ b/ui/home/Stats.tsx
@@ -2,7 +2,7 @@ import { Grid } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
-import { route } from 'nextjs-routes';
+import type { HomeStatsWidgetId } from 'types/homepage';
 
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
@@ -11,14 +11,13 @@ import { HOMEPAGE_STATS } from 'stubs/stats';
 import GasInfoTooltip from 'ui/shared/gas/GasInfoTooltip';
 import GasPrice from 'ui/shared/gas/GasPrice';
 import IconSvg from 'ui/shared/IconSvg';
+import type { Props as StatsWidgetProps } from 'ui/shared/stats/StatsWidget';
+import StatsWidget from 'ui/shared/stats/StatsWidget';
 
-import StatsItem from './StatsItem';
-
-const hasGasTracker = config.features.gasTracker.isEnabled;
-const hasAvgBlockTime = config.UI.homepage.showAvgBlockTime;
 const rollupFeature = config.features.rollup;
 
 const Stats = () => {
+  const [ hasGasTracker, setHasGasTracker ] = React.useState(config.features.gasTracker.isEnabled);
   const { data, isPlaceholderData, isError, dataUpdatedAt } = useApiQuery('stats', {
     queryOptions: {
       refetchOnMount: false,
@@ -26,138 +25,183 @@ const Stats = () => {
     },
   });
 
+  React.useEffect(() => {
+    if (!isPlaceholderData && !data?.gas_prices?.average) {
+      setHasGasTracker(false);
+    }
+  // should run only after initial fetch
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ isPlaceholderData ]);
+
   const zkEvmLatestBatchQuery = useApiQuery('homepage_zkevm_latest_batch', {
     queryOptions: {
       placeholderData: 12345,
-      enabled: rollupFeature.isEnabled && rollupFeature.type === 'zkEvm',
+      enabled: rollupFeature.isEnabled && rollupFeature.type === 'zkEvm' && config.UI.homepage.stats.includes('latest_batch'),
     },
   });
 
   const zkSyncLatestBatchQuery = useApiQuery('homepage_zksync_latest_batch', {
     queryOptions: {
       placeholderData: 12345,
-      enabled: rollupFeature.isEnabled && rollupFeature.type === 'zkSync',
+      enabled: rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && config.UI.homepage.stats.includes('latest_batch'),
+    },
+  });
+
+  const arbitrumLatestBatchQuery = useApiQuery('homepage_arbitrum_latest_batch', {
+    queryOptions: {
+      placeholderData: 12345,
+      enabled: rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && config.UI.homepage.stats.includes('latest_batch'),
     },
   });
 
-  if (isError || zkEvmLatestBatchQuery.isError || zkSyncLatestBatchQuery.isError) {
+  const latestBatchQuery = (() => {
+    if (!rollupFeature.isEnabled || !config.UI.homepage.stats.includes('latest_batch')) {
+      return;
+    }
+
+    switch (rollupFeature.type) {
+      case 'zkEvm':
+        return zkEvmLatestBatchQuery;
+      case 'zkSync':
+        return zkSyncLatestBatchQuery;
+      case 'arbitrum':
+        return arbitrumLatestBatchQuery;
+    }
+  })();
+
+  if (isError || latestBatchQuery?.isError) {
     return null;
   }
 
-  const isLoading = isPlaceholderData ||
-    (rollupFeature.isEnabled && rollupFeature.type === 'zkEvm' && zkEvmLatestBatchQuery.isPlaceholderData) ||
-    (rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && zkSyncLatestBatchQuery.isPlaceholderData);
-
-  let content;
+  const isLoading = isPlaceholderData || latestBatchQuery?.isPlaceholderData;
 
-  const lastItemTouchStyle = { gridColumn: { base: 'span 2', lg: 'unset' } };
+  interface Item extends StatsWidgetProps {
+    id: HomeStatsWidgetId;
+  }
 
-  let itemsCount = 5;
-  !hasGasTracker && itemsCount--;
-  !hasAvgBlockTime && itemsCount--;
+  const items: Array<Item> = (() => {
+    if (!data) {
+      return [];
+    }
 
-  if (data) {
-    !data.gas_prices && itemsCount--;
-    data.rootstock_locked_btc && itemsCount++;
-    const isOdd = Boolean(itemsCount % 2);
-    const gasInfoTooltip = hasGasTracker && data.gas_prices ? (
+    const gasInfoTooltip = hasGasTracker && data.gas_prices && data.gas_prices.average ? (
       <GasInfoTooltip data={ data } dataUpdatedAt={ dataUpdatedAt }>
         <IconSvg
           isLoading={ isLoading }
           name="info"
           boxSize={ 5 }
-          display="block"
+          flexShrink={ 0 }
           cursor="pointer"
+          color="icon_info"
           _hover={{ color: 'link_hovered' }}
-          position="absolute"
-          top={{ base: 'calc(50% - 12px)', lg: '10px', xl: 'calc(50% - 12px)' }}
-          right="10px"
         />
       </GasInfoTooltip>
     ) : null;
 
-    content = (
-      <>
-        { rollupFeature.isEnabled && rollupFeature.type === 'zkEvm' && (
-          <StatsItem
-            icon="txn_batches"
-            title="Latest batch"
-            value={ (zkEvmLatestBatchQuery.data || 0).toLocaleString() }
-            url={ route({ pathname: '/batches' }) }
-            isLoading={ isLoading }
-          />
-        ) }
-        { rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && (
-          <StatsItem
-            icon="txn_batches"
-            title="Latest batch"
-            value={ (zkSyncLatestBatchQuery.data || 0).toLocaleString() }
-            url={ route({ pathname: '/batches' }) }
-            isLoading={ isLoading }
-          />
-        ) }
-        { !(rollupFeature.isEnabled && (rollupFeature.type === 'zkEvm' || rollupFeature.type === 'zkSync')) && (
-          <StatsItem
-            icon="block"
-            title="Total blocks"
-            value={ Number(data.total_blocks).toLocaleString() }
-            url={ route({ pathname: '/blocks' }) }
-            isLoading={ isLoading }
-          />
-        ) }
-        { hasAvgBlockTime && (
-          <StatsItem
-            icon="clock-light"
-            title="Average block time"
-            value={ `${ (data.average_block_time / 1000).toFixed(1) }s` }
-            isLoading={ isLoading }
-          />
-        ) }
-        <StatsItem
-          icon="transactions"
-          title="Total transactions"
-          value={ Number(data.total_transactions).toLocaleString() }
-          url={ route({ pathname: '/txs' }) }
-          isLoading={ isLoading }
-        />
-        <StatsItem
-          icon="wallet"
-          title="Wallet addresses"
-          value={ Number(data.total_addresses).toLocaleString() }
-          _last={ isOdd ? lastItemTouchStyle : undefined }
-          isLoading={ isLoading }
-        />
-        { hasGasTracker && data.gas_prices && (
-          <StatsItem
-            icon="gas"
-            title="Gas tracker"
-            value={ <GasPrice data={ data.gas_prices.average }/> }
-            _last={ isOdd ? lastItemTouchStyle : undefined }
-            tooltip={ gasInfoTooltip }
-            isLoading={ isLoading }
-          />
-        ) }
-        { data.rootstock_locked_btc && (
-          <StatsItem
-            icon="coins/bitcoin"
-            title="BTC Locked in 2WP"
-            value={ `${ BigNumber(data.rootstock_locked_btc).div(WEI).dp(0).toFormat() } RBTC` }
-            _last={ isOdd ? lastItemTouchStyle : undefined }
-            isLoading={ isLoading }
-          />
-        ) }
-      </>
-    );
+    return [
+      latestBatchQuery?.data !== undefined && {
+        id: 'latest_batch' as const,
+        icon: 'txn_batches_slim' as const,
+        label: 'Latest batch',
+        value: latestBatchQuery.data.toLocaleString(),
+        href: { pathname: '/batches' as const },
+        isLoading,
+      },
+      {
+        id: 'total_blocks' as const,
+        icon: 'block_slim' as const,
+        label: 'Total blocks',
+        value: Number(data.total_blocks).toLocaleString(),
+        href: { pathname: '/blocks' as const },
+        isLoading,
+      },
+      {
+        id: 'average_block_time' as const,
+        icon: 'clock-light' as const,
+        label: 'Average block time',
+        value: `${ (data.average_block_time / 1000).toFixed(1) }s`,
+        isLoading,
+      },
+      {
+        id: 'total_txs' as const,
+        icon: 'transactions_slim' as const,
+        label: 'Total transactions',
+        value: Number(data.total_transactions).toLocaleString(),
+        href: { pathname: '/txs' as const },
+        isLoading,
+      },
+      data.last_output_root_size && {
+        id: 'latest_l1_state_batch' as const,
+        icon: 'txn_batches_slim' as const,
+        label: 'Latest L1 state batch',
+        value: data.last_output_root_size,
+        href: { pathname: '/batches' as const },
+        isLoading,
+      },
+      {
+        id: 'wallet_addresses' as const,
+        icon: 'wallet' as const,
+        label: 'Wallet addresses',
+        value: Number(data.total_addresses).toLocaleString(),
+        isLoading,
+      },
+      hasGasTracker && data.gas_prices && {
+        id: 'gas_tracker' as const,
+        icon: 'gas' as const,
+        label: 'Gas tracker',
+        value: data.gas_prices.average ? <GasPrice data={ data.gas_prices.average }/> : 'N/A',
+        hint: gasInfoTooltip,
+        isLoading,
+      },
+      data.rootstock_locked_btc && {
+        id: 'btc_locked' as const,
+        icon: 'coins/bitcoin' as const,
+        label: 'BTC Locked in 2WP',
+        value: `${ BigNumber(data.rootstock_locked_btc).div(WEI).dp(0).toFormat() } RBTC`,
+        isLoading,
+      },
+      data.celo && {
+        id: 'current_epoch' as const,
+        icon: 'hourglass' as const,
+        label: 'Current epoch',
+        value: `#${ data.celo.epoch_number }`,
+        isLoading,
+      },
+    ]
+      .filter(Boolean)
+      .filter(({ id }) => config.UI.homepage.stats.includes(id))
+      .sort((a, b) => {
+        const indexA = config.UI.homepage.stats.indexOf(a.id);
+        const indexB = config.UI.homepage.stats.indexOf(b.id);
+        if (indexA > indexB) {
+          return 1;
+        }
+        if (indexA < indexB) {
+          return -1;
+        }
+        return 0;
+      });
+  })();
+
+  if (items.length === 0) {
+    return null;
   }
 
   return (
     <Grid
-      gridTemplateColumns={{ lg: `repeat(${ itemsCount }, 1fr)`, base: '1fr 1fr' }}
-      gridTemplateRows={{ lg: 'none', base: undefined }}
-      gridGap="10px"
-      marginTop="24px"
+      gridTemplateColumns="1fr 1fr"
+      gridGap={{ base: 1, lg: 2 }}
+      flexBasis="50%"
+      flexGrow={ 1 }
     >
-      { content }
+      { items.map((item, index) => (
+        <StatsWidget
+          key={ item.id }
+          { ...item }
+          isLoading={ isLoading }
+          _last={ items.length % 2 === 1 && index === items.length - 1 ? { gridColumn: 'span 2' } : undefined }/>
+      ),
+      ) }
     </Grid>
 
   );
diff --git a/ui/home/StatsItem.tsx b/ui/home/StatsItem.tsx
deleted file mode 100644
index f16f49bfd3..0000000000
--- a/ui/home/StatsItem.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import type { SystemStyleObject } from '@chakra-ui/react';
-import { Skeleton, Flex, useColorModeValue, chakra } from '@chakra-ui/react';
-import React from 'react';
-
-import breakpoints from 'theme/foundations/breakpoints';
-import type { IconName } from 'ui/shared/IconSvg';
-import IconSvg from 'ui/shared/IconSvg';
-
-type Props = {
-  icon: IconName;
-  title: string;
-  value: string | React.ReactNode;
-  className?: string;
-  tooltip?: React.ReactNode;
-  url?: string;
-  isLoading?: boolean;
-}
-
-const LARGEST_BREAKPOINT = '1240px';
-
-const StatsItem = ({ icon, title, value, className, tooltip, url, isLoading }: Props) => {
-  const sxContainer: SystemStyleObject = {
-    [`@media screen and (min-width: ${ breakpoints.lg }) and (max-width: ${ LARGEST_BREAKPOINT })`]: { flexDirection: 'column' },
-  };
-
-  const sxText: SystemStyleObject = {
-    [`@media screen and (min-width: ${ breakpoints.lg }) and (max-width: ${ LARGEST_BREAKPOINT })`]: { alignItems: 'center' },
-  };
-
-  const bgColor = useColorModeValue('blue.50', 'blue.800');
-  const loadingBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
-
-  return (
-    <Flex
-      backgroundColor={ isLoading ? loadingBgColor : bgColor }
-      padding={ 3 }
-      borderRadius="md"
-      flexDirection="row"
-      sx={ sxContainer }
-      alignItems="center"
-      columnGap={ 3 }
-      rowGap={ 2 }
-      className={ className }
-      color={ useColorModeValue('black', 'white') }
-      position="relative"
-      { ...(url && !isLoading ? {
-        as: 'a',
-        href: url,
-      } : {}) }
-    >
-      <IconSvg name={ icon } boxSize={ 7 } isLoading={ isLoading } borderRadius="base"/>
-      <Flex
-        flexDirection="column"
-        alignItems="start"
-        sx={ sxText }
-      >
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" fontSize="xs" lineHeight="16px" borderRadius="base">
-          <span>{ title }</span>
-        </Skeleton>
-        <Skeleton isLoaded={ !isLoading } fontWeight={ 500 } fontSize="md" color={ useColorModeValue('black', 'white') } borderRadius="base">
-          { typeof value === 'string' ? <span>{ value }</span> : value }
-        </Skeleton>
-      </Flex>
-      { tooltip }
-    </Flex>
-  );
-};
-
-export default chakra(StatsItem);
diff --git a/ui/home/Transactions.tsx b/ui/home/Transactions.tsx
index 810f8823fe..843c81a575 100644
--- a/ui/home/Transactions.tsx
+++ b/ui/home/Transactions.tsx
@@ -3,31 +3,41 @@ import React from 'react';
 
 import config from 'configs/app';
 import useHasAccount from 'lib/hooks/useHasAccount';
-import LatestDeposits from 'ui/home/LatestDeposits';
+import LatestOptimisticDeposits from 'ui/home/latestDeposits/LatestOptimisticDeposits';
 import LatestTxs from 'ui/home/LatestTxs';
 import LatestWatchlistTxs from 'ui/home/LatestWatchlistTxs';
 import TabsWithScroll from 'ui/shared/Tabs/TabsWithScroll';
+
+import LatestArbitrumDeposits from './latestDeposits/LatestArbitrumDeposits';
+
 const rollupFeature = config.features.rollup;
 
+const TAB_LIST_PROPS = {
+  mb: { base: 3, lg: 3 },
+};
+
 const TransactionsHome = () => {
   const hasAccount = useHasAccount();
-  if ((rollupFeature.isEnabled && rollupFeature.type === 'optimistic') || hasAccount) {
+  if ((rollupFeature.isEnabled && (rollupFeature.type === 'optimistic' || rollupFeature.type === 'arbitrum')) || hasAccount) {
     const tabs = [
       { id: 'txn', title: 'Latest txn', component: <LatestTxs/> },
-      rollupFeature.isEnabled && rollupFeature.type === 'optimistic' && { id: 'deposits', title: 'Deposits (L1→L2 txn)', component: <LatestDeposits/> },
+      rollupFeature.isEnabled && rollupFeature.type === 'optimistic' &&
+        { id: 'deposits', title: 'Deposits (L1→L2 txn)', component: <LatestOptimisticDeposits/> },
+      rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' &&
+        { id: 'deposits', title: 'Deposits (L1→L2 txn)', component: <LatestArbitrumDeposits/> },
       hasAccount && { id: 'watchlist', title: 'Watch list', component: <LatestWatchlistTxs/> },
     ].filter(Boolean);
     return (
       <>
-        <Heading as="h4" size="sm" mb={ 4 }>Transactions</Heading>
-        <TabsWithScroll tabs={ tabs } lazyBehavior="keepMounted"/>
+        <Heading as="h4" size="sm" mb={ 3 }>Transactions</Heading>
+        <TabsWithScroll tabs={ tabs } lazyBehavior="keepMounted" tabListProps={ TAB_LIST_PROPS }/>
       </>
     );
   }
 
   return (
     <>
-      <Heading as="h4" size="sm" mb={ 4 }>Latest transactions</Heading>
+      <Heading as="h4" size="sm" mb={ 3 }>Latest transactions</Heading>
       <LatestTxs/>
     </>
   );
diff --git a/ui/home/__screenshots__/HeroBanner.pw.tsx_dark-color-mode_customization-dark-mode-1.png b/ui/home/__screenshots__/HeroBanner.pw.tsx_dark-color-mode_customization-dark-mode-1.png
new file mode 100644
index 0000000000..1c941071f9
Binary files /dev/null and b/ui/home/__screenshots__/HeroBanner.pw.tsx_dark-color-mode_customization-dark-mode-1.png differ
diff --git a/ui/home/__screenshots__/HeroBanner.pw.tsx_default_customization-dark-mode-1.png b/ui/home/__screenshots__/HeroBanner.pw.tsx_default_customization-dark-mode-1.png
new file mode 100644
index 0000000000..7f5eda5ad9
Binary files /dev/null and b/ui/home/__screenshots__/HeroBanner.pw.tsx_default_customization-dark-mode-1.png differ
diff --git a/ui/home/__screenshots__/LatestBlocks.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png b/ui/home/__screenshots__/LatestBlocks.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png
index 07ed6de08b..8e8e3083f3 100644
Binary files a/ui/home/__screenshots__/LatestBlocks.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png and b/ui/home/__screenshots__/LatestBlocks.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_L2-view-1.png b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_L2-view-1.png
index 97b3579fe1..3c1724b370 100644
Binary files a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_L2-view-1.png and b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_L2-view-1.png differ
diff --git a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_default-view-mobile-dark-mode-1.png b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_default-view-mobile-dark-mode-1.png
index 09b203b93e..8c7be5e6e7 100644
Binary files a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_default-view-mobile-dark-mode-1.png and b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_no-reward-view-1.png b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_no-reward-view-1.png
index 7c716088b6..f415fdc2e1 100644
Binary files a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_no-reward-view-1.png and b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_no-reward-view-1.png differ
diff --git a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_socket-new-item-1.png b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_socket-new-item-1.png
index 5ba27642b3..bcc831a210 100644
Binary files a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_socket-new-item-1.png and b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_socket-new-item-1.png differ
diff --git a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_with-long-block-height-1.png b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_with-long-block-height-1.png
index 6b391bea59..ec1dadea0f 100644
Binary files a/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_with-long-block-height-1.png and b/ui/home/__screenshots__/LatestBlocks.pw.tsx_default_with-long-block-height-1.png differ
diff --git a/ui/home/__screenshots__/LatestBlocks.pw.tsx_mobile_default-view-mobile-dark-mode-1.png b/ui/home/__screenshots__/LatestBlocks.pw.tsx_mobile_default-view-mobile-dark-mode-1.png
index 06999ed281..b8079a4d48 100644
Binary files a/ui/home/__screenshots__/LatestBlocks.pw.tsx_mobile_default-view-mobile-dark-mode-1.png and b/ui/home/__screenshots__/LatestBlocks.pw.tsx_mobile_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/home/__screenshots__/LatestDeposits.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png b/ui/home/__screenshots__/LatestDeposits.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png
deleted file mode 100644
index bf49709f59..0000000000
Binary files a/ui/home/__screenshots__/LatestDeposits.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/home/__screenshots__/LatestDeposits.pw.tsx_default_default-view-mobile-dark-mode-1.png b/ui/home/__screenshots__/LatestDeposits.pw.tsx_default_default-view-mobile-dark-mode-1.png
deleted file mode 100644
index 91d4b60f31..0000000000
Binary files a/ui/home/__screenshots__/LatestDeposits.pw.tsx_default_default-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/home/__screenshots__/LatestDeposits.pw.tsx_mobile_default-view-mobile-dark-mode-1.png b/ui/home/__screenshots__/LatestDeposits.pw.tsx_mobile_default-view-mobile-dark-mode-1.png
deleted file mode 100644
index 5e634c846f..0000000000
Binary files a/ui/home/__screenshots__/LatestDeposits.pw.tsx_mobile_default-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/home/__screenshots__/LatestZkEvmL2Batches.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png b/ui/home/__screenshots__/LatestZkEvmL2Batches.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png
deleted file mode 100644
index 8fcbc37c81..0000000000
Binary files a/ui/home/__screenshots__/LatestZkEvmL2Batches.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/home/__screenshots__/LatestZkEvmL2Batches.pw.tsx_default_default-view-mobile-dark-mode-1.png b/ui/home/__screenshots__/LatestZkEvmL2Batches.pw.tsx_default_default-view-mobile-dark-mode-1.png
deleted file mode 100644
index 402759dca9..0000000000
Binary files a/ui/home/__screenshots__/LatestZkEvmL2Batches.pw.tsx_default_default-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/home/__screenshots__/LatestZkEvmL2Batches.pw.tsx_mobile_default-view-mobile-dark-mode-1.png b/ui/home/__screenshots__/LatestZkEvmL2Batches.pw.tsx_mobile_default-view-mobile-dark-mode-1.png
deleted file mode 100644
index e342b5ce69..0000000000
Binary files a/ui/home/__screenshots__/LatestZkEvmL2Batches.pw.tsx_mobile_default-view-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/home/__screenshots__/Stats.pw.tsx_default_all-items-screen-xl-1.png b/ui/home/__screenshots__/Stats.pw.tsx_default_all-items-screen-xl-1.png
deleted file mode 100644
index 39145e3259..0000000000
Binary files a/ui/home/__screenshots__/Stats.pw.tsx_default_all-items-screen-xl-1.png and /dev/null differ
diff --git a/ui/home/__screenshots__/Stats.pw.tsx_default_no-gas-info-1.png b/ui/home/__screenshots__/Stats.pw.tsx_default_no-gas-info-1.png
new file mode 100644
index 0000000000..242555e7d9
Binary files /dev/null and b/ui/home/__screenshots__/Stats.pw.tsx_default_no-gas-info-1.png differ
diff --git a/ui/home/__screenshots__/Stats.pw.tsx_mobile_3-items-default-view-mobile---default-1.png b/ui/home/__screenshots__/Stats.pw.tsx_mobile_3-items-default-view-mobile---default-1.png
index f78405a5b7..e9e8730a82 100644
Binary files a/ui/home/__screenshots__/Stats.pw.tsx_mobile_3-items-default-view-mobile---default-1.png and b/ui/home/__screenshots__/Stats.pw.tsx_mobile_3-items-default-view-mobile---default-1.png differ
diff --git a/ui/home/indicators/ChainIndicatorChart.tsx b/ui/home/indicators/ChainIndicatorChart.tsx
index 6b0bc24fdb..daf0251317 100644
--- a/ui/home/indicators/ChainIndicatorChart.tsx
+++ b/ui/home/indicators/ChainIndicatorChart.tsx
@@ -14,7 +14,7 @@ interface Props {
   caption?: string;
 }
 
-const CHART_MARGIN = { bottom: 5, left: 10, right: 10, top: 0 };
+const CHART_MARGIN = { bottom: 5, left: 10, right: 10, top: 5 };
 
 const ChainIndicatorChart = ({ data }: Props) => {
   const overlayRef = React.useRef<SVGRectElement>(null);
diff --git a/ui/home/indicators/ChainIndicatorChartContainer.tsx b/ui/home/indicators/ChainIndicatorChartContainer.tsx
index 02912afe98..a8bc2d2192 100644
--- a/ui/home/indicators/ChainIndicatorChartContainer.tsx
+++ b/ui/home/indicators/ChainIndicatorChartContainer.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@chakra-ui/react';
+import { chakra, Flex, Box } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
@@ -15,21 +15,25 @@ const ChainIndicatorChartContainer = ({ data, isError, isPending }: Props) => {
 
   const content = (() => {
     if (isPending) {
-      return <ContentLoader mt="auto"/>;
+      return <ContentLoader mt="auto" fontSize="xs"/>;
     }
 
     if (isError) {
-      return <DataFetchAlert/>;
+      return <DataFetchAlert fontSize="xs" p={ 3 }/>;
     }
 
     if (data[0].items.length === 0) {
-      return <span>no data</span>;
+      return <chakra.span fontSize="xs">no data</chakra.span>;
     }
 
-    return <ChainIndicatorChart data={ data }/>;
+    return (
+      <Box mx="-10px" my="-5px" h="calc(100% + 10px)" w="calc(100% + 20px)">
+        <ChainIndicatorChart data={ data }/>
+      </Box>
+    );
   })();
 
-  return <Flex h={{ base: '150px', lg: 'auto' }} minH="150px" alignItems="flex-start" flexGrow={ 1 }>{ content }</Flex>;
+  return <Flex h={{ base: '80px', lg: '110px' }} alignItems="flex-start" flexGrow={ 1 }>{ content }</Flex>;
 };
 
 export default React.memo(ChainIndicatorChartContainer);
diff --git a/ui/home/indicators/ChainIndicatorItem.tsx b/ui/home/indicators/ChainIndicatorItem.tsx
index ae54e4fddc..5cfc5b1ebc 100644
--- a/ui/home/indicators/ChainIndicatorItem.tsx
+++ b/ui/home/indicators/ChainIndicatorItem.tsx
@@ -6,8 +6,6 @@ import type { HomeStats } from 'types/api/stats';
 import type { ChainIndicatorId } from 'types/homepage';
 
 import type { ResourceError } from 'lib/api/resources';
-import useIsMobile from 'lib/hooks/useIsMobile';
-import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   id: ChainIndicatorId;
@@ -21,42 +19,27 @@ interface Props {
 }
 
 const ChainIndicatorItem = ({ id, title, value, valueDiff, icon, isSelected, onClick, stats }: Props) => {
-  const isMobile = useIsMobile();
-
-  const activeBgColorDesktop = useColorModeValue('white', 'gray.900');
-  const activeBgColorMobile = useColorModeValue('white', 'black');
-  const activeBgColor = isMobile ? activeBgColorMobile : activeBgColorDesktop;
+  const activeColor = useColorModeValue('gray.500', 'gray.400');
+  const activeBgColor = useColorModeValue('white', 'black');
 
   const handleClick = React.useCallback(() => {
     onClick(id);
   }, [ id, onClick ]);
 
   const valueContent = (() => {
-    if (isMobile) {
-      return null;
-    }
-
-    if (stats.isPlaceholderData) {
-      return (
-        <Skeleton
-          h={ 3 }
-          w="70px"
-          my={ 1.5 }
-          // ssr: isMobile = undefined, isLoading = true
-          display={{ base: 'none', lg: 'block' }}
-        />
-      );
-    }
-
     if (!stats.data) {
       return <Text variant="secondary" fontWeight={ 400 }>no data</Text>;
     }
 
-    return <Text variant="secondary" fontWeight={ 600 }>{ value(stats.data) }</Text>;
+    return (
+      <Skeleton isLoaded={ !stats.isPlaceholderData } variant="secondary" fontWeight={ 600 } minW="30px">
+        { value(stats.data) }
+      </Skeleton>
+    );
   })();
 
   const valueDiffContent = (() => {
-    if (isMobile || !valueDiff) {
+    if (!valueDiff) {
       return null;
     }
     const diff = valueDiff(stats.data);
@@ -67,9 +50,9 @@ const ChainIndicatorItem = ({ id, title, value, valueDiff, icon, isSelected, onC
     const diffColor = diff >= 0 ? 'green.500' : 'red.500';
 
     return (
-      <Skeleton isLoaded={ !stats.isPlaceholderData } ml={ 3 } display="flex" alignItems="center" color={ diffColor }>
-        <IconSvg name="up" boxSize={ 5 } mr={ 1 } transform={ diff < 0 ? 'rotate(180deg)' : 'rotate(0)' }/>
-        <Text color={ diffColor } fontWeight={ 600 }>{ diff }%</Text>
+      <Skeleton isLoaded={ !stats.isPlaceholderData } ml={ 1 } display="flex" alignItems="center" color={ diffColor }>
+        <span>{ diff >= 0 ? '+' : '-' }</span>
+        <Text color={ diffColor } fontWeight={ 600 }>{ Math.abs(diff) }%</Text>
       </Skeleton>
     );
   })();
@@ -77,24 +60,28 @@ const ChainIndicatorItem = ({ id, title, value, valueDiff, icon, isSelected, onC
   return (
     <Flex
       alignItems="center"
-      columnGap={ 3 }
-      p={ 4 }
+      columnGap={ 2 }
+      flexGrow={{ base: 0, lg: 1 }}
+      px={{ base: '6px', lg: 2 }}
+      py="6px"
       as="li"
-      borderRadius="md"
+      borderRadius="base"
       cursor="pointer"
+      color={ isSelected ? activeColor : 'link' }
+      bgColor={ isSelected ? activeBgColor : undefined }
       onClick={ handleClick }
-      bgColor={ isSelected ? activeBgColor : 'inherit' }
-      boxShadow={ isSelected ? 'lg' : 'none' }
-      zIndex={ isSelected ? 1 : 'initial' }
+      fontSize="xs"
+      fontWeight={ 500 }
       _hover={{
-        activeBgColor,
+        bgColor: activeBgColor,
+        color: isSelected ? activeColor : 'link_hovered',
         zIndex: 1,
       }}
     >
       { icon }
-      <Box>
-        <Text fontFamily="heading" fontWeight={ 500 }>{ title }</Text>
-        <Flex alignItems="center">
+      <Box display={{ base: 'none', lg: 'block' }}>
+        <span>{ title }</span>
+        <Flex alignItems="center" color="text">
           { valueContent }
           { valueDiffContent }
         </Flex>
diff --git a/ui/home/indicators/ChainIndicators.pw.tsx b/ui/home/indicators/ChainIndicators.pw.tsx
index 23f5438277..a1454282b6 100644
--- a/ui/home/indicators/ChainIndicators.pw.tsx
+++ b/ui/home/indicators/ChainIndicators.pw.tsx
@@ -1,44 +1,32 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import type { Locator } from '@playwright/test';
 import React from 'react';
 
 import * as dailyTxsMock from 'mocks/stats/daily_txs';
 import * as statsMock from 'mocks/stats/index';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import ChainIndicators from './ChainIndicators';
 
-const STATS_API_URL = buildApiUrl('stats');
-const TX_CHART_API_URL = buildApiUrl('stats_charts_txs');
-
-const test = base.extend({
-  context: contextWithEnvs([
-    { name: 'NEXT_PUBLIC_HOMEPAGE_CHARTS', value: '["daily_txs","coin_price","market_cap","tvl"]' },
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
+test.beforeEach(async({ mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_HOMEPAGE_CHARTS', '["daily_txs","coin_price","secondary_coin_price","market_cap","tvl"]' ],
+    [ 'NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL', 'DUCK' ],
+  ]);
 });
 
 test.describe('daily txs chart', () => {
   let component: Locator;
 
-  test.beforeEach(async({ page, mount }) => {
-    await page.route(STATS_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(statsMock.base),
-    }));
-    await page.route(TX_CHART_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(dailyTxsMock.base),
-    }));
-
-    component = await mount(
-      <TestApp>
-        <ChainIndicators/>
-      </TestApp>,
-    );
-    await page.hover('.ChartOverlay', { position: { x: 100, y: 100 } });
+  test.beforeEach(async({ page, mockApiResponse, mockAssetResponse, render }) => {
+    await mockApiResponse('stats', statsMock.withSecondaryCoin);
+    await mockApiResponse('stats_charts_txs', dailyTxsMock.base);
+    await mockAssetResponse(statsMock.withSecondaryCoin.coin_image as string, './playwright/mocks/image_svg.svg');
+    await mockAssetResponse(statsMock.withSecondaryCoin.secondary_coin_image as string, './playwright/mocks/image_s.jpg');
+    component = await render(<ChainIndicators/>);
+    await page.waitForFunction(() => {
+      return document.querySelector('path[data-name="gradient-chart-area"]')?.getAttribute('opacity') === '1';
+    });
+    await page.hover('.ChartOverlay', { position: { x: 50, y: 50 } });
   });
 
   test('+@mobile', async() => {
@@ -54,43 +42,23 @@ test.describe('daily txs chart', () => {
   });
 });
 
-test('partial data', async({ page, mount }) => {
-  await page.route(STATS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
-  await page.route(TX_CHART_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(dailyTxsMock.partialData),
-  }));
+test('partial data', async({ page, mockApiResponse, mockAssetResponse, render }) => {
+  await mockApiResponse('stats', statsMock.base);
+  await mockApiResponse('stats_charts_txs', dailyTxsMock.partialData);
+  await mockAssetResponse(statsMock.base.coin_image as string, './playwright/mocks/image_s.jpg');
 
-  const component = await mount(
-    <TestApp>
-      <ChainIndicators/>
-    </TestApp>,
-  );
+  const component = await render(<ChainIndicators/>);
   await page.waitForFunction(() => {
     return document.querySelector('path[data-name="gradient-chart-area"]')?.getAttribute('opacity') === '1';
   });
-
   await expect(component).toHaveScreenshot();
 });
 
-test('no data', async({ page, mount }) => {
-  await page.route(STATS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.noChartData),
-  }));
-  await page.route(TX_CHART_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(dailyTxsMock.noData),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <ChainIndicators/>
-    </TestApp>,
-  );
+test('no data', async({ mockApiResponse, mockAssetResponse, render }) => {
+  await mockApiResponse('stats', statsMock.noChartData);
+  await mockApiResponse('stats_charts_txs', dailyTxsMock.noData);
+  await mockAssetResponse(statsMock.noChartData.coin_image as string, './playwright/mocks/image_s.jpg');
 
+  const component = await render(<ChainIndicators/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/home/indicators/ChainIndicators.tsx b/ui/home/indicators/ChainIndicators.tsx
index 0195d5dc1a..6180f5194d 100644
--- a/ui/home/indicators/ChainIndicators.tsx
+++ b/ui/home/indicators/ChainIndicators.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Skeleton, Text, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Skeleton, Text, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
@@ -38,10 +38,7 @@ const ChainIndicators = () => {
     },
   });
 
-  const bgColorDesktop = useColorModeValue('white', 'gray.900');
-  const bgColorMobile = useColorModeValue('white', 'black');
-  const listBgColorDesktop = useColorModeValue('gray.50', 'black');
-  const listBgColorMobile = useColorModeValue('gray.50', 'gray.900');
+  const bgColor = useColorModeValue('gray.50', 'whiteAlpha.100');
 
   if (indicators.length === 0) {
     return null;
@@ -49,15 +46,15 @@ const ChainIndicators = () => {
 
   const valueTitle = (() => {
     if (statsQueryResult.isPlaceholderData) {
-      return <Skeleton h="48px" w="215px" mt={ 3 } mb={ 4 }/>;
+      return <Skeleton h="36px" w="215px"/>;
     }
 
     if (!statsQueryResult.data) {
-      return <Text mt={ 3 } mb={ 4 }>There is no data</Text>;
+      return <Text fontSize="xs">There is no data</Text>;
     }
 
     return (
-      <Text fontWeight={ 600 } fontFamily="heading" fontSize="48px" lineHeight="48px" mt={ 3 }>
+      <Text fontWeight={ 700 } fontSize="30px" lineHeight="36px">
         { indicator?.value(statsQueryResult.data) }
       </Text>
     );
@@ -76,8 +73,8 @@ const ChainIndicators = () => {
     const diffColor = diff >= 0 ? 'green.500' : 'red.500';
 
     return (
-      <Skeleton isLoaded={ !statsQueryResult.isPlaceholderData } display="flex" alignItems="center" color={ diffColor } mt={ 2 }>
-        <IconSvg name="up" boxSize={ 5 } mr={ 1 } transform={ diff < 0 ? 'rotate(180deg)' : 'rotate(0)' }/>
+      <Skeleton isLoaded={ !statsQueryResult.isPlaceholderData } display="flex" alignItems="center" color={ diffColor } ml={ 2 }>
+        <IconSvg name="arrows/up-head" boxSize={ 5 } mr={ 1 } transform={ diff < 0 ? 'rotate(180deg)' : 'rotate(0)' }/>
         <Text color={ diffColor } fontWeight={ 600 }>{ diff }%</Text>
       </Skeleton>
     );
@@ -85,26 +82,25 @@ const ChainIndicators = () => {
 
   return (
     <Flex
-      p={{ base: 0, lg: 8 }}
-      borderRadius={{ base: 'none', lg: 'lg' }}
-      boxShadow={{ base: 'none', lg: 'xl' }}
-      bgColor={{ base: bgColorMobile, lg: bgColorDesktop }}
-      columnGap={ 6 }
+      px={{ base: 3, lg: 4 }}
+      py={ 3 }
+      borderRadius="base"
+      bgColor={ bgColor }
+      columnGap={{ base: 3, lg: 4 }}
       rowGap={ 0 }
-      flexDir={{ base: 'column', lg: 'row' }}
-      w="100%"
+      flexBasis="50%"
+      flexGrow={ 1 }
       alignItems="stretch"
-      mt={ 8 }
     >
-      <Flex flexGrow={ 1 } flexDir="column" order={{ base: 2, lg: 1 }} p={{ base: 6, lg: 0 }}>
+      <Flex flexGrow={ 1 } flexDir="column">
         <Flex alignItems="center">
-          <Text fontWeight={ 500 } fontFamily="heading" fontSize="lg">{ indicator?.title }</Text>
+          <Text fontWeight={ 500 }>{ indicator?.title }</Text>
           { indicator?.hint && <Hint label={ indicator.hint } ml={ 1 }/> }
         </Flex>
-        <Box mb={ 4 }>
+        <Flex mb={{ base: 0, lg: 2 }} mt={ 1 } alignItems="end">
           { valueTitle }
           { valueDiff }
-        </Box>
+        </Flex>
         <ChainIndicatorChartContainer { ...queryResult }/>
       </Flex>
       { indicators.length > 1 && (
@@ -112,11 +108,9 @@ const ChainIndicators = () => {
           flexShrink={ 0 }
           flexDir="column"
           as="ul"
-          p={ 3 }
           borderRadius="lg"
-          bgColor={{ base: listBgColorMobile, lg: listBgColorDesktop }}
-          rowGap={ 3 }
-          order={{ base: 1, lg: 2 }}
+          rowGap="6px"
+          m={{ base: 'auto 0', lg: 0 }}
         >
           { indicators.map((indicator) => (
             <ChainIndicatorItem
diff --git a/ui/home/indicators/types.ts b/ui/home/indicators/types.ts
index 7ae2453ada..05b7680be5 100644
--- a/ui/home/indicators/types.ts
+++ b/ui/home/indicators/types.ts
@@ -4,7 +4,7 @@ import type { TimeChartData } from 'ui/shared/chart/types';
 
 import type { ResourcePayload } from 'lib/api/resources';
 
-export type ChartsResources = 'stats_charts_txs' | 'stats_charts_market';
+export type ChartsResources = 'stats_charts_txs' | 'stats_charts_market' | 'stats_charts_secondary_coin_price';
 
 export interface TChainIndicator<R extends ChartsResources> {
   id: ChainIndicatorId;
diff --git a/ui/home/indicators/utils/indicators.tsx b/ui/home/indicators/utils/indicators.tsx
index 62783b7bee..bdef67210a 100644
--- a/ui/home/indicators/utils/indicators.tsx
+++ b/ui/home/indicators/utils/indicators.tsx
@@ -5,8 +5,8 @@ import type { TimeChartItem, TimeChartItemRaw } from 'ui/shared/chart/types';
 
 import config from 'configs/app';
 import { sortByDateDesc } from 'ui/shared/chart/utils/sorts';
-import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import IconSvg from 'ui/shared/IconSvg';
+import NativeTokenIcon from 'ui/shared/NativeTokenIcon';
 
 const nonNullTailReducer = (result: Array<TimeChartItemRaw>, item: TimeChartItemRaw) => {
   if (item.value === null && result.length === 0) {
@@ -40,23 +40,15 @@ const dailyTxsIndicator: TChainIndicator<'stats_charts_txs'> = {
   },
 };
 
-const nativeTokenData = {
-  name: config.chain.currency.name || '',
-  icon_url: '',
-  symbol: '',
-  address: '',
-  type: 'ERC-20' as const,
-};
-
 const coinPriceIndicator: TChainIndicator<'stats_charts_market'> = {
   id: 'coin_price',
-  title: `${ config.chain.governanceToken.symbol || config.chain.currency.symbol } price`,
+  title: `${ config.chain.currency.symbol } price`,
   value: (stats) => stats.coin_price === null ?
     '$N/A' :
     '$' + Number(stats.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
   valueDiff: (stats) => stats?.coin_price !== null ? stats?.coin_price_change_percentage : null,
-  icon: <TokenEntity.Icon token={ nativeTokenData } boxSize={ 6 } marginRight={ 0 }/>,
-  hint: `${ config.chain.governanceToken.symbol || config.chain.currency.symbol } token daily price in USD.`,
+  icon: <NativeTokenIcon boxSize={ 6 }/>,
+  hint: `${ config.chain.currency.symbol } token daily price in USD.`,
   api: {
     resourceName: 'stats_charts_market',
     dataFn: (response) => ([ {
@@ -65,7 +57,30 @@ const coinPriceIndicator: TChainIndicator<'stats_charts_market'> = {
         .sort(sortByDateDesc)
         .reduceRight(nonNullTailReducer, [] as Array<TimeChartItemRaw>)
         .map(mapNullToZero),
-      name: `${ config.chain.governanceToken.symbol || config.chain.currency.symbol } price`,
+      name: `${ config.chain.currency.symbol } price`,
+      valueFormatter: (x: number) => '$' + x.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
+    } ]),
+  },
+};
+
+const secondaryCoinPriceIndicator: TChainIndicator<'stats_charts_secondary_coin_price'> = {
+  id: 'secondary_coin_price',
+  title: `${ config.chain.secondaryCoin.symbol } price`,
+  value: (stats) => !stats.secondary_coin_price || stats.secondary_coin_price === null ?
+    '$N/A' :
+    '$' + Number(stats.secondary_coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
+  valueDiff: () => null,
+  icon: <NativeTokenIcon boxSize={ 6 } type="secondary"/>,
+  hint: `${ config.chain.secondaryCoin.symbol } token daily price in USD.`,
+  api: {
+    resourceName: 'stats_charts_secondary_coin_price',
+    dataFn: (response) => ([ {
+      items: response.chart_data
+        .map((item) => ({ date: new Date(item.date), value: item.closing_price }))
+        .sort(sortByDateDesc)
+        .reduceRight(nonNullTailReducer, [] as Array<TimeChartItemRaw>)
+        .map(mapNullToZero),
+      name: `${ config.chain.secondaryCoin.symbol } price`,
       valueFormatter: (x: number) => '$' + x.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
     } ]),
   },
@@ -138,6 +153,7 @@ const tvlIndicator: TChainIndicator<'stats_charts_market'> = {
 const INDICATORS = [
   dailyTxsIndicator,
   coinPriceIndicator,
+  secondaryCoinPriceIndicator,
   marketPriceIndicator,
   tvlIndicator,
 ];
diff --git a/ui/home/latestBatches/LatestArbitrumL2Batches.pw.tsx b/ui/home/latestBatches/LatestArbitrumL2Batches.pw.tsx
new file mode 100644
index 0000000000..373541d1b7
--- /dev/null
+++ b/ui/home/latestBatches/LatestArbitrumL2Batches.pw.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { finalized, unfinalized } from 'mocks/arbitrum/txnBatches';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import LatestArbitrumL2Batches from './LatestArbitrumL2Batches';
+
+test('default view +@mobile +@dark-mode', async({ render, mockEnvs, mockApiResponse }) => {
+  await mockEnvs(ENVS_MAP.arbitrumRollup);
+  await mockApiResponse('homepage_arbitrum_l2_batches', { items: [ finalized, unfinalized ] });
+
+  const component = await render(<LatestArbitrumL2Batches/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/home/latestBatches/LatestArbitrumL2Batches.tsx b/ui/home/latestBatches/LatestArbitrumL2Batches.tsx
new file mode 100644
index 0000000000..46e8495acf
--- /dev/null
+++ b/ui/home/latestBatches/LatestArbitrumL2Batches.tsx
@@ -0,0 +1,92 @@
+import { Box, Heading, Flex, Text, VStack } from '@chakra-ui/react';
+import { useQueryClient } from '@tanstack/react-query';
+import { AnimatePresence } from 'framer-motion';
+import React from 'react';
+
+import type { SocketMessage } from 'lib/socket/types';
+import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2';
+
+import { route } from 'nextjs-routes';
+
+import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
+import { ARBITRUM_L2_TXN_BATCHES_ITEM } from 'stubs/arbitrumL2';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+import LatestBatchItem from './LatestBatchItem';
+
+const LatestArbitrumL2Batches = () => {
+  const isMobile = useIsMobile();
+  const batchesMaxCount = isMobile ? 2 : 5;
+  const queryClient = useQueryClient();
+
+  const { data, isPlaceholderData, isError } = useApiQuery('homepage_arbitrum_l2_batches', {
+    queryOptions: {
+      placeholderData: { items: Array(batchesMaxCount).fill(ARBITRUM_L2_TXN_BATCHES_ITEM) },
+    },
+  });
+
+  const handleNewBatchMessage: SocketMessage.NewArbitrumL2Batch['handler'] = React.useCallback((payload) => {
+    queryClient.setQueryData(getResourceKey('homepage_arbitrum_l2_batches'), (prevData: { items: Array<ArbitrumL2TxnBatchesItem> } | undefined) => {
+      const newItems = prevData?.items ? [ ...prevData.items ] : [];
+
+      if (newItems.some((batch => batch.number === payload.batch.number))) {
+        return { items: newItems };
+      }
+
+      return { items: [ payload.batch, ...newItems ].sort((b1, b2) => b2.number - b1.number).slice(0, batchesMaxCount) };
+    });
+  }, [ queryClient, batchesMaxCount ]);
+
+  const channel = useSocketChannel({
+    topic: 'arbitrum:new_batch',
+    isDisabled: isPlaceholderData || isError,
+  });
+  useSocketMessage({
+    channel,
+    event: 'new_arbitrum_batch',
+    handler: handleNewBatchMessage,
+  });
+
+  let content;
+
+  if (isError) {
+    content = <Text>No data. Please reload the page.</Text>;
+  }
+
+  if (data) {
+    const dataToShow = data.items.slice(0, batchesMaxCount);
+
+    content = (
+      <>
+        <VStack spacing={ 2 } mb={ 3 } overflow="hidden" alignItems="stretch">
+          <AnimatePresence initial={ false } >
+            { dataToShow.map(((batch, index) => (
+              <LatestBatchItem
+                key={ batch.number + (isPlaceholderData ? String(index) : '') }
+                number={ batch.number }
+                timestamp={ batch.commitment_transaction.timestamp }
+                txCount={ batch.transactions_count }
+                isLoading={ isPlaceholderData }
+              />
+            ))) }
+          </AnimatePresence>
+        </VStack>
+        <Flex justifyContent="center">
+          <LinkInternal fontSize="sm" href={ route({ pathname: '/batches' }) }>View all batches</LinkInternal>
+        </Flex>
+      </>
+    );
+  }
+
+  return (
+    <Box width={{ base: '100%', lg: '280px' }} flexShrink={ 0 }>
+      <Heading as="h4" size="sm" mb={ 3 }>Latest batches</Heading>
+      { content }
+    </Box>
+  );
+};
+
+export default LatestArbitrumL2Batches;
diff --git a/ui/home/latestBatches/LatestBatchItem.tsx b/ui/home/latestBatches/LatestBatchItem.tsx
new file mode 100644
index 0000000000..d148d63779
--- /dev/null
+++ b/ui/home/latestBatches/LatestBatchItem.tsx
@@ -0,0 +1,77 @@
+import {
+  Box,
+  Flex,
+  Skeleton,
+} from '@chakra-ui/react';
+import { motion } from 'framer-motion';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+type Props = {
+  number: number;
+  timestamp: string | null;
+  txCount: number;
+  status?: React.ReactNode;
+  isLoading: boolean;
+}
+
+const LatestBatchItem = ({ number, timestamp, txCount, status, isLoading }: Props) => {
+  return (
+    <Box
+      as={ motion.div }
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ display: 'none' }}
+      transitionDuration="normal"
+      transitionTimingFunction="linear"
+      borderRadius="md"
+      border="1px solid"
+      borderColor="divider"
+      p={ 3 }
+    >
+      <Flex alignItems="center" overflow="hidden" w="100%" mb={ 3 }>
+        <BatchEntityL2
+          isLoading={ isLoading }
+          number={ number }
+          tailLength={ 2 }
+          fontSize="xl"
+          lineHeight={ 7 }
+          fontWeight={ 500 }
+          mr="auto"
+        />
+        <TimeAgoWithTooltip
+          timestamp={ timestamp }
+          enableIncrement={ !isLoading }
+          isLoading={ isLoading }
+          color="text_secondary"
+          fontWeight={ 400 }
+          display="inline-block"
+          fontSize="sm"
+          flexShrink={ 0 }
+          ml={ 2 }
+        />
+      </Flex>
+      <Flex alignItems="center" justifyContent="space-between" w="100%" flexWrap="wrap">
+        <Flex alignItems="center">
+          <Skeleton isLoaded={ !isLoading } mr={ 2 }>Txn</Skeleton>
+          <LinkInternal
+            href={ route({ pathname: '/batches/[number]', query: { number: number.toString(), tab: 'txs' } }) }
+            isLoading={ isLoading }
+          >
+            <Skeleton isLoaded={ !isLoading }>
+              { txCount }
+            </Skeleton>
+          </LinkInternal>
+        </Flex>
+        { status }
+      </Flex>
+    </Box>
+  );
+};
+
+export default LatestBatchItem;
diff --git a/ui/home/latestBatches/LatestZkEvmL2Batches.pw.tsx b/ui/home/latestBatches/LatestZkEvmL2Batches.pw.tsx
new file mode 100644
index 0000000000..47ed65a1a4
--- /dev/null
+++ b/ui/home/latestBatches/LatestZkEvmL2Batches.pw.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { txnBatchesData } from 'mocks/zkEvm/txnBatches';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import LatestZkEvmL2Batches from './LatestZkEvmL2Batches';
+
+test('default view +@mobile +@dark-mode', async({ render, mockEnvs, mockApiResponse }) => {
+  await mockEnvs(ENVS_MAP.zkEvmRollup);
+  await mockApiResponse('homepage_zkevm_l2_batches', txnBatchesData);
+
+  const component = await render(<LatestZkEvmL2Batches/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/home/latestBatches/LatestZkEvmL2Batches.tsx b/ui/home/latestBatches/LatestZkEvmL2Batches.tsx
new file mode 100644
index 0000000000..02a74584ee
--- /dev/null
+++ b/ui/home/latestBatches/LatestZkEvmL2Batches.tsx
@@ -0,0 +1,97 @@
+import { Box, Heading, Flex, Text, VStack } from '@chakra-ui/react';
+import { useQueryClient } from '@tanstack/react-query';
+import { AnimatePresence } from 'framer-motion';
+import React from 'react';
+
+import type { SocketMessage } from 'lib/socket/types';
+import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2';
+
+import { route } from 'nextjs-routes';
+
+import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
+import { ZKEVM_L2_TXN_BATCHES_ITEM } from 'stubs/zkEvmL2';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus';
+
+import LatestBatchItem from './LatestBatchItem';
+
+const LatestZkEvmL2Batches = () => {
+  const isMobile = useIsMobile();
+  const batchesMaxCount = isMobile ? 2 : 5;
+  const queryClient = useQueryClient();
+
+  const { data, isPlaceholderData, isError } = useApiQuery('homepage_zkevm_l2_batches', {
+    queryOptions: {
+      placeholderData: { items: Array(batchesMaxCount).fill(ZKEVM_L2_TXN_BATCHES_ITEM) },
+    },
+  });
+
+  const handleNewBatchMessage: SocketMessage.NewZkEvmL2Batch['handler'] = React.useCallback((payload) => {
+    queryClient.setQueryData(getResourceKey('homepage_zkevm_l2_batches'), (prevData: { items: Array<ZkEvmL2TxnBatchesItem> } | undefined) => {
+      const newItems = prevData?.items ? [ ...prevData.items ] : [];
+
+      if (newItems.some((batch => batch.number === payload.batch.number))) {
+        return { items: newItems };
+      }
+
+      return { items: [ payload.batch, ...newItems ].sort((b1, b2) => b2.number - b1.number).slice(0, batchesMaxCount) };
+    });
+  }, [ queryClient, batchesMaxCount ]);
+
+  const channel = useSocketChannel({
+    topic: 'zkevm_batches:new_zkevm_confirmed_batch',
+    isDisabled: isPlaceholderData || isError,
+  });
+  useSocketMessage({
+    channel,
+    event: 'new_zkevm_confirmed_batch',
+    handler: handleNewBatchMessage,
+  });
+
+  let content;
+
+  if (isError) {
+    content = <Text>No data. Please reload the page.</Text>;
+  }
+
+  if (data) {
+    const dataToShow = data.items.slice(0, batchesMaxCount);
+
+    content = (
+      <>
+        <VStack spacing={ 2 } mb={ 3 } overflow="hidden" alignItems="stretch">
+          <AnimatePresence initial={ false } >
+            { dataToShow.map(((batch, index) => {
+              const status = <ZkEvmL2TxnBatchStatus status={ batch.status } isLoading={ isPlaceholderData }/>;
+              return (
+                <LatestBatchItem
+                  key={ batch.number + (isPlaceholderData ? String(index) : '') }
+                  number={ batch.number }
+                  txCount={ batch.tx_count }
+                  timestamp={ batch.timestamp }
+                  status={ status }
+                  isLoading={ isPlaceholderData }
+                />
+              );
+            })) }
+          </AnimatePresence>
+        </VStack>
+        <Flex justifyContent="center">
+          <LinkInternal fontSize="sm" href={ route({ pathname: '/batches' }) }>View all batches</LinkInternal>
+        </Flex>
+      </>
+    );
+  }
+
+  return (
+    <Box width={{ base: '100%', lg: '280px' }} flexShrink={ 0 }>
+      <Heading as="h4" size="sm" mb={ 3 }>Latest batches</Heading>
+      { content }
+    </Box>
+  );
+};
+
+export default LatestZkEvmL2Batches;
diff --git a/ui/home/latestBatches/__screenshots__/LatestArbitrumL2Batches.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png b/ui/home/latestBatches/__screenshots__/LatestArbitrumL2Batches.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..2d55f06320
Binary files /dev/null and b/ui/home/latestBatches/__screenshots__/LatestArbitrumL2Batches.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/home/latestBatches/__screenshots__/LatestArbitrumL2Batches.pw.tsx_default_default-view-mobile-dark-mode-1.png b/ui/home/latestBatches/__screenshots__/LatestArbitrumL2Batches.pw.tsx_default_default-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..d3ce207ef7
Binary files /dev/null and b/ui/home/latestBatches/__screenshots__/LatestArbitrumL2Batches.pw.tsx_default_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/home/latestBatches/__screenshots__/LatestArbitrumL2Batches.pw.tsx_mobile_default-view-mobile-dark-mode-1.png b/ui/home/latestBatches/__screenshots__/LatestArbitrumL2Batches.pw.tsx_mobile_default-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..c9869ad411
Binary files /dev/null and b/ui/home/latestBatches/__screenshots__/LatestArbitrumL2Batches.pw.tsx_mobile_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/home/latestBatches/__screenshots__/LatestZkEvmL2Batches.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png b/ui/home/latestBatches/__screenshots__/LatestZkEvmL2Batches.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..38b60f07b9
Binary files /dev/null and b/ui/home/latestBatches/__screenshots__/LatestZkEvmL2Batches.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/home/latestBatches/__screenshots__/LatestZkEvmL2Batches.pw.tsx_default_default-view-mobile-dark-mode-1.png b/ui/home/latestBatches/__screenshots__/LatestZkEvmL2Batches.pw.tsx_default_default-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..2e3a2dec9a
Binary files /dev/null and b/ui/home/latestBatches/__screenshots__/LatestZkEvmL2Batches.pw.tsx_default_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/home/latestBatches/__screenshots__/LatestZkEvmL2Batches.pw.tsx_mobile_default-view-mobile-dark-mode-1.png b/ui/home/latestBatches/__screenshots__/LatestZkEvmL2Batches.pw.tsx_mobile_default-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..f0fedc30c9
Binary files /dev/null and b/ui/home/latestBatches/__screenshots__/LatestZkEvmL2Batches.pw.tsx_mobile_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/home/latestDeposits/LatestArbitrumDeposits.pw.tsx b/ui/home/latestDeposits/LatestArbitrumDeposits.pw.tsx
new file mode 100644
index 0000000000..496a215603
--- /dev/null
+++ b/ui/home/latestDeposits/LatestArbitrumDeposits.pw.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import * as depositMock from 'mocks/arbitrum/deposits';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import LatestArbitrumDeposits from './LatestArbitrumDeposits';
+
+test('default view +@mobile', async({ render, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.arbitrumRollup);
+  mockApiResponse('homepage_arbitrum_deposits', depositMock.latestDepositsResponse);
+  const component = await render(<LatestArbitrumDeposits/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/home/latestDeposits/LatestArbitrumDeposits.tsx b/ui/home/latestDeposits/LatestArbitrumDeposits.tsx
new file mode 100644
index 0000000000..1c22dbf79a
--- /dev/null
+++ b/ui/home/latestDeposits/LatestArbitrumDeposits.tsx
@@ -0,0 +1,77 @@
+import { Text } from '@chakra-ui/react';
+import React from 'react';
+
+import type { SocketMessage } from 'lib/socket/types';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import useGradualIncrement from 'lib/hooks/useGradualIncrement';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
+import { ARBITRUM_MESSAGES_ITEM } from 'stubs/arbitrumL2';
+
+import LatestDeposits from './LatestDeposits';
+
+const LatestArbitrumDeposits = () => {
+  const isMobile = useIsMobile();
+  const itemsCount = isMobile ? 2 : 6;
+  const { data, isPlaceholderData, isError } = useApiQuery('homepage_arbitrum_deposits', {
+    queryOptions: {
+      placeholderData: { items: Array(itemsCount).fill(ARBITRUM_MESSAGES_ITEM) },
+    },
+  });
+
+  const [ num, setNum ] = useGradualIncrement(0);
+  const [ socketAlert, setSocketAlert ] = React.useState('');
+
+  const handleSocketClose = React.useCallback(() => {
+    setSocketAlert('Connection is lost. Please reload the page.');
+  }, []);
+
+  const handleSocketError = React.useCallback(() => {
+    setSocketAlert('An error has occurred while fetching new transactions. Please reload the page.');
+  }, []);
+
+  const handleNewDepositMessage: SocketMessage.NewArbitrumDeposits['handler'] = React.useCallback((payload) => {
+    setNum(payload.new_messages_to_rollup_amount);
+  }, [ setNum ]);
+
+  const channel = useSocketChannel({
+    topic: 'arbitrum:new_messages_to_rollup_amount',
+    onSocketClose: handleSocketClose,
+    onSocketError: handleSocketError,
+    isDisabled: false,
+  });
+
+  useSocketMessage({
+    channel,
+    event: 'new_messages_to_rollup_amount',
+    handler: handleNewDepositMessage,
+  });
+
+  if (isError) {
+    return <Text mt={ 4 }>No data. Please reload the page.</Text>;
+  }
+
+  if (data) {
+    return (
+      <LatestDeposits
+        items={ data.items.slice(0, itemsCount).map((item) => (
+          {
+            l1BlockNumber: item.origination_transaction_block_number,
+            l1TxHash: item.origination_transaction_hash,
+            l2TxHash: item.completion_transaction_hash,
+            timestamp: item.origination_timestamp,
+          }
+        )) }
+        isLoading={ isPlaceholderData }
+        socketItemsNum={ num }
+        socketAlert={ socketAlert }
+      />
+    );
+  }
+
+  return null;
+};
+
+export default LatestArbitrumDeposits;
diff --git a/ui/home/latestDeposits/LatestDeposits.tsx b/ui/home/latestDeposits/LatestDeposits.tsx
new file mode 100644
index 0000000000..7d1dd44112
--- /dev/null
+++ b/ui/home/latestDeposits/LatestDeposits.tsx
@@ -0,0 +1,180 @@
+import {
+  Box,
+  Flex,
+  Grid,
+  GridItem,
+  Skeleton,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+type DepositsItem = {
+  l1BlockNumber: number | null;
+  l1TxHash: string | null;
+  l2TxHash: string;
+  timestamp: string | null;
+}
+
+type Props = {
+  isLoading?: boolean;
+  items: Array<DepositsItem>;
+  socketItemsNum: number;
+  socketAlert?: string;
+}
+
+type ItemProps = {
+  item: DepositsItem;
+  isLoading?: boolean;
+}
+
+const LatestDepositsItem = ({ item, isLoading }: ItemProps) => {
+  const isMobile = useIsMobile();
+
+  const l1BlockLink = item.l1BlockNumber ? (
+    <BlockEntityL1
+      number={ item.l1BlockNumber }
+      isLoading={ isLoading }
+      fontSize="sm"
+      lineHeight={ 5 }
+      fontWeight={ 700 }
+    />
+  ) : (
+    <BlockEntityL1
+      number="TBD"
+      isLoading={ isLoading }
+      fontSize="sm"
+      lineHeight={ 5 }
+      fontWeight={ 700 }
+      noLink
+    />
+  );
+
+  const l1TxLink = item.l1TxHash ? (
+    <TxEntityL1
+      isLoading={ isLoading }
+      hash={ item.l1TxHash }
+      fontSize="sm"
+      lineHeight={ 5 }
+      truncation={ isMobile ? 'constant_long' : 'dynamic' }
+    />
+  ) : (
+    <TxEntityL1
+      isLoading={ isLoading }
+      hash="To be determined"
+      fontSize="sm"
+      lineHeight={ 5 }
+      truncation="none"
+      noLink
+    />
+  );
+
+  const l2TxLink = (
+    <TxEntity
+      isLoading={ isLoading }
+      hash={ item.l2TxHash }
+      fontSize="sm"
+      lineHeight={ 5 }
+      truncation={ isMobile ? 'constant_long' : 'dynamic' }
+    />
+  );
+
+  const content = (() => {
+    if (isMobile) {
+      return (
+        <>
+          <Flex justifyContent="space-between" alignItems="center" mb={ 1 }>
+            { l1BlockLink }
+            { item.timestamp ? (
+              <TimeAgoWithTooltip
+                timestamp={ item.timestamp }
+                isLoading={ isLoading }
+                color="text_secondary"
+              />
+            ) : <GridItem/> }
+          </Flex>
+          <Grid gridTemplateColumns="56px auto">
+            <Skeleton isLoaded={ !isLoading } my="5px" w="fit-content">
+              L1 txn
+            </Skeleton>
+            { l1TxLink }
+            <Skeleton isLoaded={ !isLoading } my="3px" w="fit-content">
+              L2 txn
+            </Skeleton>
+            { l2TxLink }
+          </Grid>
+        </>
+      );
+    }
+
+    return (
+      <Grid width="100%" columnGap={ 4 } rowGap={ 2 } templateColumns="max-content max-content auto" w="100%">
+        { l1BlockLink }
+        <Skeleton isLoaded={ !isLoading } w="fit-content" h="fit-content" my="5px">
+          L1 txn
+        </Skeleton>
+        { l1TxLink }
+        { item.timestamp ? (
+          <TimeAgoWithTooltip
+            timestamp={ item.timestamp }
+            isLoading={ isLoading }
+            color="text_secondary"
+            w="fit-content"
+            h="fit-content"
+            my="2px"
+          />
+        ) : <GridItem/> }
+        <Skeleton isLoaded={ !isLoading } w="fit-content" h="fit-content" my="2px">
+          L2 txn
+        </Skeleton>
+        { l2TxLink }
+      </Grid>
+    );
+  })();
+
+  return (
+    <Box
+      width="100%"
+      borderTop="1px solid"
+      borderColor="divider"
+      py={ 4 }
+      px={{ base: 0, lg: 4 }}
+      _last={{ borderBottom: '1px solid', borderColor: 'divider' }}
+      fontSize="sm"
+      lineHeight={ 5 }
+    >
+      { content }
+    </Box>
+  );
+};
+
+const LatestDeposits = ({ isLoading, items, socketAlert, socketItemsNum }: Props) => {
+  const depositsUrl = route({ pathname: '/deposits' });
+  return (
+    <>
+      <SocketNewItemsNotice borderBottomRadius={ 0 } url={ depositsUrl } num={ socketItemsNum } alert={ socketAlert } type="deposit" isLoading={ isLoading }/>
+      <Box mb={{ base: 3, lg: 4 }}>
+        { items.map(((item, index) => (
+          <LatestDepositsItem
+            key={ item.l1TxHash + item.l2TxHash + (isLoading ? index : '') }
+            item={ item }
+            isLoading={ isLoading }
+          />
+        ))) }
+      </Box>
+      <Flex justifyContent="center">
+        <LinkInternal fontSize="sm" href={ depositsUrl }>View all deposits</LinkInternal>
+      </Flex>
+    </>
+  );
+};
+
+export default LatestDeposits;
diff --git a/ui/home/latestDeposits/LatestDepositsItem.tsx b/ui/home/latestDeposits/LatestDepositsItem.tsx
new file mode 100644
index 0000000000..c6b01abcf1
--- /dev/null
+++ b/ui/home/latestDeposits/LatestDepositsItem.tsx
@@ -0,0 +1,121 @@
+import {
+  Box,
+  Flex,
+  Grid,
+  Skeleton,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+type Props = {
+  l1BlockNumber: number;
+  l1TxHash: string;
+  l2TxHash: string | null;
+  timestamp: string | null;
+  isLoading?: boolean;
+}
+
+const LatestDepositsItem = ({ l1BlockNumber, l1TxHash, l2TxHash, timestamp, isLoading }: Props) => {
+  const isMobile = useIsMobile();
+
+  const l1BlockLink = (
+    <BlockEntityL1
+      number={ l1BlockNumber }
+      isLoading={ isLoading }
+      fontSize="sm"
+      lineHeight={ 5 }
+      fontWeight={ 700 }
+    />
+  );
+
+  const l1TxLink = (
+    <TxEntityL1
+      isLoading={ isLoading }
+      hash={ l1TxHash }
+      fontSize="sm"
+      lineHeight={ 5 }
+      truncation={ isMobile ? 'constant_long' : 'dynamic' }
+    />
+  );
+
+  const l2TxLink = l2TxHash ? (
+    <TxEntity
+      isLoading={ isLoading }
+      hash={ l2TxHash }
+      fontSize="sm"
+      lineHeight={ 5 }
+      truncation={ isMobile ? 'constant_long' : 'dynamic' }
+    />
+  ) : null;
+
+  const content = (() => {
+    if (isMobile) {
+      return (
+        <>
+          <Flex justifyContent="space-between" alignItems="center" mb={ 1 }>
+            { l1BlockLink }
+            <TimeAgoWithTooltip
+              timestamp={ timestamp }
+              isLoading={ isLoading }
+              color="text_secondary"
+            />
+          </Flex>
+          <Grid gridTemplateColumns="56px auto">
+            <Skeleton isLoaded={ !isLoading } my="5px" w="fit-content">
+              L1 txn
+            </Skeleton>
+            { l1TxLink }
+            <Skeleton isLoaded={ !isLoading } my="3px" w="fit-content">
+              L2 txn
+            </Skeleton>
+            { l2TxLink }
+          </Grid>
+        </>
+      );
+    }
+
+    return (
+      <Grid width="100%" columnGap={ 4 } rowGap={ 2 } templateColumns="max-content max-content auto" w="100%">
+        { l1BlockLink }
+        <Skeleton isLoaded={ !isLoading } w="fit-content" h="fit-content" my="5px">
+          L1 txn
+        </Skeleton>
+        { l1TxLink }
+        <TimeAgoWithTooltip
+          timestamp={ timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+          w="fit-content"
+          h="fit-content"
+          my="2px"
+        />
+        <Skeleton isLoaded={ !isLoading } w="fit-content" h="fit-content" my="2px">
+          L2 txn
+        </Skeleton>
+        { l2TxLink }
+      </Grid>
+    );
+  })();
+
+  return (
+    <Box
+      width="100%"
+      borderTop="1px solid"
+      borderColor="divider"
+      py={ 4 }
+      px={{ base: 0, lg: 4 }}
+      _last={{ borderBottom: '1px solid', borderColor: 'divider' }}
+      fontSize="sm"
+      lineHeight={ 5 }
+    >
+      { content }
+    </Box>
+  );
+};
+
+export default React.memo(LatestDepositsItem);
diff --git a/ui/home/latestDeposits/LatestOptimisticDeposits.pw.tsx b/ui/home/latestDeposits/LatestOptimisticDeposits.pw.tsx
new file mode 100644
index 0000000000..6a0396a42c
--- /dev/null
+++ b/ui/home/latestDeposits/LatestOptimisticDeposits.pw.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import * as depositMock from 'mocks/optimism/deposits';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import LatestOptimisticDeposits from './LatestOptimisticDeposits';
+
+test('default view +@mobile +@dark-mode', async({ render, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  mockApiResponse('homepage_optimistic_deposits', depositMock.data.items);
+  const component = await render(<LatestOptimisticDeposits/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/home/latestDeposits/LatestOptimisticDeposits.tsx b/ui/home/latestDeposits/LatestOptimisticDeposits.tsx
new file mode 100644
index 0000000000..cf950585b0
--- /dev/null
+++ b/ui/home/latestDeposits/LatestOptimisticDeposits.tsx
@@ -0,0 +1,72 @@
+import { Text } from '@chakra-ui/react';
+import React from 'react';
+
+import type { SocketMessage } from 'lib/socket/types';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import useGradualIncrement from 'lib/hooks/useGradualIncrement';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
+import { L2_DEPOSIT_ITEM } from 'stubs/L2';
+
+import LatestDeposits from './LatestDeposits';
+
+const LatestOptimisticDeposits = () => {
+  const isMobile = useIsMobile();
+  const itemsCount = isMobile ? 2 : 6;
+  const { data, isPlaceholderData, isError } = useApiQuery('homepage_optimistic_deposits', {
+    queryOptions: {
+      placeholderData: Array(itemsCount).fill(L2_DEPOSIT_ITEM),
+    },
+  });
+
+  const [ num, setNum ] = useGradualIncrement(0);
+  const [ socketAlert, setSocketAlert ] = React.useState('');
+
+  const handleSocketClose = React.useCallback(() => {
+    setSocketAlert('Connection is lost. Please reload the page.');
+  }, []);
+
+  const handleSocketError = React.useCallback(() => {
+    setSocketAlert('An error has occurred while fetching new transactions. Please reload the page.');
+  }, []);
+
+  const handleNewDepositMessage: SocketMessage.NewOptimisticDeposits['handler'] = React.useCallback((payload) => {
+    setNum(payload.deposits);
+  }, [ setNum ]);
+
+  const channel = useSocketChannel({
+    topic: 'optimism_deposits:new_deposits',
+    onSocketClose: handleSocketClose,
+    onSocketError: handleSocketError,
+    isDisabled: false,
+  });
+
+  useSocketMessage({
+    channel,
+    event: 'deposits',
+    handler: handleNewDepositMessage,
+  });
+
+  if (isError) {
+    return <Text mt={ 4 }>No data. Please reload the page.</Text>;
+  }
+
+  if (data) {
+    return (
+      <LatestDeposits
+        items={ data.slice(0, itemsCount).map((item) => (
+          { l1BlockNumber: item.l1_block_number, l1TxHash: item.l1_tx_hash, l2TxHash: item.l2_tx_hash, timestamp: item.l1_block_timestamp }
+        )) }
+        isLoading={ isPlaceholderData }
+        socketItemsNum={ num }
+        socketAlert={ socketAlert }
+      />
+    );
+  }
+
+  return null;
+};
+
+export default LatestOptimisticDeposits;
diff --git a/ui/home/latestDeposits/__screenshots__/LatestArbitrumDeposits.pw.tsx_default_default-view-mobile-1.png b/ui/home/latestDeposits/__screenshots__/LatestArbitrumDeposits.pw.tsx_default_default-view-mobile-1.png
new file mode 100644
index 0000000000..3eaa7443a3
Binary files /dev/null and b/ui/home/latestDeposits/__screenshots__/LatestArbitrumDeposits.pw.tsx_default_default-view-mobile-1.png differ
diff --git a/ui/home/latestDeposits/__screenshots__/LatestArbitrumDeposits.pw.tsx_mobile_default-view-mobile-1.png b/ui/home/latestDeposits/__screenshots__/LatestArbitrumDeposits.pw.tsx_mobile_default-view-mobile-1.png
new file mode 100644
index 0000000000..9cd7e2103e
Binary files /dev/null and b/ui/home/latestDeposits/__screenshots__/LatestArbitrumDeposits.pw.tsx_mobile_default-view-mobile-1.png differ
diff --git a/ui/home/latestDeposits/__screenshots__/LatestOptimisticDeposits.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png b/ui/home/latestDeposits/__screenshots__/LatestOptimisticDeposits.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..c9df922e12
Binary files /dev/null and b/ui/home/latestDeposits/__screenshots__/LatestOptimisticDeposits.pw.tsx_dark-color-mode_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/home/latestDeposits/__screenshots__/LatestOptimisticDeposits.pw.tsx_default_default-view-mobile-dark-mode-1.png b/ui/home/latestDeposits/__screenshots__/LatestOptimisticDeposits.pw.tsx_default_default-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..85a18898aa
Binary files /dev/null and b/ui/home/latestDeposits/__screenshots__/LatestOptimisticDeposits.pw.tsx_default_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/home/latestDeposits/__screenshots__/LatestOptimisticDeposits.pw.tsx_mobile_default-view-mobile-dark-mode-1.png b/ui/home/latestDeposits/__screenshots__/LatestOptimisticDeposits.pw.tsx_mobile_default-view-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..588dc52cbb
Binary files /dev/null and b/ui/home/latestDeposits/__screenshots__/LatestOptimisticDeposits.pw.tsx_mobile_default-view-mobile-dark-mode-1.png differ
diff --git a/ui/marketplace/AppSecurityReport.tsx b/ui/marketplace/AppSecurityReport.tsx
index 35301af312..740a7f09ae 100644
--- a/ui/marketplace/AppSecurityReport.tsx
+++ b/ui/marketplace/AppSecurityReport.tsx
@@ -1,11 +1,17 @@
-import { Box, Text, Link, Popover, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure } from '@chakra-ui/react';
+import { Box, Text, Link, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, chakra, Flex, Divider, Icon } from '@chakra-ui/react';
 import React from 'react';
 
 import type { MarketplaceAppSecurityReport } from 'types/client/marketplace';
+import { ContractListTypes } from 'types/client/marketplace';
 
 import config from 'configs/app';
+// This icon doesn't work properly when it is in the sprite
+// Probably because of the gradient
+// eslint-disable-next-line no-restricted-imports
+import solidityScanIcon from 'icons/brands/solidity_scan.svg';
 import { apos } from 'lib/html-entities';
 import * as mixpanel from 'lib/mixpanel/index';
+import Popover from 'ui/shared/chakra/Popover';
 import IconSvg from 'ui/shared/IconSvg';
 import SolidityscanReportButton from 'ui/shared/solidityscanReport/SolidityscanReportButton';
 import SolidityscanReportDetails from 'ui/shared/solidityscanReport/SolidityscanReportDetails';
@@ -14,14 +20,17 @@ import SolidityscanReportScore from 'ui/shared/solidityscanReport/SolidityscanRe
 type Props = {
   id: string;
   securityReport?: MarketplaceAppSecurityReport;
-  height?: string | undefined;
-  showContractList: () => void;
+  showContractList: (id: string, type: ContractListTypes) => void;
   isLoading?: boolean;
   onlyIcon?: boolean;
-  source: 'Security view' | 'App modal' | 'App page';
+  source: 'Discovery view' | 'App modal' | 'App page';
+  className?: string;
+  popoverPlacement?: 'bottom-start' | 'bottom-end' | 'left';
 }
 
-const AppSecurityReport = ({ id, securityReport, height, showContractList, isLoading, onlyIcon, source }: Props) => {
+const AppSecurityReport = ({
+  id, securityReport, showContractList, isLoading, onlyIcon, source, className, popoverPlacement = 'bottom-start',
+}: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
 
   const handleButtonClick = React.useCallback(() => {
@@ -29,14 +38,15 @@ const AppSecurityReport = ({ id, securityReport, height, showContractList, isLoa
     onToggle();
   }, [ id, source, onToggle ]);
 
-  const handleLinkClick = React.useCallback(() => {
+  const showAnalyzedContracts = React.useCallback(() => {
     mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Analyzed contracts', Info: id, Source: 'Security score popup' });
-    showContractList();
-  }, [ id, showContractList ]);
+    showContractList(id, ContractListTypes.ANALYZED);
+  }, [ showContractList, id ]);
 
-  if (!securityReport && !isLoading) {
-    return null;
-  }
+  const showAllContracts = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Total contracts', Info: id, Source: 'Security score popup' });
+    showContractList(id, ContractListTypes.ALL);
+  }, [ showContractList, id ]);
 
   const {
     securityScore = 0,
@@ -45,22 +55,43 @@ const AppSecurityReport = ({ id, securityReport, height, showContractList, isLoa
     totalIssues = 0,
   } = securityReport?.overallInfo || {};
 
+  if ((!securityReport || !securityScore) && !isLoading) {
+    return null;
+  }
+
   return (
-    <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
+    <Popover isOpen={ isOpen } onClose={ onClose } placement={ popoverPlacement } isLazy>
       <PopoverTrigger>
         <SolidityscanReportButton
           score={ securityScore }
           isLoading={ isLoading }
           onClick={ handleButtonClick }
-          height={ height }
+          isActive={ isOpen }
           onlyIcon={ onlyIcon }
+          label={ <>The security score is based on analysis<br/>of a DApp{ apos }s smart contracts.</> }
+          className={ className }
         />
       </PopoverTrigger>
-      <PopoverContent w={{ base: '100vw', lg: '328px' }}>
+      <PopoverContent w={{ base: 'calc(100vw - 24px)', lg: '328px' }} mx={{ base: 3, lg: 0 }}>
         <PopoverBody px="26px" py="20px" fontSize="sm">
+          <Text fontWeight="500" fontSize="xs" mb={ 2 } variant="secondary">Smart contracts info</Text>
+          <Flex alignItems="center" justifyContent="space-between" py={ 1.5 }>
+            <Flex alignItems="center">
+              <IconSvg name="contracts/verified_many" boxSize={ 5 } color="green.500" mr={ 1 }/>
+              <Text>Verified contracts</Text>
+            </Flex>
+            <Link fontSize="sm" fontWeight="500" onClick={ showAllContracts }>
+              { securityReport?.overallInfo.verifiedNumber ?? 0 } of { securityReport?.overallInfo.totalContractsNumber ?? 0 }
+            </Link>
+          </Flex>
+          <Divider my={ 3 }/>
           <Box mb={ 5 }>
             { solidityScanContractsNumber } smart contract{ solidityScanContractsNumber === 1 ? ' was' : 's were' } evaluated to determine
-            this protocol{ apos }s overall security score on the { config.chain.name } network.
+            this protocol{ apos }s overall security score on the { config.chain.name } network by { ' ' }
+            <Box>
+              <Icon as={ solidityScanIcon } mr={ 1 } w="23px" h="20px" display="inline-block" verticalAlign="middle"/>
+              <Text fontWeight={ 600 } display="inline-block">SolidityScan</Text>
+            </Box>
           </Box>
           <SolidityscanReportScore score={ securityScore } mb={ 5 }/>
           { issueSeverityDistribution && totalIssues > 0 && (
@@ -69,9 +100,8 @@ const AppSecurityReport = ({ id, securityReport, height, showContractList, isLoa
               <SolidityscanReportDetails vulnerabilities={ issueSeverityDistribution } vulnerabilitiesCount={ totalIssues }/>
             </Box>
           ) }
-          <Link onClick={ handleLinkClick } display="inline-flex" alignItems="center">
+          <Link onClick={ showAnalyzedContracts } display="inline-flex" alignItems="center">
             Analyzed contracts
-            <IconSvg name="arrows/north-east" boxSize={ 5 } color="gray.400"/>
           </Link>
         </PopoverBody>
       </PopoverContent>
@@ -79,4 +109,4 @@ const AppSecurityReport = ({ id, securityReport, height, showContractList, isLoa
   );
 };
 
-export default AppSecurityReport;
+export default chakra(AppSecurityReport);
diff --git a/ui/marketplace/Banner.tsx b/ui/marketplace/Banner.tsx
new file mode 100644
index 0000000000..c70f6ade9e
--- /dev/null
+++ b/ui/marketplace/Banner.tsx
@@ -0,0 +1,51 @@
+import type { MouseEvent } from 'react';
+import React from 'react';
+
+import type { MarketplaceAppPreview } from 'types/client/marketplace';
+
+import config from 'configs/app';
+import { apps as appsMock } from 'mocks/apps/apps';
+
+import FeaturedApp from './Banner/FeaturedApp';
+import IframeBanner from './Banner/IframeBanner';
+
+const feature = config.features.marketplace;
+
+type BannerProps = {
+  apps: Array<MarketplaceAppPreview> | undefined;
+  favoriteApps: Array<string>;
+  isLoading: boolean;
+  onInfoClick: (id: string) => void;
+  onFavoriteClick: (id: string, isFavorite: boolean, source: 'Banner') => void;
+  onAppClick: (event: MouseEvent, id: string) => void;
+}
+
+const Banner = ({ apps = [], favoriteApps, isLoading, onInfoClick, onFavoriteClick, onAppClick }: BannerProps) => {
+  if (!feature.isEnabled) {
+    return null;
+  }
+
+  if (feature.featuredApp) {
+    const app = apps.find(app => app.id === feature.featuredApp);
+    const isFavorite = favoriteApps.includes(feature.featuredApp);
+    if (!isLoading && !app) {
+      return null;
+    }
+    return (
+      <FeaturedApp
+        app={ app || appsMock[0] }
+        isFavorite={ isFavorite }
+        isLoading={ isLoading }
+        onInfoClick={ onInfoClick }
+        onFavoriteClick={ onFavoriteClick }
+        onAppClick={ onAppClick }
+      />
+    );
+  } else if (feature.banner) {
+    return <IframeBanner contentUrl={ feature.banner.contentUrl } linkUrl={ feature.banner.linkUrl }/>;
+  }
+
+  return null;
+};
+
+export default Banner;
diff --git a/ui/marketplace/Banner/FeaturedApp.tsx b/ui/marketplace/Banner/FeaturedApp.tsx
new file mode 100644
index 0000000000..72dd6f49cd
--- /dev/null
+++ b/ui/marketplace/Banner/FeaturedApp.tsx
@@ -0,0 +1,158 @@
+import { Link, Skeleton, useColorModeValue, LinkBox, Flex, Image, LinkOverlay, IconButton } from '@chakra-ui/react';
+import NextLink from 'next/link';
+import type { MouseEvent } from 'react';
+import React, { useCallback } from 'react';
+
+import type { MarketplaceAppPreview } from 'types/client/marketplace';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import * as mixpanel from 'lib/mixpanel/index';
+
+import FavoriteIcon from '../FavoriteIcon';
+import MarketplaceAppIntegrationIcon from '../MarketplaceAppIntegrationIcon';
+import FeaturedAppMobile from './FeaturedAppMobile';
+
+type FeaturedAppProps = {
+  app: MarketplaceAppPreview;
+  isFavorite: boolean;
+  isLoading: boolean;
+  onInfoClick: (id: string) => void;
+  onFavoriteClick: (id: string, isFavorite: boolean, source: 'Banner') => void;
+  onAppClick: (event: MouseEvent, id: string) => void;
+}
+
+const FeaturedApp = ({
+  app, isFavorite, isLoading, onAppClick,
+  onInfoClick, onFavoriteClick,
+}: FeaturedAppProps) => {
+  const isMobile = useIsMobile();
+
+  const { id, url, external, title, logo, logoDarkMode, shortDescription, categories, internalWallet } = app;
+  const logoUrl = useColorModeValue(logo, logoDarkMode || logo);
+  const categoriesLabel = categories.join(', ');
+
+  const backgroundColor = useColorModeValue('purple.50', 'whiteAlpha.100');
+
+  const handleInfoClick = useCallback((event: MouseEvent) => {
+    event.preventDefault();
+    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'More button', Info: id, Source: 'Banner' });
+    onInfoClick(id);
+  }, [ onInfoClick, id ]);
+
+  const handleFavoriteClick = useCallback(() => {
+    onFavoriteClick(id, isFavorite, 'Banner');
+  }, [ onFavoriteClick, id, isFavorite ]);
+
+  if (isMobile) {
+    return (
+      <FeaturedAppMobile
+        { ...app }
+        onInfoClick={ handleInfoClick }
+        isFavorite={ isFavorite }
+        onFavoriteClick={ handleFavoriteClick }
+        isLoading={ isLoading }
+        onAppClick={ onAppClick }
+      />
+    );
+  }
+
+  return (
+    <LinkBox role="group">
+      <Flex
+        gap={ 6 }
+        borderRadius="md"
+        height="136px"
+        padding={ 5 }
+        background={ backgroundColor }
+        mb={ 2 }
+        mt={ 6 }
+      >
+        <Skeleton
+          isLoaded={ !isLoading }
+          w="96px"
+          h="96px"
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+        >
+          <Image
+            src={ isLoading ? undefined : logoUrl }
+            alt={ `${ title } app icon` }
+            borderRadius="md"
+          />
+        </Skeleton>
+
+        <Flex flexDirection="column" flex={ 1 } gap={ 2 }>
+          <Flex alignItems="center" gap={ 3 }>
+            <Skeleton
+              isLoaded={ !isLoading }
+              fontSize="30px"
+              fontWeight="semibold"
+              fontFamily="heading"
+              lineHeight="36px"
+            >
+              { external ? (
+                <LinkOverlay href={ url } isExternal={ true } marginRight={ 2 }>
+                  { title }
+                </LinkOverlay>
+              ) : (
+                <NextLink href={{ pathname: '/apps/[id]', query: { id } }} passHref legacyBehavior>
+                  <LinkOverlay marginRight={ 2 }>
+                    { title }
+                  </LinkOverlay>
+                </NextLink>
+              ) }
+              <MarketplaceAppIntegrationIcon external={ external } internalWallet={ internalWallet }/>
+            </Skeleton>
+
+            <Skeleton
+              isLoaded={ !isLoading }
+              color="text_secondary"
+              fontSize="xs"
+              flex={ 1 }
+            >
+              <span>{ categoriesLabel }</span>
+            </Skeleton>
+
+            { !isLoading && (
+              <Link
+                fontSize="sm"
+                fontWeight="500"
+                href="#"
+                onClick={ handleInfoClick }
+              >
+                More info
+              </Link>
+            ) }
+
+            { !isLoading && (
+              <IconButton
+                display="flex"
+                alignItems="center"
+                aria-label="Mark as favorite"
+                title="Mark as favorite"
+                variant="ghost"
+                colorScheme="gray"
+                w={ 9 }
+                h={ 8 }
+                onClick={ handleFavoriteClick }
+                icon={ <FavoriteIcon isFavorite={ isFavorite }/> }
+              />
+            ) }
+          </Flex>
+
+          <Skeleton
+            isLoaded={ !isLoading }
+            fontSize="sm"
+            lineHeight="20px"
+            noOfLines={ 2 }
+          >
+            { shortDescription }
+          </Skeleton>
+        </Flex>
+      </Flex>
+    </LinkBox>
+  );
+};
+
+export default FeaturedApp;
diff --git a/ui/marketplace/Banner/FeaturedAppMobile.tsx b/ui/marketplace/Banner/FeaturedAppMobile.tsx
new file mode 100644
index 0000000000..5f7e8c7b4b
--- /dev/null
+++ b/ui/marketplace/Banner/FeaturedAppMobile.tsx
@@ -0,0 +1,154 @@
+import { IconButton, Image, Link, LinkBox, Skeleton, useColorModeValue, Flex } from '@chakra-ui/react';
+import type { MouseEvent } from 'react';
+import React from 'react';
+
+import type { MarketplaceAppPreview } from 'types/client/marketplace';
+
+import FavoriteIcon from '../FavoriteIcon';
+import MarketplaceAppCardLink from '../MarketplaceAppCardLink';
+import MarketplaceAppIntegrationIcon from '../MarketplaceAppIntegrationIcon';
+
+interface Props extends MarketplaceAppPreview {
+  onInfoClick: (event: MouseEvent) => void;
+  isFavorite: boolean;
+  onFavoriteClick: () => void;
+  isLoading: boolean;
+  onAppClick: (event: MouseEvent, id: string) => void;
+}
+
+const FeaturedAppMobile = ({
+  id,
+  url,
+  external,
+  title,
+  logo,
+  logoDarkMode,
+  shortDescription,
+  categories,
+  onInfoClick,
+  isFavorite,
+  onFavoriteClick,
+  isLoading,
+  internalWallet,
+  onAppClick,
+}: Props) => {
+  const categoriesLabel = categories.join(', ');
+
+  const logoUrl = useColorModeValue(logo, logoDarkMode || logo);
+
+  return (
+    <LinkBox
+      borderRadius="md"
+      padding={{ base: 3, sm: '20px' }}
+      role="group"
+      background={ useColorModeValue('purple.50', 'whiteAlpha.100') }
+      mt={ 6 }
+    >
+      <Flex
+        flexDirection="row"
+        height="100%"
+        alignContent="start"
+        gap={ 4 }
+      >
+        <Flex
+          flexDirection="column"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Skeleton
+            isLoaded={ !isLoading }
+            w={{ base: '64px', sm: '96px' }}
+            h={{ base: '64px', sm: '96px' }}
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Image
+              src={ isLoading ? undefined : logoUrl }
+              alt={ `${ title } app icon` }
+              borderRadius="8px"
+            />
+          </Skeleton>
+
+          { !isLoading && (
+            <Flex
+              position={{ base: 'relative', sm: 'absolute' }}
+              right={{ base: 0, sm: '50px' }}
+              top={{ base: 0, sm: '24px' }}
+            >
+              <Link
+                fontSize={{ base: 'xs', sm: 'sm' }}
+                fontWeight="500"
+                paddingRight={{ sm: 2 }}
+                href="#"
+                onClick={ onInfoClick }
+              >
+                More info
+              </Link>
+            </Flex>
+          ) }
+        </Flex>
+
+        <Flex flexDirection="column" gap={ 2 }>
+          <Skeleton
+            isLoaded={ !isLoading }
+            fontSize={{ base: 'sm', sm: 'lg' }}
+            lineHeight={{ base: '20px', sm: '28px' }}
+            paddingRight={{ base: '25px', sm: '110px' }}
+            fontWeight="semibold"
+            fontFamily="heading"
+            display="inline-block"
+          >
+            <MarketplaceAppCardLink
+              id={ id }
+              url={ url }
+              external={ external }
+              title={ title }
+              onClick={ onAppClick }
+            />
+            <MarketplaceAppIntegrationIcon external={ external } internalWallet={ internalWallet }/>
+          </Skeleton>
+
+          <Skeleton
+            isLoaded={ !isLoading }
+            color="text_secondary"
+            fontSize="xs"
+            lineHeight="16px"
+          >
+            <span>{ categoriesLabel }</span>
+          </Skeleton>
+
+          <Skeleton
+            isLoaded={ !isLoading }
+            fontSize={{ base: 'xs', sm: 'sm' }}
+            lineHeight="20px"
+            noOfLines={ 3 }
+          >
+            { shortDescription }
+          </Skeleton>
+        </Flex>
+
+        { !isLoading && (
+          <IconButton
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            position="absolute"
+            right={{ base: 1, sm: '10px' }}
+            top={{ base: 1, sm: '18px' }}
+            aria-label="Mark as favorite"
+            title="Mark as favorite"
+            variant="ghost"
+            colorScheme="gray"
+            w={ 9 }
+            h={ 8 }
+            onClick={ onFavoriteClick }
+            icon={ <FavoriteIcon isFavorite={ isFavorite }/> }
+          />
+        ) }
+      </Flex>
+    </LinkBox>
+  );
+};
+
+export default React.memo(FeaturedAppMobile);
diff --git a/ui/marketplace/Banner/IframeBanner.tsx b/ui/marketplace/Banner/IframeBanner.tsx
new file mode 100644
index 0000000000..85d11c2698
--- /dev/null
+++ b/ui/marketplace/Banner/IframeBanner.tsx
@@ -0,0 +1,52 @@
+import { Link, Skeleton, Box } from '@chakra-ui/react';
+import React, { useCallback, useState } from 'react';
+
+import * as mixpanel from 'lib/mixpanel/index';
+
+const IframeBanner = ({ contentUrl, linkUrl }: { contentUrl: string; linkUrl: string }) => {
+  const [ isFrameLoading, setIsFrameLoading ] = useState(true);
+
+  const handleIframeLoad = useCallback(() => {
+    setIsFrameLoading(false);
+  }, []);
+
+  const handleClick = useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.PROMO_BANNER, { Source: 'Marketplace', Link: linkUrl });
+  }, [ linkUrl ]);
+
+  return (
+    <Skeleton
+      isLoaded={ !isFrameLoading }
+      position="relative"
+      h="136px"
+      w="100%"
+      borderRadius="md"
+      mb={{ base: 0, sm: 2 }}
+      mt={ 6 }
+      overflow="hidden"
+    >
+      <Link
+        href={ linkUrl }
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={ handleClick }
+        position="absolute"
+        w="100%"
+        h="100%"
+        top={ 0 }
+        left={ 0 }
+        zIndex={ 1 }
+      />
+      <Box
+        as="iframe"
+        h="100%"
+        w="100%"
+        src={ contentUrl }
+        title="Marketplace banner"
+        onLoad={ handleIframeLoad }
+      />
+    </Skeleton>
+  );
+};
+
+export default IframeBanner;
diff --git a/ui/marketplace/ContractListButton.tsx b/ui/marketplace/ContractListButton.tsx
deleted file mode 100644
index 6a8bfce05e..0000000000
--- a/ui/marketplace/ContractListButton.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Link, Tooltip, Skeleton } from '@chakra-ui/react';
-import React from 'react';
-import type { MouseEvent } from 'react';
-
-import config from 'configs/app';
-import IconSvg from 'ui/shared/IconSvg';
-
-export enum ContractListButtonVariants {
-  ALL_CONTRACTS = 'all contracts',
-  VERIFIED_CONTRACTS = 'verified contracts',
-}
-
-const values = {
-  [ContractListButtonVariants.ALL_CONTRACTS]: {
-    icon: 'contracts' as const,
-    iconColor: 'gray.500',
-    tooltip: `Total number of contracts deployed by the protocol on ${ config.chain.name }`,
-  },
-  [ContractListButtonVariants.VERIFIED_CONTRACTS]: {
-    icon: 'contracts_verified' as const,
-    iconColor: 'green.500',
-    tooltip: `Number of verified contracts on ${ config.chain.name }`,
-  },
-};
-
-interface Props {
-  children: string | number;
-  onClick: (event: MouseEvent) => void;
-  variant: ContractListButtonVariants;
-  isLoading?: boolean;
-}
-
-const ContractListButton = ({ children, onClick, variant, isLoading }: Props) => {
-  const { icon, iconColor, tooltip } = values[variant];
-  return (
-    <Tooltip
-      label={ tooltip }
-      textAlign="center"
-      padding={ 2 }
-      isDisabled={ !tooltip }
-      openDelay={ 500 }
-      width="250px"
-    >
-      <Skeleton
-        isLoaded={ !isLoading }
-        display="inline-flex"
-        alignItems="center"
-        width={ isLoading ? '40px' : 'auto' }
-        height="30px"
-        borderRadius="base"
-      >
-        <Link
-          fontSize="sm"
-          onClick={ onClick }
-          fontWeight="500"
-          display="inline-flex"
-        >
-          { icon && <IconSvg name={ icon } boxSize={ 5 } color={ iconColor } mr={ 1 }/> }
-          { children }
-        </Link>
-      </Skeleton>
-    </Tooltip>
-  );
-};
-
-export default ContractListButton;
diff --git a/ui/marketplace/ContractListModal.tsx b/ui/marketplace/ContractListModal.tsx
index 090c73891e..ec13977ba3 100644
--- a/ui/marketplace/ContractListModal.tsx
+++ b/ui/marketplace/ContractListModal.tsx
@@ -37,7 +37,7 @@ const ContractListModal = ({ onClose, onBack, type, contracts }: Props) => {
     switch (type) {
       default:
       case ContractListTypes.ALL:
-        return contracts;
+        return contracts.sort((a) => a.isVerified ? -1 : 1);
       case ContractListTypes.ANALYZED:
         return contracts
           .filter((contract) => Boolean(contract.solidityScanReport))
diff --git a/ui/marketplace/ContractSecurityReport.tsx b/ui/marketplace/ContractSecurityReport.tsx
index 42e28b06dd..48aeb39b27 100644
--- a/ui/marketplace/ContractSecurityReport.tsx
+++ b/ui/marketplace/ContractSecurityReport.tsx
@@ -1,17 +1,21 @@
-import { Box, Text, Popover, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure } from '@chakra-ui/react';
+import { Box, Text, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, Icon } from '@chakra-ui/react';
 import React from 'react';
 
-import type { SolidityscanReport } from 'types/api/contract';
-
 import config from 'configs/app';
+// This icon doesn't work properly when it is in the sprite
+// Probably because of the gradient
+// eslint-disable-next-line no-restricted-imports
+import solidityScanIcon from 'icons/brands/solidity_scan.svg';
 import * as mixpanel from 'lib/mixpanel/index';
-import LinkExternal from 'ui/shared/LinkExternal';
+import type { SolidityScanReport } from 'lib/solidityScan/schema';
+import Popover from 'ui/shared/chakra/Popover';
+import LinkExternal from 'ui/shared/links/LinkExternal';
 import SolidityscanReportButton from 'ui/shared/solidityscanReport/SolidityscanReportButton';
 import SolidityscanReportDetails from 'ui/shared/solidityscanReport/SolidityscanReportDetails';
 import SolidityscanReportScore from 'ui/shared/solidityscanReport/SolidityscanReportScore';
 
 type Props = {
-  securityReport?: SolidityscanReport['scan_report'] | null;
+  securityReport?: SolidityScanReport['scan_report'] | null;
 }
 
 const ContractSecurityReport = ({ securityReport }: Props) => {
@@ -26,7 +30,7 @@ const ContractSecurityReport = ({ securityReport }: Props) => {
     return null;
   }
 
-  const url = securityReport?.scanner_reference_url;
+  const url = securityReport.scanner_reference_url;
   const {
     score_v2: securityScore,
     issue_severity_distribution: issueSeverityDistribution,
@@ -40,12 +44,17 @@ const ContractSecurityReport = ({ securityReport }: Props) => {
         <SolidityscanReportButton
           score={ parseFloat(securityScore) }
           onClick={ handleClick }
+          isActive={ isOpen }
         />
       </PopoverTrigger>
       <PopoverContent w={{ base: '100vw', lg: '328px' }}>
         <PopoverBody px="26px" py="20px" fontSize="sm">
           <Box mb={ 5 }>
-            The security score was derived from evaluating the smart contracts of a protocol on the { config.chain.name } network.
+            The security score was derived from evaluating the smart contracts of a protocol on the { config.chain.name } network  by { ' ' }
+            <Box>
+              <Icon as={ solidityScanIcon } mr={ 1 } w="23px" h="20px" display="inline-block" verticalAlign="middle"/>
+              <Text fontWeight={ 600 } display="inline-block">SolidityScan</Text>
+            </Box>
           </Box>
           <SolidityscanReportScore score={ parseFloat(securityScore) } mb={ 5 }/>
           { issueSeverityDistribution && totalIssues > 0 && (
diff --git a/ui/marketplace/EmptySearchResult.tsx b/ui/marketplace/EmptySearchResult.tsx
index d3ccf59701..171a68cc78 100644
--- a/ui/marketplace/EmptySearchResult.tsx
+++ b/ui/marketplace/EmptySearchResult.tsx
@@ -6,7 +6,7 @@ import config from 'configs/app';
 import { apos } from 'lib/html-entities';
 import EmptySearchResultDefault from 'ui/shared/EmptySearchResult';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkExternal from 'ui/shared/LinkExternal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
 
 const feature = config.features.marketplace;
 
@@ -20,15 +20,15 @@ const EmptySearchResult = ({ favoriteApps, selectedCategoryId }: Props) => (
     text={
       (selectedCategoryId === MarketplaceCategory.FAVORITES && !favoriteApps.length) ? (
         <>
-          You don{ apos }t have any favorite apps.
-          Click on the <IconSvg name="star_outline" w={ 4 } h={ 4 } mb={ -0.5 }/> icon on the app{ apos }s card to add it to Favorites.
+          You don{ apos }t have any favorite apps.<br/>
+          Click on the <IconSvg name="heart_outline" boxSize={ 5 } mb={ -1 } color="gray.400"/> icon on the app{ apos }s card to add it to Favorites.
         </>
       ) : (
         <>
           No matching apps found.
           { 'suggestIdeasFormUrl' in feature && (
             <>
-              { ' ' }Have a groundbreaking idea or app suggestion?{ ' ' }
+              { ' ' }Have a groundbreaking idea or app suggestion?<br/>
               <LinkExternal href={ feature.suggestIdeasFormUrl }>Share it with us</LinkExternal>
             </>
           ) }
diff --git a/ui/marketplace/FavoriteIcon.tsx b/ui/marketplace/FavoriteIcon.tsx
new file mode 100644
index 0000000000..a424f1a6e1
--- /dev/null
+++ b/ui/marketplace/FavoriteIcon.tsx
@@ -0,0 +1,24 @@
+import { useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+type Props = {
+  isFavorite: boolean;
+  color?: string;
+}
+
+const FavoriteIcon = ({ isFavorite, color }: Props) => {
+  const heartFilledColor = useColorModeValue('blue.600', 'blue.300');
+  const defaultColor = isFavorite ? heartFilledColor : (color || 'gray.400');
+
+  return (
+    <IconSvg
+      name={ isFavorite ? 'heart_filled' : 'heart_outline' }
+      color={ defaultColor }
+      boxSize={ 5 }
+    />
+  );
+};
+
+export default FavoriteIcon;
diff --git a/ui/marketplace/MarketplaceAppCard.tsx b/ui/marketplace/MarketplaceAppCard.tsx
index e387cb0809..a7d2385a1a 100644
--- a/ui/marketplace/MarketplaceAppCard.tsx
+++ b/ui/marketplace/MarketplaceAppCard.tsx
@@ -1,21 +1,33 @@
-import { Box, IconButton, Image, Link, LinkBox, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import { IconButton, Image, Link, LinkBox, Skeleton, useColorModeValue, chakra, Flex } from '@chakra-ui/react';
 import type { MouseEvent } from 'react';
 import React, { useCallback } from 'react';
 
-import type { MarketplaceAppPreview } from 'types/client/marketplace';
+import type { MarketplaceAppWithSecurityReport, ContractListTypes, AppRating } from 'types/client/marketplace';
 
-import * as mixpanel from 'lib/mixpanel/index';
-import IconSvg from 'ui/shared/IconSvg';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import isBrowser from 'lib/isBrowser';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 
+import AppSecurityReport from './AppSecurityReport';
+import FavoriteIcon from './FavoriteIcon';
 import MarketplaceAppCardLink from './MarketplaceAppCardLink';
 import MarketplaceAppIntegrationIcon from './MarketplaceAppIntegrationIcon';
+import Rating from './Rating/Rating';
+import type { RateFunction } from './Rating/useRatings';
 
-interface Props extends MarketplaceAppPreview {
+interface Props extends MarketplaceAppWithSecurityReport {
   onInfoClick: (id: string) => void;
   isFavorite: boolean;
   onFavoriteClick: (id: string, isFavorite: boolean, source: 'Discovery view') => void;
   isLoading: boolean;
   onAppClick: (event: MouseEvent, id: string) => void;
+  className?: string;
+  showContractList: (id: string, type: ContractListTypes) => void;
+  userRating?: AppRating;
+  rateApp: RateFunction;
+  isRatingSending: boolean;
+  isRatingLoading: boolean;
+  canRate: boolean | undefined;
 }
 
 const MarketplaceAppCard = ({
@@ -33,12 +45,21 @@ const MarketplaceAppCard = ({
   isLoading,
   internalWallet,
   onAppClick,
+  securityReport,
+  className,
+  showContractList,
+  rating,
+  userRating,
+  rateApp,
+  isRatingSending,
+  isRatingLoading,
+  canRate,
 }: Props) => {
+  const isMobile = useIsMobile();
   const categoriesLabel = categories.join(', ');
 
   const handleInfoClick = useCallback((event: MouseEvent) => {
     event.preventDefault();
-    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'More button', Info: id, Source: 'Discovery view' });
     onInfoClick(id);
   }, [ onInfoClick, id ]);
 
@@ -50,6 +71,7 @@ const MarketplaceAppCard = ({
 
   return (
     <LinkBox
+      className={ className }
       _hover={{
         boxShadow: isLoading ? 'none' : 'md',
       }}
@@ -57,119 +79,155 @@ const MarketplaceAppCard = ({
         boxShadow: isLoading ? 'none' : 'md',
       }}
       borderRadius="md"
-      height="100%"
-      padding={{ base: 3, sm: '20px' }}
+      padding={{ base: 3, md: '20px' }}
       border="1px"
       borderColor={ useColorModeValue('gray.200', 'gray.600') }
       role="group"
     >
-      <Box
-        display={{ base: 'grid', sm: 'flex' }}
+      <Flex
         flexDirection="column"
-        gridTemplateColumns={{ base: '64px 1fr', sm: '1fr' }}
-        gridTemplateRows={{ base: 'none', sm: 'none' }}
-        gridRowGap={{ base: 2, sm: 0 }}
-        gridColumnGap={{ base: 4, sm: 0 }}
         height="100%"
         alignContent="start"
+        gap={ 2 }
       >
-        <Skeleton
-          isLoaded={ !isLoading }
-          gridRow={{ base: '1 / 4', sm: 'auto' }}
-          marginBottom={ 4 }
-          w={{ base: '64px', sm: '96px' }}
-          h={{ base: '64px', sm: '96px' }}
-          display="flex"
-          alignItems="center"
-          justifyContent="center"
+        <Flex
+          display={{ base: 'flex', md: 'contents' }}
+          gap={ 4 }
         >
-          <Image
-            src={ isLoading ? undefined : logoUrl }
-            alt={ `${ title } app icon` }
-            borderRadius="8px"
-          />
-        </Skeleton>
+          <Skeleton
+            isLoaded={ !isLoading }
+            w={{ base: '64px', md: '96px' }}
+            h={{ base: '64px', md: '96px' }}
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            mb={{ base: 0, md: 2 }}
+          >
+            <Image
+              src={ isLoading ? undefined : logoUrl }
+              alt={ `${ title } app icon` }
+              borderRadius="8px"
+            />
+          </Skeleton>
 
-        <Skeleton
-          isLoaded={ !isLoading }
-          gridColumn={{ base: 2, sm: 'auto' }}
-          as="h3"
-          marginBottom={{ base: 0, sm: 2 }}
-          fontSize={{ base: 'sm', sm: 'lg' }}
-          fontWeight="semibold"
-          fontFamily="heading"
-          display="inline-block"
-        >
-          <MarketplaceAppCardLink
-            id={ id }
-            url={ url }
-            external={ external }
-            title={ title }
-            onClick={ onAppClick }
-          />
-          <MarketplaceAppIntegrationIcon external={ external } internalWallet={ internalWallet }/>
-        </Skeleton>
+          <Flex
+            display={{ base: 'flex', md: 'contents' }}
+            flexDirection="column"
+            gap={ 2 }
+            pt={ 1 }
+          >
+            <Skeleton
+              isLoaded={ !isLoading }
+              fontSize={{ base: 'sm', md: 'lg' }}
+              lineHeight={{ base: '20px', md: '28px' }}
+              paddingRight={{ base: '40px', md: 0 }}
+              fontWeight="semibold"
+              fontFamily="heading"
+              display="inline-block"
+            >
+              <MarketplaceAppCardLink
+                id={ id }
+                url={ url }
+                external={ external }
+                title={ title }
+                onClick={ onAppClick }
+              />
+              <MarketplaceAppIntegrationIcon external={ external } internalWallet={ internalWallet }/>
+            </Skeleton>
 
-        <Skeleton
-          isLoaded={ !isLoading }
-          marginBottom={{ base: 0, sm: 2 }}
-          color="text_secondary"
-          fontSize="xs"
-        >
-          <span>{ categoriesLabel }</span>
-        </Skeleton>
+            <Skeleton
+              isLoaded={ !isLoading }
+              color="text_secondary"
+              fontSize="xs"
+              lineHeight="16px"
+            >
+              <span>{ categoriesLabel }</span>
+            </Skeleton>
+          </Flex>
+        </Flex>
 
         <Skeleton
           isLoaded={ !isLoading }
-          fontSize={{ base: 'xs', sm: 'sm' }}
+          fontSize="sm"
           lineHeight="20px"
-          noOfLines={ 3 }
+          noOfLines={{ base: 2, md: 3 }}
         >
           { shortDescription }
         </Skeleton>
 
         { !isLoading && (
-          <Box
-            display="flex"
-            position={{ base: 'absolute', sm: 'relative' }}
-            bottom={{ base: 3, sm: 0 }}
-            left={{ base: 3, sm: 0 }}
-            marginTop={{ base: 0, sm: 'auto' }}
-            paddingTop={{ base: 0, sm: 4 }}
+          <Flex
+            alignItems="center"
+            justifyContent="space-between"
+            marginTop="auto"
           >
             <Link
-              fontSize={{ base: 'xs', sm: 'sm' }}
-              paddingRight={{ sm: 2 }}
+              fontSize="sm"
+              fontWeight="500"
+              paddingRight={{ md: 2 }}
               href="#"
               onClick={ handleInfoClick }
             >
               More info
             </Link>
-          </Box>
+            <Flex alignItems="center">
+              <Rating
+                appId={ id }
+                rating={ rating }
+                userRating={ userRating }
+                rate={ rateApp }
+                isSending={ isRatingSending }
+                isLoading={ isRatingLoading }
+                canRate={ canRate }
+                source="Discovery"
+              />
+              <IconButton
+                aria-label="Mark as favorite"
+                title="Mark as favorite"
+                variant="ghost"
+                colorScheme="gray"
+                w={{ base: 6, md: '30px' }}
+                h={{ base: 6, md: '30px' }}
+                onClick={ handleFavoriteClick }
+                icon={ <FavoriteIcon isFavorite={ isFavorite }/> }
+                ml={ 2 }
+              />
+              <CopyToClipboard
+                text={ isBrowser() ? window.location.origin + `/apps/${ id }` : '' }
+                icon="share"
+                size={ 4 }
+                variant="ghost"
+                colorScheme="gray"
+                w={{ base: 6, md: '30px' }}
+                h={{ base: 6, md: '30px' }}
+                color="gray.400"
+                _hover={{ color: 'gray.400' }}
+                ml={{ base: 1, md: 0 }}
+                display="inline-flex"
+                borderRadius="base"
+              />
+            </Flex>
+          </Flex>
         ) }
 
-        { !isLoading && (
-          <IconButton
-            display="block"
+        { securityReport && (
+          <AppSecurityReport
+            id={ id }
+            securityReport={ securityReport }
+            showContractList={ showContractList }
+            isLoading={ isLoading }
+            source="Discovery view"
+            popoverPlacement={ isMobile ? 'bottom-end' : 'left' }
             position="absolute"
-            right={{ base: 3, sm: '10px' }}
-            top={{ base: 3, sm: '14px' }}
-            aria-label="Mark as favorite"
-            title="Mark as favorite"
-            variant="ghost"
-            colorScheme="gray"
-            w={ 9 }
-            h={ 8 }
-            onClick={ handleFavoriteClick }
-            icon={ isFavorite ?
-              <IconSvg name="star_filled" w={ 5 } h={ 5 } color="yellow.400"/> :
-              <IconSvg name="star_outline" w={ 5 } h={ 5 } color="gray.400"/>
-            }
+            right={{ base: 3, md: 5 }}
+            top={{ base: '10px', md: 5 }}
+            border={ 0 }
+            padding={ 0 }
           />
         ) }
-      </Box>
+      </Flex>
     </LinkBox>
   );
 };
 
-export default React.memo(MarketplaceAppCard);
+export default React.memo(chakra(MarketplaceAppCard));
diff --git a/ui/marketplace/MarketplaceAppInfo.pw.tsx b/ui/marketplace/MarketplaceAppInfo.pw.tsx
index 3419aaa5ec..17e686ab33 100644
--- a/ui/marketplace/MarketplaceAppInfo.pw.tsx
+++ b/ui/marketplace/MarketplaceAppInfo.pw.tsx
@@ -1,35 +1,22 @@
-import { test, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { apps as appsMock } from 'mocks/apps/apps';
-import TestApp from 'playwright/TestApp';
+import { test, expect, devices } from 'playwright/lib';
 
 import MarketplaceAppInfo from './MarketplaceAppInfo';
 
-test('base view +@dark-mode', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <MarketplaceAppInfo data={ appsMock[0] }/>
-    </TestApp>,
-  );
-
+test('base view +@dark-mode', async({ render, page }) => {
+  await render(<MarketplaceAppInfo data={ appsMock[0] }/>);
   await page.getByText('Info').click();
-
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 500, height: 400 } });
 });
 
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  test('base view', async({ mount, page }) => {
-    await mount(
-      <TestApp>
-        <MarketplaceAppInfo data={ appsMock[0] }/>
-      </TestApp>,
-    );
-
+  test('base view', async({ render, page }) => {
+    await render(<MarketplaceAppInfo data={ appsMock[0] }/>);
     await page.getByLabel('Show project info').click();
-
     await expect(page).toHaveScreenshot();
   });
 });
diff --git a/ui/marketplace/MarketplaceAppInfo.tsx b/ui/marketplace/MarketplaceAppInfo.tsx
index 00646e3291..9641056c3a 100644
--- a/ui/marketplace/MarketplaceAppInfo.tsx
+++ b/ui/marketplace/MarketplaceAppInfo.tsx
@@ -1,5 +1,5 @@
 import {
-  Popover, PopoverTrigger, PopoverContent, PopoverBody,
+  PopoverTrigger, PopoverContent, PopoverBody,
   Modal, ModalContent, ModalCloseButton, useDisclosure,
 } from '@chakra-ui/react';
 import React from 'react';
@@ -7,6 +7,7 @@ import React from 'react';
 import type { MarketplaceAppOverview } from 'types/client/marketplace';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
+import Popover from 'ui/shared/chakra/Popover';
 
 import Content from './MarketplaceAppInfo/Content';
 import TriggerButton from './MarketplaceAppInfo/TriggerButton';
@@ -36,7 +37,7 @@ const MarketplaceAppInfo = ({ data }: Props) => {
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
       <PopoverTrigger>
-        <TriggerButton onClick={ onToggle }/>
+        <TriggerButton onClick={ onToggle } isActive={ isOpen }/>
       </PopoverTrigger>
       <PopoverContent w="500px">
         <PopoverBody px={ 6 } py={ 5 }>
diff --git a/ui/marketplace/MarketplaceAppInfo/Content.tsx b/ui/marketplace/MarketplaceAppInfo/Content.tsx
index 04b55b84b4..778d421237 100644
--- a/ui/marketplace/MarketplaceAppInfo/Content.tsx
+++ b/ui/marketplace/MarketplaceAppInfo/Content.tsx
@@ -13,7 +13,7 @@ interface Props {
 
 const SOCIAL_LINKS: Array<Omit<SocialLinkProps, 'href'>> = [
   { field: 'github', icon: 'social/github_filled', title: 'Github' },
-  { field: 'twitter', icon: 'social/twitter_filled', title: 'Twitter' },
+  { field: 'twitter', icon: 'social/twitter_filled', title: 'X (ex-Twitter)' },
   { field: 'telegram', icon: 'social/telegram_filled', title: 'Telegram' },
   { field: 'discord', icon: 'social/discord_filled', title: 'Discord' },
 ];
diff --git a/ui/marketplace/MarketplaceAppInfo/TriggerButton.tsx b/ui/marketplace/MarketplaceAppInfo/TriggerButton.tsx
index 1f3f6371da..172cb4f32a 100644
--- a/ui/marketplace/MarketplaceAppInfo/TriggerButton.tsx
+++ b/ui/marketplace/MarketplaceAppInfo/TriggerButton.tsx
@@ -6,9 +6,10 @@ import IconSvg from 'ui/shared/IconSvg';
 interface Props {
   onClick: () => void;
   onlyIcon?: boolean;
+  isActive?: boolean;
 }
 
-const TriggerButton = ({ onClick, onlyIcon }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+const TriggerButton = ({ onClick, onlyIcon, isActive }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
   return (
     <Button
       ref={ ref }
@@ -16,6 +17,7 @@ const TriggerButton = ({ onClick, onlyIcon }: Props, ref: React.ForwardedRef<HTM
       variant="outline"
       colorScheme="gray"
       onClick={ onClick }
+      isActive={ isActive }
       aria-label="Show project info"
       fontWeight={ 500 }
       px={ onlyIcon ? 1 : 2 }
diff --git a/ui/marketplace/MarketplaceAppIntegrationIcon.tsx b/ui/marketplace/MarketplaceAppIntegrationIcon.tsx
index 8ec443c35d..378c7c0c95 100644
--- a/ui/marketplace/MarketplaceAppIntegrationIcon.tsx
+++ b/ui/marketplace/MarketplaceAppIntegrationIcon.tsx
@@ -10,21 +10,24 @@ type Props = {
 }
 
 const MarketplaceAppIntegrationIcon = ({ external, internalWallet }: Props) => {
-  const [ icon, iconColor, text ] = React.useMemo(() => {
+  const [ icon, iconColor, text, boxSize ] = React.useMemo(() => {
     let icon: IconName = 'integration/partial';
     let color = 'gray.400';
     let text = 'This app opens in Blockscout without Blockscout wallet functionality. Use your external web3 wallet to connect directly to this application';
+    let boxSize = 5;
 
     if (external) {
-      icon = 'arrows/north-east';
+      icon = 'link_external';
+      color = 'icon_link_external';
       text = 'This app opens in a separate tab';
+      boxSize = 4;
     } else if (internalWallet) {
       icon = 'integration/full';
       color = 'green.500';
       text = 'This app opens in Blockscout and your Blockscout wallet connects automatically';
     }
 
-    return [ icon, color, text ];
+    return [ icon, color, text, boxSize ];
   }, [ external, internalWallet ]);
 
   return (
@@ -33,16 +36,16 @@ const MarketplaceAppIntegrationIcon = ({ external, internalWallet }: Props) => {
       textAlign="center"
       padding={ 2 }
       openDelay={ 300 }
-      maxW={ 400 }
+      maxW={{ base: 'calc(100vw - 8px)', lg: '400px' }}
     >
       <IconSvg
         name={ icon }
-        boxSize={ 5 }
+        boxSize={ boxSize }
         color={ iconColor }
         position="relative"
         cursor="pointer"
         verticalAlign="middle"
-        marginBottom={ 1 }
+        mb={{ base: 0, md: 1 }}
       />
     </Tooltip>
   );
diff --git a/ui/marketplace/MarketplaceAppModal.pw.tsx b/ui/marketplace/MarketplaceAppModal.pw.tsx
index ba6aca1233..6afe067d25 100644
--- a/ui/marketplace/MarketplaceAppModal.pw.tsx
+++ b/ui/marketplace/MarketplaceAppModal.pw.tsx
@@ -1,10 +1,10 @@
-import { test, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import type { MarketplaceAppWithSecurityReport } from 'types/client/marketplace';
 
 import { apps as appsMock } from 'mocks/apps/apps';
-import TestApp from 'playwright/TestApp';
+import { securityReports as securityReportsMock } from 'mocks/apps/securityReports';
+import { test, expect, devices } from 'playwright/lib';
 
 import MarketplaceAppModal from './MarketplaceAppModal';
 
@@ -12,24 +12,30 @@ const props = {
   onClose: () => {},
   onFavoriteClick: () => {},
   showContractList: () => {},
-  data: appsMock[0] as MarketplaceAppWithSecurityReport,
+  data: {
+    ...appsMock[0],
+    securityReport: securityReportsMock[0].chainsData['1'],
+    rating: {
+      recordId: 'test',
+      value: 4.3,
+    },
+  } as MarketplaceAppWithSecurityReport,
   isFavorite: false,
+  userRating: undefined,
+  rateApp: () => {},
+  isRatingSending: false,
+  isRatingLoading: false,
+  canRate: undefined,
 };
 
-const testFn: Parameters<typeof test>[1] = async({ mount, page }) => {
-  await page.route(appsMock[0].logo, (route) =>
-    route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    }),
-  );
-
-  await mount(
-    <TestApp>
-      <MarketplaceAppModal { ...props }/>
-    </TestApp>,
-  );
-
+const testFn: Parameters<typeof test>[1] = async({ render, page, mockAssetResponse, mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY', 'test' ],
+    [ 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID', 'test' ],
+  ]);
+  await mockAssetResponse(appsMock[0].logo, './playwright/mocks/image_s.jpg');
+  await render(<MarketplaceAppModal { ...props }/>);
+  await page.getByText('Launch app').focus();
   await expect(page).toHaveScreenshot();
 };
 
diff --git a/ui/marketplace/MarketplaceAppModal.tsx b/ui/marketplace/MarketplaceAppModal.tsx
index 10fafef03e..430766b1ac 100644
--- a/ui/marketplace/MarketplaceAppModal.tsx
+++ b/ui/marketplace/MarketplaceAppModal.tsx
@@ -1,22 +1,29 @@
 import {
-  Box, Flex, Heading, IconButton, Image, Link, List, Modal, ModalBody,
+  Box, Flex, Heading, IconButton, Image, Link, Modal, ModalBody,
   ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, Tag, Text, useColorModeValue,
 } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 
-import type { MarketplaceAppWithSecurityReport } from 'types/client/marketplace';
+import type { MarketplaceAppWithSecurityReport, AppRating } from 'types/client/marketplace';
 import { ContractListTypes } from 'types/client/marketplace';
 
-import useFeatureValue from 'lib/growthbook/useFeatureValue';
+import config from 'configs/app';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { nbsp } from 'lib/html-entities';
+import isBrowser from 'lib/isBrowser';
 import * as mixpanel from 'lib/mixpanel/index';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
 
 import AppSecurityReport from './AppSecurityReport';
-import ContractListButton, { ContractListButtonVariants } from './ContractListButton';
+import FavoriteIcon from './FavoriteIcon';
 import MarketplaceAppModalLink from './MarketplaceAppModalLink';
+import Rating from './Rating/Rating';
+import type { RateFunction } from './Rating/useRatings';
+
+const feature = config.features.marketplace;
+const isRatingEnabled = feature.isEnabled && feature.rating;
 
 type Props = {
   onClose: () => void;
@@ -24,6 +31,11 @@ type Props = {
   onFavoriteClick: (id: string, isFavorite: boolean, source: 'App modal') => void;
   data: MarketplaceAppWithSecurityReport;
   showContractList: (id: string, type: ContractListTypes, hasPreviousStep: boolean) => void;
+  userRating?: AppRating;
+  rateApp: RateFunction;
+  isRatingSending: boolean;
+  isRatingLoading: boolean;
+  canRate: boolean | undefined;
 }
 
 const MarketplaceAppModal = ({
@@ -32,10 +44,12 @@ const MarketplaceAppModal = ({
   onFavoriteClick,
   data,
   showContractList: showContractListProp,
+  userRating,
+  rateApp,
+  isRatingSending,
+  isRatingLoading,
+  canRate,
 }: Props) => {
-  const { value: isExperiment } = useFeatureValue('security_score_exp', false);
-  const starOutlineIconColor = useColorModeValue('gray.600', 'gray.300');
-
   const {
     id,
     title,
@@ -47,28 +61,34 @@ const MarketplaceAppModal = ({
     github,
     telegram,
     twitter,
+    discord,
     logo,
     logoDarkMode,
     categories,
     securityReport,
+    rating,
   } = data;
 
   const socialLinks = [
     telegram ? {
-      icon: 'social/telega' as IconName,
+      icon: 'social/telegram_filled' as IconName,
       url: telegram,
     } : null,
     twitter ? {
-      icon: 'social/tweet' as IconName,
+      icon: 'social/twitter_filled' as IconName,
       url: twitter,
     } : null,
+    discord ? {
+      icon: 'social/discord_filled' as IconName,
+      url: discord,
+    } : null,
   ].filter(Boolean);
 
   if (github) {
     if (Array.isArray(github)) {
-      github.forEach((url) => socialLinks.push({ icon: 'social/git', url }));
+      github.forEach((url) => socialLinks.push({ icon: 'social/github_filled', url }));
     } else {
-      socialLinks.push({ icon: 'social/git', url: github });
+      socialLinks.push({ icon: 'social/github_filled', url: github });
     }
   }
 
@@ -76,28 +96,27 @@ const MarketplaceAppModal = ({
     onFavoriteClick(id, isFavorite, 'App modal');
   }, [ onFavoriteClick, id, isFavorite ]);
 
-  const showContractList = useCallback((type: ContractListTypes) => {
+  const showContractList = useCallback((id: string, type: ContractListTypes) => {
     onClose();
     showContractListProp(id, type, true);
-  }, [ onClose, showContractListProp, id ]);
+  }, [ onClose, showContractListProp ]);
 
   const showAllContracts = React.useCallback(() => {
     mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Total contracts', Info: id, Source: 'App modal' });
-    showContractList(ContractListTypes.ALL);
+    showContractList(id, ContractListTypes.ALL);
   }, [ showContractList, id ]);
 
-  const showVerifiedContracts = React.useCallback(() => {
-    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Verified contracts', Info: id, Source: 'App modal' });
-    showContractList(ContractListTypes.VERIFIED);
-  }, [ showContractList, id ]);
-
-  const showAnalyzedContracts = React.useCallback(() => {
-    showContractList(ContractListTypes.ANALYZED);
-  }, [ showContractList ]);
-
   const isMobile = useIsMobile();
   const logoUrl = useColorModeValue(logo, logoDarkMode || logo);
 
+  function getHostname(url: string | undefined) {
+    try {
+      return new URL(url || '').hostname;
+    } catch (err) {}
+  }
+
+  const iconColor = useColorModeValue('blue.600', 'gray.400');
+
   return (
     <Modal
       isOpen={ Boolean(data.id) }
@@ -111,30 +130,31 @@ const MarketplaceAppModal = ({
         <Box
           display="grid"
           gridTemplateColumns={{ base: 'auto 1fr' }}
-          paddingRight={{ sm: 12 }}
-          marginBottom={{ base: 6, sm: 8 }}
+          paddingRight={{ md: 12 }}
+          marginBottom={{ base: 6, md: 8 }}
         >
           <Flex
             alignItems="center"
             justifyContent="center"
-            w={{ base: '72px', sm: '144px' }}
-            h={{ base: '72px', sm: '144px' }}
-            marginRight={{ base: 6, sm: 8 }}
-            gridRow={{ base: '1 / 3', sm: '1 / 4' }}
+            w={{ base: '72px', md: '144px' }}
+            h={{ base: '72px', md: '144px' }}
+            marginRight={{ base: 6, md: 8 }}
+            gridRow={{ base: '1 / 3', md: '1 / 5' }}
           >
             <Image
               src={ logoUrl }
               alt={ `${ title } app icon` }
+              borderRadius="md"
             />
           </Flex>
 
           <Heading
             as="h2"
             gridColumn={ 2 }
-            fontSize={{ base: '2xl', sm: '3xl' }}
+            fontSize={{ base: '2xl', md: '32px' }}
             fontWeight="medium"
-            lineHeight={ 1 }
-            color="blue.600"
+            lineHeight={{ md: 10 }}
+            mb={{ md: 2 }}
           >
             { title }
           </Heading>
@@ -142,19 +162,40 @@ const MarketplaceAppModal = ({
           <Text
             variant="secondary"
             gridColumn={ 2 }
-            fontSize="sm"
+            fontSize={{ base: 'sm', md: 'md' }}
             fontWeight="normal"
-            lineHeight={ 1 }
+            lineHeight={{ md: 6 }}
           >
             By{ nbsp }{ author }
           </Text>
 
+          { isRatingEnabled && (
+            <Box
+              gridColumn={{ base: '1 / 3', md: 2 }}
+              marginTop={{ base: 6, md: 3 }}
+              py={{ base: 0, md: 1.5 }}
+              width="fit-content"
+            >
+              <Rating
+                appId={ id }
+                rating={ rating }
+                userRating={ userRating }
+                rate={ rateApp }
+                isSending={ isRatingSending }
+                isLoading={ isRatingLoading }
+                fullView
+                canRate={ canRate }
+                source="App modal"
+              />
+            </Box>
+          ) }
+
           <Box
-            gridColumn={{ base: '1 / 3', sm: 2 }}
-            marginTop={{ base: 6, sm: 0 }}
+            gridColumn={{ base: '1 / 3', md: 2 }}
+            marginTop={{ base: 6, md: 3 }}
           >
             <Flex flexWrap="wrap" gap={ 6 }>
-              <Flex width={{ base: '100%', sm: 'auto' }}>
+              <Flex width={{ base: '100%', md: 'auto' }}>
                 <MarketplaceAppModalLink
                   id={ data.id }
                   url={ url }
@@ -169,131 +210,134 @@ const MarketplaceAppModal = ({
                   colorScheme="gray"
                   w={ 9 }
                   h={ 8 }
+                  flexShrink={ 0 }
                   onClick={ handleFavoriteClick }
-                  icon={ isFavorite ?
-                    <IconSvg name="star_filled" w={ 5 } h={ 5 } color="yellow.400"/> :
-                    <IconSvg name="star_outline" w={ 5 } h={ 5 } color={ starOutlineIconColor }/> }
+                  icon={ <FavoriteIcon isFavorite={ isFavorite } color={ iconColor }/> }
                 />
-              </Flex>
 
-              { (isExperiment && securityReport) && (
-                <Flex alignItems="center" gap={ 3 }>
-                  <AppSecurityReport
-                    id={ id }
-                    securityReport={ securityReport }
-                    showContractList={ showAnalyzedContracts }
-                    source="App modal"
-                  />
-                  <ContractListButton
-                    onClick={ showAllContracts }
-                    variant={ ContractListButtonVariants.ALL_CONTRACTS }
-                  >
-                    { securityReport.overallInfo.totalContractsNumber }
-                  </ContractListButton>
-                  <ContractListButton
-                    onClick={ showVerifiedContracts }
-                    variant={ ContractListButtonVariants.VERIFIED_CONTRACTS }
-                  >
-                    { securityReport.overallInfo.verifiedNumber }
-                  </ContractListButton>
-                </Flex>
-              ) }
+                <CopyToClipboard
+                  text={ isBrowser() ? window.location.origin + `/apps/${ id }` : '' }
+                  icon="share"
+                  size={ 4 }
+                  variant="outline"
+                  colorScheme="gray"
+                  w={ 9 }
+                  h={ 8 }
+                  color={ iconColor }
+                  _hover={{ color: iconColor }}
+                  display="inline-flex"
+                  borderRadius="base"
+                />
+              </Flex>
             </Flex>
           </Box>
         </Box>
 
         <ModalCloseButton/>
 
-        <ModalBody>
-          <Heading
-            as="h3"
-            fontSize="2xl"
-            marginBottom={ 4 }
-          >
-            Overview
-          </Heading>
+        <ModalBody mb={ 6 }>
+          { securityReport && (
+            <Flex
+              direction={{ base: 'column', md: 'row' }}
+              justifyContent={{ base: 'flex-start', md: 'space-between' }}
+              gap={ 3 }
+              fontSize="sm"
+              mb={ 6 }
+            >
+              <Flex alignItems="center" gap={ 2 } flexWrap="wrap">
+                <IconSvg name="contracts/verified_many" boxSize={ 5 } color="green.500"/>
+                <Text>Verified contracts</Text>
+                <Text fontWeight="500">
+                  { securityReport?.overallInfo.verifiedNumber ?? 0 } of { securityReport?.overallInfo.totalContractsNumber ?? 0 }
+                </Text>
+                <Link onClick={ showAllContracts } ml={ 1 }>
+                  View all contracts
+                </Link>
+              </Flex>
+              <Flex alignItems="center" gap={ 2 }>
+                <Text>Security level</Text>
+                <AppSecurityReport
+                  id={ id }
+                  securityReport={ securityReport }
+                  showContractList={ showContractList }
+                  source="App modal"
+                  popoverPlacement={ isMobile ? 'bottom-start' : 'left' }
+                />
+              </Flex>
+            </Flex>
+          ) }
+          <Text>{ description }</Text>
+        </ModalBody>
 
-          <Box marginBottom={ 2 }>
+        <ModalFooter
+          display="flex"
+          flexDirection={{ base: 'column', md: 'row' }}
+          justifyContent={{ base: 'flex-start', md: 'space-between' }}
+          alignItems={{ base: 'flex-start', md: 'center' }}
+          gap={ 3 }
+        >
+          <Flex gap={ 2 }>
             { categories.map((category) => (
               <Tag
                 colorScheme="blue"
-                marginRight={ 2 }
-                marginBottom={ 2 }
                 key={ category }
               >
                 { category }
               </Tag>
             )) }
-          </Box>
-
-          <Text>{ description }</Text>
-        </ModalBody>
-
-        <ModalFooter
-          display="flex"
-          flexDirection={{ base: 'column', sm: 'row' }}
-          alignItems={{ base: 'flex-start', sm: 'center' }}
-        >
-          { site && (
-            <Link
-              isExternal
-              href={ site }
-              display="flex"
-              alignItems="center"
-              paddingRight={{ sm: 2 }}
-              marginBottom={{ base: 3, sm: 0 }}
-              maxW="100%"
-              overflow="hidden"
-            >
-              <IconSvg
-                name="link"
-                display="inline"
-                verticalAlign="baseline"
-                boxSize="18px"
-                marginRight={ 2 }
-              />
+          </Flex>
 
-              <Text
-                color="inherit"
-                whiteSpace="nowrap"
-                overflow="hidden"
-                textOverflow="ellipsis"
+          <Flex alignItems="center" gap={ 3 }>
+            { site && (
+              <Link
+                isExternal
+                href={ site }
+                display="flex"
+                alignItems="center"
+                fontSize="sm"
               >
-                { site }
-              </Text>
-            </Link>
-          ) }
+                <IconSvg
+                  name="link"
+                  display="inline"
+                  verticalAlign="baseline"
+                  boxSize="18px"
+                  marginRight={ 2 }
+                />
 
-          { socialLinks.length > 0 && (
-            <List
-              marginLeft={{ sm: 'auto' }}
-              display="grid"
-              gridAutoFlow="column"
-              columnGap={ 2 }
-            >
-              { socialLinks.map(({ icon, url }) => (
-                <Link
-                  aria-label={ `Link to ${ url }` }
-                  title={ url }
-                  key={ url }
-                  href={ url }
-                  display="flex"
-                  alignItems="center"
-                  justifyContent="center"
-                  isExternal
-                  w={ 10 }
-                  h={ 10 }
+                <Text
+                  color="inherit"
+                  whiteSpace="nowrap"
+                  overflow="hidden"
+                  textOverflow="ellipsis"
                 >
-                  <IconSvg
-                    name={ icon }
-                    w="20px"
-                    h="20px"
-                    display="block"
-                  />
-                </Link>
-              )) }
-            </List>
-          ) }
+                  { getHostname(site) }
+                </Text>
+              </Link>
+            ) }
+
+            { socialLinks.map(({ icon, url }) => (
+              <Link
+                aria-label={ `Link to ${ url }` }
+                title={ url }
+                key={ url }
+                href={ url }
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+                isExternal
+                w={ 5 }
+                h={ 5 }
+              >
+                <IconSvg
+                  name={ icon }
+                  w="20px"
+                  h="20px"
+                  display="block"
+                  color="text_secondary"
+                />
+              </Link>
+            )) }
+          </Flex>
         </ModalFooter>
       </ModalContent>
     </Modal>
diff --git a/ui/marketplace/MarketplaceAppTopBar.tsx b/ui/marketplace/MarketplaceAppTopBar.tsx
index 0b82faffeb..8f9c233620 100644
--- a/ui/marketplace/MarketplaceAppTopBar.tsx
+++ b/ui/marketplace/MarketplaceAppTopBar.tsx
@@ -1,35 +1,39 @@
-import { chakra, Flex, Tooltip, Skeleton, useBoolean, Box } from '@chakra-ui/react';
+import { chakra, Flex, Tooltip, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import type { MarketplaceAppOverview, MarketplaceAppSecurityReport } from 'types/client/marketplace';
-import { ContractListTypes } from 'types/client/marketplace';
+import type { MarketplaceAppOverview, MarketplaceAppSecurityReport, ContractListTypes } from 'types/client/marketplace';
 
 import { route } from 'nextjs-routes';
 
+import config from 'configs/app';
 import { useAppContext } from 'lib/contexts/app';
-import useFeatureValue from 'lib/growthbook/useFeatureValue';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkExternal from 'ui/shared/LinkExternal';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
+import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
+import WalletMenuDesktop from 'ui/snippets/walletMenu/WalletMenuDesktop';
 
 import AppSecurityReport from './AppSecurityReport';
 import ContractListModal from './ContractListModal';
-import MarketplaceAppAlert from './MarketplaceAppAlert';
 import MarketplaceAppInfo from './MarketplaceAppInfo';
+import Rating from './Rating/Rating';
+import useRatings from './Rating/useRatings';
 
 type Props = {
+  appId: string;
   data: MarketplaceAppOverview | undefined;
   isLoading: boolean;
-  isWalletConnected: boolean;
   securityReport?: MarketplaceAppSecurityReport;
 }
 
-const MarketplaceAppTopBar = ({ data, isLoading, isWalletConnected, securityReport }: Props) => {
-  const [ showContractList, setShowContractList ] = useBoolean(false);
+const MarketplaceAppTopBar = ({ appId, data, isLoading, securityReport }: Props) => {
+  const [ contractListType, setContractListType ] = React.useState<ContractListTypes>();
   const appProps = useAppContext();
   const isMobile = useIsMobile();
-  const { value: isExperiment } = useFeatureValue('security_score_exp', false);
+
+  const { ratings, userRatings, rateApp, isRatingSending, isRatingLoading, canRate } = useRatings();
 
   const goBackUrl = React.useMemo(() => {
     if (appProps.referrer && appProps.referrer.includes('/apps') && !appProps.referrer.includes('/apps/')) {
@@ -44,34 +48,19 @@ const MarketplaceAppTopBar = ({ data, isLoading, isWalletConnected, securityRepo
     } catch (err) {}
   }
 
+  const showContractList = React.useCallback((id: string, type: ContractListTypes) => setContractListType(type), []);
+  const hideContractList = React.useCallback(() => setContractListType(undefined), []);
+
   return (
     <>
-      <Flex alignItems="center" flexWrap="wrap" mb={{ base: 6, md: 2 }} rowGap={ 3 } columnGap={ 2 }>
-        <Tooltip label="Back to dApps list" order={ 1 }>
-          <LinkInternal display="inline-flex" href={ goBackUrl } h="32px" isLoading={ isLoading }>
+      <Flex alignItems="center" mb={{ base: 3, md: 2 }} rowGap={ 3 } columnGap={ 2 }>
+        { !isMobile && <NetworkLogo isCollapsed/> }
+        <Tooltip label="Back to dApps list">
+          <LinkInternal display="inline-flex" href={ goBackUrl } h="32px" isLoading={ isLoading } ml={ isMobile ? 0 : 4 }>
             <IconSvg name="arrows/east" boxSize={ 6 } transform="rotate(180deg)" margin="auto" color="gray.400"/>
           </LinkInternal>
         </Tooltip>
-        <Skeleton width={{ base: '100%', md: 'auto' }} order={{ base: 5, md: 2 }} isLoaded={ !isLoading }>
-          <MarketplaceAppAlert internalWallet={ data?.internalWallet } isWalletConnected={ isWalletConnected }/>
-        </Skeleton>
-        <Skeleton order={{ base: 2, md: 3 }} isLoaded={ !isLoading }>
-          <MarketplaceAppInfo data={ data }/>
-        </Skeleton>
-        { (isExperiment && (securityReport || isLoading)) && (
-          <Box order={{ base: 3, md: 4 }}>
-            <AppSecurityReport
-              id={ data?.id || '' }
-              securityReport={ securityReport }
-              showContractList={ setShowContractList.on }
-              isLoading={ isLoading }
-              onlyIcon={ isMobile }
-              source="App page"
-            />
-          </Box>
-        ) }
         <LinkExternal
-          order={{ base: 4, md: 5 }}
           href={ data?.url }
           variant="subtle"
           fontSize="sm"
@@ -85,12 +74,41 @@ const MarketplaceAppTopBar = ({ data, isLoading, isWalletConnected, securityRepo
             { getHostname(data?.url) }
           </chakra.span>
         </LinkExternal>
+        <Skeleton isLoaded={ !isLoading }>
+          <MarketplaceAppInfo data={ data }/>
+        </Skeleton>
+        { (securityReport || isLoading) && (
+          <AppSecurityReport
+            id={ data?.id || '' }
+            securityReport={ securityReport }
+            showContractList={ showContractList }
+            isLoading={ isLoading }
+            onlyIcon={ isMobile }
+            source="App page"
+          />
+        ) }
+        <Rating
+          appId={ appId }
+          rating={ ratings[appId] }
+          userRating={ userRatings[appId] }
+          rate={ rateApp }
+          isSending={ isRatingSending }
+          isLoading={ isRatingLoading }
+          canRate={ canRate }
+          source="App page"
+        />
+        { !isMobile && (
+          <Flex flex="1" justifyContent="flex-end">
+            { config.features.account.isEnabled && <ProfileMenuDesktop boxSize="32px" fallbackIconSize={ 16 }/> }
+            { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop size="sm"/> }
+          </Flex>
+        ) }
       </Flex>
-      { showContractList && (
+      { contractListType && (
         <ContractListModal
-          type={ ContractListTypes.ANALYZED }
+          type={ contractListType }
           contracts={ securityReport?.contractsData }
-          onClose={ setShowContractList.off }
+          onClose={ hideContractList }
         />
       ) }
     </>
diff --git a/ui/marketplace/MarketplaceList.tsx b/ui/marketplace/MarketplaceList.tsx
index e9fb933919..0d4706c5c3 100644
--- a/ui/marketplace/MarketplaceList.tsx
+++ b/ui/marketplace/MarketplaceList.tsx
@@ -1,52 +1,85 @@
-import { Grid } from '@chakra-ui/react';
-import React from 'react';
+import { Grid, Box } from '@chakra-ui/react';
+import React, { useCallback } from 'react';
 import type { MouseEvent } from 'react';
 
-import type { MarketplaceAppPreview } from 'types/client/marketplace';
+import type { MarketplaceAppWithSecurityReport, ContractListTypes, AppRating } from 'types/client/marketplace';
+
+import useLazyRenderedList from 'lib/hooks/useLazyRenderedList';
+import * as mixpanel from 'lib/mixpanel/index';
 
 import EmptySearchResult from './EmptySearchResult';
 import MarketplaceAppCard from './MarketplaceAppCard';
+import type { RateFunction } from './Rating/useRatings';
 
 type Props = {
-  apps: Array<MarketplaceAppPreview>;
+  apps: Array<MarketplaceAppWithSecurityReport>;
   showAppInfo: (id: string) => void;
   favoriteApps: Array<string>;
   onFavoriteClick: (id: string, isFavorite: boolean, source: 'Discovery view') => void;
   isLoading: boolean;
   selectedCategoryId?: string;
   onAppClick: (event: MouseEvent, id: string) => void;
+  showContractList: (id: string, type: ContractListTypes) => void;
+  userRatings: Record<string, AppRating>;
+  rateApp: RateFunction;
+  isRatingSending: boolean;
+  isRatingLoading: boolean;
+  canRate: boolean | undefined;
 }
 
-const MarketplaceList = ({ apps, showAppInfo, favoriteApps, onFavoriteClick, isLoading, selectedCategoryId, onAppClick }: Props) => {
+const MarketplaceList = ({
+  apps, showAppInfo, favoriteApps, onFavoriteClick, isLoading, selectedCategoryId,
+  onAppClick, showContractList, userRatings, rateApp, isRatingSending, isRatingLoading, canRate,
+}: Props) => {
+  const { cutRef, renderedItemsNum } = useLazyRenderedList(apps, !isLoading, 16);
+
+  const handleInfoClick = useCallback((id: string) => {
+    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'More button', Info: id, Source: 'Discovery view' });
+    showAppInfo(id);
+  }, [ showAppInfo ]);
+
+  const handleFavoriteClick = useCallback((id: string, isFavorite: boolean) => {
+    onFavoriteClick(id, isFavorite, 'Discovery view');
+  }, [ onFavoriteClick ]);
+
   return apps.length > 0 ? (
-    <Grid
-      templateColumns={{
-        sm: 'repeat(auto-fill, minmax(178px, 1fr))',
-        lg: 'repeat(auto-fill, minmax(260px, 1fr))',
-      }}
-      autoRows="1fr"
-      gap={{ base: '16px', sm: '24px' }}
-    >
-      { apps.map((app, index) => (
-        <MarketplaceAppCard
-          key={ app.id + (isLoading ? index : '') }
-          onInfoClick={ showAppInfo }
-          id={ app.id }
-          external={ app.external }
-          url={ app.url }
-          title={ app.title }
-          logo={ app.logo }
-          logoDarkMode={ app.logoDarkMode }
-          shortDescription={ app.shortDescription }
-          categories={ app.categories }
-          isFavorite={ favoriteApps.includes(app.id) }
-          onFavoriteClick={ onFavoriteClick }
-          isLoading={ isLoading }
-          internalWallet={ app.internalWallet }
-          onAppClick={ onAppClick }
-        />
-      )) }
-    </Grid>
+    <>
+      <Grid
+        templateColumns={{ md: 'repeat(auto-fill, minmax(270px, 1fr))' }}
+        autoRows="1fr"
+        gap={{ base: '16px', md: '24px' }}
+        marginTop={{ base: 0, lg: 3 }}
+      >
+        { apps.slice(0, renderedItemsNum).map((app, index) => (
+          <MarketplaceAppCard
+            key={ app.id + (isLoading ? index : '') }
+            onInfoClick={ handleInfoClick }
+            id={ app.id }
+            external={ app.external }
+            url={ app.url }
+            title={ app.title }
+            logo={ app.logo }
+            logoDarkMode={ app.logoDarkMode }
+            shortDescription={ app.shortDescription }
+            categories={ app.categories }
+            isFavorite={ favoriteApps.includes(app.id) }
+            onFavoriteClick={ handleFavoriteClick }
+            isLoading={ isLoading }
+            internalWallet={ app.internalWallet }
+            onAppClick={ onAppClick }
+            securityReport={ app.securityReport }
+            showContractList={ showContractList }
+            rating={ app.rating }
+            userRating={ userRatings[app.id] }
+            rateApp={ rateApp }
+            isRatingSending={ isRatingSending }
+            isRatingLoading={ isRatingLoading }
+            canRate={ canRate }
+          />
+        )) }
+      </Grid>
+      <Box ref={ cutRef } h={ 0 }/>
+    </>
   ) : (
     <EmptySearchResult selectedCategoryId={ selectedCategoryId } favoriteApps={ favoriteApps }/>
   );
diff --git a/ui/marketplace/MarketplaceListWithScores.tsx b/ui/marketplace/MarketplaceListWithScores.tsx
deleted file mode 100644
index 6d86eb63ba..0000000000
--- a/ui/marketplace/MarketplaceListWithScores.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Hide, Show } from '@chakra-ui/react';
-import React from 'react';
-import type { MouseEvent } from 'react';
-
-import type { MarketplaceAppWithSecurityReport, ContractListTypes } from 'types/client/marketplace';
-
-import DataListDisplay from 'ui/shared/DataListDisplay';
-
-import EmptySearchResult from './EmptySearchResult';
-import ListItem from './MarketplaceListWithScores/ListItem';
-import Table from './MarketplaceListWithScores/Table';
-
-interface Props {
-  apps: Array<MarketplaceAppWithSecurityReport>;
-  showAppInfo: (id: string) => void;
-  favoriteApps: Array<string>;
-  onFavoriteClick: (id: string, isFavorite: boolean, source: 'Security view') => void;
-  isLoading: boolean;
-  selectedCategoryId?: string;
-  onAppClick: (event: MouseEvent, id: string) => void;
-  showContractList: (id: string, type: ContractListTypes) => void;
-}
-
-const MarketplaceListWithScores = ({
-  apps,
-  showAppInfo,
-  favoriteApps,
-  onFavoriteClick,
-  isLoading,
-  selectedCategoryId,
-  onAppClick,
-  showContractList,
-}: Props) => {
-
-  const displayedApps = React.useMemo(() => apps.sort((a, b) => {
-    if (!a.securityReport) {
-      return 1;
-    } else if (!b.securityReport) {
-      return -1;
-    }
-    return b.securityReport.overallInfo.securityScore - a.securityReport.overallInfo.securityScore;
-  }), [ apps ]);
-
-  const content = apps.length > 0 ? (
-    <>
-      <Show below="lg" ssr={ false }>
-        { displayedApps.map((app, index) => (
-          <ListItem
-            key={ app.id + (isLoading ? index : '') }
-            app={ app }
-            onInfoClick={ showAppInfo }
-            isFavorite={ favoriteApps.includes(app.id) }
-            onFavoriteClick={ onFavoriteClick }
-            isLoading={ isLoading }
-            onAppClick={ onAppClick }
-            showContractList={ showContractList }
-          />
-        )) }
-      </Show>
-      <Hide below="lg" ssr={ false }>
-        <Table
-          apps={ displayedApps }
-          isLoading={ isLoading }
-          onAppClick={ onAppClick }
-          favoriteApps={ favoriteApps }
-          onFavoriteClick={ onFavoriteClick }
-          onInfoClick={ showAppInfo }
-          showContractList={ showContractList }
-        />
-      </Hide>
-    </>
-  ) : null;
-
-  return apps.length > 0 ? (
-    <DataListDisplay
-      isError={ false }
-      items={ apps }
-      emptyText="No apps found."
-      content={ content }
-    />
-  ) : (
-    <EmptySearchResult selectedCategoryId={ selectedCategoryId } favoriteApps={ favoriteApps }/>
-  );
-};
-
-export default MarketplaceListWithScores;
diff --git a/ui/marketplace/MarketplaceListWithScores/AppLink.tsx b/ui/marketplace/MarketplaceListWithScores/AppLink.tsx
deleted file mode 100644
index bf1b1d6af7..0000000000
--- a/ui/marketplace/MarketplaceListWithScores/AppLink.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Flex, Skeleton, LinkBox, Image, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-import type { MouseEvent } from 'react';
-
-import type { MarketplaceAppPreview } from 'types/client/marketplace';
-
-import MarketplaceAppCardLink from '../MarketplaceAppCardLink';
-import MarketplaceAppIntegrationIcon from '../MarketplaceAppIntegrationIcon';
-
-interface Props {
-  app: MarketplaceAppPreview;
-  isLoading: boolean | undefined;
-  onAppClick: (event: MouseEvent, id: string) => void;
-  isLarge?: boolean;
-}
-
-const AppLink = ({ app, isLoading, onAppClick, isLarge = false }: Props) => {
-  const { id, url, external, title, logo, logoDarkMode, internalWallet, categories } = app;
-
-  const logoUrl = useColorModeValue(logo, logoDarkMode || logo);
-
-  const categoriesLabel = categories.join(', ');
-
-  return (
-    <LinkBox display="flex" height="100%" width="100%" role="group" alignItems="center" mb={ isLarge ? 0 : 4 }>
-      <Skeleton
-        isLoaded={ !isLoading }
-        w={ isLarge ? '56px' : '48px' }
-        h={ isLarge ? '56px' : '48px' }
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
-        mr={ isLarge ? 3 : 4 }
-      >
-        <Image
-          src={ isLoading ? undefined : logoUrl }
-          alt={ `${ title } app icon` }
-          borderRadius="8px"
-        />
-      </Skeleton>
-
-      <Flex direction="column">
-        <Skeleton
-          isLoaded={ !isLoading }
-          marginBottom={ 0 }
-          fontSize="sm"
-          fontWeight="semibold"
-          fontFamily="heading"
-          display="inline-block"
-          mb={ 1 }
-        >
-          <MarketplaceAppCardLink
-            id={ id }
-            url={ url }
-            external={ external }
-            title={ title }
-            onClick={ onAppClick }
-          />
-          <MarketplaceAppIntegrationIcon external={ external } internalWallet={ internalWallet }/>
-        </Skeleton>
-        <Skeleton
-          isLoaded={ !isLoading }
-          color="text_secondary"
-          fontSize={ isLarge ? 'sm' : 'xs' }
-        >
-          <span>{ categoriesLabel }</span>
-        </Skeleton>
-      </Flex>
-    </LinkBox>
-  );
-};
-
-export default AppLink;
diff --git a/ui/marketplace/MarketplaceListWithScores/ListItem.tsx b/ui/marketplace/MarketplaceListWithScores/ListItem.tsx
deleted file mode 100644
index 4b5a8988f4..0000000000
--- a/ui/marketplace/MarketplaceListWithScores/ListItem.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { Flex, IconButton, Text } from '@chakra-ui/react';
-import React from 'react';
-import type { MouseEvent } from 'react';
-
-import type { MarketplaceAppWithSecurityReport } from 'types/client/marketplace';
-import { ContractListTypes } from 'types/client/marketplace';
-
-import * as mixpanel from 'lib/mixpanel/index';
-import IconSvg from 'ui/shared/IconSvg';
-import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
-
-import AppSecurityReport from '../AppSecurityReport';
-import ContractListButton, { ContractListButtonVariants } from '../ContractListButton';
-import AppLink from './AppLink';
-import MoreInfoButton from './MoreInfoButton';
-
-type Props = {
-  app: MarketplaceAppWithSecurityReport;
-  onInfoClick: (id: string) => void;
-  isFavorite: boolean;
-  onFavoriteClick: (id: string, isFavorite: boolean, source: 'Security view') => void;
-  isLoading: boolean;
-  onAppClick: (event: MouseEvent, id: string) => void;
-  showContractList: (id: string, type: ContractListTypes) => void;
-}
-
-const ListItem = ({ app, onInfoClick, isFavorite, onFavoriteClick, isLoading, onAppClick, showContractList }: Props) => {
-  const { id, securityReport } = app;
-
-  const handleInfoClick = React.useCallback((event: MouseEvent) => {
-    event.preventDefault();
-    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'More button', Info: id, Source: 'Security view' });
-    onInfoClick(id);
-  }, [ onInfoClick, id ]);
-
-  const handleFavoriteClick = React.useCallback(() => {
-    onFavoriteClick(id, isFavorite, 'Security view');
-  }, [ onFavoriteClick, id, isFavorite ]);
-
-  const showAllContracts = React.useCallback(() => {
-    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Total contracts', Info: id, Source: 'Security view' });
-    showContractList(id, ContractListTypes.ALL);
-  }, [ showContractList, id ]);
-
-  const showVerifiedContracts = React.useCallback(() => {
-    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Verified contracts', Info: id, Source: 'Security view' });
-    showContractList(id, ContractListTypes.VERIFIED);
-  }, [ showContractList, id ]);
-
-  const showAnalyzedContracts = React.useCallback(() => {
-    showContractList(id, ContractListTypes.ANALYZED);
-  }, [ showContractList, id ]);
-
-  return (
-    <ListItemMobile
-      rowGap={ 3 }
-      py={ 3 }
-      _first={{ borderTop: 'none', paddingTop: 0 }}
-      _last={{ borderBottom: 'none', paddingBottom: 0 }}
-    >
-      <Flex
-        direction="column"
-        justifyContent="stretch"
-        padding={ 3 }
-        width="100%"
-      >
-        <Flex position="relative">
-          <AppLink app={ app } isLoading={ isLoading } onAppClick={ onAppClick }/>
-          { !isLoading && (
-            <IconButton
-              position="absolute"
-              right={ -1 }
-              top={ -1 }
-              aria-label="Mark as favorite"
-              title="Mark as favorite"
-              variant="ghost"
-              colorScheme="gray"
-              w={ 9 }
-              h={ 8 }
-              onClick={ handleFavoriteClick }
-              icon={ isFavorite ?
-                <IconSvg name="star_filled" w={ 5 } h={ 5 } color="yellow.400"/> :
-                <IconSvg name="star_outline" w={ 5 } h={ 5 } color="gray.400"/>
-              }
-            />
-          ) }
-        </Flex>
-        <Flex alignItems="center">
-          <Flex flex={ 1 } gap={ 3 } alignItems="center">
-            { (securityReport || isLoading) ? (
-              <>
-                <AppSecurityReport
-                  id={ id }
-                  isLoading={ isLoading }
-                  securityReport={ securityReport }
-                  showContractList={ showAnalyzedContracts }
-                  height="30px"
-                  source="Security view"
-                />
-                <ContractListButton
-                  onClick={ showAllContracts }
-                  variant={ ContractListButtonVariants.ALL_CONTRACTS }
-                  isLoading={ isLoading }
-                >
-                  { securityReport?.overallInfo.totalContractsNumber ?? 0 }
-                </ContractListButton>
-                <ContractListButton
-                  onClick={ showVerifiedContracts }
-                  variant={ ContractListButtonVariants.VERIFIED_CONTRACTS }
-                  isLoading={ isLoading }
-                >
-                  { securityReport?.overallInfo.verifiedNumber ?? 0 }
-                </ContractListButton>
-              </>
-            ) : (
-              <Text variant="secondary" fontSize="sm" fontWeight={ 500 }>Data will be available soon</Text>
-            ) }
-          </Flex>
-          <MoreInfoButton onClick={ handleInfoClick } isLoading={ isLoading }/>
-        </Flex>
-      </Flex>
-    </ListItemMobile>
-  );
-};
-
-export default ListItem;
diff --git a/ui/marketplace/MarketplaceListWithScores/MoreInfoButton.tsx b/ui/marketplace/MarketplaceListWithScores/MoreInfoButton.tsx
deleted file mode 100644
index d96bddb66c..0000000000
--- a/ui/marketplace/MarketplaceListWithScores/MoreInfoButton.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Link, Skeleton } from '@chakra-ui/react';
-import React from 'react';
-import type { MouseEvent } from 'react';
-
-interface Props {
-  onClick: (event: MouseEvent) => void;
-  isLoading?: boolean;
-}
-
-const MoreInfoButton = ({ onClick, isLoading }: Props) => (
-  <Skeleton
-    isLoaded={ !isLoading }
-    display="inline-flex"
-    alignItems="center"
-    height="30px"
-    borderRadius="base"
-  >
-    <Link
-      fontSize="sm"
-      onClick={ onClick }
-      fontWeight="500"
-      display="inline-flex"
-    >
-      More info
-    </Link>
-  </Skeleton>
-);
-
-export default MoreInfoButton;
diff --git a/ui/marketplace/MarketplaceListWithScores/Table.tsx b/ui/marketplace/MarketplaceListWithScores/Table.tsx
deleted file mode 100644
index 1e8cbddf56..0000000000
--- a/ui/marketplace/MarketplaceListWithScores/Table.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Table as ChakraTable, Tbody, Th, Tr } from '@chakra-ui/react';
-import React from 'react';
-import type { MouseEvent } from 'react';
-
-import type { MarketplaceAppWithSecurityReport, ContractListTypes } from 'types/client/marketplace';
-
-import { default as Thead } from 'ui/shared/TheadSticky';
-
-import TableItem from './TableItem';
-
-type Props = {
-  apps: Array<MarketplaceAppWithSecurityReport>;
-  isLoading?: boolean;
-  favoriteApps: Array<string>;
-  onFavoriteClick: (id: string, isFavorite: boolean, source: 'Security view') => void;
-  onAppClick: (event: MouseEvent, id: string) => void;
-  onInfoClick: (id: string) => void;
-  showContractList: (id: string, type: ContractListTypes) => void;
-}
-
-const Table = ({ apps, isLoading, favoriteApps, onFavoriteClick, onAppClick, onInfoClick, showContractList }: Props) => {
-  return (
-    <ChakraTable>
-      <Thead top={ 0 }>
-        <Tr>
-          <Th w="5%"></Th>
-          <Th w="40%">App</Th>
-          <Th w="15%">Contracts score</Th>
-          <Th w="10%">Total</Th>
-          <Th w="10%">Verified</Th>
-          <Th w="20%"></Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        { apps.map((app, index) => (
-          <TableItem
-            key={ app.id + (isLoading ? index : '') }
-            app={ app }
-            isLoading={ isLoading }
-            isFavorite={ favoriteApps.includes(app.id) }
-            onFavoriteClick={ onFavoriteClick }
-            onAppClick={ onAppClick }
-            onInfoClick={ onInfoClick }
-            showContractList={ showContractList }
-          />
-        )) }
-      </Tbody>
-    </ChakraTable>
-  );
-};
-
-export default Table;
diff --git a/ui/marketplace/MarketplaceListWithScores/TableItem.tsx b/ui/marketplace/MarketplaceListWithScores/TableItem.tsx
deleted file mode 100644
index c77b5c5c78..0000000000
--- a/ui/marketplace/MarketplaceListWithScores/TableItem.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { Td, Tr, IconButton, Skeleton, Text } from '@chakra-ui/react';
-import React from 'react';
-import type { MouseEvent } from 'react';
-
-import type { MarketplaceAppWithSecurityReport } from 'types/client/marketplace';
-import { ContractListTypes } from 'types/client/marketplace';
-
-import * as mixpanel from 'lib/mixpanel/index';
-import IconSvg from 'ui/shared/IconSvg';
-
-import AppSecurityReport from '../AppSecurityReport';
-import ContractListButton, { ContractListButtonVariants } from '../ContractListButton';
-import AppLink from './AppLink';
-import MoreInfoButton from './MoreInfoButton';
-
-type Props = {
-  app: MarketplaceAppWithSecurityReport;
-  isLoading?: boolean;
-  isFavorite: boolean;
-  onFavoriteClick: (id: string, isFavorite: boolean, source: 'Security view') => void;
-  onAppClick: (event: MouseEvent, id: string) => void;
-  onInfoClick: (id: string) => void;
-  showContractList: (id: string, type: ContractListTypes) => void;
-}
-
-const TableItem = ({
-  app,
-  isLoading,
-  isFavorite,
-  onFavoriteClick,
-  onAppClick,
-  onInfoClick,
-  showContractList,
-}: Props) => {
-
-  const { id, securityReport } = app;
-
-  const handleInfoClick = React.useCallback((event: MouseEvent) => {
-    event.preventDefault();
-    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'More button', Info: id, Source: 'Security view' });
-    onInfoClick(id);
-  }, [ onInfoClick, id ]);
-
-  const handleFavoriteClick = React.useCallback(() => {
-    onFavoriteClick(id, isFavorite, 'Security view');
-  }, [ onFavoriteClick, id, isFavorite ]);
-
-  const showAllContracts = React.useCallback(() => {
-    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Total contracts', Info: id, Source: 'Security view' });
-    showContractList(id, ContractListTypes.ALL);
-  }, [ showContractList, id ]);
-
-  const showVerifiedContracts = React.useCallback(() => {
-    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Verified contracts', Info: id, Source: 'Security view' });
-    showContractList(id, ContractListTypes.VERIFIED);
-  }, [ showContractList, id ]);
-
-  const showAnalyzedContracts = React.useCallback(() => {
-    showContractList(id, ContractListTypes.ANALYZED);
-  }, [ showContractList, id ]);
-
-  return (
-    <Tr>
-      <Td verticalAlign="middle" px={ 2 }>
-        <Skeleton isLoaded={ !isLoading }>
-          <IconButton
-            aria-label="Mark as favorite"
-            title="Mark as favorite"
-            variant="ghost"
-            colorScheme="gray"
-            w={ 9 }
-            h={ 8 }
-            onClick={ handleFavoriteClick }
-            icon={ isFavorite ?
-              <IconSvg name="star_filled" w={ 5 } h={ 5 } color="yellow.400"/> :
-              <IconSvg name="star_outline" w={ 5 } h={ 5 } color="gray.400"/>
-            }
-          />
-        </Skeleton>
-      </Td>
-      <Td verticalAlign="middle">
-        <AppLink app={ app } isLoading={ isLoading } onAppClick={ onAppClick } isLarge/>
-      </Td>
-      { (securityReport || isLoading) ? (
-        <>
-          <Td verticalAlign="middle">
-            <AppSecurityReport
-              id={ id }
-              securityReport={ securityReport }
-              showContractList={ showAnalyzedContracts }
-              isLoading={ isLoading }
-              source="Security view"
-            />
-          </Td>
-          <Td verticalAlign="middle">
-            <ContractListButton
-              onClick={ showAllContracts }
-              variant={ ContractListButtonVariants.ALL_CONTRACTS }
-              isLoading={ isLoading }
-            >
-              { securityReport?.overallInfo.totalContractsNumber ?? 0 }
-            </ContractListButton>
-          </Td>
-          <Td verticalAlign="middle">
-            <ContractListButton
-              onClick={ showVerifiedContracts }
-              variant={ ContractListButtonVariants.VERIFIED_CONTRACTS }
-              isLoading={ isLoading }
-            >
-              { securityReport?.overallInfo.verifiedNumber ?? 0 }
-            </ContractListButton>
-          </Td>
-        </>
-      ) : (
-        <Td verticalAlign="middle" colSpan={ 3 }>
-          <Text variant="secondary" fontSize="sm" fontWeight={ 500 }>Data will be available soon</Text>
-        </Td>
-      ) }
-      <Td verticalAlign="middle" isNumeric>
-        <MoreInfoButton onClick={ handleInfoClick } isLoading={ isLoading }/>
-      </Td>
-    </Tr>
-  );
-};
-
-export default TableItem;
diff --git a/ui/marketplace/Rating/PopoverContent.tsx b/ui/marketplace/Rating/PopoverContent.tsx
new file mode 100644
index 0000000000..d86d31179d
--- /dev/null
+++ b/ui/marketplace/Rating/PopoverContent.tsx
@@ -0,0 +1,81 @@
+import { Text, Flex, Spinner } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AppRating } from 'types/client/marketplace';
+
+import type { EventTypes, EventPayload } from 'lib/mixpanel/index';
+import IconSvg from 'ui/shared/IconSvg';
+
+import Stars from './Stars';
+import type { RateFunction } from './useRatings';
+
+const ratingDescriptions = [ 'Very bad', 'Bad', 'Average', 'Good', 'Excellent' ];
+
+type Props = {
+  appId: string;
+  rating?: AppRating;
+  userRating?: AppRating;
+  rate: RateFunction;
+  isSending?: boolean;
+  source: EventPayload<EventTypes.APP_FEEDBACK>['Source'];
+};
+
+const PopoverContent = ({ appId, rating, userRating, rate, isSending, source }: Props) => {
+  const [ hovered, setHovered ] = React.useState(-1);
+
+  const filledIndex = React.useMemo(() => {
+    if (hovered >= 0) {
+      return hovered;
+    }
+    return userRating?.value ? userRating?.value - 1 : -1;
+  }, [ userRating, hovered ]);
+
+  const handleMouseOverFactory = React.useCallback((index: number) => () => {
+    setHovered(index);
+  }, []);
+
+  const handleMouseOut = React.useCallback(() => {
+    setHovered(-1);
+  }, []);
+
+  const handleRateFactory = React.useCallback((index: number) => () => {
+    rate(appId, rating?.recordId, userRating?.recordId, index + 1, source);
+  }, [ appId, rating, rate, userRating, source ]);
+
+  if (isSending) {
+    return (
+      <Flex alignItems="center">
+        <Spinner size="md"/>
+        <Text fontSize="md" ml={ 3 }>Sending your feedback</Text>
+      </Flex>
+    );
+  }
+
+  return (
+    <>
+      <Flex alignItems="center">
+        { userRating && (
+          <IconSvg name="verified" color="green.400" boxSize="30px" mr={ 1 } ml="-5px"/>
+        ) }
+        <Text fontWeight="500" fontSize="xs" lineHeight="30px" variant="secondary">
+          { userRating ? 'App is already rated by you' : 'How was your experience?' }
+        </Text>
+      </Flex>
+      <Flex alignItems="center" h="32px">
+        <Stars
+          filledIndex={ filledIndex }
+          onMouseOverFactory={ handleMouseOverFactory }
+          onMouseOut={ handleMouseOut }
+          onClickFactory={ handleRateFactory }
+        />
+        { (filledIndex >= 0) && (
+          <Text fontSize="md" ml={ 3 }>
+            { ratingDescriptions[filledIndex] }
+          </Text>
+        ) }
+      </Flex>
+    </>
+  );
+};
+
+export default PopoverContent;
diff --git a/ui/marketplace/Rating/Rating.tsx b/ui/marketplace/Rating/Rating.tsx
new file mode 100644
index 0000000000..4884460e20
--- /dev/null
+++ b/ui/marketplace/Rating/Rating.tsx
@@ -0,0 +1,87 @@
+import { Text, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, Skeleton, useOutsideClick, Box } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AppRating } from 'types/client/marketplace';
+
+import config from 'configs/app';
+import type { EventTypes, EventPayload } from 'lib/mixpanel/index';
+import Popover from 'ui/shared/chakra/Popover';
+
+import Content from './PopoverContent';
+import Stars from './Stars';
+import TriggerButton from './TriggerButton';
+import type { RateFunction } from './useRatings';
+
+const feature = config.features.marketplace;
+const isEnabled = feature.isEnabled && feature.rating;
+
+type Props = {
+  appId: string;
+  rating?: AppRating;
+  userRating?: AppRating;
+  rate: RateFunction;
+  isSending?: boolean;
+  isLoading?: boolean;
+  fullView?: boolean;
+  canRate: boolean | undefined;
+  source: EventPayload<EventTypes.APP_FEEDBACK>['Source'];
+};
+
+const Rating = ({
+  appId, rating, userRating, rate,
+  isSending, isLoading, fullView, canRate, source,
+}: Props) => {
+  const { isOpen, onToggle, onClose } = useDisclosure();
+  // have to implement this solution because popover loses focus on button click inside it (issue: https://github.com/chakra-ui/chakra-ui/issues/7359)
+  const popoverRef = React.useRef(null);
+  useOutsideClick({ ref: popoverRef, handler: onClose });
+
+  if (!isEnabled) {
+    return null;
+  }
+
+  return (
+    <Skeleton
+      display="flex"
+      alignItems="center"
+      isLoaded={ !isLoading }
+      w={ (isLoading && !fullView) ? '40px' : 'auto' }
+    >
+      { fullView && (
+        <>
+          <Stars filledIndex={ (rating?.value || 0) - 1 }/>
+          <Text fontSize="md" ml={ 2 }>{ rating?.value }</Text>
+          { rating?.count && <Text variant="secondary" fontSize="md" ml={ 1 }>({ rating?.count })</Text> }
+        </>
+      ) }
+      <Box ref={ popoverRef }>
+        <Popover isOpen={ isOpen } placement="bottom" isLazy>
+          <PopoverTrigger>
+            <TriggerButton
+              rating={ rating?.value }
+              count={ rating?.count }
+              fullView={ fullView }
+              isActive={ isOpen }
+              onClick={ onToggle }
+              canRate={ canRate }
+            />
+          </PopoverTrigger>
+          <PopoverContent w="250px" mx={ 3 }>
+            <PopoverBody p={ 4 }>
+              <Content
+                appId={ appId }
+                rating={ rating }
+                userRating={ userRating }
+                rate={ rate }
+                isSending={ isSending }
+                source={ source }
+              />
+            </PopoverBody>
+          </PopoverContent>
+        </Popover>
+      </Box>
+    </Skeleton>
+  );
+};
+
+export default Rating;
diff --git a/ui/marketplace/Rating/Stars.tsx b/ui/marketplace/Rating/Stars.tsx
new file mode 100644
index 0000000000..ca2e8d0be4
--- /dev/null
+++ b/ui/marketplace/Rating/Stars.tsx
@@ -0,0 +1,38 @@
+import { Flex, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+import type { MouseEventHandler } from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+type Props = {
+  filledIndex: number;
+  onMouseOverFactory?: (index: number) => MouseEventHandler<HTMLDivElement>;
+  onMouseOut?: () => void;
+  onClickFactory?: (index: number) => MouseEventHandler<HTMLDivElement>;
+};
+
+const Stars = ({ filledIndex, onMouseOverFactory, onMouseOut, onClickFactory }: Props) => {
+  const disabledStarColor = useColorModeValue('gray.200', 'gray.700');
+  const outlineStartColor = onMouseOverFactory ? 'gray.400' : disabledStarColor;
+  return (
+    <Flex>
+      { Array(5).fill(null).map((_, index) => (
+        <IconSvg
+          key={ index }
+          name={ filledIndex >= index ? 'star_filled' : 'star_outline' }
+          color={ filledIndex >= index ? 'yellow.400' : outlineStartColor }
+          w={ 6 } // 5 + 1 padding
+          h={ 5 }
+          pr={ 1 } // use padding intead of margin so that there are no empty spaces between stars without hover effect
+          _last={{ w: 5, pr: 0 }}
+          cursor={ onMouseOverFactory ? 'pointer' : 'default' }
+          onMouseOver={ onMouseOverFactory?.(index) }
+          onMouseOut={ onMouseOut }
+          onClick={ onClickFactory?.(index) }
+        />
+      )) }
+    </Flex>
+  );
+};
+
+export default Stars;
diff --git a/ui/marketplace/Rating/TriggerButton.tsx b/ui/marketplace/Rating/TriggerButton.tsx
new file mode 100644
index 0000000000..c94647efb8
--- /dev/null
+++ b/ui/marketplace/Rating/TriggerButton.tsx
@@ -0,0 +1,91 @@
+import { Button, chakra, useColorModeValue, Tooltip, useDisclosure, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import usePreventFocusAfterModalClosing from 'lib/hooks/usePreventFocusAfterModalClosing';
+import IconSvg from 'ui/shared/IconSvg';
+
+type Props = {
+  rating?: number;
+  count?: number;
+  fullView?: boolean;
+  isActive: boolean;
+  onClick: () => void;
+  canRate: boolean | undefined;
+};
+
+const getTooltipText = (canRate: boolean | undefined) => {
+  if (canRate === undefined) {
+    return <>Please connect your wallet to Blockscout to rate this DApp.<br/>Only wallets with 5+ transactions are eligible</>;
+  }
+  if (!canRate) {
+    return <>Brand new wallets cannot leave ratings.<br/>Please connect a wallet with 5 or more transactions on this chain</>;
+  }
+  return <>Ratings come from verified users.<br/>Click here to rate!</>;
+};
+
+const TriggerButton = (
+  { rating, count, fullView, isActive, onClick, canRate }: Props,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) => {
+  const textColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
+  const onFocusCapture = usePreventFocusAfterModalClosing();
+
+  // have to implement controlled tooltip on mobile because of the issue - https://github.com/chakra-ui/chakra-ui/issues/7107
+  const { isOpen, onToggle, onClose } = useDisclosure();
+  const isMobile = useIsMobile();
+
+  const handleClick = React.useCallback(() => {
+    if (canRate) {
+      onClick();
+    } else if (isMobile) {
+      onToggle();
+    }
+  }, [ canRate, isMobile, onToggle, onClick ]);
+
+  return (
+    <Tooltip
+      label={ getTooltipText(canRate) }
+      openDelay={ 100 }
+      textAlign="center"
+      closeOnClick={ Boolean(canRate) || isMobile }
+      isOpen={ isMobile ? isOpen : undefined }
+    >
+      <Button
+        ref={ ref }
+        size="xs"
+        variant="outline"
+        border={ 0 }
+        p={ 0 }
+        onClick={ handleClick }
+        fontSize={ fullView ? 'md' : 'sm' }
+        fontWeight={ fullView ? '400' : '500' }
+        lineHeight="21px"
+        ml={ fullView ? 3 : 0 }
+        isActive={ isActive }
+        onFocusCapture={ onFocusCapture }
+        cursor={ canRate ? 'pointer' : 'default' }
+        onMouseLeave={ isMobile ? onClose : undefined }
+      >
+        { !fullView && (
+          <IconSvg
+            name={ rating ? 'star_filled' : 'star_outline' }
+            color={ rating ? 'yellow.400' : 'gray.400' }
+            boxSize={ 5 }
+            mr={ 1 }
+          />
+        ) }
+        { (rating && !fullView) ? (
+          <chakra.span color={ textColor } transition="inherit" display="inline-flex">
+            { rating }
+            <Text variant="secondary" ml={ 1 }>({ count })</Text>
+          </chakra.span>
+        ) : (
+          'Rate it!'
+        ) }
+      </Button>
+    </Tooltip>
+  );
+};
+
+export default React.forwardRef(TriggerButton);
diff --git a/ui/marketplace/Rating/useRatings.test.tsx b/ui/marketplace/Rating/useRatings.test.tsx
new file mode 100644
index 0000000000..ee8d71695d
--- /dev/null
+++ b/ui/marketplace/Rating/useRatings.test.tsx
@@ -0,0 +1,74 @@
+import { renderHook, wrapper } from 'jest/lib';
+
+import useRatings from './useRatings';
+
+const useAccount = jest.fn();
+const useApiQuery = jest.fn();
+
+jest.mock('lib/hooks/useToast', () => jest.fn());
+jest.mock('wagmi', () => ({ useAccount: () => useAccount() }));
+jest.mock('lib/api/useApiQuery', () => () => useApiQuery());
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+it('should set canRate to true if address is defined and transactions_count is 5 or more', async() => {
+  useAccount.mockReturnValue({ address: '0x123' });
+  useApiQuery.mockReturnValue({
+    isPlaceholderData: false,
+    data: { transactions_count: 5 },
+  });
+  const { result } = renderHook(() => useRatings(), { wrapper });
+  expect(result.current.canRate).toBe(true);
+});
+
+it('should set canRate to undefined if address is undefined', async() => {
+  useAccount.mockReturnValue({ address: undefined });
+  useApiQuery.mockReturnValue({
+    isPlaceholderData: false,
+    data: { transactions_count: 5 },
+  });
+  const { result } = renderHook(() => useRatings(), { wrapper });
+  expect(result.current.canRate).toBe(undefined);
+});
+
+it('should set canRate to false if transactions_count is less than 5', async() => {
+  useAccount.mockReturnValue({ address: '0x123' });
+  useApiQuery.mockReturnValue({
+    isPlaceholderData: false,
+    data: { transactions_count: 4 },
+  });
+  const { result } = renderHook(() => useRatings(), { wrapper });
+  expect(result.current.canRate).toBe(false);
+});
+
+it('should set canRate to false if isPlaceholderData is true', async() => {
+  useAccount.mockReturnValue({ address: '0x123' });
+  useApiQuery.mockReturnValue({
+    isPlaceholderData: true,
+    data: { transactions_count: 5 },
+  });
+  const { result } = renderHook(() => useRatings(), { wrapper });
+  expect(result.current.canRate).toBe(false);
+});
+
+it('should set canRate to false if data is undefined', async() => {
+  useAccount.mockReturnValue({ address: '0x123' });
+  useApiQuery.mockReturnValue({
+    isPlaceholderData: false,
+    data: undefined,
+  });
+  const { result } = renderHook(() => useRatings());
+  expect(result.current.canRate).toBe(false);
+});
+
+it('should set canRate to false if transactions_count is undefined', async() => {
+  useAccount.mockReturnValue({ address: '0x123' });
+  useApiQuery.mockReturnValue({
+    isPlaceholderData: false,
+    data: {},
+  });
+  const { result } = renderHook(() => useRatings());
+  expect(result.current.canRate).toBe(false);
+});
diff --git a/ui/marketplace/Rating/useRatings.tsx b/ui/marketplace/Rating/useRatings.tsx
new file mode 100644
index 0000000000..663b1b3667
--- /dev/null
+++ b/ui/marketplace/Rating/useRatings.tsx
@@ -0,0 +1,194 @@
+import Airtable from 'airtable';
+import { useEffect, useState, useCallback } from 'react';
+import { useAccount } from 'wagmi';
+
+import type { AppRating } from 'types/client/marketplace';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+import useToast from 'lib/hooks/useToast';
+import type { EventTypes, EventPayload } from 'lib/mixpanel/index';
+import * as mixpanel from 'lib/mixpanel/index';
+import { ADDRESS_COUNTERS } from 'stubs/address';
+
+const MIN_TRANSACTION_COUNT = 5;
+
+const feature = config.features.marketplace;
+const airtable = (feature.isEnabled && feature.rating) ?
+  new Airtable({ apiKey: feature.rating.airtableApiKey }).base(feature.rating.airtableBaseId) :
+  undefined;
+
+export type RateFunction = (
+  appId: string,
+  appRecordId: string | undefined,
+  userRecordId: string | undefined,
+  rating: number,
+  source: EventPayload<EventTypes.APP_FEEDBACK>['Source'],
+) => void;
+
+function formatRatings(data: Airtable.Records<Airtable.FieldSet>) {
+  return data.reduce((acc: Record<string, AppRating>, record) => {
+    const fields = record.fields as { appId: string | Array<string>; rating: number | undefined; count?: number };
+    const appId = Array.isArray(fields.appId) ? fields.appId[0] : fields.appId;
+    acc[appId] = {
+      recordId: record.id,
+      value: fields.rating,
+      count: fields.count,
+    };
+    return acc;
+  }, {});
+}
+
+export default function useRatings() {
+  const { address } = useAccount();
+  const toast = useToast();
+
+  const addressCountersQuery = useApiQuery<'address_counters', { status: number }>('address_counters', {
+    pathParams: { hash: address },
+    queryOptions: {
+      enabled: Boolean(address),
+      placeholderData: ADDRESS_COUNTERS,
+      refetchOnMount: false,
+    },
+  });
+
+  const [ ratings, setRatings ] = useState<Record<string, AppRating>>({});
+  const [ userRatings, setUserRatings ] = useState<Record<string, AppRating>>({});
+  const [ isRatingLoading, setIsRatingLoading ] = useState<boolean>(false);
+  const [ isUserRatingLoading, setIsUserRatingLoading ] = useState<boolean>(false);
+  const [ isSending, setIsSending ] = useState<boolean>(false);
+  const [ canRate, setCanRate ] = useState<boolean | undefined>(undefined);
+
+  const fetchRatings = useCallback(async() => {
+    if (!airtable) {
+      return;
+    }
+    try {
+      const data = await airtable('apps_ratings').select({ fields: [ 'appId', 'rating', 'count' ] }).all();
+      const ratings = formatRatings(data);
+      setRatings(ratings);
+    } catch (error) {
+      toast({
+        status: 'error',
+        title: 'Error loading ratings',
+        description: 'Please try again later',
+      });
+    }
+  }, [ toast ]);
+
+  useEffect(() => {
+    async function fetch() {
+      setIsRatingLoading(true);
+      await fetchRatings();
+      setIsRatingLoading(false);
+    }
+    fetch();
+  }, [ fetchRatings ]);
+
+  useEffect(() => {
+    async function fetchUserRatings() {
+      setIsUserRatingLoading(true);
+      let userRatings = {} as Record<string, AppRating>;
+      if (address && airtable) {
+        try {
+          const data = await airtable('users_ratings').select({
+            filterByFormula: `address = "${ address }"`,
+            fields: [ 'appId', 'rating' ],
+          }).all();
+          userRatings = formatRatings(data);
+        } catch (error) {
+          toast({
+            status: 'error',
+            title: 'Error loading user ratings',
+            description: 'Please try again later',
+          });
+        }
+      }
+      setUserRatings(userRatings);
+      setIsUserRatingLoading(false);
+    }
+    fetchUserRatings();
+  }, [ address, toast ]);
+
+  useEffect(() => {
+    const { isPlaceholderData, data } = addressCountersQuery;
+    const canRate = address && !isPlaceholderData && Number(data?.transactions_count) >= MIN_TRANSACTION_COUNT;
+    setCanRate(canRate);
+  }, [ address, addressCountersQuery ]);
+
+  const rateApp = useCallback(async(
+    appId: string,
+    appRecordId: string | undefined,
+    userRecordId: string | undefined,
+    rating: number,
+    source: EventPayload<EventTypes.APP_FEEDBACK>['Source'],
+  ) => {
+    setIsSending(true);
+
+    try {
+      if (!address || !airtable) {
+        throw new Error('Address is missing');
+      }
+
+      if (!appRecordId) {
+        const records = await airtable('apps_ratings').create([ { fields: { appId } } ]);
+        appRecordId = records[0].id;
+        if (!appRecordId) {
+          throw new Error('Record ID is missing');
+        }
+      }
+
+      if (!userRecordId) {
+        const userRecords = await airtable('users_ratings').create([
+          {
+            fields: {
+              address,
+              appRecordId: [ appRecordId ],
+              rating,
+            },
+          },
+        ]);
+        userRecordId = userRecords[0].id;
+      } else {
+        await airtable('users_ratings').update(userRecordId, { rating });
+      }
+
+      setUserRatings({
+        ...userRatings,
+        [appId]: {
+          recordId: userRecordId,
+          value: rating,
+        },
+      });
+      fetchRatings();
+
+      toast({
+        status: 'success',
+        title: 'Awesome! Thank you 💜',
+        description: 'Your rating improves the service',
+      });
+      mixpanel.logEvent(
+        mixpanel.EventTypes.APP_FEEDBACK,
+        { Action: 'Rating', Source: source, AppId: appId, Score: rating },
+      );
+    } catch (error) {
+      toast({
+        status: 'error',
+        title: 'Ooops! Something went wrong',
+        description: 'Please try again later',
+      });
+    }
+
+    setIsSending(false);
+  }, [ address, userRatings, fetchRatings, toast ]);
+
+  return {
+    ratings,
+    userRatings,
+    rateApp,
+    isRatingSending: isSending,
+    isRatingLoading,
+    isUserRatingLoading,
+    canRate,
+  };
+}
diff --git a/ui/marketplace/useMarketplace.tsx b/ui/marketplace/useMarketplace.tsx
index cbf635478d..1a67d6d791 100644
--- a/ui/marketplace/useMarketplace.tsx
+++ b/ui/marketplace/useMarketplace.tsx
@@ -1,14 +1,14 @@
-import _pickBy from 'lodash/pickBy';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { ContractListTypes } from 'types/client/marketplace';
-import { MarketplaceCategory, MarketplaceDisplayType } from 'types/client/marketplace';
+import { MarketplaceCategory } from 'types/client/marketplace';
 
 import useDebounce from 'lib/hooks/useDebounce';
 import * as mixpanel from 'lib/mixpanel/index';
 import getQueryParamString from 'lib/router/getQueryParamString';
 
+import useRatings from './Rating/useRatings';
 import useMarketplaceApps from './useMarketplaceApps';
 import useMarketplaceCategories from './useMarketplaceCategories';
 
@@ -26,15 +26,9 @@ export default function useMarketplace() {
   const router = useRouter();
   const defaultCategoryId = getQueryParamString(router.query.category);
   const defaultFilterQuery = getQueryParamString(router.query.filter);
-  const defaultDisplayType = getQueryParamString(router.query.tab);
 
   const [ selectedAppId, setSelectedAppId ] = React.useState<string | null>(null);
   const [ selectedCategoryId, setSelectedCategoryId ] = React.useState<string>(MarketplaceCategory.ALL);
-  const [ selectedDisplayType, setSelectedDisplayType ] = React.useState<string>(
-    Object.values(MarketplaceDisplayType).includes(defaultDisplayType as MarketplaceDisplayType) ?
-      defaultDisplayType :
-      MarketplaceDisplayType.DEFAULT,
-  );
   const [ filterQuery, setFilterQuery ] = React.useState(defaultFilterQuery);
   const [ favoriteApps, setFavoriteApps ] = React.useState<Array<string>>([]);
   const [ isFavoriteAppsLoaded, setIsFavoriteAppsLoaded ] = React.useState<boolean>(false);
@@ -43,7 +37,7 @@ export default function useMarketplace() {
   const [ contractListModalType, setContractListModalType ] = React.useState<ContractListTypes | null>(null);
   const [ hasPreviousStep, setHasPreviousStep ] = React.useState<boolean>(false);
 
-  const handleFavoriteClick = React.useCallback((id: string, isFavorite: boolean, source: 'Discovery view' | 'Security view' | 'App modal') => {
+  const handleFavoriteClick = React.useCallback((id: string, isFavorite: boolean, source: 'Discovery view' | 'Security view' | 'App modal' | 'Banner') => {
     mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Favorite app', Info: id, Source: source });
 
     const favoriteApps = getFavoriteApps();
@@ -91,13 +85,10 @@ export default function useMarketplace() {
     setSelectedCategoryId(newCategory);
   }, []);
 
-  const handleDisplayTypeChange = React.useCallback((newDisplayType: MarketplaceDisplayType) => {
-    setSelectedDisplayType(newDisplayType);
-  }, []);
-
+  const { ratings, userRatings, rateApp, isRatingSending, isRatingLoading, canRate } = useRatings();
   const {
-    isPlaceholderData, isError, error, data, displayedApps,
-  } = useMarketplaceApps(debouncedFilterQuery, selectedCategoryId, favoriteApps, isFavoriteAppsLoaded);
+    isPlaceholderData, isError, error, data, displayedApps, setSorting,
+  } = useMarketplaceApps(debouncedFilterQuery, selectedCategoryId, favoriteApps, isFavoriteAppsLoaded, ratings);
   const {
     isPlaceholderData: isCategoriesPlaceholderData, data: categories,
   } = useMarketplaceCategories(data, isPlaceholderData);
@@ -117,25 +108,38 @@ export default function useMarketplace() {
   }, [ isPlaceholderData ]);
 
   React.useEffect(() => {
-    const query = _pickBy({
-      category: selectedCategoryId === MarketplaceCategory.ALL ? undefined : selectedCategoryId,
-      filter: debouncedFilterQuery,
-      tab: selectedDisplayType === MarketplaceDisplayType.DEFAULT ? undefined : selectedDisplayType,
-    }, Boolean);
+    if (isPlaceholderData) {
+      return;
+    }
+
+    const { query } = router;
+    const newQuery = { ...query };
+
+    if (selectedCategoryId !== MarketplaceCategory.ALL) {
+      newQuery.category = selectedCategoryId;
+    } else {
+      delete newQuery.category;
+    }
+
+    if (debouncedFilterQuery) {
+      newQuery.filter = debouncedFilterQuery;
+    } else {
+      delete newQuery.filter;
+    }
 
     if (debouncedFilterQuery.length > 0) {
       mixpanel.logEvent(mixpanel.EventTypes.LOCAL_SEARCH, { Source: 'Marketplace', 'Search query': debouncedFilterQuery });
     }
 
     router.replace(
-      { pathname: '/apps', query },
+      { pathname: '/apps', query: newQuery },
       undefined,
       { shallow: true },
     );
   // omit router in the deps because router.push() somehow modifies it
   // and we get infinite re-renders then
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ debouncedFilterQuery, selectedCategoryId, selectedDisplayType ]);
+  }, [ debouncedFilterQuery, selectedCategoryId, isPlaceholderData ]);
 
   return React.useMemo(() => ({
     selectedCategoryId,
@@ -146,6 +150,7 @@ export default function useMarketplace() {
     isError,
     error,
     categories,
+    apps: data,
     displayedApps,
     showAppInfo,
     selectedAppId,
@@ -159,14 +164,19 @@ export default function useMarketplace() {
     isCategoriesPlaceholderData,
     showContractList,
     contractListModalType,
-    selectedDisplayType,
-    onDisplayTypeChange: handleDisplayTypeChange,
     hasPreviousStep,
+    setSorting,
+    userRatings,
+    rateApp,
+    isRatingSending,
+    isRatingLoading,
+    canRate,
   }), [
     selectedCategoryId,
     categories,
     clearSelectedAppId,
     selectedAppId,
+    data,
     displayedApps,
     error,
     favoriteApps,
@@ -179,12 +189,15 @@ export default function useMarketplace() {
     isAppInfoModalOpen,
     isDisclaimerModalOpen,
     showDisclaimer,
-    data?.length,
     isCategoriesPlaceholderData,
     showContractList,
     contractListModalType,
-    selectedDisplayType,
-    handleDisplayTypeChange,
     hasPreviousStep,
+    setSorting,
+    userRatings,
+    rateApp,
+    isRatingSending,
+    isRatingLoading,
+    canRate,
   ]);
 }
diff --git a/ui/marketplace/useMarketplaceApps.tsx b/ui/marketplace/useMarketplaceApps.tsx
index 8aca496b9c..829d807fde 100644
--- a/ui/marketplace/useMarketplaceApps.tsx
+++ b/ui/marketplace/useMarketplaceApps.tsx
@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
-import type { MarketplaceAppWithSecurityReport } from 'types/client/marketplace';
+import type { MarketplaceAppWithSecurityReport, AppRating } from 'types/client/marketplace';
 import { MarketplaceCategory } from 'types/client/marketplace';
 
 import config from 'configs/app';
@@ -11,6 +11,7 @@ import useFetch from 'lib/hooks/useFetch';
 import { MARKETPLACE_APP } from 'stubs/marketplace';
 
 import useSecurityReports from './useSecurityReports';
+import type { SortValue } from './utils';
 
 const feature = config.features.marketplace;
 
@@ -18,13 +19,13 @@ function isAppNameMatches(q: string, app: MarketplaceAppWithSecurityReport) {
   return app.title.toLowerCase().includes(q.toLowerCase());
 }
 
-function isAppCategoryMatches(category: string, app: MarketplaceAppWithSecurityReport, favoriteApps: Array<string>) {
+function isAppCategoryMatches(category: string, app: MarketplaceAppWithSecurityReport, favoriteApps: Array<string> = []) {
   return category === MarketplaceCategory.ALL ||
       (category === MarketplaceCategory.FAVORITES && favoriteApps.includes(app.id)) ||
       app.categories.includes(category);
 }
 
-function sortApps(apps: Array<MarketplaceAppWithSecurityReport>, favoriteApps: Array<string>) {
+function sortApps(apps: Array<MarketplaceAppWithSecurityReport>, favoriteApps: Array<string> = []) {
   return apps.sort((a, b) => {
     const priorityA = a.priority || 0;
     const priorityB = b.priority || 0;
@@ -54,23 +55,29 @@ export default function useMarketplaceApps(
   selectedCategoryId: string = MarketplaceCategory.ALL,
   favoriteApps: Array<string> | undefined = undefined,
   isFavoriteAppsLoaded: boolean = false, // eslint-disable-line @typescript-eslint/no-inferrable-types
+  ratings: Record<string, AppRating> | undefined = undefined,
 ) {
   const fetch = useFetch();
   const apiFetch = useApiFetch();
 
   const { data: securityReports, isPlaceholderData: isSecurityReportsPlaceholderData } = useSecurityReports();
 
-  // Update favorite apps only when selectedCategoryId changes to avoid sortApps to be called on each favorite app click
+  const [ sorting, setSorting ] = React.useState<SortValue>();
+  // Set the value only 1 time to avoid unnecessary useQuery calls and re-rendering of all applications
   const [ snapshotFavoriteApps, setSnapshotFavoriteApps ] = React.useState<Array<string> | undefined>();
+  const isInitialSetup = React.useRef(true);
 
   React.useEffect(() => {
-    if (isFavoriteAppsLoaded) {
-      setSnapshotFavoriteApps(favoriteApps);
+    if (isInitialSetup.current && (isFavoriteAppsLoaded || favoriteApps === undefined)) {
+      setSnapshotFavoriteApps(favoriteApps || []);
+      isInitialSetup.current = false;
     }
-  }, [ selectedCategoryId, isFavoriteAppsLoaded ]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [ isFavoriteAppsLoaded, favoriteApps ]);
 
-  const { isPlaceholderData, isError, error, data } = useQuery<unknown, ResourceError<unknown>, Array<MarketplaceAppWithSecurityReport>>({
-    queryKey: [ 'marketplace-dapps', snapshotFavoriteApps, favoriteApps ],
+  const {
+    isPlaceholderData: isAppsPlaceholderData, isError, error, data,
+  } = useQuery<unknown, ResourceError<unknown>, Array<MarketplaceAppWithSecurityReport>>({
+    queryKey: [ 'marketplace-dapps', snapshotFavoriteApps ],
     queryFn: async() => {
       if (!feature.isEnabled) {
         return [];
@@ -80,32 +87,53 @@ export default function useMarketplaceApps(
         return apiFetch('marketplace_dapps', { pathParams: { chainId: config.chain.id } });
       }
     },
-    select: (data) => sortApps(data as Array<MarketplaceAppWithSecurityReport>, snapshotFavoriteApps || []),
+    select: (data) => sortApps(data as Array<MarketplaceAppWithSecurityReport>, snapshotFavoriteApps),
     placeholderData: feature.isEnabled ? Array(9).fill(MARKETPLACE_APP) : undefined,
     staleTime: Infinity,
-    enabled: feature.isEnabled && (!favoriteApps || Boolean(snapshotFavoriteApps)),
+    enabled: feature.isEnabled && Boolean(snapshotFavoriteApps),
   });
 
-  const appsWithSecurityReports = React.useMemo(() =>
-    data?.map((app) => ({ ...app, securityReport: securityReports?.[app.id] })),
-  [ data, securityReports ]);
+  const isPlaceholderData = isAppsPlaceholderData || isSecurityReportsPlaceholderData;
+
+  const appsWithSecurityReportsAndRating = React.useMemo(() =>
+    data?.map((app) => ({
+      ...app,
+      securityReport: securityReports?.[app.id],
+      rating: ratings?.[app.id],
+    })),
+  [ data, securityReports, ratings ]);
 
   const displayedApps = React.useMemo(() => {
-    return appsWithSecurityReports?.filter(app => isAppNameMatches(filter, app) && isAppCategoryMatches(selectedCategoryId, app, favoriteApps || [])) || [];
-  }, [ selectedCategoryId, appsWithSecurityReports, filter, favoriteApps ]);
+    if (isPlaceholderData) {
+      return appsWithSecurityReportsAndRating || [];
+    }
+
+    return appsWithSecurityReportsAndRating
+      ?.filter(app => isAppNameMatches(filter, app) && isAppCategoryMatches(selectedCategoryId, app, favoriteApps))
+      .sort((a, b) => {
+        if (sorting === 'security_score') {
+          return (b.securityReport?.overallInfo.securityScore || 0) - (a.securityReport?.overallInfo.securityScore || 0);
+        }
+        if (sorting === 'rating') {
+          return (b.rating?.value || 0) - (a.rating?.value || 0);
+        }
+        return 0;
+      }) || [];
+  }, [ selectedCategoryId, appsWithSecurityReportsAndRating, filter, favoriteApps, sorting, isPlaceholderData ]);
 
   return React.useMemo(() => ({
     data,
     displayedApps,
     error,
     isError,
-    isPlaceholderData: isPlaceholderData || isSecurityReportsPlaceholderData,
+    isPlaceholderData,
+    setSorting,
   }), [
     data,
     displayedApps,
     error,
     isError,
     isPlaceholderData,
-    isSecurityReportsPlaceholderData,
+    setSorting,
   ]);
 }
diff --git a/ui/marketplace/utils.test.ts b/ui/marketplace/utils.test.ts
new file mode 100644
index 0000000000..c67e046f0d
--- /dev/null
+++ b/ui/marketplace/utils.test.ts
@@ -0,0 +1,58 @@
+import type { NextRouter } from 'next/router';
+
+import { getAppUrl } from './utils';
+
+describe('getAppUrl', () => {
+  let router: NextRouter;
+
+  beforeEach(() => {
+    router = {
+      pathname: '/current/path',
+      asPath: '/current/path?someParam=value',
+      query: {},
+      replace: jest.fn(),
+    } as unknown as NextRouter;
+  });
+
+  it('should return undefined if url is undefined', () => {
+    const result = getAppUrl(undefined, router);
+    expect(result).toBeUndefined();
+  });
+
+  it('should return the custom url if origins match', () => {
+    router.query.url = 'https://example.com/custom-path?query=value';
+    const result = getAppUrl('https://example.com/app', router);
+    expect(result).toBe('https://example.com/custom-path?query=value');
+  });
+
+  it('should remove the query param and return original url if origins do not match', () => {
+    router.query.url = 'https://different.com/custom-path?query=value';
+    const result = getAppUrl('https://example.com/app', router);
+    expect(result).toBe('https://example.com/app?someParam=value');
+    expect(router.replace).toHaveBeenCalledWith({ pathname: '/current/path', query: {}, hash: '' }, undefined, { shallow: true });
+  });
+
+  it('should construct the new url with custom params and hash', () => {
+    router.asPath = '/current/path?path=newPath&newParam=newValue#section';
+    const result = getAppUrl('https://example.com/app?existingParam=1', router);
+    expect(result).toBe('https://example.com/newPath?existingParam=1&newParam=newValue#section');
+  });
+
+  it('should handle url without query and hash', () => {
+    router.asPath = '/current/path';
+    const result = getAppUrl('https://example.com/app', router);
+    expect(result).toBe('https://example.com/app');
+  });
+
+  it('should handle error in custom url parsing', () => {
+    router.query.url = 'invalid-url';
+    const result = getAppUrl('https://example.com/app', router);
+    expect(result).toBe('https://example.com/app?someParam=value');
+  });
+
+  it('should handle error in target url parsing', () => {
+    router.asPath = '/current/path?invalidQuery#section';
+    const result = getAppUrl('invalid-url', router);
+    expect(result).toBe('invalid-url');
+  });
+});
diff --git a/ui/marketplace/utils.ts b/ui/marketplace/utils.ts
new file mode 100644
index 0000000000..646efb482c
--- /dev/null
+++ b/ui/marketplace/utils.ts
@@ -0,0 +1,70 @@
+import type { NextRouter } from 'next/router';
+
+import config from 'configs/app';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import removeQueryParam from 'lib/router/removeQueryParam';
+import type { TOption } from 'ui/shared/sort/Option';
+
+const feature = config.features.marketplace;
+
+export type SortValue = 'rating' | 'security_score';
+
+export const SORT_OPTIONS: Array<TOption<SortValue>> = [
+  { title: 'Default', id: undefined },
+  (feature.isEnabled && feature.rating) && { title: 'Rating', id: 'rating' },
+  (feature.isEnabled && feature.securityReportsUrl) && { title: 'Security score', id: 'security_score' },
+].filter(Boolean) as Array<TOption<SortValue>>;
+
+export function getAppUrl(url: string | undefined, router: NextRouter) {
+  if (!url) {
+    return;
+  }
+
+  try {
+    // get the custom url from the query
+    const customUrl = getQueryParamString(router.query.url);
+
+    if (customUrl) {
+      const customOrigin = new URL(customUrl).origin;
+      const appOrigin = new URL(url).origin;
+      if (customOrigin === appOrigin) {
+        return customUrl;
+      } else {
+        removeQueryParam(router, 'url');
+      }
+    }
+  } catch (err) {}
+
+  try {
+    // get hash and params (using asPath to avoid conflicts with dynamic route params)
+    const [ , queryAndHash ] = router.asPath.split('?');
+    const [ queryString, hash ] = queryAndHash ? queryAndHash.split('#') : [ '', '' ];
+    const customHash = hash ? `#${ hash }` : '';
+    const customParams = new URLSearchParams(queryString);
+
+    // remove reserved params
+    [ 'url', 'action' ].forEach((param) => customParams.delete(param));
+
+    if (customParams.toString() || customHash) {
+      const targetUrl = new URL(url);
+      const targetParams = new URLSearchParams(targetUrl.search);
+
+      let customPath = customParams.get('path');
+      if (customPath) {
+        customPath = customPath.startsWith('/') ? customPath : `/${ customPath }`;
+        targetUrl.pathname = customPath;
+        customParams.delete('path');
+      }
+
+      customParams.forEach((value, key) => {
+        targetParams.append(key, value);
+      });
+
+      targetUrl.search = targetParams.toString();
+      targetUrl.hash = customHash;
+      return targetUrl.toString();
+    }
+  } catch (err) {}
+
+  return url;
+}
diff --git a/ui/messages/ArbitrumL2Messages.tsx b/ui/messages/ArbitrumL2Messages.tsx
new file mode 100644
index 0000000000..d65c1cf773
--- /dev/null
+++ b/ui/messages/ArbitrumL2Messages.tsx
@@ -0,0 +1,102 @@
+import { Hide, Show, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { rightLineArrow, nbsp } from 'lib/html-entities';
+import { ARBITRUM_MESSAGES_ITEM } from 'stubs/arbitrumL2';
+import { generateListStub } from 'stubs/utils';
+import ArbitrumL2MessagesListItem from 'ui/messages/ArbitrumL2MessagesListItem';
+import ArbitrumL2MessagesTable from 'ui/messages/ArbitrumL2MessagesTable';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+
+export type MessagesDirection = 'from-rollup' | 'to-rollup';
+
+type Props = {
+  direction: MessagesDirection;
+}
+
+const ArbitrumL2Messages = ({ direction }: Props) => {
+  const type = direction === 'from-rollup' ? 'withdrawals' : 'deposits';
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'arbitrum_l2_messages',
+    pathParams: { direction },
+    options: {
+      placeholderData: generateListStub<'arbitrum_l2_messages'>(
+        ARBITRUM_MESSAGES_ITEM,
+        50,
+        { next_page_params: { items_count: 50, direction: 'to-rollup', id: 123456 } },
+      ),
+    },
+  });
+
+  const countersQuery = useApiQuery('arbitrum_l2_messages_count', {
+    pathParams: { direction },
+    queryOptions: {
+      placeholderData: 1927029,
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        { data.items.map(((item, index) => (
+          <ArbitrumL2MessagesListItem
+            key={ String(item.id) + (isPlaceholderData ? index : '') }
+            isLoading={ isPlaceholderData }
+            item={ item }
+            direction={ direction }
+          />
+        ))) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <ArbitrumL2MessagesTable
+          items={ data.items }
+          direction={ direction }
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+          isLoading={ isPlaceholderData }
+        />
+      </Hide>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (countersQuery.isError) {
+      return null;
+    }
+
+    return (
+      <Skeleton
+        isLoaded={ !countersQuery.isPlaceholderData }
+        display="inline-block"
+      >
+        A total of { countersQuery.data?.toLocaleString() } { type } found
+      </Skeleton>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle
+        title={ direction === 'from-rollup' ?
+          `Withdrawals (L2${ nbsp }${ rightLineArrow }${ nbsp }L1)` :
+          `Deposits (L1${ nbsp }${ rightLineArrow }${ nbsp }L2)` }
+        withTextAd
+      />
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText={ `There are no ${ type }.` }
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default ArbitrumL2Messages;
diff --git a/ui/messages/ArbitrumL2MessagesListItem.tsx b/ui/messages/ArbitrumL2MessagesListItem.tsx
new file mode 100644
index 0000000000..d291efc9fe
--- /dev/null
+++ b/ui/messages/ArbitrumL2MessagesListItem.tsx
@@ -0,0 +1,128 @@
+import { Skeleton, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ArbitrumL2MessagesItem } from 'types/api/arbitrumL2';
+
+import config from 'configs/app';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import ArbitrumL2MessageStatus from 'ui/shared/statusTag/ArbitrumL2MessageStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+import type { MessagesDirection } from './ArbitrumL2Messages';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: ArbitrumL2MessagesItem; isLoading?: boolean; direction: MessagesDirection };
+
+const ArbitrumL2MessagesListItem = ({ item, isLoading, direction }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'arbitrum') {
+    return null;
+  }
+
+  const l1TxHash = direction === 'from-rollup' ? item.completion_transaction_hash : item.origination_transaction_hash;
+  const l2TxHash = direction === 'from-rollup' ? item.origination_transaction_hash : item.completion_transaction_hash;
+
+  return (
+    <ListItemMobileGrid.Container gridTemplateColumns="110px auto">
+
+      { direction === 'to-rollup' && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>L1 block</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value>
+            { item.origination_transaction_block_number ? (
+              <BlockEntityL1
+                number={ item.origination_transaction_block_number }
+                isLoading={ isLoading }
+                fontSize="sm"
+                lineHeight={ 5 }
+                fontWeight={ 600 }
+              />
+            ) : <chakra.span>N/A</chakra.span> }
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+
+      { direction === 'from-rollup' && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>From</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value>
+            <AddressEntity
+              address={{ hash: item.origination_address }}
+              truncation="constant"
+              isLoading={ isLoading }
+              fontSize="sm"
+              lineHeight={ 5 }
+              fontWeight={ 600 }
+            />
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Message #</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { item.id }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 transaction</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        { l2TxHash ? (
+          <TxEntity
+            isLoading={ isLoading }
+            hash={ l2TxHash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+          />
+        ) : (
+          <chakra.span>
+            N/A
+          </chakra.span>
+        ) }
+      </ListItemMobileGrid.Value>
+
+      { item.origination_timestamp && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value>
+            <TimeAgoWithTooltip
+              timestamp={ item.origination_timestamp }
+              isLoading={ isLoading }
+              display="inline-block"
+            />
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Status</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <ArbitrumL2MessageStatus status={ item.status } isLoading={ isLoading }/>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 transaction</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        { l1TxHash ? (
+          <TxEntityL1
+            isLoading={ isLoading }
+            hash={ l1TxHash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+          />
+        ) : (
+          <chakra.span>
+            N/A
+          </chakra.span>
+        ) }
+      </ListItemMobileGrid.Value>
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default ArbitrumL2MessagesListItem;
diff --git a/ui/messages/ArbitrumL2MessagesTable.tsx b/ui/messages/ArbitrumL2MessagesTable.tsx
new file mode 100644
index 0000000000..8aff18314c
--- /dev/null
+++ b/ui/messages/ArbitrumL2MessagesTable.tsx
@@ -0,0 +1,46 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ArbitrumL2MessagesItem } from 'types/api/arbitrumL2';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import type { MessagesDirection } from './ArbitrumL2Messages';
+import ArbitrumL2MessagesTableItem from './ArbitrumL2MessagesTableItem';
+
+ type Props = {
+   items: Array<ArbitrumL2MessagesItem>;
+   direction: MessagesDirection;
+   top: number;
+   isLoading?: boolean;
+ }
+
+const ArbitrumL2MessagesTable = ({ items, direction, top, isLoading }: Props) => {
+  return (
+    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px">
+      <Thead top={ top }>
+        <Tr>
+          { direction === 'to-rollup' && <Th>L1 block</Th> }
+          { direction === 'from-rollup' && <Th>From</Th> }
+          <Th>Message #</Th>
+          <Th>L2 transaction</Th>
+          <Th>Age</Th>
+          <Th>Status</Th>
+          <Th>L1 transaction</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <ArbitrumL2MessagesTableItem
+            key={ String(item.id) + (isLoading ? index : '') }
+            item={ item }
+            direction={ direction }
+            isLoading={ isLoading }
+          />
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default ArbitrumL2MessagesTable;
diff --git a/ui/messages/ArbitrumL2MessagesTableItem.tsx b/ui/messages/ArbitrumL2MessagesTableItem.tsx
new file mode 100644
index 0000000000..a59319ef31
--- /dev/null
+++ b/ui/messages/ArbitrumL2MessagesTableItem.tsx
@@ -0,0 +1,107 @@
+import { Td, Tr, Skeleton, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ArbitrumL2MessagesItem } from 'types/api/arbitrumL2';
+
+import config from 'configs/app';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import ArbitrumL2MessageStatus from 'ui/shared/statusTag/ArbitrumL2MessageStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+import type { MessagesDirection } from './ArbitrumL2Messages';
+
+const rollupFeature = config.features.rollup;
+
+ type Props = { item: ArbitrumL2MessagesItem; isLoading?: boolean; direction: MessagesDirection };
+
+const ArbitrumL2MessagesTableItem = ({ item, direction, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'arbitrum') {
+    return null;
+  }
+
+  const l1TxHash = direction === 'from-rollup' ? item.completion_transaction_hash : item.origination_transaction_hash;
+  const l2TxHash = direction === 'from-rollup' ? item.origination_transaction_hash : item.completion_transaction_hash;
+
+  return (
+    <Tr>
+      { direction === 'to-rollup' && (
+        <Td verticalAlign="middle">
+          { item.origination_transaction_block_number ? (
+            <BlockEntityL1
+              number={ item.origination_transaction_block_number }
+              isLoading={ isLoading }
+              fontSize="sm"
+              lineHeight={ 5 }
+              fontWeight={ 600 }
+              noIcon
+            />
+          ) : <chakra.span color="text_secondary">N/A</chakra.span> }
+        </Td>
+      ) }
+      { direction === 'from-rollup' && (
+        <Td verticalAlign="middle">
+          <AddressEntity
+            address={{ hash: item.origination_address }}
+            truncation="constant"
+            isLoading={ isLoading }
+            fontSize="sm"
+            lineHeight={ 5 }
+            fontWeight={ 600 }
+          />
+        </Td>
+      ) }
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading }>
+          <span>{ item.id }</span>
+        </Skeleton>
+      </Td>
+      <Td verticalAlign="middle">
+        { l2TxHash ? (
+          <TxEntity
+            isLoading={ isLoading }
+            hash={ l2TxHash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+            noIcon
+          />
+        ) : (
+          <chakra.span color="text_secondary">
+            N/A
+          </chakra.span>
+        ) }
+      </Td>
+      <Td verticalAlign="middle" pr={ 12 }>
+        <TimeAgoWithTooltip
+          timestamp={ item.origination_timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <ArbitrumL2MessageStatus status={ item.status } isLoading={ isLoading }/>
+      </Td>
+      <Td verticalAlign="middle">
+        { l1TxHash ? (
+          <TxEntityL1
+            isLoading={ isLoading }
+            hash={ l1TxHash }
+            truncation="constant_long"
+            noIcon
+            fontSize="sm"
+            lineHeight={ 5 }
+          />
+        ) : (
+          <chakra.span color="text_secondary">
+            N/A
+          </chakra.span>
+        ) }
+      </Td>
+    </Tr>
+  );
+};
+
+export default ArbitrumL2MessagesTableItem;
diff --git a/ui/mudWorlds/MudWorldsListItem.tsx b/ui/mudWorlds/MudWorldsListItem.tsx
new file mode 100644
index 0000000000..94ec895716
--- /dev/null
+++ b/ui/mudWorlds/MudWorldsListItem.tsx
@@ -0,0 +1,49 @@
+import { HStack, Skeleton } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { MudWorldItem } from 'types/api/mudWorlds';
+
+import config from 'configs/app';
+import { currencyUnits } from 'lib/units';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+
+type Props = {
+  item: MudWorldItem;
+  isLoading?: boolean;
+}
+
+const MudWorldsListItem = ({
+  item,
+  isLoading,
+}: Props) => {
+
+  const addressBalance = BigNumber(item.coin_balance).div(BigNumber(10 ** config.chain.currency.decimals));
+
+  return (
+    <ListItemMobile rowGap={ 3 }>
+      <AddressEntity
+        address={ item.address }
+        isLoading={ isLoading }
+        fontWeight={ 700 }
+        mr={ 2 }
+        truncation="constant_long"
+      />
+      <HStack spacing={ 3 } maxW="100%" alignItems="flex-start">
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 } flexShrink={ 0 }>{ `Balance ${ currencyUnits.ether }` }</Skeleton>
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" minW="0" whiteSpace="pre-wrap">
+          <span>{ addressBalance.dp(8).toFormat() }</span>
+        </Skeleton>
+      </HStack>
+      <HStack spacing={ 3 }>
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Txn count</Skeleton>
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary">
+          <span>{ Number(item.tx_count).toLocaleString() }</span>
+        </Skeleton>
+      </HStack>
+    </ListItemMobile>
+  );
+};
+
+export default React.memo(MudWorldsListItem);
diff --git a/ui/mudWorlds/MudWorldsTable.tsx b/ui/mudWorlds/MudWorldsTable.tsx
new file mode 100644
index 0000000000..9e3417911e
--- /dev/null
+++ b/ui/mudWorlds/MudWorldsTable.tsx
@@ -0,0 +1,40 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { MudWorldItem } from 'types/api/mudWorlds';
+
+import { currencyUnits } from 'lib/units';
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import MudWorldsTableItem from './MudWorldsTableItem';
+
+type Props = {
+  items: Array<MudWorldItem>;
+  top: number;
+  isLoading?: boolean;
+}
+
+const MudWorldsTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }}>
+      <Thead top={ top }>
+        <Tr>
+          <Th>Address</Th>
+          <Th isNumeric>{ `Balance ${ currencyUnits.ether }` }</Th>
+          <Th isNumeric>Txn count</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <MudWorldsTableItem
+            key={ String(item.address.hash) + (isLoading ? index : '') }
+            item={ item }
+            isLoading={ isLoading }
+          />
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default MudWorldsTable;
diff --git a/ui/mudWorlds/MudWorldsTableItem.tsx b/ui/mudWorlds/MudWorldsTableItem.tsx
new file mode 100644
index 0000000000..b9f17e3b04
--- /dev/null
+++ b/ui/mudWorlds/MudWorldsTableItem.tsx
@@ -0,0 +1,36 @@
+import { Text, Td, Tr, Skeleton } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { MudWorldItem } from 'types/api/mudWorlds';
+
+import config from 'configs/app';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+
+type Props = { item: MudWorldItem; isLoading?: boolean };
+
+const MudWorldsTableItem = ({ item, isLoading }: Props) => {
+  const addressBalance = BigNumber(item.coin_balance).div(BigNumber(10 ** config.chain.currency.decimals));
+  const addressBalanceChunks = addressBalance.dp(8).toFormat().split('.');
+
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <AddressEntity address={ item.address } isLoading={ isLoading } fontWeight={ 700 }/>
+      </Td>
+      <Td isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="inline-block" maxW="100%">
+          <Text lineHeight="24px" as="span">{ addressBalanceChunks[0] + (addressBalanceChunks[1] ? '.' : '') }</Text>
+          <Text lineHeight="24px" variant="secondary" as="span">{ addressBalanceChunks[1] }</Text>
+        </Skeleton>
+      </Td>
+      <Td isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="inline-block" lineHeight="24px">
+          { Number(item.tx_count).toLocaleString() }
+        </Skeleton>
+      </Td>
+    </Tr>
+  );
+};
+
+export default MudWorldsTableItem;
diff --git a/ui/nameDomain/NameDomainDetails.tsx b/ui/nameDomain/NameDomainDetails.tsx
index 91a74c95ee..69e0693acb 100644
--- a/ui/nameDomain/NameDomainDetails.tsx
+++ b/ui/nameDomain/NameDomainDetails.tsx
@@ -2,23 +2,26 @@ import { Grid, Skeleton, Tooltip, Flex } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
-import type { EnsDomainDetailed } from 'types/api/ens';
+import * as bens from '@blockscout/bens-types';
 
 import { route } from 'nextjs-routes';
 
+import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
 import dayjs from 'lib/date/dayjs';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import stripTrailingSlash from 'lib/stripTrailingSlash';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import TextSeparator from 'ui/shared/TextSeparator';
 
+import NameDomainDetailsAlert from './details/NameDomainDetailsAlert';
 import NameDomainExpiryStatus from './NameDomainExpiryStatus';
 
 interface Props {
-  query: UseQueryResult<EnsDomainDetailed, ResourceError<unknown>>;
+  query: UseQueryResult<bens.DetailedDomain, ResourceError<unknown>>;
 }
 
 const NameDomainDetails = ({ query }: Props) => {
@@ -28,148 +31,217 @@ const NameDomainDetails = ({ query }: Props) => {
   const hasExpired = query.data?.expiry_date && dayjs(query.data.expiry_date).isBefore(dayjs());
 
   return (
-    <Grid columnGap={ 8 } rowGap={ 3 } templateColumns={{ base: 'minmax(0, 1fr)', lg: 'max-content minmax(728px, auto)' }}>
-      { query.data?.registration_date && (
-        <DetailsInfoItem
-          title="Registration date"
-          hint="The date the name was registered"
-          isLoading={ isLoading }
-        >
-          <IconSvg name="clock" boxSize={ 5 } color="gray.500" verticalAlign="middle" isLoading={ isLoading } mr={ 2 }/>
-          <Skeleton isLoaded={ !isLoading } display="inline" whiteSpace="pre-wrap" lineHeight="20px">
-            { dayjs(query.data.registration_date).format('llll') }
-          </Skeleton>
-        </DetailsInfoItem>
-      ) }
-      { query.data?.expiry_date && (
-        <DetailsInfoItem
-          title="Expiration date"
-          // eslint-disable-next-line max-len
-          hint="The date the name expires, upon which there is a 90 day grace period for the owner to renew. After the 90 days, the name is released to the market"
-          isLoading={ isLoading }
-          display="inline-block"
-        >
-          <IconSvg name="clock" boxSize={ 5 } color="gray.500" verticalAlign="middle" isLoading={ isLoading } mr={ 2 } mt="-2px"/>
-          { hasExpired && (
-            <>
+    <>
+      <NameDomainDetailsAlert data={ query.data }/>
+      <Grid columnGap={ 8 } rowGap={ 3 } templateColumns={{ base: 'minmax(0, 1fr)', lg: 'max-content minmax(728px, auto)' }}>
+        { query.data?.registration_date && (
+          <>
+            <DetailsInfoItem.Label
+              hint="The date the name was registered"
+              isLoading={ isLoading }
+            >
+            Registration date
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value>
+              <IconSvg name="clock" boxSize={ 5 } color="gray.500" verticalAlign="middle" isLoading={ isLoading } mr={ 2 }/>
+              <Skeleton isLoaded={ !isLoading } display="inline" whiteSpace="pre-wrap" lineHeight="20px">
+                { dayjs(query.data.registration_date).format('llll') }
+              </Skeleton>
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+
+        { query.data?.expiry_date && (
+          <>
+            <DetailsInfoItem.Label
+            // eslint-disable-next-line max-len
+              hint="The date the name expires, upon which there is a 90 day grace period for the owner to renew. After the 90 days, the name is released to the market"
+              isLoading={ isLoading }
+            >
+            Expiration date
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value>
+              <IconSvg name="clock" boxSize={ 5 } color="gray.500" verticalAlign="middle" isLoading={ isLoading } mr={ 2 } mt="-2px"/>
+              { hasExpired && (
+                <>
+                  <Skeleton isLoaded={ !isLoading } display="inline" whiteSpace="pre-wrap" lineHeight="24px">
+                    { dayjs(query.data.expiry_date).fromNow() }
+                  </Skeleton>
+                  <TextSeparator color="gray.500"/>
+                </>
+              ) }
               <Skeleton isLoaded={ !isLoading } display="inline" whiteSpace="pre-wrap" lineHeight="24px">
-                { dayjs(query.data.expiry_date).fromNow() }
+                { dayjs(query.data.expiry_date).format('llll') }
               </Skeleton>
               <TextSeparator color="gray.500"/>
-            </>
-          ) }
-          <Skeleton isLoaded={ !isLoading } display="inline" whiteSpace="pre-wrap" lineHeight="24px">
-            { dayjs(query.data.expiry_date).format('llll') }
-          </Skeleton>
-          <TextSeparator color="gray.500"/>
-          <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline">
-            <NameDomainExpiryStatus date={ query.data?.expiry_date }/>
-          </Skeleton>
-        </DetailsInfoItem>
-      ) }
-      { query.data?.registrant && (
-        <DetailsInfoItem
-          title="Registrant"
-          hint="The account that owns the domain name and has the rights to edit its ownership and records"
-          isLoading={ isLoading }
-          columnGap={ 2 }
-          flexWrap="nowrap"
-        >
-          <AddressEntity
-            address={ query.data.registrant }
-            isLoading={ isLoading }
-          />
-          <Tooltip label="Lookup for related domain names">
-            <LinkInternal
-              flexShrink={ 0 }
-              display="inline-flex"
-              href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', address: query.data.registrant.hash } }) }
+              <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline">
+                <NameDomainExpiryStatus date={ query.data?.expiry_date }/>
+              </Skeleton>
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+
+        { query.data?.resolver_address && (
+          <>
+            <DetailsInfoItem.Label
+              hint="The resolver contract provides information about a domain name"
+              isLoading={ isLoading }
             >
-              <IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
-            </LinkInternal>
-          </Tooltip>
-        </DetailsInfoItem>
-      ) }
-      { query.data?.owner && (
-        <DetailsInfoItem
-          title="Owner"
-          hint="The account that owns the rights to edit the records of this domain name"
-          isLoading={ isLoading }
-          columnGap={ 2 }
-          flexWrap="nowrap"
-        >
-          <AddressEntity
-            address={ query.data.owner }
-            isLoading={ isLoading }
-          />
-          <Tooltip label="Lookup for related domain names">
-            <LinkInternal
-              flexShrink={ 0 }
-              display="inline-flex"
-              href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', address: query.data.owner.hash } }) }
+              Resolver
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value
             >
-              <IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
-            </LinkInternal>
-          </Tooltip>
-        </DetailsInfoItem>
-      ) }
-      { query.data?.wrapped_owner && (
-        <DetailsInfoItem
-          title="Manager"
-          hint="Owner of this NFT domain in NameWrapper contract"
-          isLoading={ isLoading }
-          columnGap={ 2 }
-          flexWrap="nowrap"
-        >
-          <AddressEntity
-            address={ query.data.wrapped_owner }
-            isLoading={ isLoading }
-          />
-          <Tooltip label="Lookup for related domain names">
-            <LinkInternal
-              flexShrink={ 0 }
-              display="inline-flex"
-              href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', address: query.data.wrapped_owner.hash } }) }
+              <AddressEntity
+                address={ query.data.resolver_address }
+                isLoading={ isLoading }
+              />
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+
+        { query.data?.registrant && (
+          <>
+            <DetailsInfoItem.Label
+              hint="The account that owns the domain name and has the rights to edit its ownership and records"
+              isLoading={ isLoading }
+            >
+            Registrant
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value
+              columnGap={ 2 }
+              flexWrap="nowrap"
             >
-              <IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
-            </LinkInternal>
-          </Tooltip>
-        </DetailsInfoItem>
-      ) }
-      { query.data?.tokens.map((token) => (
-        <DetailsInfoItem
-          key={ token.type }
-          title={ token.type === 'WRAPPED_DOMAIN_TOKEN' ? 'Wrapped token ID' : 'Token ID' }
-          hint={ `The ${ token.type === 'WRAPPED_DOMAIN_TOKEN' ? 'wrapped ' : '' }token ID of this domain name NFT` }
-          isLoading={ isLoading }
-          wordBreak="break-all"
-          whiteSpace="pre-wrap"
-        >
-          <NftEntity hash={ token.contract_hash } id={ token.id } isLoading={ isLoading } noIcon/>
-        </DetailsInfoItem>
-      )) }
-      { otherAddresses.length > 0 && (
-        <DetailsInfoItem
-          title="Other addresses"
-          hint="Other cryptocurrency addresses added to this domain name"
-          isLoading={ isLoading }
-          flexDir="column"
-          alignItems="flex-start"
-        >
-          { otherAddresses.map(([ type, address ]) => (
-            <Flex key={ type } columnGap={ 2 } minW="0" w="100%" overflow="hidden">
-              <Skeleton isLoaded={ !isLoading }>{ type }</Skeleton>
               <AddressEntity
-                address={{ hash: address }}
+                address={ query.data.registrant }
                 isLoading={ isLoading }
-                noLink
-                noIcon
               />
-            </Flex>
-          )) }
-        </DetailsInfoItem>
-      ) }
-    </Grid>
+              <Tooltip label="Lookup for related domain names">
+                <LinkInternal
+                  flexShrink={ 0 }
+                  display="inline-flex"
+                  href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', address: query.data.registrant.hash } }) }
+                >
+                  <IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
+                </LinkInternal>
+              </Tooltip>
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+
+        { query.data?.owner && (
+          <>
+            <DetailsInfoItem.Label
+              hint="The account that owns the rights to edit the records of this domain name"
+              isLoading={ isLoading }
+            >
+            Owner
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value
+              columnGap={ 2 }
+              flexWrap="nowrap"
+            >
+              <AddressEntity
+                address={ query.data.owner }
+                isLoading={ isLoading }
+              />
+              <Tooltip label="Lookup for related domain names">
+                <LinkInternal
+                  flexShrink={ 0 }
+                  display="inline-flex"
+                  href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', address: query.data.owner.hash } }) }
+                >
+                  <IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
+                </LinkInternal>
+              </Tooltip>
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+
+        { query.data?.wrapped_owner && (
+          <>
+            <DetailsInfoItem.Label
+              hint="Owner of this NFT domain in NameWrapper contract"
+              isLoading={ isLoading }
+            >
+            Manager
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value
+              columnGap={ 2 }
+              flexWrap="nowrap"
+            >
+              <AddressEntity
+                address={ query.data.wrapped_owner }
+                isLoading={ isLoading }
+              />
+              <Tooltip label="Lookup for related domain names">
+                <LinkInternal
+                  flexShrink={ 0 }
+                  display="inline-flex"
+                  href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', address: query.data.wrapped_owner.hash } }) }
+                >
+                  <IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
+                </LinkInternal>
+              </Tooltip>
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+
+        { query.data?.tokens.map((token) => {
+          const isProtocolBaseChain = stripTrailingSlash(query.data.protocol?.deployment_blockscout_base_url ?? '') === config.app.baseUrl;
+          const entityProps = {
+            isExternal: !isProtocolBaseChain ? true : false,
+            href: !isProtocolBaseChain ? (
+              stripTrailingSlash(query.data.protocol?.deployment_blockscout_base_url ?? '') +
+            route({ pathname: '/token/[hash]/instance/[id]', query: { hash: token.contract_hash, id: token.id } })
+            ) : undefined,
+          };
+
+          return (
+            <React.Fragment key={ token.type }>
+              <DetailsInfoItem.Label
+                hint={ `The ${ token.type === bens.TokenType.WRAPPED_DOMAIN_TOKEN ? 'wrapped ' : '' }token ID of this domain name NFT` }
+                isLoading={ isLoading }
+              >
+                { token.type === bens.TokenType.WRAPPED_DOMAIN_TOKEN ? 'Wrapped token ID' : 'Token ID' }
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value
+                wordBreak="break-all"
+                whiteSpace="pre-wrap"
+              >
+                <NftEntity { ...entityProps } hash={ token.contract_hash } id={ token.id } isLoading={ isLoading } noIcon/>
+              </DetailsInfoItem.Value>
+            </React.Fragment>
+          );
+        }) }
+
+        { otherAddresses.length > 0 && (
+          <>
+            <DetailsInfoItem.Label
+              hint="Other cryptocurrency addresses added to this domain name"
+              isLoading={ isLoading }
+            >
+            Other addresses
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value
+              flexDir="column"
+              alignItems="flex-start"
+            >
+              { otherAddresses.map(([ type, address ]) => (
+                <Flex key={ type } columnGap={ 2 } minW="0" w="100%" overflow="hidden">
+                  <Skeleton isLoaded={ !isLoading }>{ type }</Skeleton>
+                  <AddressEntity
+                    address={{ hash: address }}
+                    isLoading={ isLoading }
+                    noLink
+                    noIcon
+                  />
+                </Flex>
+              )) }
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+      </Grid>
+    </>
   );
 };
 
diff --git a/ui/nameDomain/NameDomainHistory.tsx b/ui/nameDomain/NameDomainHistory.tsx
index ba5747ad46..40780267f6 100644
--- a/ui/nameDomain/NameDomainHistory.tsx
+++ b/ui/nameDomain/NameDomainHistory.tsx
@@ -2,6 +2,8 @@ import { Box, Hide, Show } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import type * as bens from '@blockscout/bens-types';
+
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import getQueryParamString from 'lib/router/getQueryParamString';
@@ -12,7 +14,11 @@ import NameDomainHistoryListItem from './history/NameDomainHistoryListItem';
 import NameDomainHistoryTable from './history/NameDomainHistoryTable';
 import { getNextSortValue, type Sort, type SortField } from './history/utils';
 
-const NameDomainHistory = () => {
+interface Props {
+  domain: bens.DetailedDomain | undefined;
+}
+
+const NameDomainHistory = ({ domain }: Props) => {
   const router = useRouter();
   const domainName = getQueryParamString(router.query.name);
 
@@ -40,12 +46,20 @@ const NameDomainHistory = () => {
     <>
       <Show below="lg" ssr={ false }>
         <Box>
-          { data?.items.map((item, index) => <NameDomainHistoryListItem key={ index } { ...item } isLoading={ isPlaceholderData }/>) }
+          { data?.items.map((item, index) => (
+            <NameDomainHistoryListItem
+              key={ index }
+              event={ item }
+              domain={ domain }
+              isLoading={ isPlaceholderData }
+            />
+          )) }
         </Box>
       </Show>
       <Hide below="lg" ssr={ false }>
         <NameDomainHistoryTable
-          data={ data }
+          history={ data }
+          domain={ domain }
           isLoading={ isPlaceholderData }
           sort={ sort }
           onSortToggle={ handleSortToggle }
diff --git a/ui/nameDomain/details/NameDomainDetailsAlert.tsx b/ui/nameDomain/details/NameDomainDetailsAlert.tsx
new file mode 100644
index 0000000000..02b74ec93f
--- /dev/null
+++ b/ui/nameDomain/details/NameDomainDetailsAlert.tsx
@@ -0,0 +1,28 @@
+import { Alert } from '@chakra-ui/react';
+import React from 'react';
+
+import type * as bens from '@blockscout/bens-types';
+
+import LinkExternal from 'ui/shared/links/LinkExternal';
+
+interface Props {
+  data: bens.DetailedDomain | undefined;
+}
+
+const NameDomainDetailsAlert = ({ data }: Props) => {
+
+  if (!data?.stored_offchain && !data?.resolved_with_wildcard) {
+    return null;
+  }
+
+  return (
+    <Alert status="info" colorScheme="gray" display="inline-block" whiteSpace="pre-wrap" mb={ 6 }>
+      <span>The domain name is resolved offchain using </span>
+      { data.stored_offchain && <LinkExternal href="https://eips.ethereum.org/EIPS/eip-3668">EIP-3668: CCIP Read</LinkExternal> }
+      { data.stored_offchain && data.resolved_with_wildcard && <span> & </span> }
+      { data.resolved_with_wildcard && <LinkExternal href="https://eips.ethereum.org/EIPS/eip-2544">EIP-2544: Wildcard Resolution</LinkExternal> }
+    </Alert>
+  );
+};
+
+export default React.memo(NameDomainDetailsAlert);
diff --git a/ui/nameDomain/history/NameDomainHistoryListItem.tsx b/ui/nameDomain/history/NameDomainHistoryListItem.tsx
index 11cf9877fa..ebc43e607e 100644
--- a/ui/nameDomain/history/NameDomainHistoryListItem.tsx
+++ b/ui/nameDomain/history/NameDomainHistoryListItem.tsx
@@ -1,47 +1,64 @@
-import { Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomainEvent } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
-import dayjs from 'lib/date/dayjs';
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import stripTrailingSlash from 'lib/stripTrailingSlash';
 import Tag from 'ui/shared/chakra/Tag';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
-type Props = EnsDomainEvent & {
+interface Props {
+  event: bens.DomainEvent;
+  domain: bens.DetailedDomain | undefined;
   isLoading?: boolean;
 }
 
-const NameDomainHistoryListItem = ({ isLoading, transaction_hash: transactionHash, timestamp, from_address: fromAddress, action }: Props) => {
+const NameDomainHistoryListItem = ({ isLoading, domain, event }: Props) => {
+  const isProtocolBaseChain = stripTrailingSlash(domain?.protocol?.deployment_blockscout_base_url ?? '') === config.app.baseUrl;
+  const txEntityProps = {
+    isExternal: !isProtocolBaseChain ? true : false,
+    href: !isProtocolBaseChain ? (
+      stripTrailingSlash(domain?.protocol?.deployment_blockscout_base_url ?? '') +
+      route({ pathname: '/tx/[hash]', query: { hash: event.transaction_hash } })
+    ) : undefined,
+  };
+
   return (
     <ListItemMobileGrid.Container>
       <ListItemMobileGrid.Label isLoading={ isLoading }>Txn hash</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <TxEntity hash={ transactionHash } isLoading={ isLoading } fontWeight={ 500 } truncation="constant_long"/>
+        <TxEntity { ...txEntityProps } hash={ event.transaction_hash } isLoading={ isLoading } fontWeight={ 500 } truncation="constant_long"/>
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block">
-          <span>{ dayjs(timestamp).fromNow() }</span>
-        </Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ event.timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
       </ListItemMobileGrid.Value>
 
-      { fromAddress && (
+      { event.from_address && (
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>From</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
-            <AddressEntity address={ fromAddress } isLoading={ isLoading } truncation="constant"/>
+            <AddressEntity address={ event.from_address } isLoading={ isLoading } truncation="constant"/>
           </ListItemMobileGrid.Value>
         </>
       ) }
 
-      { action && (
+      { event.action && (
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>Method</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
-            <Tag colorScheme="gray" isLoading={ isLoading }>{ action }</Tag>
+            <Tag colorScheme="gray" isLoading={ isLoading }>{ event.action }</Tag>
           </ListItemMobileGrid.Value>
         </>
       ) }
diff --git a/ui/nameDomain/history/NameDomainHistoryTable.tsx b/ui/nameDomain/history/NameDomainHistoryTable.tsx
index f6560372eb..58154299ee 100644
--- a/ui/nameDomain/history/NameDomainHistoryTable.tsx
+++ b/ui/nameDomain/history/NameDomainHistoryTable.tsx
@@ -1,7 +1,7 @@
 import { Table, Tbody, Tr, Th, Link } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomainEventsResponse } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
 import IconSvg from 'ui/shared/IconSvg';
 import { default as Thead } from 'ui/shared/TheadSticky';
@@ -11,13 +11,14 @@ import type { Sort } from './utils';
 import { sortFn } from './utils';
 
 interface Props {
-  data: EnsDomainEventsResponse | undefined;
+  history: bens.ListDomainEventsResponse | undefined;
+  domain: bens.DetailedDomain | undefined;
   isLoading?: boolean;
   sort: Sort | undefined;
   onSortToggle: (event: React.MouseEvent) => void;
 }
 
-const NameDomainHistoryTable = ({ data, isLoading, sort, onSortToggle }: Props) => {
+const NameDomainHistoryTable = ({ history, domain, isLoading, sort, onSortToggle }: Props) => {
   const sortIconTransform = sort?.includes('asc') ? 'rotate(-90deg)' : 'rotate(90deg)';
 
   return (
@@ -47,10 +48,10 @@ const NameDomainHistoryTable = ({ data, isLoading, sort, onSortToggle }: Props)
       </Thead>
       <Tbody>
         {
-          data?.items
+          history?.items
             .slice()
             .sort(sortFn(sort))
-            .map((item, index) => <NameDomainHistoryTableItem key={ index } { ...item } isLoading={ isLoading }/>)
+            .map((item, index) => <NameDomainHistoryTableItem key={ index } event={ item } domain={ domain } isLoading={ isLoading }/>)
         }
       </Tbody>
     </Table>
diff --git a/ui/nameDomain/history/NameDomainHistoryTableItem.tsx b/ui/nameDomain/history/NameDomainHistoryTableItem.tsx
index ff28b0ffe3..cd287cc98d 100644
--- a/ui/nameDomain/history/NameDomainHistoryTableItem.tsx
+++ b/ui/nameDomain/history/NameDomainHistoryTableItem.tsx
@@ -1,24 +1,39 @@
-import { Tr, Td, Skeleton } from '@chakra-ui/react';
+import { Tr, Td } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomainEvent } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
-import dayjs from 'lib/date/dayjs';
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import stripTrailingSlash from 'lib/stripTrailingSlash';
 import Tag from 'ui/shared/chakra/Tag';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
-type Props = EnsDomainEvent & {
+interface Props {
+  event: bens.DomainEvent;
+  domain: bens.DetailedDomain | undefined;
   isLoading?: boolean;
 }
 
-const NameDomainHistoryTableItem = ({ isLoading, transaction_hash: transactionHash, from_address: fromAddress, action, timestamp }: Props) => {
+const NameDomainHistoryTableItem = ({ isLoading, event, domain }: Props) => {
+  const isProtocolBaseChain = stripTrailingSlash(domain?.protocol?.deployment_blockscout_base_url ?? '') === config.app.baseUrl;
+  const txEntityProps = {
+    isExternal: !isProtocolBaseChain ? true : false,
+    href: !isProtocolBaseChain ? (
+      stripTrailingSlash(domain?.protocol?.deployment_blockscout_base_url ?? '') +
+      route({ pathname: '/tx/[hash]', query: { hash: event.transaction_hash } })
+    ) : undefined,
+  };
 
   return (
     <Tr>
       <Td verticalAlign="middle">
         <TxEntity
-          hash={ transactionHash }
+          { ...txEntityProps }
+          hash={ event.transaction_hash }
           isLoading={ isLoading }
           fontWeight={ 700 }
           noIcon
@@ -26,15 +41,18 @@ const NameDomainHistoryTableItem = ({ isLoading, transaction_hash: transactionHa
         />
       </Td>
       <Td pl={ 9 } verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block">
-          <span>{ dayjs(timestamp).fromNow() }</span>
-        </Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ event.timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
       </Td>
       <Td verticalAlign="middle">
-        { fromAddress && <AddressEntity address={ fromAddress } isLoading={ isLoading } truncation="constant"/> }
+        { event.from_address && <AddressEntity address={ event.from_address } isLoading={ isLoading } truncation="constant"/> }
       </Td>
       <Td verticalAlign="middle">
-        { action && <Tag colorScheme="gray" isLoading={ isLoading }>{ action }</Tag> }
+        { event.action && <Tag colorScheme="gray" isLoading={ isLoading }>{ event.action }</Tag> }
       </Td>
     </Tr>
   );
diff --git a/ui/nameDomain/history/utils.ts b/ui/nameDomain/history/utils.ts
index 168050df2d..585856901e 100644
--- a/ui/nameDomain/history/utils.ts
+++ b/ui/nameDomain/history/utils.ts
@@ -1,4 +1,4 @@
-import type { EnsDomainEvent } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
 import getNextSortValueShared from 'ui/shared/sort/getNextSortValue';
 
@@ -11,7 +11,7 @@ const SORT_SEQUENCE: Record<SortField, Array<Sort | undefined>> = {
 
 export const getNextSortValue = (getNextSortValueShared<SortField, Sort>).bind(undefined, SORT_SEQUENCE);
 
-export const sortFn = (sort: Sort | undefined) => (a: EnsDomainEvent, b: EnsDomainEvent) => {
+export const sortFn = (sort: Sort | undefined) => (a: bens.DomainEvent, b: bens.DomainEvent) => {
   switch (sort) {
     case 'timestamp-asc': {
       return b.timestamp.localeCompare(a.timestamp);
diff --git a/ui/nameDomains/NameDomainsActionBar.tsx b/ui/nameDomains/NameDomainsActionBar.tsx
index ff57107799..8518abceb2 100644
--- a/ui/nameDomains/NameDomainsActionBar.tsx
+++ b/ui/nameDomains/NameDomainsActionBar.tsx
@@ -1,6 +1,7 @@
-import { Checkbox, CheckboxGroup, HStack, Text } from '@chakra-ui/react';
+import { Box, Checkbox, CheckboxGroup, Flex, HStack, Image, Link, Text, VStack, chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import type * as bens from '@blockscout/bens-types';
 import type { EnsDomainLookupFiltersOptions } from 'types/api/ens';
 import type { PaginationParams } from 'ui/shared/pagination/types';
 
@@ -8,6 +9,7 @@ import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
 import ActionBar from 'ui/shared/ActionBar';
 import FilterInput from 'ui/shared/filters/FilterInput';
 import PopoverFilter from 'ui/shared/filters/PopoverFilter';
+import IconSvg from 'ui/shared/IconSvg';
 import Pagination from 'ui/shared/pagination/Pagination';
 import Sort from 'ui/shared/sort/Sort';
 
@@ -20,6 +22,9 @@ interface Props {
   onSearchChange: (value: string) => void;
   filterValue: EnsDomainLookupFiltersOptions;
   onFilterValueChange: (nextValue: EnsDomainLookupFiltersOptions) => void;
+  protocolsData: Array<bens.ProtocolInfo> | undefined;
+  protocolsFilterValue: Array<string>;
+  onProtocolsFilterChange: (nextValue: Array<string>) => void;
   sort: TSort | undefined;
   onSortChange: (nextValue: TSort | undefined) => void;
   isLoading: boolean;
@@ -36,6 +41,9 @@ const NameDomainsActionBar = ({
   isLoading,
   isAddressSearch,
   pagination,
+  protocolsData,
+  protocolsFilterValue,
+  onProtocolsFilterChange,
 }: Props) => {
   const isInitialLoading = useIsInitialLoading(isLoading);
 
@@ -45,32 +53,78 @@ const NameDomainsActionBar = ({
       minW={{ base: 'auto', lg: '250px' }}
       size="xs"
       onChange={ onSearchChange }
-      placeholder="Search by name"
+      placeholder="Search by name or address"
       initialValue={ searchTerm }
       isLoading={ isInitialLoading }
     />
   );
 
+  const handleProtocolReset = React.useCallback(() => {
+    onProtocolsFilterChange([]);
+  }, [ onProtocolsFilterChange ]);
+
+  const filterGroupDivider = <Box w="100%" borderBottomWidth="1px" borderBottomColor="divider" my={ 4 }/>;
+
+  const appliedFiltersNum = filterValue.length + (protocolsData && protocolsData.length > 1 ? protocolsFilterValue.length : 0);
+
   const filter = (
-    <PopoverFilter appliedFiltersNum={ filterValue.length } contentProps={{ w: '220px' }} isLoading={ isInitialLoading }>
+    <PopoverFilter appliedFiltersNum={ appliedFiltersNum } contentProps={{ minW: '220px', w: 'fit-content' }} isLoading={ isInitialLoading }>
       <div>
+        { protocolsData && protocolsData.length > 1 && (
+          <>
+            <Flex justifyContent="space-between" fontSize="sm" mb={ 3 }>
+              <Text fontWeight={ 600 } variant="secondary">Protocol</Text>
+              <Link
+                onClick={ handleProtocolReset }
+                color={ protocolsData.length > 0 ? 'link' : 'text_secondary' }
+                _hover={{
+                  color: protocolsData.length > 0 ? 'link_hovered' : 'text_secondary',
+                }}
+              >
+                Reset
+              </Link>
+            </Flex>
+            <CheckboxGroup size="lg" value={ protocolsFilterValue } defaultValue={ protocolsFilterValue } onChange={ onProtocolsFilterChange }>
+              <VStack gap={ 5 } alignItems="flex-start">
+                { protocolsData.map((protocol) => {
+                  const topLevelDomains = protocol.tld_list.map((domain) => `.${ domain }`).join(' ');
+                  return (
+                    <Checkbox key={ protocol.id } value={ protocol.id }>
+                      <Flex alignItems="center">
+                        <Image
+                          src={ protocol.icon_url }
+                          boxSize={ 5 }
+                          borderRadius="sm"
+                          mr={ 2 }
+                          alt={ `${ protocol.title } protocol icon` }
+                          fallback={ <IconSvg name="ENS_slim" boxSize={ 5 } mr={ 2 }/> }
+                          fallbackStrategy={ protocol.icon_url ? 'onError' : 'beforeLoadOrError' }
+                        />
+                        <span>{ protocol.short_name }</span>
+                        <chakra.span color="text_secondary" whiteSpace="pre"> { topLevelDomains }</chakra.span>
+                      </Flex>
+                    </Checkbox>
+                  );
+                }) }
+              </VStack>
+            </CheckboxGroup>
+            { filterGroupDivider }
+          </>
+        ) }
         <CheckboxGroup size="lg" onChange={ onFilterValueChange } value={ filterValue } defaultValue={ filterValue }>
           <Text variant="secondary" fontWeight={ 600 } mb={ 3 } fontSize="sm">Address</Text>
-          <Checkbox value="owned_by" display="block" isDisabled={ !isAddressSearch }>
+          <Checkbox value="owned_by" isDisabled={ !isAddressSearch } display="block">
             Owned by
           </Checkbox>
           <Checkbox
             value="resolved_to"
-            display="block"
             mt={ 5 }
-            mb={ 4 }
-            pb={ 4 }
-            borderBottom="1px solid"
-            borderColor="divider"
             isDisabled={ !isAddressSearch }
+            display="block"
           >
             Resolved to address
           </Checkbox>
+          { filterGroupDivider }
           <Text variant="secondary" fontWeight={ 600 } mb={ 3 } fontSize="sm">Status</Text>
           <Checkbox value="with_inactive" display="block">
             Include expired
@@ -82,9 +136,10 @@ const NameDomainsActionBar = ({
 
   const sortButton = (
     <Sort
+      name="name_domains_sorting"
+      defaultValue={ sort }
       options={ SORT_OPTIONS }
-      sort={ sort }
-      setSort={ onSortChange }
+      onChange={ onSortChange }
       isLoading={ isInitialLoading }
     />
   );
diff --git a/ui/nameDomains/NameDomainsListItem.tsx b/ui/nameDomains/NameDomainsListItem.tsx
index ac7275d9cc..63ba315ffa 100644
--- a/ui/nameDomains/NameDomainsListItem.tsx
+++ b/ui/nameDomains/NameDomainsListItem.tsx
@@ -1,7 +1,7 @@
 import { Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomain } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
 import dayjs from 'lib/date/dayjs';
 import NameDomainExpiryStatus from 'ui/nameDomain/NameDomainExpiryStatus';
@@ -9,16 +9,23 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 
-interface Props extends EnsDomain {
+interface Props extends bens.Domain {
   isLoading: boolean;
 }
 
-const NameDomainsListItem = ({ name, isLoading, resolved_address: resolvedAddress, registration_date: registrationDate, expiry_date: expiryDate }: Props) => {
+const NameDomainsListItem = ({
+  name,
+  isLoading,
+  resolved_address: resolvedAddress,
+  registration_date: registrationDate,
+  expiry_date: expiryDate,
+  protocol,
+}: Props) => {
   return (
     <ListItemMobileGrid.Container>
       <ListItemMobileGrid.Label isLoading={ isLoading }>Domain</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <EnsEntity name={ name } isLoading={ isLoading } fontWeight={ 500 }/>
+        <EnsEntity domain={ name } protocol={ protocol } isLoading={ isLoading } fontWeight={ 500 }/>
       </ListItemMobileGrid.Value>
 
       { resolvedAddress && (
@@ -35,7 +42,7 @@ const NameDomainsListItem = ({ name, isLoading, resolved_address: resolvedAddres
           <ListItemMobileGrid.Label isLoading={ isLoading }>Registered on</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
             <Skeleton isLoaded={ !isLoading }>
-              <div>{ dayjs(registrationDate).format('MMM DD YYYY HH:mm:ss A') }</div>
+              <div>{ dayjs(registrationDate).format('lll') }</div>
               <div> { dayjs(registrationDate).fromNow() }</div>
             </Skeleton>
           </ListItemMobileGrid.Value>
@@ -47,7 +54,7 @@ const NameDomainsListItem = ({ name, isLoading, resolved_address: resolvedAddres
           <ListItemMobileGrid.Label isLoading={ isLoading }>Expiration date</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
             <Skeleton isLoaded={ !isLoading } whiteSpace="pre-wrap">
-              <div>{ dayjs(expiryDate).format('MMM DD YYYY HH:mm:ss A') } </div>
+              <div>{ dayjs(expiryDate).format('lll') } </div>
               <NameDomainExpiryStatus date={ expiryDate }/>
             </Skeleton>
           </ListItemMobileGrid.Value>
diff --git a/ui/nameDomains/NameDomainsTable.tsx b/ui/nameDomains/NameDomainsTable.tsx
index ec46b7cec8..2497575032 100644
--- a/ui/nameDomains/NameDomainsTable.tsx
+++ b/ui/nameDomains/NameDomainsTable.tsx
@@ -1,8 +1,9 @@
 import { Table, Tbody, Tr, Th, Link } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomainLookupResponse } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import IconSvg from 'ui/shared/IconSvg';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
@@ -10,7 +11,7 @@ import NameDomainsTableItem from './NameDomainsTableItem';
 import { type Sort } from './utils';
 
 interface Props {
-  data: EnsDomainLookupResponse | undefined;
+  data: bens.LookupDomainNameResponse | undefined;
   isLoading?: boolean;
   sort: Sort | undefined;
   onSortToggle: (event: React.MouseEvent) => void;
@@ -21,7 +22,7 @@ const NameDomainsTable = ({ data, isLoading, sort, onSortToggle }: Props) => {
 
   return (
     <Table variant="simple" size="sm">
-      <Thead top={ 80 }>
+      <Thead top={ ACTION_BAR_HEIGHT_DESKTOP }>
         <Tr>
           <Th width="25%">Domain</Th>
           <Th width="25%">Address</Th>
diff --git a/ui/nameDomains/NameDomainsTableItem.tsx b/ui/nameDomains/NameDomainsTableItem.tsx
index a4147ae8cf..d9d1bc5479 100644
--- a/ui/nameDomains/NameDomainsTableItem.tsx
+++ b/ui/nameDomains/NameDomainsTableItem.tsx
@@ -1,23 +1,30 @@
 import { chakra, Tr, Td, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EnsDomain } from 'types/api/ens';
+import type * as bens from '@blockscout/bens-types';
 
 import dayjs from 'lib/date/dayjs';
 import NameDomainExpiryStatus from 'ui/nameDomain/NameDomainExpiryStatus';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 
-type Props = EnsDomain & {
+type Props = bens.Domain & {
   isLoading?: boolean;
 }
 
-const NameDomainsTableItem = ({ isLoading, name, resolved_address: resolvedAddress, registration_date: registrationDate, expiry_date: expiryDate }: Props) => {
+const NameDomainsTableItem = ({
+  isLoading,
+  name,
+  resolved_address: resolvedAddress,
+  registration_date: registrationDate,
+  expiry_date: expiryDate,
+  protocol,
+}: Props) => {
 
   return (
     <Tr>
       <Td verticalAlign="middle">
-        <EnsEntity name={ name } isLoading={ isLoading } fontWeight={ 600 }/>
+        <EnsEntity domain={ name } protocol={ protocol } isLoading={ isLoading } fontWeight={ 600 }/>
       </Td>
       <Td verticalAlign="middle">
         { resolvedAddress && <AddressEntity address={ resolvedAddress } isLoading={ isLoading } fontWeight={ 500 }/> }
@@ -25,7 +32,7 @@ const NameDomainsTableItem = ({ isLoading, name, resolved_address: resolvedAddre
       <Td verticalAlign="middle" pl={ 9 }>
         { registrationDate && (
           <Skeleton isLoaded={ !isLoading }>
-            { dayjs(registrationDate).format('MMM DD YYYY HH:mm:ss A') }
+            { dayjs(registrationDate).format('lll') }
             <chakra.span color="text_secondary"> { dayjs(registrationDate).fromNow() }</chakra.span>
           </Skeleton>
         ) }
@@ -33,7 +40,7 @@ const NameDomainsTableItem = ({ isLoading, name, resolved_address: resolvedAddre
       <Td verticalAlign="middle">
         { expiryDate && (
           <Skeleton isLoaded={ !isLoading } whiteSpace="pre-wrap">
-            <span>{ dayjs(expiryDate).format('MMM DD YYYY HH:mm:ss A') } </span>
+            <span>{ dayjs(expiryDate).format('lll') } </span>
             <NameDomainExpiryStatus date={ expiryDate }/>
           </Skeleton>
         ) }
diff --git a/ui/nameDomains/utils.ts b/ui/nameDomains/utils.ts
index c240e5c93e..431b8437db 100644
--- a/ui/nameDomains/utils.ts
+++ b/ui/nameDomains/utils.ts
@@ -1,12 +1,12 @@
 import type { EnsLookupSorting } from 'types/api/ens';
 
 import getNextSortValueShared from 'ui/shared/sort/getNextSortValue';
-import type { Option } from 'ui/shared/sort/Sort';
+import type { TOption } from 'ui/shared/sort/Option';
 
 export type SortField = EnsLookupSorting['sort'];
 export type Sort = `${ EnsLookupSorting['sort'] }-${ EnsLookupSorting['order'] }`;
 
-export const SORT_OPTIONS: Array<Option<Sort>> = [
+export const SORT_OPTIONS: Array<TOption<Sort>> = [
   { title: 'Default', id: undefined },
   { title: 'Registered on descending', id: 'registration_date-DESC' },
   { title: 'Registered on ascending', id: 'registration_date-ASC' },
diff --git a/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx
index 2e61672773..76140ce1f6 100644
--- a/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx
+++ b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx
@@ -4,20 +4,18 @@ import React from 'react';
 import type { OptimisticL2OutputRootsItem } from 'types/api/optimisticL2';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
 type Props = { item: OptimisticL2OutputRootsItem; isLoading?: boolean };
 
 const OptimisticL2OutputRootsListItem = ({ item, isLoading }: Props) => {
-  const timeAgo = dayjs(item.l1_timestamp).fromNow();
-
   if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') {
     return null;
   }
@@ -32,9 +30,11 @@ const OptimisticL2OutputRootsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
-          <span>{ timeAgo }</span>
-        </Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ item.l1_timestamp }
+          isLoading={ isLoading }
+          display="inline-block"
+        />
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>L2 block #</ListItemMobileGrid.Label>
diff --git a/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx
index 6a2e6d9fb5..25fb2d7da8 100644
--- a/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx
+++ b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx
@@ -4,19 +4,17 @@ import React from 'react';
 import type { OptimisticL2OutputRootsItem } from 'types/api/optimisticL2';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import HashStringShorten from 'ui/shared/HashStringShorten';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
 type Props = { item: OptimisticL2OutputRootsItem; isLoading?: boolean };
 
 const OptimisticL2OutputRootsTableItem = ({ item, isLoading }: Props) => {
-  const timeAgo = dayjs(item.l1_timestamp).fromNow();
-
   if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') {
     return null;
   }
@@ -27,7 +25,12 @@ const OptimisticL2OutputRootsTableItem = ({ item, isLoading }: Props) => {
         <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.l2_output_index }</Skeleton>
       </Td>
       <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block"><span>{ timeAgo }</span></Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ item.l1_timestamp }
+          isLoading={ isLoading }
+          display="inline-block"
+          color="text_secondary"
+        />
       </Td>
       <Td verticalAlign="middle">
         <BlockEntityL2
diff --git a/ui/pages/Accounts.pw.tsx b/ui/pages/Accounts.pw.tsx
index 77eb639235..60a7b377bf 100644
--- a/ui/pages/Accounts.pw.tsx
+++ b/ui/pages/Accounts.pw.tsx
@@ -1,52 +1,43 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import type { AddressesResponse } from 'types/api/addresses';
 
 import * as addressMocks from 'mocks/address/address';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import Accounts from './Accounts';
 
-const ADDRESSES_API_URL = buildApiUrl('addresses');
-
 const addresses: AddressesResponse = {
   items: [
     {
       ...addressMocks.withName,
       tx_count: '1',
       coin_balance: '12345678901234567890000',
-    }, {
+    },
+    {
       ...addressMocks.token,
       tx_count: '109123890123',
       coin_balance: '22222345678901234567890000',
       ens_domain_name: null,
-    }, {
+    },
+    {
       ...addressMocks.withoutName,
       tx_count: '11',
       coin_balance: '1000000000000000000',
     },
+    {
+      ...addressMocks.eoa,
+      tx_count: '420',
+      coin_balance: '123456',
+    },
   ],
   total_supply: '25222000',
   next_page_params: null,
 };
 
-test('base view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(ADDRESSES_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(addresses),
-  }));
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Accounts/>
-    </TestApp>,
-  );
-
+test('base view +@mobile +@dark-mode', async({ render, mockTextAd, mockApiResponse }) => {
+  await mockTextAd();
+  await mockApiResponse('addresses', addresses);
+  const component = await render(<Accounts/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/pages/Accounts.tsx b/ui/pages/Accounts.tsx
index ce9a8009bc..987e1aa8d2 100644
--- a/ui/pages/Accounts.tsx
+++ b/ui/pages/Accounts.tsx
@@ -6,7 +6,7 @@ import { TOP_ADDRESS } from 'stubs/address';
 import { generateListStub } from 'stubs/utils';
 import AddressesListItem from 'ui/addresses/AddressesListItem';
 import AddressesTable from 'ui/addresses/AddressesTable';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
@@ -48,7 +48,7 @@ const Accounts = () => {
     <>
       <Hide below="lg" ssr={ false }>
         <AddressesTable
-          top={ pagination.isVisible ? 80 : 0 }
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
           items={ data.items }
           totalSupply={ totalSupply }
           pageStartIndex={ pageStartIndex }
diff --git a/ui/pages/AccountsLabelSearch.pw.tsx b/ui/pages/AccountsLabelSearch.pw.tsx
new file mode 100644
index 0000000000..86f637ca86
--- /dev/null
+++ b/ui/pages/AccountsLabelSearch.pw.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import type { AddressesMetadataSearchResult } from 'types/api/addresses';
+
+import * as addressMocks from 'mocks/address/address';
+import { test, expect } from 'playwright/lib';
+
+import AccountsLabelSearch from './AccountsLabelSearch';
+
+const addresses: AddressesMetadataSearchResult = {
+  items: [
+    {
+      ...addressMocks.withName,
+      tx_count: '1',
+      coin_balance: '12345678901234567890000',
+    },
+    {
+      ...addressMocks.token,
+      tx_count: '109123890123',
+      coin_balance: '22222345678901234567890000',
+      ens_domain_name: null,
+    },
+    {
+      ...addressMocks.withoutName,
+      tx_count: '11',
+      coin_balance: '1000000000000000000',
+    },
+    {
+      ...addressMocks.eoa,
+      tx_count: '420',
+      coin_balance: null,
+    },
+  ],
+  next_page_params: null,
+};
+
+const hooksConfig = {
+  router: {
+    query: {
+      slug: 'euler-finance-exploit',
+      tagType: 'generic',
+      tagName: 'Euler finance exploit',
+    },
+  },
+};
+
+test('base view +@mobile', async({ render, mockTextAd, mockApiResponse }) => {
+  await mockTextAd();
+  await mockApiResponse(
+    'addresses_metadata_search',
+    addresses,
+    {
+      queryParams: {
+        slug: 'euler-finance-exploit',
+        tag_type: 'generic',
+      },
+    },
+  );
+  const component = await render(<AccountsLabelSearch/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/AccountsLabelSearch.tsx b/ui/pages/AccountsLabelSearch.tsx
new file mode 100644
index 0000000000..8ed107858e
--- /dev/null
+++ b/ui/pages/AccountsLabelSearch.tsx
@@ -0,0 +1,113 @@
+import { chakra, Flex, Hide, Show, Skeleton } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { EntityTag as TEntityTag, EntityTagType } from 'ui/shared/EntityTags/types';
+
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { TOP_ADDRESS } from 'stubs/address';
+import { generateListStub } from 'stubs/utils';
+import AddressesLabelSearchListItem from 'ui/addressesLabelSearch/AddressesLabelSearchListItem';
+import AddressesLabelSearchTable from 'ui/addressesLabelSearch/AddressesLabelSearchTable';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import EntityTag from 'ui/shared/EntityTags/EntityTag';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+
+const AccountsLabelSearch = () => {
+
+  const router = useRouter();
+  const slug = getQueryParamString(router.query.slug);
+  const tagType = getQueryParamString(router.query.tagType);
+  const tagName = getQueryParamString(router.query.tagName);
+
+  const { isError, isPlaceholderData, data, pagination } = useQueryWithPages({
+    resourceName: 'addresses_metadata_search',
+    filters: {
+      slug,
+      tag_type: tagType,
+    },
+    options: {
+      placeholderData: generateListStub<'addresses_metadata_search'>(
+        TOP_ADDRESS,
+        50,
+        {
+          next_page_params: null,
+        },
+      ),
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Hide below="lg" ssr={ false }>
+        <AddressesLabelSearchTable
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+          items={ data.items }
+          isLoading={ isPlaceholderData }
+        />
+      </Hide>
+      <Show below="lg" ssr={ false }>
+        { data.items.map((item, index) => {
+          return (
+            <AddressesLabelSearchListItem
+              key={ item.hash + (isPlaceholderData ? index : '') }
+              item={ item }
+              isLoading={ isPlaceholderData }
+            />
+          );
+        }) }
+      </Show>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (isError) {
+      return null;
+    }
+
+    const num = data?.items.length || 0;
+
+    const tagData: TEntityTag = {
+      tagType: tagType as EntityTagType,
+      slug,
+      name: tagName || slug,
+      ordinal: 0,
+    };
+
+    return (
+      <Flex alignItems="center" columnGap={ 2 } flexWrap="wrap" rowGap={ 1 }>
+        <Skeleton
+          isLoaded={ !isPlaceholderData }
+          display="inline-block"
+        >
+          Found{ ' ' }
+          <chakra.span fontWeight={ 700 }>
+            { num }{ data?.next_page_params || pagination.page > 1 ? '+' : '' }
+          </chakra.span>{ ' ' }
+          matching result{ num > 1 ? 's' : '' } for
+        </Skeleton>
+        <EntityTag data={ tagData } isLoading={ isPlaceholderData } noLink/>
+      </Flex>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle title="Search result" withTextAd/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText={ text }
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default AccountsLabelSearch;
diff --git a/ui/pages/Address.pw.tsx b/ui/pages/Address.pw.tsx
new file mode 100644
index 0000000000..e958c71e96
--- /dev/null
+++ b/ui/pages/Address.pw.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { numberToHex } from 'viem';
+
+import config from 'configs/app';
+import * as addressMock from 'mocks/address/address';
+import * as addressCountersMock from 'mocks/address/counters';
+import * as addressTabCountersMock from 'mocks/address/tabCounters';
+import * as socketServer from 'playwright/fixtures/socketServer';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
+
+import Address from './Address';
+
+const hooksConfig = {
+  router: {
+    query: { hash: addressMock.hash },
+  },
+};
+
+test.beforeEach(async({ mockTextAd }) => {
+  await mockTextAd();
+});
+
+test.describe('fetched bytecode', () => {
+  test('should refetch address query', async({ render, mockApiResponse, createSocket, page }) => {
+    const addressApiUrl = await mockApiResponse('address', addressMock.validator, { pathParams: { hash: addressMock.hash } });
+    await mockApiResponse('address_counters', addressCountersMock.forValidator, { pathParams: { hash: addressMock.hash } });
+    await mockApiResponse('address_tabs_counters', addressTabCountersMock.base, { pathParams: { hash: addressMock.hash } });
+    await mockApiResponse('address_txs', { items: [], next_page_params: null }, { pathParams: { hash: addressMock.hash } });
+    await render(<Address/>, { hooksConfig }, { withSocket: true });
+
+    const socket = await createSocket();
+    const channel = await socketServer.joinChannel(socket, `addresses:${ addressMock.hash.toLowerCase() }`);
+    socketServer.sendMessage(socket, channel, 'fetched_bytecode', { fetched_bytecode: '0x0123' });
+
+    const request = await page.waitForRequest(addressApiUrl);
+
+    expect(request).toBeTruthy();
+  });
+});
+
+test('degradation view', async({ render, page, mockRpcResponse, mockApiResponse }) => {
+  await mockApiResponse('address', null as never, { pathParams: { hash: addressMock.hash }, status: 500 });
+  await mockApiResponse('address_counters', addressCountersMock.forValidator, { pathParams: { hash: addressMock.hash } });
+  await mockApiResponse('address_tabs_counters', null as never, { pathParams: { hash: addressMock.hash }, status: 500 });
+  await mockApiResponse('address_txs', null as never, { pathParams: { hash: addressMock.hash }, status: 500 });
+  await mockRpcResponse({
+    Method: 'eth_getBalance',
+    Parameters: [ addressMock.hash, 'latest' ],
+    ReturnType: numberToHex(1234567890123456),
+  });
+
+  const component = await render(<Address/>, { hooksConfig });
+  await page.waitForResponse(config.chain.rpcUrl as string);
+
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
+});
diff --git a/ui/pages/Address.tsx b/ui/pages/Address.tsx
index 9f3d0b4da6..4914c79e1e 100644
--- a/ui/pages/Address.tsx
+++ b/ui/pages/Address.tsx
@@ -2,14 +2,20 @@ import { Box, Flex, HStack, useColorModeValue } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import type { EntityTag } from 'ui/shared/EntityTags/types';
 import type { RoutedTab } from 'ui/shared/Tabs/types';
 
 import config from 'configs/app';
+import getCheckedSummedAddress from 'lib/address/getCheckedSummedAddress';
+import useAddressMetadataInfoQuery from 'lib/address/useAddressMetadataInfoQuery';
 import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/contexts/app';
 import useContractTabs from 'lib/hooks/useContractTabs';
 import useIsSafeAddress from 'lib/hooks/useIsSafeAddress';
+import getNetworkValidationActionText from 'lib/networks/getNetworkValidationActionText';
 import getQueryParamString from 'lib/router/getQueryParamString';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
 import { ADDRESS_TABS_COUNTERS } from 'stubs/address';
 import { USER_OPS_ACCOUNT } from 'stubs/userOps';
 import AddressAccountHistory from 'ui/address/AddressAccountHistory';
@@ -19,27 +25,31 @@ import AddressContract from 'ui/address/AddressContract';
 import AddressDetails from 'ui/address/AddressDetails';
 import AddressInternalTxs from 'ui/address/AddressInternalTxs';
 import AddressLogs from 'ui/address/AddressLogs';
+import AddressMud from 'ui/address/AddressMud';
 import AddressTokens from 'ui/address/AddressTokens';
 import AddressTokenTransfers from 'ui/address/AddressTokenTransfers';
 import AddressTxs from 'ui/address/AddressTxs';
 import AddressUserOps from 'ui/address/AddressUserOps';
 import AddressWithdrawals from 'ui/address/AddressWithdrawals';
 import AddressFavoriteButton from 'ui/address/details/AddressFavoriteButton';
+import AddressMetadataAlert from 'ui/address/details/AddressMetadataAlert';
 import AddressQrCode from 'ui/address/details/AddressQrCode';
 import AddressEnsDomains from 'ui/address/ensDomains/AddressEnsDomains';
 import SolidityscanReport from 'ui/address/SolidityscanReport';
 import useAddressQuery from 'ui/address/utils/useAddressQuery';
+import useCheckDomainNameParam from 'ui/address/utils/useCheckDomainNameParam';
 import AccountActionsMenu from 'ui/shared/AccountActionsMenu/AccountActionsMenu';
 import TextAd from 'ui/shared/ad/TextAd';
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
-import EntityTags from 'ui/shared/EntityTags';
+import EntityTags from 'ui/shared/EntityTags/EntityTags';
+import formatUserTags from 'ui/shared/EntityTags/formatUserTags';
+import sortEntityTags from 'ui/shared/EntityTags/sortEntityTags';
 import IconSvg from 'ui/shared/IconSvg';
 import NetworkExplorers from 'ui/shared/NetworkExplorers';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
-import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
 
 const TOKEN_TABS = [ 'tokens_erc20', 'tokens_nfts', 'tokens_nfts_collection', 'tokens_nfts_list' ];
 
@@ -51,13 +61,15 @@ const AddressPageContent = () => {
 
   const tabsScrollRef = React.useRef<HTMLDivElement>(null);
   const hash = getQueryParamString(router.query.hash);
+  const checkSummedHash = React.useMemo(() => getCheckedSummedAddress(hash), [ hash ]);
 
-  const addressQuery = useAddressQuery({ hash });
+  const areQueriesEnabled = !useCheckDomainNameParam(hash);
+  const addressQuery = useAddressQuery({ hash, isEnabled: areQueriesEnabled });
 
   const addressTabsCountersQuery = useApiQuery('address_tabs_counters', {
     pathParams: { hash },
     queryOptions: {
-      enabled: Boolean(hash),
+      enabled: areQueriesEnabled && Boolean(hash),
       placeholderData: ADDRESS_TABS_COUNTERS,
     },
   });
@@ -65,29 +77,84 @@ const AddressPageContent = () => {
   const userOpsAccountQuery = useApiQuery('user_ops_account', {
     pathParams: { hash },
     queryOptions: {
-      enabled: Boolean(hash) && config.features.userOps.isEnabled,
+      enabled: areQueriesEnabled && Boolean(hash) && config.features.userOps.isEnabled,
       placeholderData: USER_OPS_ACCOUNT,
     },
   });
 
+  const mudTablesCountQuery = useApiQuery('address_mud_tables_count', {
+    pathParams: { hash },
+    queryOptions: {
+      enabled: config.features.mudFramework.isEnabled && areQueriesEnabled && Boolean(hash),
+      placeholderData: 10,
+    },
+  });
+
+  const addressesForMetadataQuery = React.useMemo(() => ([ hash ].filter(Boolean)), [ hash ]);
+  const addressMetadataQuery = useAddressMetadataInfoQuery(addressesForMetadataQuery, areQueriesEnabled);
+
+  const addressEnsDomainsQuery = useApiQuery('addresses_lookup', {
+    pathParams: { chainId: config.chain.id },
+    queryParams: {
+      address: hash,
+      resolved_to: true,
+      owned_by: true,
+      only_active: true,
+      order: 'ASC',
+    },
+    queryOptions: {
+      enabled: Boolean(hash) && config.features.nameService.isEnabled,
+    },
+  });
+  const addressMainDomain = !addressQuery.isPlaceholderData ?
+    addressEnsDomainsQuery.data?.items.find((domain) => domain.name === addressQuery.data?.ens_domain_name) :
+    undefined;
+
+  const isLoading = addressQuery.isPlaceholderData;
+  const isTabsLoading =
+    isLoading ||
+    addressTabsCountersQuery.isPlaceholderData ||
+    (config.features.userOps.isEnabled && userOpsAccountQuery.isPlaceholderData) ||
+    (config.features.mudFramework.isEnabled && mudTablesCountQuery.isPlaceholderData);
+
+  const handleFetchedBytecodeMessage = React.useCallback(() => {
+    addressQuery.refetch();
+  }, [ addressQuery ]);
+
+  const channel = useSocketChannel({
+    topic: `addresses:${ hash?.toLowerCase() }`,
+    isDisabled: isTabsLoading || addressQuery.isDegradedData || Boolean(addressQuery.data?.is_contract),
+  });
+  useSocketMessage({
+    channel,
+    event: 'fetched_bytecode',
+    handler: handleFetchedBytecodeMessage,
+  });
+
   const isSafeAddress = useIsSafeAddress(!addressQuery.isPlaceholderData && addressQuery.data?.is_contract ? hash : undefined);
   const safeIconColor = useColorModeValue('black', 'white');
 
-  const contractTabs = useContractTabs(addressQuery.data);
+  const contractTabs = useContractTabs(addressQuery.data, addressQuery.isPlaceholderData);
 
   const tabs: Array<RoutedTab> = React.useMemo(() => {
     return [
+      config.features.mudFramework.isEnabled && mudTablesCountQuery.data && mudTablesCountQuery.data > 0 && {
+        id: 'mud',
+        title: 'MUD',
+        count: mudTablesCountQuery.data,
+        component: <AddressMud scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
+      },
       {
         id: 'txs',
         title: 'Transactions',
         count: addressTabsCountersQuery.data?.transactions_count,
-        component: <AddressTxs scrollRef={ tabsScrollRef }/>,
+        component: <AddressTxs scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
       },
       txInterpretation.isEnabled && txInterpretation.provider === 'noves' ?
         {
           id: 'account_history',
           title: 'Account history',
-          component: <AddressAccountHistory scrollRef={ tabsScrollRef }/>,
+          component: <AddressAccountHistory scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
         } :
         undefined,
       config.features.userOps.isEnabled && Boolean(userOpsAccountQuery.data?.total_ops) ?
@@ -95,7 +162,7 @@ const AddressPageContent = () => {
           id: 'user_ops',
           title: 'User operations',
           count: userOpsAccountQuery.data?.total_ops,
-          component: <AddressUserOps/>,
+          component: <AddressUserOps shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
         } :
         undefined,
       config.features.beaconChain.isEnabled && addressTabsCountersQuery.data?.withdrawals_count ?
@@ -103,39 +170,39 @@ const AddressPageContent = () => {
           id: 'withdrawals',
           title: 'Withdrawals',
           count: addressTabsCountersQuery.data?.withdrawals_count,
-          component: <AddressWithdrawals scrollRef={ tabsScrollRef }/>,
+          component: <AddressWithdrawals scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
         } :
         undefined,
       {
         id: 'token_transfers',
         title: 'Token transfers',
         count: addressTabsCountersQuery.data?.token_transfers_count,
-        component: <AddressTokenTransfers scrollRef={ tabsScrollRef }/>,
+        component: <AddressTokenTransfers scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
       },
       {
         id: 'tokens',
         title: 'Tokens',
         count: addressTabsCountersQuery.data?.token_balances_count,
-        component: <AddressTokens/>,
+        component: <AddressTokens shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
         subTabs: TOKEN_TABS,
       },
       {
         id: 'internal_txns',
         title: 'Internal txns',
         count: addressTabsCountersQuery.data?.internal_txs_count,
-        component: <AddressInternalTxs scrollRef={ tabsScrollRef }/>,
+        component: <AddressInternalTxs scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
       },
       {
         id: 'coin_balance_history',
         title: 'Coin balance history',
-        component: <AddressCoinBalance/>,
+        component: <AddressCoinBalance shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
       },
-      config.chain.verificationType === 'validation' && addressTabsCountersQuery.data?.validations_count ?
+      addressTabsCountersQuery.data?.validations_count ?
         {
           id: 'blocks_validated',
-          title: 'Blocks validated',
+          title: `Blocks ${ getNetworkValidationActionText() }`,
           count: addressTabsCountersQuery.data?.validations_count,
-          component: <AddressBlocksValidated scrollRef={ tabsScrollRef }/>,
+          component: <AddressBlocksValidated scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
         } :
         undefined,
       addressTabsCountersQuery.data?.logs_count ?
@@ -143,9 +210,10 @@ const AddressPageContent = () => {
           id: 'logs',
           title: 'Logs',
           count: addressTabsCountersQuery.data?.logs_count,
-          component: <AddressLogs scrollRef={ tabsScrollRef }/>,
+          component: <AddressLogs scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
         } :
         undefined,
+
       addressQuery.data?.is_contract ? {
         id: 'contract',
         title: () => {
@@ -160,49 +228,86 @@ const AddressPageContent = () => {
 
           return 'Contract';
         },
-        component: <AddressContract tabs={ contractTabs }/>,
-        subTabs: contractTabs.map(tab => tab.id),
+        component: (
+          <AddressContract
+            tabs={ contractTabs.tabs }
+            shouldRender={ !isTabsLoading }
+            isLoading={ contractTabs.isLoading }
+          />
+        ),
+        subTabs: contractTabs.tabs.map(tab => tab.id),
       } : undefined,
     ].filter(Boolean);
-  }, [ addressQuery.data, contractTabs, addressTabsCountersQuery.data, userOpsAccountQuery.data ]);
+  }, [
+    addressQuery.data,
+    contractTabs,
+    addressTabsCountersQuery.data,
+    userOpsAccountQuery.data,
+    isTabsLoading,
+    areQueriesEnabled,
+    mudTablesCountQuery.data,
+  ]);
 
-  const isLoading = addressQuery.isPlaceholderData || (config.features.userOps.isEnabled && userOpsAccountQuery.isPlaceholderData);
+  const tags: Array<EntityTag> = React.useMemo(() => {
+    return [
+      ...(addressQuery.data?.public_tags?.map((tag) => ({ slug: tag.label, name: tag.display_name, tagType: 'custom' as const, ordinal: -1 })) || []),
+      !addressQuery.data?.is_contract ? { slug: 'eoa', name: 'EOA', tagType: 'custom' as const, ordinal: -1 } : undefined,
+      config.features.validators.isEnabled && addressQuery.data?.has_validated_blocks ?
+        { slug: 'validator', name: 'Validator', tagType: 'custom' as const, ordinal: 10 } :
+        undefined,
+      addressQuery.data?.implementations?.length ? { slug: 'proxy', name: 'Proxy', tagType: 'custom' as const, ordinal: -1 } : undefined,
+      addressQuery.data?.token ? { slug: 'token', name: 'Token', tagType: 'custom' as const, ordinal: -1 } : undefined,
+      isSafeAddress ? { slug: 'safe', name: 'Multisig: Safe', tagType: 'custom' as const, ordinal: -10 } : undefined,
+      config.features.userOps.isEnabled && userOpsAccountQuery.data ?
+        { slug: 'user_ops_acc', name: 'Smart contract wallet', tagType: 'custom' as const, ordinal: -10 } :
+        undefined,
+      config.features.mudFramework.isEnabled && mudTablesCountQuery.data ?
+        { slug: 'mud', name: 'MUD World', tagType: 'custom' as const, ordinal: -10 } :
+        undefined,
+      ...formatUserTags(addressQuery.data),
+      ...(addressMetadataQuery.data?.addresses?.[hash.toLowerCase()]?.tags || []),
+    ].filter(Boolean).sort(sortEntityTags);
+  }, [ addressMetadataQuery.data, addressQuery.data, hash, isSafeAddress, userOpsAccountQuery.data, mudTablesCountQuery.data ]);
 
-  const tags = (
+  const titleContentAfter = (
     <EntityTags
-      data={ addressQuery.data }
-      isLoading={ isLoading }
-      tagsBefore={ [
-        !addressQuery.data?.is_contract ? { label: 'eoa', display_name: 'EOA' } : undefined,
-        config.features.validators.isEnabled && addressQuery.data?.has_validated_blocks ? { label: 'validator', display_name: 'Validator' } : undefined,
-        addressQuery.data?.implementation_address ? { label: 'proxy', display_name: 'Proxy' } : undefined,
-        addressQuery.data?.token ? { label: 'token', display_name: 'Token' } : undefined,
-        isSafeAddress ? { label: 'safe', display_name: 'Multisig: Safe' } : undefined,
-        config.features.userOps.isEnabled && userOpsAccountQuery.data ? { label: 'user_ops_acc', display_name: 'Smart contract wallet' } : undefined,
-      ] }
+      tags={ tags }
+      isLoading={
+        isLoading ||
+        (config.features.userOps.isEnabled && userOpsAccountQuery.isPlaceholderData) ||
+        (config.features.addressMetadata.isEnabled && addressMetadataQuery.isPending)
+      }
     />
   );
 
-  const content = (addressQuery.isError || addressQuery.isDegradedData) ? null : <RoutedTabs tabs={ tabs } tabListProps={{ mt: 8 }}/>;
+  const content = (addressQuery.isError || addressQuery.isDegradedData) ?
+    null :
+    <RoutedTabs tabs={ tabs } tabListProps={{ mt: 6 }} isLoading={ isTabsLoading }/>;
 
   const backLink = React.useMemo(() => {
-    const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/accounts');
+    if (appProps.referrer && appProps.referrer.includes('/accounts')) {
+      return {
+        label: 'Back to top accounts list',
+        url: appProps.referrer,
+      };
+    }
 
-    if (!hasGoBackLink) {
-      return;
+    if (appProps.referrer && appProps.referrer.includes('/mud-worlds')) {
+      return {
+        label: 'Back to MUD worlds list',
+        url: appProps.referrer,
+      };
     }
 
-    return {
-      label: 'Back to top accounts list',
-      url: appProps.referrer,
-    };
+    return;
   }, [ appProps.referrer ]);
 
   const titleSecondRow = (
     <Flex alignItems="center" w="100%" columnGap={ 2 } rowGap={ 2 } flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
       { addressQuery.data?.ens_domain_name && (
         <EnsEntity
-          name={ addressQuery.data?.ens_domain_name }
+          domain={ addressQuery.data?.ens_domain_name }
+          protocol={ !addressEnsDomainsQuery.isPending ? addressMainDomain?.protocol : null }
           fontFamily="heading"
           fontSize="lg"
           fontWeight={ 500 }
@@ -211,14 +316,14 @@ const AddressPageContent = () => {
         />
       ) }
       <AddressEntity
-        address={{ ...addressQuery.data, hash, name: '', ens_domain_name: '' }}
+        address={{ ...addressQuery.data, hash: checkSummedHash, name: '', ens_domain_name: '', implementations: null }}
         isLoading={ isLoading }
         fontFamily="heading"
         fontSize="lg"
         fontWeight={ 500 }
         noLink
         isSafeAddress={ isSafeAddress }
-        iconColor={ isSafeAddress ? safeIconColor : undefined }
+        icon={{ color: isSafeAddress ? safeIconColor : undefined }}
         mr={ 4 }
       />
       { !isLoading && addressQuery.data?.is_contract && addressQuery.data.token &&
@@ -226,12 +331,13 @@ const AddressPageContent = () => {
       { !isLoading && !addressQuery.data?.is_contract && config.features.account.isEnabled && (
         <AddressFavoriteButton hash={ hash } watchListId={ addressQuery.data?.watchlist_address_id }/>
       ) }
-      <AddressQrCode address={{ hash }} isLoading={ isLoading }/>
+      <AddressQrCode address={{ hash: checkSummedHash }} isLoading={ isLoading }/>
       <AccountActionsMenu isLoading={ isLoading }/>
       <HStack ml="auto" gap={ 2 }/>
-      { addressQuery.data?.is_contract && addressQuery.data?.is_verified && config.UI.views.address.solidityscanEnabled && <SolidityscanReport hash={ hash }/> }
-      { !isLoading && addressQuery.data && config.features.nameService.isEnabled &&
-        <AddressEnsDomains addressHash={ hash } mainDomainName={ addressQuery.data.ens_domain_name }/> }
+      { !isLoading && addressQuery.data?.is_contract && addressQuery.data?.is_verified && config.UI.views.address.solidityscanEnabled &&
+        <SolidityscanReport hash={ hash }/> }
+      { !isLoading && addressEnsDomainsQuery.data && config.features.nameService.isEnabled &&
+        <AddressEnsDomains query={ addressEnsDomainsQuery } addressHash={ hash } mainDomainName={ addressQuery.data?.ens_domain_name }/> }
       <NetworkExplorers type="address" pathParam={ hash }/>
     </Flex>
   );
@@ -242,18 +348,17 @@ const AddressPageContent = () => {
       <PageTitle
         title={ `${ addressQuery.data?.is_contract ? 'Contract' : 'Address' } details` }
         backLink={ backLink }
-        contentAfter={ tags }
+        contentAfter={ titleContentAfter }
         secondRow={ titleSecondRow }
         isLoading={ isLoading }
       />
+      { !addressMetadataQuery.isPending &&
+        <AddressMetadataAlert tags={ addressMetadataQuery.data?.addresses?.[hash.toLowerCase()]?.tags } mt="-4px" mb={ 6 }/> }
       { config.features.metasuites.isEnabled && <Box display="none" id="meta-suites__address" data-ready={ !isLoading }/> }
       <AddressDetails addressQuery={ addressQuery } scrollRef={ tabsScrollRef }/>
       { /* should stay before tabs to scroll up with pagination */ }
       <Box ref={ tabsScrollRef }></Box>
-      { (isLoading || addressTabsCountersQuery.isPlaceholderData) ?
-        <TabsSkeleton tabs={ tabs }/> :
-        content
-      }
+      { content }
     </>
   );
 };
diff --git a/ui/pages/ArbitrumL2Deposits.pw.tsx b/ui/pages/ArbitrumL2Deposits.pw.tsx
new file mode 100644
index 0000000000..af26008a4f
--- /dev/null
+++ b/ui/pages/ArbitrumL2Deposits.pw.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import * as depositsMock from 'mocks/arbitrum/deposits';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import ArbitrumL2Deposits from './ArbitrumL2Deposits';
+
+test('base view +@mobile', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => {
+  await mockTextAd();
+  await mockEnvs(ENVS_MAP.arbitrumRollup);
+  await mockApiResponse('arbitrum_l2_messages', depositsMock.baseResponse, { pathParams: { direction: 'to-rollup' } });
+  await mockApiResponse('arbitrum_l2_messages_count', 3971111, { pathParams: { direction: 'to-rollup' } });
+
+  const component = await render(<ArbitrumL2Deposits/>);
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/ArbitrumL2Deposits.tsx b/ui/pages/ArbitrumL2Deposits.tsx
new file mode 100644
index 0000000000..fbee21ae6a
--- /dev/null
+++ b/ui/pages/ArbitrumL2Deposits.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import ArbitrumL2Messages from 'ui/messages/ArbitrumL2Messages';
+
+const ArbitrumL2Deposits = () => {
+  return <ArbitrumL2Messages direction="to-rollup"/>;
+};
+
+export default ArbitrumL2Deposits;
diff --git a/ui/pages/ArbitrumL2TxnBatch.pw.tsx b/ui/pages/ArbitrumL2TxnBatch.pw.tsx
new file mode 100644
index 0000000000..1057ae2744
--- /dev/null
+++ b/ui/pages/ArbitrumL2TxnBatch.pw.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { batchData, batchDataAnytrust } from 'mocks/arbitrum/txnBatch';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect, devices } from 'playwright/lib';
+
+import ArbitrumL2TxnBatch from './ArbitrumL2TxnBatch';
+
+const batchNumber = '5';
+const hooksConfig = {
+  router: {
+    query: { number: batchNumber },
+  },
+};
+
+test.beforeEach(async({ mockTextAd, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.arbitrumRollup);
+  await mockTextAd();
+});
+
+test('base view', async({ render, mockApiResponse }) => {
+  await mockApiResponse('arbitrum_l2_txn_batch', batchData, { pathParams: { number: batchNumber } });
+  const component = await render(<ArbitrumL2TxnBatch/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
+
+test('with anytrust DA', async({ render, mockApiResponse }) => {
+  await mockApiResponse('arbitrum_l2_txn_batch', batchDataAnytrust, { pathParams: { number: batchNumber } });
+  const component = await render(<ArbitrumL2TxnBatch/>, { hooksConfig });
+  await component.getByText('Show data availability info').click();
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+  test('base view', async({ render, mockApiResponse }) => {
+    await mockApiResponse('arbitrum_l2_txn_batch', batchData, { pathParams: { number: batchNumber } });
+    const component = await render(<ArbitrumL2TxnBatch/>, { hooksConfig });
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('with anytrust DA', async({ render, mockApiResponse }) => {
+    await mockApiResponse('arbitrum_l2_txn_batch', batchDataAnytrust, { pathParams: { number: batchNumber } });
+    const component = await render(<ArbitrumL2TxnBatch/>, { hooksConfig });
+    await component.getByText('Show data availability info').click();
+    await expect(component).toHaveScreenshot();
+  });
+});
diff --git a/ui/pages/ArbitrumL2TxnBatch.tsx b/ui/pages/ArbitrumL2TxnBatch.tsx
new file mode 100644
index 0000000000..617a9ba95b
--- /dev/null
+++ b/ui/pages/ArbitrumL2TxnBatch.tsx
@@ -0,0 +1,136 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { RoutedTab } from 'ui/shared/Tabs/types';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { useAppContext } from 'lib/contexts/app';
+import throwOnAbsentParamError from 'lib/errors/throwOnAbsentParamError';
+import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { ARBITRUM_L2_TXN_BATCH } from 'stubs/arbitrumL2';
+import { BLOCK } from 'stubs/block';
+import { TX } from 'stubs/tx';
+import { generateListStub } from 'stubs/utils';
+import BlocksContent from 'ui/blocks/BlocksContent';
+import TextAd from 'ui/shared/ad/TextAd';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
+import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
+import ArbitrumL2TxnBatchDetails from 'ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetails';
+import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
+
+const TAB_LIST_PROPS = {
+  marginBottom: 0,
+  py: 5,
+  marginTop: -5,
+};
+
+const TABS_HEIGHT = 80;
+
+const ArbitrumL2TxnBatch = () => {
+  const router = useRouter();
+  const appProps = useAppContext();
+  const number = getQueryParamString(router.query.number);
+  const tab = getQueryParamString(router.query.tab);
+  const isMobile = useIsMobile();
+
+  const batchQuery = useApiQuery('arbitrum_l2_txn_batch', {
+    pathParams: { number },
+    queryOptions: {
+      enabled: Boolean(number),
+      placeholderData: ARBITRUM_L2_TXN_BATCH,
+    },
+  });
+
+  const batchTxsQuery = useQueryWithPages({
+    resourceName: 'arbitrum_l2_txn_batch_txs',
+    pathParams: { number },
+    options: {
+      enabled: Boolean(!batchQuery.isPlaceholderData && batchQuery.data?.number && tab === 'txs'),
+      placeholderData: generateListStub<'arbitrum_l2_txn_batch_txs'>(TX, 50, { next_page_params: {
+        batch_number: '8122',
+        block_number: 1338932,
+        index: 0,
+        items_count: 50,
+      } }),
+    },
+  });
+
+  const batchBlocksQuery = useQueryWithPages({
+    resourceName: 'arbitrum_l2_txn_batch_blocks',
+    pathParams: { number },
+    options: {
+      enabled: Boolean(!batchQuery.isPlaceholderData && batchQuery.data?.number && tab === 'blocks'),
+      placeholderData: generateListStub<'arbitrum_l2_txn_batch_blocks'>(BLOCK, 50, { next_page_params: {
+        batch_number: '8122',
+        block_number: 1338932,
+        items_count: 50,
+      } }),
+    },
+  });
+
+  throwOnAbsentParamError(number);
+  throwOnResourceLoadError(batchQuery);
+
+  let pagination;
+  if (tab === 'txs') {
+    pagination = batchTxsQuery.pagination;
+  }
+  if (tab === 'blocks') {
+    pagination = batchBlocksQuery.pagination;
+  }
+
+  const hasPagination = !isMobile && pagination?.isVisible;
+
+  const tabs: Array<RoutedTab> = React.useMemo(() => ([
+    { id: 'index', title: 'Details', component: <ArbitrumL2TxnBatchDetails query={ batchQuery }/> },
+    {
+      id: 'txs',
+      title: 'Transactions',
+      component: <TxsWithFrontendSorting query={ batchTxsQuery } showSocketInfo={ false } top={ hasPagination ? TABS_HEIGHT : 0 }/>,
+    },
+    {
+      id: 'blocks',
+      title: 'Blocks',
+      component: <BlocksContent type="block" query={ batchBlocksQuery } enableSocket={ false } top={ hasPagination ? TABS_HEIGHT : 0 }/>,
+    },
+  ].filter(Boolean)), [ batchQuery, batchTxsQuery, batchBlocksQuery, hasPagination ]);
+
+  const backLink = React.useMemo(() => {
+    const hasGoBackLink = appProps.referrer && appProps.referrer.endsWith('/batches');
+
+    if (!hasGoBackLink) {
+      return;
+    }
+
+    return {
+      label: 'Back to tx batches list',
+      url: appProps.referrer,
+    };
+  }, [ appProps.referrer ]);
+
+  return (
+    <>
+      <TextAd mb={ 6 }/>
+      <PageTitle
+        title={ `Tx batch #${ number }` }
+        backLink={ backLink }
+      />
+      { batchQuery.isPlaceholderData ?
+        <TabsSkeleton tabs={ tabs }/> : (
+          <RoutedTabs
+            tabs={ tabs }
+            tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
+            rightSlot={ hasPagination && pagination ? <Pagination { ...(pagination) }/> : null }
+            stickyEnabled={ hasPagination }
+          />
+        ) }
+    </>
+  );
+};
+
+export default ArbitrumL2TxnBatch;
diff --git a/ui/pages/ArbitrumL2TxnBatches.pw.tsx b/ui/pages/ArbitrumL2TxnBatches.pw.tsx
new file mode 100644
index 0000000000..f1c0a06d06
--- /dev/null
+++ b/ui/pages/ArbitrumL2TxnBatches.pw.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import * as arbitrumTxnBatchesMock from 'mocks/arbitrum/txnBatches';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import ArbitrumL2TxnBatches from './ArbitrumL2TxnBatches';
+
+test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
+  test.slow();
+  await mockEnvs(ENVS_MAP.arbitrumRollup);
+  await mockTextAd();
+  await mockApiResponse('arbitrum_l2_txn_batches', arbitrumTxnBatchesMock.baseResponse);
+  await mockApiResponse('arbitrum_l2_txn_batches_count', 9927);
+
+  const component = await render(<ArbitrumL2TxnBatches/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/ArbitrumL2TxnBatches.tsx b/ui/pages/ArbitrumL2TxnBatches.tsx
new file mode 100644
index 0000000000..fe813dbc53
--- /dev/null
+++ b/ui/pages/ArbitrumL2TxnBatches.tsx
@@ -0,0 +1,87 @@
+import { Hide, Show, Skeleton, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { nbsp } from 'lib/html-entities';
+import { ARBITRUM_L2_TXN_BATCHES_ITEM } from 'stubs/arbitrumL2';
+import { generateListStub } from 'stubs/utils';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+import ArbitrumL2TxnBatchesListItem from 'ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesListItem';
+import ArbitrumL2TxnBatchesTable from 'ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTable';
+
+const ArbitrumL2TxnBatches = () => {
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'arbitrum_l2_txn_batches',
+    options: {
+      placeholderData: generateListStub<'arbitrum_l2_txn_batches'>(
+        ARBITRUM_L2_TXN_BATCHES_ITEM,
+        50,
+        {
+          next_page_params: {
+            items_count: 50,
+            number: 9045200,
+          },
+        },
+      ),
+    },
+  });
+
+  const countersQuery = useApiQuery('arbitrum_l2_txn_batches_count', {
+    queryOptions: {
+      placeholderData: 5231746,
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        { data.items.map(((item, index) => (
+          <ArbitrumL2TxnBatchesListItem
+            key={ item.number + (isPlaceholderData ? String(index) : '') }
+            item={ item }
+            isLoading={ isPlaceholderData }
+          />
+        ))) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <ArbitrumL2TxnBatchesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (countersQuery.isError || isError || !data?.items.length) {
+      return null;
+    }
+
+    return (
+      <Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap">
+        Tx batch (L2 block)
+        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].number } </Text>to
+        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].number } </Text>
+        (total of { countersQuery.data?.toLocaleString() } batches)
+      </Skeleton>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle title={ `Tx batches (L2${ nbsp }blocks)` } withTextAd/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no tx batches."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default ArbitrumL2TxnBatches;
diff --git a/ui/pages/ArbitrumL2Withdrawals.pw.tsx b/ui/pages/ArbitrumL2Withdrawals.pw.tsx
new file mode 100644
index 0000000000..47873b7efe
--- /dev/null
+++ b/ui/pages/ArbitrumL2Withdrawals.pw.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import * as depositsMock from 'mocks/arbitrum/withdrawals';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import ArbitrumL2Withdrawals from './ArbitrumL2Withdrawals';
+
+test('base view +@mobile', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => {
+  await mockTextAd();
+  await mockEnvs(ENVS_MAP.arbitrumRollup);
+  await mockApiResponse('arbitrum_l2_messages', depositsMock.baseResponse, { pathParams: { direction: 'from-rollup' } });
+  await mockApiResponse('arbitrum_l2_messages_count', 3971111, { pathParams: { direction: 'from-rollup' } });
+
+  const component = await render(<ArbitrumL2Withdrawals/>);
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/ArbitrumL2Withdrawals.tsx b/ui/pages/ArbitrumL2Withdrawals.tsx
new file mode 100644
index 0000000000..a4a1b04eaf
--- /dev/null
+++ b/ui/pages/ArbitrumL2Withdrawals.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import ArbitrumL2Messages from 'ui/messages/ArbitrumL2Messages';
+
+const ArbitrumL2Withdrawals = () => {
+  return <ArbitrumL2Messages direction="from-rollup"/>;
+};
+
+export default ArbitrumL2Withdrawals;
diff --git a/ui/pages/BeaconChainWithdrawals.pw.tsx b/ui/pages/BeaconChainWithdrawals.pw.tsx
index ab4cc8fa7a..a445ee1720 100644
--- a/ui/pages/BeaconChainWithdrawals.pw.tsx
+++ b/ui/pages/BeaconChainWithdrawals.pw.tsx
@@ -1,43 +1,16 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { data as withdrawalsData } from 'mocks/withdrawals/withdrawals';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import BeaconChainWithdrawals from './BeaconChainWithdrawals';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.beaconChain) as any,
-});
-
-const WITHDRAWALS_API_URL = buildApiUrl('withdrawals');
-const WITHDRAWALS_COUNTERS_API_URL = buildApiUrl('withdrawals_counters');
-
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(WITHDRAWALS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(withdrawalsData),
-  }));
-
-  await page.route(WITHDRAWALS_COUNTERS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ withdrawal_count: '111111', withdrawal_sum: '1010101010110101001101010' }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <BeaconChainWithdrawals/>
-    </TestApp>,
-  );
-
+test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
+  await mockEnvs(ENVS_MAP.beaconChain);
+  await mockTextAd();
+  await mockApiResponse('withdrawals', withdrawalsData);
+  await mockApiResponse('withdrawals_counters', { withdrawal_count: '111111', withdrawal_sum: '1010101010110101001101010' });
+  const component = await render(<BeaconChainWithdrawals/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/pages/BeaconChainWithdrawals.tsx b/ui/pages/BeaconChainWithdrawals.tsx
index 73e4d0294b..c953a5aa39 100644
--- a/ui/pages/BeaconChainWithdrawals.tsx
+++ b/ui/pages/BeaconChainWithdrawals.tsx
@@ -8,6 +8,7 @@ import getCurrencyValue from 'lib/getCurrencyValue';
 import { currencyUnits } from 'lib/units';
 import { generateListStub } from 'stubs/utils';
 import { WITHDRAWAL } from 'stubs/withdrawals';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -50,7 +51,12 @@ const Withdrawals = () => {
         ))) }
       </Show>
       <Hide below="lg" ssr={ false }>
-        <BeaconChainWithdrawalsTable items={ data.items } view="list" top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <BeaconChainWithdrawalsTable
+          items={ data.items }
+          view="list"
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+          isLoading={ isPlaceholderData }
+        />
       </Hide>
     </>
   ) : null;
@@ -76,7 +82,10 @@ const Withdrawals = () => {
 
   return (
     <>
-      <PageTitle title="Withdrawals" withTextAd/>
+      <PageTitle
+        title={ config.meta.seo.enhancedDataEnabled ? `${ config.chain.name } withdrawals` : 'Withdrawals' }
+        withTextAd
+      />
       <DataListDisplay
         isError={ isError }
         items={ data?.items }
diff --git a/ui/pages/Blob.pw.tsx b/ui/pages/Blob.pw.tsx
index 1f0f56227e..9e18607631 100644
--- a/ui/pages/Blob.pw.tsx
+++ b/ui/pages/Blob.pw.tsx
@@ -1,68 +1,35 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import * as textAdMock from 'mocks/ad/textAd';
 import * as blobsMock from 'mocks/blobs/blobs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import Blob from './Blob';
 
-const BLOB_API_URL = buildApiUrl('blob', { hash: blobsMock.base1.hash });
 const hooksConfig = {
   router: {
     query: { hash: blobsMock.base1.hash },
   },
 };
 
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
+test.beforeEach(async({ mockTextAd }) => {
+  await mockTextAd();
 });
 
-test('base view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(BLOB_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(blobsMock.base1),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Blob/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+test('base view +@mobile +@dark-mode', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse('blob', blobsMock.base1, { pathParams: { hash: blobsMock.base1.hash } });
+  const component = await render(<Blob/>, { hooksConfig });
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-test('without data', async({ mount, page }) => {
-  await page.route(BLOB_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(blobsMock.withoutData),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Blob/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+test('without data', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse('blob', blobsMock.withoutData, { pathParams: { hash: blobsMock.base1.hash } });
+  const component = await render(<Blob/>, { hooksConfig });
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
diff --git a/ui/pages/Block.pw.tsx b/ui/pages/Block.pw.tsx
new file mode 100644
index 0000000000..48a69ee034
--- /dev/null
+++ b/ui/pages/Block.pw.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { numberToHex } from 'viem';
+
+import config from 'configs/app';
+import * as blockMock from 'mocks/blocks/block';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import Block from './Block';
+
+const height = String(blockMock.base.height);
+const hooksConfig = {
+  router: {
+    query: { height_or_hash: height },
+  },
+};
+
+test.beforeEach(async({ mockTextAd }) => {
+  await mockTextAd();
+});
+
+test('degradation view, details tab', async({ render, mockApiResponse, mockRpcResponse, page }) => {
+  await mockApiResponse('block', null as never, { pathParams: { height_or_hash: height }, status: 500 });
+  await mockRpcResponse({
+    Method: 'eth_getBlockByNumber',
+    Parameters: [ numberToHex(Number(height)), false ],
+    ReturnType: blockMock.rpcBlockBase,
+  });
+
+  const component = await render(<Block/>, { hooksConfig });
+  await page.waitForResponse(config.chain.rpcUrl as string);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('degradation view, txs tab', async({ render, mockApiResponse, mockRpcResponse, page }) => {
+  const hooksConfig = {
+    router: {
+      query: { height_or_hash: height, tab: 'txs' },
+    },
+  };
+
+  await mockApiResponse('block', blockMock.base, { pathParams: { height_or_hash: height } });
+  await mockApiResponse('block_txs', null as never, { pathParams: { height_or_hash: height }, status: 500 });
+  await mockRpcResponse({
+    Method: 'eth_getBlockByNumber',
+    Parameters: [ numberToHex(Number(height)), true ],
+    ReturnType: blockMock.rpcBlockWithTxsInfo,
+  });
+
+  const component = await render(<Block/>, { hooksConfig });
+  await page.waitForResponse(config.chain.rpcUrl as string);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('degradation view, withdrawals tab', async({ render, mockApiResponse, mockRpcResponse, mockEnvs, page }) => {
+  const hooksConfig = {
+    router: {
+      query: { height_or_hash: height, tab: 'withdrawals' },
+    },
+  };
+
+  await mockEnvs(ENVS_MAP.beaconChain);
+  await mockApiResponse('block', blockMock.withWithdrawals, { pathParams: { height_or_hash: height } });
+  await mockApiResponse('block_withdrawals', null as never, { pathParams: { height_or_hash: height }, status: 500 });
+  await mockRpcResponse({
+    Method: 'eth_getBlockByNumber',
+    Parameters: [ numberToHex(Number(height)), false ],
+    ReturnType: blockMock.rpcBlockBase,
+  });
+
+  const component = await render(<Block/>, { hooksConfig });
+  await page.waitForResponse(config.chain.rpcUrl as string);
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/Block.tsx b/ui/pages/Block.tsx
index 0c2478c649..9adf80c9cd 100644
--- a/ui/pages/Block.tsx
+++ b/ui/pages/Block.tsx
@@ -1,4 +1,5 @@
-import { chakra, Skeleton } from '@chakra-ui/react';
+import { chakra, Skeleton, Tooltip } from '@chakra-ui/react';
+import capitalize from 'lodash/capitalize';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -10,8 +11,10 @@ import { useAppContext } from 'lib/contexts/app';
 import throwOnAbsentParamError from 'lib/errors/throwOnAbsentParamError';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import getNetworkValidationActionText from 'lib/networks/getNetworkValidationActionText';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import BlockDetails from 'ui/block/BlockDetails';
+import BlockEpochRewards from 'ui/block/BlockEpochRewards';
 import BlockWithdrawals from 'ui/block/BlockWithdrawals';
 import useBlockBlobTxsQuery from 'ui/block/useBlockBlobTxsQuery';
 import useBlockQuery from 'ui/block/useBlockQuery';
@@ -19,6 +22,7 @@ import useBlockTxsQuery from 'ui/block/useBlockTxsQuery';
 import useBlockWithdrawalsQuery from 'ui/block/useBlockWithdrawalsQuery';
 import TextAd from 'ui/shared/ad/TextAd';
 import ServiceDegradationWarning from 'ui/shared/alerts/ServiceDegradationWarning';
+import Tag from 'ui/shared/chakra/Tag';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import NetworkExplorers from 'ui/shared/NetworkExplorers';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -29,9 +33,11 @@ import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
 
 const TAB_LIST_PROPS = {
   marginBottom: 0,
-  py: 5,
+  pt: 6,
+  pb: 6,
   marginTop: -5,
 };
+const TABS_HEIGHT = 88;
 
 const BlockPageContent = () => {
   const router = useRouter();
@@ -45,6 +51,11 @@ const BlockPageContent = () => {
   const blockWithdrawalsQuery = useBlockWithdrawalsQuery({ heightOrHash, blockQuery, tab });
   const blockBlobTxsQuery = useBlockBlobTxsQuery({ heightOrHash, blockQuery, tab });
 
+  const hasPagination = !isMobile && (
+    (tab === 'txs' && blockTxsQuery.pagination.isVisible) ||
+    (tab === 'withdrawals' && blockWithdrawalsQuery.pagination.isVisible)
+  );
+
   const tabs: Array<RoutedTab> = React.useMemo(() => ([
     {
       id: 'index',
@@ -62,11 +73,11 @@ const BlockPageContent = () => {
       component: (
         <>
           { blockTxsQuery.isDegradedData && <ServiceDegradationWarning isLoading={ blockTxsQuery.isPlaceholderData } mb={ 6 }/> }
-          <TxsWithFrontendSorting query={ blockTxsQuery } showBlockInfo={ false } showSocketInfo={ false }/>
+          <TxsWithFrontendSorting query={ blockTxsQuery } showBlockInfo={ false } showSocketInfo={ false } top={ hasPagination ? TABS_HEIGHT : 0 }/>
         </>
       ),
     },
-    blockQuery.data?.blob_tx_count ?
+    config.features.dataAvailability.isEnabled && blockQuery.data?.blob_tx_count ?
       {
         id: 'blob_txs',
         title: 'Blob txns',
@@ -85,12 +96,12 @@ const BlockPageContent = () => {
           </>
         ),
       } : null,
-  ].filter(Boolean)), [ blockBlobTxsQuery, blockQuery, blockTxsQuery, blockWithdrawalsQuery ]);
-
-  const hasPagination = !isMobile && (
-    (tab === 'txs' && blockTxsQuery.pagination.isVisible) ||
-    (tab === 'withdrawals' && blockWithdrawalsQuery.pagination.isVisible)
-  );
+    blockQuery.data?.celo?.is_epoch_block ? {
+      id: 'epoch_rewards',
+      title: 'Epoch rewards',
+      component: <BlockEpochRewards heightOrHash={ heightOrHash }/>,
+    } : null,
+  ].filter(Boolean)), [ blockBlobTxsQuery, blockQuery, blockTxsQuery, blockWithdrawalsQuery, hasPagination, heightOrHash ]);
 
   let pagination;
   if (tab === 'txs') {
@@ -113,7 +124,15 @@ const BlockPageContent = () => {
   }, [ appProps.referrer ]);
 
   throwOnAbsentParamError(heightOrHash);
-  throwOnResourceLoadError(blockQuery);
+
+  if (blockQuery.isError) {
+    if (!blockQuery.isDegradedData && blockQuery.error.status === 404 && !heightOrHash.startsWith('0x')) {
+      router.push({ pathname: '/block/countdown/[height]', query: { height: heightOrHash } });
+      return null;
+    } else {
+      throwOnResourceLoadError(blockQuery);
+    }
+  }
 
   const title = (() => {
     switch (blockQuery.data?.type) {
@@ -127,9 +146,28 @@ const BlockPageContent = () => {
         return `Block #${ blockQuery.data?.height }`;
     }
   })();
+  const contentAfter = (() => {
+    if (!blockQuery.data?.celo) {
+      return null;
+    }
+
+    if (!blockQuery.data.celo.is_epoch_block) {
+      return (
+        <Tooltip label="Displays the epoch this block belongs to before the epoch is finalized" maxW="280px" textAlign="center">
+          <Tag>Epoch #{ blockQuery.data.celo.epoch_number }</Tag>
+        </Tooltip>
+      );
+    }
+
+    return (
+      <Tooltip label="Displays the epoch finalized by this block" maxW="280px" textAlign="center">
+        <Tag bgColor="celo" color="blackAlpha.800">Finalized epoch #{ blockQuery.data.celo.epoch_number }</Tag>
+      </Tooltip>
+    );
+  })();
   const titleSecondRow = (
     <>
-      { !config.UI.views.block.hiddenFields?.miner && (
+      { !config.UI.views.block.hiddenFields?.miner && blockQuery.data?.miner && (
         <Skeleton
           isLoaded={ !blockQuery.isPlaceholderData }
           fontFamily="heading"
@@ -139,9 +177,9 @@ const BlockPageContent = () => {
           fontWeight={ 500 }
         >
           <chakra.span flexShrink={ 0 }>
-            { config.chain.verificationType === 'validation' ? 'Validated by' : 'Mined by' }
+            { `${ capitalize(getNetworkValidationActionText()) } by` }
           </chakra.span>
-          <AddressEntity address={ blockQuery.data?.miner }/>
+          <AddressEntity address={ blockQuery.data.miner }/>
         </Skeleton>
       ) }
       <NetworkExplorers type="block" pathParam={ heightOrHash } ml={{ base: config.UI.views.block.hiddenFields?.miner ? 0 : 3, lg: 'auto' }}/>
@@ -154,6 +192,7 @@ const BlockPageContent = () => {
       <PageTitle
         title={ title }
         backLink={ backLink }
+        contentAfter={ contentAfter }
         secondRow={ titleSecondRow }
         isLoading={ blockQuery.isPlaceholderData }
       />
diff --git a/ui/pages/BlockCountdown.pw.tsx b/ui/pages/BlockCountdown.pw.tsx
new file mode 100644
index 0000000000..a5bb86af3a
--- /dev/null
+++ b/ui/pages/BlockCountdown.pw.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { test, expect } from 'playwright/lib';
+
+import BlockCountdown from './BlockCountdown';
+
+test('short period until the block +@mobile', async({ render, mockApiResponse }) => {
+  const height = '1234567890';
+  const hooksConfig = {
+    router: {
+      query: { height: height },
+    },
+  };
+
+  await mockApiResponse('block_countdown', {
+    result: {
+      CountdownBlock: height,
+      CurrentBlock: '1234567700',
+      RemainingBlock: '190',
+      EstimateTimeInSec: String(24 * 60 * 60 + 3 * 60 * 60 + 42 * 60 + 11),
+    },
+  }, {
+    queryParams: {
+      module: 'block',
+      action: 'getblockcountdown',
+      blockno: height,
+    },
+  });
+  const component = await render(<BlockCountdown/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
+
+test('long period until the block +@mobile', async({ render, mockApiResponse }) => {
+  const height = '123456789012345678901234567890';
+  const hooksConfig = {
+    router: {
+      query: { height: height },
+    },
+  };
+
+  await mockApiResponse('block_countdown', {
+    result: {
+      CountdownBlock: height,
+      CurrentBlock: '1234567700',
+      RemainingBlock: '123456789012345678900000000190',
+      EstimateTimeInSec: String(1234567890 * 24 * 60 * 60 + 3 * 60 * 60 + 42 * 60 + 11),
+    },
+  }, {
+    queryParams: {
+      module: 'block',
+      action: 'getblockcountdown',
+      blockno: height,
+    },
+  });
+  const component = await render(<BlockCountdown/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/BlockCountdown.tsx b/ui/pages/BlockCountdown.tsx
new file mode 100644
index 0000000000..27e5dba11f
--- /dev/null
+++ b/ui/pages/BlockCountdown.tsx
@@ -0,0 +1,120 @@
+import { Box, Center, Flex, Heading, Image, useColorModeValue, Grid, Button } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import dayjs from 'lib/date/dayjs';
+import downloadBlob from 'lib/downloadBlob';
+import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import BlockCountdownTimer from 'ui/blockCountdown/BlockCountdownTimer';
+import createGoogleCalendarLink from 'ui/blockCountdown/createGoogleCalendarLink';
+import createIcsFileBlob from 'ui/blockCountdown/createIcsFileBlob';
+import ContentLoader from 'ui/shared/ContentLoader';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import StatsWidget from 'ui/shared/stats/StatsWidget';
+import TruncatedValue from 'ui/shared/TruncatedValue';
+
+const BlockCountdown = () => {
+  const router = useRouter();
+  const height = getQueryParamString(router.query.height);
+  const iconColor = useColorModeValue('gray.300', 'gray.600');
+  const buttonBgColor = useColorModeValue('gray.100', 'gray.700');
+
+  const { data, isPending, isError, error } = useApiQuery('block_countdown', {
+    queryParams: {
+      module: 'block',
+      action: 'getblockcountdown',
+      blockno: height,
+    },
+  });
+
+  const handleAddToAppleCalClick = React.useCallback(() => {
+    if (!data?.result?.EstimateTimeInSec) {
+      return;
+    }
+    const fileBlob = createIcsFileBlob({ blockHeight: height, date: dayjs().add(Number(data.result.EstimateTimeInSec), 's') });
+    downloadBlob(fileBlob, `Block #${ height } creation event.ics`);
+  }, [ data?.result?.EstimateTimeInSec, height ]);
+
+  const handleTimerFinish = React.useCallback(() => {
+    window.location.assign(route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: height } }));
+  }, [ height ]);
+
+  React.useEffect(() => {
+    if (!isError && !isPending && !data.result) {
+      handleTimerFinish();
+    }
+  }, [ data?.result, handleTimerFinish, isError, isPending ]);
+
+  if (isError) {
+    throwOnResourceLoadError({ isError, error, resource: 'block_countdown' });
+  }
+
+  if (isPending || !data?.result) {
+    return <Center h="100%"><ContentLoader/></Center>;
+  }
+
+  return (
+    <Center h="100%" alignItems={{ base: 'flex-start', lg: 'center' }}>
+      <Flex flexDir="column" w="fit-content" maxW={{ base: '100%', lg: '700px', xl: '1000px' }}>
+        <Flex columnGap={ 8 } alignItems="flex-start" justifyContent={{ base: 'space-between', lg: undefined }} w="100%">
+          <Box maxW={{ base: 'calc(100% - 65px - 32px)', lg: 'calc(100% - 125px - 32px)' }}>
+            <Heading
+              fontSize={{ base: '18px', lg: '32px' }}
+              lineHeight={{ base: '24px', lg: '40px' }}
+              h={{ base: '24px', lg: '40px' }}
+            >
+              <TruncatedValue value={ `Block #${ height }` } w="100%"/>
+            </Heading>
+            <Box mt={ 2 } color="text_secondary">
+              <Box fontWeight={ 600 }>Estimated target date</Box>
+              <Box>{ dayjs().add(Number(data.result.EstimateTimeInSec), 's').format('llll') }</Box>
+            </Box>
+            <Flex columnGap={ 2 } mt={ 3 }>
+              <LinkExternal
+                variant="subtle"
+                fontSize="sm"
+                lineHeight="20px"
+                px={ 2 }
+                display="inline-flex"
+                href={ createGoogleCalendarLink({ blockHeight: height, timeFromNow: Number(data.result.EstimateTimeInSec) }) }
+              >
+                <Image src="/static/google_calendar.svg" alt="Google calendar logo" boxSize={ 5 } mr={ 2 }/>
+                <span>Google</span>
+              </LinkExternal>
+              <Button
+                variant="subtle"
+                fontWeight={ 400 }
+                px={ 2 }
+                size="sm"
+                bgColor={ buttonBgColor }
+                display="inline-flex"
+                onClick={ handleAddToAppleCalClick }
+              >
+                <Image src="/static/apple_calendar.svg" alt="Apple calendar logo" boxSize={ 5 } mr={ 2 }/>
+                <span>Apple</span>
+              </Button>
+            </Flex>
+          </Box>
+          <IconSvg name="block_slim" w={{ base: '65px', lg: '125px' }} h={{ base: '75px', lg: '140px' }} color={ iconColor } flexShrink={ 0 }/>
+        </Flex>
+        { data.result.EstimateTimeInSec && (
+          <BlockCountdownTimer
+            value={ Math.ceil(Number(data.result.EstimateTimeInSec)) }
+            onFinish={ handleTimerFinish }
+          />
+        ) }
+        <Grid gridTemplateColumns="repeat(2, calc(50% - 4px))" columnGap={ 2 } mt={ 2 }>
+          <StatsWidget label="Remaining blocks" value={ data.result.RemainingBlock } icon="apps_slim"/>
+          <StatsWidget label="Current block" value={ data.result.CurrentBlock } icon="block_slim"/>
+        </Grid>
+      </Flex>
+    </Center>
+  );
+};
+
+export default React.memo(BlockCountdown);
diff --git a/ui/pages/BlockCountdownIndex.pw.tsx b/ui/pages/BlockCountdownIndex.pw.tsx
new file mode 100644
index 0000000000..50c5c2d14f
--- /dev/null
+++ b/ui/pages/BlockCountdownIndex.pw.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { test, expect } from 'playwright/lib';
+
+import BlockCountdownIndex from './BlockCountdownIndex';
+
+test('base view +@mobile', async({ render }) => {
+  const component = await render(<BlockCountdownIndex/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/BlockCountdownIndex.tsx b/ui/pages/BlockCountdownIndex.tsx
new file mode 100644
index 0000000000..9ba197fd90
--- /dev/null
+++ b/ui/pages/BlockCountdownIndex.tsx
@@ -0,0 +1,53 @@
+import { chakra, Box, Center, Heading, useColorModeValue } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import FilterInput from 'ui/shared/filters/FilterInput';
+import IconSvg from 'ui/shared/IconSvg';
+
+const BlockCountdownIndex = () => {
+  const router = useRouter();
+  const iconColor = useColorModeValue('gray.300', 'gray.600');
+
+  const handleFormSubmit = React.useCallback((event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const formData = new FormData(event.target as HTMLFormElement);
+    const searchTerm = formData.get('search_term');
+    if (typeof searchTerm === 'string' && searchTerm) {
+      router.push({ pathname: '/block/countdown/[height]', query: { height: searchTerm } }, undefined, { shallow: true });
+    }
+  }, [ router ]);
+
+  return (
+    <Center h="100%" justifyContent={{ base: 'flex-start', lg: 'center' }} flexDir="column" textAlign="center" pt={{ base: 8, lg: 0 }}>
+      <IconSvg name="block_countdown" color={ iconColor } w={{ base: '160px', lg: '240px' }} h={{ base: '123px', lg: '184px' }}/>
+      <Heading
+        fontSize={{ base: '18px', lg: '32px' }}
+        lineHeight={{ base: '24px', lg: '40px' }}
+        h={{ base: '24px', lg: '40px' }}
+        mt={{ base: 3, lg: 6 }}
+      >
+        Block countdown
+      </Heading>
+      <Box mt={ 2 }>
+        The estimated time for a block to be created and added to the blockchain.
+      </Box>
+      <chakra.form
+        noValidate
+        onSubmit={ handleFormSubmit }
+        w={{ base: '100%', lg: '360px' }}
+        mt={{ base: 3, lg: 6 }}
+      >
+        <FilterInput
+          placeholder="Search by block number"
+          size="xs"
+          type="number"
+          name="search_term"
+        />
+      </chakra.form>
+    </Center>
+  );
+};
+
+export default React.memo(BlockCountdownIndex);
diff --git a/ui/pages/Blocks.pw.tsx b/ui/pages/Blocks.pw.tsx
index 95e0bc452a..2a334c3b21 100644
--- a/ui/pages/Blocks.pw.tsx
+++ b/ui/pages/Blocks.pw.tsx
@@ -1,12 +1,10 @@
-import type { BrowserContext } from '@playwright/test';
 import React from 'react';
 
 import * as blockMock from 'mocks/blocks/block';
 import * as statsMock from 'mocks/stats/index';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
 import * as socketServer from 'playwright/fixtures/socketServer';
 import { test, expect, devices } from 'playwright/lib';
-import * as configs from 'playwright/utils/configs';
 
 import Blocks from './Blocks';
 
@@ -21,6 +19,10 @@ const hooksConfig = {
 // test cases which use socket cannot run in parallel since the socket server always run on the same port
 test.describe.configure({ mode: 'serial' });
 
+test.beforeEach(async({ mockTextAd }) => {
+  await mockTextAd();
+});
+
 test('base view +@dark-mode', async({ render, mockApiResponse }) => {
   await mockApiResponse('blocks', blockMock.baseListResponse, { queryParams: { type: 'block' } });
   await mockApiResponse('stats', statsMock.base);
@@ -30,11 +32,8 @@ test('base view +@dark-mode', async({ render, mockApiResponse }) => {
   await expect(component).toHaveScreenshot();
 });
 
-const hiddenFieldsTest = test.extend<{ context: BrowserContext }>({
-  context: contextWithEnvs(configs.viewsEnvs.block.hiddenFields),
-});
-
-hiddenFieldsTest('hidden fields', async({ render, mockApiResponse }) => {
+test('hidden fields', async({ render, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.blockHiddenFields);
   await mockApiResponse('blocks', blockMock.baseListResponse, { queryParams: { type: 'block' } });
   await mockApiResponse('stats', statsMock.base);
 
@@ -55,11 +54,8 @@ test.describe('mobile', () => {
     await expect(component).toHaveScreenshot();
   });
 
-  const hiddenFieldsTest = test.extend<{ context: BrowserContext }>({
-    context: contextWithEnvs(configs.viewsEnvs.block.hiddenFields),
-  });
-
-  hiddenFieldsTest('hidden fields', async({ render, mockApiResponse }) => {
+  test('hidden fields', async({ render, mockApiResponse, mockEnvs }) => {
+    await mockEnvs(ENVS_MAP.blockHiddenFields);
     await mockApiResponse('blocks', blockMock.baseListResponse, { queryParams: { type: 'block' } });
     await mockApiResponse('stats', statsMock.base);
 
diff --git a/ui/pages/Blocks.tsx b/ui/pages/Blocks.tsx
index 183188c4fa..56934c7bfd 100644
--- a/ui/pages/Blocks.tsx
+++ b/ui/pages/Blocks.tsx
@@ -15,7 +15,8 @@ import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 
 const TAB_LIST_PROPS = {
   marginBottom: 0,
-  py: 5,
+  pt: 6,
+  pb: 6,
   marginTop: -5,
 };
 
diff --git a/ui/pages/ContractVerificationForAddress.tsx b/ui/pages/ContractVerificationForAddress.tsx
index d4dceb9259..b7f30d8034 100644
--- a/ui/pages/ContractVerificationForAddress.tsx
+++ b/ui/pages/ContractVerificationForAddress.tsx
@@ -1,7 +1,8 @@
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { SmartContractVerificationMethod } from 'types/api/contract';
+import type { SmartContractVerificationMethodApi } from 'types/api/contract';
+import type { SmartContractVerificationMethod } from 'types/client/contract';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/contexts/app';
@@ -59,7 +60,7 @@ const ContractVerificationForAddress = () => {
 
     return (
       <ContractVerificationForm
-        method={ method && configQuery.data.verification_options.includes(method) ? method : undefined }
+        method={ method && configQuery.data.verification_options.includes(method) ? method as SmartContractVerificationMethodApi : undefined }
         config={ configQuery.data }
         hash={ hash }
       />
@@ -86,7 +87,7 @@ const ContractVerificationForAddress = () => {
         backLink={ backLink }
       />
       <AddressEntity
-        address={{ hash, is_contract: true, implementation_name: null }}
+        address={{ hash, is_contract: true }}
         noLink
         fontFamily="heading"
         fontSize="lg"
diff --git a/ui/pages/CsvExport.pw.tsx b/ui/pages/CsvExport.pw.tsx
index 15e3ead1ac..a21b063ae8 100644
--- a/ui/pages/CsvExport.pw.tsx
+++ b/ui/pages/CsvExport.pw.tsx
@@ -1,41 +1,43 @@
-import { test, expect } from '@playwright/experimental-ct-react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import * as addressMock from 'mocks/address/address';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import * as tokenMock from 'mocks/tokens/tokenInfo';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import CsvExport from './CsvExport';
 
-const ADDRESS_API_URL = buildApiUrl('address', { hash: addressMock.hash });
-const hooksConfig = {
-  router: {
-    query: { address: addressMock.hash, type: 'transactions', filterType: 'address', filterValue: 'from' },
-    isReady: true,
-  },
-};
-
-test.beforeEach(async({ page }) => {
-  await page.route(ADDRESS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(addressMock.withName),
-  }));
-});
+test('base view +@mobile +@dark-mode', async({ render, page, mockApiResponse }) => {
+  const hooksConfig = {
+    router: {
+      query: { address: addressMock.hash, type: 'transactions', filterType: 'address', filterValue: 'from' },
+    },
+  };
+  await mockApiResponse('address', addressMock.validator, { pathParams: { hash: addressMock.hash } });
+  await mockApiResponse('config_csv_export', { limit: 42123 });
+
+  const component = await render(<Box sx={{ '.recaptcha': { w: '304px', h: '78px' } }}><CsvExport/></Box>, { hooksConfig });
 
-test('base view +@mobile +@dark-mode', async({ mount, page }) => {
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator('.recaptcha') ],
+    maskColor: pwConfig.maskColor,
+  });
+});
 
-  const component = await mount(
-    <TestApp>
-      <CsvExport/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('token holders', async({ render, page, mockApiResponse }) => {
+  const hooksConfig = {
+    router: {
+      query: { address: addressMock.hash, type: 'holders' },
+    },
+  };
+  await mockApiResponse('address', addressMock.token, { pathParams: { hash: addressMock.hash } });
+  await mockApiResponse('token', tokenMock.tokenInfo, { pathParams: { hash: addressMock.hash } });
 
-  await page.waitForResponse('https://www.google.com/recaptcha/api2/**');
+  const component = await render(<Box sx={{ '.recaptcha': { w: '304px', h: '78px' } }}><CsvExport/></Box>, { hooksConfig });
 
   await expect(component).toHaveScreenshot({
     mask: [ page.locator('.recaptcha') ],
-    maskColor: configs.maskColor,
+    maskColor: pwConfig.maskColor,
   });
 });
diff --git a/ui/pages/CsvExport.tsx b/ui/pages/CsvExport.tsx
index 38a9b66a7b..c277401659 100644
--- a/ui/pages/CsvExport.tsx
+++ b/ui/pages/CsvExport.tsx
@@ -15,6 +15,7 @@ import { nbsp } from 'lib/html-entities';
 import CsvExportForm from 'ui/csvExport/CsvExportForm';
 import ContentLoader from 'ui/shared/ContentLoader';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
 interface ExportTypeEntity {
@@ -53,6 +54,11 @@ const EXPORT_TYPES: Record<CsvExportParams['type'], ExportTypeEntity> = {
     fileNameTemplate: 'logs',
     filterType: 'topic',
   },
+  holders: {
+    text: 'holders',
+    resource: 'csv_export_token_holders',
+    fileNameTemplate: 'holders',
+  },
 };
 
 const isCorrectExportType = (type: string): type is CsvExportParams['type'] => Object.keys(EXPORT_TYPES).includes(type);
@@ -75,6 +81,21 @@ const CsvExport = () => {
     },
   });
 
+  const tokenQuery = useApiQuery('token', {
+    pathParams: { hash: addressHash },
+    queryOptions: {
+      enabled: Boolean(addressHash) && exportTypeParam === 'holders',
+    },
+  });
+
+  const configQuery = useApiQuery('config_csv_export', {
+    queryOptions: {
+      enabled: Boolean(addressHash),
+    },
+  });
+
+  const isLoading = addressQuery.isPending || configQuery.isPending || (exportTypeParam === 'holders' && tokenQuery.isPending);
+
   const backLink = React.useMemo(() => {
     const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/address');
 
@@ -111,7 +132,7 @@ const CsvExport = () => {
   const content = (() => {
     throwOnResourceLoadError(addressQuery);
 
-    if (addressQuery.isPending) {
+    if (isLoading) {
       return <ContentLoader/>;
     }
 
@@ -119,6 +140,7 @@ const CsvExport = () => {
       <CsvExportForm
         hash={ addressHash }
         resource={ exportType.resource }
+        exportType={ isCorrectExportType(exportTypeParam) ? exportTypeParam : undefined }
         filterType={ filterType }
         filterValue={ filterValue }
         fileNameTemplate={ exportType.fileNameTemplate }
@@ -126,24 +148,58 @@ const CsvExport = () => {
     );
   })();
 
-  return (
-    <>
-      <PageTitle
-        title="Export data to CSV file"
-        backLink={ backLink }
-      />
+  const description = (() => {
+    if (isLoading) {
+      return null;
+    }
+
+    const limit = (configQuery.data?.limit || 10_000).toLocaleString(undefined, { maximumFractionDigits: 3, notation: 'compact' });
+
+    if (exportTypeParam === 'holders' && tokenQuery.data) {
+      return (
+        <Flex mb={ 10 } whiteSpace="pre-wrap" flexWrap="wrap">
+          <span>Export { exportType.text } for token </span>
+          <TokenEntity
+            token={ tokenQuery.data }
+            truncation={ isMobile ? 'constant' : 'dynamic' }
+            w="fit-content"
+            maxW={{ base: '100%', lg: '400px' }}
+            noCopy
+            noSymbol
+          />
+          <span> to CSV file. </span>
+          <span>Exports are limited to the top { limit } holders by amount held.</span>
+        </Flex>
+      );
+    }
+
+    if (!addressQuery.data) {
+      return null;
+    }
+
+    return (
       <Flex mb={ 10 } whiteSpace="pre-wrap" flexWrap="wrap">
         <span>Export { exportType.text } for address </span>
         <AddressEntity
-          address={{ hash: addressHash, is_contract: true, implementation_name: null }}
+          address={ addressQuery.data }
           truncation={ isMobile ? 'constant' : 'dynamic' }
           noCopy
         />
         <span>{ nbsp }</span>
         { filterType && filterValue && <span>with applied filter by { filterType } ({ filterValue }) </span> }
         <span>to CSV file. </span>
-        <span>Exports are limited to the last 10K { exportType.text }.</span>
+        <span>Exports are limited to the last { limit } { exportType.text }.</span>
       </Flex>
+    );
+  })();
+
+  return (
+    <>
+      <PageTitle
+        title="Export data to CSV file"
+        backLink={ backLink }
+      />
+      { description }
       { content }
     </>
   );
diff --git a/ui/pages/CustomAbi.tsx b/ui/pages/CustomAbi.tsx
index d2cdd70839..dcb17469e7 100644
--- a/ui/pages/CustomAbi.tsx
+++ b/ui/pages/CustomAbi.tsx
@@ -64,7 +64,7 @@ const CustomAbiPage: React.FC = () => {
         <Box display={{ base: 'block', lg: 'none' }}>
           { data?.map((item, index) => (
             <CustomAbiListItem
-              key={ item.id + (isPlaceholderData ? index : '') }
+              key={ item.id + (isPlaceholderData ? String(index) : '') }
               item={ item }
               isLoading={ isPlaceholderData }
               onDeleteClick={ onDeleteClick }
diff --git a/ui/pages/GasTracker.pw.tsx b/ui/pages/GasTracker.pw.tsx
index 976adeb445..6ad3490e31 100644
--- a/ui/pages/GasTracker.pw.tsx
+++ b/ui/pages/GasTracker.pw.tsx
@@ -1,55 +1,28 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import * as textAdMock from 'mocks/ad/textAd';
 import * as statsMock from 'mocks/stats/index';
 import * as statsLineMock from 'mocks/stats/line';
 import * as statsLinesMock from 'mocks/stats/lines';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import GasTracker from './GasTracker';
 
-const STATS_LINES_API_URL = buildApiUrl('stats_lines');
-const GAS_PRICE_CHART_API_URL = buildApiUrl('stats_line', { id: 'averageGasPrice' }) + '?**';
-const STATS_API_URL = buildApiUrl('stats');
-
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
+test.beforeEach(async({ mockTextAd }) => {
+  await mockTextAd();
 });
 
-test('base view +@dark-mode +@mobile', async({ mount, page }) => {
-  await page.route(STATS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ ...statsMock.base, coin_price: '2442.789' }),
-  }));
-  await page.route(STATS_LINES_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsLinesMock.base),
-  }));
-  await page.route(GAS_PRICE_CHART_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsLineMock.averageGasPrice),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <GasTracker/>
-    </TestApp>,
+test('base view +@dark-mode +@mobile', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse('stats', { ...statsMock.base, coin_price: '2442.789' });
+  await mockApiResponse('stats_lines', statsLinesMock.base);
+  const chartApiUrl = await mockApiResponse(
+    'stats_line',
+    statsLineMock.averageGasPrice,
+    { pathParams: { id: 'averageGasPrice' }, queryParams: { from: '**' } },
   );
-  await page.waitForResponse(GAS_PRICE_CHART_API_URL);
+  const component = await render(<GasTracker/>);
+  await page.waitForResponse(chartApiUrl);
   await page.waitForFunction(() => {
     return document.querySelector('path[data-name="chart-Averagegasprice-small"]')?.getAttribute('opacity') === '1';
   });
-
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/pages/GasTracker.tsx b/ui/pages/GasTracker.tsx
index ecb4928257..69efae2104 100644
--- a/ui/pages/GasTracker.tsx
+++ b/ui/pages/GasTracker.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Skeleton, chakra } from '@chakra-ui/react';
+import { Alert, Box, Flex, Skeleton, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
@@ -9,6 +9,7 @@ import GasTrackerChart from 'ui/gasTracker/GasTrackerChart';
 import GasTrackerNetworkUtilization from 'ui/gasTracker/GasTrackerNetworkUtilization';
 import GasTrackerPrices from 'ui/gasTracker/GasTrackerPrices';
 import GasInfoUpdateTimer from 'ui/shared/gas/GasInfoUpdateTimer';
+import NativeTokenIcon from 'ui/shared/NativeTokenIcon';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
 const GasTracker = () => {
@@ -36,7 +37,8 @@ const GasTracker = () => {
       rowGap={ 1 }
       flexDir={{ base: 'column', lg: 'row' }}
     >
-      { data?.network_utilization_percentage && <GasTrackerNetworkUtilization percentage={ data.network_utilization_percentage } isLoading={ isLoading }/> }
+      { typeof data?.network_utilization_percentage === 'number' &&
+        <GasTrackerNetworkUtilization percentage={ data.network_utilization_percentage } isLoading={ isLoading }/> }
       { data?.gas_price_updated_at && (
         <Skeleton isLoaded={ !isLoading } whiteSpace="pre" display="flex" alignItems="center">
           <span>Last updated </span>
@@ -53,7 +55,8 @@ const GasTracker = () => {
         </Skeleton>
       ) }
       { data?.coin_price && (
-        <Skeleton isLoaded={ !isLoading } ml={{ base: 0, lg: 'auto' }} whiteSpace="pre">
+        <Skeleton isLoaded={ !isLoading } ml={{ base: 0, lg: 'auto' }} whiteSpace="pre" display="flex" alignItems="center">
+          <NativeTokenIcon mr={ 2 } boxSize={ 6 }/>
           <chakra.span color="text_secondary">{ config.chain.currency.symbol }</chakra.span>
           <span> ${ Number(data.coin_price).toLocaleString(undefined, { maximumFractionDigits: 2 }) }</span>
         </Skeleton>
@@ -61,17 +64,27 @@ const GasTracker = () => {
     </Flex>
   );
 
+  const snippets = (() => {
+    if (!isPlaceholderData && data?.gas_prices?.slow === null && data?.gas_prices.average === null && data.gas_prices.fast === null) {
+      return <Alert status="warning">No recent data available</Alert>;
+    }
+
+    return data?.gas_prices ? <GasTrackerPrices prices={ data.gas_prices } isLoading={ isLoading }/> : null;
+  })();
+
   return (
     <>
       <PageTitle
-        title="Gas tracker"
+        title={ config.meta.seo.enhancedDataEnabled ? `${ config.chain.name } gas tracker` : 'Gas tracker' }
         secondRow={ titleSecondRow }
         withTextAd
       />
-      { data?.gas_prices && <GasTrackerPrices prices={ data.gas_prices } isLoading={ isLoading }/> }
-      <Box mt={ 12 }>
-        <GasTrackerChart/>
-      </Box>
+      { snippets }
+      { config.features.stats.isEnabled && (
+        <Box mt={ 12 }>
+          <GasTrackerChart/>
+        </Box>
+      ) }
     </>
   );
 };
diff --git a/ui/pages/Home.pw.tsx b/ui/pages/Home.pw.tsx
index 6c3c18cc8c..58287f4943 100644
--- a/ui/pages/Home.pw.tsx
+++ b/ui/pages/Home.pw.tsx
@@ -1,4 +1,3 @@
-import { test, expect, devices } from '@playwright/experimental-ct-react';
 import type { Locator } from '@playwright/test';
 import React from 'react';
 
@@ -6,137 +5,73 @@ import * as blockMock from 'mocks/blocks/block';
 import * as dailyTxsMock from 'mocks/stats/daily_txs';
 import * as statsMock from 'mocks/stats/index';
 import * as txMock from 'mocks/txs/tx';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { test, expect, devices } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import Home from './Home';
 
 test.describe('default view', () => {
   let component: Locator;
 
-  test.beforeEach(async({ page, mount }) => {
-    await page.route(buildApiUrl('stats'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(statsMock.base),
-    }));
-    await page.route(buildApiUrl('homepage_blocks'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify([
-        blockMock.base,
-        blockMock.base2,
-      ]),
-    }));
-    await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify([
-        txMock.base,
-        txMock.withContractCreation,
-        txMock.withTokenTransfer,
-      ]),
-    }));
-    await page.route(buildApiUrl('stats_charts_txs'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(dailyTxsMock.base),
-    }));
-
-    component = await mount(
-      <TestApp>
-        <Home/>
-      </TestApp>,
-    );
+  test.beforeEach(async({ render, mockApiResponse, mockAssetResponse }) => {
+    await mockAssetResponse(statsMock.base.coin_image as string, './playwright/mocks/image_s.jpg');
+    await mockApiResponse('stats', statsMock.base);
+    await mockApiResponse('homepage_blocks', [
+      blockMock.base,
+      blockMock.base2,
+    ]);
+    await mockApiResponse('homepage_txs', [
+      txMock.base,
+      txMock.withContractCreation,
+      txMock.withTokenTransfer,
+    ]);
+    await mockApiResponse('stats_charts_txs', dailyTxsMock.base);
+
+    component = await render(<Home/>);
   });
 
   test('-@default +@dark-mode', async({ page }) => {
     await expect(component).toHaveScreenshot({
-      mask: [ page.locator(configs.adsBannerSelector) ],
-      maskColor: configs.maskColor,
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
     });
   });
 
   test.describe('screen xl', () => {
-    test.use({ viewport: configs.viewport.xl });
+    test.use({ viewport: pwConfig.viewport.xl });
 
     test('', async({ page }) => {
       await expect(component).toHaveScreenshot({
-        mask: [ page.locator(configs.adsBannerSelector) ],
-        maskColor: configs.maskColor,
+        mask: [ page.locator(pwConfig.adsBannerSelector) ],
+        maskColor: pwConfig.maskColor,
       });
     });
   });
 });
 
-test.describe('custom hero plate background', () => {
-  const IMAGE_URL = 'https://localhost:3000/my-image.png';
-  const extendedTest = test.extend({
-    context: contextWithEnvs([
-      { name: 'NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND', value: `no-repeat center/cover url(${ IMAGE_URL })` },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ]) as any,
-  });
-
-  extendedTest('default view', async({ mount, page }) => {
-    await page.route(IMAGE_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_long.jpg',
-      });
-    });
-
-    const component = await mount(
-      <TestApp>
-        <Home/>
-      </TestApp>,
-    );
-
-    const heroPlate = component.locator('div[data-label="hero plate"]');
-
-    await expect(heroPlate).toHaveScreenshot({
-      mask: [ page.locator(configs.adsBannerSelector) ],
-      maskColor: configs.maskColor,
-    });
-  });
-});
-
 // had to separate mobile test, otherwise all the tests fell on CI
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  test('base view', async({ mount, page }) => {
-    await page.route(buildApiUrl('stats'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(statsMock.base),
-    }));
-    await page.route(buildApiUrl('homepage_blocks'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify([
-        blockMock.base,
-        blockMock.base2,
-      ]),
-    }));
-    await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify([
-        txMock.base,
-        txMock.withContractCreation,
-        txMock.withTokenTransfer,
-      ]),
-    }));
-    await page.route(buildApiUrl('stats_charts_txs'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(dailyTxsMock.base),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <Home/>
-      </TestApp>,
-    );
+  test('base view', async({ render, page, mockAssetResponse, mockApiResponse }) => {
+    await mockAssetResponse(statsMock.base.coin_image as string, './playwright/mocks/image_s.jpg');
+    await mockApiResponse('stats', statsMock.base);
+    await mockApiResponse('homepage_blocks', [
+      blockMock.base,
+      blockMock.base2,
+    ]);
+    await mockApiResponse('homepage_txs', [
+      txMock.base,
+      txMock.withContractCreation,
+      txMock.withTokenTransfer,
+    ]);
+    await mockApiResponse('stats_charts_txs', dailyTxsMock.base);
+
+    const component = await render(<Home/>);
 
     await expect(component).toHaveScreenshot({
-      mask: [ page.locator(configs.adsBannerSelector) ],
-      maskColor: configs.maskColor,
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
     });
   });
 });
diff --git a/ui/pages/Home.tsx b/ui/pages/Home.tsx
index 2176842285..42a45e6cae 100644
--- a/ui/pages/Home.tsx
+++ b/ui/pages/Home.tsx
@@ -1,52 +1,31 @@
-import { Box, Heading, Flex } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
+import HeroBanner from 'ui/home/HeroBanner';
 import ChainIndicators from 'ui/home/indicators/ChainIndicators';
+import LatestArbitrumL2Batches from 'ui/home/latestBatches/LatestArbitrumL2Batches';
+import LatestZkEvmL2Batches from 'ui/home/latestBatches/LatestZkEvmL2Batches';
 import LatestBlocks from 'ui/home/LatestBlocks';
-import LatestZkEvmL2Batches from 'ui/home/LatestZkEvmL2Batches';
 import Stats from 'ui/home/Stats';
 import Transactions from 'ui/home/Transactions';
 import AdBanner from 'ui/shared/ad/AdBanner';
-import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
-import SearchBar from 'ui/snippets/searchBar/SearchBar';
-import WalletMenuDesktop from 'ui/snippets/walletMenu/WalletMenuDesktop';
 
 const rollupFeature = config.features.rollup;
 
 const Home = () => {
   return (
     <Box as="main">
-      <Box
-        w="100%"
-        background={ config.UI.homepage.plate.background }
-        borderRadius="24px"
-        padding={{ base: '24px', lg: '48px' }}
-        minW={{ base: 'unset', lg: '900px' }}
-        data-label="hero plate"
-      >
-        <Flex mb={{ base: 6, lg: 8 }} justifyContent="space-between" alignItems="center">
-          <Heading
-            as="h1"
-            size={{ base: 'md', lg: 'xl' }}
-            lineHeight={{ base: '32px', lg: '50px' }}
-            fontWeight={ 600 }
-            color={ config.UI.homepage.plate.textColor }
-          >
-            { config.chain.name } explorer
-          </Heading>
-          <Box display={{ base: 'none', lg: 'flex' }}>
-            { config.features.account.isEnabled && <ProfileMenuDesktop isHomePage/> }
-            { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop isHomePage/> }
-          </Box>
-        </Flex>
-        <SearchBar isHomepage/>
-      </Box>
-      <Stats/>
-      <ChainIndicators/>
-      <AdBanner mt={{ base: 6, lg: 8 }} mx="auto" display="flex" justifyContent="center"/>
-      <Flex mt={ 8 } direction={{ base: 'column', lg: 'row' }} columnGap={ 12 } rowGap={ 8 }>
-        { rollupFeature.isEnabled && rollupFeature.type === 'zkEvm' ? <LatestZkEvmL2Batches/> : <LatestBlocks/> }
+      <HeroBanner/>
+      <Flex flexDir={{ base: 'column', lg: 'row' }} columnGap={ 2 } rowGap={ 1 } mt={ 3 } _empty={{ mt: 0 }}>
+        <Stats/>
+        <ChainIndicators/>
+      </Flex>
+      <AdBanner mt={ 6 } mx="auto" display={{ base: 'flex', lg: 'none' }} justifyContent="center"/>
+      <Flex mt={ 8 } direction={{ base: 'column', lg: 'row' }} columnGap={ 12 } rowGap={ 6 }>
+        { rollupFeature.isEnabled && rollupFeature.type === 'zkEvm' && <LatestZkEvmL2Batches/> }
+        { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && <LatestArbitrumL2Batches/> }
+        { !(rollupFeature.isEnabled && (rollupFeature.type === 'arbitrum' || rollupFeature.type === 'zkEvm')) && <LatestBlocks/> }
         <Box flexGrow={ 1 }>
           <Transactions/>
         </Box>
diff --git a/ui/pages/Login.pw.tsx b/ui/pages/Login.pw.tsx
index 5a56a8b55c..8462630141 100644
--- a/ui/pages/Login.pw.tsx
+++ b/ui/pages/Login.pw.tsx
@@ -1,25 +1,14 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import contextWithFeatures from 'playwright/fixtures/contextWithFeatures';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import Login from './Login';
 
-const testWithFeature = base.extend({
-  context: contextWithFeatures([
-    { id: 'test_value', value: 'kitty' },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
-});
-
-testWithFeature('has feature text', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Login/>
-    </TestApp>,
-  );
-
+test.fixme('has feature text', async({ render, mockFeatures }) => {
+  await mockFeatures([
+    [ 'test_value', 'kitty' ],
+  ]);
+  const component = await render(<Login/>);
   const featureText = component.getByText('kitty');
   await expect(featureText).toBeVisible();
 });
diff --git a/ui/pages/Marketplace.pw.tsx b/ui/pages/Marketplace.pw.tsx
index 06a2e2cb85..ab0b4d65f7 100644
--- a/ui/pages/Marketplace.pw.tsx
+++ b/ui/pages/Marketplace.pw.tsx
@@ -1,86 +1,101 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
-import { buildExternalAssetFilePath } from 'configs/app/utils';
 import { apps as appsMock } from 'mocks/apps/apps';
+import { ratings as ratingsMock } from 'mocks/apps/ratings';
 import { securityReports as securityReportsMock } from 'mocks/apps/securityReports';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import * as app from 'playwright/utils/app';
+import { test, expect, devices } from 'playwright/lib';
 
 import Marketplace from './Marketplace';
 
-const MARKETPLACE_CONFIG_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', 'https://marketplace-config.json') || '';
-const MARKETPLACE_SECURITY_REPORTS_URL =
-  app.url + buildExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL', 'https://marketplace-security-reports.json') || '';
+const MARKETPLACE_CONFIG_URL = 'http://localhost:4000/marketplace-config.json';
+const MARKETPLACE_SECURITY_REPORTS_URL = 'https://localhost:4000/marketplace-security-reports.json';
 
-const test = base.extend({
-  context: contextWithEnvs([
-    { name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: MARKETPLACE_CONFIG_URL },
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
-});
-
-test('base view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(MARKETPLACE_CONFIG_URL, (route) => route.fulfill({
+test.beforeEach(async({ mockConfigResponse, mockEnvs, mockAssetResponse, page }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_MARKETPLACE_ENABLED', 'true' ],
+    [ 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL ],
+    [ 'NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL', MARKETPLACE_SECURITY_REPORTS_URL ],
+    [ 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY', 'test' ],
+    [ 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID', 'test' ],
+  ]);
+  await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL, JSON.stringify(appsMock));
+  await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL', MARKETPLACE_SECURITY_REPORTS_URL, JSON.stringify(securityReportsMock));
+  await Promise.all(appsMock.map(app => mockAssetResponse(app.logo, './playwright/mocks/image_s.jpg')));
+  await page.route('https://api.airtable.com/v0/test/apps_ratings?fields%5B%5D=appId&fields%5B%5D=rating&fields%5B%5D=count', (route) => route.fulfill({
     status: 200,
-    body: JSON.stringify(appsMock),
+    body: JSON.stringify(ratingsMock),
   }));
+});
 
-  await Promise.all(appsMock.map(app =>
-    page.route(app.logo, (route) =>
-      route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      }),
-    ),
-  ));
-
-  const component = await mount(
-    <TestApp>
-      <Marketplace/>
-    </TestApp>,
-  );
+test('base view +@dark-mode', async({ render }) => {
+  const component = await render(<Marketplace/>);
 
   await expect(component).toHaveScreenshot();
 });
 
-const testWithScoreFeature = test.extend({
-  context: contextWithEnvs([
-    { name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: MARKETPLACE_CONFIG_URL },
-    { name: 'NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL', value: MARKETPLACE_SECURITY_REPORTS_URL },
-    { name: 'pw_feature:security_score_exp', value: 'true' },
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
+test('with featured app +@dark-mode', async({ render, mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_MARKETPLACE_FEATURED_APP', 'hop-exchange' ],
+  ]);
+  const component = await render(<Marketplace/>);
+
+  await expect(component).toHaveScreenshot();
 });
 
-testWithScoreFeature('with scores +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(MARKETPLACE_CONFIG_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(appsMock),
-  }));
+test('with banner +@dark-mode', async({ render, mockEnvs, mockConfigResponse }) => {
+  const MARKETPLACE_BANNER_CONTENT_URL = 'https://localhost/marketplace-banner.html';
+  const MARKETPLACE_BANNER_LINK_URL = 'https://example.com';
 
-  await page.route(MARKETPLACE_SECURITY_REPORTS_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(securityReportsMock),
-  }));
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL', MARKETPLACE_BANNER_CONTENT_URL ],
+    [ 'NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL', MARKETPLACE_BANNER_LINK_URL ],
+  ]);
+  await mockConfigResponse('MARKETPLACE_BANNER_CONTENT_URL', MARKETPLACE_BANNER_CONTENT_URL, './playwright/mocks/page.html', true);
+  const component = await render(<Marketplace/>);
 
-  await Promise.all(appsMock.map(app =>
-    page.route(app.logo, (route) =>
-      route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      }),
-    ),
-  ));
+  await expect(component).toHaveScreenshot();
+});
 
-  const component = await mount(
-    <TestApp>
-      <Marketplace/>
-    </TestApp>,
-  );
+// I had a memory error while running tests in GH actions
+// separate run for mobile tests fixes it
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  await component.getByText('Apps scores').click();
+  test('base view', async({ render }) => {
+    const component = await render(
+      <Box>
+        { /* Added a fake header because without the ActionBar works incorrectly without it */ }
+        <Box h="100px" backgroundColor="#dbdbdb" p={ 1 }>
+          Header
+        </Box>
+        <Marketplace/>
+      </Box>,
+    );
 
-  await expect(component).toHaveScreenshot();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('with featured app', async({ render, mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_MARKETPLACE_FEATURED_APP', 'hop-exchange' ],
+    ]);
+    const component = await render(<Marketplace/>);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('with banner', async({ render, mockEnvs, mockConfigResponse }) => {
+    const MARKETPLACE_BANNER_CONTENT_URL = 'https://localhost/marketplace-banner.html';
+    const MARKETPLACE_BANNER_LINK_URL = 'https://example.com';
+
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL', MARKETPLACE_BANNER_CONTENT_URL ],
+      [ 'NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL', MARKETPLACE_BANNER_LINK_URL ],
+    ]);
+    await mockConfigResponse('MARKETPLACE_BANNER_CONTENT_URL', MARKETPLACE_BANNER_CONTENT_URL, './playwright/mocks/page.html', true);
+    const component = await render(<Marketplace/>);
+
+    await expect(component).toHaveScreenshot();
+  });
 });
diff --git a/ui/pages/Marketplace.tsx b/ui/pages/Marketplace.tsx
index 7a57b14c97..8e4347a6f1 100644
--- a/ui/pages/Marketplace.tsx
+++ b/ui/pages/Marketplace.tsx
@@ -1,26 +1,27 @@
-import { Box, Menu, MenuButton, MenuItem, MenuList, Flex, IconButton, Skeleton } from '@chakra-ui/react';
+import { MenuButton, MenuItem, MenuList, Flex, IconButton } from '@chakra-ui/react';
 import React from 'react';
 import type { MouseEvent } from 'react';
 
-import { MarketplaceCategory, MarketplaceDisplayType } from 'types/client/marketplace';
+import { MarketplaceCategory } from 'types/client/marketplace';
 import type { TabItem } from 'ui/shared/Tabs/types';
 
 import config from 'configs/app';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
-import useFeatureValue from 'lib/growthbook/useFeatureValue';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import Banner from 'ui/marketplace/Banner';
 import ContractListModal from 'ui/marketplace/ContractListModal';
 import MarketplaceAppModal from 'ui/marketplace/MarketplaceAppModal';
 import MarketplaceDisclaimerModal from 'ui/marketplace/MarketplaceDisclaimerModal';
 import MarketplaceList from 'ui/marketplace/MarketplaceList';
-import MarketplaceListWithScores from 'ui/marketplace/MarketplaceListWithScores';
+import { SORT_OPTIONS } from 'ui/marketplace/utils';
+import ActionBar from 'ui/shared/ActionBar';
+import Menu from 'ui/shared/chakra/Menu';
 import FilterInput from 'ui/shared/filters/FilterInput';
 import IconSvg from 'ui/shared/IconSvg';
 import type { IconName } from 'ui/shared/IconSvg';
-import LinkExternal from 'ui/shared/LinkExternal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
 import PageTitle from 'ui/shared/Page/PageTitle';
-import RadioButtonGroup from 'ui/shared/radioButtonGroup/RadioButtonGroup';
-import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
+import Sort from 'ui/shared/sort/Sort';
 import TabsWithScroll from 'ui/shared/Tabs/TabsWithScroll';
 
 import useMarketplace from '../marketplace/useMarketplace';
@@ -55,6 +56,7 @@ const Marketplace = () => {
     filterQuery,
     onSearchInputChange,
     showAppInfo,
+    apps,
     displayedApps,
     selectedAppId,
     clearSelectedAppId,
@@ -67,13 +69,16 @@ const Marketplace = () => {
     isCategoriesPlaceholderData,
     showContractList,
     contractListModalType,
-    selectedDisplayType,
-    onDisplayTypeChange,
     hasPreviousStep,
+    setSorting,
+    userRatings,
+    rateApp,
+    isRatingSending,
+    isRatingLoading,
+    canRate,
   } = useMarketplace();
 
   const isMobile = useIsMobile();
-  const { value: isExperiment } = useFeatureValue('security_score_exp', false);
 
   const categoryTabs = React.useMemo(() => {
     const tabs: Array<TabItem> = categories.map(category => ({
@@ -92,13 +97,13 @@ const Marketplace = () => {
 
     tabs.unshift({
       id: MarketplaceCategory.FAVORITES,
-      title: () => <IconSvg name="star_outline" w={ 5 } h={ 5 }/>,
-      count: null,
+      title: () => <IconSvg name="heart_filled" boxSize={ 5 } verticalAlign="middle" mt={ -1 }/>,
+      count: favoriteApps.length,
       component: null,
     });
 
     return tabs;
-  }, [ categories, appsTotal ]);
+  }, [ categories, appsTotal, favoriteApps.length ]);
 
   const selectedCategoryIndex = React.useMemo(() => {
     const index = categoryTabs.findIndex(c => c.id === selectedCategoryId);
@@ -132,10 +137,13 @@ const Marketplace = () => {
     return null;
   }
 
+  const showSort = SORT_OPTIONS.length > 1;
+
   return (
     <>
       <PageTitle
         title="DAppscout"
+        mb={ 2 }
         contentAfter={ (isMobile && links.length > 1) ? (
           <Menu>
             <MenuButton
@@ -152,7 +160,7 @@ const Marketplace = () => {
                 <MenuItem key={ label } as="a" href={ href } target="_blank" py={ 2 } px={ 4 }>
                   <IconSvg name={ icon } boxSize={ 4 } mr={ 2.5 }/>
                   { label }
-                  <IconSvg name="arrows/north-east" boxSize={ 4 } color="gray.400" ml={ 2 }/>
+                  <IconSvg name="link_external" boxSize={ 3 } color="icon_link_external" ml={ 2 }/>
                 </MenuItem>
               )) }
             </MenuList>
@@ -167,84 +175,68 @@ const Marketplace = () => {
           </Flex>
         ) }
       />
-      <Box marginTop={{ base: 0, lg: 8 }}>
-        { (isCategoriesPlaceholderData) ? (
-          <TabsSkeleton tabs={ categoryTabs }/>
-        ) : (
-          <TabsWithScroll
-            tabs={ categoryTabs }
-            onTabChange={ handleCategoryChange }
-            defaultTabIndex={ selectedCategoryIndex }
-            marginBottom={ -2 }
-          />
-        ) }
-      </Box>
 
-      <Flex direction={{ base: 'column', lg: 'row' }} mb={{ base: 4, lg: 6 }} gap={{ base: 4, lg: 3 }}>
-        { (feature.securityReportsUrl && isExperiment) && (
-          <Skeleton isLoaded={ !isPlaceholderData }>
-            <RadioButtonGroup<MarketplaceDisplayType>
-              onChange={ onDisplayTypeChange }
-              defaultValue={ selectedDisplayType }
-              name="type"
-              options={ [
-                {
-                  title: 'Discovery',
-                  value: MarketplaceDisplayType.DEFAULT,
-                  icon: 'apps_xs',
-                  onlyIcon: false,
-                },
-                {
-                  title: 'Apps scores',
-                  value: MarketplaceDisplayType.SCORES,
-                  icon: 'apps_list',
-                  onlyIcon: false,
-                  contentAfter: (
-                    <IconSvg
-                      name={ isMobile ? 'beta_xs' : 'beta' }
-                      h={ 3 }
-                      w={ isMobile ? 3 : 7 }
-                      ml={ 1 }
-                    />
-                  ),
-                },
-              ] }
-              autoWidth
-            />
-          </Skeleton>
-        ) }
-        <FilterInput
-          initialValue={ filterQuery }
-          onChange={ onSearchInputChange }
-          placeholder="Find app by name or keyword..."
-          isLoading={ isPlaceholderData }
-          size={ (feature.securityReportsUrl && isExperiment) ? 'xs' : 'sm' }
-          flex="1"
-        />
-      </Flex>
+      <Banner
+        apps={ apps }
+        favoriteApps={ favoriteApps }
+        isLoading={ isPlaceholderData }
+        onInfoClick={ showAppInfo }
+        onFavoriteClick={ onFavoriteClick }
+        onAppClick={ handleAppClick }
+      />
 
-      { (selectedDisplayType === MarketplaceDisplayType.SCORES && feature.securityReportsUrl && isExperiment) ? (
-        <MarketplaceListWithScores
-          apps={ displayedApps }
-          showAppInfo={ showAppInfo }
-          favoriteApps={ favoriteApps }
-          onFavoriteClick={ onFavoriteClick }
-          isLoading={ isPlaceholderData }
-          selectedCategoryId={ selectedCategoryId }
-          onAppClick={ handleAppClick }
-          showContractList={ showContractList }
-        />
-      ) : (
-        <MarketplaceList
-          apps={ displayedApps }
-          showAppInfo={ showAppInfo }
-          favoriteApps={ favoriteApps }
-          onFavoriteClick={ onFavoriteClick }
-          isLoading={ isPlaceholderData }
-          selectedCategoryId={ selectedCategoryId }
-          onAppClick={ handleAppClick }
+      <ActionBar
+        showShadow
+        display="flex"
+        flexDirection="column"
+        mx={{ base: -3, lg: -12 }}
+        px={{ base: 3, lg: 12 }}
+        pt={{ base: 4, lg: 6 }}
+        pb={{ base: 4, lg: 3 }}
+      >
+        <TabsWithScroll
+          tabs={ categoryTabs }
+          onTabChange={ handleCategoryChange }
+          defaultTabIndex={ selectedCategoryIndex }
+          marginBottom={ -2 }
+          isLoading={ isCategoriesPlaceholderData }
         />
-      ) }
+
+        <Flex gap={{ base: 2, lg: 3 }}>
+          { showSort && (
+            <Sort
+              name="dapps_sorting"
+              options={ SORT_OPTIONS }
+              onChange={ setSorting }
+              isLoading={ isPlaceholderData }
+            />
+          ) }
+          <FilterInput
+            initialValue={ filterQuery }
+            onChange={ onSearchInputChange }
+            placeholder="Find app by name or keyword..."
+            isLoading={ isPlaceholderData }
+            size={ showSort ? 'xs' : 'sm' }
+            w={{ base: '100%', lg: '350px' }}
+          />
+        </Flex>
+      </ActionBar>
+
+      <MarketplaceList
+        apps={ displayedApps }
+        showAppInfo={ showAppInfo }
+        favoriteApps={ favoriteApps }
+        onFavoriteClick={ onFavoriteClick }
+        isLoading={ isPlaceholderData }
+        selectedCategoryId={ selectedCategoryId }
+        onAppClick={ handleAppClick }
+        showContractList={ showContractList }
+        userRatings={ userRatings }
+        rateApp={ rateApp }
+        isRatingSending={ isRatingSending }
+        isRatingLoading={ isRatingLoading }
+        canRate={ canRate }
+      />
 
       { (selectedApp && isAppInfoModalOpen) && (
         <MarketplaceAppModal
@@ -253,6 +245,11 @@ const Marketplace = () => {
           onFavoriteClick={ onFavoriteClick }
           data={ selectedApp }
           showContractList={ showContractList }
+          userRating={ userRatings[selectedApp.id] }
+          rateApp={ rateApp }
+          isRatingSending={ isRatingSending }
+          isRatingLoading={ isRatingLoading }
+          canRate={ canRate }
         />
       ) }
 
diff --git a/ui/pages/MarketplaceApp.pw.tsx b/ui/pages/MarketplaceApp.pw.tsx
index b6b86599f2..ef89aa13ed 100644
--- a/ui/pages/MarketplaceApp.pw.tsx
+++ b/ui/pages/MarketplaceApp.pw.tsx
@@ -1,17 +1,15 @@
 import { Flex } from '@chakra-ui/react';
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
+import { numberToHex } from 'viem';
 
-import { buildExternalAssetFilePath } from 'configs/app/utils';
+import config from 'configs/app';
 import { apps as appsMock } from 'mocks/apps/apps';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import * as app from 'playwright/utils/app';
+import { ratings as ratingsMock } from 'mocks/apps/ratings';
+import { securityReports as securityReportsMock } from 'mocks/apps/securityReports';
+import { test, expect, devices } from 'playwright/lib';
 
 import MarketplaceApp from './MarketplaceApp';
 
-const MARKETPLACE_CONFIG_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', 'https://marketplace-config.json') || '';
-
 const hooksConfig = {
   router: {
     query: { id: appsMock[0].id },
@@ -19,39 +17,39 @@ const hooksConfig = {
   },
 };
 
-const testFn: Parameters<typeof test>[1] = async({ mount, page }) => {
-  await page.route(MARKETPLACE_CONFIG_URL, (route) => route.fulfill({
+const MARKETPLACE_CONFIG_URL = 'http://localhost:4000/marketplace-config.json';
+const MARKETPLACE_SECURITY_REPORTS_URL = 'http://localhost:4000/marketplace-security-reports.json';
+
+const testFn: Parameters<typeof test>[1] = async({ render, mockConfigResponse, mockAssetResponse, mockEnvs, mockRpcResponse, page }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_MARKETPLACE_ENABLED', 'true' ],
+    [ 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL ],
+    [ 'NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL', MARKETPLACE_SECURITY_REPORTS_URL ],
+    [ 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY', 'test' ],
+    [ 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID', 'test' ],
+  ]);
+  await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL, JSON.stringify(appsMock));
+  await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL', MARKETPLACE_SECURITY_REPORTS_URL, JSON.stringify(securityReportsMock));
+  await mockAssetResponse(appsMock[0].url, './mocks/apps/app.html');
+  await mockRpcResponse({
+    Method: 'eth_chainId',
+    ReturnType: numberToHex(Number(config.chain.id)),
+  });
+  await page.route('https://api.airtable.com/v0/test/apps_ratings?fields%5B%5D=appId&fields%5B%5D=rating&fields%5B%5D=count', (route) => route.fulfill({
     status: 200,
-    body: JSON.stringify(appsMock),
+    body: JSON.stringify(ratingsMock),
   }));
 
-  await page.route(appsMock[0].url, (route) =>
-    route.fulfill({
-      status: 200,
-      path: './mocks/apps/app.html',
-    }),
-  );
-
-  const component = await mount(
-    <TestApp>
-      { /* added Flex as a Layout because the iframe has negative margins */ }
-      <Flex flexDirection="column" mx={{ base: 4, lg: 6 }}>
-        <MarketplaceApp/>
-      </Flex>
-    </TestApp>,
+  const component = await render(
+    <Flex flexDirection="column" mx={{ base: 4, lg: 6 }} h="100vh">
+      <MarketplaceApp/>
+    </Flex>,
     { hooksConfig },
   );
 
   await expect(component).toHaveScreenshot();
 };
 
-const test = base.extend({
-  context: contextWithEnvs([
-    { name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: MARKETPLACE_CONFIG_URL },
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
-});
-
 test('base view +@dark-mode', testFn);
 
 test.describe('mobile', () => {
diff --git a/ui/pages/MarketplaceApp.tsx b/ui/pages/MarketplaceApp.tsx
index c04ba4fecf..78e14ca4e3 100644
--- a/ui/pages/MarketplaceApp.tsx
+++ b/ui/pages/MarketplaceApp.tsx
@@ -1,8 +1,8 @@
-import { Box, Center, useColorMode } from '@chakra-ui/react';
+import { Box, Center, useColorMode, Flex } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import { DappscoutIframeProvider, useDappscoutIframe } from 'dappscout-iframe';
 import { useRouter } from 'next/router';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState, useMemo } from 'react';
 
 import type { MarketplaceAppOverview } from 'types/client/marketplace';
 
@@ -11,6 +11,7 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
 import useApiFetch from 'lib/api/useApiFetch';
+import { useMarketplaceContext } from 'lib/contexts/marketplace';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
 import useFetch from 'lib/hooks/useFetch';
 import * as metadata from 'lib/metadata';
@@ -21,6 +22,7 @@ import MarketplaceAppTopBar from '../marketplace/MarketplaceAppTopBar';
 import useAutoConnectWallet from '../marketplace/useAutoConnectWallet';
 import useMarketplaceWallet from '../marketplace/useMarketplaceWallet';
 import useSecurityReports from '../marketplace/useSecurityReports';
+import { getAppUrl } from '../marketplace/utils';
 
 const feature = config.features.marketplace;
 
@@ -35,9 +37,10 @@ type Props = {
   address: string | undefined;
   data: MarketplaceAppOverview | undefined;
   isPending: boolean;
+  appUrl?: string;
 };
 
-const MarketplaceAppContent = ({ address, data, isPending }: Props) => {
+const MarketplaceAppContent = ({ address, data, isPending, appUrl }: Props) => {
   const { iframeRef, isReady } = useDappscoutIframe();
 
   const [ iframeKey, setIframeKey ] = useState(0);
@@ -71,7 +74,7 @@ const MarketplaceAppContent = ({ address, data, isPending }: Props) => {
 
   return (
     <Center
-      h="100vh"
+      flexGrow={ 1 }
       mx={{ base: -4, lg: -6 }}
     >
       { (isFrameLoading) && (
@@ -88,7 +91,7 @@ const MarketplaceAppContent = ({ address, data, isPending }: Props) => {
           h="100%"
           w="100%"
           display={ isFrameLoading ? 'none' : 'block' }
-          src={ data.url }
+          src={ appUrl }
           title={ data.title }
           onLoad={ handleIframeLoad }
         />
@@ -129,6 +132,9 @@ const MarketplaceApp = () => {
     enabled: feature.isEnabled,
   });
   const { data, isPending } = query;
+  const { setIsAutoConnectDisabled } = useMarketplaceContext();
+
+  const appUrl = useMemo(() => getAppUrl(data?.url, router), [ data?.url, router ]);
 
   useEffect(() => {
     if (data) {
@@ -136,30 +142,31 @@ const MarketplaceApp = () => {
         { pathname: '/apps/[id]', query: { id: data.id } },
         { app_name: data.title },
       );
+      setIsAutoConnectDisabled(!data.internalWallet);
     }
-  }, [ data ]);
+  }, [ data, setIsAutoConnectDisabled ]);
 
   throwOnResourceLoadError(query);
 
   return (
-    <>
+    <Flex flexDirection="column" h="100%">
       <MarketplaceAppTopBar
+        appId={ id }
         data={ data }
         isLoading={ isPending || isSecurityReportsLoading }
-        isWalletConnected={ Boolean(address) }
         securityReport={ securityReports?.[id] }
       />
       <DappscoutIframeProvider
         address={ address }
-        appUrl={ data?.url }
+        appUrl={ appUrl }
         rpcUrl={ config.chain.rpcUrl }
         sendTransaction={ sendTransaction }
         signMessage={ signMessage }
         signTypedData={ signTypedData }
       >
-        <MarketplaceAppContent address={ address } data={ data } isPending={ isPending }/>
+        <MarketplaceAppContent address={ address } data={ data } isPending={ isPending } appUrl={ appUrl }/>
       </DappscoutIframeProvider>
-    </>
+    </Flex>
   );
 };
 
diff --git a/ui/pages/MudWorlds.pw.tsx b/ui/pages/MudWorlds.pw.tsx
new file mode 100644
index 0000000000..f89ac27ef6
--- /dev/null
+++ b/ui/pages/MudWorlds.pw.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { mudWorlds } from 'mocks/mud/mudWorlds';
+import { test, expect } from 'playwright/lib';
+
+import MudWorlds from './MudWorlds';
+
+test('default view +@mobile', async({ mockTextAd, mockApiResponse, render }) => {
+  await mockTextAd();
+  await mockApiResponse('mud_worlds', mudWorlds);
+  const component = await render(<MudWorlds/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/MudWorlds.tsx b/ui/pages/MudWorlds.tsx
new file mode 100644
index 0000000000..4c77534325
--- /dev/null
+++ b/ui/pages/MudWorlds.tsx
@@ -0,0 +1,68 @@
+import { Hide, Show } from '@chakra-ui/react';
+import React from 'react';
+
+import { MUD_WORLD } from 'stubs/mud';
+import { generateListStub } from 'stubs/utils';
+import MudWorldsListItem from 'ui/mudWorlds/MudWorldsListItem';
+import MudWorldsTable from 'ui/mudWorlds/MudWorldsTable';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+
+const MudWorlds = () => {
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'mud_worlds',
+    options: {
+      placeholderData: generateListStub<'mud_worlds'>(
+        MUD_WORLD,
+        50,
+        {
+          next_page_params: {
+            items_count: 50,
+            world: '1',
+          },
+        },
+      ),
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        { data.items.map(((item, index) => (
+          <MudWorldsListItem
+            key={ item.address.hash + (isPlaceholderData ? String(index) : '') }
+            item={ item }
+            isLoading={ isPlaceholderData }
+          />
+        ))) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <MudWorldsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  const actionBar = pagination.isVisible ? (
+    <ActionBar mt={ -6 }>
+      <Pagination ml="auto" { ...pagination }/>
+    </ActionBar>
+  ) : null;
+
+  return (
+    <>
+      <PageTitle title="MUD worlds" withTextAd/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no MUD worlds."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default MudWorlds;
diff --git a/ui/pages/MyProfile.tsx b/ui/pages/MyProfile.tsx
index bd3972ef6d..4b47b6f782 100644
--- a/ui/pages/MyProfile.tsx
+++ b/ui/pages/MyProfile.tsx
@@ -27,7 +27,7 @@ const MyProfile = () => {
         <FormControl variant="floating" id="name" isRequired size="lg">
           <Input
             required
-            disabled
+            readOnly
             value={ data.name || '' }
           />
           <FormLabel>Name</FormLabel>
@@ -35,7 +35,7 @@ const MyProfile = () => {
         <FormControl variant="floating" id="nickname" isRequired size="lg">
           <Input
             required
-            disabled
+            readOnly
             value={ data.nickname || '' }
           />
           <FormLabel>Nickname</FormLabel>
@@ -43,7 +43,7 @@ const MyProfile = () => {
         <FormControl variant="floating" id="email" isRequired size="lg">
           <Input
             required
-            disabled
+            readOnly
             value={ data.email || '' }
           />
           <FormLabel>Email</FormLabel>
diff --git a/ui/pages/NameDomain.pw.tsx b/ui/pages/NameDomain.pw.tsx
index d91b3297b5..31f46ece55 100644
--- a/ui/pages/NameDomain.pw.tsx
+++ b/ui/pages/NameDomain.pw.tsx
@@ -1,41 +1,21 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import config from 'configs/app';
-import * as textAdMock from 'mocks/ad/textAd';
 import * as ensDomainMock from 'mocks/ens/domain';
 import * as ensDomainEventsMock from 'mocks/ens/events';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import NameDomain from './NameDomain';
 
-const DOMAIN_API_URL = buildApiUrl('domain_info', { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name });
-const DOMAIN_EVENTS_API_URL = buildApiUrl('domain_events', { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name });
-
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
+test('details tab', async({ render, mockTextAd, mockApiResponse, mockAssetResponse }) => {
+  await mockTextAd();
+  await mockApiResponse('domain_info', ensDomainMock.ensDomainA, {
+    pathParams: { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name },
   });
-});
+  await mockAssetResponse(ensDomainMock.ensDomainA.protocol?.icon_url as string, './playwright/mocks/image_s.jpg');
 
-test('details tab', async({ mount, page }) => {
-  await page.route(DOMAIN_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(ensDomainMock.ensDomainA),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <NameDomain/>
-    </TestApp>,
+  const component = await render(
+    <NameDomain/>,
     { hooksConfig: {
       router: {
         query: { name: ensDomainMock.ensDomainA.name },
@@ -43,30 +23,25 @@ test('details tab', async({ mount, page }) => {
       },
     } },
   );
-
   await expect(component).toHaveScreenshot();
 });
 
-test('history tab +@mobile', async({ mount, page }) => {
-  await page.route(DOMAIN_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(ensDomainMock.ensDomainA),
-  }));
-  await page.route(DOMAIN_EVENTS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({
-      items: [
-        ensDomainEventsMock.ensDomainEventA,
-        ensDomainEventsMock.ensDomainEventB,
-      ],
-      totalRecords: 2,
-    }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <NameDomain/>
-    </TestApp>,
+test('history tab +@mobile', async({ render, mockTextAd, mockApiResponse, mockAssetResponse }) => {
+  await mockTextAd();
+  await mockApiResponse('domain_info', ensDomainMock.ensDomainA, {
+    pathParams: { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name },
+  });
+  await mockApiResponse('domain_events', {
+    items: [
+      ensDomainEventsMock.ensDomainEventA,
+      ensDomainEventsMock.ensDomainEventB,
+    ],
+  }, {
+    pathParams: { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name },
+  });
+  await mockAssetResponse(ensDomainMock.ensDomainA.protocol?.icon_url as string, './playwright/mocks/image_s.jpg');
+  const component = await render(
+    <NameDomain/>,
     { hooksConfig: {
       router: {
         query: { name: ensDomainMock.ensDomainA.name, tab: 'history' },
@@ -74,6 +49,5 @@ test('history tab +@mobile', async({ mount, page }) => {
       },
     } },
   );
-
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/pages/NameDomain.tsx b/ui/pages/NameDomain.tsx
index cf3977e8c5..d1ca3a158e 100644
--- a/ui/pages/NameDomain.tsx
+++ b/ui/pages/NameDomain.tsx
@@ -17,7 +17,7 @@ import TextAd from 'ui/shared/ad/TextAd';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
@@ -36,7 +36,7 @@ const NameDomain = () => {
 
   const tabs: Array<RoutedTab> = [
     { id: 'details', title: 'Details', component: <NameDomainDetails query={ infoQuery }/> },
-    { id: 'history', title: 'History', component: <NameDomainHistory/> },
+    { id: 'history', title: 'History', component: <NameDomainHistory domain={ infoQuery.data }/> },
   ];
 
   const tabIndex = useTabIndexFromQuery(tabs);
@@ -57,10 +57,11 @@ const NameDomain = () => {
       flexWrap={{ base: 'wrap', lg: 'nowrap' }}
     >
       <EnsEntity
-        name={ domainName }
+        domain={ domainName }
+        protocol={ infoQuery.data?.protocol }
         isLoading={ isLoading }
         noLink
-        maxW={{ lg: infoQuery.data?.resolved_address ? '300px' : 'min-content' }}
+        maxW={{ lg: infoQuery.data?.resolved_address ? '300px' : 'max-content' }}
       />
       { infoQuery.data?.resolved_address && (
         <Flex alignItems="center" maxW="100%" columnGap={ 3 }>
diff --git a/ui/pages/NameDomains.pw.tsx b/ui/pages/NameDomains.pw.tsx
index 6a522b6faf..4ee5bbf98c 100644
--- a/ui/pages/NameDomains.pw.tsx
+++ b/ui/pages/NameDomains.pw.tsx
@@ -1,50 +1,45 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import config from 'configs/app';
-import * as textAdMock from 'mocks/ad/textAd';
 import * as ensDomainMock from 'mocks/ens/domain';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import NameDomains from './NameDomains';
 
-const DOMAINS_LOOKUP_API_URL = buildApiUrl('domains_lookup', { chainId: config.chain.id }) + '?only_active=true';
-
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
+test.beforeEach(async({ mockApiResponse, mockAssetResponse, mockTextAd }) => {
+  await mockTextAd();
+  await mockAssetResponse(ensDomainMock.protocolA.icon_url as string, './playwright/mocks/image_s.jpg');
+  await mockAssetResponse(ensDomainMock.protocolB.icon_url as string, './playwright/mocks/image_md.jpg');
+  await mockApiResponse('domains_lookup', {
+    items: [
+      ensDomainMock.ensDomainA,
+      ensDomainMock.ensDomainB,
+      ensDomainMock.ensDomainC,
+      ensDomainMock.ensDomainD,
+    ],
+    next_page_params: {
+      page_token: '<token>',
+      page_size: 50,
+    },
+  }, {
+    pathParams: { chainId: config.chain.id },
+    queryParams: { only_active: true },
+  });
+  await mockApiResponse('domain_protocols', {
+    items: [ ensDomainMock.protocolA, ensDomainMock.protocolB ],
+  }, {
+    pathParams: { chainId: config.chain.id },
   });
 });
 
-test('default view +@mobile', async({ mount, page }) => {
-  await page.route(DOMAINS_LOOKUP_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({
-      items: [
-        ensDomainMock.ensDomainA,
-        ensDomainMock.ensDomainB,
-        ensDomainMock.ensDomainC,
-        ensDomainMock.ensDomainD,
-      ],
-      next_page_params: {
-        token_id: '<token-id>',
-      },
-    }),
-  }));
+test('default view +@mobile', async({ render }) => {
+  const component = await render(<NameDomains/>);
+  await expect(component).toHaveScreenshot();
+});
 
-  const component = await mount(
-    <TestApp>
-      <NameDomains/>
-    </TestApp>,
-  );
+test('filters', async({ render, page }) => {
+  const component = await render(<NameDomains/>);
 
-  await expect(component).toHaveScreenshot();
+  await component.getByRole('button', { name: 'Filter' }).click();
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 500 } });
 });
diff --git a/ui/pages/NameDomains.tsx b/ui/pages/NameDomains.tsx
index 4c52c067d7..3a4dd754f2 100644
--- a/ui/pages/NameDomains.tsx
+++ b/ui/pages/NameDomains.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import type { EnsDomainLookupFiltersOptions, EnsLookupSorting } from 'types/api/ens';
 
 import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
 import useDebounce from 'lib/hooks/useDebounce';
 import { apos } from 'lib/html-entities';
 import getQueryParamString from 'lib/router/getQueryParamString';
@@ -29,6 +30,7 @@ const NameDomains = () => {
   const ownedBy = getQueryParamString(router.query.owned_by);
   const resolvedTo = getQueryParamString(router.query.resolved_to);
   const onlyActive = getQueryParamString(router.query.only_active);
+  const protocols = Array.isArray(router.query.protocols) ? router.query.protocols : (router.query.protocols ?? '').split(',').filter(Boolean);
 
   const initialFilters: EnsDomainLookupFiltersOptions = [
     ownedBy === 'true' ? 'owned_by' as const : undefined,
@@ -40,6 +42,7 @@ const NameDomains = () => {
   const [ searchTerm, setSearchTerm ] = React.useState<string>(q || '');
   const [ filterValue, setFilterValue ] = React.useState<EnsDomainLookupFiltersOptions>(initialFilters);
   const [ sort, setSort ] = React.useState<Sort | undefined>(initialSort);
+  const [ protocolsFilter, setProtocolsFilter ] = React.useState<Array<string>>(protocols);
 
   const debouncedSearchTerm = useDebounce(searchTerm, 300);
   const isAddressSearch = React.useMemo(() => ADDRESS_REGEXP.test(debouncedSearchTerm), [ debouncedSearchTerm ]);
@@ -53,11 +56,12 @@ const NameDomains = () => {
       resolved_to: filterValue.includes('resolved_to'),
       owned_by: filterValue.includes('owned_by'),
       only_active: !filterValue.includes('with_inactive'),
+      protocols: protocolsFilter.length > 0 ? protocolsFilter : undefined,
     },
     sorting: sortParams,
     options: {
       enabled: isAddressSearch,
-      placeholderData: generateListStub<'addresses_lookup'>(ENS_DOMAIN, 50, { next_page_params: null }),
+      placeholderData: generateListStub<'addresses_lookup'>(ENS_DOMAIN, 50, { next_page_params: undefined }),
     },
   });
 
@@ -67,14 +71,19 @@ const NameDomains = () => {
     filters: {
       name: debouncedSearchTerm,
       only_active: !filterValue.includes('with_inactive'),
+      protocols: protocolsFilter.length > 0 ? protocolsFilter : undefined,
     },
     sorting: sortParams,
     options: {
       enabled: !isAddressSearch,
-      placeholderData: generateListStub<'domains_lookup'>(ENS_DOMAIN, 50, { next_page_params: null }),
+      placeholderData: generateListStub<'domains_lookup'>(ENS_DOMAIN, 50, { next_page_params: undefined }),
     },
   });
 
+  const protocolsQuery = useApiQuery('domain_protocols', {
+    pathParams: { chainId: config.chain.id },
+  });
+
   const query = isAddressSearch ? addressesLookupQuery : domainsLookupQuery;
   const { data, isError, isPlaceholderData: isLoading, onFilterChange, onSortingChange } = query;
 
@@ -87,12 +96,14 @@ const NameDomains = () => {
         resolved_to: true,
         owned_by: true,
         only_active: !hasInactiveFilter,
+        protocols: protocolsFilter,
       });
     } else {
       setFilterValue([ hasInactiveFilter ? 'with_inactive' as const : undefined ].filter(Boolean));
       onFilterChange<'domains_lookup'>({
         name: debouncedSearchTerm,
         only_active: !hasInactiveFilter,
+        protocols: protocolsFilter,
       });
     }
   // should run only the type of search changes
@@ -123,14 +134,16 @@ const NameDomains = () => {
         resolved_to: filterValue.includes('resolved_to'),
         owned_by: filterValue.includes('owned_by'),
         only_active: !filterValue.includes('with_inactive'),
+        protocols: protocolsFilter,
       });
     } else {
       onFilterChange<'domains_lookup'>({
         name: value,
         only_active: !filterValue.includes('with_inactive'),
+        protocols: protocolsFilter,
       });
     }
-  }, [ onFilterChange, filterValue ]);
+  }, [ onFilterChange, filterValue, protocolsFilter ]);
 
   const handleFilterValueChange = React.useCallback((value: EnsDomainLookupFiltersOptions) => {
     setFilterValue(value);
@@ -142,16 +155,40 @@ const NameDomains = () => {
         resolved_to: value.includes('resolved_to'),
         owned_by: value.includes('owned_by'),
         only_active: !value.includes('with_inactive'),
+        protocols: protocolsFilter,
       });
     } else {
       onFilterChange<'domains_lookup'>({
         name: debouncedSearchTerm,
         only_active: !value.includes('with_inactive'),
+        protocols: protocolsFilter,
+      });
+    }
+  }, [ debouncedSearchTerm, onFilterChange, protocolsFilter ]);
+
+  const handleProtocolsFilterChange = React.useCallback((nextValue: Array<string>) => {
+    setProtocolsFilter(nextValue);
+
+    const isAddressSearch = ADDRESS_REGEXP.test(debouncedSearchTerm);
+    if (isAddressSearch) {
+      onFilterChange<'addresses_lookup'>({
+        address: debouncedSearchTerm,
+        resolved_to: filterValue.includes('resolved_to'),
+        owned_by: filterValue.includes('owned_by'),
+        only_active: !filterValue.includes('with_inactive'),
+        protocols: nextValue,
+      });
+    } else {
+      onFilterChange<'domains_lookup'>({
+        name: debouncedSearchTerm,
+        only_active: !filterValue.includes('with_inactive'),
+        protocols: nextValue,
       });
     }
-  }, [ debouncedSearchTerm, onFilterChange ]);
+  }, [ debouncedSearchTerm, filterValue, onFilterChange ]);
 
-  const hasActiveFilters = Boolean(debouncedSearchTerm) || filterValue.length > 0;
+  const hasActiveFilters = Boolean(debouncedSearchTerm) || filterValue.length > 0 ||
+    (protocolsQuery.data && protocolsQuery.data.items.length > 1 ? protocolsFilter.length > 0 : false);
 
   const content = (
     <>
@@ -184,6 +221,9 @@ const NameDomains = () => {
       onSearchChange={ handleSearchTermChange }
       filterValue={ filterValue }
       onFilterValueChange={ handleFilterValueChange }
+      protocolsData={ protocolsQuery.data?.items }
+      protocolsFilterValue={ protocolsFilter }
+      onProtocolsFilterChange={ handleProtocolsFilterChange }
       sort={ sort }
       onSortChange={ setSort }
       isAddressSearch={ isAddressSearch }
@@ -193,7 +233,10 @@ const NameDomains = () => {
 
   return (
     <>
-      <PageTitle title="Name services lookup" withTextAd/>
+      <PageTitle
+        title={ config.meta.seo.enhancedDataEnabled ? `${ config.chain.name } name domains` : 'Name services lookup' }
+        withTextAd
+      />
       <DataListDisplay
         isError={ isError }
         items={ data?.items }
diff --git a/ui/pages/OptimisticL2Deposits.pw.tsx b/ui/pages/OptimisticL2Deposits.pw.tsx
index b1737edd05..8095e66b2f 100644
--- a/ui/pages/OptimisticL2Deposits.pw.tsx
+++ b/ui/pages/OptimisticL2Deposits.pw.tsx
@@ -1,48 +1,22 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import { data as depositsData } from 'mocks/l2deposits/deposits';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { data as depositsData } from 'mocks/optimism/deposits';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import OptimisticL2Deposits from './OptimisticL2Deposits';
 
-const DEPOSITS_API_URL = buildApiUrl('l2_deposits');
-const DEPOSITS_COUNT_API_URL = buildApiUrl('l2_deposits_count');
-
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
-test('base view +@mobile', async({ mount, page }) => {
+test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
   // test on mobile is flaky
   // my assumption is there is not enough time to calculate hashes truncation so component is unstable
   // so I raised the test timeout to check if it helps
   test.slow();
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  await mockTextAd();
+  await mockApiResponse('optimistic_l2_deposits', depositsData);
+  await mockApiResponse('optimistic_l2_deposits_count', 3971111);
 
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(DEPOSITS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(depositsData),
-  }));
-
-  await page.route(DEPOSITS_COUNT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: '3971111',
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <OptimisticL2Deposits/>
-    </TestApp>,
-  );
+  const component = await render(<OptimisticL2Deposits/>);
 
   await expect(component).toHaveScreenshot({ timeout: 10_000 });
 });
diff --git a/ui/pages/OptimisticL2Deposits.tsx b/ui/pages/OptimisticL2Deposits.tsx
index c23a842eee..2f22162b00 100644
--- a/ui/pages/OptimisticL2Deposits.tsx
+++ b/ui/pages/OptimisticL2Deposits.tsx
@@ -7,6 +7,7 @@ import { L2_DEPOSIT_ITEM } from 'stubs/L2';
 import { generateListStub } from 'stubs/utils';
 import OptimisticDepositsListItem from 'ui/deposits/optimisticL2/OptimisticDepositsListItem';
 import OptimisticDepositsTable from 'ui/deposits/optimisticL2/OptimisticDepositsTable';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -14,9 +15,9 @@ import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
 
 const OptimisticL2Deposits = () => {
   const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
-    resourceName: 'l2_deposits',
+    resourceName: 'optimistic_l2_deposits',
     options: {
-      placeholderData: generateListStub<'l2_deposits'>(
+      placeholderData: generateListStub<'optimistic_l2_deposits'>(
         L2_DEPOSIT_ITEM,
         50,
         {
@@ -30,7 +31,7 @@ const OptimisticL2Deposits = () => {
     },
   });
 
-  const countersQuery = useApiQuery('l2_deposits_count', {
+  const countersQuery = useApiQuery('optimistic_l2_deposits_count', {
     queryOptions: {
       placeholderData: 1927029,
     },
@@ -48,7 +49,7 @@ const OptimisticL2Deposits = () => {
         ))) }
       </Show>
       <Hide below="lg" ssr={ false }>
-        <OptimisticDepositsTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <OptimisticDepositsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
       </Hide>
     </>
   ) : null;
diff --git a/ui/pages/OptimisticL2DisputeGames.pw.tsx b/ui/pages/OptimisticL2DisputeGames.pw.tsx
new file mode 100644
index 0000000000..7426983ccb
--- /dev/null
+++ b/ui/pages/OptimisticL2DisputeGames.pw.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { data as disputeGamesData } from 'mocks/optimism/disputeGames';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import OptimisticL2DisputeGames from './OptimisticL2DisputeGames';
+
+test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
+  test.slow();
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  await mockTextAd();
+  await mockApiResponse('optimistic_l2_dispute_games', disputeGamesData);
+  await mockApiResponse('optimistic_l2_dispute_games_count', 3971111);
+
+  const component = await render(<OptimisticL2DisputeGames/>);
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/OptimisticL2DisputeGames.tsx b/ui/pages/OptimisticL2DisputeGames.tsx
new file mode 100644
index 0000000000..a21f5061e4
--- /dev/null
+++ b/ui/pages/OptimisticL2DisputeGames.tsx
@@ -0,0 +1,86 @@
+import { Hide, Show, Skeleton, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { L2_DISPUTE_GAMES_ITEM } from 'stubs/L2';
+import { generateListStub } from 'stubs/utils';
+import OptimisticL2DisputeGamesListItem from 'ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesListItem';
+import OptimisticL2DisputeGamesTable from 'ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTable';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+
+const OptimisticL2DisputeGames = () => {
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'optimistic_l2_dispute_games',
+    options: {
+      placeholderData: generateListStub<'optimistic_l2_dispute_games'>(
+        L2_DISPUTE_GAMES_ITEM,
+        50,
+        {
+          next_page_params: {
+            items_count: 50,
+            index: 9045200,
+          },
+        },
+      ),
+    },
+  });
+
+  const countersQuery = useApiQuery('optimistic_l2_dispute_games_count', {
+    queryOptions: {
+      placeholderData: 50617,
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        { data.items.map(((item, index) => (
+          <OptimisticL2DisputeGamesListItem
+            key={ item.index + (isPlaceholderData ? String(index) : '') }
+            item={ item }
+            isLoading={ isPlaceholderData }
+          />
+        ))) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <OptimisticL2DisputeGamesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (countersQuery.isError || isError || !data?.items.length) {
+      return null;
+    }
+
+    return (
+      <Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap">
+        Dispute game index
+        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].index } </Text>to
+        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].index } </Text>
+        (total of { countersQuery.data?.toLocaleString() } games)
+      </Skeleton>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle title="Dispute games" withTextAd/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no dispute games."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default OptimisticL2DisputeGames;
diff --git a/ui/pages/OptimisticL2OutputRoots.pw.tsx b/ui/pages/OptimisticL2OutputRoots.pw.tsx
index 8c19f64377..0ee7c23158 100644
--- a/ui/pages/OptimisticL2OutputRoots.pw.tsx
+++ b/ui/pages/OptimisticL2OutputRoots.pw.tsx
@@ -1,48 +1,20 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import { outputRootsData } from 'mocks/l2outputRoots/outputRoots';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { outputRootsData } from 'mocks/optimism/outputRoots';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import OptimisticL2OutputRoots from './OptimisticL2OutputRoots';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
-const OUTPUT_ROOTS_API_URL = buildApiUrl('l2_output_roots');
-const OUTPUT_ROOTS_COUNT_API_URL = buildApiUrl('l2_output_roots_count');
-
-test('base view +@mobile', async({ mount, page }) => {
+test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
   // test on mobile is flaky
   // my assumption is there is not enough time to calculate hashes truncation so component is unstable
   // so I raised the test timeout to check if it helps
   test.slow();
-
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(OUTPUT_ROOTS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(outputRootsData),
-  }));
-
-  await page.route(OUTPUT_ROOTS_COUNT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: '9927',
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <OptimisticL2OutputRoots/>
-    </TestApp>,
-  );
-
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  await mockTextAd();
+  await mockApiResponse('optimistic_l2_output_roots', outputRootsData);
+  await mockApiResponse('optimistic_l2_output_roots_count', 9927);
+  const component = await render(<OptimisticL2OutputRoots/>);
   await expect(component).toHaveScreenshot({ timeout: 10_000 });
 });
diff --git a/ui/pages/OptimisticL2OutputRoots.tsx b/ui/pages/OptimisticL2OutputRoots.tsx
index dac63f79cf..b68ee7f7d2 100644
--- a/ui/pages/OptimisticL2OutputRoots.tsx
+++ b/ui/pages/OptimisticL2OutputRoots.tsx
@@ -6,6 +6,7 @@ import { L2_OUTPUT_ROOTS_ITEM } from 'stubs/L2';
 import { generateListStub } from 'stubs/utils';
 import OptimisticL2OutputRootsListItem from 'ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem';
 import OptimisticL2OutputRootsTable from 'ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTable';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -13,9 +14,9 @@ import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
 
 const OptimisticL2OutputRoots = () => {
   const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
-    resourceName: 'l2_output_roots',
+    resourceName: 'optimistic_l2_output_roots',
     options: {
-      placeholderData: generateListStub<'l2_output_roots'>(
+      placeholderData: generateListStub<'optimistic_l2_output_roots'>(
         L2_OUTPUT_ROOTS_ITEM,
         50,
         {
@@ -28,7 +29,7 @@ const OptimisticL2OutputRoots = () => {
     },
   });
 
-  const countersQuery = useApiQuery('l2_output_roots_count', {
+  const countersQuery = useApiQuery('optimistic_l2_output_roots_count', {
     queryOptions: {
       placeholderData: 50617,
     },
@@ -46,7 +47,7 @@ const OptimisticL2OutputRoots = () => {
         ))) }
       </Show>
       <Hide below="lg" ssr={ false }>
-        <OptimisticL2OutputRootsTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <OptimisticL2OutputRootsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
       </Hide>
     </>
   ) : null;
diff --git a/ui/pages/OptimisticL2TxnBatch.tsx b/ui/pages/OptimisticL2TxnBatch.tsx
new file mode 100644
index 0000000000..2c6065896e
--- /dev/null
+++ b/ui/pages/OptimisticL2TxnBatch.tsx
@@ -0,0 +1,134 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { RoutedTab } from 'ui/shared/Tabs/types';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { useAppContext } from 'lib/contexts/app';
+import throwOnAbsentParamError from 'lib/errors/throwOnAbsentParamError';
+import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { BLOCK } from 'stubs/block';
+import { L2_TXN_BATCH } from 'stubs/L2';
+import { TX } from 'stubs/tx';
+import { generateListStub } from 'stubs/utils';
+import BlocksContent from 'ui/blocks/BlocksContent';
+import TextAd from 'ui/shared/ad/TextAd';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
+import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
+import OptimisticL2TxnBatchDetails from 'ui/txnBatches/optimisticL2/OptimisticL2TxnBatchDetails';
+import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
+
+const TAB_LIST_PROPS = {
+  marginBottom: 0,
+  py: 5,
+  marginTop: -5,
+};
+
+const TABS_HEIGHT = 80;
+
+const OptimisticL2TxnBatch = () => {
+  const router = useRouter();
+  const appProps = useAppContext();
+  const number = getQueryParamString(router.query.number);
+  const tab = getQueryParamString(router.query.tab);
+  const isMobile = useIsMobile();
+
+  const batchQuery = useApiQuery('optimistic_l2_txn_batch', {
+    pathParams: { number },
+    queryOptions: {
+      enabled: Boolean(number),
+      placeholderData: L2_TXN_BATCH,
+    },
+  });
+
+  const batchTxsQuery = useQueryWithPages({
+    resourceName: 'optimistic_l2_txn_batch_txs',
+    pathParams: { number },
+    options: {
+      enabled: Boolean(!batchQuery.isPlaceholderData && batchQuery.data?.internal_id && tab === 'txs'),
+      placeholderData: generateListStub<'optimistic_l2_txn_batch_txs'>(TX, 50, { next_page_params: {
+        block_number: 1338932,
+        index: 1,
+        items_count: 50,
+      } }),
+    },
+  });
+
+  const batchBlocksQuery = useQueryWithPages({
+    resourceName: 'optimistic_l2_txn_batch_blocks',
+    pathParams: { number },
+    options: {
+      enabled: Boolean(!batchQuery.isPlaceholderData && batchQuery.data?.internal_id && tab === 'blocks'),
+      placeholderData: generateListStub<'optimistic_l2_txn_batch_blocks'>(BLOCK, 50, { next_page_params: {
+        batch_number: 1338932,
+        items_count: 50,
+      } }),
+    },
+  });
+
+  throwOnAbsentParamError(number);
+  throwOnResourceLoadError(batchQuery);
+
+  let pagination;
+  if (tab === 'txs') {
+    pagination = batchTxsQuery.pagination;
+  }
+  if (tab === 'blocks') {
+    pagination = batchBlocksQuery.pagination;
+  }
+
+  const hasPagination = !isMobile && pagination?.isVisible;
+
+  const tabs: Array<RoutedTab> = React.useMemo(() => ([
+    { id: 'index', title: 'Details', component: <OptimisticL2TxnBatchDetails query={ batchQuery }/> },
+    {
+      id: 'txs',
+      title: 'Transactions',
+      component: <TxsWithFrontendSorting query={ batchTxsQuery } showSocketInfo={ false } top={ hasPagination ? TABS_HEIGHT : 0 }/>,
+    },
+    {
+      id: 'blocks',
+      title: 'Blocks',
+      component: <BlocksContent type="block" query={ batchBlocksQuery } enableSocket={ false } top={ hasPagination ? TABS_HEIGHT : 0 }/>,
+    },
+  ].filter(Boolean)), [ batchQuery, batchTxsQuery, batchBlocksQuery, hasPagination ]);
+
+  const backLink = React.useMemo(() => {
+    const hasGoBackLink = appProps.referrer && appProps.referrer.endsWith('/batches');
+
+    if (!hasGoBackLink) {
+      return;
+    }
+
+    return {
+      label: 'Back to tx batches list',
+      url: appProps.referrer,
+    };
+  }, [ appProps.referrer ]);
+
+  return (
+    <>
+      <TextAd mb={ 6 }/>
+      <PageTitle
+        title={ `Batch #${ number }` }
+        backLink={ backLink }
+      />
+      { batchQuery.isPlaceholderData ?
+        <TabsSkeleton tabs={ tabs }/> : (
+          <RoutedTabs
+            tabs={ tabs }
+            tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
+            rightSlot={ hasPagination && pagination ? <Pagination { ...(pagination) }/> : null }
+            stickyEnabled={ hasPagination }
+          />
+        ) }
+    </>
+  );
+};
+
+export default OptimisticL2TxnBatch;
diff --git a/ui/pages/OptimisticL2TxnBatches.pw.tsx b/ui/pages/OptimisticL2TxnBatches.pw.tsx
index fb6c40a307..ddf5075269 100644
--- a/ui/pages/OptimisticL2TxnBatches.pw.tsx
+++ b/ui/pages/OptimisticL2TxnBatches.pw.tsx
@@ -1,48 +1,20 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import { txnBatchesData } from 'mocks/l2txnBatches/txnBatches';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { txnBatchesData } from 'mocks/optimism/txnBatches';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import OptimisticL2TxnBatches from './OptimisticL2TxnBatches';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
-const TXN_BATCHES_API_URL = buildApiUrl('l2_txn_batches');
-const TXN_BATCHES_COUNT_API_URL = buildApiUrl('l2_txn_batches_count');
-
-test('base view +@mobile', async({ mount, page }) => {
+test('base view +@mobile', async({ render, mockTextAd, mockEnvs, mockApiResponse }) => {
   // test on mobile is flaky
   // my assumption is there is not enough time to calculate hashes truncation so component is unstable
   // so I raised the test timeout to check if it helps
   test.slow();
-
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(TXN_BATCHES_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(txnBatchesData),
-  }));
-
-  await page.route(TXN_BATCHES_COUNT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: '1235016',
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <OptimisticL2TxnBatches/>
-    </TestApp>,
-  );
-
+  await mockTextAd();
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  await mockApiResponse('optimistic_l2_txn_batches', txnBatchesData);
+  await mockApiResponse('optimistic_l2_txn_batches_count', 1235016);
+  const component = await render(<OptimisticL2TxnBatches/>);
   await expect(component).toHaveScreenshot({ timeout: 10_000 });
 });
diff --git a/ui/pages/OptimisticL2TxnBatches.tsx b/ui/pages/OptimisticL2TxnBatches.tsx
index 6d8decf462..fde77f6ad4 100644
--- a/ui/pages/OptimisticL2TxnBatches.tsx
+++ b/ui/pages/OptimisticL2TxnBatches.tsx
@@ -5,6 +5,7 @@ import useApiQuery from 'lib/api/useApiQuery';
 import { nbsp } from 'lib/html-entities';
 import { L2_TXN_BATCHES_ITEM } from 'stubs/L2';
 import { generateListStub } from 'stubs/utils';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -14,22 +15,22 @@ import OptimisticL2TxnBatchesTable from 'ui/txnBatches/optimisticL2/OptimisticL2
 
 const OptimisticL2TxnBatches = () => {
   const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
-    resourceName: 'l2_txn_batches',
+    resourceName: 'optimistic_l2_txn_batches',
     options: {
-      placeholderData: generateListStub<'l2_txn_batches'>(
+      placeholderData: generateListStub<'optimistic_l2_txn_batches'>(
         L2_TXN_BATCHES_ITEM,
         50,
         {
           next_page_params: {
             items_count: 50,
-            block_number: 9045200,
+            id: 9045200,
           },
         },
       ),
     },
   });
 
-  const countersQuery = useApiQuery('l2_txn_batches_count', {
+  const countersQuery = useApiQuery('optimistic_l2_txn_batches_count', {
     queryOptions: {
       placeholderData: 5231746,
     },
@@ -40,14 +41,14 @@ const OptimisticL2TxnBatches = () => {
       <Show below="lg" ssr={ false }>
         { data.items.map(((item, index) => (
           <OptimisticL2TxnBatchesListItem
-            key={ item.l2_block_number + (isPlaceholderData ? String(index) : '') }
+            key={ item.internal_id + (isPlaceholderData ? String(index) : '') }
             item={ item }
             isLoading={ isPlaceholderData }
           />
         ))) }
       </Show>
       <Hide below="lg" ssr={ false }>
-        <OptimisticL2TxnBatchesTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <OptimisticL2TxnBatchesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
       </Hide>
     </>
   ) : null;
@@ -60,8 +61,8 @@ const OptimisticL2TxnBatches = () => {
     return (
       <Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap">
         Tx batch (L2 block)
-        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].l2_block_number } </Text>to
-        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].l2_block_number } </Text>
+        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].internal_id } </Text>to
+        <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].internal_id } </Text>
         (total of { countersQuery.data?.toLocaleString() } batches)
       </Skeleton>
     );
diff --git a/ui/pages/OptimisticL2Withdrawals.pw.tsx b/ui/pages/OptimisticL2Withdrawals.pw.tsx
index 70742da848..e2bfe0a57d 100644
--- a/ui/pages/OptimisticL2Withdrawals.pw.tsx
+++ b/ui/pages/OptimisticL2Withdrawals.pw.tsx
@@ -1,48 +1,20 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import { data as withdrawalsData } from 'mocks/l2withdrawals/withdrawals';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { data as withdrawalsData } from 'mocks/optimism/withdrawals';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import OptimisticL2Withdrawals from './OptimisticL2Withdrawals';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
-const WITHDRAWALS_API_URL = buildApiUrl('l2_withdrawals');
-const WITHDRAWALS_COUNT_API_URL = buildApiUrl('l2_withdrawals_count');
-
-test('base view +@mobile', async({ mount, page }) => {
+test('base view +@mobile', async({ render, mockTextAd, mockEnvs, mockApiResponse }) => {
   // test on mobile is flaky
   // my assumption is there is not enough time to calculate hashes truncation so component is unstable
   // so I raised the test timeout to check if it helps
   test.slow();
-
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(WITHDRAWALS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(withdrawalsData),
-  }));
-
-  await page.route(WITHDRAWALS_COUNT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: '397',
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <OptimisticL2Withdrawals/>
-    </TestApp>,
-  );
-
+  await mockTextAd();
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  await mockApiResponse('optimistic_l2_withdrawals', withdrawalsData);
+  await mockApiResponse('optimistic_l2_withdrawals_count', 397);
+  const component = await render(<OptimisticL2Withdrawals/>);
   await expect(component).toHaveScreenshot({ timeout: 10_000 });
 });
diff --git a/ui/pages/OptimisticL2Withdrawals.tsx b/ui/pages/OptimisticL2Withdrawals.tsx
index 6e941ff3de..27d2ed56cf 100644
--- a/ui/pages/OptimisticL2Withdrawals.tsx
+++ b/ui/pages/OptimisticL2Withdrawals.tsx
@@ -5,6 +5,7 @@ import useApiQuery from 'lib/api/useApiQuery';
 import { rightLineArrow, nbsp } from 'lib/html-entities';
 import { L2_WITHDRAWAL_ITEM } from 'stubs/L2';
 import { generateListStub } from 'stubs/utils';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -14,9 +15,9 @@ import OptimisticL2WithdrawalsTable from 'ui/withdrawals/optimisticL2/Optimistic
 
 const OptimisticL2Withdrawals = () => {
   const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
-    resourceName: 'l2_withdrawals',
+    resourceName: 'optimistic_l2_withdrawals',
     options: {
-      placeholderData: generateListStub<'l2_withdrawals'>(
+      placeholderData: generateListStub<'optimistic_l2_withdrawals'>(
         L2_WITHDRAWAL_ITEM,
         50,
         {
@@ -29,7 +30,7 @@ const OptimisticL2Withdrawals = () => {
     },
   });
 
-  const countersQuery = useApiQuery('l2_withdrawals_count', {
+  const countersQuery = useApiQuery('optimistic_l2_withdrawals_count', {
     queryOptions: {
       placeholderData: 23700,
     },
@@ -45,7 +46,7 @@ const OptimisticL2Withdrawals = () => {
         />
       ))) }</Show>
       <Hide below="lg" ssr={ false }>
-        <OptimisticL2WithdrawalsTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <OptimisticL2WithdrawalsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
       </Hide>
     </>
   ) : null;
diff --git a/ui/pages/PublicTags.tsx b/ui/pages/PublicTags.tsx
deleted file mode 100644
index fa4ea2609d..0000000000
--- a/ui/pages/PublicTags.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { useRouter } from 'next/router';
-import React, { useCallback, useState } from 'react';
-import { animateScroll } from 'react-scroll';
-
-import type { PublicTag } from 'types/api/account';
-
-import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
-import useToast from 'lib/hooks/useToast';
-import getQueryParamString from 'lib/router/getQueryParamString';
-import PublicTagsData from 'ui/publicTags/PublicTagsData';
-import PublicTagsForm from 'ui/publicTags/PublicTagsForm/PublicTagsForm';
-import PageTitle from 'ui/shared/Page/PageTitle';
-
-type TScreen = 'data' | 'form';
-
-type TToastAction = 'added' | 'removed';
-
-const toastDescriptions = {
-  added: 'Your request sent to moderator. Waiting for...',
-  removed: 'Tags have been removed.',
-} as Record<TToastAction, string>;
-
-const PublicTagsComponent: React.FC = () => {
-  const router = useRouter();
-  const addressHash = getQueryParamString(router.query.address);
-
-  const [ screen, setScreen ] = useState<TScreen>(addressHash ? 'form' : 'data');
-  const [ formData, setFormData ] = useState<Partial<PublicTag> | undefined>(addressHash ? { addresses: [ addressHash ] } : undefined);
-
-  const toast = useToast();
-  useRedirectForInvalidAuthToken();
-
-  React.useEffect(() => {
-    addressHash && router.replace({ pathname: '/account/public-tags-request' });
-  // componentDidMount
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ ]);
-
-  const showToast = useCallback((action: TToastAction) => {
-    toast({
-      position: 'top-right',
-      title: 'Success',
-      description: toastDescriptions[action],
-      colorScheme: 'green',
-      status: 'success',
-      variant: 'subtle',
-      isClosable: true,
-      icon: null,
-    });
-  }, [ toast ]);
-
-  const changeToFormScreen = useCallback((data?: PublicTag) => {
-    setFormData(data);
-    setScreen('form');
-    animateScroll.scrollToTop({
-      duration: 500,
-      delay: 100,
-    });
-  }, []);
-
-  const changeToDataScreen = useCallback((success?: boolean) => {
-    if (success) {
-      showToast('added');
-    }
-    setScreen('data');
-    animateScroll.scrollToTop({
-      duration: 500,
-      delay: 100,
-    });
-  }, [ showToast ]);
-
-  const onTagDelete = useCallback(() => showToast('removed'), [ showToast ]);
-  const onGoBack = useCallback(() => setScreen('data'), [ ]);
-
-  let content;
-  let header;
-
-  if (screen === 'data') {
-    content = <PublicTagsData changeToFormScreen={ changeToFormScreen } onTagDelete={ onTagDelete }/>;
-    header = 'Public tags';
-  } else {
-    content = <PublicTagsForm changeToDataScreen={ changeToDataScreen } data={ formData }/>;
-    header = formData ? 'Request to edit a public tag/label' : 'Request a public tag/label';
-  }
-
-  const backLink = {
-    label: 'Public tags',
-    onClick: onGoBack,
-  };
-
-  return (
-    <>
-      <PageTitle
-        title={ header }
-        backLink={ screen === 'form' ? backLink : undefined }
-        display={{ base: 'block', lg: 'inline-flex' }}
-      />
-      { content }
-    </>
-  );
-};
-
-export default PublicTagsComponent;
diff --git a/ui/pages/PublicTagsSubmit.tsx b/ui/pages/PublicTagsSubmit.tsx
new file mode 100644
index 0000000000..568a0d79db
--- /dev/null
+++ b/ui/pages/PublicTagsSubmit.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import type { FormSubmitResult } from 'ui/publicTags/submit/types';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
+import PublicTagsSubmitForm from 'ui/publicTags/submit/PublicTagsSubmitForm';
+import PublicTagsSubmitResult from 'ui/publicTags/submit/PublicTagsSubmitResult';
+import ContentLoader from 'ui/shared/ContentLoader';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import PageTitle from 'ui/shared/Page/PageTitle';
+
+type Screen = 'form' | 'result' | 'initializing' | 'error';
+
+const PublicTagsSubmit = () => {
+
+  const [ screen, setScreen ] = React.useState<Screen>('initializing');
+  const [ submitResult, setSubmitResult ] = React.useState<FormSubmitResult>();
+
+  const userQuery = useFetchProfileInfo();
+  const configQuery = useApiQuery('address_metadata_tag_types', { queryOptions: { enabled: !userQuery.isLoading } });
+
+  React.useEffect(() => {
+    if (!configQuery.isPending) {
+      setScreen(configQuery.isError ? 'error' : 'form');
+    }
+  }, [ configQuery.isError, configQuery.isPending ]);
+
+  const handleFormSubmitResult = React.useCallback((result: FormSubmitResult) => {
+    setSubmitResult(result);
+    setScreen('result');
+  }, []);
+
+  const content = (() => {
+    switch (screen) {
+      case 'initializing':
+        return <ContentLoader/>;
+      case 'error':
+        return <DataFetchAlert/>;
+      case 'form':
+        return <PublicTagsSubmitForm config={ configQuery.data } onSubmitResult={ handleFormSubmitResult } userInfo={ userQuery.data }/>;
+      case 'result':
+        return <PublicTagsSubmitResult data={ submitResult }/>;
+      default:
+        return null;
+    }
+  })();
+
+  return (
+    <>
+      <PageTitle title="Request a public tag/label"/>
+      { content }
+    </>
+  );
+};
+
+export default PublicTagsSubmit;
diff --git a/ui/pages/SearchResults.pw.tsx b/ui/pages/SearchResults.pw.tsx
index f773fd56bb..e469d9ee56 100644
--- a/ui/pages/SearchResults.pw.tsx
+++ b/ui/pages/SearchResults.pw.tsx
@@ -1,268 +1,213 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import { buildExternalAssetFilePath } from 'configs/app/utils';
 import { apps as appsMock } from 'mocks/apps/apps';
 import * as searchMock from 'mocks/search/index';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import * as app from 'playwright/utils/app';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import SearchResults from './SearchResults';
 
 test.describe('search by name ', () => {
-  const extendedTest = test.extend({
-    context: contextWithEnvs([
-      { name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: '' },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ]) as any,
-  });
-
-  extendedTest('+@mobile +@dark-mode', async({ mount, page }) => {
+  test('+@mobile +@dark-mode', async({ render, mockApiResponse, mockAssetResponse, mockEnvs }) => {
     const hooksConfig = {
       router: {
         query: { q: 'o' },
       },
     };
-    await page.route(buildApiUrl('search') + '?q=o', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({
-        items: [
-          searchMock.token1,
-          searchMock.token2,
-          searchMock.contract1,
-          searchMock.address2,
-          searchMock.label1,
-        ],
-      }),
-    }));
-    await page.route(searchMock.token1.icon_url as string, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-
-    const component = await mount(
-      <TestApp>
-        <SearchResults/>
-      </TestApp>,
-      { hooksConfig },
-    );
+    const data = {
+      items: [
+        searchMock.token1,
+        searchMock.token2,
+        searchMock.contract1,
+        searchMock.address2,
+        searchMock.label1,
+      ],
+      next_page_params: null,
+    };
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_MARKETPLACE_ENABLED', 'false' ],
+    ]);
+    await mockApiResponse('search', data, { queryParams: { q: 'o' } });
+    await mockAssetResponse(searchMock.token1.icon_url as string, './playwright/mocks/image_s.jpg');
+    const component = await render(<SearchResults/>, { hooksConfig });
 
     await expect(component.locator('main')).toHaveScreenshot();
   });
 });
 
-test('search by address hash +@mobile', async({ mount, page }) => {
+test('search by address hash +@mobile', async({ render, mockApiResponse }) => {
   const hooksConfig = {
     router: {
       query: { q: searchMock.address1.address },
     },
   };
-  await page.route(buildApiUrl('search') + `?q=${ searchMock.address1.address }`, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({
-      items: [
-        searchMock.address1,
-      ],
-    }),
-  }));
+  const data = {
+    items: [ searchMock.address1, searchMock.contract2 ],
+    next_page_params: null,
+  };
+  await mockApiResponse('search', data, { queryParams: { q: searchMock.address1.address } });
 
-  const component = await mount(
-    <TestApp>
-      <SearchResults/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const component = await render(<SearchResults/>, { hooksConfig });
 
   await expect(component.locator('main')).toHaveScreenshot();
 });
 
-test('search by block number +@mobile', async({ mount, page }) => {
+test('search by block number +@mobile', async({ render, mockApiResponse }) => {
   const hooksConfig = {
     router: {
       query: { q: String(searchMock.block1.block_number) },
     },
   };
-  await page.route(buildApiUrl('search') + `?q=${ searchMock.block1.block_number }`, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({
-      items: [
-        searchMock.block1,
-        searchMock.block2,
-        searchMock.block3,
-      ],
-    }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <SearchResults/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const data = {
+    items: [ searchMock.block1, searchMock.block2, searchMock.block3 ],
+    next_page_params: null,
+  };
+  await mockApiResponse('search', data, { queryParams: { q: searchMock.block1.block_number } });
+  const component = await render(<SearchResults/>, { hooksConfig });
 
   await expect(component.locator('main')).toHaveScreenshot();
 });
 
-test('search by block hash +@mobile', async({ mount, page }) => {
+test('search by block hash +@mobile', async({ render, mockApiResponse }) => {
   const hooksConfig = {
     router: {
       query: { q: searchMock.block1.block_hash },
     },
   };
-  await page.route(buildApiUrl('search') + `?q=${ searchMock.block1.block_hash }`, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({
-      items: [
-        searchMock.block1,
-      ],
-    }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <SearchResults/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const data = {
+    items: [ searchMock.block1 ],
+    next_page_params: null,
+  };
+  await mockApiResponse('search', data, { queryParams: { q: searchMock.block1.block_hash } });
+  const component = await render(<SearchResults/>, { hooksConfig });
 
   await expect(component.locator('main')).toHaveScreenshot();
 });
 
-test('search by tx hash +@mobile', async({ mount, page }) => {
+test('search by tx hash +@mobile', async({ render, mockApiResponse }) => {
   const hooksConfig = {
     router: {
       query: { q: searchMock.tx1.tx_hash },
     },
   };
-  await page.route(buildApiUrl('search') + `?q=${ searchMock.tx1.tx_hash }`, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({
-      items: [
-        searchMock.tx1,
-      ],
-    }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <SearchResults/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const data = {
+    items: [ searchMock.tx1 ],
+    next_page_params: null,
+  };
+  await mockApiResponse('search', data, { queryParams: { q: searchMock.tx1.tx_hash } });
+  const component = await render(<SearchResults/>, { hooksConfig });
 
   await expect(component.locator('main')).toHaveScreenshot();
 });
 
-test('search by blob hash +@mobile', async({ mount, page }) => {
+test('search by blob hash +@mobile', async({ render, mockApiResponse, mockEnvs }) => {
   const hooksConfig = {
     router: {
       query: { q: searchMock.blob1.blob_hash },
     },
   };
-  await page.route(buildApiUrl('search') + `?q=${ searchMock.blob1.blob_hash }`, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({
-      items: [
-        searchMock.blob1,
-      ],
-    }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <SearchResults/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const data = {
+    items: [ searchMock.blob1 ],
+    next_page_params: null,
+  };
+  await mockEnvs(ENVS_MAP.dataAvailability);
+  await mockApiResponse('search', data, { queryParams: { q: searchMock.blob1.blob_hash } });
+  const component = await render(<SearchResults/>, { hooksConfig });
 
   await expect(component.locator('main')).toHaveScreenshot();
 });
 
-const testWithUserOps = test.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.userOps) as any,
+test('search by domain name +@mobile', async({ render, mockApiResponse, mockEnvs }) => {
+  const hooksConfig = {
+    router: {
+      query: { q: searchMock.domain1.ens_info.name },
+    },
+  };
+  const data = {
+    items: [ searchMock.domain1 ],
+    next_page_params: null,
+  };
+  await mockEnvs(ENVS_MAP.nameService);
+  await mockApiResponse('search', data, { queryParams: { q: searchMock.domain1.ens_info.name } });
+  const component = await render(<SearchResults/>, { hooksConfig });
+  await expect(component.locator('main')).toHaveScreenshot();
 });
 
-testWithUserOps('search by user op hash +@mobile', async({ mount, page }) => {
+test('search by user op hash +@mobile', async({ render, mockApiResponse, mockEnvs }) => {
   const hooksConfig = {
     router: {
       query: { q: searchMock.userOp1.user_operation_hash },
     },
   };
-  await page.route(buildApiUrl('search') + `?q=${ searchMock.userOp1.user_operation_hash }`, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({
-      items: [
-        searchMock.userOp1,
-      ],
-    }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <SearchResults/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const data = {
+    items: [ searchMock.userOp1 ],
+    next_page_params: null,
+  };
+  await mockEnvs(ENVS_MAP.userOps);
+  await mockApiResponse('search', data, { queryParams: { q: searchMock.userOp1.user_operation_hash } });
+  const component = await render(<SearchResults/>, { hooksConfig });
 
   await expect(component.locator('main')).toHaveScreenshot();
 });
 
 test.describe('with apps', () => {
-  const MARKETPLACE_CONFIG_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', 'https://marketplace-config.json') || '';
-  const extendedTest = test.extend({
-    context: contextWithEnvs([
-      { name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: MARKETPLACE_CONFIG_URL },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ]) as any,
-  });
-
-  extendedTest('default view +@mobile', async({ mount, page }) => {
+  test('default view +@mobile', async({ render, mockApiResponse, mockConfigResponse, mockAssetResponse, mockEnvs }) => {
+    const MARKETPLACE_CONFIG_URL = 'https://localhost:4000/marketplace-config.json';
     const hooksConfig = {
       router: {
         query: { q: 'o' },
       },
     };
-    const API_URL = buildApiUrl('search') + '?q=o';
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({
-        items: [
-          searchMock.token1,
-        ],
-        next_page_params: { foo: 'bar' },
-      }),
-    }));
+    const data = {
+      items: [ searchMock.token1 ],
+      next_page_params: {
+        address_hash: null,
+        block_hash: null,
+        holder_count: null,
+        inserted_at: null,
+        item_type: 'token' as const,
+        items_count: 1,
+        name: 'foo',
+        q: 'o',
+        tx_hash: null,
+      },
+    };
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_MARKETPLACE_ENABLED', 'true' ],
+      [ 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL ],
+    ]);
+    await mockApiResponse('search', data, { queryParams: { q: 'o' } });
+    await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL, JSON.stringify(appsMock));
+    await mockAssetResponse(appsMock[0].logo, './playwright/mocks/image_s.jpg');
+    await mockAssetResponse(appsMock[1].logo, './playwright/mocks/image_s.jpg');
+    const component = await render(<SearchResults/>, { hooksConfig });
+
+    await expect(component.locator('main')).toHaveScreenshot();
+  });
+});
+
+test.describe('block countdown', () => {
+  const blockHeight = '1234567890';
+  const hooksConfig = {
+    router: {
+      query: { q: blockHeight },
+    },
+  };
 
-    await page.route(MARKETPLACE_CONFIG_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(appsMock),
-    }));
+  test('no results', async({ render, mockApiResponse }) => {
+    await mockApiResponse('search', { items: [], next_page_params: null }, { queryParams: { q: blockHeight } });
+    const component = await render(<SearchResults/>, { hooksConfig });
 
-    await page.route(appsMock[0].logo, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-    await page.route(appsMock[1].logo as string, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
+    await expect(component.locator('main')).toHaveScreenshot();
+  });
 
-    const component = await mount(
-      <TestApp>
-        <SearchResults/>
-      </TestApp>,
-      { hooksConfig },
+  test('with results +@mobile', async({ render, mockApiResponse }) => {
+    await mockApiResponse(
+      'search',
+      { items: [ { ...searchMock.token1, name: '1234567890123456789' } ], next_page_params: null },
+      { queryParams: { q: blockHeight } },
     );
+    const component = await render(<SearchResults/>, { hooksConfig });
 
     await expect(component.locator('main')).toHaveScreenshot();
   });
diff --git a/ui/pages/SearchResults.tsx b/ui/pages/SearchResults.tsx
index 608956a9df..5c7d70bca8 100644
--- a/ui/pages/SearchResults.tsx
+++ b/ui/pages/SearchResults.tsx
@@ -3,29 +3,37 @@ import { useRouter } from 'next/router';
 import type { FormEvent } from 'react';
 import React from 'react';
 
+import type { SearchResultItem } from 'types/client/search';
+
 import config from 'configs/app';
+import * as regexp from 'lib/regexp';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import removeQueryParam from 'lib/router/removeQueryParam';
 import useMarketplaceApps from 'ui/marketplace/useMarketplaceApps';
 import SearchResultListItem from 'ui/searchResults/SearchResultListItem';
 import SearchResultsInput from 'ui/searchResults/SearchResultsInput';
 import SearchResultTableItem from 'ui/searchResults/SearchResultTableItem';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
 import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import * as Layout from 'ui/shared/layout/components';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
+import type { SearchResultAppItem } from 'ui/shared/search/utils';
 import Thead from 'ui/shared/TheadSticky';
 import HeaderAlert from 'ui/snippets/header/HeaderAlert';
 import HeaderDesktop from 'ui/snippets/header/HeaderDesktop';
 import HeaderMobile from 'ui/snippets/header/HeaderMobile';
+import SearchBarSuggestBlockCountdown from 'ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlockCountdown';
 import useSearchQuery from 'ui/snippets/searchBar/useSearchQuery';
 
 const SearchResultsPageContent = () => {
   const router = useRouter();
-  const { query, redirectCheckQuery, searchTerm, debouncedSearchTerm, handleSearchTermChange } = useSearchQuery();
+  const withRedirectCheck = getQueryParamString(router.query.redirect) === 'true';
+  const { query, redirectCheckQuery, searchTerm, debouncedSearchTerm, handleSearchTermChange } = useSearchQuery(withRedirectCheck);
   const { data, isError, isPlaceholderData, pagination } = query;
-  const [ showContent, setShowContent ] = React.useState(false);
+  const [ showContent, setShowContent ] = React.useState(!withRedirectCheck);
 
   const marketplaceApps = useMarketplaceApps(debouncedSearchTerm);
 
@@ -61,59 +69,87 @@ const SearchResultsPageContent = () => {
           break;
         }
         case 'blob': {
-          router.replace({ pathname: '/blobs/[hash]', query: { hash: redirectCheckQuery.data.parameter } });
-          return;
+          if (config.features.dataAvailability.isEnabled) {
+            router.replace({ pathname: '/blobs/[hash]', query: { hash: redirectCheckQuery.data.parameter } });
+            return;
+          }
+          break;
         }
       }
     }
 
-    !redirectCheckQuery.isPending && setShowContent(true);
+    if (!redirectCheckQuery.isPending) {
+      setShowContent(true);
+      removeQueryParam(router, 'redirect');
+    }
   }, [ redirectCheckQuery, router, debouncedSearchTerm, showContent ]);
 
   const handleSubmit = React.useCallback((event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
   }, [ ]);
 
-  const displayedItems = (data?.items || []).filter((item) => {
-    if (!config.features.userOps.isEnabled && item.type === 'user_operation') {
-      return false;
-    }
-    return true;
-  });
+  const isLoading = marketplaceApps.isPlaceholderData || isPlaceholderData;
+
+  const displayedItems: Array<SearchResultItem | SearchResultAppItem> = React.useMemo(() => {
+    const apiData = (data?.items || []).filter((item) => {
+      if (!config.features.userOps.isEnabled && item.type === 'user_operation') {
+        return false;
+      }
+      if (!config.features.dataAvailability.isEnabled && item.type === 'blob') {
+        return false;
+      }
+      if (!config.features.nameService.isEnabled && item.type === 'ens_domain') {
+        return false;
+      }
+      return true;
+    });
+
+    const futureBlockItem = !isPlaceholderData &&
+      pagination.page === 1 &&
+      !data?.next_page_params &&
+      apiData.length > 0 &&
+      !apiData.some(({ type }) => type === 'block') &&
+      regexp.BLOCK_HEIGHT.test(debouncedSearchTerm) ?
+      {
+        type: 'block' as const,
+        block_type: 'block' as const,
+        block_number: debouncedSearchTerm,
+        block_hash: '',
+        timestamp: undefined,
+      } : undefined;
+
+    return [
+      ...(pagination.page === 1 && !isLoading ? marketplaceApps.displayedApps.map((item) => ({ type: 'app' as const, app: item })) : []),
+      futureBlockItem,
+      ...apiData,
+    ].filter(Boolean);
+
+  }, [ data?.items, data?.next_page_params, isPlaceholderData, pagination.page, debouncedSearchTerm, marketplaceApps.displayedApps, isLoading ]);
 
   const content = (() => {
     if (isError) {
       return <DataFetchAlert/>;
     }
 
-    const hasData = displayedItems.length || (pagination.page === 1 && marketplaceApps.displayedApps.length);
-
-    if (!hasData) {
+    if (!displayedItems.length) {
       return null;
     }
 
     return (
       <>
         <Show below="lg" ssr={ false }>
-          { pagination.page === 1 && marketplaceApps.displayedApps.map((item, index) => (
-            <SearchResultListItem
-              key={ 'actual_' + index }
-              data={{ type: 'app', app: item }}
-              searchTerm={ debouncedSearchTerm }
-            />
-          )) }
           { displayedItems.map((item, index) => (
             <SearchResultListItem
-              key={ (isPlaceholderData ? 'placeholder_' : 'actual_') + index }
+              key={ (isLoading ? 'placeholder_' : 'actual_') + index }
               data={ item }
               searchTerm={ debouncedSearchTerm }
-              isLoading={ isPlaceholderData }
+              isLoading={ isLoading }
             />
           )) }
         </Show>
         <Hide below="lg" ssr={ false }>
           <Table variant="simple" size="md" fontWeight={ 500 }>
-            <Thead top={ pagination.isVisible ? 80 : 0 }>
+            <Thead top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }>
               <Tr>
                 <Th width="30%">Search result</Th>
                 <Th width="35%"/>
@@ -122,19 +158,12 @@ const SearchResultsPageContent = () => {
               </Tr>
             </Thead>
             <Tbody>
-              { pagination.page === 1 && marketplaceApps.displayedApps.map((item, index) => (
-                <SearchResultTableItem
-                  key={ 'actual_' + index }
-                  data={{ type: 'app', app: item }}
-                  searchTerm={ debouncedSearchTerm }
-                />
-              )) }
               { displayedItems.map((item, index) => (
                 <SearchResultTableItem
-                  key={ (isPlaceholderData ? 'placeholder_' : 'actual_') + index }
+                  key={ (isLoading ? 'placeholder_' : 'actual_') + index }
                   data={ item }
                   searchTerm={ debouncedSearchTerm }
-                  isLoading={ isPlaceholderData }
+                  isLoading={ isLoading }
                 />
               )) }
             </Tbody>
@@ -149,20 +178,24 @@ const SearchResultsPageContent = () => {
       return null;
     }
 
-    const resultsCount = pagination.page === 1 && !data?.next_page_params ? (displayedItems.length || 0) + marketplaceApps.displayedApps.length : '50+';
+    const resultsCount = pagination.page === 1 && !data?.next_page_params ? displayedItems.length : '50+';
 
-    const text = isPlaceholderData && pagination.page === 1 ? (
+    const text = isLoading && pagination.page === 1 ? (
       <Skeleton h={ 6 } w="280px" borderRadius="full" mb={ pagination.isVisible ? 0 : 6 }/>
     ) : (
       (
-        <Box mb={ pagination.isVisible ? 0 : 6 } lineHeight="32px">
-          <span>Found </span>
-          <chakra.span fontWeight={ 700 }>
-            { resultsCount }
-          </chakra.span>
-          <span> matching result{ (((displayedItems.length || 0) + marketplaceApps.displayedApps.length) > 1) || pagination.page > 1 ? 's' : '' } for </span>
-          “<chakra.span fontWeight={ 700 }>{ debouncedSearchTerm }</chakra.span>”
-        </Box>
+        <>
+          <Box mb={ pagination.isVisible ? 0 : 6 } lineHeight="32px">
+            <span>Found </span>
+            <chakra.span fontWeight={ 700 }>
+              { resultsCount }
+            </chakra.span>
+            <span> matching result{ (((displayedItems.length || 0) + marketplaceApps.displayedApps.length) > 1) || pagination.page > 1 ? 's' : '' } for </span>
+            “<chakra.span fontWeight={ 700 }>{ debouncedSearchTerm }</chakra.span>”
+          </Box>
+          { resultsCount === 0 && regexp.BLOCK_HEIGHT.test(debouncedSearchTerm) &&
+            <SearchBarSuggestBlockCountdown blockHeight={ debouncedSearchTerm } mt={ -4 }/> }
+        </>
       )
     );
 
@@ -208,7 +241,7 @@ const SearchResultsPageContent = () => {
           <HeaderAlert/>
           <HeaderDesktop renderSearchBar={ renderSearchBar }/>
           <AppErrorBoundary>
-            <Layout.Content>
+            <Layout.Content flexGrow={ 0 }>
               { pageContent }
             </Layout.Content>
           </AppErrorBoundary>
diff --git a/ui/pages/ShibariumDeposits.pw.tsx b/ui/pages/ShibariumDeposits.pw.tsx
index 75fa82ba5e..a52dfb557e 100644
--- a/ui/pages/ShibariumDeposits.pw.tsx
+++ b/ui/pages/ShibariumDeposits.pw.tsx
@@ -1,43 +1,18 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { data as depositsData } from 'mocks/shibarium/deposits';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import ShibariumDeposits from './ShibariumDeposits';
 
-const DEPOSITS_API_URL = buildApiUrl('shibarium_deposits');
-const DEPOSITS_COUNT_API_URL = buildApiUrl('shibarium_deposits_count');
+test('base view +@mobile', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => {
+  await mockTextAd();
+  await mockEnvs(ENVS_MAP.shibariumRollup);
+  await mockApiResponse('shibarium_deposits', depositsData);
+  await mockApiResponse('shibarium_deposits_count', 3971111);
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.shibariumRollup) as any,
-});
-
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(DEPOSITS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(depositsData),
-  }));
-
-  await page.route(DEPOSITS_COUNT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: '3971111',
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <ShibariumDeposits/>
-    </TestApp>,
-  );
+  const component = await render(<ShibariumDeposits/>);
 
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/pages/ShibariumDeposits.tsx b/ui/pages/ShibariumDeposits.tsx
index d7d981a6e0..81a95861f2 100644
--- a/ui/pages/ShibariumDeposits.tsx
+++ b/ui/pages/ShibariumDeposits.tsx
@@ -7,6 +7,7 @@ import { SHIBARIUM_DEPOSIT_ITEM } from 'stubs/shibarium';
 import { generateListStub } from 'stubs/utils';
 import DepositsListItem from 'ui/deposits/shibarium/DepositsListItem';
 import DepositsTable from 'ui/deposits/shibarium/DepositsTable';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -47,7 +48,7 @@ const L2Deposits = () => {
         ))) }
       </Show>
       <Hide below="lg" ssr={ false }>
-        <DepositsTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <DepositsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
       </Hide>
     </>
   ) : null;
diff --git a/ui/pages/ShibariumWithdrawals.pw.tsx b/ui/pages/ShibariumWithdrawals.pw.tsx
index 98d3ff3836..9310892bd8 100644
--- a/ui/pages/ShibariumWithdrawals.pw.tsx
+++ b/ui/pages/ShibariumWithdrawals.pw.tsx
@@ -1,47 +1,23 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { data as withdrawalsData } from 'mocks/shibarium/withdrawals';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
-import ShibariuWithdrawals from './ShibariumWithdrawals';
+import ShibariumWithdrawals from './ShibariumWithdrawals';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.shibariumRollup) as any,
-});
-
-const WITHDRAWALS_API_URL = buildApiUrl('shibarium_withdrawals');
-const WITHDRAWALS_COUNT_API_URL = buildApiUrl('shibarium_withdrawals_count');
-
-test('base view +@mobile', async({ mount, page }) => {
+test('base view +@mobile', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => {
   // test on mobile is flaky
   // my assumption is there is not enough time to calculate hashes truncation so component is unstable
   // so I raised the test timeout to check if it helps
   test.slow();
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(WITHDRAWALS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(withdrawalsData),
-  }));
 
-  await page.route(WITHDRAWALS_COUNT_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: '397',
-  }));
+  await mockTextAd();
+  await mockEnvs(ENVS_MAP.shibariumRollup);
+  await mockApiResponse('shibarium_withdrawals', withdrawalsData);
+  await mockApiResponse('shibarium_withdrawals_count', 397);
 
-  const component = await mount(
-    <TestApp>
-      <ShibariuWithdrawals/>
-    </TestApp>,
-  );
+  const component = await render(<ShibariumWithdrawals/>);
 
   await expect(component).toHaveScreenshot({ timeout: 10_000 });
 });
diff --git a/ui/pages/ShibariumWithdrawals.tsx b/ui/pages/ShibariumWithdrawals.tsx
index 0891e72962..0e946965b1 100644
--- a/ui/pages/ShibariumWithdrawals.tsx
+++ b/ui/pages/ShibariumWithdrawals.tsx
@@ -5,6 +5,7 @@ import useApiQuery from 'lib/api/useApiQuery';
 import { rightLineArrow, nbsp } from 'lib/html-entities';
 import { SHIBARIUM_WITHDRAWAL_ITEM } from 'stubs/shibarium';
 import { generateListStub } from 'stubs/utils';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -45,7 +46,7 @@ const L2Withdrawals = () => {
         />
       ))) }</Show>
       <Hide below="lg" ssr={ false }>
-        <WithdrawalsTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <WithdrawalsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
       </Hide>
     </>
   ) : null;
diff --git a/ui/pages/Sol2Uml.tsx b/ui/pages/Sol2Uml.tsx
index 9bf3ebcc61..bf8f4fd90c 100644
--- a/ui/pages/Sol2Uml.tsx
+++ b/ui/pages/Sol2Uml.tsx
@@ -35,7 +35,7 @@ const Sol2Uml = () => {
       <Flex mb={ 10 } flexWrap="wrap" columnGap={ 3 }>
         <span>For contract</span>
         <AddressEntity
-          address={{ hash: addressHash, is_contract: true, implementation_name: null }}
+          address={{ hash: addressHash, is_contract: true }}
         />
       </Flex>
       <Sol2UmlDiagram addressHash={ addressHash }/>
diff --git a/ui/pages/Sprite.tsx b/ui/pages/Sprite.tsx
new file mode 100644
index 0000000000..ed0156d86d
--- /dev/null
+++ b/ui/pages/Sprite.tsx
@@ -0,0 +1,120 @@
+import { Flex, Box, Tooltip, useClipboard, useColorModeValue } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import React from 'react';
+
+import type { StaticRoute } from 'nextjs-routes';
+import { route } from 'nextjs-routes';
+
+import useFetch from 'lib/hooks/useFetch';
+import ContentLoader from 'ui/shared/ContentLoader';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import EmptySearchResult from 'ui/shared/EmptySearchResult';
+import FilterInput from 'ui/shared/filters/FilterInput';
+import type { IconName } from 'ui/shared/IconSvg';
+import IconSvg from 'ui/shared/IconSvg';
+import PageTitle from 'ui/shared/Page/PageTitle';
+
+const formatFileSize = (fileSizeInBytes: number) => `${ (fileSizeInBytes / 1_024).toFixed(2) } Kb`;
+
+interface IconInfo {
+  name: string;
+  fileSize: number;
+}
+
+const Item = ({ name, fileSize, bgColor }: IconInfo & { bgColor: string }) => {
+  const { hasCopied, onCopy } = useClipboard(name, 1000);
+  const [ copied, setCopied ] = React.useState(false);
+
+  React.useEffect(() => {
+    if (hasCopied) {
+      setCopied(true);
+    } else {
+      setCopied(false);
+    }
+  }, [ hasCopied ]);
+
+  return (
+    <Flex
+      flexDir="column"
+      alignItems="center"
+      whiteSpace="pre-wrap"
+      wordBreak="break-word"
+      maxW="100px"
+      textAlign="center"
+      onClick={ onCopy }
+      cursor="pointer"
+    >
+      <IconSvg name={ name as IconName } boxSize="100px" bgColor={ bgColor } borderRadius="base"/>
+      <Tooltip label={ copied ? 'Copied' : 'Copy to clipboard' } isOpen={ copied }>
+        <Box fontWeight={ 500 } mt={ 2 }>{ name }</Box>
+      </Tooltip>
+      <Box color="text_secondary">{ formatFileSize(fileSize) }</Box>
+    </Flex>
+  );
+};
+
+const Sprite = () => {
+  const [ searchTerm, setSearchTerm ] = React.useState('');
+  const bgColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.100');
+
+  const fetch = useFetch();
+  const { data, isFetching, isError } = useQuery({
+    queryKey: [ 'sprite' ],
+    queryFn: () => {
+      const url = route({ pathname: '/node-api/sprite' as StaticRoute<'/api/sprite'>['pathname'] });
+      return fetch<{ icons: Array<IconInfo> }, unknown>(url);
+    },
+  });
+
+  const content = (() => {
+    if (isFetching) {
+      return <ContentLoader/>;
+    }
+
+    if (isError || !data || !('icons' in data)) {
+      return <DataFetchAlert/>;
+    }
+
+    const items = data.icons.filter((icon) => icon.name.includes(searchTerm));
+
+    if (items.length === 0) {
+      return <EmptySearchResult text="No icons found"/>;
+    }
+
+    return (
+      <Flex flexWrap="wrap" fontSize="sm" columnGap={ 5 } rowGap={ 5 } justifyContent="flex-start">
+        { items.map((item) => <Item key={ item.name } { ...item } bgColor={ bgColor }/>) }
+      </Flex>
+    );
+  })();
+
+  const total = React.useMemo(() => {
+    if (!data || !('icons' in data)) {
+      return;
+    }
+    return data?.icons.reduce((result, item) => {
+      result.num++;
+      result.fileSize += item.fileSize;
+      return result;
+    }, { num: 0, fileSize: 0 });
+  }, [ data ]);
+
+  const searchInput = <FilterInput placeholder="Search by name..." onChange={ setSearchTerm } isLoading={ isFetching } minW={{ base: '100%', lg: '300px' }}/>;
+  const totalEl = total ? <Box ml="auto">Items: { total.num } / Size: { formatFileSize(total.fileSize) }</Box> : null;
+
+  const contentAfter = (
+    <>
+      { totalEl }
+      { searchInput }
+    </>
+  );
+
+  return (
+    <div>
+      <PageTitle title="SVG sprite 🥤" contentAfter={ contentAfter }/>
+      { content }
+    </div>
+  );
+};
+
+export default React.memo(Sprite);
diff --git a/ui/pages/Stats.tsx b/ui/pages/Stats.tsx
index 228226df27..9b8e8ec869 100644
--- a/ui/pages/Stats.tsx
+++ b/ui/pages/Stats.tsx
@@ -21,11 +21,14 @@ const Stats = () => {
     handleFilterChange,
     displayedCharts,
     filterQuery,
+    initialFilterQuery,
   } = useStats();
 
   return (
     <>
-      <PageTitle title={ `${ config.chain.name } stats` }/>
+      <PageTitle
+        title={ config.meta.seo.enhancedDataEnabled ? `${ config.chain.name } statistic & data` : `${ config.chain.name } stats` }
+      />
 
       <Box mb={{ base: 6, sm: 8 }}>
         <NumberWidgetsList/>
@@ -33,6 +36,8 @@ const Stats = () => {
 
       <Box mb={{ base: 6, sm: 8 }}>
         <StatsFilters
+          isLoading={ isPlaceholderData }
+          initialFilterValue={ initialFilterQuery }
           sections={ sections }
           currentSection={ currentSection }
           onSectionChange={ handleSectionChange }
@@ -44,6 +49,7 @@ const Stats = () => {
 
       <ChartsWidgetsList
         filterQuery={ filterQuery }
+        initialFilterQuery={ initialFilterQuery }
         isError={ isError }
         isPlaceholderData={ isPlaceholderData }
         charts={ displayedCharts }
diff --git a/ui/pages/Token.pw.tsx b/ui/pages/Token.pw.tsx
index 16db22015a..b2987b38b7 100644
--- a/ui/pages/Token.pw.tsx
+++ b/ui/pages/Token.pw.tsx
@@ -1,214 +1,123 @@
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import config from 'configs/app';
 import * as verifiedAddressesMocks from 'mocks/account/verifiedAddresses';
 import { token as contract } from 'mocks/address/address';
 import { tokenInfo, tokenCounters, bridgedTokenA } from 'mocks/tokens/tokenInfo';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
 import * as socketServer from 'playwright/fixtures/socketServer';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { test, expect, devices } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import Token from './Token';
 
-const TOKEN_API_URL = buildApiUrl('token', { hash: '1' });
-const TOKEN_COUNTERS_API_URL = buildApiUrl('token_counters', { hash: '1' });
-const TOKEN_TRANSFERS_API_URL = buildApiUrl('token_transfers', { hash: '1' });
-const ADDRESS_API_URL = buildApiUrl('address', { hash: '1' });
+const hash = tokenInfo.address;
+const chainId = config.chain.id;
+
 const hooksConfig = {
   router: {
-    query: { hash: '1', tab: 'token_transfers' },
+    query: { hash, tab: 'token_transfers' },
     isReady: true,
   },
 };
 
-const test = base.extend<socketServer.SocketServerFixture>({
-  createSocket: socketServer.createSocket,
-});
-
 // FIXME
 // test cases which use socket cannot run in parallel since the socket server always run on the same port
 test.describe.configure({ mode: 'serial' });
 
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(TOKEN_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(tokenInfo),
-  }));
-  await page.route(ADDRESS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contract),
-  }));
-  await page.route(TOKEN_COUNTERS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(tokenCounters),
-  }));
-  await page.route(TOKEN_TRANSFERS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({}),
-  }));
+test.beforeEach(async({ mockApiResponse, mockTextAd }) => {
+  await mockApiResponse('token', tokenInfo, { pathParams: { hash } });
+  await mockApiResponse('address', contract, { pathParams: { hash } });
+  await mockApiResponse('token_counters', tokenCounters, { pathParams: { hash } });
+  await mockApiResponse('token_transfers', { items: [], next_page_params: null }, { pathParams: { hash } });
+  await mockTextAd();
 });
 
-test('base view', async({ mount, page, createSocket }) => {
-  const component = await mount(
-    <TestApp withSocket>
-      <Token/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('base view', async({ render, page, createSocket }) => {
+  const component = await render(<Token/>, { hooksConfig }, { withSocket: true });
 
   const socket = await createSocket();
-  const channel = await socketServer.joinChannel(socket, 'tokens:1');
+  const channel = await socketServer.joinChannel(socket, `tokens:${ hash }`);
   socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-test('with verified info', async({ mount, page, createSocket }) => {
-  const VERIFIED_INFO_URL = buildApiUrl('token_verified_info', { chainId: '1', hash: '1' });
-  await page.route(VERIFIED_INFO_URL, (route) => route.fulfill({
-    body: JSON.stringify(verifiedAddressesMocks.TOKEN_INFO_APPLICATION.APPROVED),
-  }));
-  await page.route(tokenInfo.icon_url as string, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
+test('with verified info', async({ render, page, createSocket, mockApiResponse, mockAssetResponse }) => {
+  await mockApiResponse('token_verified_info', verifiedAddressesMocks.TOKEN_INFO_APPLICATION.APPROVED, { pathParams: { chainId, hash } });
+  await mockAssetResponse(tokenInfo.icon_url as string, './playwright/mocks/image_s.jpg');
 
-  const component = await mount(
-    <TestApp withSocket>
-      <Token/>
-    </TestApp>,
-    { hooksConfig },
-  );
+  const component = await render(<Token/>, { hooksConfig }, { withSocket: true });
 
   const socket = await createSocket();
-  const channel = await socketServer.joinChannel(socket, 'tokens:1');
+  const channel = await socketServer.joinChannel(socket, `tokens:${ hash }`);
   socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
 
   await page.getByRole('button', { name: /project info/i }).click();
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-const bridgedTokenTest = base.extend<socketServer.SocketServerFixture>({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.bridgedTokens) as any,
-  createSocket: socketServer.createSocket,
-});
-
-bridgedTokenTest('bridged token', async({ mount, page, createSocket }) => {
-
-  const VERIFIED_INFO_URL = buildApiUrl('token_verified_info', { chainId: '1', hash: '1' });
-
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(TOKEN_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(bridgedTokenA),
-  }));
-  await page.route(ADDRESS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(contract),
-  }));
-  await page.route(TOKEN_COUNTERS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(tokenCounters),
-  }));
-  await page.route(TOKEN_TRANSFERS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({}),
-  }));
-  await page.route(VERIFIED_INFO_URL, (route) => route.fulfill({
-    body: JSON.stringify(verifiedAddressesMocks.TOKEN_INFO_APPLICATION.APPROVED),
-  }));
-
-  await page.route(tokenInfo.icon_url as string, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
-
-  const component = await mount(
-    <TestApp withSocket>
-      <Token/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+test('bridged token', async({ render, page, createSocket, mockApiResponse, mockAssetResponse, mockEnvs }) => {
+  const hash = bridgedTokenA.address;
+  const hooksConfig = {
+    router: {
+      query: { hash, tab: 'token_transfers' },
+    },
+  };
+
+  await mockEnvs(ENVS_MAP.bridgedTokens);
+  await mockApiResponse('token', bridgedTokenA, { pathParams: { hash } });
+  await mockApiResponse('address', contract, { pathParams: { hash } });
+  await mockApiResponse('token_counters', tokenCounters, { pathParams: { hash } });
+  await mockApiResponse('token_transfers', { items: [], next_page_params: null }, { pathParams: { hash } });
+  await mockApiResponse('token_verified_info', verifiedAddressesMocks.TOKEN_INFO_APPLICATION.APPROVED, { pathParams: { chainId, hash } });
+  await mockAssetResponse(tokenInfo.icon_url as string, './playwright/mocks/image_s.jpg');
+
+  const component = await render(<Token/>, { hooksConfig }, { withSocket: true });
   const socket = await createSocket();
-  const channel = await socketServer.joinChannel(socket, 'tokens:1');
+  const channel = await socketServer.joinChannel(socket, `tokens:${ hash.toLowerCase() }`);
   socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
-  test('base view', async({ mount, page, createSocket }) => {
-    const component = await mount(
-      <TestApp withSocket>
-        <Token/>
-      </TestApp>,
-      { hooksConfig },
-    );
 
+  test('base view', async({ render, page, createSocket }) => {
+    const component = await render(<Token/>, { hooksConfig }, { withSocket: true });
     const socket = await createSocket();
-    const channel = await socketServer.joinChannel(socket, 'tokens:1');
+    const channel = await socketServer.joinChannel(socket, `tokens:${ hash }`);
     socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
 
     await expect(component).toHaveScreenshot({
-      mask: [ page.locator(configs.adsBannerSelector) ],
-      maskColor: configs.maskColor,
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
     });
   });
 
-  test('with verified info', async({ mount, page, createSocket }) => {
-    const VERIFIED_INFO_URL = buildApiUrl('token_verified_info', { chainId: '1', hash: '1' });
-    await page.route(VERIFIED_INFO_URL, (route) => route.fulfill({
-      body: JSON.stringify(verifiedAddressesMocks.TOKEN_INFO_APPLICATION.APPROVED),
-    }));
-    await page.route(tokenInfo.icon_url as string, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-
-    const component = await mount(
-      <TestApp withSocket>
-        <Token/>
-      </TestApp>,
-      { hooksConfig },
-    );
+  test('with verified info', async({ render, page, createSocket, mockApiResponse, mockAssetResponse }) => {
+    await mockApiResponse('token_verified_info', verifiedAddressesMocks.TOKEN_INFO_APPLICATION.APPROVED, { pathParams: { chainId, hash } });
+    await mockAssetResponse(tokenInfo.icon_url as string, './playwright/mocks/image_s.jpg');
 
+    const component = await render(<Token/>, { hooksConfig }, { withSocket: true });
     const socket = await createSocket();
-    const channel = await socketServer.joinChannel(socket, 'tokens:1');
+    const channel = await socketServer.joinChannel(socket, `tokens:${ hash }`);
     socketServer.sendMessage(socket, channel, 'total_supply', { total_supply: 10 ** 20 });
 
     await expect(component).toHaveScreenshot({
-      mask: [ page.locator(configs.adsBannerSelector) ],
-      maskColor: configs.maskColor,
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
     });
   });
 });
diff --git a/ui/pages/Token.tsx b/ui/pages/Token.tsx
index 8ffcf9c455..9c1e1d415f 100644
--- a/ui/pages/Token.tsx
+++ b/ui/pages/Token.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Tooltip } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React, { useEffect } from 'react';
@@ -10,7 +10,6 @@ import type { RoutedTab } from 'ui/shared/Tabs/types';
 
 import config from 'configs/app';
 import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
-import { useAppContext } from 'lib/contexts/app';
 import useContractTabs from 'lib/hooks/useContractTabs';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import * as metadata from 'lib/metadata';
@@ -23,36 +22,33 @@ import * as tokenStubs from 'stubs/token';
 import { getTokenHoldersStub } from 'stubs/token';
 import { generateListStub } from 'stubs/utils';
 import AddressContract from 'ui/address/AddressContract';
-import AddressQrCode from 'ui/address/details/AddressQrCode';
-import AccountActionsMenu from 'ui/shared/AccountActionsMenu/AccountActionsMenu';
+import AddressCsvExportLink from 'ui/address/AddressCsvExportLink';
 import TextAd from 'ui/shared/ad/TextAd';
-import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
-import EntityTags from 'ui/shared/EntityTags';
 import IconSvg from 'ui/shared/IconSvg';
-import NetworkExplorers from 'ui/shared/NetworkExplorers';
-import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
-import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
 import TokenDetails from 'ui/token/TokenDetails';
 import TokenHolders from 'ui/token/TokenHolders/TokenHolders';
 import TokenInventory from 'ui/token/TokenInventory';
+import TokenPageTitle from 'ui/token/TokenPageTitle';
 import TokenTransfer from 'ui/token/TokenTransfer/TokenTransfer';
-import TokenVerifiedInfo from 'ui/token/TokenVerifiedInfo';
+import useTokenQuery from 'ui/token/useTokenQuery';
 
 export type TokenTabs = 'token_transfers' | 'holders' | 'inventory';
 
+const TABS_RIGHT_SLOT_PROPS = {
+  display: 'flex',
+  alignItems: 'center',
+  columnGap: 4,
+};
+
 const TokenPageContent = () => {
   const [ isQueryEnabled, setIsQueryEnabled ] = React.useState(false);
   const [ totalSupplySocket, setTotalSupplySocket ] = React.useState<number>();
   const router = useRouter();
   const isMobile = useIsMobile();
 
-  const appProps = useAppContext();
-
   const scrollRef = React.useRef<HTMLDivElement>(null);
 
   const hashString = getQueryParamString(router.query.hash);
@@ -61,15 +57,9 @@ const TokenPageContent = () => {
 
   const queryClient = useQueryClient();
 
-  const tokenQuery = useApiQuery('token', {
-    pathParams: { hash: hashString },
-    queryOptions: {
-      enabled: Boolean(router.query.hash),
-      placeholderData: tokenStubs.TOKEN_INFO_ERC_20,
-    },
-  });
+  const tokenQuery = useTokenQuery(hashString);
 
-  const contractQuery = useApiQuery('address', {
+  const addressQuery = useApiQuery('address', {
     pathParams: { hash: hashString },
     queryOptions: {
       enabled: isQueryEnabled && Boolean(router.query.hash),
@@ -114,12 +104,12 @@ const TokenPageContent = () => {
   });
 
   useEffect(() => {
-    if (tokenQuery.data && !tokenQuery.isPlaceholderData) {
-      metadata.update({ pathname: '/token/[hash]', query: { hash: tokenQuery.data.address } }, { symbol: tokenQuery.data.symbol ?? '' });
+    if (tokenQuery.data && !tokenQuery.isPlaceholderData && !config.meta.seo.enhancedDataEnabled) {
+      metadata.update({ pathname: '/token/[hash]', query: { hash: tokenQuery.data.address } }, tokenQuery.data);
     }
   }, [ tokenQuery.data, tokenQuery.isPlaceholderData ]);
 
-  const hasData = (tokenQuery.data && !tokenQuery.isPlaceholderData) && (contractQuery.data && !contractQuery.isPlaceholderData);
+  const hasData = (tokenQuery.data && !tokenQuery.isPlaceholderData) && (addressQuery.data && !addressQuery.isPlaceholderData);
   const hasInventoryTab = tokenQuery.data?.type && NFT_TOKEN_TYPE_IDS.includes(tokenQuery.data.type);
 
   const transfersQuery = useQueryWithPages({
@@ -167,25 +157,29 @@ const TokenPageContent = () => {
     },
   });
 
-  const verifiedInfoQuery = useApiQuery('token_verified_info', {
-    pathParams: { hash: hashString, chainId: config.chain.id },
-    queryOptions: { enabled: Boolean(tokenQuery.data) && config.features.verifiedTokens.isEnabled },
-  });
-
-  const contractTabs = useContractTabs(contractQuery.data);
+  const isLoading = tokenQuery.isPlaceholderData || addressQuery.isPlaceholderData;
+  const contractTabs = useContractTabs(addressQuery.data, addressQuery.isPlaceholderData);
 
   const tabs: Array<RoutedTab> = [
     hasInventoryTab ? {
       id: 'inventory',
       title: 'Inventory',
-      component: <TokenInventory inventoryQuery={ inventoryQuery } tokenQuery={ tokenQuery } ownerFilter={ ownerFilter }/>,
+      component: <TokenInventory inventoryQuery={ inventoryQuery } tokenQuery={ tokenQuery } ownerFilter={ ownerFilter } shouldRender={ !isLoading }/>,
     } : undefined,
-    { id: 'token_transfers', title: 'Token transfers', component: <TokenTransfer transfersQuery={ transfersQuery } token={ tokenQuery.data }/> },
-    { id: 'holders', title: 'Holders', component: <TokenHolders token={ tokenQuery.data } holdersQuery={ holdersQuery }/> },
-    contractQuery.data?.is_contract ? {
+    {
+      id: 'token_transfers',
+      title: 'Token transfers',
+      component: <TokenTransfer transfersQuery={ transfersQuery } token={ tokenQuery.data } shouldRender={ !isLoading }/>,
+    },
+    {
+      id: 'holders',
+      title: 'Holders',
+      component: <TokenHolders token={ tokenQuery.data } holdersQuery={ holdersQuery } shouldRender={ !isLoading }/>,
+    },
+    addressQuery.data?.is_contract ? {
       id: 'contract',
       title: () => {
-        if (contractQuery.data?.is_verified) {
+        if (addressQuery.data?.is_verified) {
           return (
             <>
               <span>Contract</span>
@@ -196,8 +190,8 @@ const TokenPageContent = () => {
 
         return 'Contract';
       },
-      component: <AddressContract tabs={ contractTabs }/>,
-      subTabs: contractTabs.map(tab => tab.id),
+      component: <AddressContract tabs={ contractTabs.tabs } isLoading={ contractTabs.isLoading } shouldRender={ !isLoading }/>,
+      subTabs: contractTabs.tabs.map(tab => tab.id),
     } : undefined,
   ].filter(Boolean);
 
@@ -217,116 +211,57 @@ const TokenPageContent = () => {
     pagination = inventoryQuery.pagination;
   }
 
-  const tokenSymbolText = tokenQuery.data?.symbol ? ` (${ tokenQuery.data.symbol })` : '';
-
   const tabListProps = React.useCallback(({ isSticky, activeTabIndex }: { isSticky: boolean; activeTabIndex: number }) => {
     if (isMobile) {
       return { mt: 8 };
     }
 
     return {
-      mt: 3,
-      py: 5,
+      pt: 6,
+      pb: 6,
       marginBottom: 0,
       boxShadow: activeTabIndex === 2 && isSticky ? 'action_bar' : 'none',
     };
   }, [ isMobile ]);
 
-  const backLink = React.useMemo(() => {
-    const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/tokens');
-
-    if (!hasGoBackLink) {
-      return;
+  const tabsRightSlot = React.useMemo(() => {
+    if (isMobile) {
+      return null;
     }
 
-    return {
-      label: 'Back to tokens list',
-      url: appProps.referrer,
-    };
-  }, [ appProps.referrer ]);
-
-  const titleContentAfter = (
-    <>
-      { verifiedInfoQuery.data?.tokenAddress && (
-        <Tooltip label={ `Information on this token has been verified by ${ config.chain.name }` }>
-          <Box boxSize={ 6 }>
-            <IconSvg name="verified_token" color="green.500" boxSize={ 6 } cursor="pointer"/>
-          </Box>
-        </Tooltip>
-      ) }
-      <EntityTags
-        data={ contractQuery.data }
-        isLoading={ tokenQuery.isPlaceholderData || contractQuery.isPlaceholderData }
-        tagsBefore={ [
-          tokenQuery.data ? { label: tokenQuery.data?.type, display_name: tokenQuery.data?.type } : undefined,
-          config.features.bridgedTokens.isEnabled && tokenQuery.data?.is_bridged ?
-            { label: 'bridged', display_name: 'Bridged', colorScheme: 'blue', variant: 'solid' } :
-            undefined,
-        ] }
-        tagsAfter={
-          verifiedInfoQuery.data?.projectSector ?
-            [ { label: verifiedInfoQuery.data.projectSector, display_name: verifiedInfoQuery.data.projectSector } ] :
-            undefined
-        }
-        flexGrow={ 1 }
-      />
-    </>
-  );
-
-  const isLoading = tokenQuery.isPlaceholderData || contractQuery.isPlaceholderData;
-
-  const titleSecondRow = (
-    <Flex alignItems="center" w="100%" minW={ 0 } columnGap={ 2 } rowGap={ 2 } flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
-      <AddressEntity
-        address={{ ...contractQuery.data, name: '' }}
-        isLoading={ isLoading }
-        fontFamily="heading"
-        fontSize="lg"
-        fontWeight={ 500 }
-      />
-      { !isLoading && tokenQuery.data && <AddressAddToWallet token={ tokenQuery.data } variant="button"/> }
-      <AddressQrCode address={ contractQuery.data } isLoading={ isLoading }/>
-      <AccountActionsMenu isLoading={ isLoading }/>
-      <Flex ml={{ base: 0, lg: 'auto' }} columnGap={ 2 } flexGrow={{ base: 1, lg: 0 }}>
-        <TokenVerifiedInfo verifiedInfoQuery={ verifiedInfoQuery }/>
-        <NetworkExplorers type="token" pathParam={ hashString } ml={{ base: 'auto', lg: 0 }}/>
-      </Flex>
-    </Flex>
-  );
+    return (
+      <>
+        { tab === 'holders' && (
+          <AddressCsvExportLink
+            address={ hashString }
+            params={{ type: 'holders' }}
+            isLoading={ pagination?.isLoading }
+          />
+        ) }
+        { pagination?.isVisible && <Pagination { ...pagination }/> }
+      </>
+    );
+  }, [ hashString, isMobile, pagination, tab ]);
 
   return (
     <>
       <TextAd mb={ 6 }/>
-      <PageTitle
-        title={ `${ tokenQuery.data?.name || 'Unnamed token' }${ tokenSymbolText }` }
-        isLoading={ isLoading }
-        backLink={ backLink }
-        beforeTitle={ tokenQuery.data ? (
-          <TokenEntity.Icon
-            token={ tokenQuery.data }
-            isLoading={ isLoading }
-            iconSize="lg"
-          />
-        ) : null }
-        contentAfter={ titleContentAfter }
-        secondRow={ titleSecondRow }
-      />
+
+      <TokenPageTitle tokenQuery={ tokenQuery } addressQuery={ addressQuery } hash={ hashString }/>
 
       <TokenDetails tokenQuery={ tokenQuery }/>
 
       { /* should stay before tabs to scroll up with pagination */ }
       <Box ref={ scrollRef }></Box>
 
-      { isLoading ?
-        <TabsSkeleton tabs={ tabs }/> :
-        (
-          <RoutedTabs
-            tabs={ tabs }
-            tabListProps={ tabListProps }
-            rightSlot={ !isMobile && pagination?.isVisible ? <Pagination { ...pagination }/> : null }
-            stickyEnabled={ !isMobile }
-          />
-        ) }
+      <RoutedTabs
+        tabs={ tabs }
+        tabListProps={ tabListProps }
+        rightSlot={ tabsRightSlot }
+        rightSlotProps={ TABS_RIGHT_SLOT_PROPS }
+        stickyEnabled={ !isMobile }
+        isLoading={ isLoading }
+      />
     </>
   );
 };
diff --git a/ui/pages/TokenInstance.pw.tsx b/ui/pages/TokenInstance.pw.tsx
new file mode 100644
index 0000000000..13af088c62
--- /dev/null
+++ b/ui/pages/TokenInstance.pw.tsx
@@ -0,0 +1,136 @@
+import React from 'react';
+
+import config from 'configs/app';
+import * as addressMock from 'mocks/address/address';
+import * as tokenMock from 'mocks/tokens/tokenInfo';
+import * as tokenInstanceMock from 'mocks/tokens/tokenInstance';
+import * as socketServer from 'playwright/fixtures/socketServer';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
+
+import TokenInstance from './TokenInstance';
+
+const hash = tokenMock.tokenInfo.address;
+const id = '42';
+
+test.describe.configure({ mode: 'serial' });
+
+test.beforeEach(async({ mockApiResponse, mockAssetResponse, mockTextAd }) => {
+  await mockApiResponse('token', tokenMock.tokenInfo, { pathParams: { hash } });
+  await mockApiResponse('address', addressMock.token, { pathParams: { hash } });
+  await mockApiResponse('token_instance', tokenInstanceMock.unique, { pathParams: { hash, id } });
+  await mockApiResponse('token_instance_transfers', { items: [], next_page_params: null }, { pathParams: { hash, id } });
+  await mockApiResponse('token_instance_transfers_count', { transfers_count: 420 }, { pathParams: { hash, id } });
+  await mockTextAd();
+  for (const marketplace of config.UI.views.nft.marketplaces) {
+    await mockAssetResponse(marketplace.logo_url, './playwright/mocks/image_svg.svg');
+  }
+  await mockAssetResponse(tokenInstanceMock.base.image_url as string, './playwright/mocks/image_md.jpg');
+});
+
+test('metadata update', async({ render, page, createSocket, mockApiResponse, mockAssetResponse }) => {
+  const hooksConfig = {
+    router: {
+      query: { hash, id, tab: 'metadata' },
+      pathname: '/token/[hash]/instance/[id]',
+    },
+  };
+  const newMetadata = {
+    attributes: [
+      { value: 'yellow', trait_type: 'Color' },
+      { value: 'Mrs. Duckie', trait_type: 'Name' },
+    ],
+    external_url: 'https://yellow-duck.nft',
+    image_url: 'https://yellow-duck.nft/duck.jpg',
+    animation_url: null,
+    status: 'FRESH!!!',
+    name: 'Carmelo Anthony',
+    description: 'Updated description',
+  };
+  await mockApiResponse('token_instance_refresh_metadata', {} as never, { pathParams: { hash, id } });
+  await mockAssetResponse(newMetadata.image_url, './playwright/mocks/image_long.jpg');
+
+  const component = await render(<TokenInstance/>, { hooksConfig }, { withSocket: true });
+  const socket = await createSocket();
+
+  // take a screenshot of initial state
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
+
+  // open the menu, click the button and submit form
+  await page.getByLabel('Address menu').click();
+  await page.getByRole('menuitem', { name: 'Refresh metadata' }).click();
+  await page.evaluate(() => {
+    const form = document.querySelector('form');
+    form && (form.style.display = 'block');
+  });
+  await page.getByPlaceholder('reCaptcha token').fill('xxx');
+  await page.getByRole('button', { name: 'Submit' }).click();
+
+  // join socket channel
+  const channel = await socketServer.joinChannel(socket, `token_instances:${ hash.toLowerCase() }`);
+
+  // check that button is disabled
+  await page.getByLabel('Address menu').click();
+  await expect(page.getByRole('menuitem', { name: 'Refresh metadata' })).toBeDisabled();
+  await page.getByLabel('Address menu').click();
+
+  // take a screenshot of loading state
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
+
+  // send message in socket but with wrong token id
+  socketServer.sendMessage(socket, channel, 'fetched_token_instance_metadata', {
+    token_id: Number(id) + 1,
+    fetched_metadata: newMetadata,
+  });
+  await expect(page.getByText(newMetadata.description)).toBeHidden();
+
+  // send message in socket with correct token id
+  socketServer.sendMessage(socket, channel, 'fetched_token_instance_metadata', {
+    token_id: Number(id),
+    fetched_metadata: newMetadata,
+  });
+
+  // take a screenshot of updated state
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
+});
+
+test('metadata update failed', async({ render, page }) => {
+  const hooksConfig = {
+    router: {
+      query: { hash, id, tab: 'metadata' },
+      pathname: '/token/[hash]/instance/[id]',
+    },
+  };
+
+  const component = await render(<TokenInstance/>, { hooksConfig }, { withSocket: true });
+
+  // open the menu, click the button and submit form
+  await page.getByLabel('Address menu').click();
+  await page.getByRole('menuitem', { name: 'Refresh metadata' }).click();
+  await page.evaluate(() => {
+    const form = document.querySelector('form');
+    form && (form.style.display = 'block');
+  });
+  await page.getByPlaceholder('reCaptcha token').fill('xxx');
+  await page.getByRole('button', { name: 'Submit' }).click();
+
+  // check that button is not disabled
+  await page.getByLabel('Address menu').click();
+  await expect(page.getByRole('menuitem', { name: 'Refresh metadata' })).toBeEnabled();
+  await page.getByLabel('Address menu').click();
+
+  // take a screenshot of error state
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
+});
diff --git a/ui/pages/TokenInstance.tsx b/ui/pages/TokenInstance.tsx
index 6471e822b9..345dd6f09d 100644
--- a/ui/pages/TokenInstance.tsx
+++ b/ui/pages/TokenInstance.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -6,44 +6,37 @@ import type { PaginationParams } from 'ui/shared/pagination/types';
 import type { RoutedTab } from 'ui/shared/Tabs/types';
 
 import useApiQuery from 'lib/api/useApiQuery';
-import { useAppContext } from 'lib/contexts/app';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import * as metadata from 'lib/metadata';
-import * as regexp from 'lib/regexp';
+import getQueryParamString from 'lib/router/getQueryParamString';
 import {
   TOKEN_INSTANCE,
   TOKEN_INFO_ERC_1155,
   getTokenInstanceTransfersStub,
   getTokenInstanceHoldersStub,
 } from 'stubs/token';
-import AddressQrCode from 'ui/address/details/AddressQrCode';
-import AccountActionsMenu from 'ui/shared/AccountActionsMenu/AccountActionsMenu';
 import TextAd from 'ui/shared/ad/TextAd';
-import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
-import Tag from 'ui/shared/chakra/Tag';
-import TokenEntity from 'ui/shared/entities/token/TokenEntity';
-import LinkExternal from 'ui/shared/LinkExternal';
-import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
-import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
 import TokenHolders from 'ui/token/TokenHolders/TokenHolders';
 import TokenTransfer from 'ui/token/TokenTransfer/TokenTransfer';
+import { MetadataUpdateProvider } from 'ui/tokenInstance/contexts/metadataUpdate';
 import TokenInstanceDetails from 'ui/tokenInstance/TokenInstanceDetails';
 import TokenInstanceMetadata from 'ui/tokenInstance/TokenInstanceMetadata';
+import TokenInstanceMetadataFetcher from 'ui/tokenInstance/TokenInstanceMetadataFetcher';
+import TokenInstancePageTitle from 'ui/tokenInstance/TokenInstancePageTitle';
 
 export type TokenTabs = 'token_transfers' | 'holders'
 
 const TokenInstanceContent = () => {
   const router = useRouter();
   const isMobile = useIsMobile();
-  const appProps = useAppContext();
 
-  const hash = router.query.hash?.toString();
-  const id = router.query.id?.toString();
-  const tab = router.query.tab?.toString();
+  const hash = getQueryParamString(router.query.hash);
+  const id = getQueryParamString(router.query.id);
+  const tab = getQueryParamString(router.query.tab);
 
   const scrollRef = React.useRef<HTMLDivElement>(null);
 
@@ -68,7 +61,7 @@ const TokenInstanceContent = () => {
     pathParams: { hash, id },
     scrollRef,
     options: {
-      enabled: Boolean(hash && id && (!tab || tab === 'token_transfers') && !tokenInstanceQuery.isPlaceholderData && tokenInstanceQuery.data),
+      enabled: Boolean(hash && id && (!tab || tab === 'token_transfers')),
       placeholderData: getTokenInstanceTransfersStub(tokenQuery.data?.type, null),
     },
   });
@@ -89,6 +82,8 @@ const TokenInstanceContent = () => {
     },
   });
 
+  const isLoading = tokenInstanceQuery.isPlaceholderData || tokenQuery.isPlaceholderData;
+
   React.useEffect(() => {
     if (tokenInstanceQuery.data && !tokenInstanceQuery.isPlaceholderData && tokenQuery.data && !tokenQuery.isPlaceholderData) {
       metadata.update(
@@ -98,74 +93,25 @@ const TokenInstanceContent = () => {
     }
   }, [ tokenInstanceQuery.data, tokenInstanceQuery.isPlaceholderData, tokenQuery.data, tokenQuery.isPlaceholderData ]);
 
-  const backLink = React.useMemo(() => {
-    const hasGoBackLink = appProps.referrer && appProps.referrer.includes(`/token/${ hash }`) && !appProps.referrer.includes('instance');
-
-    if (!hasGoBackLink) {
-      return;
-    }
-
-    return {
-      label: 'Back to token page',
-      url: appProps.referrer,
-    };
-  }, [ appProps.referrer, hash ]);
-
   const tabs: Array<RoutedTab> = [
     {
       id: 'token_transfers',
       title: 'Token transfers',
-      component: <TokenTransfer transfersQuery={ transfersQuery } tokenId={ id } token={ tokenQuery.data }/>,
+      component: <TokenTransfer transfersQuery={ transfersQuery } tokenId={ id } token={ tokenQuery.data } shouldRender={ !isLoading }/>,
     },
     shouldFetchHolders ?
-      { id: 'holders', title: 'Holders', component: <TokenHolders holdersQuery={ holdersQuery } token={ tokenQuery.data }/> } :
+      { id: 'holders', title: 'Holders', component: <TokenHolders holdersQuery={ holdersQuery } token={ tokenQuery.data } shouldRender={ !isLoading }/> } :
       undefined,
     { id: 'metadata', title: 'Metadata', component: (
       <TokenInstanceMetadata
         data={ tokenInstanceQuery.data?.metadata }
-        isPlaceholderData={ tokenInstanceQuery.isPlaceholderData }
+        isPlaceholderData={ isLoading }
       />
     ) },
   ].filter(Boolean);
 
   throwOnResourceLoadError(tokenInstanceQuery);
 
-  const tokenTag = <Tag isLoading={ tokenInstanceQuery.isPlaceholderData }>{ tokenQuery.data?.type }</Tag>;
-
-  const address = {
-    hash: hash || '',
-    is_contract: true,
-    implementation_name: null,
-    watchlist_names: [],
-    watchlist_address_id: null,
-  };
-
-  const isLoading = tokenInstanceQuery.isPlaceholderData || tokenQuery.isPlaceholderData;
-
-  const appLink = (() => {
-    if (!tokenInstanceQuery.data?.external_app_url) {
-      return null;
-    }
-
-    try {
-      const url = regexp.URL_PREFIX.test(tokenInstanceQuery.data.external_app_url) ?
-        new URL(tokenInstanceQuery.data.external_app_url) :
-        new URL('https://' + tokenInstanceQuery.data.external_app_url);
-
-      return (
-        <LinkExternal href={ url.toString() } variant="subtle" isLoading={ isLoading } ml={{ base: 0, lg: 'auto' }}>
-          { url.hostname || tokenInstanceQuery.data.external_app_url }
-        </LinkExternal>
-      );
-    } catch (error) {
-      return (
-        <LinkExternal href={ tokenInstanceQuery.data.external_app_url } isLoading={ isLoading } ml={{ base: 0, lg: 'auto' }}>
-            View in app
-        </LinkExternal>
-      );
-    }
-  })();
-
   let pagination: PaginationParams | undefined;
 
   if (tab === 'token_transfers') {
@@ -174,36 +120,15 @@ const TokenInstanceContent = () => {
     pagination = holdersQuery.pagination;
   }
 
-  const titleSecondRow = (
-    <Flex alignItems="center" w="100%" minW={ 0 } columnGap={ 2 } rowGap={ 2 } flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
-      <TokenEntity
-        token={ tokenQuery.data }
-        isLoading={ isLoading }
-        noSymbol
-        noCopy
-        jointSymbol
-        fontFamily="heading"
-        fontSize="lg"
-        fontWeight={ 500 }
-        w="auto"
-        maxW="700px"
-      />
-      { !isLoading && tokenInstanceQuery.data && <AddressAddToWallet token={ tokenQuery.data } variant="button"/> }
-      <AddressQrCode address={ address } isLoading={ isLoading }/>
-      <AccountActionsMenu isLoading={ isLoading }/>
-      { appLink }
-    </Flex>
-  );
-
   return (
-    <>
+    <MetadataUpdateProvider>
       <TextAd mb={ 6 }/>
-      <PageTitle
-        title={ `ID ${ tokenInstanceQuery.data?.id }` }
-        backLink={ backLink }
-        contentAfter={ tokenTag }
-        secondRow={ titleSecondRow }
+
+      <TokenInstancePageTitle
         isLoading={ isLoading }
+        token={ tokenQuery.data }
+        instance={ tokenInstanceQuery.data }
+        hash={ hash }
       />
 
       <TokenInstanceDetails data={ tokenInstanceQuery?.data } isLoading={ isLoading } scrollRef={ scrollRef } token={ tokenQuery.data }/>
@@ -211,15 +136,16 @@ const TokenInstanceContent = () => {
       { /* should stay before tabs to scroll up with pagination */ }
       <Box ref={ scrollRef }></Box>
 
-      { isLoading ? <TabsSkeleton tabs={ tabs }/> : (
-        <RoutedTabs
-          tabs={ tabs }
-          tabListProps={ isMobile ? { mt: 8 } : { mt: 3, py: 5, marginBottom: 0 } }
-          rightSlot={ !isMobile && pagination?.isVisible ? <Pagination { ...pagination }/> : null }
-          stickyEnabled={ !isMobile }
-        />
-      ) }
-    </>
+      <RoutedTabs
+        tabs={ tabs }
+        tabListProps={ isMobile ? { mt: 8 } : { mt: 3, py: 5, marginBottom: 0 } }
+        isLoading={ isLoading }
+        rightSlot={ !isMobile && pagination?.isVisible ? <Pagination { ...pagination }/> : null }
+        stickyEnabled={ !isMobile }
+      />
+
+      <TokenInstanceMetadataFetcher hash={ hash } id={ id }/>
+    </MetadataUpdateProvider>
   );
 };
 
diff --git a/ui/pages/Tokens.pw.tsx b/ui/pages/Tokens.pw.tsx
index ce714a2fee..22f62bd3bb 100644
--- a/ui/pages/Tokens.pw.tsx
+++ b/ui/pages/Tokens.pw.tsx
@@ -1,30 +1,17 @@
 import { Box } from '@chakra-ui/react';
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import * as textAdMock from 'mocks/ad/textAd';
 import * as tokens from 'mocks/tokens/tokenInfo';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import Tokens from './Tokens';
 
-base.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
+test.beforeEach(async({ mockTextAd }) => {
+  await mockTextAd();
 });
 
-base('base view +@mobile +@dark-mode', async({ mount, page }) => {
+test('base view +@mobile +@dark-mode', async({ render, mockApiResponse }) => {
   const allTokens = {
     items: [
       tokens.tokenInfoERC20a, tokens.tokenInfoERC20b, tokens.tokenInfoERC20c, tokens.tokenInfoERC20d,
@@ -35,6 +22,7 @@ base('base view +@mobile +@dark-mode', async({ mount, page }) => {
       holder_count: 1,
       items_count: 1,
       name: 'a',
+      market_cap: '0',
     },
   };
   const filteredTokens = {
@@ -44,40 +32,25 @@ base('base view +@mobile +@dark-mode', async({ mount, page }) => {
     next_page_params: null,
   };
 
-  const ALL_TOKENS_API_URL = buildApiUrl('tokens');
-  const FILTERED_TOKENS_API_URL = buildApiUrl('tokens') + '?q=foo';
-
-  await page.route(ALL_TOKENS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(allTokens),
-  }));
+  await mockApiResponse('tokens', allTokens);
+  await mockApiResponse('tokens', filteredTokens, { queryParams: { q: 'foo' } });
 
-  await page.route(FILTERED_TOKENS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(filteredTokens),
-  }));
-
-  const component = await mount(
-    <TestApp>
+  const component = await render(
+    <div>
       <Box h={{ base: '134px', lg: 6 }}/>
       <Tokens/>
-    </TestApp>,
+    </div>,
   );
 
   await expect(component).toHaveScreenshot();
 
   await component.getByRole('textbox', { name: 'Token name or symbol' }).focus();
-  await component.getByRole('textbox', { name: 'Token name or symbol' }).type('foo');
+  await component.getByRole('textbox', { name: 'Token name or symbol' }).fill('foo');
 
   await expect(component).toHaveScreenshot();
 });
 
-base.describe('bridged tokens', async() => {
-  const test = base.extend({
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    context: contextWithEnvs(configs.featureEnvs.bridgedTokens) as any,
-  });
-
+test.describe('bridged tokens', async() => {
   const bridgedTokens = {
     items: [
       tokens.bridgedTokenA,
@@ -88,6 +61,7 @@ base.describe('bridged tokens', async() => {
       holder_count: 1,
       items_count: 1,
       name: 'a',
+      market_cap: null,
     },
   };
   const bridgedFilteredTokens = {
@@ -101,26 +75,17 @@ base.describe('bridged tokens', async() => {
       query: { tab: 'bridged' },
     },
   };
-  const BRIDGED_TOKENS_API_URL = buildApiUrl('tokens_bridged');
-
-  test.beforeEach(async({ page }) => {
-    await page.route(BRIDGED_TOKENS_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(bridgedTokens),
-    }));
-  });
 
-  test('base view', async({ mount, page }) => {
-    await page.route(BRIDGED_TOKENS_API_URL + '?chain_ids=99', (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(bridgedFilteredTokens),
-    }));
+  test('base view', async({ render, page, mockApiResponse, mockEnvs }) => {
+    await mockEnvs(ENVS_MAP.bridgedTokens);
+    await mockApiResponse('tokens_bridged', bridgedTokens);
+    await mockApiResponse('tokens_bridged', bridgedFilteredTokens, { queryParams: { chain_ids: '99' } });
 
-    const component = await mount(
-      <TestApp>
+    const component = await render(
+      <div>
         <Box h={{ base: '134px', lg: 6 }}/>
         <Tokens/>
-      </TestApp>,
+      </div>,
       { hooksConfig },
     );
 
diff --git a/ui/pages/Tokens.tsx b/ui/pages/Tokens.tsx
index 2db3e0d8c7..910eac6e0a 100644
--- a/ui/pages/Tokens.tsx
+++ b/ui/pages/Tokens.tsx
@@ -26,10 +26,12 @@ import { SORT_OPTIONS, getTokenFilterValue, getBridgedChainsFilterValue } from '
 
 const TAB_LIST_PROPS = {
   marginBottom: 0,
-  py: 5,
+  pt: 6,
+  pb: 6,
   marginTop: -5,
   alignItems: 'center',
 };
+const TABS_HEIGHT = 88;
 
 const TABS_RIGHT_SLOT_PROPS = {
   ml: 8,
@@ -101,12 +103,14 @@ const Tokens = () => {
     setBridgeChains(undefined);
   }, []);
 
+  const hasMultipleTabs = bridgedTokensFeature.isEnabled;
+
   const filter = tab === 'bridged' ? (
-    <PopoverFilter isActive={ bridgeChains && bridgeChains.length > 0 } contentProps={{ maxW: '350px' }} appliedFiltersNum={ bridgeChains?.length }>
+    <PopoverFilter contentProps={{ maxW: '350px' }} appliedFiltersNum={ bridgeChains?.length }>
       <TokensBridgedChainsFilter onChange={ handleBridgeChainsChange } defaultValue={ bridgeChains }/>
     </PopoverFilter>
   ) : (
-    <PopoverFilter isActive={ tokenTypes && tokenTypes.length > 0 } contentProps={{ w: '200px' }} appliedFiltersNum={ tokenTypes?.length }>
+    <PopoverFilter contentProps={{ w: '200px' }} appliedFiltersNum={ tokenTypes?.length }>
       <TokenTypeFilter<TokenType> onChange={ handleTokenTypesChange } defaultValue={ tokenTypes } nftOnly={ false }/>
     </PopoverFilter>
   );
@@ -120,7 +124,7 @@ const Tokens = () => {
       onSearchChange={ handleSearchTermChange }
       sort={ sort }
       onSortChange={ handleSortChange }
-      inTabsSlot={ !isMobile && bridgedTokensFeature.isEnabled }
+      inTabsSlot={ !isMobile && hasMultipleTabs }
     />
   );
 
@@ -151,6 +155,7 @@ const Tokens = () => {
           onSortChange={ handleSortChange }
           actionBar={ isMobile ? actionBar : null }
           hasActiveFilters={ Boolean(searchTerm || tokenTypes) }
+          tableTop={ hasMultipleTabs ? TABS_HEIGHT : undefined }
         />
       ),
     },
@@ -165,6 +170,7 @@ const Tokens = () => {
           actionBar={ isMobile ? actionBar : null }
           hasActiveFilters={ Boolean(searchTerm || bridgeChains) }
           description={ description }
+          tableTop={ hasMultipleTabs ? TABS_HEIGHT : undefined }
         />
       ),
     } : undefined,
@@ -172,12 +178,15 @@ const Tokens = () => {
 
   return (
     <>
-      <PageTitle title="Tokens" withTextAd/>
-      { tabs.length === 1 && !isMobile && actionBar }
+      <PageTitle
+        title={ config.meta.seo.enhancedDataEnabled ? `Tokens on ${ config.chain.name }` : 'Tokens' }
+        withTextAd
+      />
+      { !hasMultipleTabs && !isMobile && actionBar }
       <RoutedTabs
         tabs={ tabs }
         tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
-        rightSlot={ !isMobile ? actionBar : null }
+        rightSlot={ hasMultipleTabs && !isMobile ? actionBar : null }
         rightSlotProps={ !isMobile ? TABS_RIGHT_SLOT_PROPS : undefined }
         stickyEnabled={ !isMobile }
         onTabChange={ handleTabChange }
diff --git a/ui/pages/Transaction.tsx b/ui/pages/Transaction.tsx
index a41b8addcd..b9086c2fa9 100644
--- a/ui/pages/Transaction.tsx
+++ b/ui/pages/Transaction.tsx
@@ -10,7 +10,7 @@ import getQueryParamString from 'lib/router/getQueryParamString';
 import { publicClient } from 'lib/web3/client';
 import TextAd from 'ui/shared/ad/TextAd';
 import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
-import EntityTags from 'ui/shared/EntityTags';
+import EntityTags from 'ui/shared/EntityTags/EntityTags';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
@@ -39,7 +39,7 @@ const TransactionPageContent = () => {
   const txQuery = useTxQuery();
   const { data, isPlaceholderData, isError, error, errorUpdateCount } = txQuery;
 
-  const showDegradedView = publicClient && (isError || isPlaceholderData) && errorUpdateCount > 0;
+  const showDegradedView = publicClient && ((isError && error.status !== 422) || isPlaceholderData) && errorUpdateCount > 0;
 
   const tabs: Array<RoutedTab> = (() => {
     const detailsComponent = showDegradedView ?
@@ -63,7 +63,7 @@ const TransactionPageContent = () => {
         { id: 'user_ops', title: 'User operations', component: <TxUserOps txQuery={ txQuery }/> } :
         undefined,
       { id: 'internal', title: 'Internal txns', component: <TxInternals txQuery={ txQuery }/> },
-      txQuery.data?.blob_versioned_hashes?.length ?
+      config.features.dataAvailability.isEnabled && txQuery.data?.blob_versioned_hashes?.length ?
         { id: 'blobs', title: 'Blobs', component: <TxBlobs txQuery={ txQuery }/> } :
         undefined,
       { id: 'logs', title: 'Logs', component: <TxLogs txQuery={ txQuery }/> },
@@ -77,7 +77,7 @@ const TransactionPageContent = () => {
   const tags = (
     <EntityTags
       isLoading={ isPlaceholderData }
-      tagsBefore={ [ data?.tx_tag ? { label: data.tx_tag, display_name: data.tx_tag } : undefined ] }
+      tags={ data?.tx_tag ? [ { slug: data.tx_tag, name: data.tx_tag, tagType: 'private_tag' as const } ] : [] }
     />
   );
 
diff --git a/ui/pages/Transactions.tsx b/ui/pages/Transactions.tsx
index 4517b4d985..b76c2fbfe8 100644
--- a/ui/pages/Transactions.tsx
+++ b/ui/pages/Transactions.tsx
@@ -1,3 +1,4 @@
+import capitalize from 'lodash/capitalize';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -7,6 +8,7 @@ import config from 'configs/app';
 import useHasAccount from 'lib/hooks/useHasAccount';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useNewTxsSocket from 'lib/hooks/useNewTxsSocket';
+import getNetworkValidationActionText from 'lib/networks/getNetworkValidationActionText';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { TX } from 'stubs/tx';
 import { generateListStub } from 'stubs/utils';
@@ -14,27 +16,24 @@ import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
+import TxsStats from 'ui/txs/TxsStats';
 import TxsWatchlist from 'ui/txs/TxsWatchlist';
 import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
 
 const TAB_LIST_PROPS = {
   marginBottom: 0,
-  py: 5,
+  pt: 6,
+  pb: 6,
   marginTop: -5,
 };
+const TABS_HEIGHT = 88;
 
 const Transactions = () => {
-  const verifiedTitle = config.chain.verificationType === 'validation' ? 'Validated' : 'Mined';
+  const verifiedTitle = capitalize(getNetworkValidationActionText());
   const router = useRouter();
   const isMobile = useIsMobile();
   const tab = getQueryParamString(router.query.tab);
 
-  React.useEffect(() => {
-    if (tab === 'blob_txs' && !config.features.dataAvailability.isEnabled) {
-      router.replace({ pathname: '/txs' }, undefined, { shallow: true });
-    }
-  }, [ router, tab ]);
-
   const txsValidatedQuery = useQueryWithPages({
     resourceName: 'txs_validated',
     filters: { filter: 'validated' },
@@ -101,6 +100,7 @@ const Transactions = () => {
           showSocketInfo={ txsValidatedQuery.pagination.page === 1 }
           socketInfoNum={ num }
           socketInfoAlert={ socketAlert }
+          top={ TABS_HEIGHT }
         /> },
     {
       id: 'pending',
@@ -112,6 +112,7 @@ const Transactions = () => {
           showSocketInfo={ txsPendingQuery.pagination.page === 1 }
           socketInfoNum={ num }
           socketInfoAlert={ socketAlert }
+          top={ TABS_HEIGHT }
         />
       ),
     },
@@ -124,6 +125,7 @@ const Transactions = () => {
           showSocketInfo={ txsWithBlobsQuery.pagination.page === 1 }
           socketInfoNum={ num }
           socketInfoAlert={ socketAlert }
+          top={ TABS_HEIGHT }
         />
       ),
     },
@@ -145,7 +147,11 @@ const Transactions = () => {
 
   return (
     <>
-      <PageTitle title="Transactions" withTextAd/>
+      <PageTitle
+        title={ config.meta.seo.enhancedDataEnabled ? `${ config.chain.name } transactions` : 'Transactions' }
+        withTextAd
+      />
+      <TxsStats/>
       <RoutedTabs
         tabs={ tabs }
         tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
diff --git a/ui/pages/UserOp.pw.tsx b/ui/pages/UserOp.pw.tsx
index 8b7b114c8c..31afb90040 100644
--- a/ui/pages/UserOp.pw.tsx
+++ b/ui/pages/UserOp.pw.tsx
@@ -1,73 +1,38 @@
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { userOpData } from 'mocks/userOps/userOp';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect, devices } from 'playwright/lib';
 
 import UserOp from './UserOp';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.userOps) as any,
-});
-
-const USER_OP_API_URL = buildApiUrl('user_op', { hash: userOpData.hash });
-
-test('base view', async({ mount, page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(USER_OP_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(userOpData),
-  }));
+const hooksConfig = {
+  router: {
+    query: { hash: userOpData.hash },
+    isReady: true,
+  },
+};
 
-  const component = await mount(
-    <TestApp>
-      <UserOp/>
-    </TestApp>,
-    { hooksConfig: {
-      router: {
-        query: { hash: userOpData.hash },
-        isReady: true,
-      },
-    } },
-  );
+test.beforeEach(async({ mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.userOps);
+});
 
+test('base view', async({ render, mockTextAd, mockApiResponse }) => {
+  await mockTextAd();
+  await mockApiResponse('user_op', userOpData, { pathParams: { hash: userOpData.hash } });
+  const component = await render(<UserOp/>, { hooksConfig });
+  await component.getByText('View details').click();
   await expect(component).toHaveScreenshot();
 });
 
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-  test('base view', async({ mount, page }) => {
-    await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-      status: 200,
-      body: '',
-    }));
-
-    await page.route(USER_OP_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(userOpData),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <UserOp/>
-      </TestApp>,
-      { hooksConfig: {
-        router: {
-          query: { hash: userOpData.hash },
-          isReady: true,
-        },
-      } },
-    );
-
+  test('base view', async({ render, mockTextAd, mockApiResponse }) => {
+    await mockTextAd();
+    await mockApiResponse('user_op', userOpData, { pathParams: { hash: userOpData.hash } });
+    const component = await render(<UserOp/>, { hooksConfig });
+    await component.getByText('View details').click();
     await expect(component).toHaveScreenshot();
   });
 });
diff --git a/ui/pages/UserOp.tsx b/ui/pages/UserOp.tsx
index 4132e39757..92eebad927 100644
--- a/ui/pages/UserOp.tsx
+++ b/ui/pages/UserOp.tsx
@@ -1,4 +1,4 @@
-import { inRange } from 'lodash';
+import _inRange from 'lodash/inRange';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -43,7 +43,11 @@ const UserOp = () => {
     if (!userOpQuery.data) {
       return true;
     } else {
-      if (inRange(Number(tt.log_index), userOpQuery.data?.user_logs_start_index, userOpQuery.data?.user_logs_start_index + userOpQuery.data?.user_logs_count)) {
+      if (_inRange(
+        Number(tt.log_index),
+        userOpQuery.data?.user_logs_start_index,
+        userOpQuery.data?.user_logs_start_index + userOpQuery.data?.user_logs_count,
+      )) {
         return true;
       }
       return false;
@@ -54,7 +58,7 @@ const UserOp = () => {
     if (!userOpQuery.data) {
       return true;
     } else {
-      if (inRange(log.index, userOpQuery.data?.user_logs_start_index, userOpQuery.data?.user_logs_start_index + userOpQuery.data?.user_logs_count)) {
+      if (_inRange(log.index, userOpQuery.data?.user_logs_start_index, userOpQuery.data?.user_logs_start_index + userOpQuery.data?.user_logs_count)) {
         return true;
       }
       return false;
diff --git a/ui/pages/UserOps.pw.tsx b/ui/pages/UserOps.pw.tsx
index 4d0cb8fe1d..2a241f1d52 100644
--- a/ui/pages/UserOps.pw.tsx
+++ b/ui/pages/UserOps.pw.tsx
@@ -1,40 +1,16 @@
 import { Box } from '@chakra-ui/react';
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { userOpsData } from 'mocks/userOps/userOps';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import UserOps from './UserOps';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.userOps) as any,
-});
-
-const USER_OPS_API_URL = buildApiUrl('user_ops');
-
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(USER_OPS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(userOpsData),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <Box pt={{ base: '106px', lg: 0 }}>
-        <UserOps/>
-      </Box>
-    </TestApp>,
-  );
-
+test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
+  await mockEnvs(ENVS_MAP.userOps);
+  await mockTextAd();
+  await mockApiResponse('user_ops', userOpsData);
+  const component = await render(<Box pt={{ base: '106px', lg: 0 }}> <UserOps/> </Box>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/pages/UserOps.tsx b/ui/pages/UserOps.tsx
index 189421d712..c91eaeff26 100644
--- a/ui/pages/UserOps.tsx
+++ b/ui/pages/UserOps.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import config from 'configs/app';
 import { USER_OPS_ITEM } from 'stubs/userOps';
 import { generateListStub } from 'stubs/utils';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -19,7 +20,10 @@ const UserOps = () => {
 
   return (
     <>
-      <PageTitle title="User operations" withTextAd/>
+      <PageTitle
+        title={ config.meta.seo.enhancedDataEnabled ? `${ config.chain.name } user operations` : 'User operations' }
+        withTextAd
+      />
       <UserOpsContent query={ query }/>
     </>
   );
diff --git a/ui/pages/Validators.pw.tsx b/ui/pages/Validators.pw.tsx
deleted file mode 100644
index 4ea86e6fe4..0000000000
--- a/ui/pages/Validators.pw.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { BrowserContext } from '@playwright/test';
-import React from 'react';
-
-import * as validatorsMock from 'mocks/validators/index';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import { test as base, expect } from 'playwright/lib';
-import * as configs from 'playwright/utils/configs';
-
-import Validators from './Validators';
-
-const test = base.extend<{ context: BrowserContext }>({
-  context: contextWithEnvs(configs.featureEnvs.validators),
-});
-
-test('base view +@mobile', async({ render, mockApiResponse }) => {
-  await mockApiResponse('validators', validatorsMock.validatorsResponse, { pathParams: { chainType: 'stability' } });
-  await mockApiResponse('validators_counters', validatorsMock.validatorsCountersResponse, { pathParams: { chainType: 'stability' } });
-
-  const component = await render(<Validators/>);
-
-  await expect(component).toHaveScreenshot();
-});
diff --git a/ui/pages/Validators.tsx b/ui/pages/Validators.tsx
deleted file mode 100644
index 2756b59083..0000000000
--- a/ui/pages/Validators.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import { Box, Hide, HStack, Show } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
-import React from 'react';
-
-import { getFeaturePayload } from 'configs/app/features/types';
-import type { ValidatorsFilters, ValidatorsSorting, ValidatorsSortingField, ValidatorsSortingValue } from 'types/api/validators';
-
-import config from 'configs/app';
-// import useDebounce from 'lib/hooks/useDebounce';
-import useIsMobile from 'lib/hooks/useIsMobile';
-import { apos } from 'lib/html-entities';
-import getQueryParamString from 'lib/router/getQueryParamString';
-import { generateListStub } from 'stubs/utils';
-import { VALIDATOR } from 'stubs/validators';
-import ActionBar from 'ui/shared/ActionBar';
-import DataListDisplay from 'ui/shared/DataListDisplay';
-// import FilterInput from 'ui/shared/filters/FilterInput';
-import PageTitle from 'ui/shared/Page/PageTitle';
-import Pagination from 'ui/shared/pagination/Pagination';
-import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
-import getSortParamsFromValue from 'ui/shared/sort/getSortParamsFromValue';
-import getSortValueFromQuery from 'ui/shared/sort/getSortValueFromQuery';
-import Sort from 'ui/shared/sort/Sort';
-import { SORT_OPTIONS } from 'ui/validators/utils';
-import ValidatorsCounters from 'ui/validators/ValidatorsCounters';
-import ValidatorsFilter from 'ui/validators/ValidatorsFilter';
-import ValidatorsList from 'ui/validators/ValidatorsList';
-import ValidatorsTable from 'ui/validators/ValidatorsTable';
-
-const Validators = () => {
-  const router = useRouter();
-  // const [ searchTerm, setSearchTerm ] = React.useState(getQueryParamString(router.query.address_hash) || undefined);
-  const [ statusFilter, setStatusFilter ] = React.useState(getQueryParamString(router.query.state_filter) as ValidatorsFilters['state_filter'] || undefined);
-  const [ sort, setSort ] =
-    React.useState<ValidatorsSortingValue | undefined>(getSortValueFromQuery<ValidatorsSortingValue>(router.query, SORT_OPTIONS));
-
-  // const debouncedSearchTerm = useDebounce(searchTerm || '', 300);
-
-  const isMobile = useIsMobile();
-
-  const { isError, isPlaceholderData, data, pagination, onFilterChange, onSortingChange } = useQueryWithPages({
-    resourceName: 'validators',
-    pathParams: { chainType: getFeaturePayload(config.features.validators)?.chainType },
-    filters: {
-      // address_hash: debouncedSearchTerm,
-      state_filter: statusFilter,
-    },
-    sorting: getSortParamsFromValue<ValidatorsSortingValue, ValidatorsSortingField, ValidatorsSorting['order']>(sort),
-    options: {
-      enabled: config.features.validators.isEnabled,
-      placeholderData: generateListStub<'validators'>(
-        VALIDATOR,
-        50,
-        { next_page_params: null },
-      ),
-    },
-  });
-
-  // const handleSearchTermChange = React.useCallback((value: string) => {
-  //   onFilterChange({
-  //     address_hash: value,
-  //     state_filter: statusFilter
-  //   });
-  //   setSearchTerm(value);
-  // }, [ statusFilter, onFilterChange ]);
-
-  const handleStateFilterChange = React.useCallback((value: string | Array<string>) => {
-    if (Array.isArray(value)) {
-      return;
-    }
-
-    const state = value === 'all' ? undefined : value as ValidatorsFilters['state_filter'];
-
-    onFilterChange({
-      // address_hash: debouncedSearchTerm,
-      state_filter: state,
-    });
-    setStatusFilter(state);
-  }, [ onFilterChange ]);
-
-  const handleSortChange = React.useCallback((value?: ValidatorsSortingValue) => {
-    setSort(value);
-    onSortingChange(getSortParamsFromValue(value));
-  }, [ onSortingChange ]);
-
-  const filterMenu = <ValidatorsFilter onChange={ handleStateFilterChange } defaultValue={ statusFilter } isActive={ Boolean(statusFilter) }/>;
-
-  // const filterInput = (
-  //   <FilterInput
-  //     w={{ base: '100%', lg: '350px' }}
-  //     size="xs"
-  //     onChange={ handleSearchTermChange }
-  //     placeholder="Search by validator's address hash"
-  //     initialValue={ searchTerm }
-  //   />
-  // );
-
-  const sortButton = (
-    <Sort
-      options={ SORT_OPTIONS }
-      sort={ sort }
-      setSort={ handleSortChange }
-    />
-  );
-
-  const actionBar = (
-    <>
-      <HStack spacing={ 3 } mb={ 6 } display={{ base: 'flex', lg: 'none' }}>
-        { filterMenu }
-        { sortButton }
-        { /* { filterInput } */ }
-      </HStack>
-      { (!isMobile || pagination.isVisible) && (
-        <ActionBar mt={ -6 }>
-          <HStack spacing={ 3 } display={{ base: 'none', lg: 'flex' }}>
-            { filterMenu }
-            { /* { filterInput } */ }
-          </HStack>
-          <Pagination ml="auto" { ...pagination }/>
-        </ActionBar>
-      ) }
-    </>
-  );
-
-  const content = data?.items ? (
-    <>
-      <Show below="lg" ssr={ false }>
-        <ValidatorsList data={ data.items } isLoading={ isPlaceholderData }/>
-      </Show>
-      <Hide below="lg" ssr={ false }>
-        <ValidatorsTable data={ data.items } sort={ sort } setSorting={ handleSortChange } isLoading={ isPlaceholderData }/>
-      </Hide>
-    </>
-  ) : null;
-
-  return (
-    <Box>
-      <PageTitle title="Validators" withTextAd/>
-      <ValidatorsCounters/>
-      <DataListDisplay
-        isError={ isError }
-        items={ data?.items }
-        emptyText="There are no verified contracts."
-        filterProps={{
-          emptyFilteredText: `Couldn${ apos }t find any validator that matches your query.`,
-          hasActiveFilters: Boolean(
-            // searchTerm ||
-            statusFilter,
-          ),
-        }}
-        content={ content }
-        actionBar={ actionBar }
-      />
-    </Box>
-  );
-};
-
-export default Validators;
diff --git a/ui/pages/ValidatorsBlackfort.pw.tsx b/ui/pages/ValidatorsBlackfort.pw.tsx
new file mode 100644
index 0000000000..05df5a40a3
--- /dev/null
+++ b/ui/pages/ValidatorsBlackfort.pw.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import * as validatorsMock from 'mocks/validators/blackfort';
+import { test, expect } from 'playwright/lib';
+
+import Validators from './ValidatorsBlackfort';
+
+const chainType = 'blackfort';
+
+test('base view +@mobile', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE', chainType ],
+  ]);
+  await mockApiResponse('validators_blackfort', validatorsMock.validatorsResponse);
+  await mockApiResponse('validators_blackfort_counters', validatorsMock.validatorsCountersResponse);
+  await mockTextAd();
+
+  const component = await render(<Validators/>);
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/ValidatorsBlackfort.tsx b/ui/pages/ValidatorsBlackfort.tsx
new file mode 100644
index 0000000000..32b45aa872
--- /dev/null
+++ b/ui/pages/ValidatorsBlackfort.tsx
@@ -0,0 +1,106 @@
+import { Box, Hide, HStack, Show } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type {
+  ValidatorsBlackfortSorting,
+  ValidatorsBlackfortSortingField,
+  ValidatorsBlackfortSortingValue,
+} from 'types/api/validators';
+
+import config from 'configs/app';
+import { generateListStub } from 'stubs/utils';
+import { VALIDATOR_BLACKFORT } from 'stubs/validators';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import getSortParamsFromValue from 'ui/shared/sort/getSortParamsFromValue';
+import getSortValueFromQuery from 'ui/shared/sort/getSortValueFromQuery';
+import Sort from 'ui/shared/sort/Sort';
+import { VALIDATORS_BLACKFORT_SORT_OPTIONS } from 'ui/validatorsBlackfort/utils';
+import ValidatorsCounters from 'ui/validatorsBlackfort/ValidatorsCounters';
+import ValidatorsList from 'ui/validatorsBlackfort/ValidatorsList';
+import ValidatorsTable from 'ui/validatorsBlackfort/ValidatorsTable';
+
+const ValidatorsBlackfort = () => {
+  const router = useRouter();
+  const [ sort, setSort ] =
+    React.useState<ValidatorsBlackfortSortingValue | undefined>(
+      getSortValueFromQuery<ValidatorsBlackfortSortingValue>(router.query, VALIDATORS_BLACKFORT_SORT_OPTIONS),
+    );
+
+  const { isError, isPlaceholderData, data, pagination, onSortingChange } = useQueryWithPages({
+    resourceName: 'validators_blackfort',
+    sorting: getSortParamsFromValue<ValidatorsBlackfortSortingValue, ValidatorsBlackfortSortingField, ValidatorsBlackfortSorting['order']>(sort),
+    options: {
+      enabled: config.features.validators.isEnabled,
+      placeholderData: generateListStub<'validators_blackfort'>(
+        VALIDATOR_BLACKFORT,
+        50,
+        { next_page_params: null },
+      ),
+    },
+  });
+
+  const handleSortChange = React.useCallback((value?: ValidatorsBlackfortSortingValue) => {
+    setSort(value);
+    onSortingChange(getSortParamsFromValue(value));
+  }, [ onSortingChange ]);
+
+  const sortButton = (
+    <Sort
+      name="validators_sorting"
+      defaultValue={ sort }
+      options={ VALIDATORS_BLACKFORT_SORT_OPTIONS }
+      onChange={ handleSortChange }
+    />
+  );
+
+  const actionBar = (
+    <>
+      <HStack spacing={ 3 } mb={ 6 } display={{ base: 'flex', lg: 'none' }}>
+        { sortButton }
+      </HStack>
+      { pagination.isVisible && (
+        <ActionBar mt={ -6 }>
+          <Pagination ml="auto" { ...pagination }/>
+        </ActionBar>
+      ) }
+    </>
+  );
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        <ValidatorsList data={ data.items } isLoading={ isPlaceholderData }/>
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <ValidatorsTable
+          data={ data.items }
+          sort={ sort }
+          setSorting={ handleSortChange }
+          isLoading={ isPlaceholderData }
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+        />
+      </Hide>
+    </>
+  ) : null;
+
+  return (
+    <Box>
+      <PageTitle title="Validators" withTextAd/>
+      <ValidatorsCounters/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no validators."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </Box>
+  );
+};
+
+export default ValidatorsBlackfort;
diff --git a/ui/pages/ValidatorsStability.pw.tsx b/ui/pages/ValidatorsStability.pw.tsx
new file mode 100644
index 0000000000..fcd3467754
--- /dev/null
+++ b/ui/pages/ValidatorsStability.pw.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import * as validatorsMock from 'mocks/validators/stability';
+import { test, expect } from 'playwright/lib';
+
+import Validators from './ValidatorsStability';
+
+const chainType = 'stability';
+
+test('base view +@mobile', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE', chainType ],
+  ]);
+  await mockApiResponse('validators_stability', validatorsMock.validatorsResponse);
+  await mockApiResponse('validators_stability_counters', validatorsMock.validatorsCountersResponse);
+  await mockTextAd();
+
+  const component = await render(<Validators/>);
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/ValidatorsStability.tsx b/ui/pages/ValidatorsStability.tsx
new file mode 100644
index 0000000000..8b518b4356
--- /dev/null
+++ b/ui/pages/ValidatorsStability.tsx
@@ -0,0 +1,165 @@
+import { Box, Hide, HStack, Show } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type {
+  ValidatorsStabilityFilters,
+  ValidatorsStabilitySorting,
+  ValidatorsStabilitySortingField,
+  ValidatorsStabilitySortingValue,
+} from 'types/api/validators';
+
+import config from 'configs/app';
+// import useDebounce from 'lib/hooks/useDebounce';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import { apos } from 'lib/html-entities';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { generateListStub } from 'stubs/utils';
+import { VALIDATOR_STABILITY } from 'stubs/validators';
+import ActionBar from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+// import FilterInput from 'ui/shared/filters/FilterInput';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import getSortParamsFromValue from 'ui/shared/sort/getSortParamsFromValue';
+import getSortValueFromQuery from 'ui/shared/sort/getSortValueFromQuery';
+import Sort from 'ui/shared/sort/Sort';
+import { VALIDATORS_STABILITY_SORT_OPTIONS } from 'ui/validatorsStability/utils';
+import ValidatorsCounters from 'ui/validatorsStability/ValidatorsCounters';
+import ValidatorsFilter from 'ui/validatorsStability/ValidatorsFilter';
+import ValidatorsList from 'ui/validatorsStability/ValidatorsList';
+import ValidatorsTable from 'ui/validatorsStability/ValidatorsTable';
+
+const ValidatorsStability = () => {
+  const router = useRouter();
+  // const [ searchTerm, setSearchTerm ] = React.useState(getQueryParamString(router.query.address_hash) || undefined);
+  const [ statusFilter, setStatusFilter ] =
+    React.useState(getQueryParamString(router.query.state_filter) as ValidatorsStabilityFilters['state_filter'] || undefined);
+  const [ sort, setSort ] = React.useState<ValidatorsStabilitySortingValue | undefined>(
+    getSortValueFromQuery<ValidatorsStabilitySortingValue>(router.query, VALIDATORS_STABILITY_SORT_OPTIONS),
+  );
+
+  // const debouncedSearchTerm = useDebounce(searchTerm || '', 300);
+
+  const isMobile = useIsMobile();
+
+  const { isError, isPlaceholderData, data, pagination, onFilterChange, onSortingChange } = useQueryWithPages({
+    resourceName: 'validators_stability',
+    filters: {
+      // address_hash: debouncedSearchTerm,
+      state_filter: statusFilter,
+    },
+    sorting: getSortParamsFromValue<ValidatorsStabilitySortingValue, ValidatorsStabilitySortingField, ValidatorsStabilitySorting['order']>(sort),
+    options: {
+      enabled: config.features.validators.isEnabled,
+      placeholderData: generateListStub<'validators_stability'>(
+        VALIDATOR_STABILITY,
+        50,
+        { next_page_params: null },
+      ),
+    },
+  });
+
+  // const handleSearchTermChange = React.useCallback((value: string) => {
+  //   onFilterChange({
+  //     address_hash: value,
+  //     state_filter: statusFilter
+  //   });
+  //   setSearchTerm(value);
+  // }, [ statusFilter, onFilterChange ]);
+
+  const handleStateFilterChange = React.useCallback((value: string | Array<string>) => {
+    if (Array.isArray(value)) {
+      return;
+    }
+
+    const state = value === 'all' ? undefined : value as ValidatorsStabilityFilters['state_filter'];
+
+    onFilterChange({
+      // address_hash: debouncedSearchTerm,
+      state_filter: state,
+    });
+    setStatusFilter(state);
+  }, [ onFilterChange ]);
+
+  const handleSortChange = React.useCallback((value?: ValidatorsStabilitySortingValue) => {
+    setSort(value);
+    onSortingChange(getSortParamsFromValue(value));
+  }, [ onSortingChange ]);
+
+  const filterMenu =
+    <ValidatorsFilter onChange={ handleStateFilterChange } defaultValue={ statusFilter } hasActiveFilter={ Boolean(statusFilter) }/>;
+
+  // const filterInput = (
+  //   <FilterInput
+  //     w={{ base: '100%', lg: '350px' }}
+  //     size="xs"
+  //     onChange={ handleSearchTermChange }
+  //     placeholder="Search by validator's address hash"
+  //     initialValue={ searchTerm }
+  //   />
+  // );
+
+  const sortButton = (
+    <Sort
+      name="validators_sorting"
+      defaultValue={ sort }
+      options={ VALIDATORS_STABILITY_SORT_OPTIONS }
+      onChange={ handleSortChange }
+    />
+  );
+
+  const actionBar = (
+    <>
+      <HStack spacing={ 3 } mb={ 6 } display={{ base: 'flex', lg: 'none' }}>
+        { filterMenu }
+        { sortButton }
+        { /* { filterInput } */ }
+      </HStack>
+      { (!isMobile || pagination.isVisible) && (
+        <ActionBar mt={ -6 }>
+          <HStack spacing={ 3 } display={{ base: 'none', lg: 'flex' }}>
+            { filterMenu }
+            { /* { filterInput } */ }
+          </HStack>
+          <Pagination ml="auto" { ...pagination }/>
+        </ActionBar>
+      ) }
+    </>
+  );
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        <ValidatorsList data={ data.items } isLoading={ isPlaceholderData }/>
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <ValidatorsTable data={ data.items } sort={ sort } setSorting={ handleSortChange } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  return (
+    <Box>
+      <PageTitle title="Validators" withTextAd/>
+      <ValidatorsCounters/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no validators."
+        filterProps={{
+          emptyFilteredText: `Couldn${ apos }t find any validator that matches your query.`,
+          hasActiveFilters: Boolean(
+            // searchTerm ||
+            statusFilter,
+          ),
+        }}
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </Box>
+  );
+};
+
+export default ValidatorsStability;
diff --git a/ui/pages/VerifiedAddresses.pw.tsx b/ui/pages/VerifiedAddresses.pw.tsx
index 4b64d5e23b..6a147c6cc0 100644
--- a/ui/pages/VerifiedAddresses.pw.tsx
+++ b/ui/pages/VerifiedAddresses.pw.tsx
@@ -1,17 +1,15 @@
+import type { BrowserContext } from '@playwright/test';
 import React from 'react';
 
 import * as mocks from 'mocks/account/verifiedAddresses';
 import * as profileMock from 'mocks/user/profile';
-import authFixture from 'playwright/fixtures/auth';
+import { contextWithAuth } from 'playwright/fixtures/auth';
 import { test as base, expect } from 'playwright/lib';
 
 import VerifiedAddresses from './VerifiedAddresses';
 
-const test = base.extend({
-  context: ({ context }, use) => {
-    authFixture(context);
-    use(context);
-  },
+const test = base.extend<{ context: BrowserContext }>({
+  context: contextWithAuth,
 });
 
 test.beforeEach(async({ mockAssetResponse }) => {
diff --git a/ui/pages/VerifiedContracts.pw.tsx b/ui/pages/VerifiedContracts.pw.tsx
index ad0553eacd..7a07731b5c 100644
--- a/ui/pages/VerifiedContracts.pw.tsx
+++ b/ui/pages/VerifiedContracts.pw.tsx
@@ -1,45 +1,15 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import * as textAdMock from 'mocks/ad/textAd';
 import { verifiedContractsCountersMock } from 'mocks/contracts/counters';
 import * as verifiedContractsMock from 'mocks/contracts/index';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import VerifiedContracts from './VerifiedContracts';
 
-const VERIFIED_CONTRACTS_API_URL = buildApiUrl('verified_contracts');
-const VERIFIED_CONTRACTS_COUNTERS_API_URL = buildApiUrl('verified_contracts_counters');
-
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
-});
-
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(VERIFIED_CONTRACTS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(verifiedContractsMock.baseResponse),
-  }));
-  await page.route(VERIFIED_CONTRACTS_COUNTERS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(verifiedContractsCountersMock),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <VerifiedContracts/>
-    </TestApp>,
-  );
-
+test('base view +@mobile', async({ render, mockTextAd, mockApiResponse }) => {
+  await mockTextAd();
+  await mockApiResponse('verified_contracts', verifiedContractsMock.baseResponse);
+  await mockApiResponse('verified_contracts_counters', verifiedContractsCountersMock);
+  const component = await render(<VerifiedContracts/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/pages/VerifiedContracts.tsx b/ui/pages/VerifiedContracts.tsx
index 9003c9a181..31b16d244b 100644
--- a/ui/pages/VerifiedContracts.tsx
+++ b/ui/pages/VerifiedContracts.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import type { VerifiedContractsFilters } from 'types/api/contracts';
 import type { VerifiedContractsSorting, VerifiedContractsSortingField, VerifiedContractsSortingValue } from 'types/api/verifiedContracts';
 
+import config from 'configs/app';
 import useDebounce from 'lib/hooks/useDebounce';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { apos } from 'lib/html-entities';
@@ -76,7 +77,13 @@ const VerifiedContracts = () => {
     onSortingChange(getSortParamsFromValue(value));
   }, [ onSortingChange ]);
 
-  const typeFilter = <VerifiedContractsFilter onChange={ handleTypeChange } defaultValue={ type } isActive={ Boolean(type) }/>;
+  const typeFilter = (
+    <VerifiedContractsFilter
+      onChange={ handleTypeChange }
+      defaultValue={ type }
+      hasActiveFilter={ Boolean(type) }
+    />
+  );
 
   const filterInput = (
     <FilterInput
@@ -90,9 +97,11 @@ const VerifiedContracts = () => {
 
   const sortButton = (
     <Sort
+      name="verified_contracts_sorting"
+      defaultValue={ sort }
       options={ SORT_OPTIONS }
-      sort={ sort }
-      setSort={ handleSortChange }
+      onChange={ handleSortChange }
+      isLoading={ isPlaceholderData }
     />
   );
 
@@ -128,7 +137,10 @@ const VerifiedContracts = () => {
 
   return (
     <Box>
-      <PageTitle title="Verified contracts" withTextAd/>
+      <PageTitle
+        title={ config.meta.seo.enhancedDataEnabled ? `Verified ${ config.chain.name } contracts` : 'Verified contracts' }
+        withTextAd
+      />
       <VerifiedContractsCounters/>
       <DataListDisplay
         isError={ isError }
diff --git a/ui/pages/Watchlist.tsx b/ui/pages/Watchlist.tsx
index 7b2d79da5c..dd4ab1a071 100644
--- a/ui/pages/Watchlist.tsx
+++ b/ui/pages/Watchlist.tsx
@@ -9,7 +9,7 @@ import { getResourceKey } from 'lib/api/useApiQuery';
 import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
 import { WATCH_LIST_ITEM_WITH_TOKEN_INFO } from 'stubs/account';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
@@ -102,7 +102,7 @@ const WatchList: React.FC = () => {
             isLoading={ isPlaceholderData }
             onDeleteClick={ onDeleteClick }
             onEditClick={ onEditClick }
-            top={ pagination.isVisible ? 80 : 0 }
+            top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
           />
         </Box>
       </>
diff --git a/ui/pages/ZkEvmL2Deposits.pw.tsx b/ui/pages/ZkEvmL2Deposits.pw.tsx
new file mode 100644
index 0000000000..b1ae7c8f93
--- /dev/null
+++ b/ui/pages/ZkEvmL2Deposits.pw.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import * as depositsMock from 'mocks/zkEvm/deposits';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import ZkEvmL2Deposits from './ZkEvmL2Deposits';
+
+test('base view +@mobile', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => {
+  await mockTextAd();
+  await mockEnvs(ENVS_MAP.zkEvmRollup);
+  await mockApiResponse('zkevm_l2_deposits', depositsMock.baseResponse);
+  await mockApiResponse('zkevm_l2_deposits_count', 3971111);
+
+  const component = await render(<ZkEvmL2Deposits/>);
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/ZkEvmL2Deposits.tsx b/ui/pages/ZkEvmL2Deposits.tsx
new file mode 100644
index 0000000000..dd9d363140
--- /dev/null
+++ b/ui/pages/ZkEvmL2Deposits.tsx
@@ -0,0 +1,82 @@
+import { Hide, Show, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { rightLineArrow, nbsp } from 'lib/html-entities';
+import { generateListStub } from 'stubs/utils';
+import { ZKEVM_DEPOSITS_ITEM } from 'stubs/zkEvmL2';
+import ZkEvmL2DepositsListItem from 'ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem';
+import ZkEvmL2DepositsTable from 'ui/deposits/zkEvmL2/ZkEvmL2DepositsTable';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+
+const ZkEvmL2Deposits = () => {
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'zkevm_l2_deposits',
+    options: {
+      placeholderData: generateListStub<'zkevm_l2_deposits'>(
+        ZKEVM_DEPOSITS_ITEM,
+        50,
+        { next_page_params: { items_count: 50, index: 1 } },
+      ),
+    },
+  });
+
+  const countersQuery = useApiQuery('zkevm_l2_deposits_count', {
+    queryOptions: {
+      placeholderData: 1927029,
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        { data.items.map(((item, index) => (
+          <ZkEvmL2DepositsListItem
+            key={ String(item.index) + (isPlaceholderData ? index : '') }
+            isLoading={ isPlaceholderData }
+            item={ item }
+          />
+        ))) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <ZkEvmL2DepositsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (countersQuery.isError) {
+      return null;
+    }
+
+    return (
+      <Skeleton
+        isLoaded={ !countersQuery.isPlaceholderData }
+        display="inline-block"
+      >
+        A total of { countersQuery.data?.toLocaleString() } deposits found
+      </Skeleton>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle title={ `Deposits (L1${ nbsp }${ rightLineArrow }${ nbsp }L2)` } withTextAd/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no deposits."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default ZkEvmL2Deposits;
diff --git a/ui/pages/ZkEvmL2TxnBatch.pw.tsx b/ui/pages/ZkEvmL2TxnBatch.pw.tsx
index b2d2e49f51..9c717759b5 100644
--- a/ui/pages/ZkEvmL2TxnBatch.pw.tsx
+++ b/ui/pages/ZkEvmL2TxnBatch.pw.tsx
@@ -1,70 +1,35 @@
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import { txnBatchData } from 'mocks/zkevmL2txnBatches/zkevmL2txnBatch';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { txnBatchData } from 'mocks/zkEvm/txnBatches';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect, devices } from 'playwright/lib';
 
 import ZkEvmL2TxnBatch from './ZkEvmL2TxnBatch';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.zkEvmRollup) as any,
-});
-
+const batchNumber = '5';
 const hooksConfig = {
   router: {
-    query: { number: '5' },
+    query: { number: batchNumber },
   },
 };
 
-const BATCH_API_URL = buildApiUrl('zkevm_l2_txn_batch', { number: '5' });
+test.beforeEach(async({ mockTextAd, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.zkEvmRollup);
+  await mockTextAd();
+  await mockApiResponse('zkevm_l2_txn_batch', txnBatchData, { pathParams: { number: batchNumber } });
+});
 
-test('base view', async({ mount, page }) => {
+test('base view', async({ render }) => {
   test.slow();
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(BATCH_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(txnBatchData),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <ZkEvmL2TxnBatch/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+  const component = await render(<ZkEvmL2TxnBatch/>, { hooksConfig });
   await expect(component).toHaveScreenshot();
 });
 
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
-  test('base view', async({ mount, page }) => {
+  test('base view', async({ render }) => {
     test.slow();
-    await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-      status: 200,
-      body: '',
-    }));
-
-    await page.route(BATCH_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(txnBatchData),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <ZkEvmL2TxnBatch/>
-      </TestApp>,
-      { hooksConfig },
-    );
-
+    const component = await render(<ZkEvmL2TxnBatch/>, { hooksConfig });
     await expect(component).toHaveScreenshot();
   });
 });
diff --git a/ui/pages/ZkEvmL2TxnBatches.pw.tsx b/ui/pages/ZkEvmL2TxnBatches.pw.tsx
index a94f883bda..61a3af145d 100644
--- a/ui/pages/ZkEvmL2TxnBatches.pw.tsx
+++ b/ui/pages/ZkEvmL2TxnBatches.pw.tsx
@@ -1,43 +1,16 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import { txnBatchesData } from 'mocks/zkevmL2txnBatches/zkevmL2txnBatches';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { txnBatchesData } from 'mocks/zkEvm/txnBatches';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import ZkEvmL2TxnBatches from './ZkEvmL2TxnBatches';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.zkEvmRollup) as any,
-});
-
-const BATCHES_API_URL = buildApiUrl('zkevm_l2_txn_batches');
-const BATCHES_COUNTERS_API_URL = buildApiUrl('zkevm_l2_txn_batches_count');
-
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(BATCHES_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(txnBatchesData),
-  }));
-
-  await page.route(BATCHES_COUNTERS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: '9927',
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <ZkEvmL2TxnBatches/>
-    </TestApp>,
-  );
-
+test('base view +@mobile', async({ render, mockTextAd, mockEnvs, mockApiResponse }) => {
+  await mockEnvs(ENVS_MAP.zkEvmRollup);
+  await mockTextAd();
+  await mockApiResponse('zkevm_l2_txn_batches', txnBatchesData);
+  await mockApiResponse('zkevm_l2_txn_batches_count', 9927);
+  const component = await render(<ZkEvmL2TxnBatches/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/pages/ZkEvmL2TxnBatches.tsx b/ui/pages/ZkEvmL2TxnBatches.tsx
index 5f20907025..bbdf3f56e7 100644
--- a/ui/pages/ZkEvmL2TxnBatches.tsx
+++ b/ui/pages/ZkEvmL2TxnBatches.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import useApiQuery from 'lib/api/useApiQuery';
 import { generateListStub } from 'stubs/utils';
 import { ZKEVM_L2_TXN_BATCHES_ITEM } from 'stubs/zkEvmL2';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -45,7 +46,9 @@ const ZkEvmL2TxnBatches = () => {
           />
         ))) }
       </Show>
-      <Hide below="lg" ssr={ false }><ZkEvmTxnBatchesTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/></Hide>
+      <Hide below="lg" ssr={ false }>
+        <ZkEvmTxnBatchesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
     </>
   ) : null;
 
diff --git a/ui/pages/ZkEvmL2Withdrawals.pw.tsx b/ui/pages/ZkEvmL2Withdrawals.pw.tsx
new file mode 100644
index 0000000000..92a9fbf88a
--- /dev/null
+++ b/ui/pages/ZkEvmL2Withdrawals.pw.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import * as withdrawalsMock from 'mocks/zkEvm/withdrawals';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import ZkEvmL2Withdrawals from './ZkEvmL2Withdrawals';
+
+test('base view +@mobile', async({ render, mockApiResponse, mockEnvs, mockTextAd }) => {
+  await mockTextAd();
+  await mockEnvs(ENVS_MAP.zkEvmRollup);
+  await mockApiResponse('zkevm_l2_withdrawals', withdrawalsMock.baseResponse);
+  await mockApiResponse('zkevm_l2_withdrawals_count', 3971111);
+
+  const component = await render(<ZkEvmL2Withdrawals/>);
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/ZkEvmL2Withdrawals.tsx b/ui/pages/ZkEvmL2Withdrawals.tsx
new file mode 100644
index 0000000000..430936c335
--- /dev/null
+++ b/ui/pages/ZkEvmL2Withdrawals.tsx
@@ -0,0 +1,82 @@
+import { Hide, Show, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { rightLineArrow, nbsp } from 'lib/html-entities';
+import { generateListStub } from 'stubs/utils';
+import { ZKEVM_WITHDRAWALS_ITEM } from 'stubs/zkEvmL2';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
+import ZkEvmL2WithdrawalsListItem from 'ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem';
+import ZkEvmL2WithdrawalsTable from 'ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTable';
+
+const ZkEvmL2Withdrawals = () => {
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+    resourceName: 'zkevm_l2_withdrawals',
+    options: {
+      placeholderData: generateListStub<'zkevm_l2_withdrawals'>(
+        ZKEVM_WITHDRAWALS_ITEM,
+        50,
+        { next_page_params: { items_count: 50, index: 1 } },
+      ),
+    },
+  });
+
+  const countersQuery = useApiQuery('zkevm_l2_withdrawals_count', {
+    queryOptions: {
+      placeholderData: 1927029,
+    },
+  });
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        { data.items.map(((item, index) => (
+          <ZkEvmL2WithdrawalsListItem
+            key={ String(item.index) + (isPlaceholderData ? index : '') }
+            isLoading={ isPlaceholderData }
+            item={ item }
+          />
+        ))) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <ZkEvmL2WithdrawalsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  const text = (() => {
+    if (countersQuery.isError) {
+      return null;
+    }
+
+    return (
+      <Skeleton
+        isLoaded={ !countersQuery.isPlaceholderData }
+        display="inline-block"
+      >
+        A total of { countersQuery.data?.toLocaleString() } withdrawals found
+      </Skeleton>
+    );
+  })();
+
+  const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
+
+  return (
+    <>
+      <PageTitle title={ `Withdrawals (L2${ nbsp }${ rightLineArrow }${ nbsp }L1)` } withTextAd/>
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no withdrawals."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default ZkEvmL2Withdrawals;
diff --git a/ui/pages/ZkSyncL2TxnBatch.pw.tsx b/ui/pages/ZkSyncL2TxnBatch.pw.tsx
index 055a678cf3..b7bc910f19 100644
--- a/ui/pages/ZkSyncL2TxnBatch.pw.tsx
+++ b/ui/pages/ZkSyncL2TxnBatch.pw.tsx
@@ -1,60 +1,33 @@
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as zkSyncTxnBatchMock from 'mocks/zkSync/zkSyncTxnBatch';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect, devices } from 'playwright/lib';
 
 import ZkSyncL2TxnBatch from './ZkSyncL2TxnBatch';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.zkSyncRollup) as any,
-});
-
+const batchNumber = String(zkSyncTxnBatchMock.base.number);
 const hooksConfig = {
   router: {
-    query: { number: String(zkSyncTxnBatchMock.base.number) },
+    query: { number: batchNumber },
   },
 };
 
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(BATCH_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(zkSyncTxnBatchMock.base),
-  }));
+test.beforeEach(async({ mockTextAd, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.zkSyncRollup);
+  await mockTextAd();
+  await mockApiResponse('zksync_l2_txn_batch', zkSyncTxnBatchMock.base, { pathParams: { number: batchNumber } });
 });
 
-const BATCH_API_URL = buildApiUrl('zksync_l2_txn_batch', { number: String(zkSyncTxnBatchMock.base.number) });
-
-test('base view', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <ZkSyncL2TxnBatch/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+test('base view', async({ render }) => {
+  const component = await render(<ZkSyncL2TxnBatch/>, { hooksConfig });
   await expect(component).toHaveScreenshot();
 });
 
 test.describe('mobile', () => {
   test.use({ viewport: devices['iPhone 13 Pro'].viewport });
-  test('base view', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <ZkSyncL2TxnBatch/>
-      </TestApp>,
-      { hooksConfig },
-    );
-
+  test('base view', async({ render }) => {
+    const component = await render(<ZkSyncL2TxnBatch/>, { hooksConfig });
     await expect(component).toHaveScreenshot();
   });
 });
diff --git a/ui/pages/ZkSyncL2TxnBatch.tsx b/ui/pages/ZkSyncL2TxnBatch.tsx
index 14608aa143..de64ebd580 100644
--- a/ui/pages/ZkSyncL2TxnBatch.tsx
+++ b/ui/pages/ZkSyncL2TxnBatch.tsx
@@ -27,6 +27,8 @@ const TAB_LIST_PROPS = {
   marginTop: -5,
 };
 
+const TABS_HEIGHT = 80;
+
 const ZkSyncL2TxnBatch = () => {
   const router = useRouter();
   const appProps = useAppContext();
@@ -59,10 +61,16 @@ const ZkSyncL2TxnBatch = () => {
   throwOnAbsentParamError(number);
   throwOnResourceLoadError(batchQuery);
 
+  const hasPagination = !isMobile && batchTxsQuery.pagination.isVisible && tab === 'txs';
+
   const tabs: Array<RoutedTab> = React.useMemo(() => ([
     { id: 'index', title: 'Details', component: <ZkSyncL2TxnBatchDetails query={ batchQuery }/> },
-    { id: 'txs', title: 'Transactions', component: <TxsWithFrontendSorting query={ batchTxsQuery } showSocketInfo={ false }/> },
-  ].filter(Boolean)), [ batchQuery, batchTxsQuery ]);
+    {
+      id: 'txs',
+      title: 'Transactions',
+      component: <TxsWithFrontendSorting query={ batchTxsQuery } showSocketInfo={ false } top={ hasPagination ? TABS_HEIGHT : 0 }/>,
+    },
+  ].filter(Boolean)), [ batchQuery, batchTxsQuery, hasPagination ]);
 
   const backLink = React.useMemo(() => {
     const hasGoBackLink = appProps.referrer && appProps.referrer.endsWith('/batches');
@@ -77,8 +85,6 @@ const ZkSyncL2TxnBatch = () => {
     };
   }, [ appProps.referrer ]);
 
-  const hasPagination = !isMobile && batchTxsQuery.pagination.isVisible && tab === 'txs';
-
   return (
     <>
       <TextAd mb={ 6 }/>
diff --git a/ui/pages/ZkSyncL2TxnBatches.pw.tsx b/ui/pages/ZkSyncL2TxnBatches.pw.tsx
index 8b0bf139a0..9530e0a569 100644
--- a/ui/pages/ZkSyncL2TxnBatches.pw.tsx
+++ b/ui/pages/ZkSyncL2TxnBatches.pw.tsx
@@ -1,44 +1,18 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as zkSyncTxnBatchesMock from 'mocks/zkSync/zkSyncTxnBatches';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import ZkSyncL2TxnBatches from './ZkSyncL2TxnBatches';
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.zkSyncRollup) as any,
-});
-
-const BATCHES_API_URL = buildApiUrl('zksync_l2_txn_batches');
-const BATCHES_COUNTERS_API_URL = buildApiUrl('zksync_l2_txn_batches_count');
-
-test('base view +@mobile', async({ mount, page }) => {
+test('base view +@mobile', async({ render, mockEnvs, mockTextAd, mockApiResponse }) => {
   test.slow();
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: '',
-  }));
-
-  await page.route(BATCHES_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(zkSyncTxnBatchesMock.baseResponse),
-  }));
-
-  await page.route(BATCHES_COUNTERS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: '9927',
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <ZkSyncL2TxnBatches/>
-    </TestApp>,
-  );
+  await mockEnvs(ENVS_MAP.zkSyncRollup);
+  await mockTextAd();
+  await mockApiResponse('zksync_l2_txn_batches', zkSyncTxnBatchesMock.baseResponse);
+  await mockApiResponse('zksync_l2_txn_batches_count', 9927);
 
+  const component = await render(<ZkSyncL2TxnBatches/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/pages/ZkSyncL2TxnBatches.tsx b/ui/pages/ZkSyncL2TxnBatches.tsx
index d01bbef7de..f8a5d5c67a 100644
--- a/ui/pages/ZkSyncL2TxnBatches.tsx
+++ b/ui/pages/ZkSyncL2TxnBatches.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import useApiQuery from 'lib/api/useApiQuery';
 import { generateListStub } from 'stubs/utils';
 import { ZKSYNC_L2_TXN_BATCHES_ITEM } from 'stubs/zkSyncL2';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -45,7 +46,9 @@ const ZkSyncL2TxnBatches = () => {
           />
         ))) }
       </Show>
-      <Hide below="lg" ssr={ false }><ZkSyncTxnBatchesTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/></Hide>
+      <Hide below="lg" ssr={ false }>
+        <ZkSyncTxnBatchesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
     </>
   ) : null;
 
diff --git a/ui/pages/__screenshots__/Accounts.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Accounts.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png
index 7ebe27f5c0..fcf54e6354 100644
Binary files a/ui/pages/__screenshots__/Accounts.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Accounts.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Accounts.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Accounts.pw.tsx_default_base-view-mobile-dark-mode-1.png
index 8e494c5f56..876ae4860a 100644
Binary files a/ui/pages/__screenshots__/Accounts.pw.tsx_default_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Accounts.pw.tsx_default_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/AccountsLabelSearch.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/AccountsLabelSearch.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..77244dac74
Binary files /dev/null and b/ui/pages/__screenshots__/AccountsLabelSearch.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/AccountsLabelSearch.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/AccountsLabelSearch.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..6763055ed2
Binary files /dev/null and b/ui/pages/__screenshots__/AccountsLabelSearch.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/Address.pw.tsx_default_degradation-view-1.png b/ui/pages/__screenshots__/Address.pw.tsx_default_degradation-view-1.png
new file mode 100644
index 0000000000..1df45db0e7
Binary files /dev/null and b/ui/pages/__screenshots__/Address.pw.tsx_default_degradation-view-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2Deposits.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ArbitrumL2Deposits.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..da10f31618
Binary files /dev/null and b/ui/pages/__screenshots__/ArbitrumL2Deposits.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2Deposits.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ArbitrumL2Deposits.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..9c4201a13b
Binary files /dev/null and b/ui/pages/__screenshots__/ArbitrumL2Deposits.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_base-view-1.png
new file mode 100644
index 0000000000..c28ffdd039
Binary files /dev/null and b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_base-view-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-base-view-1.png
new file mode 100644
index 0000000000..2d9f331c62
Binary files /dev/null and b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-with-anytrust-DA-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-with-anytrust-DA-1.png
new file mode 100644
index 0000000000..dd091c54ab
Binary files /dev/null and b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-with-anytrust-DA-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_with-anytrust-DA-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_with-anytrust-DA-1.png
new file mode 100644
index 0000000000..fd9ce91cc3
Binary files /dev/null and b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_with-anytrust-DA-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatches.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatches.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..63eae70a19
Binary files /dev/null and b/ui/pages/__screenshots__/ArbitrumL2TxnBatches.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..c16e131b6c
Binary files /dev/null and b/ui/pages/__screenshots__/ArbitrumL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2Withdrawals.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ArbitrumL2Withdrawals.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..7034e5cf32
Binary files /dev/null and b/ui/pages/__screenshots__/ArbitrumL2Withdrawals.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ArbitrumL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..2f52f84b04
Binary files /dev/null and b/ui/pages/__screenshots__/ArbitrumL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-details-tab-1.png b/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-details-tab-1.png
new file mode 100644
index 0000000000..7606fbc540
Binary files /dev/null and b/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-details-tab-1.png differ
diff --git a/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-txs-tab-1.png b/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-txs-tab-1.png
new file mode 100644
index 0000000000..6db8520aab
Binary files /dev/null and b/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-txs-tab-1.png differ
diff --git a/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-withdrawals-tab-1.png b/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-withdrawals-tab-1.png
new file mode 100644
index 0000000000..eeb6af9e6a
Binary files /dev/null and b/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-withdrawals-tab-1.png differ
diff --git a/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_long-period-until-the-block-mobile-1.png b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_long-period-until-the-block-mobile-1.png
new file mode 100644
index 0000000000..a4d7251af8
Binary files /dev/null and b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_long-period-until-the-block-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_short-period-until-the-block-mobile-1.png b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_short-period-until-the-block-mobile-1.png
new file mode 100644
index 0000000000..757b57aa57
Binary files /dev/null and b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_short-period-until-the-block-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/BlockCountdown.pw.tsx_mobile_long-period-until-the-block-mobile-1.png b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_mobile_long-period-until-the-block-mobile-1.png
new file mode 100644
index 0000000000..b8162286d5
Binary files /dev/null and b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_mobile_long-period-until-the-block-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/BlockCountdown.pw.tsx_mobile_short-period-until-the-block-mobile-1.png b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_mobile_short-period-until-the-block-mobile-1.png
new file mode 100644
index 0000000000..5bbcb26de7
Binary files /dev/null and b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_mobile_short-period-until-the-block-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/BlockCountdownIndex.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/BlockCountdownIndex.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..cdb36c74ba
Binary files /dev/null and b/ui/pages/__screenshots__/BlockCountdownIndex.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/BlockCountdownIndex.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/BlockCountdownIndex.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..f9a2c7016a
Binary files /dev/null and b/ui/pages/__screenshots__/BlockCountdownIndex.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
index 949b2d523a..692b38d152 100644
Binary files a/ui/pages/__screenshots__/Blocks.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/pages/__screenshots__/Blocks.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_base-view-dark-mode-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_base-view-dark-mode-1.png
index a65d7ae74e..dbe834000d 100644
Binary files a/ui/pages/__screenshots__/Blocks.pw.tsx_default_base-view-dark-mode-1.png and b/ui/pages/__screenshots__/Blocks.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_hidden-fields-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_hidden-fields-1.png
index 23ed441207..510e3019c5 100644
Binary files a/ui/pages/__screenshots__/Blocks.pw.tsx_default_hidden-fields-1.png and b/ui/pages/__screenshots__/Blocks.pw.tsx_default_hidden-fields-1.png differ
diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-base-view-1.png
index 4a4ba6bce5..995fb75993 100644
Binary files a/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-hidden-fields-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-hidden-fields-1.png
index fb202f4ff0..f376b907d4 100644
Binary files a/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-hidden-fields-1.png and b/ui/pages/__screenshots__/Blocks.pw.tsx_default_mobile-hidden-fields-1.png differ
diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_new-item-from-socket-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_new-item-from-socket-1.png
index 4ff5de8055..d2fa2ec9c8 100644
Binary files a/ui/pages/__screenshots__/Blocks.pw.tsx_default_new-item-from-socket-1.png and b/ui/pages/__screenshots__/Blocks.pw.tsx_default_new-item-from-socket-1.png differ
diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_socket-error-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_socket-error-1.png
index 5fa494cfd1..ccd7bde953 100644
Binary files a/ui/pages/__screenshots__/Blocks.pw.tsx_default_socket-error-1.png and b/ui/pages/__screenshots__/Blocks.pw.tsx_default_socket-error-1.png differ
diff --git a/ui/pages/__screenshots__/CsvExport.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/CsvExport.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png
index a7e7280953..c2d480301c 100644
Binary files a/ui/pages/__screenshots__/CsvExport.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/CsvExport.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/CsvExport.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/CsvExport.pw.tsx_default_base-view-mobile-dark-mode-1.png
index 2003834634..2568887488 100644
Binary files a/ui/pages/__screenshots__/CsvExport.pw.tsx_default_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/CsvExport.pw.tsx_default_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/CsvExport.pw.tsx_default_token-holders-1.png b/ui/pages/__screenshots__/CsvExport.pw.tsx_default_token-holders-1.png
new file mode 100644
index 0000000000..9fd1d7a3fd
Binary files /dev/null and b/ui/pages/__screenshots__/CsvExport.pw.tsx_default_token-holders-1.png differ
diff --git a/ui/pages/__screenshots__/GasTracker.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/GasTracker.pw.tsx_default_base-view-1.png
new file mode 100644
index 0000000000..41e55e459c
Binary files /dev/null and b/ui/pages/__screenshots__/GasTracker.pw.tsx_default_base-view-1.png differ
diff --git a/ui/pages/__screenshots__/Home.pw.tsx_default_custom-hero-plate-background-default-view-1.png b/ui/pages/__screenshots__/Home.pw.tsx_default_custom-hero-plate-background-default-view-1.png
deleted file mode 100644
index d600afbd5f..0000000000
Binary files a/ui/pages/__screenshots__/Home.pw.tsx_default_custom-hero-plate-background-default-view-1.png and /dev/null differ
diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-banner-dark-mode-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-banner-dark-mode-1.png
new file mode 100644
index 0000000000..1f3138fb98
Binary files /dev/null and b/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-banner-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-featured-app-dark-mode-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-featured-app-dark-mode-1.png
new file mode 100644
index 0000000000..e10739c05a
Binary files /dev/null and b/ui/pages/__screenshots__/Marketplace.pw.tsx_dark-color-mode_with-featured-app-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-base-view-1.png
new file mode 100644
index 0000000000..a24009cbcf
Binary files /dev/null and b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-banner-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-banner-1.png
new file mode 100644
index 0000000000..8facaeda8c
Binary files /dev/null and b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-banner-1.png differ
diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-featured-app-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-featured-app-1.png
new file mode 100644
index 0000000000..105ec24bf5
Binary files /dev/null and b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_mobile-with-featured-app-1.png differ
diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-banner-dark-mode-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-banner-dark-mode-1.png
new file mode 100644
index 0000000000..9eb7a71870
Binary files /dev/null and b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-banner-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-featured-app-dark-mode-1.png b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-featured-app-dark-mode-1.png
new file mode 100644
index 0000000000..d54f84e16e
Binary files /dev/null and b/ui/pages/__screenshots__/Marketplace.pw.tsx_default_with-featured-app-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/MudWorlds.pw.tsx_default_default-view-mobile-1.png b/ui/pages/__screenshots__/MudWorlds.pw.tsx_default_default-view-mobile-1.png
new file mode 100644
index 0000000000..fbc8a9c140
Binary files /dev/null and b/ui/pages/__screenshots__/MudWorlds.pw.tsx_default_default-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/MudWorlds.pw.tsx_mobile_default-view-mobile-1.png b/ui/pages/__screenshots__/MudWorlds.pw.tsx_mobile_default-view-mobile-1.png
new file mode 100644
index 0000000000..e698756aab
Binary files /dev/null and b/ui/pages/__screenshots__/MudWorlds.pw.tsx_mobile_default-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/NameDomains.pw.tsx_default_filters-1.png b/ui/pages/__screenshots__/NameDomains.pw.tsx_default_filters-1.png
new file mode 100644
index 0000000000..d26259d718
Binary files /dev/null and b/ui/pages/__screenshots__/NameDomains.pw.tsx_default_filters-1.png differ
diff --git a/ui/pages/__screenshots__/OptimisticL2DisputeGames.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/OptimisticL2DisputeGames.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..474dec34eb
Binary files /dev/null and b/ui/pages/__screenshots__/OptimisticL2DisputeGames.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/OptimisticL2DisputeGames.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/OptimisticL2DisputeGames.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..3ade16c82a
Binary files /dev/null and b/ui/pages/__screenshots__/OptimisticL2DisputeGames.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_block-countdown-no-results-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_block-countdown-no-results-1.png
new file mode 100644
index 0000000000..1a51ad17ce
Binary files /dev/null and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_block-countdown-no-results-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_block-countdown-with-results-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_block-countdown-with-results-mobile-1.png
new file mode 100644
index 0000000000..c3c960a064
Binary files /dev/null and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_block-countdown-with-results-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-address-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-address-hash-mobile-1.png
index d88025d48d..2158de6556 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-address-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-address-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-block-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-block-hash-mobile-1.png
index 650e6f77af..d4fdc1ad42 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-block-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-block-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-domain-name-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-domain-name-mobile-1.png
new file mode 100644
index 0000000000..639e5e2ec5
Binary files /dev/null and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-domain-name-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-tx-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-tx-hash-mobile-1.png
index 77929a19f8..884708e70f 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-tx-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-tx-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_block-countdown-with-results-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_block-countdown-with-results-mobile-1.png
new file mode 100644
index 0000000000..dfaec61924
Binary files /dev/null and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_block-countdown-with-results-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-address-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-address-hash-mobile-1.png
index 4a4bcc4ec3..46092da7a2 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-address-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-address-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-block-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-block-hash-mobile-1.png
index 9e8c7114c3..9f30d9ec9a 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-block-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-block-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-domain-name-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-domain-name-mobile-1.png
new file mode 100644
index 0000000000..a182bd6bb3
Binary files /dev/null and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-domain-name-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-tx-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-tx-hash-mobile-1.png
index 129fef00aa..7241c15728 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-tx-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-tx-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-1.png b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-1.png
new file mode 100644
index 0000000000..783ae6d02b
Binary files /dev/null and b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-1.png differ
diff --git a/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-2.png b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-2.png
new file mode 100644
index 0000000000..463e57faa0
Binary files /dev/null and b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-2.png differ
diff --git a/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-3.png b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-3.png
new file mode 100644
index 0000000000..7f017f484f
Binary files /dev/null and b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-3.png differ
diff --git a/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-failed-1.png b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-failed-1.png
new file mode 100644
index 0000000000..a0072c0361
Binary files /dev/null and b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-failed-1.png differ
diff --git a/ui/pages/__screenshots__/Tokens.pw.tsx_mobile_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Tokens.pw.tsx_mobile_base-view-mobile-dark-mode-1.png
index a5d0f10c5b..6f5398b224 100644
Binary files a/ui/pages/__screenshots__/Tokens.pw.tsx_mobile_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Tokens.pw.tsx_mobile_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Tokens.pw.tsx_mobile_base-view-mobile-dark-mode-2.png b/ui/pages/__screenshots__/Tokens.pw.tsx_mobile_base-view-mobile-dark-mode-2.png
index 5dee58eb04..9c2ea5a88a 100644
Binary files a/ui/pages/__screenshots__/Tokens.pw.tsx_mobile_base-view-mobile-dark-mode-2.png and b/ui/pages/__screenshots__/Tokens.pw.tsx_mobile_base-view-mobile-dark-mode-2.png differ
diff --git a/ui/pages/__screenshots__/ValidatorsBlackfort.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ValidatorsBlackfort.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..381b041f88
Binary files /dev/null and b/ui/pages/__screenshots__/ValidatorsBlackfort.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ValidatorsBlackfort.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ValidatorsBlackfort.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..4ead093d77
Binary files /dev/null and b/ui/pages/__screenshots__/ValidatorsBlackfort.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ValidatorsStability.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ValidatorsStability.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..a130fe9a6b
Binary files /dev/null and b/ui/pages/__screenshots__/ValidatorsStability.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ValidatorsStability.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ValidatorsStability.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..4502a18cc8
Binary files /dev/null and b/ui/pages/__screenshots__/ValidatorsStability.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ZkEvmL2Deposits.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ZkEvmL2Deposits.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..9bf0362e1a
Binary files /dev/null and b/ui/pages/__screenshots__/ZkEvmL2Deposits.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ZkEvmL2Deposits.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ZkEvmL2Deposits.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..93e1c19f14
Binary files /dev/null and b/ui/pages/__screenshots__/ZkEvmL2Deposits.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ZkEvmL2Withdrawals.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ZkEvmL2Withdrawals.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..52a93b4b63
Binary files /dev/null and b/ui/pages/__screenshots__/ZkEvmL2Withdrawals.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ZkEvmL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/ZkEvmL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..4a038a458e
Binary files /dev/null and b/ui/pages/__screenshots__/ZkEvmL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/privateTags/AddressModal/AddressForm.tsx b/ui/privateTags/AddressModal/AddressForm.tsx
index 42884ce01b..0dbb61ea5d 100644
--- a/ui/privateTags/AddressModal/AddressForm.tsx
+++ b/ui/privateTags/AddressModal/AddressForm.tsx
@@ -1,7 +1,6 @@
 import {
   Box,
   Button,
-  useColorModeValue,
 } from '@chakra-ui/react';
 import { useMutation } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
@@ -42,8 +41,6 @@ const AddressForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVisibl
     },
   });
 
-  const formBackgroundColor = useColorModeValue('white', 'gray.900');
-
   const { mutate } = useMutation({
     mutationFn: (formData: Inputs) => {
       const body = {
@@ -54,7 +51,7 @@ const AddressForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVisibl
       const isEdit = data?.id;
       if (isEdit) {
         return apiFetch('private_tags_address', {
-          pathParams: { id: data.id },
+          pathParams: { id: String(data.id) },
           fetchParams: { method: 'PUT', body },
         });
       }
@@ -87,12 +84,12 @@ const AddressForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVisibl
   };
 
   const renderAddressInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'address'>}) => {
-    return <AddressInput<Inputs, 'address'> field={ field } error={ errors.address } backgroundColor={ formBackgroundColor }/>;
-  }, [ errors, formBackgroundColor ]);
+    return <AddressInput<Inputs, 'address'> field={ field } error={ errors.address } bgColor="dialog_bg"/>;
+  }, [ errors ]);
 
   const renderTagInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'tag'>}) => {
-    return <TagInput<Inputs, 'tag'> field={ field } error={ errors.tag } backgroundColor={ formBackgroundColor }/>;
-  }, [ errors, formBackgroundColor ]);
+    return <TagInput<Inputs, 'tag'> field={ field } error={ errors.tag } bgColor="dialog_bg"/>;
+  }, [ errors ]);
 
   return (
     <form noValidate onSubmit={ handleSubmit(onSubmit) }>
diff --git a/ui/privateTags/AddressTagTable/AddressTagTable.tsx b/ui/privateTags/AddressTagTable/AddressTagTable.tsx
index 2508f3e80f..0cb31aedc2 100644
--- a/ui/privateTags/AddressTagTable/AddressTagTable.tsx
+++ b/ui/privateTags/AddressTagTable/AddressTagTable.tsx
@@ -34,7 +34,7 @@ const AddressTagTable = ({ data, onDeleteClick, onEditClick, isLoading, top }: P
         { data?.map((item: AddressTag, index: number) => (
           <AddressTagTableItem
             item={ item }
-            key={ item.id + (isLoading ? index : '') }
+            key={ item.id + (isLoading ? String(index) : '') }
             onDeleteClick={ onDeleteClick }
             onEditClick={ onEditClick }
             isLoading={ isLoading }
diff --git a/ui/privateTags/DeletePrivateTagModal.tsx b/ui/privateTags/DeletePrivateTagModal.tsx
index 1211ea231c..5ac991943f 100644
--- a/ui/privateTags/DeletePrivateTagModal.tsx
+++ b/ui/privateTags/DeletePrivateTagModal.tsx
@@ -25,7 +25,7 @@ const DeletePrivateTagModal: React.FC<Props> = ({ isOpen, onClose, data, type })
   const mutationFn = useCallback(() => {
     const resourceName = type === 'address' ? 'private_tags_address' : 'private_tags_tx';
     return apiFetch(resourceName, {
-      pathParams: { id: data.id },
+      pathParams: { id: String(data.id) },
       fetchParams: { method: 'DELETE' },
     });
   }, [ type, apiFetch, data.id ]);
diff --git a/ui/privateTags/PrivateAddressTags.tsx b/ui/privateTags/PrivateAddressTags.tsx
index 12037d7c17..f66ce364b2 100644
--- a/ui/privateTags/PrivateAddressTags.tsx
+++ b/ui/privateTags/PrivateAddressTags.tsx
@@ -6,7 +6,7 @@ import type { AddressTag } from 'types/api/account';
 import { PAGE_TYPE_DICT } from 'lib/mixpanel/getPageType';
 import { PRIVATE_TAG_ADDRESS } from 'stubs/account';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -61,7 +61,7 @@ const PrivateAddressTags = () => {
         { addressTagsData?.items.map((item: AddressTag, index: number) => (
           <AddressTagListItem
             item={ item }
-            key={ item.id + (isPlaceholderData ? index : '') }
+            key={ item.id + (isPlaceholderData ? String(index) : '') }
             onDeleteClick={ onDeleteClick }
             onEditClick={ onEditClick }
             isLoading={ isPlaceholderData }
@@ -74,7 +74,7 @@ const PrivateAddressTags = () => {
           data={ addressTagsData?.items }
           onDeleteClick={ onDeleteClick }
           onEditClick={ onEditClick }
-          top={ pagination.isVisible ? 80 : 0 }
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
         />
       </Box>
     </>
diff --git a/ui/privateTags/PrivateTransactionTags.tsx b/ui/privateTags/PrivateTransactionTags.tsx
index ff0c6ee27a..499ee294a7 100644
--- a/ui/privateTags/PrivateTransactionTags.tsx
+++ b/ui/privateTags/PrivateTransactionTags.tsx
@@ -5,7 +5,7 @@ import type { TransactionTag } from 'types/api/account';
 
 import { PRIVATE_TAG_TX } from 'stubs/account';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -62,7 +62,7 @@ const PrivateTransactionTags = () => {
       <Box display={{ base: 'block', lg: 'none' }}>
         { transactionTagsData?.items.map((item, index) => (
           <TransactionTagListItem
-            key={ item.id + (isPlaceholderData ? index : '') }
+            key={ item.id + (isPlaceholderData ? String(index) : '') }
             item={ item }
             isLoading={ isPlaceholderData }
             onDeleteClick={ onDeleteClick }
@@ -76,7 +76,7 @@ const PrivateTransactionTags = () => {
           isLoading={ isPlaceholderData }
           onDeleteClick={ onDeleteClick }
           onEditClick={ onEditClick }
-          top={ pagination.isVisible ? 80 : 0 }
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
         />
       </Box>
     </>
diff --git a/ui/privateTags/TransactionModal/TransactionForm.tsx b/ui/privateTags/TransactionModal/TransactionForm.tsx
index dc3d11ac41..e2cd254155 100644
--- a/ui/privateTags/TransactionModal/TransactionForm.tsx
+++ b/ui/privateTags/TransactionModal/TransactionForm.tsx
@@ -1,7 +1,6 @@
 import {
   Box,
   Button,
-  useColorModeValue,
 } from '@chakra-ui/react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
@@ -34,7 +33,6 @@ type Inputs = {
 
 const TransactionForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVisible }) => {
   const [ pending, setPending ] = useState(false);
-  const formBackgroundColor = useColorModeValue('white', 'gray.900');
 
   const { control, handleSubmit, formState: { errors, isDirty }, setError } = useForm<Inputs>({
     mode: 'onTouched',
@@ -57,7 +55,7 @@ const TransactionForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVi
 
       if (isEdit) {
         return apiFetch('private_tags_tx', {
-          pathParams: { id: data.id },
+          pathParams: { id: String(data.id) },
           fetchParams: { method: 'PUT', body },
         });
       }
@@ -90,12 +88,12 @@ const TransactionForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVi
   };
 
   const renderTransactionInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'transaction'>}) => {
-    return <TransactionInput field={ field } error={ errors.transaction } backgroundColor={ formBackgroundColor }/>;
-  }, [ errors, formBackgroundColor ]);
+    return <TransactionInput field={ field } error={ errors.transaction } bgColor="dialog_bg"/>;
+  }, [ errors ]);
 
   const renderTagInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'tag'>}) => {
-    return <TagInput<Inputs, 'tag'> field={ field } error={ errors.tag } backgroundColor={ formBackgroundColor }/>;
-  }, [ errors, formBackgroundColor ]);
+    return <TagInput<Inputs, 'tag'> field={ field } error={ errors.tag } bgColor="dialog_bg"/>;
+  }, [ errors ]);
 
   return (
     <form noValidate onSubmit={ handleSubmit(onSubmit) }>
diff --git a/ui/privateTags/TransactionTagTable/TransactionTagTable.tsx b/ui/privateTags/TransactionTagTable/TransactionTagTable.tsx
index a32d746062..3fee3161cf 100644
--- a/ui/privateTags/TransactionTagTable/TransactionTagTable.tsx
+++ b/ui/privateTags/TransactionTagTable/TransactionTagTable.tsx
@@ -33,7 +33,7 @@ const AddressTagTable = ({ data, isLoading, onDeleteClick, onEditClick, top }: P
       <Tbody>
         { data?.map((item, index) => (
           <TransactionTagTableItem
-            key={ item.id + (isLoading ? index : '') }
+            key={ item.id + (isLoading ? String(index) : '') }
             item={ item }
             isLoading={ isLoading }
             onDeleteClick={ onDeleteClick }
diff --git a/ui/publicTags/DeletePublicTagModal.tsx b/ui/publicTags/DeletePublicTagModal.tsx
deleted file mode 100644
index a0a7a9c49c..0000000000
--- a/ui/publicTags/DeletePublicTagModal.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { Box, Text, FormControl, FormLabel, Textarea, useColorModeValue } from '@chakra-ui/react';
-import { useQueryClient } from '@tanstack/react-query';
-import React, { useCallback, useState } from 'react';
-import type { ChangeEvent } from 'react';
-
-import type { PublicTags, PublicTag } from 'types/api/account';
-
-import { resourceKey } from 'lib/api/resources';
-import useApiFetch from 'lib/api/useApiFetch';
-import DeleteModal from 'ui/shared/DeleteModal';
-
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-  data: PublicTag;
-  onDeleteSuccess: () => void;
-}
-
-const DeletePublicTagModal: React.FC<Props> = ({ isOpen, onClose, data, onDeleteSuccess }) => {
-
-  const [ reason, setReason ] = useState<string>('');
-
-  const tags = data.tags.split(';');
-
-  const queryClient = useQueryClient();
-  const apiFetch = useApiFetch();
-  const formBackgroundColor = useColorModeValue('white', 'gray.900');
-
-  const deleteApiKey = useCallback(() => {
-    const body = { remove_reason: reason };
-    return apiFetch('public_tags', {
-      pathParams: { id: String(data.id) },
-      fetchParams: { method: 'DELETE', body },
-    });
-  }, [ data.id, apiFetch, reason ]);
-
-  const onSuccess = useCallback(async() => {
-    onDeleteSuccess();
-    queryClient.setQueryData([ resourceKey('public_tags') ], (prevData: PublicTags | undefined) => {
-      return prevData?.filter((item) => item.id !== data.id);
-    });
-  }, [ queryClient, data, onDeleteSuccess ]);
-
-  const onFieldChange = useCallback((event: ChangeEvent<HTMLTextAreaElement>) => {
-    setReason(event.currentTarget.value);
-  }, []);
-
-  const renderContent = useCallback(() => {
-    let text;
-    if (tags.length === 1) {
-      text = (
-        <>
-          <Text display="inline" as="span">Public tag</Text>
-          <Text fontWeight="700" whiteSpace="pre" as="span">{ ` "${ tags[0] }" ` }</Text>
-          <Text as="span">will be removed.</Text>
-        </>
-      );
-    }
-    if (tags.length > 1) {
-      const tagsText: Array<JSX.Element | string> = [];
-      tags.forEach((tag, index) => {
-        if (index < tags.length - 2) {
-          tagsText.push(<Text fontWeight="700" whiteSpace="pre" as="span">{ ` "${ tag }"` }</Text>);
-          tagsText.push(',');
-        }
-        if (index === tags.length - 2) {
-          tagsText.push(<Text fontWeight="700" whiteSpace="pre" as="span">{ ` "${ tag }" ` }</Text>);
-          tagsText.push('and');
-        }
-        if (index === tags.length - 1) {
-          tagsText.push(<Text fontWeight="700" whiteSpace="pre" as="span">{ ` "${ tag }" ` }</Text>);
-        }
-      });
-      text = (
-        <>
-          <Text as="span">Public tags</Text>{ tagsText }<Text as="span">will be removed.</Text>
-        </>
-      );
-    }
-    return (
-      <>
-        <Box marginBottom={ 8 }>
-          { text }
-        </Box>
-        <FormControl variant="floating" id="tag-delete" backgroundColor={ formBackgroundColor }>
-          <Textarea
-            size="lg"
-            value={ reason }
-            onChange={ onFieldChange }
-          />
-          <FormLabel>Why do you want to remove tags?</FormLabel>
-        </FormControl>
-      </>
-    );
-  }, [ tags, reason, onFieldChange, formBackgroundColor ]);
-
-  return (
-    <DeleteModal
-      isOpen={ isOpen }
-      onClose={ onClose }
-      title="Request to remove a public tag"
-      renderContent={ renderContent }
-      mutationFn={ deleteApiKey }
-      onSuccess={ onSuccess }
-    />
-  );
-};
-
-export default React.memo(DeletePublicTagModal);
diff --git a/ui/publicTags/PublicTagTable/PublicTagListItem.tsx b/ui/publicTags/PublicTagTable/PublicTagListItem.tsx
deleted file mode 100644
index 8c22b9920e..0000000000
--- a/ui/publicTags/PublicTagTable/PublicTagListItem.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { VStack, Text, HStack, Skeleton } from '@chakra-ui/react';
-import React, { useCallback } from 'react';
-
-import type { PublicTag } from 'types/api/account';
-
-import Tag from 'ui/shared/chakra/Tag';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
-import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
-
-interface Props {
-  item: PublicTag;
-  isLoading?: boolean;
-  onEditClick: (data: PublicTag) => void;
-  onDeleteClick: (data: PublicTag) => void;
-}
-
-const PublicTagListItem = ({ item, isLoading, onEditClick, onDeleteClick }: Props) => {
-  const onItemEditClick = useCallback(() => {
-    return onEditClick(item);
-  }, [ item, onEditClick ]);
-
-  const onItemDeleteClick = useCallback(() => {
-    return onDeleteClick(item);
-  }, [ item, onDeleteClick ]);
-
-  return (
-    <ListItemMobile>
-      <VStack spacing={ 3 } alignItems="flex-start" maxW="100%">
-        <VStack spacing={ 4 } alignItems="unset" maxW="100%">
-          { item.addresses_with_info.map((address) => (
-            <AddressEntity
-              key={ address.hash }
-              address={ address }
-              isLoading={ isLoading }
-              fontWeight="600"
-              w="100%"
-            />
-          )) }
-        </VStack>
-        <HStack spacing={ 3 }>
-          <Text fontSize="sm" fontWeight={ 500 }>Public tags</Text>
-          <HStack spacing={ 2 } alignItems="baseline">
-            { item.tags.split(';').map((tag) => <Tag key={ tag } isLoading={ isLoading } isTruncated>{ tag }</Tag>) }
-          </HStack>
-        </HStack>
-        <HStack spacing={ 3 }>
-          <Text fontSize="sm" fontWeight={ 500 }>Status</Text>
-          <Skeleton fontSize="sm" color="text_secondary" isLoaded={ !isLoading } display="inline-block">
-            <span>Submitted</span>
-          </Skeleton>
-        </HStack>
-      </VStack>
-      <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick } isLoading={ isLoading }/>
-    </ListItemMobile>
-  );
-};
-
-export default React.memo(PublicTagListItem);
diff --git a/ui/publicTags/PublicTagTable/PublicTagTable.tsx b/ui/publicTags/PublicTagTable/PublicTagTable.tsx
deleted file mode 100644
index 3123b034d5..0000000000
--- a/ui/publicTags/PublicTagTable/PublicTagTable.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import {
-  Table,
-  Thead,
-  Tbody,
-  Tr,
-  Th,
-} from '@chakra-ui/react';
-import React from 'react';
-
-import type { PublicTags, PublicTag } from 'types/api/account';
-
-import PublicTagTableItem from './PublicTagTableItem';
-
-interface Props {
-  data?: PublicTags;
-  isLoading?: boolean;
-  onEditClick: (data: PublicTag) => void;
-  onDeleteClick: (data: PublicTag) => void;
-}
-
-const PublicTagTable = ({ data, isLoading, onEditClick, onDeleteClick }: Props) => {
-  return (
-    <Table variant="simple" minWidth="600px">
-      <Thead>
-        <Tr>
-          <Th width="50%">Smart contract / Address (0x...)</Th>
-          <Th width="25%">Public tag</Th>
-          <Th width="25%">Request status</Th>
-          <Th width="108px"></Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        { data?.map((item, index) => (
-          <PublicTagTableItem
-            key={ item.id + (isLoading ? String(index) : '') }
-            item={ item }
-            isLoading={ isLoading }
-            onDeleteClick={ onDeleteClick }
-            onEditClick={ onEditClick }
-          />
-        )) }
-      </Tbody>
-    </Table>
-  );
-};
-
-export default PublicTagTable;
diff --git a/ui/publicTags/PublicTagTable/PublicTagTableItem.tsx b/ui/publicTags/PublicTagTable/PublicTagTableItem.tsx
deleted file mode 100644
index 2c370ae029..0000000000
--- a/ui/publicTags/PublicTagTable/PublicTagTableItem.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import {
-  Tr,
-  Td,
-  VStack,
-  Box,
-  Skeleton,
-} from '@chakra-ui/react';
-import React, { useCallback } from 'react';
-
-import type { PublicTag } from 'types/api/account';
-
-import Tag from 'ui/shared/chakra/Tag';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
-
-interface Props {
-  item: PublicTag;
-  isLoading?: boolean;
-  onEditClick: (data: PublicTag) => void;
-  onDeleteClick: (data: PublicTag) => void;
-}
-
-const PublicTagTableItem = ({ item, isLoading, onEditClick, onDeleteClick }: Props) => {
-  const onItemEditClick = useCallback(() => {
-    return onEditClick(item);
-  }, [ item, onEditClick ]);
-
-  const onItemDeleteClick = useCallback(() => {
-    return onDeleteClick(item);
-  }, [ item, onDeleteClick ]);
-
-  return (
-    <Tr alignItems="top" key={ item.id }>
-      <Td>
-        <VStack spacing={ 4 } alignItems="unset">
-          { item.addresses_with_info.map((address) => (
-            <AddressEntity
-              key={ address.hash }
-              address={ address }
-              isLoading={ isLoading }
-              fontWeight="600"
-              py="2px"
-            />
-          )) }
-        </VStack>
-      </Td>
-      <Td>
-        <VStack spacing={ 2 } alignItems="baseline">
-          { item.tags.split(';').map((tag) => <Tag key={ tag } isLoading={ isLoading } isTruncated>{ tag }</Tag>) }
-        </VStack>
-      </Td>
-      <Td>
-        <Skeleton fontSize="sm" fontWeight="500" py="2px" isLoaded={ !isLoading } display="inline-block">
-          Submitted
-        </Skeleton>
-      </Td>
-      <Td>
-        <Box py="2px">
-          <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick } isLoading={ isLoading }/>
-        </Box>
-      </Td>
-    </Tr>
-  );
-};
-
-export default React.memo(PublicTagTableItem);
diff --git a/ui/publicTags/PublicTagsData.tsx b/ui/publicTags/PublicTagsData.tsx
deleted file mode 100644
index a9c42faa9c..0000000000
--- a/ui/publicTags/PublicTagsData.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { Box, Button, Skeleton, useDisclosure } from '@chakra-ui/react';
-import React, { useCallback, useState } from 'react';
-
-import type { PublicTag } from 'types/api/account';
-
-import useApiQuery from 'lib/api/useApiQuery';
-import { PUBLIC_TAG } from 'stubs/account';
-import PublicTagListItem from 'ui/publicTags/PublicTagTable/PublicTagListItem';
-import AccountPageDescription from 'ui/shared/AccountPageDescription';
-import DataFetchAlert from 'ui/shared/DataFetchAlert';
-
-import DeletePublicTagModal from './DeletePublicTagModal';
-import PublicTagTable from './PublicTagTable/PublicTagTable';
-
-type Props = {
-  changeToFormScreen: (data?: PublicTag) => void;
-  onTagDelete: () => void;
-}
-
-const PublicTagsData = ({ changeToFormScreen, onTagDelete }: Props) => {
-  const deleteModalProps = useDisclosure();
-  const [ deleteModalData, setDeleteModalData ] = useState<PublicTag>();
-
-  const { data, isPlaceholderData, isError } = useApiQuery('public_tags', {
-    queryOptions: {
-      placeholderData: Array(3).fill(PUBLIC_TAG),
-    },
-  });
-
-  const onDeleteModalClose = useCallback(() => {
-    setDeleteModalData(undefined);
-    deleteModalProps.onClose();
-  }, [ deleteModalProps ]);
-
-  const changeToForm = useCallback(() => {
-    changeToFormScreen();
-  }, [ changeToFormScreen ]);
-
-  const onItemEditClick = useCallback((item: PublicTag) => {
-    changeToFormScreen(item);
-  }, [ changeToFormScreen ]);
-
-  const onItemDeleteClick = useCallback((item: PublicTag) => {
-    setDeleteModalData(item);
-    deleteModalProps.onOpen();
-  }, [ deleteModalProps ]);
-
-  const description = (
-    <AccountPageDescription>
-      You can request a public category tag which is displayed to all Blockscout users.
-      Public tags may be added to contract or external addresses, and any associated transactions will inherit that tag.
-      Clicking a tag opens a page with related information and helps provide context and data organization.
-      Requests are sent to a moderator for review and approval. This process can take several days.
-    </AccountPageDescription>
-  );
-
-  if (isError) {
-    return <DataFetchAlert/>;
-  }
-
-  const list = (
-    <>
-      <Box display={{ base: 'block', lg: 'none' }}>
-        { data?.map((item, index) => (
-          <PublicTagListItem
-            key={ item.id + (isPlaceholderData ? String(index) : '') }
-            item={ item }
-            isLoading={ isPlaceholderData }
-            onDeleteClick={ onItemDeleteClick }
-            onEditClick={ onItemEditClick }
-          />
-        )) }
-      </Box>
-      <Box display={{ base: 'none', lg: 'block' }}>
-        <PublicTagTable data={ data } isLoading={ isPlaceholderData } onEditClick={ onItemEditClick } onDeleteClick={ onItemDeleteClick }/>
-      </Box>
-    </>
-  );
-
-  return (
-    <>
-      { description }
-      { Boolean(data?.length) && list }
-      <Skeleton mt={ 8 } isLoaded={ !isPlaceholderData } display="inline-block">
-        <Button
-          size="lg"
-          onClick={ changeToForm }
-        >
-            Request to add public tag
-        </Button>
-      </Skeleton>
-      { deleteModalData && (
-        <DeletePublicTagModal
-          { ...deleteModalProps }
-          onClose={ onDeleteModalClose }
-          data={ deleteModalData }
-          onDeleteSuccess={ onTagDelete }
-        />
-      ) }
-    </>
-  );
-};
-
-export default PublicTagsData;
diff --git a/ui/publicTags/PublicTagsForm/PublicTagFormAction.tsx b/ui/publicTags/PublicTagsForm/PublicTagFormAction.tsx
deleted file mode 100644
index 73e0f8a74a..0000000000
--- a/ui/publicTags/PublicTagsForm/PublicTagFormAction.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { RadioGroup, Radio, Stack } from '@chakra-ui/react';
-import React, { useCallback } from 'react';
-import type { ControllerRenderProps, Control } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import type { Inputs } from './PublicTagsForm';
-
-interface Props {
-  control: Control<Inputs>;
-  isDisabled?: boolean;
-}
-
-export default function PublicTagFormAction({ control, isDisabled }: Props) {
-  const renderRadioGroup = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'action'>}) => {
-    return (
-      <RadioGroup defaultValue="add" colorScheme="blue" { ...field }>
-        <Stack spacing={ 5 }>
-          <Radio value="add">
-            I want to add tags for my project
-          </Radio>
-          <Radio value="report" isDisabled={ isDisabled }>
-            I want to report an incorrect public tag
-          </Radio>
-        </Stack>
-      </RadioGroup>
-    );
-  }, [ isDisabled ]);
-
-  return (
-    <Controller
-      name="action"
-      control={ control }
-      render={ renderRadioGroup }
-    />
-  );
-}
diff --git a/ui/publicTags/PublicTagsForm/PublicTagFormAddressInput.tsx b/ui/publicTags/PublicTagsForm/PublicTagFormAddressInput.tsx
deleted file mode 100644
index c6dc9e52d9..0000000000
--- a/ui/publicTags/PublicTagsForm/PublicTagFormAddressInput.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import type { InputProps } from '@chakra-ui/react';
-import { IconButton, Flex } from '@chakra-ui/react';
-import React, { useCallback } from 'react';
-import type { ControllerRenderProps, Control, FieldError } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import { ADDRESS_REGEXP } from 'lib/validations/address';
-import AddressInput from 'ui/shared/AddressInput';
-import IconSvg from 'ui/shared/IconSvg';
-
-import type { Inputs } from './PublicTagsForm';
-
-interface Props {
-  control: Control<Inputs>;
-  index: number;
-  fieldsLength: number;
-  error?: FieldError;
-  onAddFieldClick: (e: React.SyntheticEvent) => void;
-  onRemoveFieldClick: (index: number) => (e: React.SyntheticEvent) => void;
-  size?: InputProps['size'];
-}
-
-const MAX_INPUTS_NUM = 10;
-
-export default function PublicTagFormAction({ control, index, fieldsLength, error, onAddFieldClick, onRemoveFieldClick, size }: Props) {
-  const renderAddressInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, `addresses.${ number }.address`>}) => {
-    return (
-      <AddressInput<Inputs, `addresses.${ number }.address`>
-        field={ field }
-        error={ error }
-        size={ size }
-        placeholder="Smart contract / Address (0x...)"
-      />
-    );
-  }, [ error, size ]);
-
-  return (
-    <Flex flexDir="column" rowGap={ 5 } alignItems="flex-end">
-      <Controller
-        name={ `addresses.${ index }.address` }
-        control={ control }
-        render={ renderAddressInput }
-        rules={{
-          pattern: ADDRESS_REGEXP,
-          required: index === 0,
-        }}
-      />
-      <Flex
-        columnGap={ 5 }
-        position={{ base: 'static', lg: 'absolute' }}
-        left={{ base: 'auto', lg: 'calc(100% + 20px)' }}
-        h="100%"
-        alignItems="center"
-      >
-        { fieldsLength > 1 && (
-          <IconButton
-            aria-label="delete"
-            variant="outline"
-            w="30px"
-            h="30px"
-            onClick={ onRemoveFieldClick(index) }
-            icon={ <IconSvg name="minus" w="20px" h="20px"/> }
-          />
-        ) }
-        { index === fieldsLength - 1 && fieldsLength < MAX_INPUTS_NUM && (
-          <IconButton
-            aria-label="add"
-            variant="outline"
-            w="30px"
-            h="30px"
-            onClick={ onAddFieldClick }
-            icon={ <IconSvg name="plus" w="20px" h="20px"/> }
-          />
-        ) }
-      </Flex>
-    </Flex>
-  );
-}
diff --git a/ui/publicTags/PublicTagsForm/PublicTagFormComment.tsx b/ui/publicTags/PublicTagsForm/PublicTagFormComment.tsx
deleted file mode 100644
index 011a525a76..0000000000
--- a/ui/publicTags/PublicTagsForm/PublicTagFormComment.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import type { InputProps } from '@chakra-ui/react';
-import { FormControl, Textarea } from '@chakra-ui/react';
-import React, { useCallback } from 'react';
-import type { ControllerRenderProps, Control, FieldError } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
-
-import type { Inputs } from './PublicTagsForm';
-
-const TEXT_INPUT_MAX_LENGTH = 255;
-
-interface Props {
-  control: Control<Inputs>;
-  error?: FieldError;
-  size?: InputProps['size'];
-}
-
-export default function PublicTagFormComment({ control, error, size }: Props) {
-  const renderComment = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'comment'>}) => {
-    return (
-      <FormControl variant="floating" id={ field.name } size={ size } isRequired>
-        <Textarea
-          { ...field }
-          isInvalid={ Boolean(error) }
-        />
-        <InputPlaceholder text="Specify the reason for adding tags and color preference(s)" error={ error }/>
-      </FormControl>
-    );
-  }, [ error, size ]);
-
-  return (
-    <Controller
-      name="comment"
-      control={ control }
-      render={ renderComment }
-      rules={{
-        maxLength: TEXT_INPUT_MAX_LENGTH,
-        required: true,
-      }}
-    />
-  );
-}
diff --git a/ui/publicTags/PublicTagsForm/PublicTagsForm.tsx b/ui/publicTags/PublicTagsForm/PublicTagsForm.tsx
deleted file mode 100644
index 07fb7ec2ae..0000000000
--- a/ui/publicTags/PublicTagsForm/PublicTagsForm.tsx
+++ /dev/null
@@ -1,250 +0,0 @@
-import {
-  Button,
-  Box,
-  Grid,
-  GridItem,
-  Text,
-  HStack,
-  chakra,
-} from '@chakra-ui/react';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import React, { useCallback, useState } from 'react';
-import type { FieldError, Path, SubmitHandler } from 'react-hook-form';
-import { useForm, useFieldArray } from 'react-hook-form';
-
-import type { PublicTags, PublicTag, PublicTagNew, PublicTagErrors } from 'types/api/account';
-
-import type { ResourceErrorAccount } from 'lib/api/resources';
-import { resourceKey } from 'lib/api/resources';
-import useApiFetch from 'lib/api/useApiFetch';
-import getErrorMessage from 'lib/getErrorMessage';
-import { EMAIL_REGEXP } from 'lib/validations/email';
-import FormSubmitAlert from 'ui/shared/FormSubmitAlert';
-
-import PublicTagFormAction from './PublicTagFormAction';
-import PublicTagFormAddressInput from './PublicTagFormAddressInput';
-import PublicTagFormComment from './PublicTagFormComment';
-import PublicTagsFormInput from './PublicTagsFormInput';
-
-type Props = {
-  changeToDataScreen: (success?: boolean) => void;
-  data?: Partial<PublicTag>;
-}
-
-export type Inputs = {
-  fullName?: string;
-  email?: string;
-  companyName?: string;
-  companyUrl?: string;
-  action: 'add' | 'report';
-  tags?: string;
-  addresses?: Array<{
-    name: string;
-    address: string;
-  }>;
-  comment?: string;
-}
-
-const placeholders = {
-  fullName: 'Your name',
-  email: 'Email',
-  companyName: 'Company name',
-  companyUrl: 'Company website',
-  tags: 'Public tag (max 35 characters)',
-  comment: 'Specify the reason for adding tags and color preference(s).',
-} as Record<Path<Inputs>, string>;
-
-const ADDRESS_INPUT_BUTTONS_WIDTH = 100;
-
-const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
-  const queryClient = useQueryClient();
-  const apiFetch = useApiFetch();
-  const inputSize = { base: 'md', lg: 'lg' };
-
-  const { control, handleSubmit, formState: { errors, isDirty }, setError } = useForm<Inputs>({
-    defaultValues: {
-      fullName: data?.full_name || '',
-      email: data?.email || '',
-      companyName: data?.company || '',
-      companyUrl: data?.website || '',
-      tags: data?.tags?.split(';').map((tag) => tag).join('; ') || '',
-      addresses: data?.addresses?.map((address, index: number) => ({ name: `address.${ index }.address`, address })) ||
-        [ { name: 'address.0.address', address: '' } ],
-      comment: data?.additional_comment || '',
-      action: data?.is_owner === undefined || data?.is_owner ? 'add' : 'report',
-    },
-    mode: 'onTouched',
-  });
-
-  const { fields, append, remove } = useFieldArray({
-    name: 'addresses',
-    control,
-  });
-
-  const [ isAlertVisible, setAlertVisible ] = useState(false);
-
-  const onAddFieldClick = useCallback(() => append({ address: '', name: '' }), [ append ]);
-
-  const onRemoveFieldClick = useCallback((index: number) => () => remove(index), [ remove ]);
-
-  const updatePublicTag = (formData: Inputs) => {
-    const body: PublicTagNew = {
-      full_name: formData.fullName || '',
-      email: formData.email || '',
-      company: formData.companyName || '',
-      website: formData.companyUrl || '',
-      is_owner: formData.action === 'add',
-      addresses: formData.addresses?.map(({ address }) => address) || [],
-      tags: formData.tags?.split(';').map((s) => s.trim()).join(';') || '',
-      additional_comment: formData.comment || '',
-    };
-
-    if (!data?.id) {
-      return apiFetch('public_tags', { fetchParams: { method: 'POST', body } });
-    }
-
-    return apiFetch('public_tags', {
-      pathParams: { id: String(data.id) },
-      fetchParams: { method: 'PUT', body },
-    });
-  };
-
-  const mutation = useMutation({
-    mutationFn: updatePublicTag,
-    onSuccess: async(data) => {
-      const response = data as unknown as PublicTag;
-
-      queryClient.setQueryData([ resourceKey('public_tags') ], (prevData: PublicTags | undefined) => {
-        const isExisting = prevData && prevData.some((item) => item.id === response.id);
-
-        if (isExisting) {
-          return prevData.map((item) => {
-            if (item.id === response.id) {
-              return response;
-            }
-
-            return item;
-          });
-        }
-
-        return [ response, ...(prevData || []) ];
-      });
-
-      changeToDataScreen(true);
-    },
-    onError: (error: ResourceErrorAccount<PublicTagErrors>) => {
-      const errorMap = error.payload?.errors;
-      if (errorMap?.full_name || errorMap?.email || errorMap?.tags || errorMap?.addresses || errorMap?.additional_comment) {
-        errorMap?.full_name && setError('fullName', { type: 'custom', message: getErrorMessage(errorMap, 'full_name') });
-        errorMap?.email && setError('email', { type: 'custom', message: getErrorMessage(errorMap, 'email') });
-        errorMap?.tags && setError('tags', { type: 'custom', message: getErrorMessage(errorMap, 'tags') });
-        errorMap?.addresses && setError('addresses.0.address', { type: 'custom', message: getErrorMessage(errorMap, 'addresses') });
-        errorMap?.additional_comment && setError('comment', { type: 'custom', message: getErrorMessage(errorMap, 'additional_comment') });
-      } else {
-        setAlertVisible(true);
-      }
-    },
-  });
-
-  const onSubmit: SubmitHandler<Inputs> = useCallback((data) => {
-    setAlertVisible(false);
-    mutation.mutate(data);
-  }, [ mutation ]);
-
-  return (
-    <chakra.form
-      noValidate
-      width={{ base: 'auto', lg: `calc(100% - ${ ADDRESS_INPUT_BUTTONS_WIDTH }px)` }}
-      maxWidth="844px"
-      onSubmit={ handleSubmit(onSubmit) }
-    >
-      { isAlertVisible && <Box mb={ 4 }><FormSubmitAlert/></Box> }
-      <Text size="sm" variant="secondary" paddingBottom={ 5 }>Company info</Text>
-      <Grid templateColumns={{ base: '1fr', lg: '1fr 1fr' }} rowGap={ 4 } columnGap={ 5 }>
-        <GridItem>
-          <PublicTagsFormInput<Inputs>
-            fieldName="fullName"
-            control={ control }
-            label={ placeholders.fullName }
-            error={ errors.fullName }
-            required
-            size={ inputSize }
-          />
-        </GridItem>
-        <GridItem>
-          <PublicTagsFormInput<Inputs>
-            fieldName="companyName"
-            control={ control }
-            label={ placeholders.companyName }
-            error={ errors.companyName }
-            size={ inputSize }
-          />
-        </GridItem>
-        <GridItem>
-          <PublicTagsFormInput<Inputs>
-            fieldName="email"
-            control={ control }
-            label={ placeholders.email }
-            pattern={ EMAIL_REGEXP }
-            error={ errors.email }
-            required
-            size={ inputSize }
-          />
-        </GridItem>
-        <GridItem>
-          <PublicTagsFormInput<Inputs>
-            fieldName="companyUrl"
-            control={ control }
-            label={ placeholders.companyUrl }
-            error={ errors?.companyUrl }
-            size={ inputSize }
-          />
-        </GridItem>
-      </Grid>
-      <Box marginTop={{ base: 5, lg: 8 }} marginBottom={{ base: 5, lg: 8 }}>
-        <PublicTagFormAction control={ control }/>
-      </Box>
-      <Text size="sm" variant="secondary" marginBottom={ 5 }>Public tags (2 tags maximum, please use &quot;;&quot; as a divider)</Text>
-      <Box marginBottom={ 4 }>
-        <PublicTagsFormInput<Inputs>
-          fieldName="tags"
-          control={ control }
-          label={ placeholders.tags }
-          error={ errors.tags }
-          required
-          size={ inputSize }
-        />
-      </Box>
-      { fields.map((field, index) => {
-        return (
-          <Box position="relative" key={ field.id } marginBottom={ 4 }>
-            <PublicTagFormAddressInput
-              control={ control }
-              error={ errors?.addresses?.[index]?.address as FieldError }
-              index={ index }
-              fieldsLength={ fields.length }
-              onAddFieldClick={ onAddFieldClick }
-              onRemoveFieldClick={ onRemoveFieldClick }
-              size={ inputSize }
-            />
-          </Box>
-        );
-      }) }
-      <Box marginBottom={ 8 }>
-        <PublicTagFormComment control={ control } error={ errors.comment } size={ inputSize }/>
-      </Box>
-      <HStack spacing={ 6 }>
-        <Button
-          size="lg"
-          type="submit"
-          isDisabled={ !isDirty }
-          isLoading={ mutation.isPending }
-        >
-          Send request
-        </Button>
-      </HStack>
-    </chakra.form>
-  );
-};
-
-export default React.memo(PublicTagsForm);
diff --git a/ui/publicTags/PublicTagsForm/PublicTagsFormInput.tsx b/ui/publicTags/PublicTagsForm/PublicTagsFormInput.tsx
deleted file mode 100644
index 1d0cfa8c3f..0000000000
--- a/ui/publicTags/PublicTagsForm/PublicTagsFormInput.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { InputProps } from '@chakra-ui/react';
-import { FormControl, Input } from '@chakra-ui/react';
-import React, { useCallback } from 'react';
-import type { ControllerRenderProps, FieldError, FieldValues, Path, Control } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
-
-const TEXT_INPUT_MAX_LENGTH = 255;
-
-interface Props<TInputs extends FieldValues> {
-  fieldName: Path<TInputs>;
-  label: string;
-  required?: boolean;
-  control: Control<TInputs, object>;
-  pattern?: RegExp;
-  error?: FieldError;
-  size?: InputProps['size'];
-}
-
-export default function PublicTagsFormInput<Inputs extends FieldValues>({
-  label,
-  control,
-  required,
-  fieldName,
-  pattern,
-  error,
-  size,
-}: Props<Inputs>) {
-  const renderInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, typeof fieldName>}) => {
-    return (
-      <FormControl variant="floating" id={ field.name } isRequired={ required } size={ size }>
-        <Input
-          { ...field }
-          required={ required }
-          isInvalid={ Boolean(error) }
-          maxLength={ TEXT_INPUT_MAX_LENGTH }
-        />
-        <InputPlaceholder text={ label } error={ error }/>
-      </FormControl>
-    );
-  }, [ label, required, error, size ]);
-  return (
-    <Controller
-      name={ fieldName }
-      control={ control }
-      render={ renderInput }
-      rules={{ pattern, required }}
-    />
-  );
-}
diff --git a/ui/publicTags/submit/PublicTagsSubmitForm.pw.tsx b/ui/publicTags/submit/PublicTagsSubmitForm.pw.tsx
new file mode 100644
index 0000000000..5ba3896bad
--- /dev/null
+++ b/ui/publicTags/submit/PublicTagsSubmitForm.pw.tsx
@@ -0,0 +1,37 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { publicTagTypes as configMock } from 'mocks/metadata/publicTagTypes';
+import { base as useInfoMock } from 'mocks/user/profile';
+import { expect, test } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
+
+import * as mocks from './mocks';
+import PublicTagsSubmitForm from './PublicTagsSubmitForm';
+
+const onSubmitResult = () => {};
+
+test('base view +@mobile', async({ render }) => {
+  const component = await render(
+    <Box sx={{ '.recaptcha': { w: '304px', h: '78px' } }}>
+      <PublicTagsSubmitForm config={ configMock } onSubmitResult={ onSubmitResult } userInfo={ useInfoMock }/>
+    </Box>,
+  );
+
+  await component.getByLabel(/Smart contract \/ Address/i).fill(mocks.address1);
+  await component.getByLabel(/add/i).nth(1).click();
+
+  await component.getByLabel('Tag (max 35 characters)*').fill(mocks.tag1.name);
+  await component.getByLabel(/label url/i).fill(mocks.tag1.meta.tagUrl);
+  await component.getByLabel(/background \(hex\)/i).fill(mocks.tag1.meta.bgColor);
+  await component.getByLabel(/text \(hex\)/i).fill(mocks.tag1.meta.textColor);
+
+  await component.getByLabel(/add/i).nth(3).click();
+  await component.getByLabel(/connection/i).focus();
+  await component.getByLabel(/connection/i).blur();
+
+  await expect(component).toHaveScreenshot({
+    mask: [ component.locator('.recaptcha') ],
+    maskColor: pwConfig.maskColor,
+  });
+});
diff --git a/ui/publicTags/submit/PublicTagsSubmitForm.tsx b/ui/publicTags/submit/PublicTagsSubmitForm.tsx
new file mode 100644
index 0000000000..fff9f7e449
--- /dev/null
+++ b/ui/publicTags/submit/PublicTagsSubmitForm.tsx
@@ -0,0 +1,133 @@
+import { Button, chakra, Grid, GridItem } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm, FormProvider } from 'react-hook-form';
+
+import type { FormFields, FormSubmitResult } from './types';
+import type { UserInfo } from 'types/api/account';
+import type { PublicTagTypesResponse } from 'types/api/addressMetadata';
+
+import appConfig from 'configs/app';
+import useApiFetch from 'lib/api/useApiFetch';
+import getErrorObj from 'lib/errors/getErrorObj';
+import getErrorObjPayload from 'lib/errors/getErrorObjPayload';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import FormFieldReCaptcha from 'ui/shared/forms/fields/FormFieldReCaptcha';
+import Hint from 'ui/shared/Hint';
+
+import PublicTagsSubmitFieldAddresses from './fields/PublicTagsSubmitFieldAddresses';
+import PublicTagsSubmitFieldCompanyName from './fields/PublicTagsSubmitFieldCompanyName';
+import PublicTagsSubmitFieldCompanyWebsite from './fields/PublicTagsSubmitFieldCompanyWebsite';
+import PublicTagsSubmitFieldDescription from './fields/PublicTagsSubmitFieldDescription';
+import PublicTagsSubmitFieldRequesterEmail from './fields/PublicTagsSubmitFieldRequesterEmail';
+import PublicTagsSubmitFieldRequesterName from './fields/PublicTagsSubmitFieldRequesterName';
+import PublicTagsSubmitFieldTags from './fields/PublicTagsSubmitFieldTags';
+import { convertFormDataToRequestsBody, getFormDefaultValues } from './utils';
+
+interface Props {
+  config?: PublicTagTypesResponse | undefined;
+  userInfo?: UserInfo | undefined;
+  onSubmitResult: (result: FormSubmitResult) => void;
+}
+
+const PublicTagsSubmitForm = ({ config, userInfo, onSubmitResult }: Props) => {
+  const isMobile = useIsMobile();
+  const router = useRouter();
+  const apiFetch = useApiFetch();
+
+  const formApi = useForm<FormFields>({
+    mode: 'onBlur',
+    defaultValues: getFormDefaultValues(router.query, userInfo),
+  });
+
+  React.useEffect(() => {
+    if (
+      router.query.addresses ||
+      router.query.requesterName ||
+      router.query.requesterEmail ||
+      router.query.companyName ||
+      router.query.companyWebsite
+    ) {
+      router.replace({ pathname: '/public-tags/submit' }, undefined, { shallow: true });
+    }
+  }, [ router ]);
+
+  const onFormSubmit: SubmitHandler<FormFields> = React.useCallback(async(data) => {
+    const requestsBody = convertFormDataToRequestsBody(data);
+
+    const result = await Promise.all(requestsBody.map(async(body) => {
+      return apiFetch<'public_tag_application', unknown, { message: string }>('public_tag_application', {
+        pathParams: { chainId: appConfig.chain.id },
+        fetchParams: {
+          method: 'POST',
+          body: { submission: body },
+        },
+      })
+        .then(() => ({ error: null, payload: body }))
+        .catch((error: unknown) => {
+          const errorObj = getErrorObj(error);
+          const messageFromPayload = getErrorObjPayload<{ message?: string }>(errorObj)?.message;
+          const messageFromError = errorObj && 'message' in errorObj && typeof errorObj.message === 'string' ? errorObj.message : undefined;
+          const message = messageFromPayload || messageFromError || 'Something went wrong.';
+          return { error: message, payload: body };
+        });
+    }));
+
+    onSubmitResult(result);
+  }, [ apiFetch, onSubmitResult ]);
+
+  return (
+    <FormProvider { ...formApi }>
+      <chakra.form
+        noValidate
+        onSubmit={ formApi.handleSubmit(onFormSubmit) }
+      >
+        <Grid
+          columnGap={ 3 }
+          rowGap={ 3 }
+          templateColumns={{ base: '1fr', lg: '1fr 1fr minmax(0, 200px)', xl: '1fr 1fr minmax(0, 250px)' }}
+        >
+          <GridItem colSpan={{ base: 1, lg: 3 }} as="h2" textStyle="h4">
+            Company info
+          </GridItem>
+          <PublicTagsSubmitFieldRequesterName/>
+          <PublicTagsSubmitFieldRequesterEmail/>
+          { !isMobile && <div/> }
+          <PublicTagsSubmitFieldCompanyName/>
+          <PublicTagsSubmitFieldCompanyWebsite/>
+          { !isMobile && <div/> }
+
+          <GridItem colSpan={{ base: 1, lg: 3 }} as="h2" textStyle="h4" mt={{ base: 3, lg: 5 }}>
+            Public tags/labels
+            <Hint label="Submit a public tag proposal for our moderation team to review" ml={ 1 } color="link"/>
+          </GridItem>
+          <PublicTagsSubmitFieldAddresses/>
+          <PublicTagsSubmitFieldTags tagTypes={ config?.tagTypes }/>
+          <GridItem colSpan={{ base: 1, lg: 2 }}>
+            <PublicTagsSubmitFieldDescription/>
+          </GridItem>
+
+          <GridItem colSpan={{ base: 1, lg: 3 }}>
+            <FormFieldReCaptcha/>
+          </GridItem>
+
+          <Button
+            variant="solid"
+            size="lg"
+            type="submit"
+            mt={ 3 }
+            isDisabled={ !formApi.formState.isValid }
+            isLoading={ formApi.formState.isSubmitting }
+            loadingText="Send request"
+            w="min-content"
+          >
+            Send request
+          </Button>
+        </Grid>
+      </chakra.form>
+    </FormProvider>
+  );
+};
+
+export default React.memo(PublicTagsSubmitForm);
diff --git a/ui/publicTags/submit/PublicTagsSubmitResult.pw.tsx b/ui/publicTags/submit/PublicTagsSubmitResult.pw.tsx
new file mode 100644
index 0000000000..fc853b7278
--- /dev/null
+++ b/ui/publicTags/submit/PublicTagsSubmitResult.pw.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { expect, test, devices } from 'playwright/lib';
+
+import * as mocks from './mocks';
+import PublicTagsSubmitResult from './PublicTagsSubmitResult';
+
+test('all success result view +@mobile', async({ render }) => {
+  const component = await render(<PublicTagsSubmitResult data={ mocks.allSuccessResponses }/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('result with errors view', async({ render }) => {
+  const component = await render(<PublicTagsSubmitResult data={ mocks.mixedResponses }/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('result with errors view', async({ render }) => {
+    const component = await render(<PublicTagsSubmitResult data={ mocks.mixedResponses }/>);
+    await expect(component).toHaveScreenshot();
+  });
+});
diff --git a/ui/publicTags/submit/PublicTagsSubmitResult.tsx b/ui/publicTags/submit/PublicTagsSubmitResult.tsx
new file mode 100644
index 0000000000..f1fd62eb74
--- /dev/null
+++ b/ui/publicTags/submit/PublicTagsSubmitResult.tsx
@@ -0,0 +1,81 @@
+import { Alert, Box, Button, Flex, Grid, GridItem } from '@chakra-ui/react';
+import _pickBy from 'lodash/pickBy';
+import React from 'react';
+
+import type { FormSubmitResult } from './types';
+
+import { route } from 'nextjs-routes';
+
+import makePrettyLink from 'lib/makePrettyLink';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+
+import PublicTagsSubmitResultSuccess from './result/PublicTagsSubmitResultSuccess';
+import PublicTagsSubmitResultWithErrors from './result/PublicTagsSubmitResultWithErrors';
+import { groupSubmitResult } from './utils';
+
+interface Props {
+  data: FormSubmitResult | undefined;
+}
+
+const PublicTagsSubmitResult = ({ data }: Props) => {
+  const groupedData = React.useMemo(() => groupSubmitResult(data), [ data ]);
+
+  if (!groupedData) {
+    return null;
+  }
+
+  const hasErrors = groupedData.items.some((item) => item.error !== null);
+  const companyWebsite = makePrettyLink(groupedData.companyWebsite);
+  const startOverButtonQuery = hasErrors ? _pickBy({
+    requesterName: groupedData.requesterName,
+    requesterEmail: groupedData.requesterEmail,
+    companyName: groupedData.companyName,
+    companyWebsite: groupedData.companyWebsite,
+  }, Boolean) : undefined;
+
+  return (
+    <div>
+      { !hasErrors && (
+        <Alert status="success" mb={ 6 }>
+          Success! All tags went into moderation pipeline and soon will appear in the explorer.
+        </Alert>
+      ) }
+
+      <Box as="h2" textStyle="h4">Company info</Box>
+      <Grid rowGap={ 3 } columnGap={ 6 } gridTemplateColumns="170px 1fr" mt={ 6 }>
+        <GridItem>Your name</GridItem>
+        <GridItem>{ groupedData.requesterName }</GridItem>
+        <GridItem>Email</GridItem>
+        <GridItem>{ groupedData.requesterEmail }</GridItem>
+        { groupedData.companyName && (
+          <>
+            <GridItem>Company name</GridItem>
+            <GridItem>{ groupedData.companyName }</GridItem>
+          </>
+        ) }
+        { companyWebsite && (
+          <>
+            <GridItem>Company website</GridItem>
+            <GridItem>
+              <LinkExternal href={ companyWebsite.url }>{ companyWebsite.domain }</LinkExternal>
+            </GridItem>
+          </>
+        ) }
+      </Grid>
+
+      <Box as="h2" textStyle="h4" mt={ 8 } mb={ 5 }>Public tags/labels</Box>
+      { hasErrors ? <PublicTagsSubmitResultWithErrors data={ groupedData }/> : <PublicTagsSubmitResultSuccess data={ groupedData }/> }
+
+      <Flex flexDir={{ base: 'column', lg: 'row' }} columnGap={ 6 } mt={ 8 } rowGap={ 3 }>
+        { hasErrors && (
+          <Button size="lg" variant="outline" as="a" href={ route({ pathname: '/public-tags/submit', query: startOverButtonQuery }) }>
+            Start over
+          </Button>
+        ) }
+        <Button size="lg" as="a" href={ route({ pathname: '/public-tags/submit' }) }>Add new tag</Button>
+      </Flex>
+    </div>
+  );
+};
+
+export default React.memo(PublicTagsSubmitResult);
diff --git a/ui/publicTags/submit/__screenshots__/PublicTagsSubmitForm.pw.tsx_default_base-view-mobile-1.png b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitForm.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..01efafbbb8
Binary files /dev/null and b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitForm.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/publicTags/submit/__screenshots__/PublicTagsSubmitForm.pw.tsx_mobile_base-view-mobile-1.png b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitForm.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..3f5bee9e4b
Binary files /dev/null and b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitForm.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_default_all-success-result-view-mobile-1.png b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_default_all-success-result-view-mobile-1.png
new file mode 100644
index 0000000000..e9eb140644
Binary files /dev/null and b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_default_all-success-result-view-mobile-1.png differ
diff --git a/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_default_mobile-result-with-errors-view-1.png b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_default_mobile-result-with-errors-view-1.png
new file mode 100644
index 0000000000..0ae55c94bb
Binary files /dev/null and b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_default_mobile-result-with-errors-view-1.png differ
diff --git a/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_default_result-with-errors-view-1.png b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_default_result-with-errors-view-1.png
new file mode 100644
index 0000000000..953517e125
Binary files /dev/null and b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_default_result-with-errors-view-1.png differ
diff --git a/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_mobile_all-success-result-view-mobile-1.png b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_mobile_all-success-result-view-mobile-1.png
new file mode 100644
index 0000000000..4657180819
Binary files /dev/null and b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitResult.pw.tsx_mobile_all-success-result-view-mobile-1.png differ
diff --git a/ui/publicTags/submit/fields/PublicTagsSubmitFieldAddresses.tsx b/ui/publicTags/submit/fields/PublicTagsSubmitFieldAddresses.tsx
new file mode 100644
index 0000000000..312c5e7bc1
--- /dev/null
+++ b/ui/publicTags/submit/fields/PublicTagsSubmitFieldAddresses.tsx
@@ -0,0 +1,85 @@
+import { FormControl, GridItem, IconButton, Input } from '@chakra-ui/react';
+import React from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import { ADDRESS_REGEXP } from 'lib/validations/address';
+import IconSvg from 'ui/shared/IconSvg';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+const LIMIT = 20;
+
+const PublicTagsSubmitFieldAddresses = () => {
+  const { control, formState, register } = useFormContext<FormFields>();
+  const { fields, insert, remove } = useFieldArray<FormFields, 'addresses'>({
+    name: 'addresses',
+    control,
+  });
+
+  const isDisabled = formState.isSubmitting;
+
+  const handleAddFieldClick = React.useCallback((event: React.MouseEvent) => {
+    const index = Number(event.currentTarget.getAttribute('data-index'));
+    if (!Object.is(index, NaN)) {
+      insert(index + 1, { hash: '' });
+    }
+  }, [ insert ]);
+
+  const handleRemoveFieldClick = React.useCallback((event: React.MouseEvent) => {
+    const index = Number(event.currentTarget.getAttribute('data-index'));
+    if (!Object.is(index, NaN)) {
+      remove(index);
+    }
+  }, [ remove ]);
+
+  return (
+    <>
+      { fields.map((field, index) => {
+        const error = formState.errors?.addresses?.[ index ]?.hash;
+
+        return (
+          <React.Fragment key={ field.id }>
+            <GridItem colSpan={{ base: 1, lg: 2 }}>
+              <FormControl variant="floating" isRequired size={{ base: 'md', lg: 'lg' }}>
+                <Input
+                  { ...register(`addresses.${ index }.hash`, { required: true, pattern: ADDRESS_REGEXP }) }
+                  isInvalid={ Boolean(error) }
+                  isDisabled={ formState.isSubmitting }
+                  autoComplete="off"
+                />
+                <InputPlaceholder text="Smart contract / Address (0x...)" error={ error }/>
+              </FormControl>
+            </GridItem>
+            <GridItem display="flex" alignItems="center" columnGap={ 5 } justifyContent={{ base: 'flex-end', lg: 'flex-start' }}>
+              { fields.length < LIMIT && index === fields.length - 1 && (
+                <IconButton
+                  aria-label="add"
+                  data-index={ index }
+                  variant="outline"
+                  boxSize="30px"
+                  onClick={ handleAddFieldClick }
+                  icon={ <IconSvg name="plus" boxSize={ 5 }/> }
+                  isDisabled={ isDisabled }
+                />
+              ) }
+              { fields.length > 1 && (
+                <IconButton
+                  aria-label="delete"
+                  data-index={ index }
+                  variant="outline"
+                  boxSize="30px"
+                  onClick={ handleRemoveFieldClick }
+                  icon={ <IconSvg name="minus" boxSize={ 5 }/> }
+                  isDisabled={ isDisabled }
+                />
+              ) }
+            </GridItem>
+          </React.Fragment>
+        );
+      }) }
+    </>
+  );
+};
+
+export default React.memo(PublicTagsSubmitFieldAddresses);
diff --git a/ui/publicTags/submit/fields/PublicTagsSubmitFieldCompanyName.tsx b/ui/publicTags/submit/fields/PublicTagsSubmitFieldCompanyName.tsx
new file mode 100644
index 0000000000..615a409e95
--- /dev/null
+++ b/ui/publicTags/submit/fields/PublicTagsSubmitFieldCompanyName.tsx
@@ -0,0 +1,28 @@
+import { FormControl, Input } from '@chakra-ui/react';
+import React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+const PublicTagsSubmitFieldCompanyName = () => {
+  const { control } = useFormContext<FormFields>();
+  const { field, fieldState, formState } = useController<FormFields, 'companyName'>({ control, name: 'companyName' });
+
+  const isDisabled = formState.isSubmitting;
+
+  return (
+    <FormControl variant="floating" isDisabled={ isDisabled } size={{ base: 'md', lg: 'lg' }}>
+      <Input
+        { ...field }
+        isInvalid={ Boolean(fieldState.error) }
+        isDisabled={ isDisabled }
+        autoComplete="off"
+      />
+      <InputPlaceholder text="Company name" error={ fieldState.error }/>
+    </FormControl>
+  );
+};
+
+export default React.memo(PublicTagsSubmitFieldCompanyName);
diff --git a/ui/publicTags/submit/fields/PublicTagsSubmitFieldCompanyWebsite.tsx b/ui/publicTags/submit/fields/PublicTagsSubmitFieldCompanyWebsite.tsx
new file mode 100644
index 0000000000..552ea69922
--- /dev/null
+++ b/ui/publicTags/submit/fields/PublicTagsSubmitFieldCompanyWebsite.tsx
@@ -0,0 +1,29 @@
+import { FormControl, Input } from '@chakra-ui/react';
+import React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import { validator as urlValidator } from 'lib/validations/url';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+const PublicTagsSubmitFieldCompanyWebsite = () => {
+  const { control } = useFormContext<FormFields>();
+  const { field, fieldState, formState } = useController<FormFields, 'companyWebsite'>({ control, name: 'companyWebsite', rules: { validate: urlValidator } });
+
+  const isDisabled = formState.isSubmitting;
+
+  return (
+    <FormControl variant="floating" isDisabled={ isDisabled } size={{ base: 'md', lg: 'lg' }}>
+      <Input
+        { ...field }
+        isInvalid={ Boolean(fieldState.error) }
+        isDisabled={ isDisabled }
+        autoComplete="off"
+      />
+      <InputPlaceholder text="Company website" error={ fieldState.error }/>
+    </FormControl>
+  );
+};
+
+export default React.memo(PublicTagsSubmitFieldCompanyWebsite);
diff --git a/ui/publicTags/submit/fields/PublicTagsSubmitFieldDescription.tsx b/ui/publicTags/submit/fields/PublicTagsSubmitFieldDescription.tsx
new file mode 100644
index 0000000000..6db477e57a
--- /dev/null
+++ b/ui/publicTags/submit/fields/PublicTagsSubmitFieldDescription.tsx
@@ -0,0 +1,41 @@
+import { FormControl, Textarea } from '@chakra-ui/react';
+import React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+const MAX_LENGTH = 80;
+
+const PublicTagsSubmitFieldDescription = () => {
+  const isMobile = useIsMobile();
+  const { control } = useFormContext<FormFields>();
+  const { field, fieldState, formState } = useController<FormFields, 'description'>({
+    control,
+    name: 'description',
+    rules: { maxLength: MAX_LENGTH, required: true },
+  });
+
+  const isDisabled = formState.isSubmitting;
+
+  return (
+    <FormControl variant="floating" isDisabled={ isDisabled } isRequired size={{ base: 'md', lg: 'lg' }}>
+      <Textarea
+        { ...field }
+        isInvalid={ Boolean(fieldState.error) }
+        isDisabled={ isDisabled }
+        autoComplete="off"
+        maxH="160px"
+        maxLength={ MAX_LENGTH }
+      />
+      <InputPlaceholder
+        text={ isMobile ? 'Confirm the connection between addresses and tags.' : 'Provide a comment to confirm the connection between addresses and tags.' }
+        error={ fieldState.error }
+      />
+    </FormControl>
+  );
+};
+
+export default React.memo(PublicTagsSubmitFieldDescription);
diff --git a/ui/publicTags/submit/fields/PublicTagsSubmitFieldRequesterEmail.tsx b/ui/publicTags/submit/fields/PublicTagsSubmitFieldRequesterEmail.tsx
new file mode 100644
index 0000000000..1625a40cb6
--- /dev/null
+++ b/ui/publicTags/submit/fields/PublicTagsSubmitFieldRequesterEmail.tsx
@@ -0,0 +1,34 @@
+import { FormControl, Input } from '@chakra-ui/react';
+import React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import { EMAIL_REGEXP } from 'lib/validations/email';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+const PublicTagsSubmitFieldRequesterEmail = () => {
+  const { control } = useFormContext<FormFields>();
+  const { field, fieldState, formState } = useController<FormFields, 'requesterEmail'>({
+    control,
+    name: 'requesterEmail',
+    rules: { required: true, pattern: EMAIL_REGEXP },
+  });
+
+  const isDisabled = formState.isSubmitting;
+
+  return (
+    <FormControl variant="floating" isDisabled={ isDisabled } isRequired size={{ base: 'md', lg: 'lg' }}>
+      <Input
+        { ...field }
+        required
+        isInvalid={ Boolean(fieldState.error) }
+        isDisabled={ isDisabled }
+        autoComplete="off"
+      />
+      <InputPlaceholder text="Email" error={ fieldState.error }/>
+    </FormControl>
+  );
+};
+
+export default React.memo(PublicTagsSubmitFieldRequesterEmail);
diff --git a/ui/publicTags/submit/fields/PublicTagsSubmitFieldRequesterName.tsx b/ui/publicTags/submit/fields/PublicTagsSubmitFieldRequesterName.tsx
new file mode 100644
index 0000000000..c92d55fea2
--- /dev/null
+++ b/ui/publicTags/submit/fields/PublicTagsSubmitFieldRequesterName.tsx
@@ -0,0 +1,29 @@
+import { FormControl, Input } from '@chakra-ui/react';
+import React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+const PublicTagsSubmitFieldRequesterName = () => {
+  const { control } = useFormContext<FormFields>();
+  const { field, fieldState, formState } = useController<FormFields, 'requesterName'>({ control, name: 'requesterName', rules: { required: true } });
+
+  const isDisabled = formState.isSubmitting;
+
+  return (
+    <FormControl variant="floating" isDisabled={ isDisabled } isRequired size={{ base: 'md', lg: 'lg' }}>
+      <Input
+        { ...field }
+        required
+        isInvalid={ Boolean(fieldState.error) }
+        isDisabled={ isDisabled }
+        autoComplete="off"
+      />
+      <InputPlaceholder text="Your name" error={ fieldState.error }/>
+    </FormControl>
+  );
+};
+
+export default React.memo(PublicTagsSubmitFieldRequesterName);
diff --git a/ui/publicTags/submit/fields/PublicTagsSubmitFieldTag.tsx b/ui/publicTags/submit/fields/PublicTagsSubmitFieldTag.tsx
new file mode 100644
index 0000000000..c83e0ddc82
--- /dev/null
+++ b/ui/publicTags/submit/fields/PublicTagsSubmitFieldTag.tsx
@@ -0,0 +1,164 @@
+import { chakra, Flex, FormControl, Grid, GridItem, IconButton, Input, Textarea, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+import { type FieldError, type FieldErrorsImpl, type Merge, type UseFormRegister } from 'react-hook-form';
+
+import type { FormFields, FormFieldTag } from '../types';
+import type { PublicTagType } from 'types/api/addressMetadata';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import { validator as colorValidator } from 'lib/validations/color';
+import { validator as urlValidator } from 'lib/validations/url';
+import EntityTag from 'ui/shared/EntityTags/EntityTag';
+import IconSvg from 'ui/shared/IconSvg';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+import PublicTagsSubmitFieldTagColor from './PublicTagsSubmitFieldTagColor';
+import PublicTagsSubmitFieldTagType from './PublicTagsSubmitFieldTagType';
+
+interface Props {
+  index: number;
+  field: FormFieldTag;
+  tagTypes: Array<PublicTagType> | undefined;
+  register: UseFormRegister<FormFields>;
+  errors: Merge<FieldError, FieldErrorsImpl<FormFieldTag>> | undefined;
+  isDisabled: boolean;
+  onAddClick?: (index: number) => void;
+  onRemoveClick?: (index: number) => void;
+}
+
+const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddClick, onRemoveClick, tagTypes, field }: Props) => {
+  const isMobile = useIsMobile();
+  const bgColorDefault = useColorModeValue('blackAlpha.50', 'whiteAlpha.100');
+  const bgColorError = useColorModeValue('red.50', 'red.900');
+
+  const handleAddClick = React.useCallback(() => {
+    onAddClick?.(index);
+  }, [ index, onAddClick ]);
+
+  const handleRemoveClick = React.useCallback(() => {
+    onRemoveClick?.(index);
+  }, [ index, onRemoveClick ]);
+
+  return (
+    <>
+      <GridItem colSpan={{ base: 1, lg: 2 }} p="10px" borderRadius="base" bgColor={ errors ? bgColorError : bgColorDefault }>
+        <Grid
+          rowGap={ 3 }
+          columnGap={ 3 }
+          templateColumns={{ base: '1fr', lg: 'repeat(4, 1fr)' }}
+        >
+          <GridItem colSpan={{ base: 1, lg: 2 }}>
+            <FormControl variant="floating" isRequired size={{ base: 'md', lg: 'lg' }}>
+              <Input
+                { ...register(`tags.${ index }.name`, { required: true, maxLength: 35 }) }
+                isInvalid={ Boolean(errors?.name) }
+                isDisabled={ isDisabled }
+                autoComplete="off"
+              />
+              <InputPlaceholder text="Tag (max 35 characters)" error={ errors?.name }/>
+            </FormControl>
+          </GridItem>
+          <GridItem colSpan={{ base: 1, lg: 2 }}>
+            <PublicTagsSubmitFieldTagType index={ index } tagTypes={ tagTypes } isDisabled={ isDisabled }/>
+          </GridItem>
+          <GridItem colSpan={{ base: 1, lg: 2 }}>
+            <FormControl variant="floating" size={{ base: 'md', lg: 'lg' }}>
+              <Input
+                { ...register(`tags.${ index }.url`, { validate: urlValidator }) }
+                isInvalid={ Boolean(errors?.url) }
+                isDisabled={ isDisabled }
+                autoComplete="off"
+              />
+              <InputPlaceholder text="Label URL" error={ errors?.url }/>
+            </FormControl>
+          </GridItem>
+          <PublicTagsSubmitFieldTagColor
+            fieldType="bgColor"
+            fieldName={ `tags.${ index }.bgColor` }
+            placeholder="Background (Hex)"
+            index={ index }
+            register={ register }
+            error={ errors?.bgColor }
+            isDisabled={ isDisabled }
+          />
+          <PublicTagsSubmitFieldTagColor
+            fieldType="textColor"
+            fieldName={ `tags.${ index }.textColor` }
+            placeholder="Text (Hex)"
+            index={ index }
+            register={ register }
+            error={ errors?.textColor }
+            isDisabled={ isDisabled }
+          />
+          <GridItem colSpan={{ base: 1, lg: 4 }}>
+            <FormControl variant="floating" size={{ base: 'md', lg: 'lg' }}>
+              <Textarea
+                { ...register(`tags.${ index }.tooltipDescription`, { maxLength: 80 }) }
+                isInvalid={ Boolean(errors?.tooltipDescription) }
+                isDisabled={ isDisabled }
+                autoComplete="off"
+                maxH="160px"
+              />
+              <InputPlaceholder
+                text="Label description (max 80 characters)"
+                error={ errors?.tooltipDescription }
+              />
+            </FormControl>
+          </GridItem>
+        </Grid>
+      </GridItem>
+      <GridItem py={{ lg: '10px' }}>
+        <Flex
+          alignItems="center"
+          columnGap={ 5 }
+          justifyContent={{ base: 'flex-end', lg: 'flex-start' }}
+          h={{ base: 'auto', lg: '80px' }}
+        >
+          { onAddClick && (
+            <IconButton
+              aria-label="add"
+              data-index={ index }
+              variant="outline"
+              boxSize="30px"
+              onClick={ handleAddClick }
+              icon={ <IconSvg name="plus" boxSize={ 5 }/> }
+              isDisabled={ isDisabled }
+            />
+          ) }
+          { onRemoveClick && (
+            <IconButton
+              aria-label="delete"
+              data-index={ index }
+              variant="outline"
+              boxSize="30px"
+              onClick={ handleRemoveClick }
+              icon={ <IconSvg name="minus" boxSize={ 5 }/> }
+              isDisabled={ isDisabled }
+            />
+          ) }
+        </Flex>
+        { !isMobile && (
+          <Flex flexDir="column" alignItems="flex-start" mt={ 10 } rowGap={ 2 }>
+            <EntityTag data={{
+              name: field.name || 'Tag name',
+              tagType: field.type.value,
+              meta: {
+                tagUrl: field.url,
+                bgColor: field.bgColor && colorValidator(field.bgColor) === true ? field.bgColor : undefined,
+                textColor: field.textColor && colorValidator(field.textColor) === true ? field.textColor : undefined,
+                tooltipDescription: field.tooltipDescription,
+              },
+              slug: 'new',
+              ordinal: 0,
+            }}/>
+            <chakra.span color="text_secondary" fontSize="sm">
+              { tagTypes?.find(({ type }) => type === field.type.value)?.description }
+            </chakra.span>
+          </Flex>
+        ) }
+      </GridItem>
+    </>
+  );
+};
+
+export default PublicTagsSubmitFieldTag;
diff --git a/ui/publicTags/submit/fields/PublicTagsSubmitFieldTagColor.tsx b/ui/publicTags/submit/fields/PublicTagsSubmitFieldTagColor.tsx
new file mode 100644
index 0000000000..8852832ee1
--- /dev/null
+++ b/ui/publicTags/submit/fields/PublicTagsSubmitFieldTagColor.tsx
@@ -0,0 +1,74 @@
+import { Circle, FormControl, Input, InputGroup, InputRightElement, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+import { useFormContext, type FieldError, type UseFormRegister } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import { validator as colorValidator } from 'lib/validations/color';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+type ColorFieldTypes = 'bgColor' | 'textColor';
+
+interface Props<Type extends ColorFieldTypes> {
+  fieldType: Type;
+  fieldName: `tags.${ number }.${ Type }`;
+  index: number;
+  isDisabled: boolean;
+  register: UseFormRegister<FormFields>;
+  error: FieldError | undefined;
+  placeholder: string;
+}
+
+const PublicTagsSubmitFieldTagColor = <Type extends ColorFieldTypes>({ isDisabled, error, fieldName, placeholder, fieldType }: Props<Type>) => {
+  const { register } = useFormContext<FormFields>();
+
+  const circleBgColorDefault = {
+    bgColor: useColorModeValue('gray.100', 'gray.700'),
+    textColor: useColorModeValue('blackAlpha.800', 'whiteAlpha.800'),
+  };
+  const isMobile = useIsMobile();
+  const field = register(fieldName, { validate: colorValidator, maxLength: 7 });
+  const [ value, setValue ] = React.useState('');
+
+  const handleChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const nextValue = (() => {
+      const value = event.target.value;
+      if (value) {
+        if (value.length === 1 && value[0] !== '#') {
+          return `#${ value }`;
+        }
+      }
+      return value;
+    })();
+    setValue(nextValue);
+    field.onChange(event);
+  }, [ field ]);
+
+  return (
+    <FormControl variant="floating" size={{ base: 'md', lg: 'lg' }}>
+      <InputGroup size={ isMobile ? 'md' : 'lg' }>
+        <Input
+          { ...field }
+          onChange={ handleChange }
+          value={ value }
+          isInvalid={ Boolean(error) }
+          isDisabled={ isDisabled }
+          autoComplete="off"
+          maxLength={ 7 }
+        />
+        <InputPlaceholder text={ placeholder } error={ error }/>
+        <InputRightElement w="30px" h="auto" right={ 4 } top="50%" transform="translateY(-50%)" zIndex={ 10 }>
+          <Circle
+            size="30px"
+            bgColor={ value && colorValidator(value) === true ? value : circleBgColorDefault[fieldType] }
+            borderColor="gray.300"
+            borderWidth="1px"
+          />
+        </InputRightElement>
+      </InputGroup>
+    </FormControl>
+  );
+};
+
+export default React.memo(PublicTagsSubmitFieldTagColor);
diff --git a/ui/publicTags/submit/fields/PublicTagsSubmitFieldTagType.tsx b/ui/publicTags/submit/fields/PublicTagsSubmitFieldTagType.tsx
new file mode 100644
index 0000000000..86510d20e5
--- /dev/null
+++ b/ui/publicTags/submit/fields/PublicTagsSubmitFieldTagType.tsx
@@ -0,0 +1,94 @@
+import { chakra, Flex, FormControl } from '@chakra-ui/react';
+import type { GroupBase, SelectComponentsConfig, SingleValueProps } from 'chakra-react-select';
+import { chakraComponents } from 'chakra-react-select';
+import _capitalize from 'lodash/capitalize';
+import React from 'react';
+import type { ControllerRenderProps } from 'react-hook-form';
+import { Controller, useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+import type { PublicTagType } from 'types/api/addressMetadata';
+import type { Option } from 'ui/shared/FancySelect/types';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import FancySelect from 'ui/shared/FancySelect/FancySelect';
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props {
+  index: number;
+  tagTypes: Array<PublicTagType> | undefined;
+  isDisabled: boolean;
+}
+
+const PublicTagsSubmitFieldTagType = ({ index, tagTypes, isDisabled }: Props) => {
+  const isMobile = useIsMobile();
+  const { control, watch } = useFormContext<FormFields>();
+
+  const typeOptions = React.useMemo(() => tagTypes?.map((type) => ({
+    value: type.type,
+    label: _capitalize(type.type),
+  })), [ tagTypes ]);
+
+  const fieldValue = watch(`tags.${ index }.type`).value;
+
+  const selectComponents: SelectComponentsConfig<Option, boolean, GroupBase<Option>> = React.useMemo(() => {
+    type SingleValueComponentProps = SingleValueProps<Option, boolean, GroupBase<Option>> & { children: React.ReactNode }
+    const SingleValue = ({ children, ...props }: SingleValueComponentProps) => {
+      switch (fieldValue) {
+        case 'name': {
+          return (
+            <chakraComponents.SingleValue { ...props }>
+              <Flex alignItems="center" columnGap={ 1 }>
+                <IconSvg name="publictags_slim" boxSize={ 4 } flexShrink={ 0 } color="gray.400"/>
+                { children }
+              </Flex>
+            </chakraComponents.SingleValue>
+          );
+        }
+        case 'protocol':
+        case 'generic': {
+          return (
+            <chakraComponents.SingleValue { ...props }>
+              <chakra.span color="gray.400">#</chakra.span> { children }
+            </chakraComponents.SingleValue>
+          );
+        }
+
+        default: {
+          return (<chakraComponents.SingleValue { ...props }>{ children }</chakraComponents.SingleValue>);
+        }
+      }
+    };
+
+    return { SingleValue };
+  }, [ fieldValue ]);
+
+  const renderControl = React.useCallback(({ field }: { field: ControllerRenderProps<FormFields, `tags.${ number }.type`> }) => {
+    return (
+      <FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }}>
+        <FancySelect
+          { ...field }
+          options={ typeOptions }
+          size={ isMobile ? 'md' : 'lg' }
+          placeholder="Tag type"
+          isDisabled={ isDisabled }
+          isRequired
+          isAsync={ false }
+          isSearchable={ false }
+          components={ selectComponents }
+        />
+      </FormControl>
+    );
+  }, [ isDisabled, isMobile, selectComponents, typeOptions ]);
+
+  return (
+    <Controller
+      name={ `tags.${ index }.type` }
+      control={ control }
+      render={ renderControl }
+      rules={{ required: true }}
+    />
+  );
+};
+
+export default React.memo(PublicTagsSubmitFieldTagType);
diff --git a/ui/publicTags/submit/fields/PublicTagsSubmitFieldTags.tsx b/ui/publicTags/submit/fields/PublicTagsSubmitFieldTags.tsx
new file mode 100644
index 0000000000..b7d3fad1b3
--- /dev/null
+++ b/ui/publicTags/submit/fields/PublicTagsSubmitFieldTags.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+import type { PublicTagType } from 'types/api/addressMetadata';
+
+import PublicTagsSubmitFieldTag from './PublicTagsSubmitFieldTag';
+
+const LIMIT = 5;
+
+interface Props {
+  tagTypes: Array<PublicTagType> | undefined;
+}
+
+const PublicTagsSubmitFieldTags = ({ tagTypes }: Props) => {
+  const { control, formState, register, watch } = useFormContext<FormFields>();
+  const { fields, insert, remove } = useFieldArray<FormFields, 'tags'>({
+    name: 'tags',
+    control,
+  });
+
+  const isDisabled = formState.isSubmitting;
+
+  const handleAddFieldClick = React.useCallback((index: number) => {
+    insert(index + 1, {
+      name: '',
+      type: { label: 'Name', value: 'name' },
+      url: undefined,
+      bgColor: undefined,
+      textColor: undefined,
+      tooltipDescription: undefined,
+    });
+  }, [ insert ]);
+
+  const handleRemoveFieldClick = React.useCallback((index: number) => {
+    remove(index);
+  }, [ remove ]);
+
+  return (
+    <>
+      { fields.map((field, index) => {
+        const errors = formState.errors?.tags?.[ index ];
+
+        return (
+          <PublicTagsSubmitFieldTag
+            key={ field.id }
+            field={ watch(`tags.${ index }`) }
+            index={ index }
+            tagTypes={ tagTypes }
+            register={ register }
+            errors={ errors }
+            isDisabled={ isDisabled }
+            onAddClick={ fields.length < LIMIT && index === fields.length - 1 ? handleAddFieldClick : undefined }
+            onRemoveClick={ fields.length > 1 ? handleRemoveFieldClick : undefined }
+          />
+        );
+      }) }
+    </>
+  );
+};
+
+export default React.memo(PublicTagsSubmitFieldTags);
diff --git a/ui/publicTags/submit/mocks.ts b/ui/publicTags/submit/mocks.ts
new file mode 100644
index 0000000000..61cfccba30
--- /dev/null
+++ b/ui/publicTags/submit/mocks.ts
@@ -0,0 +1,97 @@
+import type { FormSubmitResultItem } from './types';
+
+export const address1 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5851';
+export const address2 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5852';
+export const address3 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5853';
+export const address4 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5854';
+export const address5 = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5855';
+
+export const baseFields = {
+  requesterName: 'John Doe',
+  requesterEmail: 'jonh.doe@duck.me',
+  companyName: 'DuckDuckMe',
+  companyWebsite: 'https://duck.me',
+  description: 'Quack quack',
+};
+
+export const tag1 = {
+  name: 'Unicorn Uproar',
+  tagType: 'name' as const,
+  meta: {
+    tagUrl: 'https://example.com',
+    bgColor: '#ff1493',
+    textColor: '#FFFFFF',
+    tooltipDescription: undefined,
+  },
+};
+
+export const tag2 = {
+  name: 'Hello',
+  tagType: 'generic' as const,
+  meta: {
+    tooltipDescription: 'Hello, it is me... I was wondering if after all these years you would like to meet',
+  },
+};
+
+export const tag3 = {
+  name: 'duck owner 🦆',
+  tagType: 'classifier' as const,
+  meta: {
+    bgColor: '#fff300',
+  },
+};
+
+export const allSuccessResponses: Array<FormSubmitResultItem> = [
+  address1,
+  address2,
+  address3,
+  address4,
+  address5,
+]
+  .map((address) => ([ tag1, tag2, tag3 ].map((tag) => ({
+    error: null,
+    payload: {
+      ...baseFields,
+      ...tag,
+      address,
+    },
+  }))))
+  .flat();
+
+export const mixedResponses: Array<FormSubmitResultItem> = [
+  // address1
+  {
+    error: null,
+    payload: { address: address1, ...tag1 },
+  },
+  {
+    error: 'Some error',
+    payload: { address: address1, ...tag2 },
+  },
+  {
+    error: 'Some error',
+    payload: { address: address1, ...tag3 },
+  },
+  // address2
+  {
+    error: 'Some error',
+    payload: { address: address2, ...tag2 },
+  },
+  {
+    error: 'Some error',
+    payload: { address: address2, ...tag3 },
+  },
+  // address3
+  {
+    error: 'Some error',
+    payload: { address: address3, ...tag1 },
+  },
+  {
+    error: 'Another nasty error',
+    payload: { address: address3, ...tag2 },
+  },
+  {
+    error: null,
+    payload: { address: address3, ...tag3 },
+  },
+].map((item) => ({ ...item, payload: { ...item.payload, ...baseFields } }));
diff --git a/ui/publicTags/submit/result/PublicTagsSubmitResultSuccess.tsx b/ui/publicTags/submit/result/PublicTagsSubmitResultSuccess.tsx
new file mode 100644
index 0000000000..83ab5af1e7
--- /dev/null
+++ b/ui/publicTags/submit/result/PublicTagsSubmitResultSuccess.tsx
@@ -0,0 +1,53 @@
+import { Box, Flex, Grid, GridItem } from '@chakra-ui/react';
+import React from 'react';
+
+import type { FormSubmitResultGrouped } from '../types';
+
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import EntityTag from 'ui/shared/EntityTags/EntityTag';
+
+interface Props {
+  data: FormSubmitResultGrouped;
+}
+
+const PublicTagsSubmitResultSuccess = ({ data }: Props) => {
+  return (
+    <Grid gridTemplateColumns={{ base: '1fr', lg: '1fr 1fr' }} rowGap={ 3 } columnGap={ 3 }>
+      <GridItem overflow="hidden">
+        <Box fontSize="sm" color="text_secondary" fontWeight={ 500 }>Smart contract / Address (0x...)</Box>
+        <Flex flexDir="column" rowGap={ 2 } mt={ 2 }>
+          { data.items
+            .map(({ addresses }) => addresses)
+            .flat()
+            .map((hash) => (
+              <AddressEntity
+                key={ hash }
+                address={{ hash }}
+                noIcon
+              />
+            )) }
+        </Flex>
+      </GridItem>
+      <GridItem>
+        <Box fontSize="sm" color="text_secondary" fontWeight={ 500 }>Tag</Box>
+        <Flex rowGap={ 2 } columnGap={ 2 } mt={ 2 } justifyContent="flex-start" flexWrap="wrap">
+          { data.items
+            .map(({ tags }) => tags)
+            .flat()
+            .map((tag) => (
+              <EntityTag
+                key={ tag.name }
+                maxW={{ base: '100%', lg: '300px' }}
+                data={{
+                  ...tag,
+                  slug: '',
+                  ordinal: 0,
+                }}/>
+            )) }
+        </Flex>
+      </GridItem>
+    </Grid>
+  );
+};
+
+export default React.memo(PublicTagsSubmitResultSuccess);
diff --git a/ui/publicTags/submit/result/PublicTagsSubmitResultWithErrors.tsx b/ui/publicTags/submit/result/PublicTagsSubmitResultWithErrors.tsx
new file mode 100644
index 0000000000..e38492462f
--- /dev/null
+++ b/ui/publicTags/submit/result/PublicTagsSubmitResultWithErrors.tsx
@@ -0,0 +1,92 @@
+import { Box, Button, Flex, Grid, GridItem, useColorModeValue } from '@chakra-ui/react';
+import _pickBy from 'lodash/pickBy';
+import React from 'react';
+
+import type { FormSubmitResultGrouped } from '../types';
+
+import { route } from 'nextjs-routes';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import EntityTag from 'ui/shared/EntityTags/EntityTag';
+
+interface Props {
+  data: FormSubmitResultGrouped;
+}
+
+const PublicTagsSubmitResultWithErrors = ({ data }: Props) => {
+  const isMobile = useIsMobile();
+  const bgColorSuccess = useColorModeValue('green.50', 'green.800');
+  const bgColorError = useColorModeValue('red.50', 'red.800');
+
+  return (
+    <Flex flexDir="column" rowGap={ 3 }>
+      { data.items.map((item, index) => {
+
+        const startOverButtonQuery = _pickBy({
+          addresses: item.addresses,
+          requesterName: data.requesterName,
+          requesterEmail: data.requesterEmail,
+          companyName: data.companyName,
+          companyWebsite: data.companyWebsite,
+        }, Boolean);
+
+        return (
+          <Flex key={ index } flexDir={{ base: 'column', lg: 'row' }}>
+            <Box flexGrow={ 1 }>
+              <Grid
+                gridTemplateColumns={{ base: '1fr', lg: '1fr 1fr' }}
+                bgColor={ item.error ? bgColorError : bgColorSuccess }
+                borderRadius="base"
+                rowGap={ 3 }
+              >
+                <GridItem px={{ base: 4, lg: 6 }} pt={{ base: 2, lg: 4 }} pb={{ base: 0, lg: 4 }} overflow="hidden">
+                  <Box fontSize="sm" color="text_secondary" fontWeight={ 500 }>Smart contract / Address (0x...)</Box>
+                  <Flex flexDir="column" rowGap={ 2 } mt={ 2 }>
+                    { item.addresses.map((hash) => (
+                      <AddressEntity
+                        key={ hash }
+                        address={{ hash }}
+                        noIcon
+                      />
+                    )) }
+                  </Flex>
+                </GridItem>
+                <GridItem px={{ base: 4, lg: 6 }} pb={{ base: 2, lg: 4 }} pt={{ base: 0, lg: 4 }}>
+                  <Box fontSize="sm" color="text_secondary" fontWeight={ 500 }>Tag</Box>
+                  <Flex rowGap={ 2 } columnGap={ 2 } mt={ 2 } justifyContent="flex-start" flexWrap="wrap">
+                    { item.tags.map((tag) => (
+                      <EntityTag
+                        key={ tag.name }
+                        maxW={{ base: '100%', lg: '300px' }}
+                        data={{ ...tag, slug: '', ordinal: 0 }}
+                      />
+                    )) }
+                  </Flex>
+                </GridItem>
+              </Grid>
+              { item.error && <Box color="red.500" mt={ 1 } fontSize="sm">{ item.error }</Box> }
+            </Box>
+            { item.error && (
+              <Button
+                variant="outline"
+                size="sm"
+                flexShrink={ 0 }
+                mt={{ base: 1, lg: 6 }}
+                ml={{ base: 0, lg: 6 }}
+                w="min-content"
+                as="a"
+                href={ route({ pathname: '/public-tags/submit', query: startOverButtonQuery }) }
+              >
+                Start  over
+              </Button>
+            ) }
+            { !item.error && !isMobile && <Box w="95px" ml={ 6 } flexShrink={ 0 }/> }
+          </Flex>
+        );
+      }) }
+    </Flex>
+  );
+};
+
+export default React.memo(PublicTagsSubmitResultWithErrors);
diff --git a/ui/publicTags/submit/types.ts b/ui/publicTags/submit/types.ts
new file mode 100644
index 0000000000..9e97a6f523
--- /dev/null
+++ b/ui/publicTags/submit/types.ts
@@ -0,0 +1,62 @@
+import type { AddressMetadataTagType } from 'types/api/addressMetadata';
+
+export interface FormFields {
+  requesterName: string;
+  requesterEmail: string;
+  companyName: string | undefined;
+  companyWebsite: string | undefined;
+  addresses: Array<{ hash: string }>;
+  tags: Array<FormFieldTag>;
+  description: string | undefined;
+  reCaptcha: string;
+}
+
+export interface FormFieldTag {
+  name: string;
+  type: {
+    label: string;
+    value: AddressMetadataTagType;
+  };
+  url: string | undefined;
+  bgColor: string | undefined;
+  textColor: string | undefined;
+  tooltipDescription: string | undefined;
+}
+
+export interface SubmitRequestBody {
+  requesterName: string;
+  requesterEmail: string;
+  companyName?: string;
+  companyWebsite?: string;
+  address: string;
+  name: string;
+  tagType: AddressMetadataTagType;
+  description?: string;
+  meta: {
+    bgColor?: string;
+    textColor?: string;
+    tagUrl?: string;
+    tooltipDescription?: string;
+  };
+}
+
+export interface FormSubmitResultItem {
+  error: string | null;
+  payload: SubmitRequestBody;
+}
+
+export type FormSubmitResult = Array<FormSubmitResultItem>;
+
+export interface FormSubmitResultGrouped {
+  requesterName: string;
+  requesterEmail: string;
+  companyName?: string;
+  companyWebsite?: string;
+  items: Array<FormSubmitResultItemGrouped>;
+}
+
+export interface FormSubmitResultItemGrouped {
+  error: string | null;
+  addresses: Array<string>;
+  tags: Array<Pick<SubmitRequestBody, 'name' | 'tagType' | 'meta'>>;
+}
diff --git a/ui/publicTags/submit/utils.test.ts b/ui/publicTags/submit/utils.test.ts
new file mode 100644
index 0000000000..1fb474808b
--- /dev/null
+++ b/ui/publicTags/submit/utils.test.ts
@@ -0,0 +1,76 @@
+import * as mocks from './mocks';
+import { convertFormDataToRequestsBody, convertTagApiFieldsToFormFields, groupSubmitResult } from './utils';
+
+describe('function convertFormDataToRequestsBody()', () => {
+  it('should convert form data to requests body', () => {
+    const formData = {
+      ...mocks.baseFields,
+      reCaptcha: 'xxx',
+      addresses: [ { hash: mocks.address1 }, { hash: mocks.address2 } ],
+      tags: [ convertTagApiFieldsToFormFields(mocks.tag1), convertTagApiFieldsToFormFields(mocks.tag2) ],
+    };
+    const result = convertFormDataToRequestsBody(formData);
+    expect(result).toMatchObject([
+      { address: mocks.address1, name: mocks.tag1.name, tagType: mocks.tag1.tagType },
+      { address: mocks.address1, name: mocks.tag2.name, tagType: mocks.tag2.tagType },
+      { address: mocks.address2, name: mocks.tag1.name, tagType: mocks.tag1.tagType },
+      { address: mocks.address2, name: mocks.tag2.name, tagType: mocks.tag2.tagType },
+    ]);
+  });
+});
+
+describe('function groupSubmitResult()', () => {
+  it('group success result', () => {
+    const result = groupSubmitResult(mocks.allSuccessResponses);
+    expect(result).toMatchObject({
+      requesterName: mocks.baseFields.requesterName,
+      requesterEmail: mocks.baseFields.requesterEmail,
+      companyName: mocks.baseFields.companyName,
+      companyWebsite: mocks.baseFields.companyWebsite,
+      items: [
+        {
+          error: null,
+          addresses: [ mocks.address1, mocks.address2, mocks.address3, mocks.address4, mocks.address5 ],
+          tags: [ mocks.tag1, mocks.tag2, mocks.tag3 ],
+        },
+      ],
+    });
+  });
+
+  it('group result with error', () => {
+    const result = groupSubmitResult(mocks.mixedResponses);
+    expect(result).toMatchObject({
+      requesterName: mocks.baseFields.requesterName,
+      requesterEmail: mocks.baseFields.requesterEmail,
+      companyName: mocks.baseFields.companyName,
+      companyWebsite: mocks.baseFields.companyWebsite,
+      items: [
+        {
+          error: null,
+          addresses: [ mocks.address1 ],
+          tags: [ mocks.tag1 ],
+        },
+        {
+          error: null,
+          addresses: [ mocks.address3 ],
+          tags: [ mocks.tag3 ],
+        },
+        {
+          error: 'Some error',
+          addresses: [ mocks.address1, mocks.address2 ],
+          tags: [ mocks.tag2, mocks.tag3 ],
+        },
+        {
+          error: 'Some error',
+          addresses: [ mocks.address3 ],
+          tags: [ mocks.tag1 ],
+        },
+        {
+          error: 'Another nasty error',
+          addresses: [ mocks.address3 ],
+          tags: [ mocks.tag2 ],
+        },
+      ],
+    });
+  });
+});
diff --git a/ui/publicTags/submit/utils.ts b/ui/publicTags/submit/utils.ts
new file mode 100644
index 0000000000..6ee6df8c8a
--- /dev/null
+++ b/ui/publicTags/submit/utils.ts
@@ -0,0 +1,122 @@
+import _isEqual from 'lodash/isEqual';
+import _pickBy from 'lodash/pickBy';
+
+import type { FormFieldTag, FormFields, FormSubmitResult, FormSubmitResultGrouped, FormSubmitResultItemGrouped, SubmitRequestBody } from './types';
+import type { UserInfo } from 'types/api/account';
+
+import type { Route } from 'nextjs-routes';
+
+import getQueryParamString from 'lib/router/getQueryParamString';
+
+export function convertFormDataToRequestsBody(data: FormFields): Array<SubmitRequestBody> {
+  const result: Array<SubmitRequestBody> = [];
+
+  for (const address of data.addresses) {
+    for (const tag of data.tags) {
+      result.push({
+        requesterName: data.requesterName,
+        requesterEmail: data.requesterEmail,
+        companyName: data.companyName,
+        companyWebsite: data.companyWebsite,
+        address: address.hash,
+        name: tag.name,
+        tagType: tag.type.value,
+        description: data.description,
+        meta: _pickBy({
+          bgColor: tag.bgColor,
+          textColor: tag.textColor,
+          tagUrl: tag.url,
+          tooltipDescription: tag.tooltipDescription,
+        }, Boolean),
+      });
+    }
+  }
+
+  return result;
+}
+
+export function convertTagApiFieldsToFormFields(tag: Pick<SubmitRequestBody, 'name' | 'tagType' | 'meta'>): FormFieldTag {
+  return {
+    name: tag.name,
+    type: { label: tag.tagType, value: tag.tagType },
+    url: tag.meta.tagUrl,
+    bgColor: tag.meta.bgColor,
+    textColor: tag.meta.textColor,
+    tooltipDescription: tag.meta.tooltipDescription,
+  };
+}
+
+export function groupSubmitResult(data: FormSubmitResult | undefined): FormSubmitResultGrouped | undefined {
+  if (!data) {
+    return;
+  }
+
+  const _items: Array<FormSubmitResultItemGrouped> = [];
+
+  // group by error and address
+  for (const item of data) {
+    const existingItem = _items.find(({ error, addresses }) => error === item.error && addresses.length === 1 && addresses[0] === item.payload.address);
+    if (existingItem) {
+      existingItem.tags.push({ name: item.payload.name, tagType: item.payload.tagType, meta: item.payload.meta });
+      continue;
+    }
+
+    _items.push({
+      error: item.error,
+      addresses: [ item.payload.address ],
+      tags: [ { name: item.payload.name, tagType: item.payload.tagType, meta: item.payload.meta } ],
+    });
+  }
+
+  const items: Array<FormSubmitResultItemGrouped> = [];
+
+  // merge items with the same error and tags
+  for (const item of _items) {
+    const existingItem = items.find(({ error, tags }) => error === item.error && _isEqual(tags, item.tags));
+    if (existingItem) {
+      existingItem.addresses.push(...item.addresses);
+      continue;
+    }
+
+    items.push(item);
+  }
+
+  return {
+    requesterName: data[0].payload.requesterName,
+    requesterEmail: data[0].payload.requesterEmail,
+    companyName: data[0].payload.companyName,
+    companyWebsite: data[0].payload.companyWebsite,
+    items: items.sort((a, b) => {
+      if (a.error && !b.error) {
+        return 1;
+      }
+      if (!a.error && b.error) {
+        return -1;
+      }
+      return 0;
+    }),
+  };
+}
+
+export function getFormDefaultValues(query: Route['query'], userInfo: UserInfo | undefined) {
+  return {
+    addresses: getAddressesFromQuery(query),
+    requesterName: getQueryParamString(query?.requesterName) || userInfo?.nickname || userInfo?.name || undefined,
+    requesterEmail: getQueryParamString(query?.requesterEmail) || userInfo?.email || undefined,
+    companyName: getQueryParamString(query?.companyName),
+    companyWebsite: getQueryParamString(query?.companyWebsite),
+    tags: [ { name: '', type: { label: 'Name', value: 'name' as const } } ],
+  };
+}
+
+function getAddressesFromQuery(query: Route['query']) {
+  if (!query?.addresses) {
+    return [ { hash: '' } ];
+  }
+
+  if (Array.isArray(query.addresses)) {
+    return query.addresses.map((hash) => ({ hash }));
+  }
+
+  return [ { hash: query.addresses } ];
+}
diff --git a/ui/searchResults/SearchResultListItem.tsx b/ui/searchResults/SearchResultListItem.tsx
index 28b1dc0eac..06376ce16c 100644
--- a/ui/searchResults/SearchResultListItem.tsx
+++ b/ui/searchResults/SearchResultListItem.tsx
@@ -2,7 +2,7 @@ import { chakra, Flex, Grid, Image, Box, Text, Skeleton, useColorMode, Tag } fro
 import React from 'react';
 import xss from 'xss';
 
-import type { SearchResultItem } from 'types/api/search';
+import type { SearchResultItem } from 'types/client/search';
 
 import { route } from 'nextjs-routes';
 
@@ -11,16 +11,18 @@ import highlightText from 'lib/highlightText';
 import * as mixpanel from 'lib/mixpanel/index';
 import { saveToRecentKeywords } from 'lib/recentSearchKeywords';
 import { ADDRESS_REGEXP } from 'lib/validations/address';
+import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import * as BlobEntity from 'ui/shared/entities/blob/BlobEntity';
 import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import * as EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import * as TxEntity from 'ui/shared/entities/tx/TxEntity';
 import * as UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkExternal from 'ui/shared/LinkExternal';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import type { SearchResultAppItem } from 'ui/shared/search/utils';
 import { getItemCategory, searchItemTitles } from 'ui/shared/search/utils';
@@ -68,7 +70,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
                 textOverflow="ellipsis"
               />
             </LinkInternal>
-            { data.is_verified_via_admin_panel && <IconSvg name="verified_token" boxSize={ 4 } ml={ 1 } color="green.500"/> }
+            { data.is_verified_via_admin_panel && <IconSvg name="certified" boxSize={ 4 } ml={ 1 } color="green.500"/> }
           </Flex>
         );
       }
@@ -81,7 +83,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
           is_contract: data.type === 'contract',
           is_verified: data.is_smart_contract_verified,
           name: null,
-          implementation_name: null,
+          implementations: null,
           ens_domain_name: null,
         };
 
@@ -160,23 +162,29 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
 
       case 'block': {
         const shouldHighlightHash = data.block_hash.toLowerCase() === searchTerm.toLowerCase();
+        const isFutureBlock = data.timestamp === undefined;
+        const href = isFutureBlock ?
+          route({ pathname: '/block/countdown/[height]', query: { height: String(data.block_number) } }) :
+          route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: data.block_hash ?? String(data.block_number) } });
+
         return (
           <BlockEntity.Container>
-            <BlockEntity.Icon/>
+            <BlockEntity.Icon isLoading={ isLoading }/>
             <BlockEntity.Link
-              hash={ data.block_hash }
-              number={ Number(data.block_number) }
+              href={ href }
               onClick={ handleLinkClick }
+              isLoading={ isLoading }
             >
               <BlockEntity.Content
                 asProp={ shouldHighlightHash ? 'span' : 'mark' }
                 number={ Number(data.block_number) }
                 fontSize="sm"
                 fontWeight={ 700 }
+                isLoading={ isLoading }
               />
             </BlockEntity.Link>
-            { data.block_type === 'reorg' && <Tag ml={ 2 }>Reorg</Tag> }
-            { data.block_type === 'uncle' && <Tag ml={ 2 }>Uncle</Tag> }
+            { data.block_type === 'reorg' && !isLoading && <Tag ml={ 2 }>Reorg</Tag> }
+            { data.block_type === 'uncle' && !isLoading && <Tag ml={ 2 }>Uncle</Tag> }
           </BlockEntity.Container>
         );
       }
@@ -243,6 +251,30 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
           </UserOpEntity.Container>
         );
       }
+
+      case 'ens_domain': {
+        return (
+          <EnsEntity.Container>
+            <EnsEntity.Icon/>
+            <LinkInternal
+              href={ route({ pathname: '/address/[hash]', query: { hash: data.address } }) }
+              fontWeight={ 700 }
+              wordBreak="break-all"
+              isLoading={ isLoading }
+              onClick={ handleLinkClick }
+              overflow="hidden"
+            >
+              <Skeleton
+                isLoaded={ !isLoading }
+                dangerouslySetInnerHTML={{ __html: highlightText(data.ens_info.name, searchTerm) }}
+                whiteSpace="nowrap"
+                overflow="hidden"
+                textOverflow="ellipsis"
+              />
+            </LinkInternal>
+          </EnsEntity.Container>
+        );
+      }
     }
   })();
 
@@ -269,12 +301,20 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
       }
       case 'block': {
         const shouldHighlightHash = data.block_hash.toLowerCase() === searchTerm.toLowerCase();
+        const isFutureBlock = data.timestamp === undefined;
+
+        if (isFutureBlock) {
+          return <Skeleton isLoaded={ !isLoading }>Learn estimated time for this block to be created.</Skeleton>;
+        }
+
         return (
           <>
-            <Box as={ shouldHighlightHash ? 'mark' : 'span' } display="block" whiteSpace="nowrap" overflow="hidden" mb={ 1 }>
+            <Skeleton isLoaded={ !isLoading } as={ shouldHighlightHash ? 'mark' : 'span' } display="block" whiteSpace="nowrap" overflow="hidden" mb={ 1 }>
               <HashStringShortenDynamic hash={ data.block_hash }/>
-            </Box>
-            <Text variant="secondary" mr={ 2 }>{ dayjs(data.timestamp).format('llll') }</Text>
+            </Skeleton>
+            <Skeleton isLoaded={ !isLoading } color="text_secondary" mr={ 2 }>
+              <span>{ dayjs(data.timestamp).format('llll') }</span>
+            </Skeleton>
           </>
         );
       }
@@ -304,10 +344,10 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
           <Text
             overflow="hidden"
             textOverflow="ellipsis"
-            sx={{
+            style={{
+              WebkitLineClamp: 3,
+              WebkitBoxOrient: 'vertical',
               display: '-webkit-box',
-              '-webkit-box-orient': 'vertical',
-              '-webkit-line-clamp': '3',
             }}
           >
             { data.app.description }
@@ -321,19 +361,39 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
         const expiresText = data.ens_info?.expiry_date ? ` (expires ${ dayjs(data.ens_info.expiry_date).fromNow() })` : '';
 
         return addressName ? (
-          <>
-            <span dangerouslySetInnerHTML={{ __html: shouldHighlightHash ? xss(addressName) : highlightText(addressName, searchTerm) }}/>
-            { data.ens_info &&
-              (
+          <Flex alignItems="center">
+            <Text
+              overflow="hidden"
+              whiteSpace="nowrap"
+              textOverflow="ellipsis"
+            >
+              <span dangerouslySetInnerHTML={{ __html: shouldHighlightHash ? xss(addressName) : highlightText(addressName, searchTerm) }}/>
+              { data.ens_info && (
                 data.ens_info.names_count > 1 ?
                   <chakra.span color="text_secondary"> ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` })</chakra.span> :
                   <chakra.span color="text_secondary">{ expiresText }</chakra.span>
-              )
-            }
-          </>
+              ) }
+            </Text>
+            { data.certified && <ContractCertifiedLabel iconSize={ 5 } boxSize={ 5 } ml={ 1 }/> }
+          </Flex>
         ) :
           null;
       }
+      case 'ens_domain': {
+        const expiresText = data.ens_info?.expiry_date ? ` expires ${ dayjs(data.ens_info.expiry_date).fromNow() }` : '';
+        return (
+          <Flex alignItems="center" gap={ 3 }>
+            <Box overflow="hidden">
+              <HashStringShortenDynamic hash={ data.address }/>
+            </Box>
+            {
+              data.ens_info.names_count > 1 ?
+                <chakra.span color="text_secondary"> ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` })</chakra.span> :
+                <chakra.span color="text_secondary">{ expiresText }</chakra.span>
+            }
+          </Flex>
+        );
+      }
 
       default:
         return null;
diff --git a/ui/searchResults/SearchResultTableItem.tsx b/ui/searchResults/SearchResultTableItem.tsx
index fde08af038..43148ed9a1 100644
--- a/ui/searchResults/SearchResultTableItem.tsx
+++ b/ui/searchResults/SearchResultTableItem.tsx
@@ -2,7 +2,7 @@ import { chakra, Tr, Td, Text, Flex, Image, Box, Skeleton, useColorMode, Tag } f
 import React from 'react';
 import xss from 'xss';
 
-import type { SearchResultItem } from 'types/api/search';
+import type { SearchResultItem } from 'types/client/search';
 
 import { route } from 'nextjs-routes';
 
@@ -11,16 +11,18 @@ import highlightText from 'lib/highlightText';
 import * as mixpanel from 'lib/mixpanel/index';
 import { saveToRecentKeywords } from 'lib/recentSearchKeywords';
 import { ADDRESS_REGEXP } from 'lib/validations/address';
+import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import * as BlobEntity from 'ui/shared/entities/blob/BlobEntity';
 import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import * as EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import * as TxEntity from 'ui/shared/entities/tx/TxEntity';
 import * as UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkExternal from 'ui/shared/LinkExternal';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import type { SearchResultAppItem } from 'ui/shared/search/utils';
 import { getItemCategory, searchItemTitles } from 'ui/shared/search/utils';
 interface Props {
@@ -68,7 +70,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
                     dangerouslySetInnerHTML={{ __html: highlightText(name, searchTerm) }}
                   />
                 </LinkInternal>
-                { data.is_verified_via_admin_panel && <IconSvg name="verified_token" boxSize={ 4 } ml={ 1 } color="green.500"/> }
+                { data.is_verified_via_admin_panel && <IconSvg name="certified" boxSize={ 4 } ml={ 1 } color="green.500"/> }
               </Flex>
             </Td>
             <Td fontSize="sm" verticalAlign="middle">
@@ -100,7 +102,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
           is_contract: data.type === 'contract',
           is_verified: data.is_smart_contract_verified,
           name: null,
-          implementation_name: null,
+          implementations: null,
           ens_domain_name: null,
         };
         const expiresText = data.ens_info?.expiry_date ? ` (expires ${ dayjs(data.ens_info.expiry_date).fromNow() })` : '';
@@ -127,14 +129,24 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
             </Td>
             { addressName && (
               <Td colSpan={ 2 } fontSize="sm" verticalAlign="middle">
-                <span dangerouslySetInnerHTML={{ __html: shouldHighlightHash ? xss(addressName) : highlightText(addressName, searchTerm) }}/>
-                { data.ens_info &&
-                  (
-                    data.ens_info.names_count > 1 ?
-                      <chakra.span color="text_secondary"> ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` })</chakra.span> :
-                      <chakra.span color="text_secondary">{ expiresText }</chakra.span>
-                  )
-                }
+                <Flex alignItems="center">
+                  <Text
+                    overflow="hidden"
+                    whiteSpace="nowrap"
+                    textOverflow="ellipsis"
+                  >
+                    <span dangerouslySetInnerHTML={{ __html: shouldHighlightHash ? xss(addressName) : highlightText(addressName, searchTerm) }}/>
+                    { data.ens_info && (
+                      data.ens_info.names_count > 1 ? (
+                        <chakra.span color="text_secondary">
+                          { data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` }
+                        </chakra.span>
+                      ) :
+                        <chakra.span color="text_secondary">{ expiresText }</chakra.span>
+                    ) }
+                  </Text>
+                  { data.certified && <ContractCertifiedLabel iconSize={ 5 } boxSize={ 5 } mx={ 1 }/> }
+                </Flex>
               </Td>
             ) }
           </>
@@ -222,16 +234,20 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
 
       case 'block': {
         const shouldHighlightHash = data.block_hash.toLowerCase() === searchTerm.toLowerCase();
+        const isFutureBlock = data.timestamp === undefined && !isLoading;
+        const href = isFutureBlock ?
+          route({ pathname: '/block/countdown/[height]', query: { height: String(data.block_number) } }) :
+          route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: data.block_hash ?? String(data.block_number) } });
 
         return (
           <>
             <Td fontSize="sm">
               <BlockEntity.Container>
-                <BlockEntity.Icon/>
+                <BlockEntity.Icon isLoading={ isLoading }/>
                 <BlockEntity.Link
-                  hash={ data.block_hash }
-                  number={ Number(data.block_number) }
+                  href={ href }
                   onClick={ handleLinkClick }
+                  isLoading={ isLoading }
                 >
                   <BlockEntity.Content
                     asProp={ shouldHighlightHash ? 'span' : 'mark' }
@@ -239,22 +255,31 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
                     fontSize="sm"
                     lineHeight={ 5 }
                     fontWeight={ 700 }
+                    isLoading={ isLoading }
                   />
                 </BlockEntity.Link>
               </BlockEntity.Container>
             </Td>
-            <Td fontSize="sm" verticalAlign="middle">
-              <Flex columnGap={ 2 } alignItems="center">
-                { data.block_type === 'reorg' && <Tag flexShrink={ 0 }>Reorg</Tag> }
-                { data.block_type === 'uncle' && <Tag flexShrink={ 0 }>Uncle</Tag> }
-                <Box overflow="hidden" whiteSpace="nowrap" as={ shouldHighlightHash ? 'mark' : 'span' } display="block">
-                  <HashStringShortenDynamic hash={ data.block_hash }/>
-                </Box>
-              </Flex>
-            </Td>
-            <Td fontSize="sm" verticalAlign="middle" isNumeric>
-              <Text variant="secondary">{ dayjs(data.timestamp).format('llll') }</Text>
+            <Td fontSize="sm" verticalAlign="middle" colSpan={ isFutureBlock ? 2 : 1 }>
+              { isFutureBlock ? (
+                <Skeleton isLoaded={ !isLoading }>Learn estimated time for this block to be created.</Skeleton>
+              ) : (
+                <Flex columnGap={ 2 } alignItems="center">
+                  { data.block_type === 'reorg' && !isLoading && <Tag flexShrink={ 0 }>Reorg</Tag> }
+                  { data.block_type === 'uncle' && !isLoading && <Tag flexShrink={ 0 }>Uncle</Tag> }
+                  <Skeleton isLoaded={ !isLoading } overflow="hidden" whiteSpace="nowrap" as={ shouldHighlightHash ? 'mark' : 'span' } display="block">
+                    <HashStringShortenDynamic hash={ data.block_hash }/>
+                  </Skeleton>
+                </Flex>
+              ) }
             </Td>
+            { !isFutureBlock && (
+              <Td fontSize="sm" verticalAlign="middle" isNumeric>
+                <Skeleton isLoaded={ !isLoading } color="text_secondary">
+                  <span>{ dayjs(data.timestamp).format('llll') }</span>
+                </Skeleton>
+              </Td>
+            ) }
           </>
         );
       }
@@ -337,6 +362,48 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
           </>
         );
       }
+
+      case 'ens_domain': {
+        const expiresText = data.ens_info?.expiry_date ? ` expires ${ dayjs(data.ens_info.expiry_date).fromNow() }` : '';
+        return (
+          <>
+            <Td fontSize="sm">
+              <EnsEntity.Container>
+                <EnsEntity.Icon/>
+                <LinkInternal
+                  href={ route({ pathname: '/address/[hash]', query: { hash: data.address } }) }
+                  fontWeight={ 700 }
+                  wordBreak="break-all"
+                  isLoading={ isLoading }
+                  onClick={ handleLinkClick }
+                  overflow="hidden"
+                >
+                  <Skeleton
+                    isLoaded={ !isLoading }
+                    dangerouslySetInnerHTML={{ __html: highlightText(data.ens_info.name, searchTerm) }}
+                    whiteSpace="nowrap"
+                    overflow="hidden"
+                    textOverflow="ellipsis"
+                  />
+                </LinkInternal>
+              </EnsEntity.Container>
+            </Td>
+            <Td>
+              <Flex alignItems="center" overflow="hidden">
+                <Box overflow="hidden" whiteSpace="nowrap" w={ data.is_smart_contract_verified ? 'calc(100%-28px)' : 'unset' }>
+                  <HashStringShortenDynamic hash={ data.address }/>
+                </Box>
+                { data.is_smart_contract_verified && <IconSvg name="status/success" boxSize="14px" color="green.500" ml={ 1 } flexShrink={ 0 }/> }
+              </Flex>
+            </Td>
+            <Td>
+              { data.ens_info.names_count > 1 ?
+                <chakra.span color="text_secondary"> ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` })</chakra.span> :
+                <chakra.span color="text_secondary">{ expiresText }</chakra.span> }
+            </Td>
+          </>
+        );
+      }
     }
   })();
 
diff --git a/ui/searchResults/SearchResultsInput.tsx b/ui/searchResults/SearchResultsInput.tsx
index 3559b1978d..d76864d836 100644
--- a/ui/searchResults/SearchResultsInput.tsx
+++ b/ui/searchResults/SearchResultsInput.tsx
@@ -1,10 +1,11 @@
-import { Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
+import { PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
 import _debounce from 'lodash/debounce';
 import type { FormEvent, FocusEvent } from 'react';
 import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { getRecentSearchKeywords } from 'lib/recentSearchKeywords';
+import Popover from 'ui/shared/chakra/Popover';
 import SearchBarBackdrop from 'ui/snippets/searchBar/SearchBarBackdrop';
 import SearchBarInput from 'ui/snippets/searchBar/SearchBarInput';
 import SearchBarRecentKeywords from 'ui/snippets/searchBar/SearchBarRecentKeywords';
@@ -76,7 +77,7 @@ const SearchResultsInput = ({ searchTerm, handleSubmit, handleSearchTermChange }
         autoFocus={ false }
         onClose={ onClose }
         placement="bottom-start"
-        offset={ isMobile ? [ 16, -12 ] : undefined }
+        offset={ isMobile ? [ 16, -12 ] : [ 0, 8 ] }
         isLazy
       >
         <PopoverTrigger>
diff --git a/ui/shared/AccountActionsMenu/AccountActionsMenu.pw.tsx b/ui/shared/AccountActionsMenu/AccountActionsMenu.pw.tsx
index 614764950c..814b380a81 100644
--- a/ui/shared/AccountActionsMenu/AccountActionsMenu.pw.tsx
+++ b/ui/shared/AccountActionsMenu/AccountActionsMenu.pw.tsx
@@ -1,20 +1,14 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
+import type { BrowserContext } from '@playwright/test';
 import React from 'react';
 
 import * as profileMock from 'mocks/user/profile';
-import authFixture from 'playwright/fixtures/auth';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { contextWithAuth } from 'playwright/fixtures/auth';
+import { test as base, expect } from 'playwright/lib';
 
 import AccountActionsMenu from './AccountActionsMenu';
 
-const USER_INFO_URL = buildApiUrl('user_info');
-
-const test = base.extend({
-  context: ({ context }, use) => {
-    authFixture(context);
-    use(context);
-  },
+const test = base.extend<{ context: BrowserContext }>({
+  context: contextWithAuth,
 });
 
 test.use({ viewport: { width: 200, height: 200 } });
@@ -28,56 +22,32 @@ test.describe('with multiple items', async() => {
     },
   };
 
-  test.beforeEach(async({ page }) => {
-    await page.route(USER_INFO_URL, (route) => route.fulfill({
-      body: JSON.stringify(profileMock.base),
-    }));
+  test.beforeEach(async({ mockApiResponse }) => {
+    mockApiResponse('user_info', profileMock.base);
   });
 
-  test('base view', async({ mount, page }) => {
-    const component = await mount(
-      <TestApp>
-        <AccountActionsMenu/>
-      </TestApp>,
-      { hooksConfig },
-    );
-
+  test('base view', async({ render, page }) => {
+    const component = await render(<AccountActionsMenu/>, { hooksConfig });
     await component.getByRole('button').click();
 
     await expect(page).toHaveScreenshot();
   });
 
-  test('base view with styles', async({ mount, page }) => {
-    const component = await mount(
-      <TestApp>
-        <AccountActionsMenu m={ 2 } outline="1px solid lightpink"/>
-      </TestApp>,
-      { hooksConfig },
-    );
-
+  test('base view with styles', async({ render, page }) => {
+    const component = await render(<AccountActionsMenu m={ 2 } outline="1px solid lightpink"/>, { hooksConfig });
     await component.getByRole('button').click();
 
     await expect(page).toHaveScreenshot();
   });
 
-  test('loading', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <AccountActionsMenu isLoading/>
-      </TestApp>,
-      { hooksConfig },
-    );
+  test('loading', async({ render }) => {
+    const component = await render(<AccountActionsMenu isLoading/>, { hooksConfig });
 
     await expect(component).toHaveScreenshot();
   });
 
-  test('loading with styles', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <AccountActionsMenu isLoading m={ 2 } outline="1px solid lightpink"/>
-      </TestApp>,
-      { hooksConfig },
-    );
+  test('loading with styles', async({ render }) => {
+    const component = await render(<AccountActionsMenu isLoading m={ 2 } outline="1px solid lightpink"/>, { hooksConfig });
 
     await expect(component).toHaveScreenshot();
   });
@@ -92,39 +62,22 @@ test.describe('with one item', async() => {
     },
   };
 
-  test('base view', async({ mount, page }) => {
-    const component = await mount(
-      <TestApp>
-        <AccountActionsMenu/>
-      </TestApp>,
-      { hooksConfig },
-    );
-
+  test('base view', async({ render, page }) => {
+    const component = await render(<AccountActionsMenu/>, { hooksConfig });
     await component.getByRole('button').hover();
 
     await expect(page).toHaveScreenshot();
   });
 
-  test('base view with styles', async({ mount, page }) => {
-    const component = await mount(
-      <TestApp>
-        <AccountActionsMenu m={ 2 } outline="1px solid lightpink"/>
-      </TestApp>,
-      { hooksConfig },
-    );
-
+  test('base view with styles', async({ render, page }) => {
+    const component = await render(<AccountActionsMenu m={ 2 } outline="1px solid lightpink"/>, { hooksConfig });
     await component.getByRole('button').hover();
 
     await expect(page).toHaveScreenshot();
   });
 
-  test('loading', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <AccountActionsMenu isLoading/>
-      </TestApp>,
-      { hooksConfig },
-    );
+  test('loading', async({ render }) => {
+    const component = await render(<AccountActionsMenu isLoading/>, { hooksConfig });
 
     await expect(component).toHaveScreenshot();
   });
diff --git a/ui/shared/AccountActionsMenu/AccountActionsMenu.tsx b/ui/shared/AccountActionsMenu/AccountActionsMenu.tsx
index d443dc2691..6716dd90a9 100644
--- a/ui/shared/AccountActionsMenu/AccountActionsMenu.tsx
+++ b/ui/shared/AccountActionsMenu/AccountActionsMenu.tsx
@@ -1,4 +1,4 @@
-import { Box, IconButton, Menu, MenuButton, MenuList, Skeleton, chakra } from '@chakra-ui/react';
+import { Box, IconButton, MenuButton, MenuList, Skeleton, chakra } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -9,8 +9,10 @@ import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
 import useIsAccountActionAllowed from 'lib/hooks/useIsAccountActionAllowed';
 import * as mixpanel from 'lib/mixpanel/index';
 import getQueryParamString from 'lib/router/getQueryParamString';
+import Menu from 'ui/shared/chakra/Menu';
 import IconSvg from 'ui/shared/IconSvg';
 
+import MetadataUpdateMenuItem from './items/MetadataUpdateMenuItem';
 import PrivateTagMenuItem from './items/PrivateTagMenuItem';
 import PublicTagMenuItem from './items/PublicTagMenuItem';
 import TokenInfoMenuItem from './items/TokenInfoMenuItem';
@@ -18,13 +20,15 @@ import TokenInfoMenuItem from './items/TokenInfoMenuItem';
 interface Props {
   isLoading?: boolean;
   className?: string;
+  showUpdateMetadataItem?: boolean;
 }
 
-const AccountActionsMenu = ({ isLoading, className }: Props) => {
+const AccountActionsMenu = ({ isLoading, className, showUpdateMetadataItem }: Props) => {
   const router = useRouter();
 
   const hash = getQueryParamString(router.query.hash);
   const isTokenPage = router.pathname === '/token/[hash]';
+  const isTokenInstancePage = router.pathname === '/token/[hash]/instance/[id]';
   const isTxPage = router.pathname === '/tx/[hash]';
   const isAccountActionAllowed = useIsAccountActionAllowed();
 
@@ -41,6 +45,10 @@ const AccountActionsMenu = ({ isLoading, className }: Props) => {
   const userWithoutEmail = userInfoQuery.data && !userInfoQuery.data.email;
 
   const items = [
+    {
+      render: (props: ItemProps) => <MetadataUpdateMenuItem { ...props }/>,
+      enabled: isTokenInstancePage && showUpdateMetadataItem,
+    },
     {
       render: (props: ItemProps) => <TokenInfoMenuItem { ...props }/>,
       enabled: isTokenPage && config.features.addressVerification.isEnabled && !userWithoutEmail,
@@ -51,7 +59,7 @@ const AccountActionsMenu = ({ isLoading, className }: Props) => {
     },
     {
       render: (props: ItemProps) => <PublicTagMenuItem { ...props }/>,
-      enabled: !isTxPage,
+      enabled: !isTxPage && config.features.publicTagsSubmission.isEnabled,
     },
   ].filter(({ enabled }) => enabled);
 
@@ -82,6 +90,7 @@ const AccountActionsMenu = ({ isLoading, className }: Props) => {
         px="7px"
         onClick={ handleButtonClick }
         icon={ <IconSvg name="dots" boxSize="18px"/> }
+        aria-label="Show address menu"
       />
       <MenuList minWidth="180px" zIndex="popover">
         { items.map(({ render }, index) => (
diff --git a/ui/shared/AccountActionsMenu/items/MetadataUpdateMenuItem.tsx b/ui/shared/AccountActionsMenu/items/MetadataUpdateMenuItem.tsx
new file mode 100644
index 0000000000..a7602ed029
--- /dev/null
+++ b/ui/shared/AccountActionsMenu/items/MetadataUpdateMenuItem.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import type { ItemProps } from '../types';
+
+import IconSvg from 'ui/shared/IconSvg';
+import { useMetadataUpdateContext } from 'ui/tokenInstance/contexts/metadataUpdate';
+
+import ButtonItem from '../parts/ButtonItem';
+import MenuItem from '../parts/MenuItem';
+
+const MetadataUpdateMenuItem = ({ type, className }: ItemProps) => {
+
+  const { status, setStatus } = useMetadataUpdateContext() || {};
+
+  const handleClick = React.useCallback(() => {
+    setStatus?.('MODAL_OPENED');
+  }, [ setStatus ]);
+
+  const element = (() => {
+    switch (type) {
+      case 'button': {
+        return (
+          <ButtonItem
+            label="Refresh metadata"
+            icon="refresh"
+            onClick={ handleClick }
+            className={ className }
+            isDisabled={ status === 'WAITING_FOR_RESPONSE' }
+          />
+        );
+      }
+      case 'menu_item': {
+        return (
+          <MenuItem className={ className } onClick={ handleClick } isDisabled={ status === 'WAITING_FOR_RESPONSE' }>
+            <IconSvg name="refresh" boxSize={ 5 } mr={ 2 }/>
+            <span>Refresh metadata</span>
+          </MenuItem>
+        );
+      }
+    }
+  })();
+
+  return element;
+};
+
+export default React.memo(MetadataUpdateMenuItem);
diff --git a/ui/shared/AccountActionsMenu/items/PrivateTagMenuItem.tsx b/ui/shared/AccountActionsMenu/items/PrivateTagMenuItem.tsx
index 098af5eafd..48eafd066f 100644
--- a/ui/shared/AccountActionsMenu/items/PrivateTagMenuItem.tsx
+++ b/ui/shared/AccountActionsMenu/items/PrivateTagMenuItem.tsx
@@ -3,7 +3,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { ItemType } from '../types';
+import type { ItemProps } from '../types';
 import type { Address } from 'types/api/address';
 import type { Transaction } from 'types/api/transaction';
 
@@ -16,12 +16,8 @@ import IconSvg from 'ui/shared/IconSvg';
 import ButtonItem from '../parts/ButtonItem';
 import MenuItem from '../parts/MenuItem';
 
-interface Props {
-  className?: string;
-  hash: string;
-  onBeforeClick: () => boolean;
+interface Props extends ItemProps {
   entityType?: 'address' | 'tx';
-  type: ItemType;
 }
 
 const PrivateTagMenuItem = ({ className, hash, onBeforeClick, entityType = 'address', type }: Props) => {
diff --git a/ui/shared/AccountActionsMenu/items/PublicTagMenuItem.tsx b/ui/shared/AccountActionsMenu/items/PublicTagMenuItem.tsx
index 0de41a7698..1082d4e995 100644
--- a/ui/shared/AccountActionsMenu/items/PublicTagMenuItem.tsx
+++ b/ui/shared/AccountActionsMenu/items/PublicTagMenuItem.tsx
@@ -1,21 +1,14 @@
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { ItemType } from '../types';
+import type { ItemProps } from '../types';
 
 import IconSvg from 'ui/shared/IconSvg';
 
 import ButtonItem from '../parts/ButtonItem';
 import MenuItem from '../parts/MenuItem';
 
-interface Props {
-  className?: string;
-  hash: string;
-  onBeforeClick: () => boolean;
-  type: ItemType;
-}
-
-const PublicTagMenuItem = ({ className, hash, onBeforeClick, type }: Props) => {
+const PublicTagMenuItem = ({ className, hash, onBeforeClick, type }: ItemProps) => {
   const router = useRouter();
 
   const handleClick = React.useCallback(() => {
@@ -23,7 +16,7 @@ const PublicTagMenuItem = ({ className, hash, onBeforeClick, type }: Props) => {
       return;
     }
 
-    router.push({ pathname: '/account/public-tags-request', query: { address: hash } });
+    router.push({ pathname: '/public-tags/submit', query: { addresses: [ hash ] } });
   }, [ hash, onBeforeClick, router ]);
 
   const element = (() => {
diff --git a/ui/shared/AccountActionsMenu/items/TokenInfoMenuItem.tsx b/ui/shared/AccountActionsMenu/items/TokenInfoMenuItem.tsx
index da1a875c79..68b41dcd7f 100644
--- a/ui/shared/AccountActionsMenu/items/TokenInfoMenuItem.tsx
+++ b/ui/shared/AccountActionsMenu/items/TokenInfoMenuItem.tsx
@@ -2,9 +2,7 @@ import { chakra, useDisclosure } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { ItemType } from '../types';
-
-import type { Route } from 'nextjs-routes';
+import type { ItemProps } from '../types';
 
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
@@ -16,14 +14,7 @@ import IconSvg from 'ui/shared/IconSvg';
 import ButtonItem from '../parts/ButtonItem';
 import MenuItem from '../parts/MenuItem';
 
-interface Props {
-  className?: string;
-  hash: string;
-  onBeforeClick: (route: Route) => boolean;
-  type: ItemType;
-}
-
-const TokenInfoMenuItem = ({ className, hash, onBeforeClick, type }: Props) => {
+const TokenInfoMenuItem = ({ className, hash, onBeforeClick, type }: ItemProps) => {
   const router = useRouter();
   const modal = useDisclosure();
   const isAuth = useHasAccount();
diff --git a/ui/shared/AccountActionsMenu/parts/ButtonItem.tsx b/ui/shared/AccountActionsMenu/parts/ButtonItem.tsx
index 6580b71086..e4438157a6 100644
--- a/ui/shared/AccountActionsMenu/parts/ButtonItem.tsx
+++ b/ui/shared/AccountActionsMenu/parts/ButtonItem.tsx
@@ -9,9 +9,10 @@ interface Props {
   onClick: () => void;
   label: string;
   icon: IconName | React.ReactElement;
+  isDisabled?: boolean;
 }
 
-const ButtonItem = ({ className, label, onClick, icon }: Props) => {
+const ButtonItem = ({ className, label, onClick, icon, isDisabled }: Props) => {
   return (
     <Tooltip label={ label }>
       <IconButton
@@ -19,6 +20,7 @@ const ButtonItem = ({ className, label, onClick, icon }: Props) => {
         className={ className }
         icon={ typeof icon === 'string' ? <IconSvg name={ icon } boxSize={ 6 }/> : icon }
         onClick={ onClick }
+        isDisabled={ isDisabled }
         size="sm"
         variant="outline"
         px="4px"
diff --git a/ui/shared/AccountActionsMenu/parts/MenuItem.tsx b/ui/shared/AccountActionsMenu/parts/MenuItem.tsx
index a55d38efde..13e827edbe 100644
--- a/ui/shared/AccountActionsMenu/parts/MenuItem.tsx
+++ b/ui/shared/AccountActionsMenu/parts/MenuItem.tsx
@@ -5,11 +5,12 @@ interface Props {
   className?: string;
   children: React.ReactNode;
   onClick: () => void;
+  isDisabled?: boolean;
 }
 
-const MenuItem = ({ className, children, onClick }: Props) => {
+const MenuItem = ({ className, children, onClick, isDisabled }: Props) => {
   return (
-    <MenuItemChakra className={ className } onClick={ onClick } py={ 2 } px={ 4 }>
+    <MenuItemChakra className={ className } onClick={ onClick } py={ 2 } px={ 4 } isDisabled={ isDisabled }>
       { children }
     </MenuItemChakra>
   );
diff --git a/ui/shared/AccountActionsMenu/types.ts b/ui/shared/AccountActionsMenu/types.ts
index 663e65add8..76e87b9dce 100644
--- a/ui/shared/AccountActionsMenu/types.ts
+++ b/ui/shared/AccountActionsMenu/types.ts
@@ -1,7 +1,9 @@
 export type ItemType = 'button' | 'menu_item';
+import type { Route } from 'nextjs-routes';
 
 export interface ItemProps {
+  className?: string;
   type: ItemType;
   hash: string;
-  onBeforeClick: () => boolean;
+  onBeforeClick: (route?: Route) => boolean;
 }
diff --git a/ui/shared/ActionBar.tsx b/ui/shared/ActionBar.tsx
index 3b8d2410ea..a096d56e8e 100644
--- a/ui/shared/ActionBar.tsx
+++ b/ui/shared/ActionBar.tsx
@@ -12,6 +12,8 @@ type Props = {
 
 const TOP_UP = 106;
 const TOP_DOWN = 0;
+export const ACTION_BAR_HEIGHT_DESKTOP = 24 + 32 + 12;
+export const ACTION_BAR_HEIGHT_MOBILE = 24 + 32 + 24;
 
 const ActionBar = ({ children, className, showShadow }: Props) => {
   const ref = React.useRef<HTMLDivElement>(null);
@@ -27,9 +29,10 @@ const ActionBar = ({ children, className, showShadow }: Props) => {
     <Flex
       className={ className }
       backgroundColor={ bgColor }
-      py={ 6 }
-      mx={{ base: -4, lg: 0 }}
-      px={{ base: 4, lg: 0 }}
+      pt={ 6 }
+      pb={{ base: 6, lg: 3 }}
+      mx={{ base: -3, lg: 0 }}
+      px={{ base: 3, lg: 0 }}
       justifyContent="space-between"
       width={{ base: '100vw', lg: 'unset' }}
       position="sticky"
diff --git a/ui/shared/AdditionalInfoButton.tsx b/ui/shared/AdditionalInfoButton.tsx
index de15304086..144820e89a 100644
--- a/ui/shared/AdditionalInfoButton.tsx
+++ b/ui/shared/AdditionalInfoButton.tsx
@@ -42,7 +42,7 @@ const AdditionalInfoButton = ({ isOpen, onClick, className, isLoading }: Props,
       <IconSvg
         name="info"
         boxSize={ 5 }
-        color="link"
+        color={ isOpen ? 'link_hovered' : 'icon_info' }
         _hover={{ color: 'link_hovered' }}
       />
     </Button>
diff --git a/ui/shared/AddressInput.tsx b/ui/shared/AddressInput.tsx
index 00468f2e64..66cdec3601 100644
--- a/ui/shared/AddressInput.tsx
+++ b/ui/shared/AddressInput.tsx
@@ -13,7 +13,7 @@ type Props<TInputs extends FieldValues, TInputName extends Path<TInputs>> = {
   field: ControllerRenderProps<TInputs, TInputName>;
   size?: InputProps['size'];
   placeholder?: string;
-  backgroundColor?: string;
+  bgColor?: string;
   error?: FieldError;
 }
 
@@ -23,14 +23,15 @@ export default function AddressInput<Inputs extends FieldValues, Name extends Pa
     field,
     size,
     placeholder = 'Address (0x...)',
-    backgroundColor,
+    bgColor,
   }: Props<Inputs, Name>) {
   return (
-    <FormControl variant="floating" id="address" isRequired backgroundColor={ backgroundColor } size={ size }>
+    <FormControl variant="floating" id="address" isRequired size={ size } bgColor={ bgColor }>
       <Input
         { ...field }
         isInvalid={ Boolean(error) }
         maxLength={ ADDRESS_LENGTH }
+        bgColor={ bgColor }
       />
       <InputPlaceholder text={ placeholder } error={ error }/>
     </FormControl>
diff --git a/ui/shared/AppActionButton/AppActionButton.pw.tsx b/ui/shared/AppActionButton/AppActionButton.pw.tsx
new file mode 100644
index 0000000000..16f9ecb730
--- /dev/null
+++ b/ui/shared/AppActionButton/AppActionButton.pw.tsx
@@ -0,0 +1,61 @@
+import { Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
+
+import * as actionButtonMetadataMock from 'mocks/metadata/appActionButton';
+import { test, expect } from 'playwright/lib';
+
+import AppActionButton from './AppActionButton';
+
+test.beforeEach(async({ mockAssetResponse }) => {
+  await mockAssetResponse(actionButtonMetadataMock.appLogoURL as string, './playwright/mocks/image_s.jpg');
+});
+
+test('button without styles +@dark-mode', async({ render }) => {
+  const component = await render(
+    <Flex w="200px">
+      <AppActionButton
+        data={ actionButtonMetadataMock.buttonWithoutStyles as NonNullable<AddressMetadataTagFormatted['meta']> }
+        source="Txn"
+      />
+    </Flex>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('link without styles +@dark-mode', async({ render }) => {
+  const component = await render(
+    <Flex w="200px">
+      <AppActionButton
+        data={ actionButtonMetadataMock.linkWithoutStyles as NonNullable<AddressMetadataTagFormatted['meta']> }
+        source="Txn"
+      />
+    </Flex>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('button with styles', async({ render }) => {
+  const component = await render(
+    <Flex w="200px">
+      <AppActionButton
+        data={ actionButtonMetadataMock.buttonWithStyles as NonNullable<AddressMetadataTagFormatted['meta']> }
+        source="Txn"
+      />
+    </Flex>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('link with styles', async({ render }) => {
+  const component = await render(
+    <Flex w="200px">
+      <AppActionButton
+        data={ actionButtonMetadataMock.linkWithStyles as NonNullable<AddressMetadataTagFormatted['meta']> }
+        source="Txn"
+      />
+    </Flex>,
+  );
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/shared/AppActionButton/AppActionButton.tsx b/ui/shared/AppActionButton/AppActionButton.tsx
new file mode 100644
index 0000000000..4751ff82dc
--- /dev/null
+++ b/ui/shared/AppActionButton/AppActionButton.tsx
@@ -0,0 +1,91 @@
+import { Button, Image, Text, useColorModeValue, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import * as mixpanel from 'lib/mixpanel/index';
+
+import LinkExternal from '../links/LinkExternal';
+
+type Props = {
+  data: NonNullable<AddressMetadataTagFormatted['meta']>;
+  className?: string;
+  txHash?: string;
+  source: 'Txn' | 'NFT collection' | 'NFT item';
+}
+
+const AppActionButton = ({ data, className, txHash, source }: Props) => {
+  const defaultTextColor = useColorModeValue('blue.600', 'blue.300');
+  const defaultBg = useColorModeValue('gray.100', 'gray.700');
+
+  const { appID, textColor, bgColor, appActionButtonText, appLogoURL, appMarketplaceURL } = data;
+
+  const actionURL = appMarketplaceURL?.replace('{chainId}', config.chain.id || '').replace('{txHash}', txHash || '');
+
+  const handleClick = React.useCallback(() => {
+    const info = appID || actionURL;
+    if (info) {
+      mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Action button', Info: info, Source: source });
+    }
+  }, [ source, appID, actionURL ]);
+
+  if ((!appID && !appMarketplaceURL) || (!appActionButtonText && !appLogoURL)) {
+    return null;
+  }
+
+  const content = (
+    <>
+      { appLogoURL && (
+        <Image
+          src={ appLogoURL }
+          alt={ `${ appActionButtonText } button` }
+          boxSize={ 5 }
+          borderRadius="sm"
+          mr={ 2 }
+        />
+      ) }
+      <Text fontSize="sm" fontWeight="500" color="currentColor">
+        { appActionButtonText }
+      </Text>
+    </>
+  );
+
+  return appID ? (
+    <Button
+      className={ className }
+      as="a"
+      href={ route({ pathname: '/apps/[id]', query: { id: appID, action: 'connect', ...(actionURL ? { url: actionURL } : {}) } }) }
+      onClick={ handleClick }
+      display="flex"
+      size="sm"
+      px={ 2 }
+      color={ textColor || defaultTextColor }
+      bg={ bgColor || defaultBg }
+      _hover={{ bg: bgColor, opacity: 0.9 }}
+      _active={{ bg: bgColor, opacity: 0.9 }}
+    >
+      { content }
+    </Button>
+  ) : (
+    <LinkExternal
+      className={ className }
+      href={ actionURL }
+      onClick={ handleClick }
+      variant="subtle"
+      display="flex"
+      px={ 2 }
+      iconColor={ textColor }
+      color={ textColor }
+      bg={ bgColor }
+      _hover={{ color: textColor }}
+      _active={{ color: textColor }}
+    >
+      { content }
+    </LinkExternal>
+  );
+};
+
+export default chakra(AppActionButton);
diff --git a/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_dark-color-mode_button-without-styles-dark-mode-1.png b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_dark-color-mode_button-without-styles-dark-mode-1.png
new file mode 100644
index 0000000000..f9b5e62985
Binary files /dev/null and b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_dark-color-mode_button-without-styles-dark-mode-1.png differ
diff --git a/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_dark-color-mode_link-without-styles-dark-mode-1.png b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_dark-color-mode_link-without-styles-dark-mode-1.png
new file mode 100644
index 0000000000..28935375bb
Binary files /dev/null and b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_dark-color-mode_link-without-styles-dark-mode-1.png differ
diff --git a/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_button-with-styles-1.png b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_button-with-styles-1.png
new file mode 100644
index 0000000000..c34d228e47
Binary files /dev/null and b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_button-with-styles-1.png differ
diff --git a/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_button-without-styles-dark-mode-1.png b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_button-without-styles-dark-mode-1.png
new file mode 100644
index 0000000000..9ad357c599
Binary files /dev/null and b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_button-without-styles-dark-mode-1.png differ
diff --git a/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_link-with-styles-1.png b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_link-with-styles-1.png
new file mode 100644
index 0000000000..ea64f26465
Binary files /dev/null and b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_link-with-styles-1.png differ
diff --git a/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_link-without-styles-dark-mode-1.png b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_link-without-styles-dark-mode-1.png
new file mode 100644
index 0000000000..ec6ef532f7
Binary files /dev/null and b/ui/shared/AppActionButton/__screenshots__/AppActionButton.pw.tsx_default_link-without-styles-dark-mode-1.png differ
diff --git a/ui/shared/AppActionButton/useAppActionData.tsx b/ui/shared/AppActionButton/useAppActionData.tsx
new file mode 100644
index 0000000000..de0be18a74
--- /dev/null
+++ b/ui/shared/AppActionButton/useAppActionData.tsx
@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+
+import useAddressMetadataInfoQuery from 'lib/address/useAddressMetadataInfoQuery';
+
+export default function useAppActionData(address: string | undefined = '', isEnabled = true) {
+  const memoizedArray = useMemo(() => address ? [ address ] : [], [ address ]);
+  const { data } = useAddressMetadataInfoQuery(memoizedArray, isEnabled);
+  const metadata = data?.addresses[address?.toLowerCase()];
+  const tag = metadata?.tags?.find(({ tagType }) => tagType === 'protocol');
+  if (tag?.meta?.appMarketplaceURL || tag?.meta?.appID) {
+    return tag.meta;
+  }
+  return null;
+}
diff --git a/ui/shared/AppError/AppError.pw.tsx b/ui/shared/AppError/AppError.pw.tsx
index 36f23b03f3..680401d4cc 100644
--- a/ui/shared/AppError/AppError.pw.tsx
+++ b/ui/shared/AppError/AppError.pw.tsx
@@ -1,79 +1,54 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
-import * as configs from 'playwright/utils/configs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import AppError from './AppError';
 
-test('status code 404', async({ mount }) => {
+test('status code 404', async({ render, page }) => {
   const error = { message: 'Not found', cause: { status: 404 } } as Error;
-  const component = await mount(
-    <TestApp>
-      <AppError error={ error }/>
-    </TestApp>,
-  );
-  await expect(component).toHaveScreenshot();
+  const component = await render(<AppError error={ error }/>);
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
 });
 
-test('status code 422', async({ mount }) => {
+test('status code 422', async({ render }) => {
   const error = { message: 'Unprocessable entry', cause: { status: 422 } } as Error;
-  const component = await mount(
-    <TestApp>
-      <AppError error={ error }/>
-    </TestApp>,
-  );
+  const component = await render(<AppError error={ error }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('status code 500', async({ mount }) => {
+test('status code 500', async({ render }) => {
   const error = { message: 'Unknown error', cause: { status: 500 } } as Error;
-  const component = await mount(
-    <TestApp>
-      <AppError error={ error }/>
-    </TestApp>,
-  );
+  const component = await render(<AppError error={ error }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('tx not found', async({ mount }) => {
+test('tx not found', async({ render }) => {
   const error = { message: 'Not found', cause: { status: 404, resource: 'tx' } } as Error;
-  const component = await mount(
-    <TestApp>
-      <AppError error={ error }/>
-    </TestApp>,
-  );
+  const component = await render(<AppError error={ error }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('block lost consensus', async({ mount }) => {
+test('block lost consensus', async({ render }) => {
   const error = {
     message: 'Not found',
     cause: { payload: { message: 'Block lost consensus', hash: 'hash' } },
   } as Error;
-  const component = await mount(
-    <TestApp>
-      <AppError error={ error }/>
-    </TestApp>,
-  );
+  const component = await render(<AppError error={ error }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('too many requests +@mobile', async({ mount, page }) => {
+test('too many requests +@mobile', async({ render, page }) => {
   const error = {
     message: 'Too many requests',
     cause: { status: 429 },
   } as Error;
-
-  const component = await mount(
-    <TestApp>
-      <AppError error={ error }/>
-    </TestApp>,
-  );
-  await page.waitForResponse('https://www.google.com/recaptcha/api2/**');
-
+  const component = await render(<AppError error={ error }/>);
   await expect(component).toHaveScreenshot({
     mask: [ page.locator('.recaptcha') ],
-    maskColor: configs.maskColor,
+    maskColor: pwConfig.maskColor,
   });
 });
diff --git a/ui/shared/AppError/AppError.tsx b/ui/shared/AppError/AppError.tsx
index e3a0a16aff..0af8b918e4 100644
--- a/ui/shared/AppError/AppError.tsx
+++ b/ui/shared/AppError/AppError.tsx
@@ -3,10 +3,12 @@ import React from 'react';
 
 import { route } from 'nextjs-routes';
 
+import config from 'configs/app';
 import getErrorCause from 'lib/errors/getErrorCause';
 import getErrorCauseStatusCode from 'lib/errors/getErrorCauseStatusCode';
 import getErrorObjStatusCode from 'lib/errors/getErrorObjStatusCode';
 import getResourceErrorPayload from 'lib/errors/getResourceErrorPayload';
+import AdBannerContent from 'ui/shared/ad/AdBannerContent';
 
 import AppErrorIcon from './AppErrorIcon';
 import AppErrorTitle from './AppErrorTitle';
@@ -14,6 +16,8 @@ import AppErrorBlockConsensus from './custom/AppErrorBlockConsensus';
 import AppErrorTooManyRequests from './custom/AppErrorTooManyRequests';
 import AppErrorTxNotFound from './custom/AppErrorTxNotFound';
 
+const adBannerConfig = config.features.adsBanner;
+
 interface Props {
   className?: string;
   error: Error | undefined;
@@ -73,6 +77,8 @@ const AppError = ({ error, className }: Props) => {
       default: {
         const { title, text } = ERROR_TEXTS[String(statusCode)] ?? ERROR_TEXTS[500];
 
+        const adBannerProvider = adBannerConfig.isEnabled ? adBannerConfig.provider : null;
+
         return (
           <>
             <AppErrorIcon statusCode={ statusCode }/>
@@ -87,6 +93,7 @@ const AppError = ({ error, className }: Props) => {
             >
                 Back to home
             </Button>
+            { statusCode === 404 && adBannerProvider && <AdBannerContent mt={ 12 } provider={ adBannerProvider }/> }
           </>
         );
       }
diff --git a/ui/shared/AppError/AppErrorBoundary.tsx b/ui/shared/AppError/AppErrorBoundary.tsx
index c20981516d..8129ac17c7 100644
--- a/ui/shared/AppError/AppErrorBoundary.tsx
+++ b/ui/shared/AppError/AppErrorBoundary.tsx
@@ -9,13 +9,18 @@ interface Props {
   className?: string;
   children: React.ReactNode;
   onError?: (error: Error) => void;
+  Container?: React.FC<{ children: React.ReactNode }>;
 }
 
-const AppErrorBoundary = ({ className, children, onError }: Props) => {
+const AppErrorBoundary = ({ className, children, onError, Container }: Props) => {
 
   const renderErrorScreen = React.useCallback((error?: Error) => {
-    return <AppError error={ error } className={ className }/>;
-  }, [ className ]);
+    const content = <AppError error={ error } className={ className }/>;
+    if (Container) {
+      return <Container>{ content }</Container>;
+    }
+    return content;
+  }, [ className, Container ]);
 
   return (
     <ErrorBoundary renderErrorScreen={ renderErrorScreen } onError={ onError }>
diff --git a/ui/shared/AppError/AppErrorGlobalContainer.tsx b/ui/shared/AppError/AppErrorGlobalContainer.tsx
new file mode 100644
index 0000000000..4345d8a162
--- /dev/null
+++ b/ui/shared/AppError/AppErrorGlobalContainer.tsx
@@ -0,0 +1,14 @@
+import { Box, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const AppErrorGlobalContainer = ({ children }: Props) => {
+  const bgColor = useColorModeValue('white', 'black');
+
+  return <Box bgColor={ bgColor }>{ children }</Box>;
+};
+
+export default React.memo(AppErrorGlobalContainer);
diff --git a/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_block-lost-consensus-1.png b/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_block-lost-consensus-1.png
index 000cb187d2..49ee078259 100644
Binary files a/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_block-lost-consensus-1.png and b/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_block-lost-consensus-1.png differ
diff --git a/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_status-code-404-1.png b/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_status-code-404-1.png
index 87bb10f31e..6a7beaaea0 100644
Binary files a/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_status-code-404-1.png and b/ui/shared/AppError/__screenshots__/AppError.pw.tsx_default_status-code-404-1.png differ
diff --git a/ui/shared/ContainerWithScrollY.tsx b/ui/shared/ContainerWithScrollY.tsx
index f16682bbc0..123809a094 100644
--- a/ui/shared/ContainerWithScrollY.tsx
+++ b/ui/shared/ContainerWithScrollY.tsx
@@ -1,21 +1,31 @@
 import { Flex, useColorModeValue, chakra } from '@chakra-ui/react';
 import React from 'react';
 
-type Props = {
+export type Props = {
   children: React.ReactNode;
-  containerId?: string;
   gradientHeight: number;
   className?: string;
-  hasScroll: boolean;
+  onScrollVisibilityChange?: (isVisible: boolean) => void;
 }
 
-const ContainerWithScrollY = ({ className, hasScroll, containerId, gradientHeight, children }: Props, ref: React.ForwardedRef<HTMLDivElement>) => {
-  const gradientStartColor = useColorModeValue('whiteAlpha.600', 'blackAlpha.600');
-  const gradientEndColor = useColorModeValue('whiteAlpha.900', 'blackAlpha.900');
+const ContainerWithScrollY = ({ className, gradientHeight, children, onScrollVisibilityChange }: Props) => {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [ hasScroll, setHasScroll ] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const hasScroll = ref.current.scrollHeight >= ref.current.clientHeight + gradientHeight / 2;
+    setHasScroll(hasScroll);
+    onScrollVisibilityChange?.(hasScroll);
+  }, [ gradientHeight, onScrollVisibilityChange ]);
+
+  const gradientEndColor = useColorModeValue('white', 'black');
 
   return (
     <Flex
-      id={ containerId }
       flexDirection="column"
       className={ className }
       overflowY={ hasScroll ? 'scroll' : 'auto' }
@@ -27,7 +37,7 @@ const ContainerWithScrollY = ({ className, hasScroll, containerId, gradientHeigh
         left: 0,
         right: '20px',
         height: `${ gradientHeight }px`,
-        bgGradient: `linear(to-b, ${ gradientStartColor } 37.5%, ${ gradientEndColor } 77.5%)`,
+        bgGradient: `linear(to-b, transparent, ${ gradientEndColor })`,
       } : undefined }
       pr={ hasScroll ? 5 : 0 }
       pb={ hasScroll ? `${ gradientHeight }px` : 0 }
@@ -37,4 +47,4 @@ const ContainerWithScrollY = ({ className, hasScroll, containerId, gradientHeigh
   );
 };
 
-export default chakra(React.forwardRef(ContainerWithScrollY));
+export default chakra(ContainerWithScrollY);
diff --git a/ui/shared/ContractCertifiedLabel.tsx b/ui/shared/ContractCertifiedLabel.tsx
new file mode 100644
index 0000000000..98e79f7cbb
--- /dev/null
+++ b/ui/shared/ContractCertifiedLabel.tsx
@@ -0,0 +1,21 @@
+import { Box, Tooltip, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from './IconSvg';
+
+type Props = {
+  iconSize: number;
+  className?: string;
+}
+
+const ContractCertifiedLabel = ({ iconSize, className }: Props) => {
+  return (
+    <Tooltip label="This contract has been certified by the chain developers">
+      <Box className={ className }>
+        <IconSvg name="certified" color="green.500" boxSize={ iconSize } cursor="pointer"/>
+      </Box>
+    </Tooltip>
+  );
+};
+
+export default chakra(ContractCertifiedLabel);
diff --git a/ui/shared/CopyToClipboard.tsx b/ui/shared/CopyToClipboard.tsx
index 000678cd90..c17a16092e 100644
--- a/ui/shared/CopyToClipboard.tsx
+++ b/ui/shared/CopyToClipboard.tsx
@@ -1,20 +1,28 @@
 import { IconButton, Tooltip, useClipboard, chakra, useDisclosure, Skeleton, useColorModeValue } from '@chakra-ui/react';
 import React, { useEffect, useState } from 'react';
 
+import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
 
 export interface Props {
   text: string;
   className?: string;
   isLoading?: boolean;
+  onClick?: (event: React.MouseEvent) => void;
+  size?: number;
+  type?: 'link';
+  icon?: IconName;
+  variant?: string;
+  colorScheme?: string;
 }
 
-const CopyToClipboard = ({ text, className, isLoading }: Props) => {
+const CopyToClipboard = ({ text, className, isLoading, onClick, size = 5, type, icon, variant = 'simple', colorScheme }: Props) => {
   const { hasCopied, onCopy } = useClipboard(text, 1000);
   const [ copied, setCopied ] = useState(false);
   // have to implement controlled tooltip because of the issue - https://github.com/chakra-ui/chakra-ui/issues/7107
   const { isOpen, onOpen, onClose } = useDisclosure();
   const iconColor = useColorModeValue('gray.400', 'gray.500');
+  const iconName = icon || (type === 'link' ? 'link' : 'copy');
 
   useEffect(() => {
     if (hasCopied) {
@@ -24,22 +32,27 @@ const CopyToClipboard = ({ text, className, isLoading }: Props) => {
     }
   }, [ hasCopied ]);
 
+  const handleClick = React.useCallback((event: React.MouseEvent) => {
+    onCopy();
+    onClick?.(event);
+  }, [ onClick, onCopy ]);
+
   if (isLoading) {
-    return <Skeleton boxSize={ 5 } className={ className } borderRadius="sm" flexShrink={ 0 } ml={ 2 } display="inline-block"/>;
+    return <Skeleton boxSize={ size } className={ className } borderRadius="sm" flexShrink={ 0 } ml={ 2 } display="inline-block"/>;
   }
 
   return (
-    <Tooltip label={ copied ? 'Copied' : 'Copy to clipboard' } isOpen={ isOpen || copied }>
+    <Tooltip label={ copied ? 'Copied' : `Copy${ type === 'link' ? ' link ' : ' ' }to clipboard` } isOpen={ isOpen || copied }>
       <IconButton
         aria-label="copy"
-        icon={ <IconSvg name="copy" boxSize={ 5 }/> }
-        w="20px"
-        h="20px"
+        icon={ <IconSvg name={ iconName } boxSize={ size }/> }
+        boxSize={ size }
         color={ iconColor }
-        variant="simple"
+        variant={ variant }
+        colorScheme={ colorScheme }
         display="inline-block"
         flexShrink={ 0 }
-        onClick={ onCopy }
+        onClick={ handleClick }
         className={ className }
         onMouseEnter={ onOpen }
         onMouseLeave={ onClose }
diff --git a/ui/shared/CurrencyValue.tsx b/ui/shared/CurrencyValue.tsx
index fa10cd09b3..4b4bf7b3a9 100644
--- a/ui/shared/CurrencyValue.tsx
+++ b/ui/shared/CurrencyValue.tsx
@@ -1,4 +1,4 @@
-import { Box, Text, chakra, Skeleton } from '@chakra-ui/react';
+import { chakra, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
@@ -23,20 +23,20 @@ const CurrencyValue = ({ value, currency = '', decimals, exchangeRate, className
 
   if (value === undefined || value === null) {
     return (
-      <Box as="span" className={ className }>
-        <Text>N/A</Text>
-      </Box>
+      <chakra.span className={ className }>
+        -
+      </chakra.span>
     );
   }
   const { valueStr: valueResult, usd: usdResult } = getCurrencyValue({ value, accuracy, accuracyUsd, exchangeRate, decimals });
 
   return (
-    <Box as="span" className={ className } display="inline-flex" rowGap={ 3 } columnGap={ 1 }>
-      <Text display="inline-block">
+    <chakra.span className={ className } display="inline-flex" rowGap={ 3 } columnGap={ 1 }>
+      <chakra.span display="inline-block">
         { valueResult }{ currency ? ` ${ currency }` : '' }
-      </Text>
-      { usdResult && <Text as="span" variant="secondary" fontWeight={ 400 }>(${ usdResult })</Text> }
-    </Box>
+      </chakra.span>
+      { usdResult && <chakra.span color="text_secondary" fontWeight={ 400 }>(${ usdResult })</chakra.span> }
+    </chakra.span>
   );
 };
 
diff --git a/ui/shared/DataListDisplay.tsx b/ui/shared/DataListDisplay.tsx
index 550ab47912..c53d4acbe4 100644
--- a/ui/shared/DataListDisplay.tsx
+++ b/ui/shared/DataListDisplay.tsx
@@ -13,8 +13,9 @@ type FilterProps = {
 type Props = {
   isError: boolean;
   items?: Array<unknown>;
-  emptyText: string;
+  emptyText: React.ReactNode;
   actionBar?: React.ReactNode;
+  showActionBarIfEmpty?: boolean;
   content: React.ReactNode;
   className?: string;
   filterProps?: FilterProps;
@@ -35,7 +36,12 @@ const DataListDisplay = (props: Props) => {
   }
 
   if (!props.items?.length) {
-    return props.emptyText ? <Text className={ props.className }>{ props.emptyText }</Text> : null;
+    return (
+      <>
+        { props.showActionBarIfEmpty && props.actionBar }
+        { props.emptyText && <Text className={ props.className }>{ props.emptyText }</Text> }
+      </>
+    );
   }
 
   return (
diff --git a/ui/shared/DetailsActionsWrapper.tsx b/ui/shared/DetailsActionsWrapper.tsx
index a65932c4fa..8596fc8ee3 100644
--- a/ui/shared/DetailsActionsWrapper.tsx
+++ b/ui/shared/DetailsActionsWrapper.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
 
-import ContainerWithScrollY from 'ui/shared/ContainerWithScrollY';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 
 export const TX_ACTIONS_BLOCK_ID = 'tx-actions';
-const SCROLL_GRADIENT_HEIGHT = 48;
 
 type Props = {
   children: React.ReactNode;
@@ -13,38 +11,30 @@ type Props = {
 }
 
 const DetailsActionsWrapper = ({ children, isLoading, type }: Props) => {
-  const containerRef = React.useRef<HTMLDivElement>(null);
   const [ hasScroll, setHasScroll ] = React.useState(false);
 
-  React.useEffect(() => {
-    if (!containerRef.current) {
-      return;
-    }
-
-    setHasScroll(containerRef.current.scrollHeight >= containerRef.current.clientHeight + SCROLL_GRADIENT_HEIGHT / 2);
-  }, []);
-
   return (
-    <DetailsInfoItem
-      title={ `${ type === 'tx' ? 'Transaction' : 'User operation' } action` }
-      hint={ `Highlighted events of the ${ type === 'tx' ? 'transaction' : 'user operation' }` }
-      note={ hasScroll ? 'Scroll to see more' : undefined }
-      position="relative"
-      isLoading={ isLoading }
-    >
-      <ContainerWithScrollY
-        containerId={ TX_ACTIONS_BLOCK_ID }
-        gradientHeight={ SCROLL_GRADIENT_HEIGHT }
+    <>
+      <DetailsInfoItem.Label
+        id={ TX_ACTIONS_BLOCK_ID }
+        hint={ `Highlighted events of the ${ type === 'tx' ? 'transaction' : 'user operation' }` }
+        isLoading={ isLoading }
         hasScroll={ hasScroll }
+      >
+        <span>{ `${ type === 'tx' ? 'Transaction' : 'User operation' } action` }</span>
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.ValueWithScroll
+        gradientHeight={ 48 }
+        onScrollVisibilityChange={ setHasScroll }
         alignItems="stretch"
         rowGap={ 5 }
         w="100%"
         maxH="200px"
-        ref={ containerRef }
       >
         { children }
-      </ContainerWithScrollY>
-    </DetailsInfoItem>
+      </DetailsInfoItem.ValueWithScroll>
+
+    </>
   );
 };
 
diff --git a/ui/shared/DetailsInfoItem.tsx b/ui/shared/DetailsInfoItem.tsx
index 1aa81cae90..bae00ec3ad 100644
--- a/ui/shared/DetailsInfoItem.tsx
+++ b/ui/shared/DetailsInfoItem.tsx
@@ -1,46 +1,87 @@
-import { GridItem, Flex, Text, Skeleton } from '@chakra-ui/react';
-import type { HTMLChakraProps } from '@chakra-ui/system';
+import { chakra, GridItem, Flex, Text, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
+import * as ContainerWithScrollY from 'ui/shared/ContainerWithScrollY';
 import Hint from 'ui/shared/Hint';
+import HintPopover from 'ui/shared/HintPopover';
 
-interface Props extends Omit<HTMLChakraProps<'div'>, 'title'> {
-  title: React.ReactNode;
-  hint?: string;
+const LabelScrollText = () => (
+  <Text fontWeight={ 500 } variant="secondary" fontSize="xs" className="note" align="right">
+    Scroll to see more
+  </Text>
+);
+
+interface LabelProps {
+  hint?: React.ReactNode;
   children: React.ReactNode;
-  note?: string;
   isLoading?: boolean;
+  className?: string;
+  id?: string;
+  hasScroll?: boolean;
+  type?: 'tooltip' | 'popover';
+}
+
+const Label = chakra(({ hint, children, isLoading, id, className, hasScroll, type }: LabelProps) => {
+  return (
+    <GridItem
+      id={ id }
+      className={ className }
+      py={ 1 }
+      lineHeight={{ base: 5, lg: 6 }}
+      _notFirst={{ mt: { base: 3, lg: 0 } }}
+    >
+      <Flex columnGap={ 2 } alignItems="flex-start">
+        { hint && (type === 'popover' ?
+          <HintPopover label={ hint } isLoading={ isLoading } my={{ lg: '2px' }}/> :
+          <Hint label={ hint } isLoading={ isLoading } my={{ lg: '2px' }}/>) }
+        <Skeleton isLoaded={ !isLoading } fontWeight={{ base: 700, lg: 500 }}>
+          { children }
+          { hasScroll && <LabelScrollText/> }
+        </Skeleton>
+      </Flex>
+    </GridItem>
+  );
+});
+
+interface ValueProps {
+  children: React.ReactNode;
+  className?: string;
 }
 
-const DetailsInfoItem = ({ title, hint, note, children, id, isLoading, ...styles }: Props) => {
+const Value = chakra(({ children, className }: ValueProps) => {
+  return (
+    <GridItem
+      className={ className }
+      display="flex"
+      alignItems="center"
+      flexWrap="wrap"
+      rowGap={ 3 }
+      pl={{ base: 7, lg: 0 }}
+      py={ 1 }
+      lineHeight={{ base: 5, lg: 6 }}
+      whiteSpace="nowrap"
+    >
+      { children }
+    </GridItem>
+  );
+});
+
+const ValueWithScroll = chakra(({ children, gradientHeight, onScrollVisibilityChange, className }: ContainerWithScrollY.Props) => {
   return (
-    <>
-      <GridItem py={{ base: 1, lg: 2 }} id={ id } lineHeight={ 5 } { ...styles } _notFirst={{ mt: { base: 3, lg: 0 } }}>
-        <Flex columnGap={ 2 } alignItems="flex-start">
-          { hint && <Hint label={ hint } isLoading={ isLoading }/> }
-          <Skeleton isLoaded={ !isLoading }>
-            <Text fontWeight={{ base: 700, lg: 500 }}>
-              { title }
-              { note && <Text fontWeight={ 500 } variant="secondary" fontSize="xs" className="note" align="right">{ note }</Text> }
-            </Text>
-          </Skeleton>
-        </Flex>
-      </GridItem>
-      <GridItem
-        display="flex"
-        alignItems="center"
-        flexWrap="wrap"
-        rowGap={ 3 }
-        pl={{ base: 7, lg: 0 }}
-        py={{ base: 1, lg: 2 }}
-        lineHeight={ 5 }
-        whiteSpace="nowrap"
-        { ...styles }
+    <Value position="relative">
+      <ContainerWithScrollY.default
+        className={ className }
+        gradientHeight={ gradientHeight }
+        onScrollVisibilityChange={ onScrollVisibilityChange }
       >
         { children }
-      </GridItem>
-    </>
+      </ContainerWithScrollY.default>
+    </Value>
   );
-};
+});
 
-export default DetailsInfoItem;
+export {
+  Label,
+  Value,
+  ValueWithScroll,
+};
diff --git a/ui/shared/DetailsSponsoredItem.tsx b/ui/shared/DetailsSponsoredItem.tsx
index 59fe6bc352..a53273f214 100644
--- a/ui/shared/DetailsSponsoredItem.tsx
+++ b/ui/shared/DetailsSponsoredItem.tsx
@@ -5,7 +5,7 @@ import config from 'configs/app';
 import * as cookies from 'lib/cookies';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AdBanner from 'ui/shared/ad/AdBanner';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 
 const feature = config.features.adsBanner;
 
@@ -17,7 +17,7 @@ const DetailsSponsoredItem = ({ isLoading }: Props) => {
   const isMobile = useIsMobile();
   const hasAdblockCookie = cookies.get(cookies.NAMES.ADBLOCK_DETECTED);
 
-  if (!feature.isEnabled || hasAdblockCookie) {
+  if (!feature.isEnabled || hasAdblockCookie === 'true') {
     return null;
   }
 
@@ -30,13 +30,17 @@ const DetailsSponsoredItem = ({ isLoading }: Props) => {
   }
 
   return (
-    <DetailsInfoItem
-      title="Sponsored"
-      hint="Sponsored banner advertisement"
-      isLoading={ isLoading }
-    >
-      <AdBanner isLoading={ isLoading }/>
-    </DetailsInfoItem>
+    <>
+      <DetailsInfoItem.Label
+        hint="Sponsored banner advertisement"
+        isLoading={ isLoading }
+      >
+        Sponsored
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <AdBanner isLoading={ isLoading }/>
+      </DetailsInfoItem.Value>
+    </>
   );
 };
 
diff --git a/ui/shared/EmptySearchResult.tsx b/ui/shared/EmptySearchResult.tsx
index 92c27fbecc..ae4db4d8db 100644
--- a/ui/shared/EmptySearchResult.tsx
+++ b/ui/shared/EmptySearchResult.tsx
@@ -1,4 +1,4 @@
-import { Box, Heading, Text, Icon } from '@chakra-ui/react';
+import { Box, Heading, Icon } from '@chakra-ui/react';
 import React from 'react';
 
 // This icon doesn't work properly when it is in the sprite
@@ -16,25 +16,23 @@ const EmptySearchResult = ({ text }: Props) => {
       display="flex"
       flexDirection="column"
       alignItems="center"
+      justifyContent="center"
+      mt="50px"
     >
-      <Icon as={ emptySearchResultIcon } boxSize={ 60 }/>
+      <Icon
+        as={ emptySearchResultIcon }
+        w={{ base: '160px', sm: '240px' }}
+        h="auto"
+        mb={{ base: 4, sm: 6 }}
+      />
 
-      <Heading
-        as="h3"
-        marginBottom={ 2 }
-        fontSize={{ base: '2xl', sm: '3xl' }}
-        fontWeight="semibold"
-      >
+      <Heading as="h4" size="sm" mb={ 2 }>
         No results
       </Heading>
 
-      <Text
-        fontSize={{ base: 'sm' }}
-        variant="secondary"
-        align="center"
-      >
+      <Box fontSize={{ base: 'sm', sm: 'md' }} textAlign="center">
         { text }
-      </Text>
+      </Box>
     </Box>
   );
 };
diff --git a/ui/shared/EntityTags.tsx b/ui/shared/EntityTags.tsx
deleted file mode 100644
index 40245f7984..0000000000
--- a/ui/shared/EntityTags.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import type { ThemingProps } from '@chakra-ui/react';
-import { Flex, chakra, useDisclosure, Popover, PopoverTrigger, PopoverContent, PopoverBody, Box } from '@chakra-ui/react';
-import React from 'react';
-
-import type { UserTags } from 'types/api/addressParams';
-
-import config from 'configs/app';
-import useIsMobile from 'lib/hooks/useIsMobile';
-import Tag from 'ui/shared/chakra/Tag';
-
-interface TagData {
-  label: string;
-  display_name: string;
-  colorScheme?: ThemingProps<'Tag'>['colorScheme'];
-  variant?: ThemingProps<'Tag'>['variant'];
-}
-
-interface Props {
-  className?: string;
-  data?: UserTags;
-  isLoading?: boolean;
-  tagsBefore?: Array<TagData | undefined>;
-  tagsAfter?: Array<TagData | undefined>;
-  contentAfter?: React.ReactNode;
-}
-
-const EntityTags = ({ className, data, tagsBefore = [], tagsAfter = [], isLoading, contentAfter }: Props) => {
-  const isMobile = useIsMobile();
-  const { isOpen, onToggle, onClose } = useDisclosure();
-
-  const tags: Array<TagData> = [
-    ...tagsBefore,
-    ...(data?.private_tags || []),
-    ...(data?.public_tags || []),
-    ...(data?.watchlist_names || []),
-    ...tagsAfter,
-  ]
-    .filter(Boolean);
-
-  const metaSuitesPlaceholder = config.features.metasuites.isEnabled ?
-    <Box display="none" id="meta-suites__address-tag" data-ready={ !isLoading }/> :
-    null;
-
-  if (tags.length === 0 && !contentAfter) {
-    return metaSuitesPlaceholder;
-  }
-
-  const content = (() => {
-    if (isMobile && tags.length > 2) {
-      return (
-        <>
-          {
-            tags
-              .slice(0, 2)
-              .map((tag) => (
-                <Tag
-                  key={ tag.label }
-                  isLoading={ isLoading }
-                  isTruncated
-                  maxW={{ base: '115px', lg: 'initial' }}
-                  colorScheme={ 'colorScheme' in tag ? tag.colorScheme : 'gray' }
-                  variant={ 'variant' in tag ? tag.variant : 'subtle' }
-                >
-                  { tag.display_name }
-                </Tag>
-              ))
-          }
-          { metaSuitesPlaceholder }
-          <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
-            <PopoverTrigger>
-              <Tag isLoading={ isLoading }onClick={ onToggle }>+{ tags.length - 1 }</Tag>
-            </PopoverTrigger>
-            <PopoverContent w="240px">
-              <PopoverBody >
-                <Flex columnGap={ 2 } rowGap={ 2 } flexWrap="wrap">
-                  {
-                    tags
-                      .slice(2)
-                      .map((tag) => (
-                        <Tag
-                          key={ tag.label }
-                          colorScheme={ 'colorScheme' in tag ? tag.colorScheme : 'gray' }
-                          variant={ 'variant' in tag ? tag.variant : 'subtle' }
-                        >
-                          { tag.display_name }
-                        </Tag>
-                      ))
-                  }
-                </Flex>
-              </PopoverBody>
-            </PopoverContent>
-          </Popover>
-        </>
-      );
-    }
-
-    return (
-      <>
-        { tags.map((tag) => (
-          <Tag
-            key={ tag.label }
-            isLoading={ isLoading }
-            isTruncated
-            maxW={{ base: '115px', lg: 'initial' }}
-            colorScheme={ 'colorScheme' in tag ? tag.colorScheme : 'gray' }
-            variant={ 'variant' in tag ? tag.variant : 'subtle' }
-          >
-            { tag.display_name }
-          </Tag>
-        )) }
-        { metaSuitesPlaceholder }
-      </>
-    );
-  })();
-
-  return (
-    <Flex className={ className } columnGap={ 2 } rowGap={ 2 } flexWrap="wrap" alignItems="center" flexGrow={ 1 }>
-      { content }
-      { contentAfter }
-    </Flex>
-  );
-};
-
-export default React.memo(chakra(EntityTags));
diff --git a/ui/shared/EntityTags/EntityTag.pw.tsx b/ui/shared/EntityTags/EntityTag.pw.tsx
new file mode 100644
index 0000000000..1e4f98a28f
--- /dev/null
+++ b/ui/shared/EntityTags/EntityTag.pw.tsx
@@ -0,0 +1,42 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import * as addressMetadataMock from 'mocks/metadata/address';
+import { test, expect } from 'playwright/lib';
+
+import EntityTag from './EntityTag';
+
+test.use({ viewport: { width: 400, height: 300 } });
+
+test('custom name tag +@dark-mode', async({ render }) => {
+  const component = await render(<Box w="200px"><EntityTag data={ addressMetadataMock.customNameTag }/></Box>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('warpcast tag', async({ render }) => {
+  const component = await render(<Box w="200px"><EntityTag data={ addressMetadataMock.warpcastTag }/></Box>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('generic tag +@dark-mode', async({ render }) => {
+  const component = await render(<Box w="200px"><EntityTag data={ addressMetadataMock.genericTag }/></Box>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('protocol tag +@dark-mode', async({ render }) => {
+  const component = await render(<Box w="200px"><EntityTag data={ addressMetadataMock.protocolTag }/></Box>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('tag with link and long name +@dark-mode', async({ render }) => {
+  const component = await render(<EntityTag data={ addressMetadataMock.infoTagWithLink } maxW="300px"/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('tag with tooltip +@dark-mode', async({ render, page, mockAssetResponse }) => {
+  await mockAssetResponse(addressMetadataMock.tagWithTooltip.meta?.tooltipIcon as string, './playwright/mocks/image_s.jpg');
+  const component = await render(<EntityTag data={ addressMetadataMock.tagWithTooltip }/>);
+  await component.getByText('BlockscoutHeroes').hover();
+  await page.getByText('Blockscout team member').waitFor({ state: 'visible' });
+  await expect(page).toHaveScreenshot();
+});
diff --git a/ui/shared/EntityTags/EntityTag.tsx b/ui/shared/EntityTags/EntityTag.tsx
new file mode 100644
index 0000000000..477acc087d
--- /dev/null
+++ b/ui/shared/EntityTags/EntityTag.tsx
@@ -0,0 +1,76 @@
+import type { ResponsiveValue } from '@chakra-ui/react';
+import { chakra, Image, Skeleton, Tag } from '@chakra-ui/react';
+import React from 'react';
+
+import type { EntityTag as TEntityTag } from './types';
+
+import IconSvg from 'ui/shared/IconSvg';
+import TruncatedValue from 'ui/shared/TruncatedValue';
+
+import EntityTagLink from './EntityTagLink';
+import EntityTagPopover from './EntityTagPopover';
+import { getTagLinkParams } from './utils';
+
+interface Props {
+  data: TEntityTag;
+  isLoading?: boolean;
+  maxW?: ResponsiveValue<string>;
+  noLink?: boolean;
+}
+
+const EntityTag = ({ data, isLoading, maxW, noLink }: Props) => {
+
+  if (isLoading) {
+    return <Skeleton borderRadius="sm" w="100px" h="24px"/>;
+  }
+
+  const hasLink = !noLink && Boolean(getTagLinkParams(data));
+  const iconColor = data.meta?.textColor ?? 'gray.400';
+
+  const name = (() => {
+    if (data.meta?.warpcastHandle) {
+      return `@${ data.meta.warpcastHandle }`;
+    }
+
+    return data.name;
+  })();
+
+  const icon = (() => {
+    if (data.meta?.tagIcon) {
+      return <Image boxSize={ 3 } mr={ 1 } flexShrink={ 0 } src={ data.meta.tagIcon } alt={ `${ data.name } icon` }/>;
+    }
+
+    if (data.tagType === 'name') {
+      return <IconSvg name="publictags_slim" boxSize={ 3 } mr={ 1 } flexShrink={ 0 } color={ iconColor }/>;
+    }
+
+    if (data.tagType === 'protocol' || data.tagType === 'generic') {
+      return <chakra.span color={ iconColor } whiteSpace="pre"># </chakra.span>;
+    }
+
+    return null;
+  })();
+
+  return (
+    <EntityTagPopover data={ data }>
+      <Tag
+        display="flex"
+        alignItems="center"
+        minW={ 0 }
+        w="fit-content"
+        maxW={ maxW }
+        bg={ data.meta?.bgColor }
+        color={ data.meta?.textColor }
+        colorScheme={ hasLink ? 'gray-blue' : 'gray' }
+        _hover={ hasLink ? { opacity: 0.76 } : undefined }
+      >
+        <EntityTagLink data={ data } noLink={ noLink }>
+          { icon }
+          <TruncatedValue value={ name } tooltipPlacement="top"/>
+        </EntityTagLink>
+      </Tag>
+    </EntityTagPopover>
+  );
+};
+
+export default React.memo(EntityTag);
diff --git a/ui/shared/EntityTags/EntityTagLink.tsx b/ui/shared/EntityTags/EntityTagLink.tsx
new file mode 100644
index 0000000000..e061825286
--- /dev/null
+++ b/ui/shared/EntityTags/EntityTagLink.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+
+import type { EntityTag } from './types';
+
+import * as mixpanel from 'lib/mixpanel/index';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+import { getTagLinkParams } from './utils';
+
+interface Props {
+  data: EntityTag;
+  children: React.ReactNode;
+  noLink?: boolean;
+}
+
+const EntityTagLink = ({ data, children, noLink }: Props) => {
+
+  const linkParams = !noLink ? getTagLinkParams(data) : undefined;
+
+  const handleLinkClick = React.useCallback(() => {
+    if (!linkParams?.href) {
+      return;
+    }
+
+    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, {
+      Type: 'Address tag',
+      Info: data.slug,
+      URL: linkParams.href,
+    });
+  }, [ linkParams?.href, data.slug ]);
+
+  const linkProps = {
+    color: 'inherit',
+    display: 'inline-flex',
+    overflow: 'hidden',
+    _hover: { textDecor: 'none', color: 'inherit' },
+    onClick: handleLinkClick,
+  };
+
+  if (linkParams?.type === 'internal') {
+    return (
+      <LinkInternal
+        { ...linkProps }
+        href={ linkParams.href }
+      >
+        { children }
+      </LinkInternal>
+    );
+  }
+
+  if (linkParams?.type === 'external') {
+    return (
+      <LinkExternal
+        { ...linkProps }
+        href={ linkParams.href }
+        iconColor={ data.meta?.textColor }
+      >
+        { children }
+      </LinkExternal>
+    );
+  }
+
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{ children }</>;
+};
+
+export default React.memo(EntityTagLink);
diff --git a/ui/shared/EntityTags/EntityTagPopover.tsx b/ui/shared/EntityTags/EntityTagPopover.tsx
new file mode 100644
index 0000000000..f25531e9e8
--- /dev/null
+++ b/ui/shared/EntityTags/EntityTagPopover.tsx
@@ -0,0 +1,62 @@
+import { chakra, Image, Flex, PopoverArrow, PopoverBody, PopoverContent, PopoverTrigger, useColorModeValue, DarkMode } from '@chakra-ui/react';
+import React from 'react';
+
+import type { EntityTag } from './types';
+
+import makePrettyLink from 'lib/makePrettyLink';
+import * as mixpanel from 'lib/mixpanel/index';
+import Popover from 'ui/shared/chakra/Popover';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+
+interface Props {
+  data: EntityTag;
+  children: React.ReactNode;
+}
+
+const EntityTagPopover = ({ data, children }: Props) => {
+  const bgColor = useColorModeValue('gray.700', 'gray.900');
+  const link = makePrettyLink(data.meta?.tooltipUrl);
+  const hasPopover = Boolean(data.meta?.tooltipIcon || data.meta?.tooltipTitle || data.meta?.tooltipDescription || data.meta?.tooltipUrl);
+
+  const handleLinkClick = React.useCallback(() => {
+    if (!data.meta?.tooltipUrl) {
+      return;
+    }
+
+    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, {
+      Type: 'Address tag',
+      Info: data.slug,
+      URL: data.meta.tooltipUrl,
+    });
+  }, [ data.meta?.tooltipUrl, data.slug ]);
+
+  if (!hasPopover) {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <>{ children }</>;
+  }
+
+  return (
+    <Popover trigger="hover" isLazy gutter={ 8 }>
+      <PopoverTrigger>
+        { children }
+      </PopoverTrigger>
+      <PopoverContent bgColor={ bgColor } borderRadius="sm" maxW="280px" w="fit-content">
+        <PopoverArrow bgColor={ bgColor }/>
+        <DarkMode>
+          <PopoverBody color="white" p={ 2 } fontSize="sm" display="flex" flexDir="column" rowGap={ 2 }>
+            { (data.meta?.tooltipIcon || data.meta?.tooltipTitle) && (
+              <Flex columnGap={ 3 } alignItems="center">
+                { data.meta?.tooltipIcon && <Image src={ data.meta.tooltipIcon } boxSize="30px" alt={ `${ data.name } tag logo` }/> }
+                { data.meta?.tooltipTitle && <chakra.span fontWeight="600">{ data.meta.tooltipTitle }</chakra.span> }
+              </Flex>
+            ) }
+            { data.meta?.tooltipDescription && <chakra.span>{ data.meta.tooltipDescription }</chakra.span> }
+            { link && <LinkExternal href={ link.url } onClick={ handleLinkClick }>{ link.domain }</LinkExternal> }
+          </PopoverBody>
+        </DarkMode>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default React.memo(EntityTagPopover);
diff --git a/ui/shared/EntityTags/EntityTags.pw.tsx b/ui/shared/EntityTags/EntityTags.pw.tsx
new file mode 100644
index 0000000000..a5d3cc138c
--- /dev/null
+++ b/ui/shared/EntityTags/EntityTags.pw.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import * as addressMetadataMock from 'mocks/metadata/address';
+import { test, expect } from 'playwright/lib';
+
+import EntityTags from './EntityTags';
+
+test('mixed name length +@mobile', async({ render }) => {
+  const data = [
+    addressMetadataMock.protocolTagWithMeta,
+    addressMetadataMock.infoTagWithLink,
+    addressMetadataMock.genericTag,
+    addressMetadataMock.tagWithTooltip,
+  ];
+  const component = await render(<EntityTags tags={ data }/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('one tag with long name +@mobile -@default', async({ render }) => {
+  const data = [
+    addressMetadataMock.infoTagWithLink,
+  ];
+  const component = await render(<EntityTags tags={ data }/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/shared/EntityTags/EntityTags.tsx b/ui/shared/EntityTags/EntityTags.tsx
new file mode 100644
index 0000000000..a9cfa0cf17
--- /dev/null
+++ b/ui/shared/EntityTags/EntityTags.tsx
@@ -0,0 +1,75 @@
+import { Box, Flex, PopoverBody, PopoverContent, PopoverTrigger, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { EntityTag as TEntityTag } from './types';
+
+import config from 'configs/app';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import Popover from 'ui/shared/chakra/Popover';
+import Tag from 'ui/shared/chakra/Tag';
+
+import EntityTag from './EntityTag';
+
+interface Props {
+  className?: string;
+  tags: Array<TEntityTag>;
+  isLoading?: boolean;
+}
+
+const EntityTags = ({ tags, className, isLoading }: Props) => {
+  const isMobile = useIsMobile();
+  const visibleNum = isMobile ? 2 : 3;
+
+  const metaSuitesPlaceholder = config.features.metasuites.isEnabled ?
+    <Box display="none" id="meta-suites__address-tag" data-ready={ !isLoading }/> :
+    null;
+
+  if (tags.length === 0) {
+    return metaSuitesPlaceholder;
+  }
+
+  const content = (() => {
+    const tagMaxW = {
+      base: tags.length === 1 ? '100%' : '60%',
+      lg: '300px',
+    };
+
+    if (tags.length > visibleNum) {
+      return (
+        <>
+          { tags.slice(0, visibleNum).map((tag) => <EntityTag key={ tag.slug } data={ tag } isLoading={ isLoading } maxW={ tagMaxW }/>) }
+          { metaSuitesPlaceholder }
+          <Popover trigger="click" placement="bottom-start" isLazy>
+            <PopoverTrigger>
+              <Tag isLoading={ isLoading } cursor="pointer" as="button" _hover={{ color: 'link_hovered' }}>
+                +{ tags.length - visibleNum }
+              </Tag>
+            </PopoverTrigger>
+            <PopoverContent w="300px">
+              <PopoverBody >
+                <Flex columnGap={ 2 } rowGap={ 2 } flexWrap="wrap">
+                  { tags.slice(visibleNum).map((tag) => <EntityTag key={ tag.slug } data={ tag }/>) }
+                </Flex>
+              </PopoverBody>
+            </PopoverContent>
+          </Popover>
+        </>
+      );
+    }
+
+    return (
+      <>
+        { tags.map((tag) => <EntityTag key={ tag.slug } data={ tag } isLoading={ isLoading } maxW={ tagMaxW }/>) }
+        { metaSuitesPlaceholder }
+      </>
+    );
+  })();
+
+  return (
+    <Flex className={ className } columnGap={ 2 } rowGap={ 2 } flexWrap="nowrap" alignItems="center" flexGrow={ 1 } maxW="100%">
+      { content }
+    </Flex>
+  );
+};
+
+export default React.memo(chakra(EntityTags));
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_custom-name-tag-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_custom-name-tag-dark-mode-1.png
new file mode 100644
index 0000000000..9d262ae0e9
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_custom-name-tag-dark-mode-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_generic-tag-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_generic-tag-dark-mode-1.png
new file mode 100644
index 0000000000..b2e1be029d
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_generic-tag-dark-mode-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_protocol-tag-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_protocol-tag-dark-mode-1.png
new file mode 100644
index 0000000000..41836e3717
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_protocol-tag-dark-mode-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_tag-with-link-and-long-name-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_tag-with-link-and-long-name-dark-mode-1.png
new file mode 100644
index 0000000000..b3073c2e52
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_tag-with-link-and-long-name-dark-mode-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_tag-with-tooltip-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_tag-with-tooltip-dark-mode-1.png
new file mode 100644
index 0000000000..60abf294c3
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_dark-color-mode_tag-with-tooltip-dark-mode-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_custom-name-tag-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_custom-name-tag-dark-mode-1.png
new file mode 100644
index 0000000000..74c3608e16
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_custom-name-tag-dark-mode-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_generic-tag-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_generic-tag-dark-mode-1.png
new file mode 100644
index 0000000000..ea6ce005b5
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_generic-tag-dark-mode-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_protocol-tag-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_protocol-tag-dark-mode-1.png
new file mode 100644
index 0000000000..c5de547a2d
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_protocol-tag-dark-mode-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_tag-with-link-and-long-name-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_tag-with-link-and-long-name-dark-mode-1.png
new file mode 100644
index 0000000000..5db94fecfc
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_tag-with-link-and-long-name-dark-mode-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_tag-with-tooltip-dark-mode-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_tag-with-tooltip-dark-mode-1.png
new file mode 100644
index 0000000000..24b330bef9
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_tag-with-tooltip-dark-mode-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_warpcast-tag-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_warpcast-tag-1.png
new file mode 100644
index 0000000000..6ffc7fbff2
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_warpcast-tag-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTags.pw.tsx_default_mixed-name-length-mobile-1.png b/ui/shared/EntityTags/__screenshots__/EntityTags.pw.tsx_default_mixed-name-length-mobile-1.png
new file mode 100644
index 0000000000..329cafa4e1
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTags.pw.tsx_default_mixed-name-length-mobile-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTags.pw.tsx_mobile_mixed-name-length-mobile-1.png b/ui/shared/EntityTags/__screenshots__/EntityTags.pw.tsx_mobile_mixed-name-length-mobile-1.png
new file mode 100644
index 0000000000..a03e2509b7
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTags.pw.tsx_mobile_mixed-name-length-mobile-1.png differ
diff --git a/ui/shared/EntityTags/__screenshots__/EntityTags.pw.tsx_mobile_one-tag-with-long-name-mobile---default-1.png b/ui/shared/EntityTags/__screenshots__/EntityTags.pw.tsx_mobile_one-tag-with-long-name-mobile---default-1.png
new file mode 100644
index 0000000000..3666131c0a
Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTags.pw.tsx_mobile_one-tag-with-long-name-mobile---default-1.png differ
diff --git a/ui/shared/EntityTags/formatUserTags.ts b/ui/shared/EntityTags/formatUserTags.ts
new file mode 100644
index 0000000000..f644647ae0
--- /dev/null
+++ b/ui/shared/EntityTags/formatUserTags.ts
@@ -0,0 +1,9 @@
+import type { EntityTag } from './types';
+import type { UserTags } from 'types/api/addressParams';
+
+export default function formatUserTags(data: UserTags | undefined): Array<EntityTag> {
+  return [
+    ...(data?.private_tags || []).map((tag) => ({ slug: tag.label, name: tag.display_name, tagType: 'private_tag' as const, ordinal: 1_000 })),
+    ...(data?.watchlist_names || []).map((tag) => ({ slug: tag.label, name: tag.display_name, tagType: 'watchlist' as const, ordinal: 1_000 })),
+  ];
+}
diff --git a/ui/shared/EntityTags/sortEntityTags.ts b/ui/shared/EntityTags/sortEntityTags.ts
new file mode 100644
index 0000000000..8227829f5d
--- /dev/null
+++ b/ui/shared/EntityTags/sortEntityTags.ts
@@ -0,0 +1,13 @@
+import type { EntityTag } from './types';
+
+export default function sortEntityTags(tagA: EntityTag, tagB: EntityTag): number {
+  if (tagA.ordinal < tagB.ordinal) {
+    return 1;
+  }
+
+  if (tagA.ordinal > tagB.ordinal) {
+    return -1;
+  }
+
+  return 0;
+}
diff --git a/ui/shared/EntityTags/types.ts b/ui/shared/EntityTags/types.ts
new file mode 100644
index 0000000000..47a444f0ad
--- /dev/null
+++ b/ui/shared/EntityTags/types.ts
@@ -0,0 +1,9 @@
+import type { AddressMetadataTagType } from 'types/api/addressMetadata';
+import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
+
+export type EntityTagType = AddressMetadataTagType | 'custom' | 'watchlist' | 'private_tag';
+
+export interface EntityTag extends Pick<AddressMetadataTagFormatted, 'slug' | 'name' | 'ordinal'> {
+  tagType: EntityTagType;
+  meta?: AddressMetadataTagFormatted['meta'];
+}
diff --git a/ui/shared/EntityTags/utils.ts b/ui/shared/EntityTags/utils.ts
new file mode 100644
index 0000000000..4454d87872
--- /dev/null
+++ b/ui/shared/EntityTags/utils.ts
@@ -0,0 +1,26 @@
+import type { EntityTag } from './types';
+
+import { route } from 'nextjs-routes';
+
+export function getTagLinkParams(data: EntityTag): { type: 'external' | 'internal'; href: string } | undefined {
+  if (data.meta?.warpcastHandle) {
+    return {
+      type: 'external',
+      href: `https://warpcast.com/${ data.meta.warpcastHandle }`,
+    };
+  }
+
+  if (data.meta?.tagUrl) {
+    return {
+      type: 'external',
+      href: data.meta.tagUrl,
+    };
+  }
+
+  if (data.tagType === 'generic' || data.tagType === 'protocol') {
+    return {
+      type: 'internal',
+      href: route({ pathname: '/accounts/label/[slug]', query: { slug: data.slug, tagType: data.tagType, tagName: data.name } }),
+    };
+  }
+}
diff --git a/ui/shared/FancySelect/FancySelect.pw.tsx b/ui/shared/FancySelect/FancySelect.pw.tsx
index 451f7c1431..1c6ebcfcbd 100644
--- a/ui/shared/FancySelect/FancySelect.pw.tsx
+++ b/ui/shared/FancySelect/FancySelect.pw.tsx
@@ -1,8 +1,7 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import _noop from 'lodash/noop';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import FancySelect from './FancySelect';
 
@@ -24,15 +23,13 @@ const defaultProps = {
 
 [ 'md' as const, 'lg' as const ].forEach((size) => {
   test.describe(`size ${ size } +@dark-mode`, () => {
-    test('empty', async({ mount, page }) => {
-      const component = await mount(
-        <TestApp>
-          <FancySelect
-            { ...defaultProps }
-            size={ size }
-            value={ null }
-          />
-        </TestApp>,
+    test('empty', async({ render, page }) => {
+      const component = await render(
+        <FancySelect
+          { ...defaultProps }
+          size={ size }
+          value={ null }
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -42,33 +39,29 @@ const defaultProps = {
       await expect(page).toHaveScreenshot();
     });
 
-    test('filled', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <FancySelect
-            { ...defaultProps }
-            size={ size }
-            value={ OPTIONS[0] }
-          />
-        </TestApp>,
+    test('filled', async({ render }) => {
+      const component = await render(
+        <FancySelect
+          { ...defaultProps }
+          size={ size }
+          value={ OPTIONS[0] }
+        />,
       );
 
       await expect(component).toHaveScreenshot();
     });
 
-    test('error', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <FancySelect
-            { ...defaultProps }
-            size={ size }
-            value={ null }
-            error={{
-              type: 'unknown',
-              message: 'cannot be empty',
-            }}
-          />
-        </TestApp>,
+    test('error', async({ render }) => {
+      const component = await render(
+        <FancySelect
+          { ...defaultProps }
+          size={ size }
+          value={ null }
+          error={{
+            type: 'unknown',
+            message: 'cannot be empty',
+          }}
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -78,16 +71,27 @@ const defaultProps = {
       await expect(component).toHaveScreenshot();
     });
 
-    test('disabled', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <FancySelect
-            { ...defaultProps }
-            size={ size }
-            value={ OPTIONS[0] }
-            isDisabled
-          />
-        </TestApp>,
+    test('disabled', async({ render }) => {
+      const component = await render(
+        <FancySelect
+          { ...defaultProps }
+          size={ size }
+          value={ OPTIONS[0] }
+          isDisabled
+        />,
+      );
+
+      await expect(component).toHaveScreenshot();
+    });
+
+    test('read-only', async({ render }) => {
+      const component = await render(
+        <FancySelect
+          { ...defaultProps }
+          size={ size }
+          value={ OPTIONS[0] }
+          isReadOnly
+        />,
       );
 
       await expect(component).toHaveScreenshot();
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-disabled-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-disabled-1.png
index 824a246d35..bfda854567 100644
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-disabled-1.png and b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-disabled-1.png differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-1.png
index 4d2f7c9139..a5528e9390 100644
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-1.png and b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-1.png differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-2.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-2.png
index b0af0b7c9d..7926b0fd51 100644
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-2.png and b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-empty-2.png differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-error-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-error-1.png
index c41d623c38..d267f0e5a5 100644
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-error-1.png and b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-error-1.png differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-error-2.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-error-2.png
index e003c56003..acc6d6b11a 100644
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-error-2.png and b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-error-2.png differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-read-only-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-read-only-1.png
new file mode 100644
index 0000000000..2469511af6
Binary files /dev/null and b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-lg-dark-mode-read-only-1.png differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-disabled-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-disabled-1.png
index bd749c0644..9c8f75de17 100644
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-disabled-1.png and b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-disabled-1.png differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-empty-2.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-empty-2.png
index bcacccb625..8ef301e424 100644
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-empty-2.png and b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-empty-2.png differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-error-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-error-1.png
index 537ff71be1..3701d8df29 100644
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-error-1.png and b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-error-1.png differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-error-2.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-error-2.png
index ee950f61b3..afb391da40 100644
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-error-2.png and b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-error-2.png differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-read-only-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-read-only-1.png
new file mode 100644
index 0000000000..5665d18e57
Binary files /dev/null and b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_dark-color-mode_size-md-dark-mode-read-only-1.png differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-disabled-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-disabled-1.png
index a12ffe5ac0..4eadc17bcb 100644
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-disabled-1.png and b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-disabled-1.png differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-empty-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-empty-1.png
index 7847b9f0f7..71cf81630b 100644
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-empty-1.png and b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-empty-1.png differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-error-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-error-1.png
index 1d67180b47..b4c839bcee 100644
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-error-1.png and b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-error-1.png differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-read-only-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-read-only-1.png
new file mode 100644
index 0000000000..c5e1a34c88
Binary files /dev/null and b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-lg-dark-mode-read-only-1.png differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-disabled-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-disabled-1.png
index 9371c78e65..7374a323ae 100644
Binary files a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-disabled-1.png and b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-disabled-1.png differ
diff --git a/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-read-only-1.png b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-read-only-1.png
new file mode 100644
index 0000000000..9d76a6a501
Binary files /dev/null and b/ui/shared/FancySelect/__screenshots__/FancySelect.pw.tsx_default_size-md-dark-mode-read-only-1.png differ
diff --git a/ui/shared/FancySelect/utils.ts b/ui/shared/FancySelect/utils.ts
index ceef11a867..ac9eb1b830 100644
--- a/ui/shared/FancySelect/utils.ts
+++ b/ui/shared/FancySelect/utils.ts
@@ -3,6 +3,9 @@ import type { Size, ChakraStylesConfig } from 'chakra-react-select';
 
 import type { Option } from './types';
 
+import theme from 'theme/theme';
+import getFormStyles from 'theme/utils/getFormStyles';
+
 function getValueContainerStyles(size?: Size) {
   switch (size) {
     case 'sm':
@@ -42,13 +45,12 @@ function getSingleValueStyles(size?: Size) {
 }
 
 const getChakraStyles: (colorMode: ColorMode) => ChakraStylesConfig<Option> = (colorMode) => {
-  const emptyInputBorderColor = colorMode === 'dark' ? 'gray.700' : 'gray.100';
-  const filledInputBorderColor = colorMode === 'dark' ? 'gray.600' : 'gray.300';
+  const formColor = getFormStyles({ colorMode, colorScheme: 'blue', theme });
 
   return {
     control: (provided, state) => ({
       ...provided,
-      borderColor: state.hasValue ? filledInputBorderColor : emptyInputBorderColor,
+      borderColor: state.hasValue ? formColor.input.filled.borderColor : formColor.input.empty.borderColor,
     }),
     inputContainer: (provided) => ({
       ...provided,
diff --git a/ui/shared/HashStringShortenDynamic.tsx b/ui/shared/HashStringShortenDynamic.tsx
index 146891a5c6..15ea78a41c 100644
--- a/ui/shared/HashStringShortenDynamic.tsx
+++ b/ui/shared/HashStringShortenDynamic.tsx
@@ -108,7 +108,7 @@ const HashStringShortenDynamic = ({ hash, fontWeight = '400', isTooltipDisabled,
 
   if (isTruncated) {
     return (
-      <Tooltip label={ hash } isDisabled={ isTooltipDisabled } maxW={{ base: '100vw', lg: '400px' }}>{ content }</Tooltip>
+      <Tooltip label={ hash } isDisabled={ isTooltipDisabled } maxW={{ base: 'calc(100vw - 8px)', lg: '400px' }}>{ content }</Tooltip>
     );
   }
 
diff --git a/ui/shared/Hint.tsx b/ui/shared/Hint.tsx
index 1e4da78755..5aac2b52e5 100644
--- a/ui/shared/Hint.tsx
+++ b/ui/shared/Hint.tsx
@@ -28,14 +28,14 @@ const Hint = ({ label, className, tooltipProps, isLoading }: Props) => {
     <Tooltip
       label={ label }
       placement="top"
-      maxW="320px"
+      maxW={{ base: 'calc(100vw - 8px)', lg: '320px' }}
       isOpen={ isOpen }
       { ...tooltipProps }
     >
       <IconButton
         colorScheme="none"
         aria-label="hint"
-        icon={ <IconSvg name="info" w="100%" h="100%"/> }
+        icon={ <IconSvg name="info" w="100%" h="100%" color="icon_info" _hover={{ color: 'link_hovered' }}/> }
         boxSize={ 5 }
         variant="simple"
         display="inline-block"
diff --git a/ui/shared/HintPopover.tsx b/ui/shared/HintPopover.tsx
new file mode 100644
index 0000000000..7dde21f4fa
--- /dev/null
+++ b/ui/shared/HintPopover.tsx
@@ -0,0 +1,57 @@
+import type {
+  PopoverBodyProps,
+  PopoverContentProps,
+  PopoverProps } from '@chakra-ui/react';
+import {
+  Skeleton,
+  DarkMode,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Portal,
+  chakra,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import Popover from 'ui/shared/chakra/Popover';
+
+import IconSvg from './IconSvg';
+
+interface Props {
+  label: React.ReactNode;
+  className?: string;
+  isLoading?: boolean;
+  popoverProps?: Partial<PopoverProps>;
+  popoverContentProps?: Partial<PopoverContentProps>;
+  popoverBodyProps?: Partial<PopoverBodyProps>;
+}
+
+const HintPopover = ({ label, isLoading, className, popoverProps, popoverContentProps, popoverBodyProps }: Props) => {
+  const bgColor = useColorModeValue('gray.700', 'gray.900');
+
+  if (isLoading) {
+    return <Skeleton className={ className } boxSize={ 5 } borderRadius="sm"/>;
+  }
+
+  return (
+    <Popover trigger="hover" isLazy placement="top" { ...popoverProps }>
+      <PopoverTrigger>
+        <IconSvg className={ className } name="info" boxSize={ 5 } color="icon_info" _hover={{ color: 'link_hovered' }} cursor="pointer"/>
+      </PopoverTrigger>
+      <Portal>
+        <PopoverContent bgColor={ bgColor } maxW={{ base: 'calc(100vw - 8px)', lg: '320px' }} borderRadius="sm" { ...popoverContentProps }>
+          <PopoverArrow bgColor={ bgColor }/>
+          <PopoverBody color="white" fontSize="sm" lineHeight="20px" px={ 2 } py="2px" { ...popoverBodyProps }>
+            <DarkMode>
+              { label }
+            </DarkMode>
+          </PopoverBody>
+        </PopoverContent>
+      </Portal>
+    </Popover>
+  );
+};
+
+export default React.memo(chakra(HintPopover));
diff --git a/ui/shared/InputPlaceholder.tsx b/ui/shared/InputPlaceholder.tsx
index 9285d1124e..58b90500ae 100644
--- a/ui/shared/InputPlaceholder.tsx
+++ b/ui/shared/InputPlaceholder.tsx
@@ -6,12 +6,10 @@ interface Props {
   text: string;
   icon?: React.ReactNode;
   error?: Partial<FieldError>;
-  className?: string;
   isFancy?: boolean;
-  isInModal?: boolean;
 }
 
-const InputPlaceholder = ({ text, icon, error, className, isFancy, isInModal }: Props) => {
+const InputPlaceholder = ({ text, icon, error, isFancy }: Props) => {
   let errorMessage = error?.message;
 
   if (!errorMessage && error?.type === 'pattern') {
@@ -20,10 +18,10 @@ const InputPlaceholder = ({ text, icon, error, className, isFancy, isInModal }:
 
   return (
     <FormLabel
-      className={ className }
       alignItems="center"
       { ...(isFancy ? { 'data-fancy': true } : {}) }
-      { ...(isInModal ? { 'data-in-modal': true } : {}) }
+      variant="floating"
+      bgColor="deeppink"
     >
       { icon }
       <chakra.span>{ text }</chakra.span>
@@ -32,4 +30,4 @@ const InputPlaceholder = ({ text, icon, error, className, isFancy, isInModal }:
   );
 };
 
-export default chakra(InputPlaceholder);
+export default React.memo(InputPlaceholder);
diff --git a/ui/shared/LinkExternal.tsx b/ui/shared/LinkExternal.tsx
deleted file mode 100644
index cae2427170..0000000000
--- a/ui/shared/LinkExternal.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import type { ChakraProps } from '@chakra-ui/react';
-import { Link, chakra, Box, Skeleton, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-import IconSvg from 'ui/shared/IconSvg';
-
-interface Props {
-  href: string;
-  className?: string;
-  children: React.ReactNode;
-  isLoading?: boolean;
-  variant?: 'subtle';
-}
-
-const LinkExternal = ({ href, children, className, isLoading, variant }: Props) => {
-  const subtleLinkBg = useColorModeValue('gray.100', 'gray.700');
-
-  const styleProps: ChakraProps = (() => {
-    const commonProps = {
-      display: 'inline-block',
-      alignItems: 'center',
-    };
-
-    switch (variant) {
-      case 'subtle': {
-        return {
-          ...commonProps,
-          px: '10px',
-          py: '6px',
-          bgColor: subtleLinkBg,
-          borderRadius: 'base',
-        };
-      }
-
-      default:{
-        return commonProps;
-      }
-    }
-  })();
-
-  if (isLoading) {
-    if (variant === 'subtle') {
-      return (
-        <Skeleton className={ className } { ...styleProps } bgColor="inherit">
-          { children }
-          <Box boxSize={ 4 } display="inline-block"/>
-        </Skeleton>
-      );
-    }
-
-    return (
-      <Box className={ className } { ...styleProps }>
-        { children }
-        <Skeleton boxSize={ 4 } verticalAlign="middle" display="inline-block"/>
-      </Box>
-    );
-  }
-
-  return (
-    <Link className={ className } { ...styleProps } target="_blank" href={ href }>
-      { children }
-      <IconSvg name="arrows/north-east" boxSize={ 4 } verticalAlign="middle" color="gray.400" flexShrink={ 0 }/>
-    </Link>
-  );
-};
-
-export default React.memo(chakra(LinkExternal));
diff --git a/ui/shared/LinkInternal.tsx b/ui/shared/LinkInternal.tsx
deleted file mode 100644
index b46b369096..0000000000
--- a/ui/shared/LinkInternal.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { LinkProps, FlexProps } from '@chakra-ui/react';
-import { Flex, Link } from '@chakra-ui/react';
-import type { LinkProps as NextLinkProps } from 'next/link';
-import NextLink from 'next/link';
-import type { LegacyRef } from 'react';
-import React from 'react';
-
-const LinkInternal = ({ isLoading, ...props }: LinkProps & { isLoading?: boolean }, ref: LegacyRef<HTMLAnchorElement>) => {
-  if (isLoading) {
-    return <Flex alignItems="center" { ...props as FlexProps }>{ props.children }</Flex>;
-  }
-
-  if (!props.href) {
-    return <Link { ...props } ref={ ref }/>;
-  }
-
-  return (
-    <NextLink href={ props.href as NextLinkProps['href'] } passHref target={ props.target } legacyBehavior>
-      <Link { ...props } ref={ ref }/>
-    </NextLink>
-  );
-};
-
-export default React.memo(React.forwardRef(LinkInternal));
diff --git a/ui/shared/NativeTokenIcon.tsx b/ui/shared/NativeTokenIcon.tsx
new file mode 100644
index 0000000000..c21334f64f
--- /dev/null
+++ b/ui/shared/NativeTokenIcon.tsx
@@ -0,0 +1,42 @@
+import { Skeleton, Image, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+import { HOMEPAGE_STATS } from 'stubs/stats';
+
+import TokenLogoPlaceholder from './TokenLogoPlaceholder';
+
+type Props = {
+  isLoading?: boolean;
+  className?: string;
+  type?: 'primary' | 'secondary';
+}
+
+const NativeTokenIcon = ({ isLoading, className, type }: Props) => {
+  const statsQueryResult = useApiQuery('stats', {
+    queryOptions: {
+      refetchOnMount: false,
+      placeholderData: HOMEPAGE_STATS,
+    },
+  });
+
+  if (isLoading || statsQueryResult.isPlaceholderData) {
+    return <Skeleton borderRadius="base" className={ className }/>;
+  }
+
+  const src = type === 'secondary' ? statsQueryResult.data?.secondary_coin_image : statsQueryResult.data?.coin_image;
+
+  return (
+    <Image
+      borderRadius="base"
+      className={ className }
+      src={ src || '' }
+      alt={ `${ config.chain.currency.symbol } logo` }
+      fallback={ <TokenLogoPlaceholder borderRadius="base" className={ className }/> }
+      fallbackStrategy={ src ? 'onError' : 'beforeLoadOrError' }
+    />
+  );
+};
+
+export default chakra(NativeTokenIcon);
diff --git a/ui/shared/NetworkExplorers.pw.tsx b/ui/shared/NetworkExplorers.pw.tsx
index 5a0e813ccb..5b9b996b81 100644
--- a/ui/shared/NetworkExplorers.pw.tsx
+++ b/ui/shared/NetworkExplorers.pw.tsx
@@ -1,18 +1,11 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import NetworkExplorers from './NetworkExplorers';
 
-test('base view', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <NetworkExplorers type="tx" pathParam="0x123"/>
-    </TestApp>,
-  );
-
+test('base view', async({ render, page }) => {
+  const component = await render(<NetworkExplorers type="tx" pathParam="0x123"/>);
   await component.getByText('2').click();
-
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 300, height: 150 } });
 });
diff --git a/ui/shared/NetworkExplorers.tsx b/ui/shared/NetworkExplorers.tsx
index 6671a07274..15475956c2 100644
--- a/ui/shared/NetworkExplorers.tsx
+++ b/ui/shared/NetworkExplorers.tsx
@@ -1,7 +1,6 @@
 import {
   Image,
   Button,
-  Popover,
   PopoverTrigger,
   PopoverBody,
   PopoverContent,
@@ -18,8 +17,10 @@ import type { NetworkExplorer as TNetworkExplorer } from 'types/networks';
 
 import config from 'configs/app';
 import stripTrailingSlash from 'lib/stripTrailingSlash';
+import Popover from 'ui/shared/chakra/Popover';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkExternal from 'ui/shared/LinkExternal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import PopoverTriggerTooltip from 'ui/shared/PopoverTriggerTooltip';
 
 interface Props {
   className?: string;
@@ -55,26 +56,28 @@ const NetworkExplorers = ({ className, type, pathParam }: Props) => {
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
       <PopoverTrigger>
-        <Button
-          className={ className }
-          size="sm"
-          variant="outline"
-          colorScheme="gray"
-          onClick={ onToggle }
-          aria-label="Verify in other explorers"
-          fontWeight={ 500 }
-          px={ 2 }
-          h="32px"
-          flexShrink={ 0 }
-        >
-          <IconSvg name="explorer" boxSize={ 5 }/>
-          <Show above="xl">
-            <chakra.span ml={ 1 }>{ explorersLinks.length } Explorer{ explorersLinks.length > 1 ? 's' : '' }</chakra.span>
-          </Show>
-          <Hide above="xl">
-            <chakra.span ml={ 1 }>{ explorersLinks.length }</chakra.span>
-          </Hide>
-        </Button>
+        <PopoverTriggerTooltip label="Verify with other explorers" className={ className }>
+          <Button
+            size="sm"
+            variant="outline"
+            colorScheme="gray"
+            onClick={ onToggle }
+            isActive={ isOpen }
+            aria-label="Verify in other explorers"
+            fontWeight={ 500 }
+            px={ 2 }
+            h="32px"
+            flexShrink={ 0 }
+          >
+            <IconSvg name="explorer" boxSize={ 5 }/>
+            <Show above="xl">
+              <chakra.span ml={ 1 }>{ explorersLinks.length } Explorer{ explorersLinks.length > 1 ? 's' : '' }</chakra.span>
+            </Show>
+            <Hide above="xl">
+              <chakra.span ml={ 1 }>{ explorersLinks.length }</chakra.span>
+            </Hide>
+          </Button>
+        </PopoverTriggerTooltip>
       </PopoverTrigger>
       <PopoverContent w="auto">
         <PopoverBody >
diff --git a/ui/shared/Page/PageTitle.pw.tsx b/ui/shared/Page/PageTitle.pw.tsx
index 2c06639ecb..65e9e4fa30 100644
--- a/ui/shared/Page/PageTitle.pw.tsx
+++ b/ui/shared/Page/PageTitle.pw.tsx
@@ -1,58 +1,27 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import * as textAdMock from 'mocks/ad/textAd';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import DefaultView from './specs/DefaultView';
 import LongNameAndManyTags from './specs/LongNameAndManyTags';
 import WithTextAd from './specs/WithTextAd';
 
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
-  await page.route('https://example.com/logo.png', (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
+test.beforeEach(async({ mockTextAd, mockAssetResponse }) => {
+  await mockTextAd();
+  await mockAssetResponse('https://example.com/logo.png', './playwright/mocks/image_s.jpg');
 });
 
-test('default view +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <DefaultView/>
-    </TestApp>,
-  );
-
+test('default view +@mobile', async({ render }) => {
+  const component = await render(<DefaultView/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('with text ad +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <WithTextAd/>
-    </TestApp>,
-  );
-
+test('with text ad +@mobile', async({ render }) => {
+  const component = await render(<WithTextAd/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('with long name and many tags +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <LongNameAndManyTags/>
-    </TestApp>,
-  );
-
+test('with long name and many tags +@mobile', async({ render }) => {
+  const component = await render(<LongNameAndManyTags/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/Page/PageTitle.tsx b/ui/shared/Page/PageTitle.tsx
index 8c6e2f5d53..e406b098eb 100644
--- a/ui/shared/Page/PageTitle.tsx
+++ b/ui/shared/Page/PageTitle.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import TextAd from 'ui/shared/ad/TextAd';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 
 type BackLinkProp = { label: string; url: string } | { label: string; onClick: () => void };
 
@@ -29,10 +29,21 @@ const BackLink = (props: BackLinkProp & { isLoading?: boolean }) => {
   }
 
   if (props.isLoading) {
-    return <Skeleton boxSize={ 6 } display="inline-block" borderRadius="base" mr={ 3 } my={ 2 } verticalAlign="text-bottom" isLoaded={ !props.isLoading }/>;
+    return (
+      <Skeleton
+        boxSize={ 6 }
+        display="inline-block"
+        flexShrink={ 0 }
+        borderRadius="base"
+        mr={ 3 }
+        my={ 2 }
+        verticalAlign="text-bottom"
+        isLoaded={ !props.isLoading }
+      />
+    );
   }
 
-  const icon = <IconSvg name="arrows/east" boxSize={ 6 } transform="rotate(180deg)" margin="auto" color="gray.400"/>;
+  const icon = <IconSvg name="arrows/east" boxSize={ 6 } transform="rotate(180deg)" margin="auto" color="gray.400" flexShrink={ 0 }/>;
 
   if ('url' in props) {
     return (
diff --git a/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_default_with-text-ad-mobile-1.png b/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_default_with-text-ad-mobile-1.png
index 9a03708d13..d55d170ab8 100644
Binary files a/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_default_with-text-ad-mobile-1.png and b/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_default_with-text-ad-mobile-1.png differ
diff --git a/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_mobile_with-text-ad-mobile-1.png b/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_mobile_with-text-ad-mobile-1.png
index 01d7d12f52..389d966a56 100644
Binary files a/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_mobile_with-text-ad-mobile-1.png and b/ui/shared/Page/__screenshots__/PageTitle.pw.tsx_mobile_with-text-ad-mobile-1.png differ
diff --git a/ui/shared/Page/specs/DefaultView.tsx b/ui/shared/Page/specs/DefaultView.tsx
index 0c924f55e0..f710c610be 100644
--- a/ui/shared/Page/specs/DefaultView.tsx
+++ b/ui/shared/Page/specs/DefaultView.tsx
@@ -5,7 +5,7 @@ import type { TokenInfo } from 'types/api/token';
 import * as addressMock from 'mocks/address/address';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
-import EntityTags from 'ui/shared/EntityTags';
+import EntityTags from 'ui/shared/EntityTags/EntityTags';
 import IconSvg from 'ui/shared/IconSvg';
 import NetworkExplorers from 'ui/shared/NetworkExplorers';
 
@@ -32,10 +32,10 @@ const DefaultView = () => {
 
   const contentAfter = (
     <>
-      <IconSvg name="verified_token" color="green.500" boxSize={ 6 } cursor="pointer"/>
+      <IconSvg name="certified" color="green.500" boxSize={ 6 } cursor="pointer"/>
       <EntityTags
-        tagsBefore={ [
-          { label: 'example', display_name: 'Example label' },
+        tags={ [
+          { slug: 'example', name: 'Example label', tagType: 'custom' },
         ] }
         flexGrow={ 1 }
       />
@@ -60,7 +60,7 @@ const DefaultView = () => {
       beforeTitle={ (
         <TokenEntity.Icon
           token={ tokenData }
-          iconSize="lg"
+          size="lg"
         />
       ) }
       backLink={ backLink }
diff --git a/ui/shared/Page/specs/LongNameAndManyTags.tsx b/ui/shared/Page/specs/LongNameAndManyTags.tsx
index ae8e190cda..f83878eec2 100644
--- a/ui/shared/Page/specs/LongNameAndManyTags.tsx
+++ b/ui/shared/Page/specs/LongNameAndManyTags.tsx
@@ -5,9 +5,9 @@ import type { TokenInfo } from 'types/api/token';
 
 import { publicTag, privateTag, watchlistName } from 'mocks/address/tag';
 import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
-import EntityTags from 'ui/shared/EntityTags';
+import EntityTags from 'ui/shared/EntityTags/EntityTags';
+import formatUserTags from 'ui/shared/EntityTags/formatUserTags';
 import IconSvg from 'ui/shared/IconSvg';
-import NetworkExplorers from 'ui/shared/NetworkExplorers';
 
 import PageTitle from '../PageTitle';
 
@@ -27,21 +27,18 @@ const LongNameAndManyTags = () => {
 
   const contentAfter = (
     <>
-      <IconSvg name="verified_token" color="green.500" boxSize={ 6 } cursor="pointer" flexShrink={ 0 }/>
+      <IconSvg name="certified" color="green.500" boxSize={ 6 } cursor="pointer" flexShrink={ 0 }/>
       <EntityTags
-        data={{
-          private_tags: [ privateTag ],
-          public_tags: [ publicTag ],
-          watchlist_names: [ watchlistName ],
-        }}
-        tagsBefore={ [
-          { label: 'example', display_name: 'Example with long name' },
+        tags={ [
+          { slug: 'example', name: 'Example with long name', tagType: 'custom' },
+          ...formatUserTags({
+            private_tags: [ privateTag ],
+            public_tags: [ publicTag ],
+            watchlist_names: [ watchlistName ],
+          }),
+          { slug: 'after_1', name: 'Another tag', tagType: 'custom' },
+          { slug: 'after_2', name: 'And yet more', tagType: 'custom' },
         ] }
-        tagsAfter={ [
-          { label: 'after_1', display_name: 'Another tag' },
-          { label: 'after_2', display_name: 'And yet more' },
-        ] }
-        contentAfter={ <NetworkExplorers type="token" pathParam="token-hash" ml="auto"/> }
         flexGrow={ 1 }
       />
     </>
@@ -55,7 +52,7 @@ const LongNameAndManyTags = () => {
       beforeTitle={ (
         <TokenEntity.Icon
           token={ tokenData }
-          iconSize="lg"
+          size="lg"
         />
       ) }
       contentAfter={ contentAfter }
diff --git a/ui/shared/PopoverTriggerTooltip.tsx b/ui/shared/PopoverTriggerTooltip.tsx
new file mode 100644
index 0000000000..b0ed7ab91e
--- /dev/null
+++ b/ui/shared/PopoverTriggerTooltip.tsx
@@ -0,0 +1,30 @@
+import { Skeleton, Tooltip, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+
+type Props = {
+  label: string;
+  isLoading?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const PopoverTriggerTooltip = ({ label, isLoading, className, children }: Props, ref: React.ForwardedRef<HTMLDivElement>) => {
+  const isMobile = useIsMobile();
+  return (
+    // tooltip need to be wrapped in div for proper popover positioning
+    <Skeleton isLoaded={ !isLoading } borderRadius="base" ref={ ref } className={ className }>
+      <Tooltip
+        label={ label }
+        isDisabled={ isMobile }
+        // need a delay to avoid flickering when closing the popover
+        openDelay={ 100 }
+      >
+        { children }
+      </Tooltip>
+    </Skeleton>
+  );
+};
+
+export default chakra(React.forwardRef(PopoverTriggerTooltip));
diff --git a/ui/shared/PrevNext.tsx b/ui/shared/PrevNext.tsx
index 6d477775e2..5593ed9a69 100644
--- a/ui/shared/PrevNext.tsx
+++ b/ui/shared/PrevNext.tsx
@@ -32,7 +32,7 @@ const PrevNext = ({ className, onClick, prevLabel, nextLabel, isPrevDisabled, is
   }
 
   return (
-    <Box className={ className }>
+    <Box className={ className } display="flex">
       <Tooltip label={ prevLabel }>
         <IconButton
           aria-label="prev"
diff --git a/ui/shared/RawDataSnippet.tsx b/ui/shared/RawDataSnippet.tsx
index b18a6009f8..68b23fc407 100644
--- a/ui/shared/RawDataSnippet.tsx
+++ b/ui/shared/RawDataSnippet.tsx
@@ -11,13 +11,29 @@ interface Props {
   rightSlot?: React.ReactNode;
   beforeSlot?: React.ReactNode;
   textareaMaxHeight?: string;
+  textareaMinHeight?: string;
   showCopy?: boolean;
   isLoading?: boolean;
   contentProps?: ChakraProps;
 }
 
-const RawDataSnippet = ({ data, className, title, rightSlot, beforeSlot, textareaMaxHeight, showCopy = true, isLoading, contentProps }: Props) => {
-  // see issue in theme/components/Textarea.ts
+const RawDataSnippet = ({
+  data,
+  className,
+  title,
+  rightSlot,
+  beforeSlot,
+  textareaMaxHeight,
+  textareaMinHeight,
+  showCopy = true,
+  isLoading,
+  contentProps,
+}: Props) => {
+  // https://bugs.chromium.org/p/chromium/issues/detail?id=1362573
+  // there is a problem with scrollbar color in chromium
+  // so blackAlpha.50 here is replaced with #f5f5f6
+  // and whiteAlpha.50 is replaced with #1a1b1b
+  // const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
   const bgColor = useColorModeValue('#f5f5f6', '#1a1b1b');
   return (
     <Box className={ className } as="section" title={ title }>
@@ -33,7 +49,7 @@ const RawDataSnippet = ({ data, className, title, rightSlot, beforeSlot, textare
         p={ 4 }
         bgColor={ isLoading ? 'inherit' : bgColor }
         maxH={ textareaMaxHeight || '400px' }
-        minH={ isLoading ? '200px' : undefined }
+        minH={ textareaMinHeight || (isLoading ? '200px' : undefined) }
         fontSize="sm"
         borderRadius="md"
         wordBreak="break-all"
diff --git a/ui/shared/RawInputData.tsx b/ui/shared/RawInputData.tsx
index d638743cab..d9518fa89c 100644
--- a/ui/shared/RawInputData.tsx
+++ b/ui/shared/RawInputData.tsx
@@ -1,41 +1,41 @@
-import { Box, Flex, Select, Textarea } from '@chakra-ui/react';
+import { Select } from '@chakra-ui/react';
 import React from 'react';
 
 import hexToUtf8 from 'lib/hexToUtf8';
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import RawDataSnippet from 'ui/shared/RawDataSnippet';
 
 type DataType = 'Hex' | 'UTF-8'
 const OPTIONS: Array<DataType> = [ 'Hex', 'UTF-8' ];
 
 interface Props {
   hex: string;
+  rightSlot?: React.ReactNode;
 }
 
-const RawInputData = ({ hex }: Props) => {
+const RawInputData = ({ hex, rightSlot: rightSlotProp }: Props) => {
   const [ selectedDataType, setSelectedDataType ] = React.useState<DataType>('Hex');
 
   const handleSelectChange = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
     setSelectedDataType(event.target.value as DataType);
   }, []);
 
+  const rightSlot = (
+    <>
+      <Select size="xs" borderRadius="base" value={ selectedDataType } onChange={ handleSelectChange } w="auto" mr="auto">
+        { OPTIONS.map((option) => <option key={ option } value={ option }>{ option }</option>) }
+      </Select>
+      { rightSlotProp }
+    </>
+  );
+
   return (
-    <Box w="100%">
-      <Flex justifyContent="space-between" alignItems="center">
-        <Select size="xs" borderRadius="base" value={ selectedDataType } onChange={ handleSelectChange } focusBorderColor="none" w="auto">
-          { OPTIONS.map((option) => <option key={ option } value={ option }>{ option }</option>) }
-        </Select>
-        <CopyToClipboard text={ hex }/>
-      </Flex>
-      <Textarea
-        value={ selectedDataType === 'Hex' ? hex : hexToUtf8(hex) }
-        w="100%"
-        maxH="220px"
-        mt={ 2 }
-        p={ 4 }
-        variant="filledInactive"
-        fontSize="sm"
-      />
-    </Box>
+    <RawDataSnippet
+      data={ selectedDataType === 'Hex' ? hex : hexToUtf8(hex) }
+      rightSlot={ rightSlot }
+      textareaMaxHeight="220px"
+      textareaMinHeight="160px"
+      w="100%"
+    />
   );
 };
 
diff --git a/ui/shared/SocketNewItemsNotice.pw.tsx b/ui/shared/SocketNewItemsNotice.pw.tsx
index 2001f19ccb..f0bfdd6d23 100644
--- a/ui/shared/SocketNewItemsNotice.pw.tsx
+++ b/ui/shared/SocketNewItemsNotice.pw.tsx
@@ -1,7 +1,6 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import SocketNewItemsNotice from './SocketNewItemsNotice';
 
@@ -12,35 +11,17 @@ const hooksConfig = {
   },
 };
 
-test('2 new items in validated txs list +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <SocketNewItemsNotice url="/" num={ 2 }/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+test('2 new items in validated txs list +@dark-mode', async({ render }) => {
+  const component = await render(<SocketNewItemsNotice url="/" num={ 2 }/>, { hooksConfig });
   await expect(component).toHaveScreenshot();
 });
 
-test('connection loss', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <SocketNewItemsNotice url="/" alert="Connection is lost. Please reload the page."/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+test('connection loss', async({ render }) => {
+  const component = await render(<SocketNewItemsNotice url="/" alert="Connection is lost. Please reload the page."/>, { hooksConfig });
   await expect(component).toHaveScreenshot();
 });
 
-test('fetching', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <SocketNewItemsNotice url="/"/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+test('fetching', async({ render }) => {
+  const component = await render(<SocketNewItemsNotice url="/"/>, { hooksConfig });
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/Tabs/AdaptiveTabsList.tsx b/ui/shared/Tabs/AdaptiveTabsList.tsx
index 5f5ff81f1f..fbaddf5119 100644
--- a/ui/shared/Tabs/AdaptiveTabsList.tsx
+++ b/ui/shared/Tabs/AdaptiveTabsList.tsx
@@ -1,5 +1,5 @@
 import type { StyleProps, ThemingProps } from '@chakra-ui/react';
-import { Box, Tab, TabList, useColorModeValue } from '@chakra-ui/react';
+import { Box, Skeleton, Tab, TabList, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import { useScrollDirection } from 'lib/contexts/scrollDirection';
@@ -24,6 +24,7 @@ interface Props extends TabsProps {
   activeTabIndex: number;
   onItemClick: (index: number) => void;
   themeProps: ThemingProps<'Tabs'>;
+  isLoading?: boolean;
 }
 
 const AdaptiveTabsList = (props: Props) => {
@@ -38,20 +39,22 @@ const AdaptiveTabsList = (props: Props) => {
 
   const { tabsCut, tabsRefs, listRef, rightSlotRef } = useAdaptiveTabs(tabsList, isMobile);
   const isSticky = useIsSticky(listRef, 5, props.stickyEnabled);
-  useScrollToActiveTab({ activeTabIndex: props.activeTabIndex, listRef, tabsRefs, isMobile });
+  useScrollToActiveTab({ activeTabIndex: props.activeTabIndex, listRef, tabsRefs, isMobile, isLoading: props.isLoading });
 
   return (
     <TabList
-      marginBottom={{ base: 6, lg: 8 }}
-      mx={{ base: '-16px', lg: 'unset' }}
-      px={{ base: '16px', lg: 'unset' }}
+      marginBottom={ 6 }
+      mx={{ base: '-12px', lg: 'unset' }}
+      px={{ base: '12px', lg: 'unset' }}
       flexWrap="nowrap"
+      alignItems="center"
       whiteSpace="nowrap"
       ref={ listRef }
       overflowX={{ base: 'auto', lg: 'initial' }}
       overscrollBehaviorX="contain"
       css={{
         'scroll-snap-type': 'x mandatory',
+        'scroll-padding-inline': '12px', // mobile page padding
         // hide scrollbar
         '&::-webkit-scrollbar': { /* Chromiums */
           display: 'none',
@@ -77,8 +80,12 @@ const AdaptiveTabsList = (props: Props) => {
           props.tabListProps)
       }
     >
-      { tabsList.map((tab, index) => {
+      { tabsList.slice(0, props.isLoading ? 5 : Infinity).map((tab, index) => {
         if (!tab.id) {
+          if (props.isLoading) {
+            return null;
+          }
+
           return (
             <TabsMenu
               key="menu"
@@ -112,9 +119,12 @@ const AdaptiveTabsList = (props: Props) => {
                 color: 'inherit',
               },
             }}
+            { ...(index === props.activeTabIndex ? { 'data-selected': true } : {}) }
           >
-            { typeof tab.title === 'function' ? tab.title() : tab.title }
-            <TabCounter count={ tab.count }/>
+            <Skeleton isLoaded={ !props.isLoading }>
+              { typeof tab.title === 'function' ? tab.title() : tab.title }
+              <TabCounter count={ tab.count }/>
+            </Skeleton>
           </Tab>
         );
       }) }
diff --git a/ui/shared/Tabs/RoutedTabs.tsx b/ui/shared/Tabs/RoutedTabs.tsx
index a57b68f222..cfc7036bd3 100644
--- a/ui/shared/Tabs/RoutedTabs.tsx
+++ b/ui/shared/Tabs/RoutedTabs.tsx
@@ -17,9 +17,10 @@ interface Props extends ThemingProps<'Tabs'> {
   stickyEnabled?: boolean;
   className?: string;
   onTabChange?: (index: number) => void;
+  isLoading?: boolean;
 }
 
-const RoutedTabs = ({ tabs, tabListProps, rightSlot, rightSlotProps, stickyEnabled, className, onTabChange, ...themeProps }: Props) => {
+const RoutedTabs = ({ tabs, tabListProps, rightSlot, rightSlotProps, stickyEnabled, className, onTabChange, isLoading, ...themeProps }: Props) => {
   const router = useRouter();
   const tabIndex = useTabIndexFromQuery(tabs);
   const tabsRef = useRef<HTMLDivElement>(null);
@@ -63,6 +64,7 @@ const RoutedTabs = ({ tabs, tabListProps, rightSlot, rightSlotProps, stickyEnabl
       stickyEnabled={ stickyEnabled }
       onTabChange={ handleTabChange }
       defaultTabIndex={ tabIndex }
+      isLoading={ isLoading }
       { ...themeProps }
     />
   );
diff --git a/ui/shared/Tabs/TabsMenu.tsx b/ui/shared/Tabs/TabsMenu.tsx
index 36fd2fd81a..b3d8061421 100644
--- a/ui/shared/Tabs/TabsMenu.tsx
+++ b/ui/shared/Tabs/TabsMenu.tsx
@@ -1,6 +1,6 @@
 import type {
   ButtonProps } from '@chakra-ui/react';
-import { Popover,
+import {
   PopoverTrigger,
   PopoverContent,
   PopoverBody,
@@ -12,6 +12,8 @@ import React from 'react';
 
 import type { MenuButton, TabItem } from './types';
 
+import Popover from 'ui/shared/chakra/Popover';
+
 import TabCounter from './TabCounter';
 import { menuButton } from './utils';
 
diff --git a/ui/shared/Tabs/TabsWithScroll.pw.tsx b/ui/shared/Tabs/TabsWithScroll.pw.tsx
index bd23336316..c323392cc1 100644
--- a/ui/shared/Tabs/TabsWithScroll.pw.tsx
+++ b/ui/shared/Tabs/TabsWithScroll.pw.tsx
@@ -1,13 +1,12 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import type { TabItem } from './types';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import TabsWithScroll from './TabsWithScroll';
 
-test('with counters', async({ mount }) => {
+test('with counters', async({ render }) => {
   const tabs: Array<TabItem> = [
     {
       id: 'tab1',
@@ -28,13 +27,7 @@ test('with counters', async({ mount }) => {
       component: null,
     },
   ];
-  const component = await mount(
-    <TestApp>
-      <TabsWithScroll tabs={ tabs }/>
-    </TestApp>,
-  );
-
+  const component = await render(<TabsWithScroll tabs={ tabs }/>);
   await component.getByText('Third tab').hover();
-
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/Tabs/TabsWithScroll.tsx b/ui/shared/Tabs/TabsWithScroll.tsx
index f09644b675..0809edfa4d 100644
--- a/ui/shared/Tabs/TabsWithScroll.tsx
+++ b/ui/shared/Tabs/TabsWithScroll.tsx
@@ -25,6 +25,7 @@ export interface Props extends ThemingProps<'Tabs'> {
   stickyEnabled?: boolean;
   onTabChange?: (index: number) => void;
   defaultTabIndex?: number;
+  isLoading?: boolean;
   className?: string;
 }
 
@@ -37,6 +38,7 @@ const TabsWithScroll = ({
   stickyEnabled,
   onTabChange,
   defaultTabIndex,
+  isLoading,
   className,
   ...themeProps
 }: Props) => {
@@ -50,8 +52,11 @@ const TabsWithScroll = ({
   }, [ tabs ]);
 
   const handleTabChange = React.useCallback((index: number) => {
+    if (isLoading) {
+      return;
+    }
     onTabChange ? onTabChange(index) : setActiveTabIndex(index);
-  }, [ onTabChange ]);
+  }, [ isLoading, onTabChange ]);
 
   useEffect(() => {
     if (defaultTabIndex !== undefined) {
@@ -89,10 +94,12 @@ const TabsWithScroll = ({
       lazyBehavior={ lazyBehavior }
     >
       <AdaptiveTabsList
-        // the easiest and most readable way to achieve correct tab's cut recalculation when screen is resized
+        // the easiest and most readable way to achieve correct tab's cut recalculation when
+        //    - screen is resized or
+        //    - tabs list is changed when API data is loaded
         // is to do full re-render of the tabs list
-        // so we use screenWidth as a key for the TabsList component
-        key={ screenWidth }
+        // so we use screenWidth + tabIds as a key for the TabsList component
+        key={ isLoading + '_' + screenWidth + '_' + tabsList.map((tab) => tab.id).join(':') }
         tabs={ tabs }
         tabListProps={ tabListProps }
         rightSlot={ rightSlot }
@@ -101,6 +108,7 @@ const TabsWithScroll = ({
         activeTabIndex={ activeTabIndex }
         onItemClick={ handleTabChange }
         themeProps={ themeProps }
+        isLoading={ isLoading }
       />
       <TabPanels>
         { tabsList.map((tab) => <TabPanel padding={ 0 } key={ tab.id }>{ tab.component }</TabPanel>) }
diff --git a/ui/shared/Tabs/useScrollToActiveTab.tsx b/ui/shared/Tabs/useScrollToActiveTab.tsx
index 39cd0e491b..8d729899d1 100644
--- a/ui/shared/Tabs/useScrollToActiveTab.tsx
+++ b/ui/shared/Tabs/useScrollToActiveTab.tsx
@@ -5,19 +5,36 @@ interface Props {
   tabsRefs: Array<React.RefObject<HTMLButtonElement>>;
   listRef: React.RefObject<HTMLDivElement>;
   isMobile?: boolean;
+  isLoading?: boolean;
 }
 
-export default function useScrollToActiveTab({ activeTabIndex, tabsRefs, listRef, isMobile }: Props) {
+export default function useScrollToActiveTab({ activeTabIndex, tabsRefs, listRef, isMobile, isLoading }: Props) {
   React.useEffect(() => {
+    if (isLoading) {
+      return;
+    }
+
     if (activeTabIndex < tabsRefs.length && isMobile) {
       window.setTimeout(() => {
         const activeTabRef = tabsRefs[activeTabIndex];
 
         if (activeTabRef.current && listRef.current) {
-          const activeTabRect = activeTabRef.current.getBoundingClientRect();
+          const containerWidth = listRef.current.getBoundingClientRect().width;
+          const activeTabWidth = activeTabRef.current.getBoundingClientRect().width;
+          const left = tabsRefs.slice(0, activeTabIndex)
+            .map((tab) => tab.current?.getBoundingClientRect())
+            .filter(Boolean)
+            .map((rect) => rect.width)
+            .reduce((result, item) => result + item, 0);
+
+          const isWithinFirstPage = containerWidth > left + activeTabWidth;
+
+          if (isWithinFirstPage) {
+            return;
+          }
 
           listRef.current.scrollTo({
-            left: activeTabRect.left + listRef.current.scrollLeft - 16,
+            left,
             behavior: 'smooth',
           });
         }
@@ -27,5 +44,5 @@ export default function useScrollToActiveTab({ activeTabIndex, tabsRefs, listRef
     }
   // run only when tab index or device type is changed
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ activeTabIndex, isMobile ]);
+  }, [ activeTabIndex, isMobile, isLoading ]);
 }
diff --git a/ui/shared/TagInput.tsx b/ui/shared/TagInput.tsx
index c8a107ac25..9a1a112e42 100644
--- a/ui/shared/TagInput.tsx
+++ b/ui/shared/TagInput.tsx
@@ -12,16 +12,17 @@ const TAG_MAX_LENGTH = 35;
 type Props<TInputs extends FieldValues, TInputName extends Path<TInputs>> = {
   field: ControllerRenderProps<TInputs, TInputName>;
   error?: FieldError;
-  backgroundColor?: string;
+  bgColor?: string;
 }
 
-function TagInput<Inputs extends FieldValues, Name extends Path<Inputs>>({ field, error, backgroundColor }: Props<Inputs, Name>) {
+function TagInput<Inputs extends FieldValues, Name extends Path<Inputs>>({ field, error, bgColor }: Props<Inputs, Name>) {
   return (
-    <FormControl variant="floating" id="tag" isRequired backgroundColor={ backgroundColor }>
+    <FormControl variant="floating" id="tag" isRequired bgColor={ bgColor }>
       <Input
         { ...field }
         isInvalid={ Boolean(error) }
         maxLength={ TAG_MAX_LENGTH }
+        bgColor={ bgColor }
       />
       <InputPlaceholder text="Private tag (max 35 characters)" error={ error }/>
     </FormControl>
diff --git a/ui/shared/TimeAgoWithTooltip.tsx b/ui/shared/TimeAgoWithTooltip.tsx
new file mode 100644
index 0000000000..6050bec9a0
--- /dev/null
+++ b/ui/shared/TimeAgoWithTooltip.tsx
@@ -0,0 +1,32 @@
+import { Skeleton, Tooltip, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import dayjs from 'lib/date/dayjs';
+import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+
+type Props = {
+  timestamp?: string | number | null;
+  fallbackText?: string;
+  isLoading?: boolean;
+  enableIncrement?: boolean;
+  className?: string;
+}
+
+const TimeAgoWithTooltip = ({ timestamp, fallbackText, isLoading, enableIncrement, className }: Props) => {
+  const timeAgo = useTimeAgoIncrement(timestamp || '', enableIncrement && !isLoading);
+  if (!timestamp && !fallbackText) {
+    return null;
+  }
+
+  const content = timestamp ?
+    <Tooltip label={ dayjs(timestamp).format('llll') }><span>{ timeAgo }</span></Tooltip> :
+    <span>{ fallbackText }</span>;
+
+  return (
+    <Skeleton isLoaded={ !isLoading } className={ className }>
+      { content }
+    </Skeleton>
+  );
+};
+
+export default chakra(TimeAgoWithTooltip);
diff --git a/ui/shared/TokenTransfer/TokenTransferList.pw.tsx b/ui/shared/TokenTransfer/TokenTransferList.pw.tsx
index d7137d0191..2545f7e924 100644
--- a/ui/shared/TokenTransfer/TokenTransferList.pw.tsx
+++ b/ui/shared/TokenTransfer/TokenTransferList.pw.tsx
@@ -1,9 +1,8 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
-import TestApp from 'playwright/TestApp';
+import { test, expect, devices } from 'playwright/lib';
 
 import TokenTransferList from './TokenTransferList';
 
@@ -24,29 +23,27 @@ const data = [
   tokenTransferMock.erc1155D,
 ];
 
-test('without tx info', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+test('without tx info', async({ render }) => {
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <TokenTransferList
         data={ data }
         showTxInfo={ false }
       />
-    </TestApp>,
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('with tx info', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+test('with tx info', async({ render }) => {
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <TokenTransferList
         data={ data }
         showTxInfo={ true }
       />
-    </TestApp>,
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
diff --git a/ui/shared/TokenTransfer/TokenTransferListItem.tsx b/ui/shared/TokenTransfer/TokenTransferListItem.tsx
index 4707f9d917..03977f0916 100644
--- a/ui/shared/TokenTransfer/TokenTransferListItem.tsx
+++ b/ui/shared/TokenTransfer/TokenTransferListItem.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+import { getTokenTypeName } from 'lib/token/tokenTypes';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import Tag from 'ui/shared/chakra/Tag';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
@@ -14,6 +14,8 @@ import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 
+import TimeAgoWithTooltip from '../TimeAgoWithTooltip';
+
 type Props = TokenTransfer & {
   baseAddress?: string;
   showTxInfo?: boolean;
@@ -34,7 +36,6 @@ const TokenTransferListItem = ({
   enableTimeIncrement,
   isLoading,
 }: Props) => {
-  const timeAgo = useTimeAgoIncrement(timestamp, enableTimeIncrement);
   const { usd, valueStr } = 'value' in total && total.value !== null ? getCurrencyValue({
     value: total.value,
     exchangeRate: token.exchange_rate,
@@ -54,7 +55,7 @@ const TokenTransferListItem = ({
             noCopy
             w="auto"
           />
-          <Tag flexShrink={ 0 } isLoading={ isLoading }>{ token.type }</Tag>
+          <Tag flexShrink={ 0 } isLoading={ isLoading }>{ getTokenTypeName(token.type) }</Tag>
           <Tag colorScheme="orange" isLoading={ isLoading }>{ getTokenTransferTypeText(type) }</Tag>
         </Flex>
         { showTxInfo && txHash && (
@@ -70,11 +71,14 @@ const TokenTransferListItem = ({
             truncation="constant_long"
             fontWeight="700"
           />
-          { timestamp && (
-            <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm">
-              <span>{ timeAgo }</span>
-            </Skeleton>
-          ) }
+          <TimeAgoWithTooltip
+            timestamp={ timestamp }
+            enableIncrement={ enableTimeIncrement }
+            isLoading={ isLoading }
+            color="text_secondary"
+            fontWeight="400"
+            fontSize="sm"
+          />
         </Flex>
       ) }
       <AddressFromTo
diff --git a/ui/shared/TokenTransfer/TokenTransferTable.pw.tsx b/ui/shared/TokenTransfer/TokenTransferTable.pw.tsx
index 83d41ce18e..e6df01eaa6 100644
--- a/ui/shared/TokenTransfer/TokenTransferTable.pw.tsx
+++ b/ui/shared/TokenTransfer/TokenTransferTable.pw.tsx
@@ -1,37 +1,34 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import TokenTransferTable from './TokenTransferTable';
 
-test('without tx info', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+test('without tx info', async({ render }) => {
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <TokenTransferTable
         data={ tokenTransferMock.mixTokens.items }
         top={ 0 }
         showTxInfo={ false }
       />
-    </TestApp>,
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('with tx info', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 6 }}/>
+test('with tx info', async({ render }) => {
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
       <TokenTransferTable
         data={ tokenTransferMock.mixTokens.items }
         top={ 0 }
         showTxInfo={ true }
       />
-    </TestApp>,
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
diff --git a/ui/shared/TokenTransfer/TokenTransferTable.tsx b/ui/shared/TokenTransfer/TokenTransferTable.tsx
index b707ccbdc0..bcb006faf9 100644
--- a/ui/shared/TokenTransfer/TokenTransferTable.tsx
+++ b/ui/shared/TokenTransfer/TokenTransferTable.tsx
@@ -38,7 +38,7 @@ const TokenTransferTable = ({
         <Thead top={ top }>
           <Tr>
             { showTxInfo && <Th width="44px"></Th> }
-            <Th width="200px">Token</Th>
+            <Th width="230px">Token</Th>
             <Th width="160px">Token ID</Th>
             { showTxInfo && <Th width="200px">Txn hash</Th> }
             <Th width="60%">From/To</Th>
diff --git a/ui/shared/TokenTransfer/TokenTransferTableItem.tsx b/ui/shared/TokenTransfer/TokenTransferTableItem.tsx
index 339b6baf00..3e02e17db4 100644
--- a/ui/shared/TokenTransfer/TokenTransferTableItem.tsx
+++ b/ui/shared/TokenTransfer/TokenTransferTableItem.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+import { getTokenTypeName } from 'lib/token/tokenTypes';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import Tag from 'ui/shared/chakra/Tag';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
@@ -13,6 +13,8 @@ import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 
+import TimeAgoWithTooltip from '../TimeAgoWithTooltip';
+
 type Props = TokenTransfer & {
   baseAddress?: string;
   showTxInfo?: boolean;
@@ -33,7 +35,6 @@ const TokenTransferTableItem = ({
   enableTimeIncrement,
   isLoading,
 }: Props) => {
-  const timeAgo = useTimeAgoIncrement(timestamp, enableTimeIncrement);
   const { usd, valueStr } = 'value' in total && total.value !== null ? getCurrencyValue({
     value: total.value,
     exchangeRate: token.exchange_rate,
@@ -52,15 +53,15 @@ const TokenTransferTableItem = ({
         </Td>
       ) }
       <Td>
-        <Flex flexDir="column" alignItems="flex-start" my="3px" rowGap={ 2 }>
-          <TokenEntity
-            token={ token }
-            isLoading={ isLoading }
-            noSymbol
-            noCopy
-            my="2px"
-          />
-          <Tag isLoading={ isLoading }>{ token.type }</Tag>
+        <TokenEntity
+          token={ token }
+          isLoading={ isLoading }
+          noSymbol
+          noCopy
+          mt={ 1 }
+        />
+        <Flex columnGap={ 2 } rowGap={ 2 } mt={ 2 } flexWrap="wrap">
+          <Tag isLoading={ isLoading }>{ getTokenTypeName(token.type) }</Tag>
           <Tag colorScheme="orange" isLoading={ isLoading }>{ getTokenTransferTypeText(type) }</Tag>
         </Flex>
       </Td>
@@ -77,11 +78,15 @@ const TokenTransferTableItem = ({
             mt="7px"
             truncation="constant_long"
           />
-          { timestamp && (
-            <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" mt="10px" display="inline-block">
-              <span>{ timeAgo }</span>
-            </Skeleton>
-          ) }
+          <TimeAgoWithTooltip
+            timestamp={ timestamp }
+            enableIncrement={ enableTimeIncrement }
+            isLoading={ isLoading }
+            color="text_secondary"
+            fontWeight="400"
+            mt="10px"
+            display="inline-block"
+          />
         </Td>
       ) }
       <Td>
diff --git a/ui/shared/TokenTransferSnippet/TokenTransferSnippet.tsx b/ui/shared/TokenTransferSnippet/TokenTransferSnippet.tsx
new file mode 100644
index 0000000000..1fde813b2f
--- /dev/null
+++ b/ui/shared/TokenTransferSnippet/TokenTransferSnippet.tsx
@@ -0,0 +1,105 @@
+import { Flex, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type {
+  TokenTransfer,
+  Erc20TotalPayload,
+  Erc721TotalPayload,
+  Erc1155TotalPayload,
+  Erc404TotalPayload,
+} from 'types/api/tokenTransfer';
+
+import AddressFromTo from 'ui/shared/address/AddressFromTo';
+
+import TokenTransferSnippetFiat from './TokenTransferSnippetFiat';
+import TokenTransferSnippetNft from './TokenTransferSnippetNft';
+
+interface Props {
+  data: TokenTransfer;
+  noAddressIcons?: boolean;
+  isLoading?: boolean;
+}
+
+const TokenTransferSnippet = ({ data, isLoading, noAddressIcons = true }: Props) => {
+
+  const content = (() => {
+
+    if (isLoading) {
+      return <Skeleton w="250px" h={ 6 }/>;
+    }
+
+    switch (data.token.type) {
+      case 'ERC-20': {
+        const total = data.total as Erc20TotalPayload;
+        return <TokenTransferSnippetFiat token={ data.token } value={ total.value } decimals={ total.decimals }/>;
+      }
+
+      case 'ERC-721': {
+        const total = data.total as Erc721TotalPayload;
+        return (
+          <TokenTransferSnippetNft
+            token={ data.token }
+            tokenId={ total.token_id }
+            value="1"
+          />
+        );
+      }
+
+      case 'ERC-1155': {
+        const total = data.total as Erc1155TotalPayload;
+        return (
+          <TokenTransferSnippetNft
+            key={ total.token_id }
+            token={ data.token }
+            tokenId={ total.token_id }
+            value={ total.value }
+          />
+        );
+      }
+
+      case 'ERC-404': {
+        const total = data.total as Erc404TotalPayload;
+
+        if (total.token_id !== null) {
+          return (
+            <TokenTransferSnippetNft
+              token={ data.token }
+              tokenId={ total.token_id }
+              value="1"
+            />
+          );
+        } else {
+          if (total.value === null) {
+            return null;
+          }
+
+          return <TokenTransferSnippetFiat token={ data.token } value={ total.value } decimals={ total.decimals }/>;
+        }
+      }
+    }
+  })();
+
+  return (
+    <Flex
+      alignItems="flex-start"
+      flexWrap="wrap"
+      columnGap={ 2 }
+      rowGap={ 3 }
+      flexDir="row"
+      w="100%"
+      fontWeight={ 500 }
+    >
+      <AddressFromTo
+        from={ data.from }
+        to={ data.to }
+        truncation="constant"
+        noIcon={ noAddressIcons }
+        fontWeight="500"
+        isLoading={ isLoading }
+      />
+      { content }
+    </Flex>
+  );
+};
+
+export default React.memo(TokenTransferSnippet);
diff --git a/ui/shared/TokenTransferSnippet/TokenTransferSnippetFiat.tsx b/ui/shared/TokenTransferSnippet/TokenTransferSnippetFiat.tsx
new file mode 100644
index 0000000000..282eb406aa
--- /dev/null
+++ b/ui/shared/TokenTransferSnippet/TokenTransferSnippetFiat.tsx
@@ -0,0 +1,37 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenInfo } from 'types/api/token';
+
+import getCurrencyValue from 'lib/getCurrencyValue';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+
+interface Props {
+  token: TokenInfo;
+  value: string;
+  decimals: string | null;
+}
+const FtTokenTransferSnippet = ({ token, value, decimals }: Props) => {
+  const { valueStr, usd } = getCurrencyValue({
+    value: value,
+    exchangeRate: token.exchange_rate,
+    accuracyUsd: 2,
+    decimals: decimals,
+  });
+
+  return (
+    <>
+      <chakra.span color="text_secondary">for</chakra.span>
+      <span>{ valueStr }</span>
+      <TokenEntity
+        token={{ ...token, name: token.symbol || token.name }}
+        noCopy
+        noSymbol
+        w="auto"
+      />
+      { usd && <chakra.span color="text_secondary">(${ usd })</chakra.span> }
+    </>
+  );
+};
+
+export default React.memo(FtTokenTransferSnippet);
diff --git a/ui/shared/TokenTransferSnippet/TokenTransferSnippetNft.tsx b/ui/shared/TokenTransferSnippet/TokenTransferSnippetNft.tsx
new file mode 100644
index 0000000000..7026f68a2d
--- /dev/null
+++ b/ui/shared/TokenTransferSnippet/TokenTransferSnippetNft.tsx
@@ -0,0 +1,64 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenInfo } from 'types/api/token';
+
+import NftEntity from 'ui/shared/entities/nft/NftEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+
+interface Props {
+  token: TokenInfo;
+  value: string;
+  tokenId: string | null;
+}
+
+const NftTokenTransferSnippet = ({ value, token, tokenId }: Props) => {
+  const num = value === '1' ? '' : value;
+
+  const tokenIdContent = (() => {
+    if (tokenId === null) {
+      // ERC-404 may not have an ID
+      if (token.type === 'ERC-404') {
+        return null;
+      }
+      return <chakra.span color="text_secondary"> N/A </chakra.span>;
+    }
+
+    return (
+      <NftEntity
+        hash={ token.address }
+        id={ tokenId }
+        fontWeight={ 600 }
+        icon={{ size: 'md' }}
+        maxW={{ base: '100%', lg: '150px' }}
+        w="auto"
+        flexShrink={ 0 }
+      />
+    );
+
+  })();
+
+  return (
+    <>
+      { num ? (
+        <>
+          <chakra.span color="text_secondary">for</chakra.span>
+          <span>{ num }</span>
+          <chakra.span color="text_secondary">token ID</chakra.span>
+        </>
+      ) : (
+        <chakra.span color="text_secondary">for token ID</chakra.span>
+      ) }
+      { tokenIdContent }
+      <chakra.span color="text_secondary">of</chakra.span>
+      <TokenEntity
+        token={ token }
+        noCopy
+        w="auto"
+        flexGrow={ 1 }
+      />
+    </>
+  );
+};
+
+export default React.memo(NftTokenTransferSnippet);
diff --git a/ui/shared/TransactionInput.tsx b/ui/shared/TransactionInput.tsx
index 1bc6642cec..e546004159 100644
--- a/ui/shared/TransactionInput.tsx
+++ b/ui/shared/TransactionInput.tsx
@@ -11,16 +11,17 @@ import InputPlaceholder from 'ui/shared/InputPlaceholder';
 type Props<Field> = {
   field: Field;
   error?: FieldError;
-  backgroundColor?: string;
+  bgColor?: string;
 }
 
-function TransactionInput<Field extends Partial<ControllerRenderProps<FieldValues, 'transaction'>>>({ field, error, backgroundColor }: Props<Field>) {
+function TransactionInput<Field extends Partial<ControllerRenderProps<FieldValues, 'transaction'>>>({ field, error, bgColor }: Props<Field>) {
   return (
-    <FormControl variant="floating" id="transaction" isRequired backgroundColor={ backgroundColor }>
+    <FormControl variant="floating" id="transaction" isRequired bgColor={ bgColor }>
       <Input
         { ...field }
         isInvalid={ Boolean(error) }
         maxLength={ TRANSACTION_HASH_LENGTH }
+        bgColor={ bgColor }
       />
       <InputPlaceholder text="Transaction hash (0x...)" error={ error }/>
     </FormControl>
diff --git a/ui/shared/TruncatedTextTooltip.tsx b/ui/shared/TruncatedTextTooltip.tsx
index 1f24937d7d..eaf7dfdd66 100644
--- a/ui/shared/TruncatedTextTooltip.tsx
+++ b/ui/shared/TruncatedTextTooltip.tsx
@@ -1,4 +1,5 @@
-import { Tooltip } from '@chakra-ui/react';
+import type { PlacementWithLogical } from '@chakra-ui/react';
+import { Tooltip, useDisclosure } from '@chakra-ui/react';
 import debounce from 'lodash/debounce';
 import React from 'react';
 import useFontFaceObserver from 'use-font-face-observer';
@@ -8,11 +9,13 @@ import { BODY_TYPEFACE } from 'theme/foundations/typography';
 interface Props {
   children: React.ReactNode;
   label: string;
+  placement?: PlacementWithLogical;
 }
 
-const TruncatedTextTooltip = ({ children, label }: Props) => {
+const TruncatedTextTooltip = ({ children, label, placement }: Props) => {
   const childRef = React.useRef<HTMLElement>(null);
   const [ isTruncated, setTruncated ] = React.useState(false);
+  const { isOpen, onToggle, onOpen, onClose } = useDisclosure();
 
   const isFontFaceLoaded = useFontFaceObserver([
     { family: BODY_TYPEFACE },
@@ -53,14 +56,36 @@ const TruncatedTextTooltip = ({ children, label }: Props) => {
   // and it is not cleared how to manage case with two or more children
   const child = React.Children.only(children) as React.ReactElement & {
     ref?: React.Ref<React.ReactNode>;
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
   };
+  const handleClick = React.useCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+    onToggle();
+  }, [ onToggle ]);
+
   const modifiedChildren = React.cloneElement(
     child,
-    { ref: childRef },
+    {
+      ref: childRef,
+      onClick: handleClick,
+      onMouseEnter: onOpen,
+      onMouseLeave: onClose,
+    },
   );
 
   if (isTruncated) {
-    return <Tooltip label={ label } maxW={{ base: '100vw', lg: '400px' }}>{ modifiedChildren }</Tooltip>;
+    return (
+      <Tooltip
+        label={ label }
+        maxW={{ base: 'calc(100vw - 8px)', lg: '400px' }}
+        placement={ placement }
+        isOpen={ isOpen }
+      >
+        { modifiedChildren }
+      </Tooltip>
+    );
   }
 
   return modifiedChildren;
diff --git a/ui/shared/TruncatedValue.tsx b/ui/shared/TruncatedValue.tsx
index 626039c5c7..f953477b08 100644
--- a/ui/shared/TruncatedValue.tsx
+++ b/ui/shared/TruncatedValue.tsx
@@ -1,3 +1,4 @@
+import type { PlacementWithLogical } from '@chakra-ui/react';
 import { Skeleton, chakra } from '@chakra-ui/react';
 import React from 'react';
 
@@ -7,11 +8,12 @@ interface Props {
   className?: string;
   isLoading?: boolean;
   value: string;
+  tooltipPlacement?: PlacementWithLogical;
 }
 
-const TruncatedValue = ({ className, isLoading, value }: Props) => {
+const TruncatedValue = ({ className, isLoading, value, tooltipPlacement }: Props) => {
   return (
-    <TruncatedTextTooltip label={ value }>
+    <TruncatedTextTooltip label={ value } placement={ tooltipPlacement }>
       <Skeleton
         className={ className }
         isLoaded={ !isLoading }
diff --git a/ui/shared/UserAvatar.tsx b/ui/shared/UserAvatar.tsx
index 818eaceda7..3a75d56105 100644
--- a/ui/shared/UserAvatar.tsx
+++ b/ui/shared/UserAvatar.tsx
@@ -8,9 +8,10 @@ import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   size: number;
+  fallbackIconSize?: number;
 }
 
-const UserAvatar = ({ size }: Props) => {
+const UserAvatar = ({ size, fallbackIconSize = 20 }: Props) => {
   const appProps = useAppContext();
   const hasAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN, appProps.cookies));
   const [ isImageLoadError, setImageLoadError ] = React.useState(false);
@@ -34,7 +35,7 @@ const UserAvatar = ({ size }: Props) => {
       boxSize={ `${ size }px` }
       borderRadius="full"
       overflow="hidden"
-      fallback={ isImageLoadError || !data?.avatar ? <IconSvg name="profile" boxSize={ 5 }/> : undefined }
+      fallback={ isImageLoadError || !data?.avatar ? <IconSvg name="profile" boxSize={ `${ fallbackIconSize }px` }/> : undefined }
       onError={ handleImageLoadError }
     />
   );
diff --git a/ui/shared/Utilization/Utilization.pw.tsx b/ui/shared/Utilization/Utilization.pw.tsx
index 94d75faddf..f9ebb4e3dc 100644
--- a/ui/shared/Utilization/Utilization.pw.tsx
+++ b/ui/shared/Utilization/Utilization.pw.tsx
@@ -1,26 +1,17 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import Utilization from './Utilization';
 
 test.use({ viewport: { width: 100, height: 50 } });
 
-test('green color scheme +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Utilization value={ 0.423 }/>
-    </TestApp>,
-  );
+test('green color scheme +@dark-mode', async({ render }) => {
+  const component = await render(<Utilization value={ 0.423 }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('gray color scheme +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Utilization value={ 0.423 } colorScheme="gray"/>
-    </TestApp>,
-  );
+test('gray color scheme +@dark-mode', async({ render }) => {
+  const component = await render(<Utilization value={ 0.423 } colorScheme="gray"/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/Web3ModalProvider.tsx b/ui/shared/Web3ModalProvider.tsx
index 9e2af276e0..9159066a8c 100644
--- a/ui/shared/Web3ModalProvider.tsx
+++ b/ui/shared/Web3ModalProvider.tsx
@@ -13,7 +13,7 @@ const feature = config.features.blockchainInteraction;
 
 const init = () => {
   try {
-    if (!wagmiConfig || !feature.isEnabled) {
+    if (!feature.isEnabled) {
       return;
     }
 
@@ -27,6 +27,7 @@ const init = () => {
         '--w3m-z-index': zIndices.modal,
       },
       featuredWalletIds: [],
+      allowUnsupportedChain: true,
     });
   } catch (error) {}
 };
@@ -35,14 +36,17 @@ init();
 
 interface Props {
   children: React.ReactNode;
-  fallback?: JSX.Element | (() => JSX.Element);
 }
 
-const Fallback = ({ children, fallback }: Props) => {
-  return typeof fallback === 'function' ? fallback() : (fallback || <>{ children }</>); // eslint-disable-line react/jsx-no-useless-fragment
+const DefaultProvider = ({ children }: Props) => {
+  return (
+    <WagmiProvider config={ wagmiConfig }>
+      { children }
+    </WagmiProvider>
+  );
 };
 
-const Provider = ({ children, fallback }: Props) => {
+const Web3ModalProvider = ({ children }: Props) => {
   const { colorMode } = useColorMode();
   const { setThemeMode } = useWeb3ModalTheme();
 
@@ -50,18 +54,13 @@ const Provider = ({ children, fallback }: Props) => {
     setThemeMode(colorMode);
   }, [ colorMode, setThemeMode ]);
 
-  // not really necessary, but we have to make typescript happy
-  if (!wagmiConfig || !feature.isEnabled) {
-    return <Fallback fallback={ fallback }>{ children }</Fallback>;
-  }
-
   return (
-    <WagmiProvider config={ wagmiConfig }>
+    <DefaultProvider>
       { children }
-    </WagmiProvider>
+    </DefaultProvider>
   );
 };
 
-const Web3ModalProvider = wagmiConfig && feature.isEnabled ? Provider : Fallback;
+const Provider = feature.isEnabled ? Web3ModalProvider : DefaultProvider;
 
-export default Web3ModalProvider;
+export default Provider;
diff --git a/ui/shared/ad/AdBanner.tsx b/ui/shared/ad/AdBanner.tsx
index fcad0eedbc..525866f414 100644
--- a/ui/shared/ad/AdBanner.tsx
+++ b/ui/shared/ad/AdBanner.tsx
@@ -1,52 +1,38 @@
-import { chakra, Skeleton } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import type { BannerPlatform } from './types';
+
 import config from 'configs/app';
 import { useAppContext } from 'lib/contexts/app';
 import * as cookies from 'lib/cookies';
 
-import AdbutlerBanner from './AdbutlerBanner';
-import CoinzillaBanner from './CoinzillaBanner';
-import GetitBanner from './GetitBanner';
-import HypeBanner from './HypeBanner';
-import SliseBanner from './SliseBanner';
+import AdBannerContent from './AdBannerContent';
 
 const feature = config.features.adsBanner;
 
-const AdBanner = ({ className, isLoading }: { className?: string; isLoading?: boolean }) => {
+interface Props {
+  className?: string;
+  isLoading?: boolean;
+  platform?: BannerPlatform;
+}
+
+const AdBanner = ({ className, isLoading, platform }: Props) => {
   const provider = useAppContext().adBannerProvider;
 
   const hasAdblockCookie = cookies.get(cookies.NAMES.ADBLOCK_DETECTED, useAppContext().cookies);
 
-  if (!feature.isEnabled || hasAdblockCookie || !provider) {
+  if (!feature.isEnabled || hasAdblockCookie === 'true' || !provider) {
     return null;
   }
 
-  const content = (() => {
-    switch (provider) {
-      case 'adbutler':
-        return <AdbutlerBanner/>;
-      case 'coinzilla':
-        return <CoinzillaBanner/>;
-      case 'getit':
-        return <GetitBanner/>;
-      case 'hype':
-        return <HypeBanner/>;
-      case 'slise':
-        return <SliseBanner/>;
-    }
-  })();
-
   return (
-    <Skeleton
+    <AdBannerContent
       className={ className }
-      isLoaded={ !isLoading }
-      borderRadius="none"
-      maxW={ ('adButler' in feature && feature.adButler) ? feature.adButler.config.desktop.width : '728px' }
-      w="100%"
-    >
-      { content }
-    </Skeleton>
+      isLoading={ isLoading }
+      provider={ provider }
+      platform={ platform }
+    />
   );
 };
 
diff --git a/ui/shared/ad/AdBannerContent.tsx b/ui/shared/ad/AdBannerContent.tsx
new file mode 100644
index 0000000000..ba54e20f04
--- /dev/null
+++ b/ui/shared/ad/AdBannerContent.tsx
@@ -0,0 +1,53 @@
+import { chakra, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { BannerPlatform } from './types';
+import type { AdBannerProviders } from 'types/client/adProviders';
+
+import config from 'configs/app';
+
+import AdbutlerBanner from './AdbutlerBanner';
+import CoinzillaBanner from './CoinzillaBanner';
+// import GetitBanner from './GetitBanner';
+import HypeBanner from './HypeBanner';
+import SliseBanner from './SliseBanner';
+
+const feature = config.features.adsBanner;
+
+interface Props {
+  className?: string;
+  isLoading?: boolean;
+  platform?: BannerPlatform;
+  provider: AdBannerProviders;
+}
+
+const AdBannerContent = ({ className, isLoading, provider, platform }: Props) => {
+  const content = (() => {
+    switch (provider) {
+      case 'adbutler':
+        return <AdbutlerBanner platform={ platform }/>;
+      case 'coinzilla':
+        return <CoinzillaBanner platform={ platform }/>;
+      // case 'getit':
+      //   return <GetitBanner platform={ platform }/>;
+      case 'hype':
+        return <HypeBanner platform={ platform }/>;
+      case 'slise':
+        return <SliseBanner platform={ platform }/>;
+    }
+  })();
+
+  return (
+    <Skeleton
+      className={ className }
+      isLoaded={ !isLoading }
+      borderRadius="none"
+      maxW={ ('adButler' in feature && feature.adButler) ? feature.adButler.config.desktop.width : '728px' }
+      w="100%"
+    >
+      { content }
+    </Skeleton>
+  );
+};
+
+export default chakra(AdBannerContent);
diff --git a/ui/shared/ad/AdbutlerBanner.tsx b/ui/shared/ad/AdbutlerBanner.tsx
index aa6db55ea4..b91db5568e 100644
--- a/ui/shared/ad/AdbutlerBanner.tsx
+++ b/ui/shared/ad/AdbutlerBanner.tsx
@@ -3,6 +3,8 @@ import { useRouter } from 'next/navigation';
 import Script from 'next/script';
 import React from 'react';
 
+import type { BannerProps } from './types';
+
 import config from 'configs/app';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import isBrowser from 'lib/isBrowser';
@@ -10,24 +12,38 @@ import { connectAdbutler, placeAd, ADBUTLER_ACCOUNT } from 'ui/shared/ad/adbutle
 
 const feature = config.features.adsBanner;
 
-const AdbutlerBanner = ({ className }: { className?: string }) => {
+const AdbutlerBanner = ({ className, platform }: BannerProps) => {
   const router = useRouter();
-  const isMobile = useIsMobile();
+
+  const isMobileViewport = useIsMobile();
+  const isMobile = platform === 'mobile' || isMobileViewport;
+
+  // On the home page there are two ad banners
+  //  - one in the stats section with prop "platform === mobile", should be hidden on mobile devices
+  //  - another - a regular ad banner, should be hidden on desktop devices
+  // The Adbutler provider doesn't work properly with 2 banners with the same id on the page
+  // So we use this flag to skip ad initialization for the first home page banner on mobile devices
+  // For all other pages this is not the case
+  const isHidden = (isMobileViewport && platform === 'mobile');
 
   React.useEffect(() => {
     if (!('adButler' in feature)) {
       return;
     }
 
+    if (isHidden) {
+      return;
+    }
+
     if (isBrowser() && window.AdButler) {
       const abkw = window.abkw || '';
       if (!window.AdButler.ads) {
         window.AdButler.ads = [];
       }
+      const adButlerConfig = isMobile ? feature.adButler.config.mobile : feature.adButler.config.desktop;
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore:
-      let plc = window[`plc${ feature.adButler.config.mobile.id }`] || 0;
-      const adButlerConfig = isMobile ? feature.adButler.config.mobile : feature.adButler.config.desktop;
+      let plc = window[`plc${ adButlerConfig.id }`] || 0;
       const banner = document.getElementById('ad-banner');
       if (banner) {
         banner.innerHTML = '<' + 'div id="placement_' + adButlerConfig?.id + '_' + plc + '"></' + 'div>';
@@ -44,13 +60,43 @@ const AdbutlerBanner = ({ className }: { className?: string }) => {
         );
       }, opt: { place: plc++, keywords: abkw, domain: 'servedbyadbutler.com', click: 'CLICK_MACRO_PLACEHOLDER' } });
     }
-  }, [ router, isMobile ]);
+  }, [ router, isMobile, isHidden ]);
+
+  if (!('adButler' in feature)) {
+    return null;
+  }
+
+  const { width, height } = (() => {
+    switch (platform) {
+      case 'desktop':
+        return { width: `${ feature.adButler.config.desktop.width }px`, height: `${ feature.adButler.config.desktop.height }px` };
+      case 'mobile':
+        return { width: `${ feature.adButler.config.mobile.width }px`, height: `${ feature.adButler.config.mobile.height }px` };
+      default:
+        return {
+          width: {
+            base: `${ feature.adButler.config.mobile.width }px`,
+            lg: `${ feature.adButler.config.desktop.width }px`,
+          },
+          height: {
+            base: `${ feature.adButler.config.mobile.height }px`,
+            lg: `${ feature.adButler.config.desktop.height }px`,
+          },
+        };
+    }
+  })() ?? { width: '0', height: '0' };
+
+  const getElementId = (id: string) => id + (platform ? `_${ platform }` : '');
 
   return (
-    <Flex className={ className } id="adBanner" h={{ base: '100px', lg: '90px' }}>
-      <Script strategy="lazyOnload" id="ad-butler-1">{ connectAdbutler }</Script>
-      <Script strategy="lazyOnload" id="ad-butler-2">{ placeAd }</Script>
-      <div id="ad-banner"></div>
+    <Flex className={ className } id={ getElementId('adBanner') } h={ height } w={ width }>
+      { !isHidden && (
+        <>
+          <Script strategy="lazyOnload" id="ad-butler-1">{ connectAdbutler }</Script>
+          <Script strategy="lazyOnload" id="ad-butler-2">{ placeAd(platform) }</Script>
+          <div id="ad-banner"></div>
+        </>
+      ) }
     </Flex>
   );
 };
diff --git a/ui/shared/ad/CoinzillaBanner.tsx b/ui/shared/ad/CoinzillaBanner.tsx
index bfdb38fb88..373c777d53 100644
--- a/ui/shared/ad/CoinzillaBanner.tsx
+++ b/ui/shared/ad/CoinzillaBanner.tsx
@@ -2,27 +2,60 @@ import { Flex, chakra } from '@chakra-ui/react';
 import Script from 'next/script';
 import React from 'react';
 
+import type { BannerProps } from './types';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
 import isBrowser from 'lib/isBrowser';
 
-const CoinzillaBanner = ({ className }: { className?: string }) => {
+const CoinzillaBanner = ({ className, platform }: BannerProps) => {
   const isInBrowser = isBrowser();
+  const isMobileViewport = useIsMobile();
+
+  // On the home page there are two ad banners
+  //  - one in the stats section with prop "platform === mobile", should be hidden on mobile devices
+  //  - another - a regular ad banner, should be hidden on desktop devices
+  // The Coinzilla provider doesn't work properly with 2 banners with the same id on the page
+  // So we use this flag to skip ad initialization for the first home page banner on mobile devices
+  // For all other pages this is not the case
+  const isHidden = (isMobileViewport && platform === 'mobile');
+
+  const { width, height } = (() => {
+    switch (platform) {
+      case 'desktop':
+        return { width: 728, height: 90 };
+      case 'mobile':
+        return { width: 320, height: 100 };
+      default:
+        return { width: undefined, height: undefined };
+    }
+
+  })();
 
   React.useEffect(() => {
-    if (isInBrowser) {
+    if (isInBrowser && !isHidden) {
       window.coinzilla_display = window.coinzilla_display || [];
       const cDisplayPreferences = {
         zone: '26660bf627543e46851',
-        width: '728',
-        height: '90',
+        width: width ? String(width) : '728',
+        height: height ? String(height) : '90',
       };
       window.coinzilla_display.push(cDisplayPreferences);
     }
-  }, [ isInBrowser ]);
+  }, [ height, isInBrowser, isHidden, width ]);
 
   return (
-    <Flex className={ className } id="adBanner" h={{ base: '100px', lg: '90px' }}>
-      <Script strategy="lazyOnload" src="https://coinzillatag.com/lib/display.js"/>
-      <div className="coinzilla" data-zone="C-26660bf627543e46851"></div>
+    <Flex
+      className={ className }
+      id={ 'adBanner' + (platform ? `_${ platform }` : '') }
+      h={ height ? `${ height }px` : { base: '100px', lg: '90px' } }
+      w={ width ? `${ width }px` : undefined }
+    >
+      { !isHidden && (
+        <>
+          <Script strategy="lazyOnload" src="https://coinzillatag.com/lib/display.js"/>
+          <div className="coinzilla" data-zone="C-26660bf627543e46851"></div>
+        </>
+      ) }
     </Flex>
   );
 };
diff --git a/ui/shared/ad/GetitBanner.tsx b/ui/shared/ad/GetitBanner.tsx
index 140a720b3b..9ed8745b16 100644
--- a/ui/shared/ad/GetitBanner.tsx
+++ b/ui/shared/ad/GetitBanner.tsx
@@ -1,48 +1,31 @@
 import { Flex, chakra } from '@chakra-ui/react';
 import dynamic from 'next/dynamic';
 import React from 'react';
-import { useAccount } from 'wagmi';
 
-import useIsMobile from 'lib/hooks/useIsMobile';
+import type { BannerProps } from './types';
 
-import Web3ModalProvider from '../Web3ModalProvider';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import useAccount from 'lib/web3/useAccount';
 
 const GetitAdPlugin = dynamic(() => import('getit-sdk').then(module => module.GetitAdPlugin), { ssr: false });
 
 const GETIT_API_KEY = 'ZmGXVvwYUAW4yXL8RzWQHNKmpSyQmt3TDXsXUxqFqXPdoaiSSFyca3BOyunDcWdyOwTkX3UVVQel28qbjoOoWPxYVpPdNzbUNkAHyFyJX7Lk9TVcPDZKTQmwHlSMzO3a';
 
-const GetitBannerContent = ({ address, className }: { address?: string; className?: string }) => {
+const GetitBanner = ({ className, platform }: BannerProps) => {
   const isMobile = Boolean(useIsMobile());
+  const { address } = useAccount();
 
   return (
-    <Flex className={ className } h="90px">
+    <Flex className={ className } h="90px" w={{ base: '270px', lg: platform === 'mobile' ? '270px' : undefined }}>
       <GetitAdPlugin
         key={ isMobile.toString() }
         apiKey={ GETIT_API_KEY }
         walletConnected={ address ? address : '' }
-        isMobile={ isMobile }
+        isMobile={ platform === 'mobile' || isMobile }
         slotId="0"
       />
     </Flex>
   );
 };
 
-const GetitBannerWithWalletAddress = ({ className }: { className?: string }) => {
-  const { address } = useAccount();
-
-  return <GetitBannerContent address={ address } className={ className }/>;
-};
-
-const GetitBanner = ({ className }: { className?: string }) => {
-  const fallback = React.useCallback(() => {
-    return <GetitBannerContent className={ className }/>;
-  }, [ className ]);
-
-  return (
-    <Web3ModalProvider fallback={ fallback }>
-      <GetitBannerWithWalletAddress className={ className }/>
-    </Web3ModalProvider>
-  );
-};
-
 export default chakra(GetitBanner);
diff --git a/ui/shared/ad/HypeBanner.tsx b/ui/shared/ad/HypeBanner.tsx
index 7934ddc867..132974ccae 100644
--- a/ui/shared/ad/HypeBanner.tsx
+++ b/ui/shared/ad/HypeBanner.tsx
@@ -2,53 +2,66 @@ import { Flex, chakra } from '@chakra-ui/react';
 import { Banner, setWalletAddresses } from '@hypelab/sdk-react';
 import Script from 'next/script';
 import React from 'react';
-import { useAccount } from 'wagmi';
 
-import Web3ModalProvider from '../Web3ModalProvider';
+import type { BannerProps } from './types';
+
+import useAccount from 'lib/web3/useAccount';
+
 import { hypeInit } from './hypeBannerScript';
 
 const DESKTOP_BANNER_SLUG = 'b1559fc3e7';
 const MOBILE_BANNER_SLUG = '668ed80a9e';
 
-const HypeBannerContent = ({ className }: { className?: string }) => {
-
-  return (
-    <>
-      <Script
-        id="hypelab"
-        strategy="afterInteractive"
-      >{ hypeInit }</Script>
-      <Flex className={ className } h="90px" display={{ base: 'none', lg: 'flex' }}>
-        <Banner placement={ DESKTOP_BANNER_SLUG }/>
-      </Flex>
-      <Flex className={ className } h="50px" display={{ base: 'flex', lg: 'none' }}>
-        <Banner placement={ MOBILE_BANNER_SLUG }/>
-      </Flex>
-    </>
-  );
-};
-
-const HypeBannerWithWalletAddress = ({ className }: { className?: string }) => {
+const HypeBanner = ({ className, platform }: BannerProps) => {
   const { address } = useAccount();
+
   React.useEffect(() => {
     if (address) {
       setWalletAddresses([ address ]);
     }
   }, [ address ]);
 
-  return <HypeBannerContent className={ className }/>;
-};
-
-const HypeBanner = ({ className }: { className?: string }) => {
-
-  const fallback = React.useCallback(() => {
-    return <HypeBannerContent className={ className }/>;
-  }, [ className ]);
+  const banner = (() => {
+    switch (platform) {
+      case 'desktop': {
+        return (
+          <Flex className={ className } w="728px" h="90px">
+            <Banner placement={ DESKTOP_BANNER_SLUG }/>
+          </Flex>
+        );
+      }
+      case 'mobile': {
+        return (
+          <Flex className={ className } w="320px" h="50px">
+            <Banner placement={ MOBILE_BANNER_SLUG }/>
+          </Flex>
+        );
+      }
+      default: {
+        return (
+          <>
+            <Flex className={ className } w="728px" h="90px" display={{ base: 'none', lg: 'flex' }}>
+              <Banner placement={ DESKTOP_BANNER_SLUG }/>
+            </Flex>
+            <Flex className={ className } w="320px" h="50px" display={{ base: 'flex', lg: 'none' }}>
+              <Banner placement={ MOBILE_BANNER_SLUG }/>
+            </Flex>
+          </>
+        );
+      }
+    }
+  })();
 
   return (
-    <Web3ModalProvider fallback={ fallback }>
-      <HypeBannerWithWalletAddress className={ className }/>
-    </Web3ModalProvider>
+    <>
+      <Script
+        id="hypelab"
+        strategy="afterInteractive"
+      >
+        { hypeInit }
+      </Script>
+      { banner }
+    </>
   );
 };
 
diff --git a/ui/shared/ad/SliseBanner.tsx b/ui/shared/ad/SliseBanner.tsx
index 56ae2a7f3a..fda81b6209 100644
--- a/ui/shared/ad/SliseBanner.tsx
+++ b/ui/shared/ad/SliseBanner.tsx
@@ -2,9 +2,35 @@ import { Flex, chakra } from '@chakra-ui/react';
 import { SliseAd } from '@slise/embed-react';
 import React from 'react';
 
+import type { BannerProps } from './types';
+
 import config from 'configs/app';
 
-const SliseBanner = ({ className }: { className?: string }) => {
+const SliseBanner = ({ className, platform }: BannerProps) => {
+
+  if (platform === 'desktop') {
+    return (
+      <Flex className={ className } h="90px">
+        <SliseAd
+          slotId={ config.chain.name || '' }
+          pub="pub-10"
+          format="728x90"
+          style={{ width: '728px', height: '90px' }}/>
+      </Flex>
+    );
+  }
+
+  if (platform === 'mobile') {
+    return (
+      <Flex className={ className } h="90px">
+        <SliseAd
+          slotId={ config.chain.name || '' }
+          pub="pub-10"
+          format="270x90"
+          style={{ width: '270px', height: '90px' }}/>
+      </Flex>
+    );
+  }
 
   return (
     <>
diff --git a/ui/shared/ad/TextAd.tsx b/ui/shared/ad/TextAd.tsx
index 58fca43814..01549d84b4 100644
--- a/ui/shared/ad/TextAd.tsx
+++ b/ui/shared/ad/TextAd.tsx
@@ -10,7 +10,7 @@ import CoinzillaTextAd from './CoinzillaTextAd';
 const TextAd = ({ className }: {className?: string}) => {
   const hasAdblockCookie = cookies.get(cookies.NAMES.ADBLOCK_DETECTED, useAppContext().cookies);
 
-  if (!config.features.adsText.isEnabled || hasAdblockCookie) {
+  if (!config.features.adsText.isEnabled || hasAdblockCookie === 'true') {
     return null;
   }
 
diff --git a/ui/shared/ad/adbutlerScript.ts b/ui/shared/ad/adbutlerScript.ts
index 81b057e679..c2734fb9b0 100644
--- a/ui/shared/ad/adbutlerScript.ts
+++ b/ui/shared/ad/adbutlerScript.ts
@@ -1,17 +1,29 @@
 /* eslint-disable max-len */
+import type { BannerPlatform } from './types';
+
 import config from 'configs/app';
 
 export const ADBUTLER_ACCOUNT = 182226;
 
 export const connectAdbutler = `if (!window.AdButler){(function(){var s = document.createElement("script"); s.async = true; s.type = "text/javascript";s.src = 'https://servedbyadbutler.com/app.js';var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(s, n);}());}`;
 
-export const placeAd = (() => {
+export const placeAd = ((platform: BannerPlatform | undefined) => {
   const feature = config.features.adsBanner;
 
   if (!('adButler' in feature)) {
     return;
   }
 
+  if (platform === 'mobile') {
+    return `
+      var AdButler = AdButler || {}; AdButler.ads = AdButler.ads || [];
+      var abkw = window.abkw || '';
+      var plc${ feature.adButler.config.mobile.id } = window.plc${ feature.adButler.config.mobile.id } || 0;
+      document.getElementById('ad-banner').innerHTML = '<'+'div id="placement_${ feature.adButler.config.mobile.id }_'+plc${ feature.adButler.config.mobile.id }+'"></'+'div>';
+      AdButler.ads.push({handler: function(opt){ AdButler.register(${ ADBUTLER_ACCOUNT }, ${ feature.adButler.config.mobile.id }, [${ feature.adButler.config.mobile.width },${ feature.adButler.config.mobile.height }], 'placement_${ feature.adButler.config.mobile.id }_'+opt.place, opt); }, opt: { place: plc${ feature.adButler.config.mobile.id }++, keywords: abkw, domain: 'servedbyadbutler.com', click:'CLICK_MACRO_PLACEHOLDER' }});
+    `;
+  }
+
   return `
     var AdButler = AdButler || {}; AdButler.ads = AdButler.ads || [];
     var abkw = window.abkw || '';
@@ -26,4 +38,4 @@ export const placeAd = (() => {
         AdButler.ads.push({handler: function(opt){ AdButler.register(${ ADBUTLER_ACCOUNT }, ${ feature.adButler.config.desktop.id }, [${ feature.adButler.config.desktop.width },${ feature.adButler.config.desktop.height }], 'placement_${ feature.adButler.config.desktop.id }_'+opt.place, opt); }, opt: { place: plc${ feature.adButler.config.desktop.id }++, keywords: abkw, domain: 'servedbyadbutler.com', click:'CLICK_MACRO_PLACEHOLDER' }});
     }
   `;
-})();
+});
diff --git a/ui/shared/ad/types.ts b/ui/shared/ad/types.ts
new file mode 100644
index 0000000000..f14b625484
--- /dev/null
+++ b/ui/shared/ad/types.ts
@@ -0,0 +1,6 @@
+export type BannerPlatform = 'mobile' | 'desktop';
+
+export interface BannerProps {
+  className?: string;
+  platform?: BannerPlatform;
+}
diff --git a/ui/shared/address/AddressFromTo.pw.tsx b/ui/shared/address/AddressFromTo.pw.tsx
index 78124f3cd1..d8ca3ed9fa 100644
--- a/ui/shared/address/AddressFromTo.pw.tsx
+++ b/ui/shared/address/AddressFromTo.pw.tsx
@@ -1,62 +1,53 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as addressMock from 'mocks/address/address';
-import TestApp from 'playwright/TestApp';
-import * as configs from 'playwright/utils/configs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import AddressFromTo from './AddressFromTo';
 
-test.use({ viewport: configs.viewport.mobile });
+test.use({ viewport: pwConfig.viewport.mobile });
 
-test('outgoing txn', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressFromTo
-        from={ addressMock.withoutName }
-        to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
-        current={ addressMock.withoutName.hash }
-      />
-    </TestApp>,
+test('outgoing txn', async({ render }) => {
+  const component = await render(
+    <AddressFromTo
+      from={ addressMock.withoutName }
+      to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
+      current={ addressMock.withoutName.hash }
+    />,
   );
   await expect(component).toHaveScreenshot();
 });
 
-test('incoming txn', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressFromTo
-        from={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
-        to={ addressMock.withoutName }
-        current={ addressMock.withoutName.hash }
-      />
-    </TestApp>,
+test('incoming txn', async({ render }) => {
+  const component = await render(
+    <AddressFromTo
+      from={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
+      to={ addressMock.withoutName }
+      current={ addressMock.withoutName.hash }
+    />,
   );
   await expect(component).toHaveScreenshot();
 });
 
-test('compact mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressFromTo
-        from={ addressMock.withoutName }
-        to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
-        mode="compact"
-      />
-    </TestApp>,
+test('compact mode', async({ render }) => {
+  const component = await render(
+    <AddressFromTo
+      from={ addressMock.withoutName }
+      to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
+      mode="compact"
+    />,
   );
   await expect(component).toHaveScreenshot();
 });
 
-test('loading state', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressFromTo
-        from={ addressMock.withoutName }
-        to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
-        isLoading
-      />
-    </TestApp>,
+test('loading state', async({ render }) => {
+  const component = await render(
+    <AddressFromTo
+      from={ addressMock.withoutName }
+      to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
+      isLoading
+    />,
   );
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/address/AddressFromTo.tsx b/ui/shared/address/AddressFromTo.tsx
index 5024c657da..0a5d0efbd3 100644
--- a/ui/shared/address/AddressFromTo.tsx
+++ b/ui/shared/address/AddressFromTo.tsx
@@ -80,7 +80,7 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
   const iconSize = 20;
 
   return (
-    <Grid className={ className } alignItems="center" gridTemplateColumns={ `fit-content(100%) ${ iconSize }px fit-content(100%)` }>
+    <Grid className={ className } alignItems="center" gridTemplateColumns={ `minmax(auto, min-content) ${ iconSize }px minmax(auto, min-content)` }>
       <Entity
         address={ from }
         isLoading={ isLoading }
diff --git a/ui/shared/address/AddressFromToIcon.pw.tsx b/ui/shared/address/AddressFromToIcon.pw.tsx
index e65b55479e..c1a6490630 100644
--- a/ui/shared/address/AddressFromToIcon.pw.tsx
+++ b/ui/shared/address/AddressFromToIcon.pw.tsx
@@ -1,21 +1,18 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import AddressFromToIcon from './AddressFromToIcon';
 
 test.use({ viewport: { width: 36, height: 36 } });
 
 [ 'in', 'out', 'self', 'unspecified' ].forEach((type) => {
-  test(`${ type } txn type +@dark-mode`, async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <Box p={ 2 }>
-          <AddressFromToIcon type={ type }/>
-        </Box>
-      </TestApp>,
+  test(`${ type } txn type +@dark-mode`, async({ render }) => {
+    const component = await render(
+      <Box p={ 2 }>
+        <AddressFromToIcon type={ type }/>
+      </Box>,
     );
     await expect(component).toHaveScreenshot();
   });
diff --git a/ui/shared/address/utils.ts b/ui/shared/address/utils.ts
index 0e760aa9ed..38e33eb08a 100644
--- a/ui/shared/address/utils.ts
+++ b/ui/shared/address/utils.ts
@@ -25,7 +25,7 @@ export function getTxCourseType(from: string, to: string | undefined, current?:
 export const unknownAddress: Omit<AddressParam, 'hash'> = {
   is_contract: false,
   is_verified: false,
-  implementation_name: '',
+  implementations: null,
   name: '',
   private_tags: [],
   public_tags: [],
diff --git a/ui/shared/alerts/ServiceDegradationWarning.tsx b/ui/shared/alerts/ServiceDegradationWarning.tsx
index 2e9911b8c4..2209eeeda7 100644
--- a/ui/shared/alerts/ServiceDegradationWarning.tsx
+++ b/ui/shared/alerts/ServiceDegradationWarning.tsx
@@ -11,7 +11,7 @@ const ServiceDegradationWarning = ({ isLoading, className }: Props) => {
     <Skeleton className={ className } isLoaded={ !isLoading }>
       <Alert status="warning" colorScheme="gray" alignItems={{ base: 'flex-start', lg: 'center' }}>
         <Spinner size="sm" mr={ 2 } my={{ base: '3px', lg: 0 }} flexShrink={ 0 }/>
-        Data sync in progress... page will refresh automatically once transaction data is available
+          Data sync in progress... page will refresh automatically once data is available
       </Alert>
     </Skeleton>
   );
diff --git a/ui/shared/batch/ArbitrumL2TxnBatchDA.tsx b/ui/shared/batch/ArbitrumL2TxnBatchDA.tsx
new file mode 100644
index 0000000000..1acbe4ab28
--- /dev/null
+++ b/ui/shared/batch/ArbitrumL2TxnBatchDA.tsx
@@ -0,0 +1,48 @@
+import { Skeleton, Tag } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2';
+
+export interface Props {
+  dataContainer: ArbitrumL2TxnBatchesItem['batch_data_container'];
+  isLoading?: boolean;
+}
+
+const ArbitrumL2TxnBatchDA = ({ dataContainer, isLoading }: Props) => {
+  let text: string;
+
+  if (dataContainer === null) {
+    return null;
+  }
+
+  switch (dataContainer) {
+    case 'in_blob4844':
+      text = 'blob';
+      break;
+    case 'in_anytrust':
+      text = 'anytrust';
+      break;
+    case 'in_calldata':
+      text = 'calldata';
+      break;
+    case 'in_celestia':
+      text = 'celestia';
+      break;
+    default:
+      text = '';
+  }
+
+  if (!text) {
+    return null;
+  }
+
+  return (
+    <Skeleton isLoaded={ !isLoading }>
+      <Tag colorScheme={ dataContainer === 'in_blob4844' ? 'yellow' : 'gray' }>
+        { text }
+      </Tag>
+    </Skeleton>
+  );
+};
+
+export default ArbitrumL2TxnBatchDA;
diff --git a/ui/shared/batch/OptimisticL2TxnBatchDA.tsx b/ui/shared/batch/OptimisticL2TxnBatchDA.tsx
new file mode 100644
index 0000000000..93e6c6395f
--- /dev/null
+++ b/ui/shared/batch/OptimisticL2TxnBatchDA.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import type { OptimisticL2TxnBatchesItem } from 'types/api/optimisticL2';
+import type { ExcludeUndefined } from 'types/utils';
+
+import Tag from 'ui/shared/chakra/Tag';
+
+export interface Props {
+  container: ExcludeUndefined<OptimisticL2TxnBatchesItem['batch_data_container']>;
+  isLoading?: boolean;
+}
+
+const OptimisticL2TxnBatchDA = ({ container, isLoading }: Props) => {
+
+  const text = (() => {
+    switch (container) {
+      case 'in_blob4844':
+        return 'EIP-4844 blob';
+      case 'in_calldata':
+        return 'Calldata';
+      case 'in_celestia':
+        return 'Celestia blob';
+    }
+  })();
+
+  return (
+    <Tag colorScheme="yellow" isLoading={ isLoading }>
+      { text }
+    </Tag>
+  );
+};
+
+export default React.memo(OptimisticL2TxnBatchDA);
diff --git a/ui/shared/blob/BlobDataType.pw.tsx b/ui/shared/blob/BlobDataType.pw.tsx
index a5e5e18018..69b6a0e6ef 100644
--- a/ui/shared/blob/BlobDataType.pw.tsx
+++ b/ui/shared/blob/BlobDataType.pw.tsx
@@ -1,35 +1,22 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import BlobDataType from './BlobDataType';
 
 test.use({ viewport: { width: 100, height: 50 } });
 
-test('image data', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <BlobDataType data="0x89504E470D0A1A0A0000000D494844520000003C0000003C0403"/>
-    </TestApp>,
-  );
+test('image data', async({ render }) => {
+  const component = await render(<BlobDataType data="0x89504E470D0A1A0A0000000D494844520000003C0000003C0403"/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('raw data', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <BlobDataType data="0x010203040506"/>
-    </TestApp>,
-  );
+test('raw data', async({ render }) => {
+  const component = await render(<BlobDataType data="0x010203040506"/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('text data', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <BlobDataType data="0x7b226e616d65223a22706963732f"/>
-    </TestApp>,
-  );
+test('text data', async({ render }) => {
+  const component = await render(<BlobDataType data="0x7b226e616d65223a22706963732f"/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/block/BlockGasUsed.tsx b/ui/shared/block/BlockGasUsed.tsx
new file mode 100644
index 0000000000..0c1ee6f416
--- /dev/null
+++ b/ui/shared/block/BlockGasUsed.tsx
@@ -0,0 +1,54 @@
+import { chakra, Tooltip, Box, useColorModeValue } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import config from 'configs/app';
+
+import GasUsedToTargetRatio from '../GasUsedToTargetRatio';
+import TextSeparator from '../TextSeparator';
+import Utilization from '../Utilization/Utilization';
+
+const rollupFeature = config.features.rollup;
+
+interface Props {
+  className?: string;
+  gasUsed?: string;
+  gasLimit: string;
+  gasTarget?: number;
+  isLoading?: boolean;
+}
+
+const BlockGasUsed = ({ className, gasUsed, gasLimit, gasTarget, isLoading }: Props) => {
+  const hasGasUtilization =
+    gasUsed && gasUsed !== '0' &&
+    (!rollupFeature.isEnabled || rollupFeature.type === 'optimistic' || rollupFeature.type === 'shibarium');
+
+  const separatorColor = useColorModeValue('gray.200', 'gray.700');
+
+  if (!hasGasUtilization) {
+    return null;
+  }
+
+  return (
+    <>
+      <Tooltip label={ isLoading ? undefined : 'Gas Used %' }>
+        <Box>
+          <Utilization
+            colorScheme="gray"
+            value={ BigNumber(gasUsed).dividedBy(BigNumber(gasLimit)).toNumber() }
+            isLoading={ isLoading }
+            className={ className }
+          />
+        </Box>
+      </Tooltip>
+      { gasTarget && (
+        <>
+          <TextSeparator color={ separatorColor } mx={ 1 }/>
+          <GasUsedToTargetRatio value={ gasTarget } isLoading={ isLoading }/>
+        </>
+      ) }
+    </>
+  );
+};
+
+export default React.memo(chakra(BlockGasUsed));
diff --git a/ui/shared/chakra/Menu.tsx b/ui/shared/chakra/Menu.tsx
new file mode 100644
index 0000000000..9d74cce995
--- /dev/null
+++ b/ui/shared/chakra/Menu.tsx
@@ -0,0 +1,10 @@
+import type { MenuProps } from '@chakra-ui/react';
+// eslint-disable-next-line no-restricted-imports
+import { Menu as MenuBase } from '@chakra-ui/react';
+import React from 'react';
+
+const Menu = (props: MenuProps) => {
+  return <MenuBase gutter={ 4 } { ...props }/>;
+};
+
+export default React.memo(Menu);
diff --git a/ui/shared/chakra/Popover.tsx b/ui/shared/chakra/Popover.tsx
new file mode 100644
index 0000000000..a5866e841a
--- /dev/null
+++ b/ui/shared/chakra/Popover.tsx
@@ -0,0 +1,10 @@
+import type { PopoverProps } from '@chakra-ui/react';
+// eslint-disable-next-line no-restricted-imports
+import { Popover as PopoverBase } from '@chakra-ui/react';
+import React from 'react';
+
+const Popover = (props: PopoverProps) => {
+  return <PopoverBase gutter={ 4 } { ...props }/>;
+};
+
+export default React.memo(Popover);
diff --git a/ui/shared/chakra/Tag.tsx b/ui/shared/chakra/Tag.tsx
index 08d2d6f130..f8e0cb762f 100644
--- a/ui/shared/chakra/Tag.tsx
+++ b/ui/shared/chakra/Tag.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
-interface Props extends TagProps {
+export interface Props extends TagProps {
   isLoading?: boolean;
 }
 
diff --git a/ui/shared/Toast.tsx b/ui/shared/chakra/Toast.tsx
similarity index 91%
rename from ui/shared/Toast.tsx
rename to ui/shared/chakra/Toast.tsx
index 67451e02f6..c886a67438 100644
--- a/ui/shared/Toast.tsx
+++ b/ui/shared/chakra/Toast.tsx
@@ -20,7 +20,7 @@ function getBgColor(status?: AlertStatus) {
   }
 }
 
-const Toast = ({ onClose, title, description, id, isClosable, status }: ToastProps) => {
+const Toast = ({ onClose, title, description, id, isClosable, status, icon }: ToastProps) => {
 
   const ids = id ?
     {
@@ -48,7 +48,7 @@ const Toast = ({ onClose, title, description, id, isClosable, status }: ToastPro
       maxWidth="400px"
     >
       <chakra.div flex="1" maxWidth="100%">
-        { title && <AlertTitle id={ ids?.title }>{ title }</AlertTitle> }
+        { title && <AlertTitle id={ ids?.title } display="flex" alignItems="center">{ icon }{ title }</AlertTitle> }
         { description && (
           <AlertDescription id={ ids?.description } display="block">
             { description }
diff --git a/ui/shared/chart/ChartArea.tsx b/ui/shared/chart/ChartArea.tsx
index 479e010508..5bb03281a5 100644
--- a/ui/shared/chart/ChartArea.tsx
+++ b/ui/shared/chart/ChartArea.tsx
@@ -11,10 +11,10 @@ interface Props extends React.SVGProps<SVGPathElement> {
   yScale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
   color?: string;
   data: Array<TimeChartItem>;
-  disableAnimation?: boolean;
+  noAnimation?: boolean;
 }
 
-const ChartArea = ({ id, xScale, yScale, color, data, disableAnimation, ...props }: Props) => {
+const ChartArea = ({ id, xScale, yScale, color, data, noAnimation, ...props }: Props) => {
   const ref = React.useRef(null);
   const theme = useTheme();
 
@@ -26,7 +26,7 @@ const ChartArea = ({ id, xScale, yScale, color, data, disableAnimation, ...props
   };
 
   React.useEffect(() => {
-    if (disableAnimation) {
+    if (noAnimation) {
       d3.select(ref.current).attr('opacity', 1);
       return;
     }
@@ -34,10 +34,11 @@ const ChartArea = ({ id, xScale, yScale, color, data, disableAnimation, ...props
       .duration(750)
       .ease(d3.easeBackIn)
       .attr('opacity', 1);
-  }, [ disableAnimation ]);
+  }, [ noAnimation ]);
 
   const d = React.useMemo(() => {
     const area = d3.area<TimeChartItem>()
+      .defined(({ isApproximate }) => !isApproximate)
       .x(({ date }) => xScale(date))
       .y1(({ value }) => yScale(value))
       .y0(() => yScale(yScale.domain()[0]))
diff --git a/ui/shared/chart/ChartAxis.tsx b/ui/shared/chart/ChartAxis.tsx
index 487e3ace61..203ba65ccf 100644
--- a/ui/shared/chart/ChartAxis.tsx
+++ b/ui/shared/chart/ChartAxis.tsx
@@ -5,13 +5,13 @@ import React from 'react';
 interface Props extends Omit<React.SVGProps<SVGGElement>, 'scale'> {
   type: 'left' | 'bottom';
   scale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
-  disableAnimation?: boolean;
+  noAnimation?: boolean;
   ticks: number;
   tickFormatGenerator?: (axis: d3.Axis<d3.NumberValue>) => (domainValue: d3.AxisDomain, index: number) => string;
   anchorEl?: SVGRectElement | null;
 }
 
-const ChartAxis = ({ type, scale, ticks, tickFormatGenerator, disableAnimation, anchorEl, ...props }: Props) => {
+const ChartAxis = ({ type, scale, ticks, tickFormatGenerator, noAnimation, anchorEl, ...props }: Props) => {
   const ref = React.useRef<SVGGElement>(null);
 
   const textColorToken = useColorModeValue('blackAlpha.600', 'whiteAlpha.500');
@@ -31,7 +31,7 @@ const ChartAxis = ({ type, scale, ticks, tickFormatGenerator, disableAnimation,
 
     const axisGroup = d3.select(ref.current);
 
-    if (disableAnimation) {
+    if (noAnimation) {
       axisGroup.call(axis);
     } else {
       axisGroup.transition().duration(750).ease(d3.easeLinear).call(axis);
@@ -42,7 +42,7 @@ const ChartAxis = ({ type, scale, ticks, tickFormatGenerator, disableAnimation,
       .attr('opacity', 1)
       .attr('color', textColor)
       .attr('font-size', '0.75rem');
-  }, [ scale, ticks, tickFormatGenerator, disableAnimation, type, textColor ]);
+  }, [ scale, ticks, tickFormatGenerator, noAnimation, type, textColor ]);
 
   React.useEffect(() => {
     if (!anchorEl) {
diff --git a/ui/shared/chart/ChartGridLine.tsx b/ui/shared/chart/ChartGridLine.tsx
index 2d140f25c1..3756b9239b 100644
--- a/ui/shared/chart/ChartGridLine.tsx
+++ b/ui/shared/chart/ChartGridLine.tsx
@@ -5,12 +5,12 @@ import React from 'react';
 interface Props extends Omit<React.SVGProps<SVGGElement>, 'scale'> {
   type: 'vertical' | 'horizontal';
   scale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
-  disableAnimation?: boolean;
+  noAnimation?: boolean;
   size: number;
   ticks: number;
 }
 
-const ChartGridLine = ({ type, scale, ticks, size, disableAnimation, ...props }: Props) => {
+const ChartGridLine = ({ type, scale, ticks, size, noAnimation, ...props }: Props) => {
   const ref = React.useRef<SVGGElement>(null);
 
   const strokeColor = useToken('colors', 'divider');
@@ -24,7 +24,7 @@ const ChartGridLine = ({ type, scale, ticks, size, disableAnimation, ...props }:
     const axis = axisGenerator(scale).ticks(ticks).tickSize(-size);
 
     const gridGroup = d3.select(ref.current);
-    if (disableAnimation) {
+    if (noAnimation) {
       gridGroup.call(axis);
     } else {
       gridGroup.transition().duration(750).ease(d3.easeLinear).call(axis);
@@ -32,7 +32,7 @@ const ChartGridLine = ({ type, scale, ticks, size, disableAnimation, ...props }:
     gridGroup.select('.domain').remove();
     gridGroup.selectAll('text').remove();
     gridGroup.selectAll('line').attr('stroke', strokeColor);
-  }, [ scale, ticks, size, disableAnimation, type, strokeColor ]);
+  }, [ scale, ticks, size, noAnimation, type, strokeColor ]);
 
   return <g ref={ ref } { ...props }/>;
 };
diff --git a/ui/shared/chart/ChartLine.tsx b/ui/shared/chart/ChartLine.tsx
index a96b7e84c5..2d34add516 100644
--- a/ui/shared/chart/ChartLine.tsx
+++ b/ui/shared/chart/ChartLine.tsx
@@ -3,56 +3,38 @@ import React from 'react';
 
 import type { TimeChartItem } from 'ui/shared/chart/types';
 
+import type { AnimationType } from './utils/animations';
+import { ANIMATIONS } from './utils/animations';
+import { getIncompleteDataLineSource } from './utils/formatters';
+
 interface Props extends React.SVGProps<SVGPathElement> {
   xScale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
   yScale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
   data: Array<TimeChartItem>;
-  animation: 'left' | 'fadeIn' | 'none';
+  animation: AnimationType;
 }
 
 const ChartLine = ({ xScale, yScale, data, animation, ...props }: Props) => {
-  const ref = React.useRef<SVGPathElement>(null);
-
-  // Define different types of animation that we can use
-  const animateLeft = React.useCallback(() => {
-    const totalLength = ref.current?.getTotalLength() || 0;
-    d3.select(ref.current)
-      .attr('opacity', 1)
-      .attr('stroke-dasharray', `${ totalLength },${ totalLength }`)
-      .attr('stroke-dashoffset', totalLength)
-      .transition()
-      .duration(750)
-      .ease(d3.easeLinear)
-      .attr('stroke-dashoffset', 0);
-  }, []);
-
-  const animateFadeIn = React.useCallback(() => {
-    d3.select(ref.current)
-      .transition()
-      .duration(750)
-      .ease(d3.easeLinear)
-      .attr('opacity', 1);
-  }, []);
-
-  const noneAnimation = React.useCallback(() => {
-    d3.select(ref.current).attr('opacity', 1);
-  }, []);
+  const dataPathRef = React.useRef<SVGPathElement>(null);
+  const incompleteDataPathRef = React.useRef<SVGPathElement>(null);
 
   React.useEffect(() => {
-    const ANIMATIONS = {
-      left: animateLeft,
-      fadeIn: animateFadeIn,
-      none: noneAnimation,
-    };
     const animationFn = ANIMATIONS[animation];
-    window.setTimeout(animationFn, 100);
-  }, [ animateLeft, animateFadeIn, noneAnimation, animation ]);
+    const timeoutId = window.setTimeout(() => {
+      dataPathRef.current && animationFn(dataPathRef.current);
+      incompleteDataPathRef.current && animationFn(incompleteDataPathRef.current);
+    }, 100);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [ animation ]);
 
   // Recalculate line length if scale has changed
   React.useEffect(() => {
     if (animation === 'left') {
-      const totalLength = ref.current?.getTotalLength();
-      d3.select(ref.current).attr(
+      const totalLength = dataPathRef.current?.getTotalLength();
+      d3.select(dataPathRef.current).attr(
         'stroke-dasharray',
         `${ totalLength },${ totalLength }`,
       );
@@ -65,15 +47,27 @@ const ChartLine = ({ xScale, yScale, data, animation, ...props }: Props) => {
     .curve(d3.curveMonotoneX);
 
   return (
-    <path
-      ref={ ref }
-      d={ line(data) || undefined }
-      strokeWidth={ 1 }
-      strokeLinecap="round"
-      fill="none"
-      opacity={ 0 }
-      { ...props }
-    />
+    <>
+      <path
+        ref={ incompleteDataPathRef }
+        d={ line(getIncompleteDataLineSource(data)) || undefined }
+        strokeWidth={ 1 }
+        strokeLinecap="round"
+        fill="none"
+        strokeDasharray="6 6"
+        opacity={ 0 }
+        { ...props }
+      />
+      <path
+        ref={ dataPathRef }
+        d={ line(data.filter(({ isApproximate }) => !isApproximate)) || undefined }
+        strokeWidth={ 1 }
+        strokeLinecap="round"
+        fill="none"
+        opacity={ 0 }
+        { ...props }
+      />
+    </>
   );
 };
 
diff --git a/ui/shared/chart/ChartTooltip.tsx b/ui/shared/chart/ChartTooltip.tsx
index e257b5a519..71e51ab738 100644
--- a/ui/shared/chart/ChartTooltip.tsx
+++ b/ui/shared/chart/ChartTooltip.tsx
@@ -1,12 +1,16 @@
-import { useToken, useColorModeValue } from '@chakra-ui/react';
 import * as d3 from 'd3';
 import React from 'react';
 
-import type { TimeChartItem, TimeChartData } from 'ui/shared/chart/types';
+import type { TimeChartData } from 'ui/shared/chart/types';
 
-import computeTooltipPosition from 'ui/shared/chart/utils/computeTooltipPosition';
-import type { Pointer } from 'ui/shared/chart/utils/pointerTracker';
-import { trackPointer } from 'ui/shared/chart/utils/pointerTracker';
+import ChartTooltipBackdrop, { useRenderBackdrop } from './tooltip/ChartTooltipBackdrop';
+import ChartTooltipContent, { useRenderContent } from './tooltip/ChartTooltipContent';
+import ChartTooltipLine, { useRenderLine } from './tooltip/ChartTooltipLine';
+import ChartTooltipPoint, { useRenderPoints } from './tooltip/ChartTooltipPoint';
+import ChartTooltipRow, { useRenderRows } from './tooltip/ChartTooltipRow';
+import ChartTooltipTitle, { useRenderTitle } from './tooltip/ChartTooltipTitle';
+import { trackPointer } from './tooltip/pointerTracker';
+import type { Pointer } from './tooltip/pointerTracker';
 
 interface Props {
   width?: number;
@@ -16,151 +20,62 @@ interface Props {
   xScale: d3.ScaleTime<number, number>;
   yScale: d3.ScaleLinear<number, number>;
   anchorEl: SVGRectElement | null;
+  noAnimation?: boolean;
 }
 
-const TEXT_LINE_HEIGHT = 12;
-const PADDING = 16;
-const LINE_SPACE = 10;
-const POINT_SIZE = 16;
-const LABEL_WIDTH = 80;
-
-const ChartTooltip = ({ xScale, yScale, width, tooltipWidth = 200, height, data, anchorEl, ...props }: Props) => {
-  const lineColor = useToken('colors', 'gray.400');
-  const titleColor = useToken('colors', 'blue.100');
-  const textColor = useToken('colors', 'white');
-  const markerBgColor = useToken('colors', useColorModeValue('black', 'white'));
-  const markerBorderColor = useToken('colors', useColorModeValue('white', 'black'));
-  const bgColor = useToken('colors', 'blackAlpha.900');
-
-  const ref = React.useRef(null);
+const ChartTooltip = ({ xScale, yScale, width, tooltipWidth = 200, height, data, anchorEl, noAnimation, ...props }: Props) => {
+  const ref = React.useRef<SVGGElement>(null);
   const trackerId = React.useRef<number>();
   const isVisible = React.useRef(false);
 
-  const drawLine = React.useCallback(
-    (x: number) => {
-      d3.select(ref.current)
-        .select('.ChartTooltip__line')
-        .attr('x1', x)
-        .attr('x2', x)
-        .attr('y1', 0)
-        .attr('y2', height || 0);
-    },
-    [ ref, height ],
-  );
-
-  const drawContent = React.useCallback(
-    (x: number, y: number) => {
-      const tooltipContent = d3.select(ref.current).select('.ChartTooltip__content');
-
-      tooltipContent.attr('transform', (cur, i, nodes) => {
-        const node = nodes[i] as SVGGElement | null;
-        const { width: nodeWidth, height: nodeHeight } = node?.getBoundingClientRect() || { width: 0, height: 0 };
-        const [ translateX, translateY ] = computeTooltipPosition({
-          canvasWidth: width || 0,
-          canvasHeight: height || 0,
-          nodeWidth,
-          nodeHeight,
-          pointX: x,
-          pointY: y,
-          offset: POINT_SIZE,
-        });
-        return `translate(${ translateX }, ${ translateY })`;
-      });
-
-      const date = xScale.invert(x);
-      const dateLabel = data[0].items.find((item) => item.date.getTime() === date.getTime())?.dateLabel;
-
-      tooltipContent
-        .select('.ChartTooltip__contentDate')
-        .text(dateLabel || d3.timeFormat('%e %b %Y')(xScale.invert(x)));
-    },
-    [ xScale, data, width, height ],
-  );
-
-  const updateDisplayedValue = React.useCallback((d: TimeChartItem, i: number) => {
-    const nodes = d3.select(ref.current)
-      .selectAll<Element, TimeChartData>('.ChartTooltip__value')
-      .filter((td, tIndex) => tIndex === i)
-      .text(
-        (data[i].valueFormatter?.(d.value) || d.value.toLocaleString(undefined, { minimumSignificantDigits: 1 })) +
-        (data[i].units ? ` ${ data[i].units }` : ''),
-      )
-      .nodes();
-
-    const widthLimit = tooltipWidth - 2 * PADDING - LABEL_WIDTH;
-    const width = nodes.map((node) => node?.getBoundingClientRect?.().width);
-    const maxNodeWidth = Math.max(...width);
-    d3.select(ref.current)
-      .select('.ChartTooltip__contentBg')
-      .attr('width', tooltipWidth + Math.max(0, (maxNodeWidth - widthLimit)));
-
-  }, [ data, tooltipWidth ]);
-
-  const drawPoints = React.useCallback((x: number) => {
-    const xDate = xScale.invert(x);
-    const bisectDate = d3.bisector<TimeChartItem, unknown>((d) => d.date).left;
-    let baseXPos = 0;
-    let baseYPos = 0;
+  const transitionDuration = !noAnimation ? 100 : null;
 
-    d3.select(ref.current)
-      .selectAll('.ChartTooltip__point')
-      .attr('transform', (cur, i) => {
-        const index = bisectDate(data[i].items, xDate, 1);
-        const d0 = data[i].items[index - 1] as TimeChartItem | undefined;
-        const d1 = data[i].items[index] as TimeChartItem | undefined;
-        const d = (() => {
-          if (!d0) {
-            return d1;
-          }
-          if (!d1) {
-            return d0;
-          }
-          return xDate.getTime() - d0.date.getTime() > d1.date.getTime() - xDate.getTime() ? d1 : d0;
-        })();
-
-        if (d?.date === undefined && d?.value === undefined) {
-          // move point out of container
-          return 'translate(-100,-100)';
-        }
-
-        const xPos = xScale(d.date);
-        const yPos = yScale(d.value);
-
-        if (i === 0) {
-          baseXPos = xPos;
-          baseYPos = yPos;
-        }
-
-        updateDisplayedValue(d, i);
-
-        return `translate(${ xPos }, ${ yPos })`;
-      });
-
-    return [ baseXPos, baseYPos ];
-  }, [ data, updateDisplayedValue, xScale, yScale ]);
+  const renderLine = useRenderLine(ref, height);
+  const renderContent = useRenderContent(ref, { chart: { width, height }, transitionDuration });
+  const renderPoints = useRenderPoints(ref, { data, xScale, yScale });
+  const renderTitle = useRenderTitle(ref);
+  const renderRows = useRenderRows(ref, { data, xScale, minWidth: tooltipWidth });
+  const renderBackdrop = useRenderBackdrop(ref, { seriesNum: data.length, transitionDuration });
 
   const draw = React.useCallback((pointer: Pointer) => {
     if (pointer.point) {
-      const [ baseXPos, baseYPos ] = drawPoints(pointer.point[0]);
-      drawLine(baseXPos);
-      drawContent(baseXPos, baseYPos);
+      const { x, y, currentPoints } = renderPoints(pointer.point[0]);
+      const isIncompleteData = currentPoints.some(({ item }) => item.isApproximate);
+      renderLine(x);
+      renderContent(x, y);
+      renderTitle(isIncompleteData);
+      const { width } = renderRows(x, currentPoints);
+      renderBackdrop(width, isIncompleteData);
     }
-  }, [ drawPoints, drawLine, drawContent ]);
+  }, [ renderPoints, renderLine, renderContent, renderTitle, renderRows, renderBackdrop ]);
 
   const showContent = React.useCallback(() => {
     if (!isVisible.current) {
-      d3.select(ref.current).attr('opacity', 1);
-      d3.select(ref.current)
-        .selectAll('.ChartTooltip__point')
-        .attr('opacity', 1);
+      if (transitionDuration) {
+        d3.select(ref.current)
+          .transition()
+          .delay(transitionDuration)
+          .attr('opacity', 1);
+      } else {
+        d3.select(ref.current)
+          .attr('opacity', 1);
+      }
       isVisible.current = true;
     }
-  }, []);
+  }, [ transitionDuration ]);
 
   const hideContent = React.useCallback(() => {
-    d3.select(ref.current).attr('opacity', 0);
+    if (transitionDuration) {
+      d3.select(ref.current)
+        .transition()
+        .delay(transitionDuration)
+        .attr('opacity', 0);
+    } else {
+      d3.select(ref.current)
+        .attr('opacity', 0);
+    }
     isVisible.current = false;
-  }, []);
+  }, [ transitionDuration ]);
 
   const createPointerTracker = React.useCallback((event: PointerEvent, isSubsequentCall?: boolean) => {
     let isPressed = event.pointerType === 'mouse' && event.type === 'pointerdown' && !isSubsequentCall;
@@ -224,73 +139,21 @@ const ChartTooltip = ({ xScale, yScale, width, tooltipWidth = 200, height, data,
   }, [ anchorEl, createPointerTracker, draw, hideContent, showContent ]);
 
   return (
-    <g ref={ ref } opacity={ 0 } { ...props }>
-      <line className="ChartTooltip__line" stroke={ lineColor } strokeDasharray="3"/>
-      { data.map(({ name }) => (
-        <circle
-          key={ name }
-          className="ChartTooltip__point"
-          r={ POINT_SIZE / 2 }
-          opacity={ 0 }
-          fill={ markerBgColor }
-          stroke={ markerBorderColor }
-          strokeWidth={ 4 }
-        />
-      )) }
-      <g className="ChartTooltip__content">
-        <rect
-          className="ChartTooltip__contentBg"
-          rx={ 12 }
-          ry={ 12 }
-          fill={ bgColor }
-          width={ tooltipWidth }
-          height={ 2 * PADDING + (data.length + 1) * TEXT_LINE_HEIGHT + data.length * LINE_SPACE }
-        />
-        <g transform={ `translate(${ PADDING },${ PADDING })` }>
-          <text
-            className="ChartTooltip__contentTitle"
-            transform="translate(0,0)"
-            fontSize="12px"
-            fontWeight="500"
-            fill={ titleColor }
-            dominantBaseline="hanging"
-          >
-            Date
-          </text>
-          <text
-            className="ChartTooltip__contentDate"
-            transform={ `translate(${ LABEL_WIDTH },0)` }
-            fontSize="12px"
-            fontWeight="500"
-            fill={ textColor }
-            dominantBaseline="hanging"
-          />
-        </g>
-        { data.map(({ name }, index) => (
-          <g
-            key={ name }
-            transform={ `translate(${ PADDING },${ PADDING + (index + 1) * (LINE_SPACE + TEXT_LINE_HEIGHT) })` }
-          >
-            <text
-              className="ChartTooltip__contentTitle"
-              transform="translate(0,0)"
-              fontSize="12px"
-              fontWeight="500"
-              fill={ titleColor }
-              dominantBaseline="hanging"
-            >
-              { name }
-            </text>
-            <text
-              transform={ `translate(${ LABEL_WIDTH },0)` }
-              className="ChartTooltip__value"
-              fontSize="12px"
-              fill={ textColor }
-              dominantBaseline="hanging"
-            />
-          </g>
-        )) }
-      </g>
+    <g
+      ref={ ref }
+      opacity={ 0 }
+      fontSize="12px"
+      fontWeight="500"
+      { ...props }
+    >
+      <ChartTooltipLine/>
+      { data.map(({ name }) => <ChartTooltipPoint key={ name }/>) }
+      <ChartTooltipContent>
+        <ChartTooltipBackdrop/>
+        <ChartTooltipTitle/>
+        <ChartTooltipRow label="Date" lineNum={ 1 }/>
+        { data.map(({ name }, index) => <ChartTooltipRow key={ name } label={ name } lineNum={ index + 1 }/>) }
+      </ChartTooltipContent>
     </g>
   );
 };
diff --git a/ui/shared/chart/ChartWidget.pw.tsx b/ui/shared/chart/ChartWidget.pw.tsx
index 4100c69801..21fc07272f 100644
--- a/ui/shared/chart/ChartWidget.pw.tsx
+++ b/ui/shared/chart/ChartWidget.pw.tsx
@@ -1,7 +1,8 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import type { TimeChartItem } from './types';
+
+import { test, expect } from 'playwright/lib';
 
 import type { Props } from './ChartWidget';
 import ChartWidget from './ChartWidget';
@@ -27,14 +28,12 @@ const props: Props = {
   units: 'ETH',
   isLoading: false,
   isError: false,
+  noAnimation: true,
 };
 
-test('base view +@dark-mode', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <ChartWidget { ...props }/>
-    </TestApp>,
-  );
+test('base view +@dark-mode', async({ render, page }) => {
+  const component = await render(<ChartWidget { ...props }/>);
+
   await page.waitForFunction(() => {
     return document.querySelector('path[data-name="chart-Nativecoincirculatingsupply-small"]')?.getAttribute('opacity') === '1';
   });
@@ -45,6 +44,7 @@ test('base view +@dark-mode', async({ mount, page }) => {
 
   await page.mouse.move(0, 0);
   await page.mouse.click(0, 0);
+  await page.mouse.move(80, 150);
   await page.mouse.move(100, 150);
   await expect(component).toHaveScreenshot();
 
@@ -54,27 +54,17 @@ test('base view +@dark-mode', async({ mount, page }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('loading', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <ChartWidget { ...props } isLoading minH="250px"/>
-    </TestApp>,
-  );
-
+test('loading', async({ render }) => {
+  const component = await render(<ChartWidget { ...props } isLoading minH="250px"/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('error', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <ChartWidget { ...props } isError/>
-    </TestApp>,
-  );
-
+test('error', async({ render }) => {
+  const component = await render(<ChartWidget { ...props } isError/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('small values', async({ mount, page }) => {
+test('small values', async({ render, page }) => {
   const modifiedProps = {
     ...props,
     items: [
@@ -92,18 +82,14 @@ test('small values', async({ mount, page }) => {
     ],
   };
 
-  const component = await mount(
-    <TestApp>
-      <ChartWidget { ...modifiedProps }/>
-    </TestApp>,
-  );
+  const component = await render(<ChartWidget { ...modifiedProps }/>);
   await page.waitForFunction(() => {
     return document.querySelector('path[data-name="chart-Nativecoincirculatingsupply-small"]')?.getAttribute('opacity') === '1';
   });
   await expect(component).toHaveScreenshot();
 });
 
-test('small variations in big values', async({ mount, page }) => {
+test('small variations in big values', async({ render, page }) => {
   const modifiedProps = {
     ...props,
     items: [
@@ -121,13 +107,30 @@ test('small variations in big values', async({ mount, page }) => {
     ],
   };
 
-  const component = await mount(
-    <TestApp>
-      <ChartWidget { ...modifiedProps }/>
-    </TestApp>,
-  );
+  const component = await render(<ChartWidget { ...modifiedProps }/>);
+  await page.waitForFunction(() => {
+    return document.querySelector('path[data-name="chart-Nativecoincirculatingsupply-small"]')?.getAttribute('opacity') === '1';
+  });
+  await expect(component).toHaveScreenshot();
+});
+
+test('incomplete day', async({ render, page }) => {
+  const modifiedProps = {
+    ...props,
+    items: [
+      ...props.items as Array<TimeChartItem>,
+      { date: new Date('2023-02-24'), value: 25136740.887217894 / 4, isApproximate: true },
+    ],
+  };
+
+  const component = await render(<ChartWidget { ...modifiedProps }/>);
   await page.waitForFunction(() => {
     return document.querySelector('path[data-name="chart-Nativecoincirculatingsupply-small"]')?.getAttribute('opacity') === '1';
   });
   await expect(component).toHaveScreenshot();
+
+  await page.hover('.ChartOverlay', { position: { x: 120, y: 120 } });
+  await page.hover('.ChartOverlay', { position: { x: 320, y: 120 } });
+  await expect(page.getByText('Incomplete day')).toBeVisible();
+  await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/chart/ChartWidget.tsx b/ui/shared/chart/ChartWidget.tsx
index 86cc601221..e32a1e29ae 100644
--- a/ui/shared/chart/ChartWidget.tsx
+++ b/ui/shared/chart/ChartWidget.tsx
@@ -4,7 +4,6 @@ import {
   chakra,
   Flex,
   IconButton, Link,
-  Menu,
   MenuButton,
   MenuItem,
   MenuList,
@@ -22,6 +21,7 @@ import type { TimeChartItem } from './types';
 import dayjs from 'lib/date/dayjs';
 import { apos } from 'lib/html-entities';
 import saveAsCSV from 'lib/saveAsCSV';
+import Menu from 'ui/shared/chakra/Menu';
 import IconSvg from 'ui/shared/IconSvg';
 
 import ChartWidgetGraph from './ChartWidgetGraph';
@@ -35,11 +35,13 @@ export type Props = {
   isLoading: boolean;
   className?: string;
   isError: boolean;
+  emptyText?: string;
+  noAnimation?: boolean;
 }
 
 const DOWNLOAD_IMAGE_SCALE = 5;
 
-const ChartWidget = ({ items, title, description, isLoading, className, isError, units }: Props) => {
+const ChartWidget = ({ items, title, description, isLoading, className, isError, units, emptyText, noAnimation }: Props) => {
   const ref = useRef<HTMLDivElement>(null);
   const [ isFullscreen, setIsFullscreen ] = useState(false);
   const [ isZoomResetInitial, setIsZoomResetInitial ] = React.useState(true);
@@ -134,7 +136,7 @@ const ChartWidget = ({ items, title, description, isLoading, className, isError,
     if (!hasItems) {
       return (
         <Center flexGrow={ 1 }>
-          <Text variant="secondary" fontSize="sm">No data</Text>
+          <Text variant="secondary" fontSize="sm">{ emptyText || 'No data' }</Text>
         </Center>
       );
     }
@@ -147,6 +149,7 @@ const ChartWidget = ({ items, title, description, isLoading, className, isError,
           isZoomResetInitial={ isZoomResetInitial }
           title={ title }
           units={ units }
+          noAnimation={ noAnimation }
         />
       </Box>
     );
@@ -197,7 +200,7 @@ const ChartWidget = ({ items, title, description, isLoading, className, isError,
                 size="sm"
                 variant="outline"
                 onClick={ handleZoomResetClick }
-                icon={ <IconSvg name="repeat_arrow" w={ 4 } h={ 4 }/> }
+                icon={ <IconSvg name="repeat" w={ 4 } h={ 4 }/> }
               />
             </Tooltip>
 
diff --git a/ui/shared/chart/ChartWidgetGraph.tsx b/ui/shared/chart/ChartWidgetGraph.tsx
index 7dbce5bb55..ce1ee8e4c9 100644
--- a/ui/shared/chart/ChartWidgetGraph.tsx
+++ b/ui/shared/chart/ChartWidgetGraph.tsx
@@ -23,13 +23,14 @@ interface Props {
   onZoom: () => void;
   isZoomResetInitial: boolean;
   margin?: ChartMargin;
+  noAnimation?: boolean;
 }
 
 // temporarily turn off the data aggregation, we need a better algorithm for that
 const MAX_SHOW_ITEMS = 100_000_000_000;
 const DEFAULT_CHART_MARGIN = { bottom: 20, left: 10, right: 20, top: 10 };
 
-const ChartWidgetGraph = ({ isEnlarged, items, onZoom, isZoomResetInitial, title, margin: marginProps, units }: Props) => {
+const ChartWidgetGraph = ({ isEnlarged, items, onZoom, isZoomResetInitial, title, margin: marginProps, units, noAnimation }: Props) => {
   const isMobile = useIsMobile();
   const color = useToken('colors', 'blue.200');
   const chartId = `chart-${ title.split(' ').join('') }-${ isEnlarged ? 'fullscreen' : 'small' }`;
@@ -99,7 +100,7 @@ const ChartWidgetGraph = ({ isEnlarged, items, onZoom, isZoomResetInitial, title
           scale={ axes.y.scale }
           ticks={ axesConfig.y.ticks }
           size={ innerWidth }
-          disableAnimation
+          noAnimation
         />
 
         <ChartArea
@@ -108,6 +109,7 @@ const ChartWidgetGraph = ({ isEnlarged, items, onZoom, isZoomResetInitial, title
           color={ color }
           xScale={ axes.x.scale }
           yScale={ axes.y.scale }
+          noAnimation={ noAnimation }
         />
 
         <ChartLine
@@ -124,7 +126,7 @@ const ChartWidgetGraph = ({ isEnlarged, items, onZoom, isZoomResetInitial, title
           scale={ axes.y.scale }
           ticks={ axesConfig.y.ticks }
           tickFormatGenerator={ axes.y.tickFormatter }
-          disableAnimation
+          noAnimation
         />
 
         <ChartAxis
@@ -134,7 +136,7 @@ const ChartWidgetGraph = ({ isEnlarged, items, onZoom, isZoomResetInitial, title
           ticks={ axesConfig.x.ticks }
           anchorEl={ overlayRef.current }
           tickFormatGenerator={ axes.x.tickFormatter }
-          disableAnimation
+          noAnimation
         />
 
         <ChartOverlay ref={ overlayRef } width={ innerWidth } height={ innerHeight }>
@@ -146,6 +148,7 @@ const ChartWidgetGraph = ({ isEnlarged, items, onZoom, isZoomResetInitial, title
             xScale={ axes.x.scale }
             yScale={ axes.y.scale }
             data={ chartData }
+            noAnimation={ noAnimation }
           />
 
           <ChartSelectionX
diff --git a/ui/shared/chart/FullscreenChartModal.tsx b/ui/shared/chart/FullscreenChartModal.tsx
index d7a3b1c692..6835474851 100644
--- a/ui/shared/chart/FullscreenChartModal.tsx
+++ b/ui/shared/chart/FullscreenChartModal.tsx
@@ -71,7 +71,7 @@ const FullscreenChartModal = ({
 
             { !isZoomResetInitial && (
               <Button
-                leftIcon={ <IconSvg name="repeat_arrow" w={ 4 } h={ 4 }/> }
+                leftIcon={ <IconSvg name="repeat" w={ 4 } h={ 4 }/> }
                 colorScheme="blue"
                 gridColumn={ 2 }
                 justifySelf="end"
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-1.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-1.png
new file mode 100644
index 0000000000..b031715818
Binary files /dev/null and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-1.png differ
diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-2.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-2.png
new file mode 100644
index 0000000000..073dfce3a1
Binary files /dev/null and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_incomplete-day-2.png differ
diff --git a/ui/shared/chart/tooltip/ChartTooltipBackdrop.tsx b/ui/shared/chart/tooltip/ChartTooltipBackdrop.tsx
new file mode 100644
index 0000000000..67ddee6bf8
--- /dev/null
+++ b/ui/shared/chart/tooltip/ChartTooltipBackdrop.tsx
@@ -0,0 +1,46 @@
+import { useToken } from '@chakra-ui/react';
+import * as d3 from 'd3';
+import React from 'react';
+
+import { calculateContainerHeight } from './utils';
+
+const ChartTooltipBackdrop = () => {
+  const bgColor = useToken('colors', 'blackAlpha.900');
+
+  return (
+    <rect
+      className="ChartTooltip__backdrop"
+      rx={ 12 }
+      ry={ 12 }
+      fill={ bgColor }
+    />
+  );
+};
+
+export default React.memo(ChartTooltipBackdrop);
+
+interface UseRenderBackdropParams {
+  seriesNum: number;
+  transitionDuration: number | null;
+}
+
+export function useRenderBackdrop(ref: React.RefObject<SVGGElement>, { seriesNum, transitionDuration }: UseRenderBackdropParams) {
+  return React.useCallback((width: number, isIncompleteData: boolean) => {
+    const height = calculateContainerHeight(seriesNum, isIncompleteData);
+
+    if (transitionDuration) {
+      d3.select(ref.current)
+        .select('.ChartTooltip__backdrop')
+        .transition()
+        .duration(transitionDuration)
+        .ease(d3.easeLinear)
+        .attr('width', width)
+        .attr('height', height);
+    } else {
+      d3.select(ref.current)
+        .select('.ChartTooltip__backdrop')
+        .attr('width', width)
+        .attr('height', height);
+    }
+  }, [ ref, seriesNum, transitionDuration ]);
+}
diff --git a/ui/shared/chart/tooltip/ChartTooltipContent.tsx b/ui/shared/chart/tooltip/ChartTooltipContent.tsx
new file mode 100644
index 0000000000..da1a62a5d6
--- /dev/null
+++ b/ui/shared/chart/tooltip/ChartTooltipContent.tsx
@@ -0,0 +1,101 @@
+import * as d3 from 'd3';
+import _clamp from 'lodash/clamp';
+import React from 'react';
+
+import { POINT_SIZE } from './utils';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const ChartTooltipContent = ({ children }: Props) => {
+  return <g className="ChartTooltip__content">{ children }</g>;
+};
+
+export default React.memo(ChartTooltipContent);
+
+interface UseRenderContentParams {
+  chart: {
+    width?: number;
+    height?: number;
+  };
+  transitionDuration: number | null;
+}
+
+export function useRenderContent(ref: React.RefObject<SVGGElement>, { chart, transitionDuration }: UseRenderContentParams) {
+  return React.useCallback((x: number, y: number) => {
+    const tooltipContent = d3.select(ref.current).select('.ChartTooltip__content');
+
+    const transformAttributeFn: d3.ValueFn<d3.BaseType, unknown, string> = (cur, i, nodes) => {
+      const node = nodes[i] as SVGGElement | null;
+      const { width: nodeWidth, height: nodeHeight } = node?.getBoundingClientRect() || { width: 0, height: 0 };
+      const [ translateX, translateY ] = calculatePosition({
+        canvasWidth: chart.width || 0,
+        canvasHeight: chart.height || 0,
+        nodeWidth,
+        nodeHeight,
+        pointX: x,
+        pointY: y,
+        offset: POINT_SIZE,
+      });
+      return `translate(${ translateX }, ${ translateY })`;
+    };
+
+    if (transitionDuration) {
+      tooltipContent
+        .transition()
+        .duration(transitionDuration)
+        .ease(d3.easeLinear)
+        .attr('transform', transformAttributeFn);
+    } else {
+      tooltipContent
+        .attr('transform', transformAttributeFn);
+    }
+
+  }, [ chart.height, chart.width, ref, transitionDuration ]);
+}
+
+interface CalculatePositionParams {
+  pointX: number;
+  pointY: number;
+  offset: number;
+  nodeWidth: number;
+  nodeHeight: number;
+  canvasWidth: number;
+  canvasHeight: number;
+}
+
+function calculatePosition({ pointX, pointY, canvasWidth, canvasHeight, nodeWidth, nodeHeight, offset }: CalculatePositionParams): [ number, number ] {
+  // right
+  if (pointX + offset + nodeWidth <= canvasWidth) {
+    const x = pointX + offset;
+    const y = _clamp(pointY - nodeHeight / 2, 0, canvasHeight - nodeHeight);
+    return [ x, y ];
+  }
+
+  // left
+  if (nodeWidth + offset <= pointX) {
+    const x = pointX - offset - nodeWidth;
+    const y = _clamp(pointY - nodeHeight / 2, 0, canvasHeight - nodeHeight);
+    return [ x, y ];
+  }
+
+  // top
+  if (nodeHeight + offset <= pointY) {
+    const x = _clamp(pointX - nodeWidth / 2, 0, canvasWidth - nodeWidth);
+    const y = pointY - offset - nodeHeight;
+    return [ x, y ];
+  }
+
+  // bottom
+  if (pointY + offset + nodeHeight <= canvasHeight) {
+    const x = _clamp(pointX - nodeWidth / 2, 0, canvasWidth - nodeWidth);
+    const y = pointY + offset;
+    return [ x, y ];
+  }
+
+  const x = _clamp(pointX / 2, 0, canvasWidth - nodeWidth);
+  const y = _clamp(pointY / 2, 0, canvasHeight - nodeHeight);
+
+  return [ x, y ];
+}
diff --git a/ui/shared/chart/tooltip/ChartTooltipLine.tsx b/ui/shared/chart/tooltip/ChartTooltipLine.tsx
new file mode 100644
index 0000000000..7397365945
--- /dev/null
+++ b/ui/shared/chart/tooltip/ChartTooltipLine.tsx
@@ -0,0 +1,21 @@
+import { useToken } from '@chakra-ui/react';
+import * as d3 from 'd3';
+import React from 'react';
+
+const ChartTooltipLine = () => {
+  const lineColor = useToken('colors', 'gray.400');
+  return <line className="ChartTooltip__line" stroke={ lineColor } strokeDasharray="3"/>;
+};
+
+export default React.memo(ChartTooltipLine);
+
+export function useRenderLine(ref: React.RefObject<SVGGElement>, chartHeight: number | undefined) {
+  return React.useCallback((x: number) => {
+    d3.select(ref.current)
+      .select('.ChartTooltip__line')
+      .attr('x1', x)
+      .attr('x2', x)
+      .attr('y1', 0)
+      .attr('y2', chartHeight || 0);
+  }, [ ref, chartHeight ]);
+}
diff --git a/ui/shared/chart/tooltip/ChartTooltipPoint.tsx b/ui/shared/chart/tooltip/ChartTooltipPoint.tsx
new file mode 100644
index 0000000000..c6dd1052f4
--- /dev/null
+++ b/ui/shared/chart/tooltip/ChartTooltipPoint.tsx
@@ -0,0 +1,93 @@
+import { useColorModeValue, useToken } from '@chakra-ui/react';
+import * as d3 from 'd3';
+import React from 'react';
+
+import type { TimeChartData, TimeChartItem } from 'ui/shared/chart/types';
+
+import { POINT_SIZE } from './utils';
+
+const ChartTooltipPoint = () => {
+  const bgColor = useToken('colors', useColorModeValue('black', 'white'));
+  const borderColor = useToken('colors', useColorModeValue('white', 'black'));
+
+  return (
+    <circle
+      className="ChartTooltip__point"
+      r={ POINT_SIZE / 2 }
+      opacity={ 1 }
+      fill={ bgColor }
+      stroke={ borderColor }
+      strokeWidth={ 4 }
+    />
+  );
+};
+
+export default React.memo(ChartTooltipPoint);
+
+interface UseRenderPointsParams {
+  data: TimeChartData;
+  xScale: d3.ScaleTime<number, number>;
+  yScale: d3.ScaleLinear<number, number>;
+}
+
+export interface CurrentPoint {
+  datumIndex: number;
+  item: TimeChartItem;
+}
+
+interface RenderPointsReturnType{
+  x: number;
+  y: number;
+  currentPoints: Array<CurrentPoint>;
+}
+
+export function useRenderPoints(ref: React.RefObject<SVGGElement>, params: UseRenderPointsParams) {
+  return React.useCallback((x: number): RenderPointsReturnType => {
+    const xDate = params.xScale.invert(x);
+    const bisectDate = d3.bisector<TimeChartItem, unknown>((d) => d.date).left;
+    let baseXPos = 0;
+    let baseYPos = 0;
+    const currentPoints: Array<CurrentPoint> = [];
+
+    d3.select(ref.current)
+      .selectAll('.ChartTooltip__point')
+      .attr('transform', (cur, elementIndex) => {
+        const datum = params.data[elementIndex];
+        const index = bisectDate(datum.items, xDate, 1);
+        const d0 = datum.items[index - 1] as TimeChartItem | undefined;
+        const d1 = datum.items[index] as TimeChartItem | undefined;
+        const d = (() => {
+          if (!d0) {
+            return d1;
+          }
+          if (!d1) {
+            return d0;
+          }
+          return xDate.getTime() - d0.date.getTime() > d1.date.getTime() - xDate.getTime() ? d1 : d0;
+        })();
+
+        if (d?.date === undefined && d?.value === undefined) {
+          // move point out of container
+          return 'translate(-100,-100)';
+        }
+
+        const xPos = params.xScale(d.date);
+        const yPos = params.yScale(d.value);
+
+        if (elementIndex === 0) {
+          baseXPos = xPos;
+          baseYPos = yPos;
+        }
+
+        currentPoints.push({ item: d, datumIndex: elementIndex });
+
+        return `translate(${ xPos }, ${ yPos })`;
+      });
+
+    return {
+      x: baseXPos,
+      y: baseYPos,
+      currentPoints,
+    };
+  }, [ ref, params ]);
+}
diff --git a/ui/shared/chart/tooltip/ChartTooltipRow.tsx b/ui/shared/chart/tooltip/ChartTooltipRow.tsx
new file mode 100644
index 0000000000..a35dcb25f1
--- /dev/null
+++ b/ui/shared/chart/tooltip/ChartTooltipRow.tsx
@@ -0,0 +1,96 @@
+import { useToken } from '@chakra-ui/react';
+import * as d3 from 'd3';
+import React from 'react';
+
+import type { TimeChartData } from '../types';
+
+import type { CurrentPoint } from './ChartTooltipPoint';
+import { calculateRowTransformValue, LABEL_WIDTH, PADDING } from './utils';
+
+type Props = {
+  lineNum: number;
+} & ({ label: string; children?: never } | { children: React.ReactNode; label?: never })
+
+const ChartTooltipRow = ({ label, lineNum, children }: Props) => {
+  const labelColor = useToken('colors', 'blue.100');
+  const textColor = useToken('colors', 'white');
+
+  return (
+    <g className="ChartTooltip__row" transform={ calculateRowTransformValue(lineNum) }>
+      { children || (
+        <>
+          <text
+            className="ChartTooltip__label"
+            transform="translate(0,0)"
+            dominantBaseline="hanging"
+            fill={ labelColor }
+          >
+            { label }
+          </text>
+          <text
+            className="ChartTooltip__value"
+            transform={ `translate(${ LABEL_WIDTH },0)` }
+            dominantBaseline="hanging"
+            fill={ textColor }
+          />
+        </>
+      ) }
+    </g>
+  );
+};
+
+export default React.memo(ChartTooltipRow);
+
+interface UseRenderRowsParams {
+  data: TimeChartData;
+  xScale: d3.ScaleTime<number, number>;
+  minWidth: number;
+}
+
+interface UseRenderRowsReturnType {
+  width: number;
+}
+
+export function useRenderRows(ref: React.RefObject<SVGGElement>, { data, xScale, minWidth }: UseRenderRowsParams) {
+  return React.useCallback((x: number, currentPoints: Array<CurrentPoint>): UseRenderRowsReturnType => {
+
+    // update "transform" prop of all rows
+    const isIncompleteData = currentPoints.some(({ item }) => item.isApproximate);
+    d3.select(ref.current)
+      .selectAll<Element, TimeChartData>('.ChartTooltip__row')
+      .attr('transform', (datum, index) => {
+        return calculateRowTransformValue(index - (isIncompleteData ? 0 : 1));
+      });
+
+    // update date and indicators value
+    // here we assume that the first value element contains the date
+    const valueNodes = d3.select(ref.current)
+      .selectAll<Element, TimeChartData>('.ChartTooltip__value')
+      .text((_, index) => {
+        if (index === 0) {
+          const date = xScale.invert(x);
+          const dateValue = data[0].items.find((item) => item.date.getTime() === date.getTime())?.dateLabel;
+          const dateValueFallback = d3.timeFormat('%e %b %Y')(xScale.invert(x));
+          return dateValue || dateValueFallback;
+        }
+
+        const { datumIndex, item } = currentPoints.find(({ datumIndex }) => datumIndex === index - 1) || {};
+        if (datumIndex === undefined || !item) {
+          return null;
+        }
+
+        const value = data[datumIndex]?.valueFormatter?.(item.value) ?? item.value.toLocaleString(undefined, { minimumSignificantDigits: 1 });
+        const units = data[datumIndex]?.units ? ` ${ data[datumIndex]?.units }` : '';
+
+        return value + units;
+      })
+      .nodes();
+
+    const valueWidths = valueNodes.map((node) => node?.getBoundingClientRect?.().width);
+    const maxValueWidth = Math.max(...valueWidths);
+    const maxRowWidth = Math.max(minWidth, 2 * PADDING + LABEL_WIDTH + maxValueWidth);
+
+    return { width: maxRowWidth };
+
+  }, [ data, minWidth, ref, xScale ]);
+}
diff --git a/ui/shared/chart/tooltip/ChartTooltipTitle.tsx b/ui/shared/chart/tooltip/ChartTooltipTitle.tsx
new file mode 100644
index 0000000000..93ab2e9943
--- /dev/null
+++ b/ui/shared/chart/tooltip/ChartTooltipTitle.tsx
@@ -0,0 +1,33 @@
+import { useToken } from '@chakra-ui/react';
+import * as d3 from 'd3';
+import React from 'react';
+
+import ChartTooltipRow from './ChartTooltipRow';
+
+const ChartTooltipTitle = () => {
+  const titleColor = useToken('colors', 'yellow.300');
+
+  return (
+    <ChartTooltipRow lineNum={ 0 }>
+      <text
+        className="ChartTooltip__title"
+        transform="translate(0,0)"
+        fill={ titleColor }
+        opacity={ 0 }
+        dominantBaseline="hanging"
+      >
+        Incomplete day
+      </text>
+    </ChartTooltipRow>
+  );
+};
+
+export default React.memo(ChartTooltipTitle);
+
+export function useRenderTitle(ref: React.RefObject<SVGGElement>) {
+  return React.useCallback((isVisible: boolean) => {
+    d3.select(ref.current)
+      .select('.ChartTooltip__title')
+      .attr('opacity', isVisible ? 1 : 0);
+  }, [ ref ]);
+}
diff --git a/ui/shared/chart/utils/pointerTracker.tsx b/ui/shared/chart/tooltip/pointerTracker.ts
similarity index 100%
rename from ui/shared/chart/utils/pointerTracker.tsx
rename to ui/shared/chart/tooltip/pointerTracker.ts
diff --git a/ui/shared/chart/tooltip/utils.ts b/ui/shared/chart/tooltip/utils.ts
new file mode 100644
index 0000000000..8b11b366a9
--- /dev/null
+++ b/ui/shared/chart/tooltip/utils.ts
@@ -0,0 +1,16 @@
+export const TEXT_LINE_HEIGHT = 12;
+export const PADDING = 16;
+export const LINE_SPACE = 10;
+export const POINT_SIZE = 16;
+export const LABEL_WIDTH = 80;
+
+export const calculateContainerHeight = (seriesNum: number, isIncomplete?: boolean) => {
+  const linesNum = isIncomplete ? seriesNum + 2 : seriesNum + 1;
+
+  return 2 * PADDING + linesNum * TEXT_LINE_HEIGHT + (linesNum - 1) * LINE_SPACE;
+};
+
+export const calculateRowTransformValue = (rowNum: number) => {
+  const top = Math.max(0, PADDING + rowNum * (LINE_SPACE + TEXT_LINE_HEIGHT));
+  return `translate(${ PADDING },${ top })`;
+};
diff --git a/ui/shared/chart/types.tsx b/ui/shared/chart/types.tsx
index 5810fe2fb5..c1c02b1b12 100644
--- a/ui/shared/chart/types.tsx
+++ b/ui/shared/chart/types.tsx
@@ -8,6 +8,7 @@ export interface TimeChartItem {
   date: Date;
   dateLabel?: string;
   value: number;
+  isApproximate?: boolean;
 }
 
 export interface ChartMargin {
diff --git a/ui/shared/chart/utils/animations.ts b/ui/shared/chart/utils/animations.ts
new file mode 100644
index 0000000000..2f873f4a69
--- /dev/null
+++ b/ui/shared/chart/utils/animations.ts
@@ -0,0 +1,33 @@
+import * as d3 from 'd3';
+
+export type AnimationType = 'left' | 'fadeIn' | 'none';
+
+export const animateLeft = (path: SVGPathElement) => {
+  const totalLength = path.getTotalLength() || 0;
+  d3.select(path)
+    .attr('opacity', 1)
+    .attr('stroke-dasharray', `${ totalLength },${ totalLength }`)
+    .attr('stroke-dashoffset', totalLength)
+    .transition()
+    .duration(750)
+    .ease(d3.easeLinear)
+    .attr('stroke-dashoffset', 0);
+};
+
+export const animateFadeIn = (path: SVGPathElement) => {
+  d3.select(path)
+    .transition()
+    .duration(750)
+    .ease(d3.easeLinear)
+    .attr('opacity', 1);
+};
+
+export const noneAnimation = (path: SVGPathElement) => {
+  d3.select(path).attr('opacity', 1);
+};
+
+export const ANIMATIONS: Record<AnimationType, (path: SVGPathElement) => void> = {
+  left: animateLeft,
+  fadeIn: animateFadeIn,
+  none: noneAnimation,
+};
diff --git a/ui/shared/chart/utils/computeTooltipPosition.ts b/ui/shared/chart/utils/computeTooltipPosition.ts
deleted file mode 100644
index 88356d34cd..0000000000
--- a/ui/shared/chart/utils/computeTooltipPosition.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import _clamp from 'lodash/clamp';
-
-interface Params {
-  pointX: number;
-  pointY: number;
-  offset: number;
-  nodeWidth: number;
-  nodeHeight: number;
-  canvasWidth: number;
-  canvasHeight: number;
-}
-
-export default function computeTooltipPosition({ pointX, pointY, canvasWidth, canvasHeight, nodeWidth, nodeHeight, offset }: Params): [ number, number ] {
-  // right
-  if (pointX + offset + nodeWidth <= canvasWidth) {
-    const x = pointX + offset;
-    const y = _clamp(pointY - nodeHeight / 2, 0, canvasHeight - nodeHeight);
-    return [ x, y ];
-  }
-
-  // left
-  if (nodeWidth + offset <= pointX) {
-    const x = pointX - offset - nodeWidth;
-    const y = _clamp(pointY - nodeHeight / 2, 0, canvasHeight - nodeHeight);
-    return [ x, y ];
-  }
-
-  // top
-  if (nodeHeight + offset <= pointY) {
-    const x = _clamp(pointX - nodeWidth / 2, 0, canvasWidth - nodeWidth);
-    const y = pointY - offset - nodeHeight;
-    return [ x, y ];
-  }
-
-  // bottom
-  if (pointY + offset + nodeHeight <= canvasHeight) {
-    const x = _clamp(pointX - nodeWidth / 2, 0, canvasWidth - nodeWidth);
-    const y = pointY + offset;
-    return [ x, y ];
-  }
-
-  const x = _clamp(pointX / 2, 0, canvasWidth - nodeWidth);
-  const y = _clamp(pointY / 2, 0, canvasHeight - nodeHeight);
-
-  return [ x, y ];
-}
diff --git a/ui/shared/chart/utils/formatters.ts b/ui/shared/chart/utils/formatters.ts
new file mode 100644
index 0000000000..9d0d13a7d2
--- /dev/null
+++ b/ui/shared/chart/utils/formatters.ts
@@ -0,0 +1,19 @@
+import type { TimeChartItem } from '../types';
+
+export const getIncompleteDataLineSource = (data: Array<TimeChartItem>): Array<TimeChartItem> => {
+  const result: Array<TimeChartItem> = [];
+
+  for (let index = 0; index < data.length; index++) {
+    const current = data[index];
+    if (current.isApproximate) {
+      const prev = data[index - 1];
+      const next = data[index + 1];
+
+      prev && !prev.isApproximate && result.push(prev);
+      result.push(current);
+      next && !next.isApproximate && result.push(next);
+    }
+  }
+
+  return result;
+};
diff --git a/ui/shared/entities/address/AddressEntity.pw.tsx b/ui/shared/entities/address/AddressEntity.pw.tsx
index 91ffb6d093..a06d3a6092 100644
--- a/ui/shared/entities/address/AddressEntity.pw.tsx
+++ b/ui/shared/entities/address/AddressEntity.pw.tsx
@@ -1,27 +1,26 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
 import * as addressMock from 'mocks/address/address';
-import TestApp from 'playwright/TestApp';
+import * as implementationsMock from 'mocks/address/implementations';
+import * as metadataMock from 'mocks/metadata/address';
+import { test, expect } from 'playwright/lib';
 
 import AddressEntity from './AddressEntity';
 
-const iconSizes = [ 'md', 'lg' ];
+const iconSizes = [ 'md', 'lg' ] as const;
 
 test.use({ viewport: { width: 180, height: 140 } });
 
 test.describe('icon size', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <AddressEntity
-            address={ addressMock.withoutName }
-            iconSize={ size }
-          />
-        </TestApp>,
+    test(size, async({ render }) => {
+      const component = await render(
+        <AddressEntity
+          address={ addressMock.withoutName }
+          icon={{ size }}
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -30,54 +29,110 @@ test.describe('icon size', () => {
 });
 
 test.describe('contract', () => {
-  test('unverified', async({ mount, page }) => {
-    const component = await mount(
-      <TestApp>
-        <AddressEntity
-          address={{ ...addressMock.contract, is_verified: false }}
-        />
-      </TestApp>,
+  test('unverified', async({ render, page }) => {
+    const component = await render(
+      <AddressEntity
+        address={{ ...addressMock.contract, is_verified: false, implementations: null }}
+      />,
     );
 
     await component.getByText(/eternal/i).hover();
     await expect(page).toHaveScreenshot();
   });
 
-  test('verified', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <AddressEntity
-          address={{ ...addressMock.contract, is_verified: true }}
-        />
-      </TestApp>,
+  test('verified', async({ render }) => {
+    const component = await render(
+      <AddressEntity
+        address={{ ...addressMock.contract, is_verified: true, implementations: null }}
+      />,
     );
 
     await expect(component).toHaveScreenshot();
   });
 });
 
+test.describe('proxy contract', () => {
+  test.use({ viewport: { width: 500, height: 300 } });
+
+  test('with implementation name', async({ render, page }) => {
+    const component = await render(
+      <AddressEntity
+        address={ addressMock.contract }
+      />,
+    );
+
+    await component.getByText(/home/i).hover();
+    await expect(page.getByText('Proxy contract')).toBeVisible();
+    await expect(page).toHaveScreenshot();
+  });
+
+  test('without implementation name', async({ render, page }) => {
+    const component = await render(
+      <AddressEntity
+        address={{ ...addressMock.contract, implementations: [ { address: addressMock.contract.implementations?.[0].address as string } ] }}
+      />,
+    );
+
+    await component.getByText(/eternal/i).hover();
+    await expect(page.getByText('Proxy contract')).toBeVisible();
+    await expect(page).toHaveScreenshot();
+  });
+
+  test('without any name', async({ render, page }) => {
+    const component = await render(
+      <AddressEntity
+        address={{ ...addressMock.contract, name: undefined, implementations: [ { address: addressMock.contract.implementations?.[0].address as string } ] }}
+      />,
+    );
+
+    await component.getByText(addressMock.contract.hash.slice(0, 4)).hover();
+    await expect(page.getByText('Proxy contract')).toBeVisible();
+    await expect(page).toHaveScreenshot();
+  });
+
+  test('with multiple implementations', async({ render, page }) => {
+    const component = await render(
+      <AddressEntity
+        address={{ ...addressMock.contract, implementations: implementationsMock.multiple }}
+      />,
+    );
+
+    await component.getByText(/eternal/i).hover();
+    await expect(page.getByText('Proxy contract')).toBeVisible();
+    await expect(page).toHaveScreenshot();
+  });
+
+  test('with name tag', async({ render, page }) => {
+    const component = await render(
+      <AddressEntity
+        address={{ ...addressMock.contract, metadata: { reputation: 1, tags: [ metadataMock.nameTag ] } }}
+      />,
+    );
+
+    await component.getByText(/quack/i).hover();
+    await expect(page.getByText('Proxy contract')).toBeVisible();
+    await expect(page).toHaveScreenshot();
+  });
+});
+
 test.describe('loading', () => {
-  test('without alias', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <AddressEntity
-          address={ addressMock.withoutName }
-          isLoading
-        />
-      </TestApp>,
+  test('without alias', async({ render }) => {
+    const component = await render(
+      <AddressEntity
+        address={ addressMock.withoutName }
+        isLoading
+      />,
     );
 
     await expect(component).toHaveScreenshot();
   });
 
-  test('with alias', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <AddressEntity
-          address={ addressMock.withName }
-          isLoading
-        />
-      </TestApp>,
+  test('with alias', async({ render }) => {
+    const component = await render(
+      <AddressEntity
+        address={ addressMock.withName }
+        isLoading
+      />,
     );
 
     await expect(component).toHaveScreenshot();
@@ -85,71 +140,71 @@ test.describe('loading', () => {
 
 });
 
-test('with ENS', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressEntity
-        address={ addressMock.withEns }
-      />
-    </TestApp>,
+test('with ENS', async({ render }) => {
+  const component = await render(
+    <AddressEntity
+      address={ addressMock.withEns }
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('external link', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressEntity
-        address={ addressMock.withoutName }
-        isExternal
-      />
-    </TestApp>,
+test('with name tag', async({ render }) => {
+  const component = await render(
+    <AddressEntity
+      address={ addressMock.withNameTag }
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('no link', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressEntity
-        address={ addressMock.withoutName }
-        noLink
-      />
-    </TestApp>,
+test('external link', async({ render }) => {
+  const component = await render(
+    <AddressEntity
+      address={ addressMock.withoutName }
+      isExternal
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('customization', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressEntity
-        address={ addressMock.withoutName }
-        truncation="constant"
-        p={ 3 }
-        borderWidth="1px"
-        borderColor="blue.700"
-      />
-    </TestApp>,
+test('no link', async({ render }) => {
+  const component = await render(
+    <AddressEntity
+      address={ addressMock.withoutName }
+      noLink
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('hover', async({ page, mount }) => {
-  const component = await mount(
-    <TestApp>
-      <AddressHighlightProvider>
-        <Box p={ 3 }>
-          <AddressEntity
-            address={ addressMock.withoutName }
-          />
-        </Box>
-      </AddressHighlightProvider>
-    </TestApp>,
+test('customization', async({ render }) => {
+  const component = await render(
+    <AddressEntity
+      address={ addressMock.withoutName }
+      truncation="constant"
+      p={ 3 }
+      borderWidth="1px"
+      borderColor="blue.700"
+    />,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('hover', async({ page, render }) => {
+  const component = await render(
+    <AddressHighlightProvider>
+      <Box p={ 3 }>
+        <AddressEntity
+          address={ addressMock.withoutName }
+        />
+      </Box>
+    </AddressHighlightProvider>,
   );
 
   await component.getByText(addressMock.hash.slice(0, 4)).hover();
diff --git a/ui/shared/entities/address/AddressEntity.tsx b/ui/shared/entities/address/AddressEntity.tsx
index 1c5889ec86..16ae04d95a 100644
--- a/ui/shared/entities/address/AddressEntity.tsx
+++ b/ui/shared/entities/address/AddressEntity.tsx
@@ -1,6 +1,5 @@
 import type { As } from '@chakra-ui/react';
 import { Box, Flex, Skeleton, Tooltip, chakra, VStack } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
 import React from 'react';
 
 import type { AddressParam } from 'types/api/addressParams';
@@ -10,7 +9,8 @@ import { route } from 'nextjs-routes';
 import { useAddressHighlightContext } from 'lib/contexts/addressHighlight';
 import * as EntityBase from 'ui/shared/entities/base/components';
 
-import { getIconProps } from '../base/utils';
+import { distributeEntityProps, getIconProps } from '../base/utils';
+import AddressEntityContentProxy from './AddressEntityContentProxy';
 import AddressIdenticon from './AddressIdenticon';
 import { formattedLuksoName, useUniversalProfile, IdenticonUniversalProfile } from './IdenticonUniversalProfileQuery';
 if (process.browser) {
@@ -32,9 +32,7 @@ const Link = chakra((props: LinkProps) => {
   );
 });
 
-type IconProps = Pick<EntityProps, 'address' | 'isLoading' | 'iconSize' | 'noIcon' | 'isSafeAddress' | 'iconColor'> & {
-  asProp?: As;
-};
+type IconProps = Pick<EntityProps, 'address' | 'isSafeAddress'> & EntityBase.IconBaseProps;
 
 const Icon = (props: IconProps) => {
   if (props.noIcon) {
@@ -42,8 +40,8 @@ const Icon = (props: IconProps) => {
   }
 
   const styles = {
-    ...getIconProps(props.iconSize),
-    marginRight: 2,
+    ...getIconProps(props.size),
+    marginRight: props.marginRight ?? 2,
   };
 
   if (props.isLoading) {
@@ -60,27 +58,18 @@ const Icon = (props: IconProps) => {
       );
     }
 
-    if (props.address.is_verified) {
-      return (
-        <Tooltip label="Verified contract">
-          <span>
-            <EntityBase.Icon
-              { ...props }
-              name="contract_verified"
-              color="green.500"
-              borderRadius={ 0 }
-            />
-          </span>
-        </Tooltip>
-      );
-    }
+    const isProxy = Boolean(props.address.implementations?.length);
+    const isVerified = isProxy ? props.address.is_verified && props.address.implementations?.every(({ name }) => Boolean(name)) : props.address.is_verified;
+    const contractIconName: EntityBase.IconBaseProps['name'] = props.address.is_verified ? 'contracts/verified' : 'contracts/regular';
+    const label = (isVerified ? 'verified ' : '') + (isProxy ? 'proxy contract' : 'contract');
 
     const ContractIcon = (
-      <Tooltip label="Contract">
+      <Tooltip label={ label.slice(0, 1).toUpperCase() + label.slice(1) }>
         <span>
           <EntityBase.Icon
             { ...props }
-            name="contract"
+            name={ isProxy ? 'contracts/proxy' : contractIconName }
+            color={ isVerified ? 'green.500' : undefined }
             borderRadius={ 0 }
           />
         </span>
@@ -91,33 +80,39 @@ const Icon = (props: IconProps) => {
   }
 
   return (
-    <Tooltip label={ props.address.implementation_name }>
-      <Flex marginRight={ styles.marginRight }>
-        <AddressIdenticon
-          size={ props.iconSize === 'lg' ? 30 : 20 }
-          hash={ props.address.hash }
-        />
-      </Flex>
-    </Tooltip>
+    <Flex marginRight={ styles.marginRight }>
+      <AddressIdenticon
+        size={ props.size === 'lg' ? 30 : 20 }
+        hash={ props.address.hash }
+      />
+    </Flex>
   );
 };
 
-type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'address'>;
+export type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'address'>;
 
 const Content = chakra((props: ContentProps) => {
-  if (props.address.name || props.address.ens_domain_name) {
-    const text = props.address.ens_domain_name || props.address.name;
+  const nameTag = props.address.metadata?.tags.find(tag => tag.tagType === 'name')?.name;
+  const nameText = nameTag || props.address.ens_domain_name || props.address.name;
+
+  const isProxy = props.address.implementations && props.address.implementations.length > 0;
+
+  if (isProxy) {
+    return <AddressEntityContentProxy { ...props }/>;
+  }
+
+  if (nameText) {
     const label = (
       <VStack gap={ 0 } py={ 1 } color="inherit">
-        <Box fontWeight={ 600 } whiteSpace="pre-wrap" wordBreak="break-word">{ text }</Box>
+        <Box fontWeight={ 600 } whiteSpace="pre-wrap" wordBreak="break-word">{ nameText }</Box>
         <Box whiteSpace="pre-wrap" wordBreak="break-word">{ props.address.hash }</Box>
       </VStack>
     );
 
     return (
-      <Tooltip label={ label } maxW={{ base: '100vw', lg: '400px' }}>
+      <Tooltip label={ label } maxW={{ base: 'calc(100vw - 8px)', lg: '400px' }}>
         <Skeleton isLoaded={ !props.isLoading } overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" as="span">
-          { text }
+          { nameText }
         </Skeleton>
       </Tooltip>
     );
@@ -147,16 +142,19 @@ const Copy = (props: CopyProps) => {
 
 const Container = EntityBase.Container;
 
+interface AddressProp extends Partial<AddressParam> {
+  hash: string;
+}
+
 export interface EntityProps extends EntityBase.EntityBaseProps {
-  address: Pick<AddressParam, 'hash' | 'name' | 'is_contract' | 'is_verified' | 'implementation_name' | 'ens_domain_name'>;
+  address: AddressProp;
   isSafeAddress?: boolean;
+  noHighlight?: boolean;
 }
 
 const AddressEntry = (props: EntityProps) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
-
-  const context = useAddressHighlightContext();
+  const partsProps = distributeEntityProps(props);
+  const context = useAddressHighlightContext(props.noHighlight);
 
   return (
     <Container
@@ -167,17 +165,18 @@ const AddressEntry = (props: EntityProps) => {
       onMouseEnter={ context?.onMouseEnter }
       onMouseLeave={ context?.onMouseLeave }
       position="relative"
+      zIndex={ 0 }
     >
-      <Icon { ...partsProps }/>
-      <Link { ...linkProps }>
-        <Content { ...partsProps }/>
+      <Icon { ...partsProps.icon }/>
+      <Link { ...partsProps.link }>
+        <Content { ...partsProps.content }/>
       </Link>
-      <Copy { ...partsProps }/>
+      <Copy { ...partsProps.copy }/>
     </Container>
   );
 };
 
-export default React.memo(chakra(AddressEntry));
+export default React.memo(chakra<As, EntityProps>(AddressEntry));
 
 export {
   Container,
diff --git a/ui/shared/entities/address/AddressEntityContentProxy.tsx b/ui/shared/entities/address/AddressEntityContentProxy.tsx
new file mode 100644
index 0000000000..66fbb4146f
--- /dev/null
+++ b/ui/shared/entities/address/AddressEntityContentProxy.tsx
@@ -0,0 +1,76 @@
+import { Box, DarkMode, PopoverBody, PopoverContent, PopoverTrigger, Portal, useColorModeValue, Flex, PopoverArrow } from '@chakra-ui/react';
+import React from 'react';
+
+import Popover from 'ui/shared/chakra/Popover';
+import * as EntityBase from 'ui/shared/entities/base/components';
+
+import type { ContentProps } from './AddressEntity';
+import AddressEntity from './AddressEntity';
+
+const AddressEntityContentProxy = (props: ContentProps) => {
+  const bgColor = useColorModeValue('gray.700', 'gray.900');
+
+  const implementations = props.address.implementations;
+
+  const handleClick = React.useCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+  }, []);
+
+  if (!implementations || implementations.length === 0) {
+    return null;
+  }
+
+  const colNum = Math.min(implementations.length, 3);
+  const nameTag = props.address.metadata?.tags.find(tag => tag.tagType === 'name')?.name;
+
+  const implementationName = implementations.length === 1 && implementations[0].name ? implementations[0].name : undefined;
+
+  return (
+    <Popover trigger="hover" isLazy gutter={ 8 }>
+      <PopoverTrigger>
+        <Box display="inline-flex" w="100%">
+          <EntityBase.Content
+            { ...props }
+            truncation={ nameTag || implementationName || props.address.name ? 'tail' : props.truncation }
+            text={ nameTag || implementationName || props.address.name || props.address.hash }
+            isTooltipDisabled
+          />
+        </Box>
+      </PopoverTrigger>
+      <Portal>
+        <DarkMode>
+          <PopoverContent bgColor={ bgColor } w="fit-content" borderRadius="sm" maxW={{ base: '100vw', lg: '410px' }} onClick={ handleClick }>
+            <PopoverArrow bgColor={ bgColor }/>
+            <PopoverBody color="white" p={ 2 } fontSize="sm" lineHeight={ 5 } textAlign="center">
+              <Box fontWeight={ 600 }>
+                Proxy contract
+                { props.address.name ? ` (${ props.address.name })` : '' }
+              </Box>
+              <AddressEntity address={{ hash: props.address.hash }} noLink noIcon noHighlight justifyContent="center"/>
+              <Box fontWeight={ 600 } mt={ 2 }>
+                Implementation{ implementations.length > 1 ? 's' : '' }
+                { implementationName ? ` (${ implementationName })` : '' }
+              </Box>
+              <Flex flexWrap="wrap" columnGap={ 3 }>
+                { implementations.map((item) => (
+                  <AddressEntity
+                    key={ item.address }
+                    address={{ hash: item.address }}
+                    noLink
+                    noIcon
+                    noHighlight
+                    minW={ `calc((100% - ${ colNum - 1 } * 12px) / ${ colNum })` }
+                    flex={ 1 }
+                    justifyContent={ colNum === 1 ? 'center' : undefined }
+                  />
+                )) }
+              </Flex>
+            </PopoverBody>
+          </PopoverContent>
+        </DarkMode>
+      </Portal>
+    </Popover>
+  );
+};
+
+export default React.memo(AddressEntityContentProxy);
diff --git a/ui/shared/entities/address/AddressIdenticon.tsx b/ui/shared/entities/address/AddressIdenticon.tsx
index a08fa5a4a9..3de31738fb 100644
--- a/ui/shared/entities/address/AddressIdenticon.tsx
+++ b/ui/shared/entities/address/AddressIdenticon.tsx
@@ -54,7 +54,7 @@ const Icon = dynamic(
 
         // eslint-disable-next-line react/display-name
         return (props: IconProps) => {
-          const svg = GradientAvatar(props.hash, props.size);
+          const svg = GradientAvatar(props.hash, props.size, 'circle');
           return <div dangerouslySetInnerHTML={{ __html: svg }}/>;
         };
       }
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_contract-unverified-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_contract-unverified-1.png
index 5af8e38ece..a18893d2ea 100644
Binary files a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_contract-unverified-1.png and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_contract-unverified-1.png differ
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_external-link-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_external-link-1.png
index 5d824ab018..654d190ae1 100644
Binary files a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_external-link-1.png and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_external-link-1.png differ
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-implementation-name-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-implementation-name-1.png
new file mode 100644
index 0000000000..e5eee1c270
Binary files /dev/null and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-implementation-name-1.png differ
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-multiple-implementations-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-multiple-implementations-1.png
new file mode 100644
index 0000000000..0b4b672cf7
Binary files /dev/null and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-multiple-implementations-1.png differ
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-name-tag-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-name-tag-1.png
new file mode 100644
index 0000000000..6ce9f48437
Binary files /dev/null and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-name-tag-1.png differ
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-without-any-name-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-without-any-name-1.png
new file mode 100644
index 0000000000..e4b4af7bbd
Binary files /dev/null and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-without-any-name-1.png differ
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-without-implementation-name-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-without-implementation-name-1.png
new file mode 100644
index 0000000000..cb310563fe
Binary files /dev/null and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-without-implementation-name-1.png differ
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_with-name-tag-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_with-name-tag-1.png
new file mode 100644
index 0000000000..b3b745e458
Binary files /dev/null and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_with-name-tag-1.png differ
diff --git a/ui/shared/entities/base/components.tsx b/ui/shared/entities/base/components.tsx
index d10907b5f6..b754365c28 100644
--- a/ui/shared/entities/base/components.tsx
+++ b/ui/shared/entities/base/components.tsx
@@ -8,8 +8,8 @@ import HashStringShorten from 'ui/shared/HashStringShorten';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkExternal from 'ui/shared/LinkExternal';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 
 import { getIconProps, type IconSize } from './utils';
 
@@ -18,8 +18,7 @@ export type Truncation = 'constant' | 'constant_long' | 'dynamic' | 'tail' | 'no
 export interface EntityBaseProps {
   className?: string;
   href?: string;
-  iconSize?: IconSize;
-  iconColor?: IconProps['color'];
+  icon?: EntityIconProps;
   isExternal?: boolean;
   isLoading?: boolean;
   noCopy?: boolean;
@@ -80,29 +79,31 @@ const Link = chakra(({ isLoading, children, isExternal, onClick, href, noLink }:
   );
 });
 
-export interface IconBaseProps extends Pick<EntityBaseProps, 'isLoading' | 'iconSize' | 'noIcon' | 'iconColor'> {
-  name: IconName;
-  color?: IconProps['color'];
-  borderRadius?: IconProps['borderRadius'];
+interface EntityIconProps extends Pick<IconProps, 'color' | 'borderRadius' | 'marginRight' | 'boxSize'> {
+  name?: IconName;
+  size?: IconSize;
 }
 
-const Icon = ({ isLoading, iconSize, noIcon, name, iconColor, color, borderRadius }: IconBaseProps) => {
+export interface IconBaseProps extends Pick<EntityBaseProps, 'isLoading' | 'noIcon'>, EntityIconProps {
+}
+
+const Icon = ({ isLoading, noIcon, size, name, color, borderRadius, marginRight, boxSize }: IconBaseProps) => {
   const defaultColor = useColorModeValue('gray.500', 'gray.400');
 
-  if (noIcon) {
+  if (noIcon || !name) {
     return null;
   }
 
-  const styles = getIconProps(iconSize);
+  const styles = getIconProps(size);
   return (
     <IconSvg
       name={ name }
-      boxSize={ styles.boxSize }
+      boxSize={ boxSize ?? styles.boxSize }
       isLoading={ isLoading }
       borderRadius={ borderRadius ?? 'base' }
       display="block"
-      mr={ 2 }
-      color={ iconColor ?? color ?? defaultColor }
+      mr={ marginRight ?? 2 }
+      color={ color ?? defaultColor }
       minW={ 0 }
       flexShrink={ 0 }
     />
@@ -112,9 +113,10 @@ const Icon = ({ isLoading, iconSize, noIcon, name, iconColor, color, borderRadiu
 export interface ContentBaseProps extends Pick<EntityBaseProps, 'className' | 'isLoading' | 'truncation' | 'tailLength'> {
   asProp?: As;
   text: string;
+  isTooltipDisabled?: boolean;
 }
 
-const Content = chakra(({ className, isLoading, asProp, text, truncation = 'dynamic', tailLength }: ContentBaseProps) => {
+const Content = chakra(({ className, isLoading, asProp, text, truncation = 'dynamic', tailLength, isTooltipDisabled }: ContentBaseProps) => {
 
   const children = (() => {
     switch (truncation) {
@@ -124,6 +126,7 @@ const Content = chakra(({ className, isLoading, asProp, text, truncation = 'dyna
             hash={ text }
             as={ asProp }
             type="long"
+            isTooltipDisabled={ isTooltipDisabled }
           />
         );
       case 'constant':
@@ -131,6 +134,7 @@ const Content = chakra(({ className, isLoading, asProp, text, truncation = 'dyna
           <HashStringShorten
             hash={ text }
             as={ asProp }
+            isTooltipDisabled={ isTooltipDisabled }
           />
         );
       case 'dynamic':
@@ -141,8 +145,10 @@ const Content = chakra(({ className, isLoading, asProp, text, truncation = 'dyna
             hash={ text }
             as={ asProp }
             tailLength={ tailLength }
+            isTooltipDisabled={ isTooltipDisabled }
           />
         );
+      case 'tail':
       case 'none':
         return <chakra.span as={ asProp }>{ text }</chakra.span>;
     }
@@ -154,6 +160,7 @@ const Content = chakra(({ className, isLoading, asProp, text, truncation = 'dyna
       isLoaded={ !isLoading }
       overflow="hidden"
       whiteSpace="nowrap"
+      textOverflow={ truncation === 'tail' ? 'ellipsis' : undefined }
     >
       { children }
     </Skeleton>
diff --git a/ui/shared/entities/base/utils.ts b/ui/shared/entities/base/utils.ts
index 6763b9dd56..bba8cc3e57 100644
--- a/ui/shared/entities/base/utils.ts
+++ b/ui/shared/entities/base/utils.ts
@@ -1,3 +1,5 @@
+import type { EntityBaseProps } from './components';
+
 export type IconSize = 'md' | 'lg';
 
 export function getIconProps(size: IconSize = 'md') {
@@ -14,3 +16,16 @@ export function getIconProps(size: IconSize = 'md') {
     }
   }
 }
+
+export function distributeEntityProps<Props extends EntityBaseProps>(props: Props) {
+  const { className, onClick, icon, ...restProps } = props;
+
+  return {
+    container: { className },
+    icon: { ...restProps, ...icon },
+    link: { ...restProps, onClick },
+    content: restProps,
+    symbol: restProps,
+    copy: restProps,
+  };
+}
diff --git a/ui/shared/entities/blob/BlobEntity.tsx b/ui/shared/entities/blob/BlobEntity.tsx
index 13953eb86f..7ca61da9e9 100644
--- a/ui/shared/entities/blob/BlobEntity.tsx
+++ b/ui/shared/entities/blob/BlobEntity.tsx
@@ -1,11 +1,13 @@
+import type { As } from '@chakra-ui/react';
 import { chakra } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
 import * as EntityBase from 'ui/shared/entities/base/components';
 
+import { distributeEntityProps } from '../base/utils';
+
 type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'hash'>;
 
 const Link = chakra((props: LinkProps) => {
@@ -21,11 +23,7 @@ const Link = chakra((props: LinkProps) => {
   );
 });
 
-type IconProps = Omit<EntityBase.IconBaseProps, 'name'> & {
-  name?: EntityBase.IconBaseProps['name'];
-};
-
-const Icon = (props: IconProps) => {
+const Icon = (props: EntityBase.IconBaseProps) => {
   return (
     <EntityBase.Icon
       { ...props }
@@ -65,21 +63,20 @@ export interface EntityProps extends EntityBase.EntityBaseProps {
 }
 
 const BlobEntity = (props: EntityProps) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
+  const partsProps = distributeEntityProps(props);
 
   return (
-    <Container className={ props.className }>
-      <Icon { ...partsProps }/>
-      <Link { ...linkProps }>
-        <Content { ...partsProps }/>
+    <Container { ...partsProps.container }>
+      <Icon { ...partsProps.icon }/>
+      <Link { ...partsProps.link }>
+        <Content { ...partsProps.content }/>
       </Link>
-      <Copy { ...partsProps }/>
+      <Copy { ...partsProps.copy }/>
     </Container>
   );
 };
 
-export default React.memo(chakra(BlobEntity));
+export default React.memo(chakra<As, EntityProps>(BlobEntity));
 
 export {
   Container,
diff --git a/ui/shared/entities/blob/BlobEntityL1.tsx b/ui/shared/entities/blob/BlobEntityL1.tsx
new file mode 100644
index 0000000000..3282feeb4d
--- /dev/null
+++ b/ui/shared/entities/blob/BlobEntityL1.tsx
@@ -0,0 +1,27 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+
+import * as BlobEntity from './BlobEntity';
+
+const rollupFeature = config.features.rollup;
+
+const BlobEntityL1 = (props: BlobEntity.EntityProps) => {
+  if (!rollupFeature.isEnabled) {
+    return null;
+  }
+
+  const defaultHref = rollupFeature.L1BaseUrl + route({
+    pathname: '/blobs/[hash]',
+    query: { hash: props.hash },
+  });
+
+  return (
+    <BlobEntity.default { ...props } href={ props.href ?? defaultHref } isExternal/>
+  );
+};
+
+export default chakra(BlobEntityL1);
diff --git a/ui/shared/entities/block/BatchEntityL2.tsx b/ui/shared/entities/block/BatchEntityL2.tsx
index a0572b3b7d..dd4032b731 100644
--- a/ui/shared/entities/block/BatchEntityL2.tsx
+++ b/ui/shared/entities/block/BatchEntityL2.tsx
@@ -1,5 +1,4 @@
 import { chakra } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
@@ -11,23 +10,18 @@ import * as BlockEntity from './BlockEntity';
 const rollupFeature = config.features.rollup;
 
 const BatchEntityL2 = (props: BlockEntity.EntityProps) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
-
   if (!rollupFeature.isEnabled) {
     return null;
   }
 
+  const defaultHref = route({ pathname: '/batches/[number]', query: { number: props.number.toString() } });
+
   return (
-    <BlockEntity.Container className={ props.className }>
-      <BlockEntity.Icon { ...partsProps } name="txn_batches_slim"/>
-      <BlockEntity.Link
-        { ...linkProps }
-        href={ route({ pathname: '/batches/[number]', query: { number: props.number.toString() } }) }
-      >
-        <BlockEntity.Content { ...partsProps }/>
-      </BlockEntity.Link>
-    </BlockEntity.Container>
+    <BlockEntity.default
+      { ...props }
+      href={ props.href ?? defaultHref }
+      icon={{ name: 'txn_batches_slim' }}
+    />
   );
 };
 
diff --git a/ui/shared/entities/block/BlockEntity.pw.tsx b/ui/shared/entities/block/BlockEntity.pw.tsx
index 0098f03b05..138f42f87d 100644
--- a/ui/shared/entities/block/BlockEntity.pw.tsx
+++ b/ui/shared/entities/block/BlockEntity.pw.tsx
@@ -1,24 +1,21 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import BlockEntity from './BlockEntity';
 
-const iconSizes = [ 'md', 'lg' ];
+const iconSizes = [ 'md', 'lg' ] as const;
 
 test.use({ viewport: { width: 180, height: 30 } });
 
 test.describe('icon sizes', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <BlockEntity
-            number={ 17943507 }
-            iconSize={ size }
-          />
-        </TestApp>,
+    test(size, async({ render }) => {
+      const component = await render(
+        <BlockEntity
+          number={ 17943507 }
+          icon={{ size }}
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -26,27 +23,23 @@ test.describe('icon sizes', () => {
   });
 });
 
-test('loading', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <BlockEntity
-        number={ 17943507 }
-        isLoading
-      />
-    </TestApp>,
+test('loading', async({ render }) => {
+  const component = await render(
+    <BlockEntity
+      number={ 17943507 }
+      isLoading
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('external link +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <BlockEntity
-        number={ 17943507 }
-        isExternal
-      />
-    </TestApp>,
+test('external link +@dark-mode', async({ render }) => {
+  const component = await render(
+    <BlockEntity
+      number={ 17943507 }
+      isExternal
+    />,
   );
 
   await component.getByText('17943507').hover();
@@ -54,28 +47,24 @@ test('external link +@dark-mode', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('long number', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <BlockEntity
-        number={ 1794350723452223 }
-      />
-    </TestApp>,
+test('long number', async({ render }) => {
+  const component = await render(
+    <BlockEntity
+      number={ 1794350723452223 }
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('customization', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <BlockEntity
-        number={ 17943507 }
-        p={ 3 }
-        borderWidth="1px"
-        borderColor="blue.700"
-      />
-    </TestApp>,
+test('customization', async({ render }) => {
+  const component = await render(
+    <BlockEntity
+      number={ 17943507 }
+      p={ 3 }
+      borderWidth="1px"
+      borderColor="blue.700"
+    />,
   );
 
   await expect(component).toHaveScreenshot();
diff --git a/ui/shared/entities/block/BlockEntity.tsx b/ui/shared/entities/block/BlockEntity.tsx
index 35ca18b72f..6ef37b8290 100644
--- a/ui/shared/entities/block/BlockEntity.tsx
+++ b/ui/shared/entities/block/BlockEntity.tsx
@@ -1,12 +1,14 @@
+import type { As } from '@chakra-ui/react';
 import { chakra } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
 import * as EntityBase from 'ui/shared/entities/base/components';
 
-type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'hash' | 'number'>;
+import { distributeEntityProps } from '../base/utils';
+
+type LinkProps = EntityBase.LinkBaseProps & Partial<Pick<EntityProps, 'hash' | 'number'>>;
 
 const Link = chakra((props: LinkProps) => {
   const heightOrHash = props.hash ?? String(props.number);
@@ -22,11 +24,7 @@ const Link = chakra((props: LinkProps) => {
   );
 });
 
-type IconProps = Omit<EntityBase.IconBaseProps, 'name'> & {
-  name?: EntityBase.IconBaseProps['name'];
-};
-
-const Icon = (props: IconProps) => {
+const Icon = (props: EntityBase.IconBaseProps) => {
   return (
     <EntityBase.Icon
       { ...props }
@@ -50,25 +48,24 @@ const Content = chakra((props: ContentProps) => {
 const Container = EntityBase.Container;
 
 export interface EntityProps extends EntityBase.EntityBaseProps {
-  number: number;
+  number: number | string;
   hash?: string;
 }
 
 const BlockEntity = (props: EntityProps) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
+  const partsProps = distributeEntityProps(props);
 
   return (
-    <Container className={ props.className }>
-      <Icon { ...partsProps }/>
-      <Link { ...linkProps }>
-        <Content { ...partsProps }/>
+    <Container { ...partsProps.container }>
+      <Icon { ...partsProps.icon }/>
+      <Link { ...partsProps.link }>
+        <Content { ...partsProps.content }/>
       </Link>
     </Container>
   );
 };
 
-export default React.memo(chakra(BlockEntity));
+export default React.memo(chakra<As, EntityProps>(BlockEntity));
 
 export {
   Container,
diff --git a/ui/shared/entities/block/BlockEntityL1.tsx b/ui/shared/entities/block/BlockEntityL1.tsx
index a364685b29..93f4b6a301 100644
--- a/ui/shared/entities/block/BlockEntityL1.tsx
+++ b/ui/shared/entities/block/BlockEntityL1.tsx
@@ -1,5 +1,4 @@
 import { chakra } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
@@ -11,25 +10,16 @@ import * as BlockEntity from './BlockEntity';
 const rollupFeature = config.features.rollup;
 
 const BlockEntityL1 = (props: BlockEntity.EntityProps) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
-
   if (!rollupFeature.isEnabled) {
     return null;
   }
 
-  return (
-    <BlockEntity.Container className={ props.className }>
-      <BlockEntity.Icon { ...partsProps }/>
-      <BlockEntity.Link
-        { ...linkProps }
-        isExternal
-        href={ rollupFeature.L1BaseUrl + route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: props.hash ?? String(props.number) } }) }
-      >
-        <BlockEntity.Content { ...partsProps }/>
-      </BlockEntity.Link>
-    </BlockEntity.Container>
-  );
+  const defaultHref = rollupFeature.L1BaseUrl + route({
+    pathname: '/block/[height_or_hash]',
+    query: { height_or_hash: props.hash ?? String(props.number) },
+  });
+
+  return <BlockEntity.default { ...props } href={ props.href ?? defaultHref } isExternal/>;
 };
 
 export default chakra(BlockEntityL1);
diff --git a/ui/shared/entities/block/BlockEntityL2.tsx b/ui/shared/entities/block/BlockEntityL2.tsx
index 1a0c3e06a8..c078495d0e 100644
--- a/ui/shared/entities/block/BlockEntityL2.tsx
+++ b/ui/shared/entities/block/BlockEntityL2.tsx
@@ -1,5 +1,4 @@
 import { chakra } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
 import React from 'react';
 
 import config from 'configs/app';
@@ -9,21 +8,11 @@ import * as BlockEntity from './BlockEntity';
 const rollupFeature = config.features.rollup;
 
 const BlockEntityL2 = (props: BlockEntity.EntityProps) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
-
   if (!rollupFeature.isEnabled) {
     return null;
   }
 
-  return (
-    <BlockEntity.Container className={ props.className }>
-      <BlockEntity.Icon { ...partsProps } name="txn_batches_slim"/>
-      <BlockEntity.Link { ...linkProps }>
-        <BlockEntity.Content { ...partsProps }/>
-      </BlockEntity.Link>
-    </BlockEntity.Container>
-  );
+  return <BlockEntity.default { ...props } icon={{ name: 'txn_batches_slim' }}/>;
 };
 
 export default chakra(BlockEntityL2);
diff --git a/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_dark-color-mode_external-link-dark-mode-1.png b/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_dark-color-mode_external-link-dark-mode-1.png
index af7a2cbe1a..e3c51c495e 100644
Binary files a/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_dark-color-mode_external-link-dark-mode-1.png and b/ui/shared/entities/block/__screenshots__/BlockEntity.pw.tsx_dark-color-mode_external-link-dark-mode-1.png differ
diff --git a/ui/shared/entities/ens/EnsEntity.pw.tsx b/ui/shared/entities/ens/EnsEntity.pw.tsx
index fc6d5c01c7..42c445fe22 100644
--- a/ui/shared/entities/ens/EnsEntity.pw.tsx
+++ b/ui/shared/entities/ens/EnsEntity.pw.tsx
@@ -1,25 +1,23 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import * as domainMock from 'mocks/ens/domain';
+import { test, expect } from 'playwright/lib';
 
 import EnsEntity from './EnsEntity';
 
 const name = 'cat.eth';
-const iconSizes = [ 'md', 'lg' ];
+const iconSizes = [ 'md', 'lg' ] as const;
 
 test.use({ viewport: { width: 180, height: 30 } });
 
 test.describe('icon size', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <EnsEntity
-            name={ name }
-            iconSize={ size }
-          />
-        </TestApp>,
+    test(size, async({ render }) => {
+      const component = await render(
+        <EnsEntity
+          domain={ name }
+          icon={{ size }}
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -27,26 +25,22 @@ test.describe('icon size', () => {
   });
 });
 
-test('loading', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <EnsEntity
-        name={ name }
-        isLoading
-      />
-    </TestApp>,
+test('loading', async({ render }) => {
+  const component = await render(
+    <EnsEntity
+      domain={ name }
+      isLoading
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('with long name', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <EnsEntity
-        name="kitty.kitty.kitty.cat.eth"
-      />
-    </TestApp>,
+test('with long name', async({ render }) => {
+  const component = await render(
+    <EnsEntity
+      domain="kitty.kitty.kitty.cat.eth"
+    />,
   );
 
   await component.getByText(name.slice(0, 4)).hover();
@@ -54,17 +48,34 @@ test('with long name', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('customization', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <EnsEntity
-        name={ name }
-        p={ 3 }
-        borderWidth="1px"
-        borderColor="blue.700"
-      />
-    </TestApp>,
+test('customization', async({ render }) => {
+  const component = await render(
+    <EnsEntity
+      domain={ name }
+      p={ 3 }
+      borderWidth="1px"
+      borderColor="blue.700"
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
+
+test.describe('', () => {
+  test.use({ viewport: { width: 300, height: 400 } });
+  test('with protocol info', async({ render, page, mockAssetResponse }) => {
+    await mockAssetResponse(domainMock.ensDomainA.protocol?.icon_url as string, './playwright/mocks/image_s.jpg');
+
+    const component = await render(
+      <EnsEntity
+        domain={ name }
+        protocol={ domainMock.protocolA }
+      />,
+    );
+
+    await component.getByAltText(`${ domainMock.protocolA.title } protocol icon`).first().hover();
+
+    await expect(page.getByText(domainMock.protocolA.description)).toBeVisible();
+    await expect(page).toHaveScreenshot();
+  });
+});
diff --git a/ui/shared/entities/ens/EnsEntity.tsx b/ui/shared/entities/ens/EnsEntity.tsx
index c0623426c1..8371f295d5 100644
--- a/ui/shared/entities/ens/EnsEntity.tsx
+++ b/ui/shared/entities/ens/EnsEntity.tsx
@@ -1,16 +1,23 @@
-import { chakra } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
+import type { As } from '@chakra-ui/react';
+import { Box, chakra, Flex, Image, PopoverBody, PopoverContent, PopoverTrigger, Portal, Skeleton, Text } from '@chakra-ui/react';
 import React from 'react';
 
+import type * as bens from '@blockscout/bens-types';
+
 import { route } from 'nextjs-routes';
 
+import Popover from 'ui/shared/chakra/Popover';
 import * as EntityBase from 'ui/shared/entities/base/components';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkExternal from 'ui/shared/links/LinkExternal';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
-type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'name'>;
+import { distributeEntityProps, getIconProps } from '../base/utils';
+
+type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'domain'>;
 
 const Link = chakra((props: LinkProps) => {
-  const defaultHref = route({ pathname: '/name-domains/[name]', query: { name: props.name } });
+  const defaultHref = route({ pathname: '/name-domains/[name]', query: { name: props.domain } });
 
   return (
     <EntityBase.Link
@@ -22,37 +29,91 @@ const Link = chakra((props: LinkProps) => {
   );
 });
 
-type IconProps = Omit<EntityBase.IconBaseProps, 'name'> & {
-  iconName?: EntityBase.IconBaseProps['name'];
-};
+type IconProps = Pick<EntityProps, 'protocol'> & EntityBase.IconBaseProps;
 
 const Icon = (props: IconProps) => {
-  return (
-    <EntityBase.Icon
-      { ...props }
-      name={ props.iconName ?? 'ENS_slim' }
-    />
-  );
+  const icon = <EntityBase.Icon { ...props } name={ props.name ?? 'ENS_slim' }/>;
+
+  if (props.protocol) {
+    const styles = getIconProps(props.size);
+
+    if (props.isLoading) {
+      return <Skeleton boxSize={ styles.boxSize } borderRadius="sm" mr={ 2 }/>;
+    }
+
+    return (
+      <Popover trigger="hover" isLazy placement="bottom-start">
+        <PopoverTrigger>
+          <Box flexShrink={ 0 }>
+            <Image
+              src={ props.protocol.icon_url }
+              boxSize={ styles.boxSize }
+              borderRadius="sm"
+              mr={ 2 }
+              alt={ `${ props.protocol.title } protocol icon` }
+              fallback={ icon }
+              fallbackStrategy={ props.protocol.icon_url ? 'onError' : 'beforeLoadOrError' }
+            />
+          </Box>
+        </PopoverTrigger>
+        <Portal>
+          <PopoverContent maxW={{ base: '100vw', lg: '440px' }} minW="250px" w="fit-content">
+            <PopoverBody display="flex" flexDir="column" rowGap={ 3 }>
+              <Flex alignItems="center">
+                <Image
+                  src={ props.protocol.icon_url }
+                  boxSize={ 5 }
+                  borderRadius="sm"
+                  mr={ 2 }
+                  alt={ `${ props.protocol.title } protocol icon` }
+                  fallback={ icon }
+                  fallbackStrategy={ props.protocol.icon_url ? 'onError' : 'beforeLoadOrError' }
+                />
+                <div>
+                  <span>{ props.protocol.short_name }</span>
+                  <chakra.span color="text_secondary" whiteSpace="pre"> { props.protocol.tld_list.map((tld) => `.${ tld }`).join((' ')) }</chakra.span>
+                </div>
+              </Flex>
+              <Text fontSize="sm">{ props.protocol.description }</Text>
+              { props.protocol.docs_url && (
+                <LinkExternal
+                  href={ props.protocol.docs_url }
+                  display="inline-flex"
+                  alignItems="center"
+                  fontSize="sm"
+                >
+                  <IconSvg name="docs" boxSize={ 5 } color="text_secondary" mr={ 2 }/>
+                  <span>Documentation</span>
+                </LinkExternal>
+              ) }
+            </PopoverBody>
+          </PopoverContent>
+        </Portal>
+      </Popover>
+    );
+  }
+
+  return icon;
 };
 
-type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'name'>;
+type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'domain'>;
 
 const Content = chakra((props: ContentProps) => {
   return (
     <TruncatedValue
       isLoading={ props.isLoading }
-      value={ props.name }
+      value={ props.domain }
     />
   );
 });
 
-type CopyProps = Omit<EntityBase.CopyBaseProps, 'text'> & Pick<EntityProps, 'name'>;
+type CopyProps = Omit<EntityBase.CopyBaseProps, 'text'> & Pick<EntityProps, 'domain'>;
 
 const Copy = (props: CopyProps) => {
   return (
     <EntityBase.Copy
       { ...props }
-      text={ props.name }
+      text={ props.domain }
     />
   );
 };
@@ -60,25 +121,25 @@ const Copy = (props: CopyProps) => {
 const Container = EntityBase.Container;
 
 export interface EntityProps extends EntityBase.EntityBaseProps {
-  name: string;
+  domain: string;
+  protocol?: bens.ProtocolInfo | null;
 }
 
 const EnsEntity = (props: EntityProps) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
+  const partsProps = distributeEntityProps(props);
 
   return (
-    <Container className={ props.className }>
-      <Icon { ...partsProps }/>
-      <Link { ...linkProps }>
-        <Content { ...partsProps }/>
+    <Container { ...partsProps.container }>
+      <Icon { ...partsProps.icon }/>
+      <Link { ...partsProps.link }>
+        <Content { ...partsProps.content }/>
       </Link>
-      <Copy { ...partsProps }/>
+      <Copy { ...partsProps.copy }/>
     </Container>
   );
 };
 
-export default React.memo(chakra(EnsEntity));
+export default React.memo(chakra<As, EntityProps>(EnsEntity));
 
 export {
   Container,
diff --git a/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_with-protocol-info-1.png b/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_with-protocol-info-1.png
new file mode 100644
index 0000000000..6cd4eaab03
Binary files /dev/null and b/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_with-protocol-info-1.png differ
diff --git a/ui/shared/entities/nft/NftEntity.pw.tsx b/ui/shared/entities/nft/NftEntity.pw.tsx
index c426b8b8fa..9e055129d1 100644
--- a/ui/shared/entities/nft/NftEntity.pw.tsx
+++ b/ui/shared/entities/nft/NftEntity.pw.tsx
@@ -1,26 +1,23 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import NftEntity from './NftEntity';
 
-const iconSizes = [ 'md', 'lg' ];
+const iconSizes = [ 'md', 'lg' ] as const;
 const hash = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859';
 
 test.use({ viewport: { width: 180, height: 30 } });
 
 test.describe('icon sizes', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <NftEntity
-            hash={ hash }
-            id={ 1042 }
-            iconSize={ size }
-          />
-        </TestApp>,
+    test(size, async({ render }) => {
+      const component = await render(
+        <NftEntity
+          hash={ hash }
+          id="1042"
+          icon={{ size }}
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -28,44 +25,38 @@ test.describe('icon sizes', () => {
   });
 });
 
-test('loading', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <NftEntity
-        hash={ hash }
-        id={ 1042 }
-        isLoading
-      />
-    </TestApp>,
+test('loading', async({ render }) => {
+  const component = await render(
+    <NftEntity
+      hash={ hash }
+      id="1042"
+      isLoading
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('long id', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <NftEntity
-        hash={ hash }
-        id={ 1794350723452223 }
-      />
-    </TestApp>,
+test('long id', async({ render }) => {
+  const component = await render(
+    <NftEntity
+      hash={ hash }
+      id="1794350723452223"
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('customization', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <NftEntity
-        hash={ hash }
-        id={ 1042 }
-        p={ 3 }
-        borderWidth="1px"
-        borderColor="blue.700"
-      />
-    </TestApp>,
+test('customization', async({ render }) => {
+  const component = await render(
+    <NftEntity
+      hash={ hash }
+      id="1042"
+      p={ 3 }
+      borderWidth="1px"
+      borderColor="blue.700"
+    />,
   );
 
   await expect(component).toHaveScreenshot();
diff --git a/ui/shared/entities/nft/NftEntity.tsx b/ui/shared/entities/nft/NftEntity.tsx
index a2605e7b94..420353bfa2 100644
--- a/ui/shared/entities/nft/NftEntity.tsx
+++ b/ui/shared/entities/nft/NftEntity.tsx
@@ -1,5 +1,5 @@
+import type { As } from '@chakra-ui/react';
 import { chakra } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
@@ -7,13 +7,11 @@ import { route } from 'nextjs-routes';
 import * as EntityBase from 'ui/shared/entities/base/components';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
-const Container = EntityBase.Container;
+import { distributeEntityProps } from '../base/utils';
 
-type IconProps = Pick<EntityProps, 'isLoading' | 'noIcon' | 'iconSize'> & {
-  name?: EntityBase.IconBaseProps['name'];
-};
+const Container = EntityBase.Container;
 
-const Icon = (props: IconProps) => {
+const Icon = (props: EntityBase.IconBaseProps) => {
   if (props.noIcon) {
     return null;
   }
@@ -21,7 +19,7 @@ const Icon = (props: IconProps) => {
   return (
     <EntityBase.Icon
       { ...props }
-      iconSize={ props.iconSize ?? 'lg' }
+      size={ props.size ?? 'lg' }
       name={ props.name ?? 'nft_shield' }
     />
   );
@@ -59,20 +57,19 @@ export interface EntityProps extends EntityBase.EntityBaseProps {
 }
 
 const NftEntity = (props: EntityProps) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
+  const partsProps = distributeEntityProps(props);
 
   return (
-    <Container className={ props.className } w="100%">
-      <Icon { ...partsProps }/>
-      <Link { ...linkProps }>
-        <Content { ...partsProps }/>
+    <Container w="100%" { ...partsProps.container }>
+      <Icon { ...partsProps.icon }/>
+      <Link { ...partsProps.link }>
+        <Content { ...partsProps.content }/>
       </Link>
     </Container>
   );
 };
 
-export default React.memo(chakra(NftEntity));
+export default React.memo(chakra<As, EntityProps>(NftEntity));
 
 export {
   Container,
diff --git a/ui/shared/entities/token/TokenEntity.pw.tsx b/ui/shared/entities/token/TokenEntity.pw.tsx
index 670148d9d2..680eb917a1 100644
--- a/ui/shared/entities/token/TokenEntity.pw.tsx
+++ b/ui/shared/entities/token/TokenEntity.pw.tsx
@@ -1,26 +1,23 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as tokenMock from 'mocks/tokens/tokenInfo';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import TokenEntity from './TokenEntity';
 
-const iconSizes = [ 'md', 'lg' ];
+const iconSizes = [ 'md', 'lg' ] as const;
 
 test.use({ viewport: { width: 300, height: 100 } });
 
 test.describe('icon size', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <TokenEntity
-            token={ tokenMock.tokenInfo }
-            iconSize={ size }
-          />
-        </TestApp>,
+    test(size, async({ render }) => {
+      const component = await render(
+        <TokenEntity
+          token={ tokenMock.tokenInfo }
+          icon={{ size }}
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -28,7 +25,7 @@ test.describe('icon size', () => {
   });
 });
 
-test('with logo, long name and symbol', async({ page, mount }) => {
+test('with logo, long name and symbol', async({ page, render }) => {
   const LOGO_URL = 'https://example.com/logo.png';
   await page.route(LOGO_URL, (route) => {
     return route.fulfill({
@@ -37,17 +34,16 @@ test('with logo, long name and symbol', async({ page, mount }) => {
     });
   });
 
-  await mount(
-    <TestApp>
-      <TokenEntity
-        token={{
-          name: 'This token is the best token ever',
-          symbol: 'DUCK DUCK DUCK',
-          address: tokenMock.tokenInfo.address,
-          icon_url: LOGO_URL,
-        }}
-      />
-    </TestApp>,
+  await render(
+    <TokenEntity
+      token={{
+        type: 'ERC-20',
+        name: 'This token is the best token ever',
+        symbol: 'DUCK DUCK DUCK',
+        address: tokenMock.tokenInfo.address,
+        icon_url: LOGO_URL,
+      }}
+    />,
   );
 
   await page.getByText(/this/i).hover();
@@ -57,35 +53,31 @@ test('with logo, long name and symbol', async({ page, mount }) => {
   await expect(page).toHaveScreenshot();
 });
 
-test('loading', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TokenEntity
-        token={ tokenMock.tokenInfo }
-        isLoading
-      />
-    </TestApp>,
+test('loading', async({ render }) => {
+  const component = await render(
+    <TokenEntity
+      token={ tokenMock.tokenInfo }
+      isLoading
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('customization', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box
+test('customization', async({ render }) => {
+  const component = await render(
+    <Box
+      borderWidth="1px"
+      borderColor="orange.500"
+    >
+      <TokenEntity
+        token={ tokenMock.tokenInfo }
+        p={ 2 }
+        maxW="200px"
         borderWidth="1px"
-        borderColor="orange.500"
-      >
-        <TokenEntity
-          token={ tokenMock.tokenInfo }
-          p={ 2 }
-          maxW="200px"
-          borderWidth="1px"
-          borderColor="blue.700"
-        />
-      </Box>
-    </TestApp>,
+        borderColor="blue.700"
+      />
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
diff --git a/ui/shared/entities/token/TokenEntity.tsx b/ui/shared/entities/token/TokenEntity.tsx
index d7cd9f7500..491f43569e 100644
--- a/ui/shared/entities/token/TokenEntity.tsx
+++ b/ui/shared/entities/token/TokenEntity.tsx
@@ -1,6 +1,5 @@
-import type { ChakraProps } from '@chakra-ui/react';
+import type { As } from '@chakra-ui/react';
 import { Image, Skeleton, chakra } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
 import React from 'react';
 
 import type { TokenInfo } from 'types/api/token';
@@ -11,7 +10,7 @@ import * as EntityBase from 'ui/shared/entities/base/components';
 import TokenLogoPlaceholder from 'ui/shared/TokenLogoPlaceholder';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
-import { getIconProps } from '../base/utils';
+import { distributeEntityProps, getIconProps } from '../base/utils';
 
 type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'token'>;
 
@@ -28,10 +27,7 @@ const Link = chakra((props: LinkProps) => {
   );
 });
 
-type IconProps = Pick<EntityProps, 'token' | 'isLoading' | 'iconSize' | 'noIcon' | 'className'> & {
-  marginRight?: ChakraProps['marginRight'];
-  boxSize?: ChakraProps['boxSize'];
-};
+type IconProps = Pick<EntityProps, 'token' | 'className'> & EntityBase.IconBaseProps;
 
 const Icon = (props: IconProps) => {
   if (props.noIcon) {
@@ -40,7 +36,7 @@ const Icon = (props: IconProps) => {
 
   const styles = {
     marginRight: props.marginRight ?? 2,
-    boxSize: props.boxSize ?? getIconProps(props.iconSize).boxSize,
+    boxSize: props.boxSize ?? getIconProps(props.size).boxSize,
     borderRadius: 'base',
     flexShrink: 0,
   };
@@ -143,22 +139,21 @@ export interface EntityProps extends EntityBase.EntityBaseProps {
 }
 
 const TokenEntity = (props: EntityProps) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
+  const partsProps = distributeEntityProps(props);
 
   return (
-    <Container className={ props.className } w="100%">
-      <Icon { ...partsProps }/>
-      <Link { ...linkProps }>
-        <Content { ...partsProps }/>
+    <Container w="100%" { ...partsProps.container }>
+      <Icon { ...partsProps.icon }/>
+      <Link { ...partsProps.link }>
+        <Content { ...partsProps.content }/>
       </Link>
-      <Symbol { ...partsProps }/>
-      <Copy { ...partsProps }/>
+      <Symbol { ...partsProps.symbol }/>
+      <Copy { ...partsProps.copy }/>
     </Container>
   );
 };
 
-export default React.memo(chakra(TokenEntity));
+export default React.memo(chakra<As, EntityProps>(TokenEntity));
 
 export {
   Container,
diff --git a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-lg-1.png b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-lg-1.png
index 6fd082b290..19f534970c 100644
Binary files a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-lg-1.png and b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-lg-1.png differ
diff --git a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-md-1.png b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-md-1.png
index e6b102f066..85500c1d02 100644
Binary files a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-md-1.png and b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-md-1.png differ
diff --git a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-1.png b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-1.png
index 038508436e..a92738d281 100644
Binary files a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-1.png and b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-1.png differ
diff --git a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-2.png b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-2.png
index d311239584..2c9714ddc1 100644
Binary files a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-2.png and b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-2.png differ
diff --git a/ui/shared/entities/tx/TxEntity.pw.tsx b/ui/shared/entities/tx/TxEntity.pw.tsx
index bd971ca18a..2dc5a9a9b6 100644
--- a/ui/shared/entities/tx/TxEntity.pw.tsx
+++ b/ui/shared/entities/tx/TxEntity.pw.tsx
@@ -1,25 +1,22 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import TxEntity from './TxEntity';
 
 const hash = '0x376db52955d5bce114d0ccea2dcf22289b4eae1b86bcae5a59bb5fdbfef48899';
-const iconSizes = [ 'md', 'lg' ];
+const iconSizes = [ 'md', 'lg' ] as const;
 
 test.use({ viewport: { width: 180, height: 30 } });
 
 test.describe('icon size', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <TxEntity
-            hash={ hash }
-            iconSize={ size }
-          />
-        </TestApp>,
+    test(size, async({ render }) => {
+      const component = await render(
+        <TxEntity
+          hash={ hash }
+          icon={{ size }}
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -27,40 +24,34 @@ test.describe('icon size', () => {
   });
 });
 
-test('loading', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TxEntity
-        hash={ hash }
-        isLoading
-      />
-    </TestApp>,
+test('loading', async({ render }) => {
+  const component = await render(
+    <TxEntity
+      hash={ hash }
+      isLoading
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('external link', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TxEntity
-        hash={ hash }
-        isExternal
-      />
-    </TestApp>,
+test('external link', async({ render }) => {
+  const component = await render(
+    <TxEntity
+      hash={ hash }
+      isExternal
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('with copy +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TxEntity
-        hash={ hash }
-        noCopy={ false }
-      />
-    </TestApp>,
+test('with copy +@dark-mode', async({ render }) => {
+  const component = await render(
+    <TxEntity
+      hash={ hash }
+      noCopy={ false }
+    />,
   );
 
   await component.getByText(hash.slice(0, 4)).hover();
@@ -68,17 +59,15 @@ test('with copy +@dark-mode', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('customization', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TxEntity
-        hash={ hash }
-        truncation="constant"
-        p={ 3 }
-        borderWidth="1px"
-        borderColor="blue.700"
-      />
-    </TestApp>,
+test('customization', async({ render }) => {
+  const component = await render(
+    <TxEntity
+      hash={ hash }
+      truncation="constant"
+      p={ 3 }
+      borderWidth="1px"
+      borderColor="blue.700"
+    />,
   );
 
   await expect(component).toHaveScreenshot();
diff --git a/ui/shared/entities/tx/TxEntity.tsx b/ui/shared/entities/tx/TxEntity.tsx
index 796d305ded..8cb00de261 100644
--- a/ui/shared/entities/tx/TxEntity.tsx
+++ b/ui/shared/entities/tx/TxEntity.tsx
@@ -1,11 +1,13 @@
+import type { As } from '@chakra-ui/react';
 import { chakra } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
 import * as EntityBase from 'ui/shared/entities/base/components';
 
+import { distributeEntityProps } from '../base/utils';
+
 type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'hash'>;
 
 const Link = chakra((props: LinkProps) => {
@@ -21,11 +23,7 @@ const Link = chakra((props: LinkProps) => {
   );
 });
 
-type IconProps = Omit<EntityBase.IconBaseProps, 'name'> & {
-  name?: EntityBase.IconBaseProps['name'];
-};
-
-const Icon = (props: IconProps) => {
+const Icon = (props: EntityBase.IconBaseProps) => {
   return (
     <EntityBase.Icon
       { ...props }
@@ -66,21 +64,20 @@ export interface EntityProps extends EntityBase.EntityBaseProps {
 }
 
 const TxEntity = (props: EntityProps) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
+  const partsProps = distributeEntityProps(props);
 
   return (
-    <Container className={ props.className }>
-      <Icon { ...partsProps }/>
-      <Link { ...linkProps }>
-        <Content { ...partsProps }/>
+    <Container { ...partsProps.container }>
+      <Icon { ...partsProps.icon }/>
+      <Link { ...partsProps.link }>
+        <Content { ...partsProps.content }/>
       </Link>
-      <Copy { ...partsProps }/>
+      <Copy { ...partsProps.copy }/>
     </Container>
   );
 };
 
-export default React.memo(chakra(TxEntity));
+export default React.memo(chakra<As, EntityProps>(TxEntity));
 
 export {
   Container,
diff --git a/ui/shared/entities/tx/TxEntityL1.tsx b/ui/shared/entities/tx/TxEntityL1.tsx
index 635116dd0a..cf8baf4dfb 100644
--- a/ui/shared/entities/tx/TxEntityL1.tsx
+++ b/ui/shared/entities/tx/TxEntityL1.tsx
@@ -1,5 +1,4 @@
 import { chakra } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
@@ -11,26 +10,16 @@ import * as TxEntity from './TxEntity';
 const rollupFeature = config.features.rollup;
 
 const TxEntityL1 = (props: TxEntity.EntityProps) => {
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
-  const linkProps = _omit(props, [ 'className' ]);
-
   if (!rollupFeature.isEnabled) {
     return null;
   }
 
-  return (
-    <TxEntity.Container className={ props.className }>
-      <TxEntity.Icon { ...partsProps }/>
-      <TxEntity.Link
-        { ...linkProps }
-        isExternal
-        href={ rollupFeature.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: props.hash } }) }
-      >
-        <TxEntity.Content { ...partsProps }/>
-      </TxEntity.Link>
-      <TxEntity.Copy { ...partsProps }/>
-    </TxEntity.Container>
-  );
+  const defaultHref = rollupFeature.L1BaseUrl + route({
+    pathname: '/tx/[hash]',
+    query: { hash: props.hash },
+  });
+
+  return <TxEntity.default { ...props } href={ props.href ?? defaultHref } isExternal/>;
 };
 
 export default chakra(TxEntityL1);
diff --git a/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_external-link-1.png b/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_external-link-1.png
index be6e12356d..372809e264 100644
Binary files a/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_external-link-1.png and b/ui/shared/entities/tx/__screenshots__/TxEntity.pw.tsx_default_external-link-1.png differ
diff --git a/ui/shared/entities/userOp/UserOpEntity.pw.tsx b/ui/shared/entities/userOp/UserOpEntity.pw.tsx
index c4a8faa3f0..d08ce6a3ba 100644
--- a/ui/shared/entities/userOp/UserOpEntity.pw.tsx
+++ b/ui/shared/entities/userOp/UserOpEntity.pw.tsx
@@ -1,25 +1,22 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import UserOpEntity from './UserOpEntity';
 
 const hash = '0x376db52955d5bce114d0ccea2dcf22289b4eae1b86bcae5a59bb5fdbfef48899';
-const iconSizes = [ 'md', 'lg' ];
+const iconSizes = [ 'md', 'lg' ] as const;
 
 test.use({ viewport: { width: 180, height: 30 } });
 
 test.describe('icon size', () => {
   iconSizes.forEach((size) => {
-    test(size, async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <UserOpEntity
-            hash={ hash }
-            iconSize={ size }
-          />
-        </TestApp>,
+    test(size, async({ render }) => {
+      const component = await render(
+        <UserOpEntity
+          hash={ hash }
+          icon={{ size }}
+        />,
       );
 
       await expect(component).toHaveScreenshot();
@@ -27,27 +24,23 @@ test.describe('icon size', () => {
   });
 });
 
-test('loading', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <UserOpEntity
-        hash={ hash }
-        isLoading
-      />
-    </TestApp>,
+test('loading', async({ render }) => {
+  const component = await render(
+    <UserOpEntity
+      hash={ hash }
+      isLoading
+    />,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('with copy +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <UserOpEntity
-        hash={ hash }
-        noCopy={ false }
-      />
-    </TestApp>,
+test('with copy +@dark-mode', async({ render }) => {
+  const component = await render(
+    <UserOpEntity
+      hash={ hash }
+      noCopy={ false }
+    />,
   );
 
   await component.getByText(hash.slice(0, 4)).hover();
@@ -55,17 +48,15 @@ test('with copy +@dark-mode', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('customization', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <UserOpEntity
-        hash={ hash }
-        truncation="constant"
-        p={ 3 }
-        borderWidth="1px"
-        borderColor="blue.700"
-      />
-    </TestApp>,
+test('customization', async({ render }) => {
+  const component = await render(
+    <UserOpEntity
+      hash={ hash }
+      truncation="constant"
+      p={ 3 }
+      borderWidth="1px"
+      borderColor="blue.700"
+    />,
   );
 
   await expect(component).toHaveScreenshot();
diff --git a/ui/shared/entities/userOp/UserOpEntity.tsx b/ui/shared/entities/userOp/UserOpEntity.tsx
index c4a9022d31..718ce7988e 100644
--- a/ui/shared/entities/userOp/UserOpEntity.tsx
+++ b/ui/shared/entities/userOp/UserOpEntity.tsx
@@ -1,11 +1,13 @@
+import type { As } from '@chakra-ui/react';
 import { chakra } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
 import * as EntityBase from 'ui/shared/entities/base/components';
 
+import { distributeEntityProps } from '../base/utils';
+
 type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'hash'>;
 
 const Link = chakra((props: LinkProps) => {
@@ -21,11 +23,7 @@ const Link = chakra((props: LinkProps) => {
   );
 });
 
-type IconProps = Omit<EntityBase.IconBaseProps, 'name'> & {
-  name?: EntityBase.IconBaseProps['name'];
-};
-
-const Icon = (props: IconProps) => {
+const Icon = (props: EntityBase.IconBaseProps) => {
   return (
     <EntityBase.Icon
       { ...props }
@@ -65,21 +63,20 @@ export interface EntityProps extends EntityBase.EntityBaseProps {
 }
 
 const UserOpEntity = (props: EntityProps) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
+  const partsProps = distributeEntityProps(props);
 
   return (
-    <Container className={ props.className }>
-      <Icon { ...partsProps }/>
-      <Link { ...linkProps }>
-        <Content { ...partsProps }/>
+    <Container { ...partsProps.container }>
+      <Icon { ...partsProps.icon }/>
+      <Link { ...partsProps.link }>
+        <Content { ...partsProps.content }/>
       </Link>
-      <Copy { ...partsProps }/>
+      <Copy { ...partsProps.copy }/>
     </Container>
   );
 };
 
-export default React.memo(chakra(UserOpEntity));
+export default React.memo(chakra<As, EntityProps>(UserOpEntity));
 
 export {
   Container,
diff --git a/ui/shared/filters/FilterButton.tsx b/ui/shared/filters/FilterButton.tsx
index a61246587c..67bad9989d 100644
--- a/ui/shared/filters/FilterButton.tsx
+++ b/ui/shared/filters/FilterButton.tsx
@@ -22,19 +22,38 @@ const FilterButton = ({ isActive, isLoading, appliedFiltersNum, onClick, as }: P
     return <Skeleton w={{ base: 9, lg: '78px' }} h={ 8 } borderRadius="base" flexShrink={ 0 }/>;
   }
 
+  const num = (
+    <Circle
+      className="AppliedFiltersNum"
+      bg={ isActive ? 'link_hovered' : badgeBgColor }
+      size={ 5 }
+      color={ badgeColor }
+    >
+      { appliedFiltersNum }
+    </Circle>
+  );
+
   return (
     <Button
       ref={ ref }
-      rightIcon={ appliedFiltersNum ? <Circle bg={ badgeBgColor } size={ 5 } color={ badgeColor }>{ appliedFiltersNum }</Circle> : undefined }
+      rightIcon={ appliedFiltersNum ? num : undefined }
       size="sm"
       fontWeight="500"
       variant="outline"
-      colorScheme="gray-dark"
+      colorScheme="gray"
       onClick={ onClick }
       isActive={ isActive }
+      data-selected={ Boolean(appliedFiltersNum) }
       px={ 1.5 }
       flexShrink={ 0 }
       as={ as }
+      pointerEvents="all"
+      _hover={ isActive ? {
+        color: 'link_hovered',
+        '.AppliedFiltersNum': {
+          bg: 'link_hovered',
+        },
+      } : undefined }
     >
       { FilterIcon }
       <Box display={{ base: 'none', lg: 'block' }}>Filter</Box>
diff --git a/ui/shared/filters/FilterInput.tsx b/ui/shared/filters/FilterInput.tsx
index 5c16f65ce6..12871d5700 100644
--- a/ui/shared/filters/FilterInput.tsx
+++ b/ui/shared/filters/FilterInput.tsx
@@ -6,15 +6,17 @@ import ClearButton from 'ui/shared/ClearButton';
 import IconSvg from 'ui/shared/IconSvg';
 
 type Props = {
-  onChange: (searchTerm: string) => void;
+  onChange?: (searchTerm: string) => void;
   className?: string;
   size?: 'xs' | 'sm' | 'md' | 'lg';
   placeholder: string;
   initialValue?: string;
   isLoading?: boolean;
+  type?: React.HTMLInputTypeAttribute;
+  name?: string;
 }
 
-const FilterInput = ({ onChange, className, size = 'sm', placeholder, initialValue, isLoading }: Props) => {
+const FilterInput = ({ onChange, className, size = 'sm', placeholder, initialValue, isLoading, type, name }: Props) => {
   const [ filterQuery, setFilterQuery ] = useState(initialValue || '');
   const inputRef = React.useRef<HTMLInputElement>(null);
   const iconColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
@@ -23,12 +25,12 @@ const FilterInput = ({ onChange, className, size = 'sm', placeholder, initialVal
     const { value } = event.target;
 
     setFilterQuery(value);
-    onChange(value);
+    onChange?.(value);
   }, [ onChange ]);
 
   const handleFilterQueryClear = useCallback(() => {
     setFilterQuery('');
-    onChange('');
+    onChange?.('');
     inputRef?.current?.focus();
   }, [ onChange ]);
 
@@ -57,6 +59,8 @@ const FilterInput = ({ onChange, className, size = 'sm', placeholder, initialVal
           borderWidth="2px"
           textOverflow="ellipsis"
           whiteSpace="nowrap"
+          type={ type }
+          name={ name }
         />
 
         { filterQuery ? (
diff --git a/ui/shared/filters/PopoverFilter.tsx b/ui/shared/filters/PopoverFilter.tsx
index bc09a7ad72..f8fb20d9f0 100644
--- a/ui/shared/filters/PopoverFilter.tsx
+++ b/ui/shared/filters/PopoverFilter.tsx
@@ -1,6 +1,5 @@
 import type { PopoverContentProps } from '@chakra-ui/react';
 import {
-  Popover,
   PopoverTrigger,
   PopoverContent,
   PopoverBody,
@@ -8,24 +7,24 @@ import {
 } from '@chakra-ui/react';
 import React from 'react';
 
+import Popover from 'ui/shared/chakra/Popover';
 import FilterButton from 'ui/shared/filters/FilterButton';
 
 interface Props {
   appliedFiltersNum?: number;
-  isActive?: boolean;
   children: React.ReactNode;
   contentProps?: PopoverContentProps;
   isLoading?: boolean;
 }
 
-const PopoverFilter = ({ appliedFiltersNum, children, contentProps, isActive, isLoading }: Props) => {
+const PopoverFilter = ({ appliedFiltersNum, children, contentProps, isLoading }: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
 
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
       <PopoverTrigger>
         <FilterButton
-          isActive={ isOpen || isActive || Number(appliedFiltersNum) > 0 }
+          isActive={ isOpen }
           onClick={ onToggle }
           appliedFiltersNum={ appliedFiltersNum }
           isLoading={ isLoading }
diff --git a/ui/shared/filters/PopoverFilterRadio.tsx b/ui/shared/filters/PopoverFilterRadio.tsx
new file mode 100644
index 0000000000..e29734f9b3
--- /dev/null
+++ b/ui/shared/filters/PopoverFilterRadio.tsx
@@ -0,0 +1,102 @@
+import {
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  useDisclosure,
+  useRadio,
+  Box,
+  useRadioGroup,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import Popover from 'ui/shared/chakra/Popover';
+import FilterButton from 'ui/shared/filters/FilterButton';
+import IconSvg from 'ui/shared/IconSvg';
+
+// OPTION
+export interface TOption {
+  value: string;
+  label: string;
+}
+
+type OptionProps = ReturnType<ReturnType<typeof useRadioGroup>['getRadioProps']>;
+
+const Option = (props: OptionProps) => {
+  const { getInputProps, getRadioProps } = useRadio(props);
+
+  const input = getInputProps();
+  const checkbox = getRadioProps();
+  const bgColorHover = useColorModeValue('blue.50', 'whiteAlpha.100');
+
+  return (
+    <Box
+      as="label"
+      px={ 4 }
+      py={ 2 }
+      cursor="pointer"
+      display="flex"
+      columnGap={ 3 }
+      alignItems="center"
+      _hover={{
+        bgColor: bgColorHover,
+      }}
+    >
+      <input { ...input }/>
+      <Box { ...checkbox }>
+        { props.children }
+      </Box>
+      { props.isChecked && <IconSvg name="check" boxSize={ 4 }/> }
+    </Box>
+  );
+};
+
+// FILTER
+
+interface Props {
+  name: string;
+  options: Array<TOption>;
+  hasActiveFilter: boolean;
+  defaultValue?: string;
+  isLoading?: boolean;
+  onChange: (nextValue: string) => void;
+}
+
+const PopoverFilterRadio = ({ name, hasActiveFilter, options, isLoading, onChange, defaultValue }: Props) => {
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  const { getRootProps, getRadioProps } = useRadioGroup({
+    name,
+    defaultValue,
+    onChange,
+  });
+
+  const root = getRootProps();
+
+  return (
+    <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
+      <PopoverTrigger>
+        <FilterButton
+          isActive={ isOpen }
+          onClick={ onToggle }
+          appliedFiltersNum={ hasActiveFilter ? 1 : 0 }
+          isLoading={ isLoading }
+        />
+      </PopoverTrigger>
+      <PopoverContent w="fit-content" minW="150px">
+        <PopoverBody { ...root } py={ 2 } px={ 0 } display="flex" flexDir="column">
+          { options.map((option) => {
+            const radio = getRadioProps({ value: option.value });
+            return (
+              <Option key={ option.value } { ...radio }>
+                { option.label }
+              </Option>
+            );
+          }) }
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default React.memo(PopoverFilterRadio);
diff --git a/ui/shared/filters/TableColumnFilter.tsx b/ui/shared/filters/TableColumnFilter.tsx
new file mode 100644
index 0000000000..2bcad20751
--- /dev/null
+++ b/ui/shared/filters/TableColumnFilter.tsx
@@ -0,0 +1,76 @@
+import {
+  chakra,
+  Flex,
+  Text,
+  Link,
+  Button,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import TableColumnFilterWrapper from './TableColumnFilterWrapper';
+
+type ContentProps = {
+  title: string;
+  isFilled?: boolean;
+  hasReset?: boolean;
+  onFilter: () => void;
+  onReset?: () => void;
+  onClose?: () => void;
+  children: React.ReactNode;
+}
+
+type Props = ContentProps & {
+  columnName: string;
+  isActive?: boolean;
+  isLoading?: boolean;
+  className?: string;
+}
+
+const TableColumnFilterContent = ({ title, isFilled, hasReset, onFilter, onReset, onClose, children }: ContentProps) => {
+  const onFilterClick = React.useCallback(() => {
+    onClose && onClose();
+    onFilter();
+  }, [ onClose, onFilter ]);
+  return (
+    <>
+      <Flex alignItems="center" justifyContent="space-between">
+        <Text color="text_secondary" fontWeight="600">{ title }</Text>
+        { hasReset && (
+          <Link
+            onClick={ onReset }
+            cursor={ isFilled ? 'pointer' : 'unset' }
+            opacity={ isFilled ? 1 : 0.2 }
+            _hover={{
+              color: isFilled ? 'link_hovered' : 'none',
+            }}
+          >
+            Reset
+          </Link>
+        ) }
+      </Flex>
+      { children }
+      <Button
+        isDisabled={ !isFilled }
+        onClick={ onFilterClick }
+        w="fit-content"
+      >
+        Filter
+      </Button>
+    </>
+  );
+};
+
+const TableColumnFilter = ({ columnName, isActive, className, isLoading, ...props }: Props) => {
+  return (
+    <TableColumnFilterWrapper
+      isActive={ isActive }
+      columnName={ columnName }
+      className={ className }
+      isLoading={ isLoading }
+    >
+      <TableColumnFilterContent { ...props }/>
+    </TableColumnFilterWrapper>
+  );
+};
+
+export default chakra(TableColumnFilter);
diff --git a/ui/shared/filters/TableColumnFilterWrapper.tsx b/ui/shared/filters/TableColumnFilterWrapper.tsx
new file mode 100644
index 0000000000..bd67f93a7c
--- /dev/null
+++ b/ui/shared/filters/TableColumnFilterWrapper.tsx
@@ -0,0 +1,62 @@
+import {
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  useDisclosure,
+  IconButton,
+  chakra,
+  Portal,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import Popover from 'ui/shared/chakra/Popover';
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props {
+  columnName: string;
+  isActive?: boolean;
+  isLoading?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const TableColumnFilterWrapper = ({ columnName, isActive, className, children, isLoading }: Props) => {
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  const child = React.Children.only(children) as React.ReactElement & {
+    ref?: React.Ref<React.ReactNode>;
+  };
+
+  const modifiedChildren = React.cloneElement(
+    child,
+    { onClose },
+  );
+
+  return (
+    <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy lazyBehavior="unmount">
+      <PopoverTrigger>
+        <IconButton
+          onClick={ onToggle }
+          aria-label={ `filter by ${ columnName }` }
+          variant="ghost"
+          w="20px"
+          h="20px"
+          icon={ <IconSvg name="filter" w="19px" h="19px"/> }
+          isActive={ isActive }
+          isDisabled={ isLoading }
+          borderRadius="4px"
+          color="text_secondary"
+        />
+      </PopoverTrigger>
+      <Portal>
+        <PopoverContent className={ className }>
+          <PopoverBody px={ 4 } py={ 6 } display="flex" flexDir="column" rowGap={ 3 }>
+            { modifiedChildren }
+          </PopoverBody>
+        </PopoverContent>
+      </Portal>
+    </Popover>
+  );
+};
+
+export default chakra(TableColumnFilterWrapper);
diff --git a/ui/shared/filters/TokenTypeFilter.tsx b/ui/shared/filters/TokenTypeFilter.tsx
index 9d80814284..85b4ec2432 100644
--- a/ui/shared/filters/TokenTypeFilter.tsx
+++ b/ui/shared/filters/TokenTypeFilter.tsx
@@ -3,7 +3,8 @@ import React from 'react';
 
 import type { NFTTokenType, TokenType } from 'types/api/token';
 
-import { NFT_TOKEN_TYPES, TOKEN_TYPES } from 'lib/token/tokenTypes';
+import {
+  TOKEN_TYPES, TOKEN_TYPE_IDS, NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
 
 type Props<T extends TokenType | NFTTokenType> = {
   onChange: (nextValue: Array<T>) => void;
@@ -42,9 +43,9 @@ const TokenTypeFilter = <T extends TokenType | NFTTokenType>({ nftOnly, onChange
         </Link>
       </Flex>
       <CheckboxGroup size="lg" onChange={ handleChange } value={ value }>
-        { (nftOnly ? NFT_TOKEN_TYPES : TOKEN_TYPES).map(({ title, id }) => (
+        { (nftOnly ? NFT_TOKEN_TYPE_IDS : TOKEN_TYPE_IDS).map((id) => (
           <Checkbox key={ id } value={ id }>
-            <Text fontSize="md">{ title }</Text>
+            <Text fontSize="md">{ TOKEN_TYPES[id] }</Text>
           </Checkbox>
         )) }
       </CheckboxGroup>
diff --git a/ui/shared/forms/DragAndDropArea.tsx b/ui/shared/forms/DragAndDropArea.tsx
index 51cab94cec..1b2d573729 100644
--- a/ui/shared/forms/DragAndDropArea.tsx
+++ b/ui/shared/forms/DragAndDropArea.tsx
@@ -9,9 +9,10 @@ interface Props {
   onDrop: (files: Array<File>) => void;
   className?: string;
   isDisabled?: boolean;
+  fullFilePath?: boolean;
 }
 
-const DragAndDropArea = ({ onDrop, children, className, isDisabled }: Props) => {
+const DragAndDropArea = ({ onDrop, children, className, isDisabled, fullFilePath }: Props) => {
   const [ isDragOver, setIsDragOver ] = React.useState(false);
 
   const handleDrop = React.useCallback(async(event: DragEvent<HTMLDivElement>) => {
@@ -22,11 +23,11 @@ const DragAndDropArea = ({ onDrop, children, className, isDisabled }: Props) =>
     }
 
     const fileEntries = await getAllFileEntries(event.dataTransfer.items);
-    const files = await Promise.all(fileEntries.map(convertFileEntryToFile));
+    const files = await Promise.all(fileEntries.map((fileEntry) => convertFileEntryToFile(fileEntry, fullFilePath)));
 
     onDrop(files);
     setIsDragOver(false);
-  }, [ isDisabled, onDrop ]);
+  }, [ isDisabled, onDrop, fullFilePath ]);
 
   const handleDragOver = React.useCallback((event: DragEvent<HTMLDivElement>) => {
     event.preventDefault();
diff --git a/ui/shared/forms/FileSnippet.tsx b/ui/shared/forms/FileSnippet.tsx
index 172c045ed9..73656e46d8 100644
--- a/ui/shared/forms/FileSnippet.tsx
+++ b/ui/shared/forms/FileSnippet.tsx
@@ -76,7 +76,7 @@ const FileSnippet = ({ file, className, index, onRemove, isDisabled, error }: Pr
             <Tooltip
               label={ error }
               placement="top"
-              maxW="320px"
+              maxW={{ base: 'calc(100vw - 8px)', lg: '320px' }}
             >
               <Box cursor="pointer" display="inherit" onClick={ handleErrorHintIconClick } ml={ 1 }>
                 <IconSvg name="info" boxSize={ 5 } color="error"/>
diff --git a/ui/shared/forms/fields/FormFieldReCaptcha.tsx b/ui/shared/forms/fields/FormFieldReCaptcha.tsx
new file mode 100644
index 0000000000..2b26552fff
--- /dev/null
+++ b/ui/shared/forms/fields/FormFieldReCaptcha.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import ReCaptcha from 'react-google-recaptcha';
+import { useFormContext } from 'react-hook-form';
+
+import config from 'configs/app';
+
+interface Props {
+  disabledFeatureMessage?: JSX.Element;
+}
+
+const FormFieldReCaptcha = ({ disabledFeatureMessage }: Props) => {
+
+  const { register, unregister, trigger, clearErrors, setValue, resetField, setError, formState } = useFormContext();
+  const ref = React.useRef<ReCaptcha>(null);
+
+  React.useEffect(() => {
+    register('reCaptcha', { required: true, shouldUnregister: true });
+
+    return () => {
+      unregister('reCaptcha');
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  React.useEffect(() => {
+    ref.current?.reset();
+    trigger('reCaptcha');
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ formState.submitCount ]);
+
+  const handleReCaptchaChange = React.useCallback((token: string | null) => {
+    if (token) {
+      clearErrors('reCaptcha');
+      setValue('reCaptcha', token, { shouldValidate: true });
+    }
+  }, [ clearErrors, setValue ]);
+
+  const handleReCaptchaExpire = React.useCallback(() => {
+    resetField('reCaptcha');
+    setError('reCaptcha', { type: 'required' });
+  }, [ resetField, setError ]);
+
+  if (!config.services.reCaptcha.siteKey) {
+    return disabledFeatureMessage ?? null;
+  }
+
+  return (
+    <ReCaptcha
+      className="recaptcha"
+      ref={ ref }
+      sitekey={ config.services.reCaptcha.siteKey }
+      onChange={ handleReCaptchaChange }
+      onExpired={ handleReCaptchaExpire }
+    />
+  );
+};
+
+export default FormFieldReCaptcha;
diff --git a/ui/shared/forms/utils/files.ts b/ui/shared/forms/utils/files.ts
index 57a52d9800..f5e0327258 100644
--- a/ui/shared/forms/utils/files.ts
+++ b/ui/shared/forms/utils/files.ts
@@ -1,3 +1,5 @@
+import stripLeadingSlash from 'lib/stripLeadingSlash';
+
 // Function to get all files in drop directory
 export async function getAllFileEntries(dataTransferItemList: DataTransferItemList): Promise<Array<FileSystemFileEntry>> {
   const fileEntries: Array<FileSystemFileEntry> = [];
@@ -54,11 +56,13 @@ async function readEntriesPromise(directoryReader: DirectoryReader): Promise<Arr
   } catch (err) {}
 }
 
-export function convertFileEntryToFile(entry: FileSystemFileEntry): Promise<File> {
+export function convertFileEntryToFile(entry: FileSystemFileEntry, fullFilePath?: boolean): Promise<File> {
   return new Promise((resolve) => {
     entry.file(async(file: File) => {
-    //   const newFile = new File([ file ], entry.fullPath, { lastModified: file.lastModified, type: file.type });
-      resolve(file);
+      const newFile = fullFilePath ?
+        new File([ file ], stripLeadingSlash(entry.fullPath), { lastModified: file.lastModified, type: file.type }) :
+        file;
+      resolve(newFile);
     });
   });
 }
diff --git a/ui/shared/gas/GasInfoTooltip.pw.tsx b/ui/shared/gas/GasInfoTooltip.pw.tsx
index b59a026f56..0be7c3b3fb 100644
--- a/ui/shared/gas/GasInfoTooltip.pw.tsx
+++ b/ui/shared/gas/GasInfoTooltip.pw.tsx
@@ -1,10 +1,10 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import type { GasPriceInfo } from 'types/api/stats';
+
 import { SECOND } from 'lib/consts';
 import * as statsMock from 'mocks/stats/index';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import GasInfoTooltip from './GasInfoTooltip';
 import GasPrice from './GasPrice';
@@ -13,13 +13,11 @@ const dataUpdatedAt = Date.now() - 30 * SECOND;
 
 test.use({ viewport: { width: 300, height: 300 } });
 
-test('all data', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <GasInfoTooltip data={ statsMock.base } dataUpdatedAt={ dataUpdatedAt } isOpen>
-        <span>Gas <GasPrice data={ statsMock.base.gas_prices.average }/></span>
-      </GasInfoTooltip>
-    </TestApp>,
+test('all data', async({ render, page }) => {
+  await render(
+    <GasInfoTooltip data={ statsMock.base } dataUpdatedAt={ dataUpdatedAt } isOpen>
+      <span>Gas <GasPrice data={ statsMock.base.gas_prices?.average as GasPriceInfo }/></span>
+    </GasInfoTooltip>,
   );
 
   // await page.getByText(/gas/i).hover();
@@ -27,13 +25,11 @@ test('all data', async({ mount, page }) => {
   await expect(page).toHaveScreenshot();
 });
 
-test('without primary unit price', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <GasInfoTooltip data={ statsMock.withoutFiatPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
-        <span>Gas: <GasPrice data={ statsMock.withoutFiatPrices.gas_prices.average }/></span>
-      </GasInfoTooltip>
-    </TestApp>,
+test('without primary unit price', async({ render, page }) => {
+  await render(
+    <GasInfoTooltip data={ statsMock.withoutFiatPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
+      <span>Gas: <GasPrice data={ statsMock.withoutFiatPrices.gas_prices?.average as GasPriceInfo }/></span>
+    </GasInfoTooltip>,
   );
 
   // await page.getByText(/gas/i).hover();
@@ -41,13 +37,11 @@ test('without primary unit price', async({ mount, page }) => {
   await expect(page).toHaveScreenshot();
 });
 
-test('without secondary unit price', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <GasInfoTooltip data={ statsMock.withoutGweiPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
-        <span>Gas: <GasPrice data={ statsMock.withoutGweiPrices.gas_prices.average }/></span>
-      </GasInfoTooltip>
-    </TestApp>,
+test('without secondary unit price', async({ render, page }) => {
+  await render(
+    <GasInfoTooltip data={ statsMock.withoutGweiPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
+      <span>Gas: <GasPrice data={ statsMock.withoutGweiPrices.gas_prices?.average as GasPriceInfo }/></span>
+    </GasInfoTooltip>,
   );
 
   // await page.getByText(/gas/i).hover();
@@ -55,13 +49,11 @@ test('without secondary unit price', async({ mount, page }) => {
   await expect(page).toHaveScreenshot();
 });
 
-test('no data', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <GasInfoTooltip data={ statsMock.withoutBothPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
-        <span>Gas: <GasPrice data={ statsMock.withoutBothPrices.gas_prices.average }/></span>
-      </GasInfoTooltip>
-    </TestApp>,
+test('no data', async({ render, page }) => {
+  await render(
+    <GasInfoTooltip data={ statsMock.withoutBothPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
+      <span>Gas: <GasPrice data={ statsMock.withoutBothPrices.gas_prices?.average as GasPriceInfo }/></span>
+    </GasInfoTooltip>,
   );
 
   // await page.getByText(/gas/i).hover();
@@ -69,21 +61,18 @@ test('no data', async({ mount, page }) => {
   await expect(page).toHaveScreenshot();
 });
 
-const oneUnitTest = test.extend({
-  context: contextWithEnvs([
-    { name: 'NEXT_PUBLIC_GAS_TRACKER_UNITS', value: '["gwei"]' },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
-});
+test.describe('one unit', () => {
+  test.beforeEach(async({ mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_GAS_TRACKER_UNITS', '["gwei"]' ],
+    ]);
+  });
 
-oneUnitTest.describe('one unit', () => {
-  oneUnitTest('with data', async({ mount, page }) => {
-    await mount(
-      <TestApp>
-        <GasInfoTooltip data={ statsMock.withoutFiatPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
-          <span>Gas: <GasPrice data={ statsMock.withoutFiatPrices.gas_prices.average }/></span>
-        </GasInfoTooltip>
-      </TestApp>,
+  test('with data', async({ render, page }) => {
+    await render(
+      <GasInfoTooltip data={ statsMock.withoutFiatPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
+        <span>Gas: <GasPrice data={ statsMock.withoutFiatPrices.gas_prices?.average as GasPriceInfo }/></span>
+      </GasInfoTooltip>,
     );
 
     // await page.getByText(/gas/i).hover();
@@ -91,13 +80,11 @@ oneUnitTest.describe('one unit', () => {
     await expect(page).toHaveScreenshot();
   });
 
-  oneUnitTest('without data', async({ mount, page }) => {
-    await mount(
-      <TestApp>
-        <GasInfoTooltip data={ statsMock.withoutGweiPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
-          <span>Gas: <GasPrice data={ statsMock.withoutGweiPrices.gas_prices.average }/></span>
-        </GasInfoTooltip>
-      </TestApp>,
+  test('without data', async({ render, page }) => {
+    await render(
+      <GasInfoTooltip data={ statsMock.withoutGweiPrices } dataUpdatedAt={ dataUpdatedAt } isOpen>
+        <span>Gas: <GasPrice data={ statsMock.withoutGweiPrices.gas_prices?.average as GasPriceInfo }/></span>
+      </GasInfoTooltip>,
     );
 
     // await page.getByText(/gas/i).hover();
diff --git a/ui/shared/gas/GasInfoTooltip.tsx b/ui/shared/gas/GasInfoTooltip.tsx
index de1edcecaa..4c81e45776 100644
--- a/ui/shared/gas/GasInfoTooltip.tsx
+++ b/ui/shared/gas/GasInfoTooltip.tsx
@@ -1,4 +1,16 @@
-import { Box, DarkMode, Flex, Grid, Popover, PopoverBody, PopoverContent, PopoverTrigger, Portal, useColorModeValue } from '@chakra-ui/react';
+import type {
+  PlacementWithLogical } from '@chakra-ui/react';
+import {
+  Box,
+  DarkMode,
+  Flex,
+  Grid,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Portal,
+  useColorModeValue,
+} from '@chakra-ui/react';
 import React from 'react';
 
 import type { HomeStats } from 'types/api/stats';
@@ -7,7 +19,8 @@ import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import dayjs from 'lib/date/dayjs';
-import LinkInternal from 'ui/shared/LinkInternal';
+import Popover from 'ui/shared/chakra/Popover';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 
 import GasInfoTooltipRow from './GasInfoTooltipRow';
 import GasInfoUpdateTimer from './GasInfoUpdateTimer';
@@ -17,12 +30,12 @@ interface Props {
   data: HomeStats;
   dataUpdatedAt: number;
   isOpen?: boolean; // for testing purposes only; the tests were flaky, i couldn't find a better way
+  placement?: PlacementWithLogical;
 }
 
-const POPOVER_OFFSET: [ number, number ] = [ 0, 10 ];
 const feature = config.features.gasTracker;
 
-const GasInfoTooltip = ({ children, data, dataUpdatedAt, isOpen }: Props) => {
+const GasInfoTooltip = ({ children, data, dataUpdatedAt, isOpen, placement }: Props) => {
   const tooltipBg = useColorModeValue('gray.700', 'gray.900');
 
   if (!data.gas_prices) {
@@ -36,7 +49,7 @@ const GasInfoTooltip = ({ children, data, dataUpdatedAt, isOpen }: Props) => {
       3 : 2;
 
   return (
-    <Popover trigger="hover" isLazy offset={ POPOVER_OFFSET } isOpen={ isOpen }>
+    <Popover trigger="hover" isLazy isOpen={ isOpen } placement={ placement }>
       <PopoverTrigger>
         { children }
       </PopoverTrigger>
diff --git a/ui/shared/gas/GasInfoTooltipRow.tsx b/ui/shared/gas/GasInfoTooltipRow.tsx
index 4df03189ac..3aae5220fb 100644
--- a/ui/shared/gas/GasInfoTooltipRow.tsx
+++ b/ui/shared/gas/GasInfoTooltipRow.tsx
@@ -16,7 +16,7 @@ const GasInfoTooltipRow = ({ name, info }: Props) => {
     <>
       <Box>
         <chakra.span>{ name }</chakra.span>
-        { info && info.time && (
+        { info && typeof info.time === 'number' && info.time > 0 && (
           <chakra.span color="text_secondary">
             { space }{ (info.time / 1000).toLocaleString(undefined, { maximumFractionDigits: 1 }) }s
           </chakra.span>
diff --git a/ui/shared/gas/formatGasValue.ts b/ui/shared/gas/formatGasValue.ts
index c55d75cd23..8c824ca742 100644
--- a/ui/shared/gas/formatGasValue.ts
+++ b/ui/shared/gas/formatGasValue.ts
@@ -9,6 +9,11 @@ export default function formatGasValue(data: GasPriceInfo, unit: GasUnit) {
       if (!data.price) {
         return `N/A ${ currencyUnits.gwei }`;
       }
+
+      if (Number(data.price) < 0.1) {
+        return `< 0.1 ${ currencyUnits.gwei }`;
+      }
+
       return `${ Number(data.price).toLocaleString(undefined, { maximumFractionDigits: 1 }) } ${ currencyUnits.gwei }`;
     }
 
diff --git a/ui/shared/layout/Layout.pw.tsx b/ui/shared/layout/Layout.pw.tsx
index 3295dccd1c..4f5fa38fe7 100644
--- a/ui/shared/layout/Layout.pw.tsx
+++ b/ui/shared/layout/Layout.pw.tsx
@@ -1,35 +1,36 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { indexingStatus } from 'mocks/stats/index';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import Layout from './Layout';
 
-const API_URL = buildApiUrl('homepage_indexing_status');
-
-const test = base.extend({
-  context: contextWithEnvs([
-    {
-      name: 'NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE',
-      value: 'We are currently lacking pictures of <i>ducks</i>. Please <a href="mailto:duck@blockscout.com">send</a> us one.',
-    },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
+test('base view +@mobile', async({ render, mockEnvs, mockApiResponse }) => {
+  await mockEnvs([
+    [
+      'NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE',
+      'We are currently lacking pictures of <i>ducks</i>. Please <a href="mailto:duck@blockscout.com">send</a> us one.',
+    ],
+  ]);
+  await mockApiResponse('homepage_indexing_status', indexingStatus);
+  const component = await render(<Layout>Page Content</Layout>);
+  await expect(component).toHaveScreenshot();
 });
 
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ finished_indexing_blocks: false, indexed_blocks_ratio: 0.1 }),
-  }));
+test.describe('xxl screen', () => {
+  test.use({ viewport: pwConfig.viewport.xxl });
 
-  const component = await mount(
-    <TestApp>
-      <Layout>Page Content</Layout>
-    </TestApp>,
-  );
+  test('vertical navigation', async({ render }) => {
+    const component = await render(<Layout>Page Content</Layout>);
+    await expect(component).toHaveScreenshot();
+  });
 
-  await expect(component).toHaveScreenshot();
+  test('horizontal navigation', async({ render, mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_NAVIGATION_LAYOUT', 'horizontal' ],
+    ]);
+    const component = await render(<Layout>Page Content</Layout>);
+    await expect(component).toHaveScreenshot();
+  });
 });
diff --git a/ui/shared/layout/Layout.tsx b/ui/shared/layout/Layout.tsx
index 20a853939a..5a37df0047 100644
--- a/ui/shared/layout/Layout.tsx
+++ b/ui/shared/layout/Layout.tsx
@@ -13,6 +13,7 @@ const LayoutDefault = ({ children }: Props) => {
   return (
     <Layout.Container>
       <Layout.TopRow/>
+      <Layout.NavBar/>
       <HeaderMobile/>
       <Layout.MainArea>
         <Layout.SideBar/>
diff --git a/ui/shared/layout/LayoutApp.tsx b/ui/shared/layout/LayoutApp.tsx
index 8eaebf342a..3ac8e463d8 100644
--- a/ui/shared/layout/LayoutApp.tsx
+++ b/ui/shared/layout/LayoutApp.tsx
@@ -3,30 +3,33 @@ import React from 'react';
 import type { Props } from './types';
 
 import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
-import HeaderDesktop from 'ui/snippets/header/HeaderDesktop';
 import HeaderMobile from 'ui/snippets/header/HeaderMobile';
 
 import * as Layout from './components';
 
 const LayoutDefault = ({ children }: Props) => {
   return (
-    <Layout.Container>
+    <Layout.Container
+      overflowY="hidden"
+      height="$100vh"
+      display="flex"
+      flexDirection="column"
+    >
       <Layout.TopRow/>
-      <HeaderMobile/>
-      <Layout.MainArea>
+      <HeaderMobile hideSearchBar/>
+      <Layout.MainArea minH="auto" flex={ 1 }>
         <Layout.MainColumn
-          paddingTop={{ base: 16, lg: 6 }}
+          paddingTop={{ base: 0, lg: 0 }}
+          paddingBottom={ 0 }
           paddingX={{ base: 4, lg: 6 }}
         >
-          <HeaderDesktop isMarketplaceAppPage/>
           <AppErrorBoundary>
-            <Layout.Content pt={{ base: 0, lg: 4 }}>
+            <Layout.Content pt={{ base: 0, lg: 2 }} flexGrow={ 1 }>
               { children }
             </Layout.Content>
           </AppErrorBoundary>
         </Layout.MainColumn>
       </Layout.MainArea>
-      <Layout.Footer/>
     </Layout.Container>
   );
 };
diff --git a/ui/shared/layout/LayoutError.pw.tsx b/ui/shared/layout/LayoutError.pw.tsx
index 6fe13e10bd..b5608d645b 100644
--- a/ui/shared/layout/LayoutError.pw.tsx
+++ b/ui/shared/layout/LayoutError.pw.tsx
@@ -1,27 +1,17 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { indexingStatus } from 'mocks/stats/index';
+import { test, expect } from 'playwright/lib';
 
 import LayoutHome from './LayoutHome';
 
-const API_URL = buildApiUrl('homepage_indexing_status');
-
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ finished_indexing_blocks: false, indexed_blocks_ratio: 0.1 }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LayoutHome>
-        <Box pt={ 10 }>Error</Box>
-      </LayoutHome>
-    </TestApp>,
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('homepage_indexing_status', indexingStatus);
+  const component = await render(
+    <LayoutHome>
+      <Box pt={ 10 }>Error</Box>
+    </LayoutHome>,
   );
-
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/layout/LayoutError.tsx b/ui/shared/layout/LayoutError.tsx
index 626be13d47..b404cfd2ba 100644
--- a/ui/shared/layout/LayoutError.tsx
+++ b/ui/shared/layout/LayoutError.tsx
@@ -13,6 +13,7 @@ const LayoutError = ({ children }: Props) => {
   return (
     <Layout.Container>
       <Layout.TopRow/>
+      <Layout.NavBar/>
       <HeaderMobile/>
       <Layout.MainArea>
         <Layout.SideBar/>
diff --git a/ui/shared/layout/LayoutHome.pw.tsx b/ui/shared/layout/LayoutHome.pw.tsx
index 94b7b0cdcd..aca7c54997 100644
--- a/ui/shared/layout/LayoutHome.pw.tsx
+++ b/ui/shared/layout/LayoutHome.pw.tsx
@@ -1,24 +1,12 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { indexingStatus } from 'mocks/stats/index';
+import { test, expect } from 'playwright/lib';
 
 import LayoutHome from './LayoutHome';
 
-const API_URL = buildApiUrl('homepage_indexing_status');
-
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ finished_indexing_blocks: false, indexed_blocks_ratio: 0.1 }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <LayoutHome>Page Content</LayoutHome>
-    </TestApp>,
-  );
-
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('homepage_indexing_status', indexingStatus);
+  const component = await render(<LayoutHome>Page Content</LayoutHome>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/layout/LayoutHome.tsx b/ui/shared/layout/LayoutHome.tsx
index 6274afeeea..ef2c6c4d07 100644
--- a/ui/shared/layout/LayoutHome.tsx
+++ b/ui/shared/layout/LayoutHome.tsx
@@ -12,7 +12,8 @@ const LayoutHome = ({ children }: Props) => {
   return (
     <Layout.Container>
       <Layout.TopRow/>
-      <HeaderMobile isHomePage/>
+      <Layout.NavBar/>
+      <HeaderMobile hideSearchBar/>
       <Layout.MainArea>
         <Layout.SideBar/>
         <Layout.MainColumn
diff --git a/ui/shared/layout/LayoutSearchResults.tsx b/ui/shared/layout/LayoutSearchResults.tsx
index 2f9614cb2e..3f3a607026 100644
--- a/ui/shared/layout/LayoutSearchResults.tsx
+++ b/ui/shared/layout/LayoutSearchResults.tsx
@@ -9,6 +9,7 @@ const LayoutSearchResults = ({ children }: Props) => {
   return (
     <Layout.Container>
       <Layout.TopRow/>
+      <Layout.NavBar/>
       { children }
     </Layout.Container>
   );
diff --git a/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-horizontal-navigation-1.png b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-horizontal-navigation-1.png
new file mode 100644
index 0000000000..05f4bce2e4
Binary files /dev/null and b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-horizontal-navigation-1.png differ
diff --git a/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-vertical-navigation-1.png b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-vertical-navigation-1.png
new file mode 100644
index 0000000000..f4e2c356fd
Binary files /dev/null and b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-vertical-navigation-1.png differ
diff --git a/ui/shared/layout/components/Container.tsx b/ui/shared/layout/components/Container.tsx
index 68991b10de..62678c70d0 100644
--- a/ui/shared/layout/components/Container.tsx
+++ b/ui/shared/layout/components/Container.tsx
@@ -1,16 +1,24 @@
-import { Box } from '@chakra-ui/react';
+import { Box, chakra, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 interface Props {
   children: React.ReactNode;
+  className?: string;
 }
 
-const Container = ({ children }: Props) => {
+const Container = ({ children, className }: Props) => {
+  const bgColor = useColorModeValue('white', 'black');
+
   return (
-    <Box minWidth={{ base: '100vw', lg: 'fit-content' }}>
+    <Box
+      className={ className }
+      minWidth={{ base: '100vw', lg: 'fit-content' }}
+      m="0 auto"
+      bgColor={ bgColor }
+    >
       { children }
     </Box>
   );
 };
 
-export default React.memo(Container);
+export default React.memo(chakra(Container));
diff --git a/ui/shared/layout/components/Content.tsx b/ui/shared/layout/components/Content.tsx
index 4f6ddf23c1..ffb215371c 100644
--- a/ui/shared/layout/components/Content.tsx
+++ b/ui/shared/layout/components/Content.tsx
@@ -8,7 +8,7 @@ interface Props {
 
 const Content = ({ children, className }: Props) => {
   return (
-    <Box pt={{ base: 0, lg: '52px' }} as="main" className={ className }>
+    <Box pt={{ base: 0, lg: 6 }} as="main" flexGrow={ 1 } className={ className }>
       { children }
     </Box>
   );
diff --git a/ui/shared/layout/components/MainArea.tsx b/ui/shared/layout/components/MainArea.tsx
index 804577425f..632939e5db 100644
--- a/ui/shared/layout/components/MainArea.tsx
+++ b/ui/shared/layout/components/MainArea.tsx
@@ -1,16 +1,34 @@
-import { Flex } from '@chakra-ui/react';
+import { Flex, chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import config from 'configs/app';
+
+import { CONTENT_MAX_WIDTH } from '../utils';
+
 interface Props {
   children: React.ReactNode;
+  className?: string;
 }
 
-const MainArea = ({ children }: Props) => {
+const TOP_BAR_HEIGHT = 36;
+const HORIZONTAL_NAV_BAR_HEIGHT = config.UI.navigation.layout === 'horizontal' ? 49 : 0;
+
+const MainArea = ({ children, className }: Props) => {
   return (
-    <Flex w="100%" minH="calc(100vh - 36px)" alignItems="stretch">
+    <Flex
+      className={ className }
+      w="100%"
+      maxW={ `${ CONTENT_MAX_WIDTH }px` }
+      m="0 auto"
+      minH={{
+        base: `calc(100vh - ${ TOP_BAR_HEIGHT }px)`,
+        lg: `calc(100vh - ${ TOP_BAR_HEIGHT + HORIZONTAL_NAV_BAR_HEIGHT }px)`,
+      }}
+      alignItems="stretch"
+    >
       { children }
     </Flex>
   );
 };
 
-export default React.memo(MainArea);
+export default React.memo(chakra(MainArea));
diff --git a/ui/shared/layout/components/MainColumn.tsx b/ui/shared/layout/components/MainColumn.tsx
index 57e9caeeec..75133c9651 100644
--- a/ui/shared/layout/components/MainColumn.tsx
+++ b/ui/shared/layout/components/MainColumn.tsx
@@ -1,6 +1,8 @@
 import { Flex, chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import config from 'configs/app';
+
 interface Props {
   className?: string;
   children: React.ReactNode;
@@ -12,10 +14,11 @@ const MainColumn = ({ children, className }: Props) => {
       className={ className }
       flexDir="column"
       flexGrow={ 1 }
-      w={{ base: '100%', lg: 'auto' }}
-      paddingX={{ base: 4, lg: 12 }}
+      w={{ base: '100%', lg: config.UI.navigation.layout === 'horizontal' ? '100%' : 'auto' }}
+      paddingX={{ base: 3, lg: config.UI.navigation.layout === 'horizontal' ? 6 : 12 }}
+      paddingRight={{ '2xl': 6 }}
       paddingTop={{ base: `${ 12 + 52 }px`, lg: 6 }} // 12px is top padding of content area, 52px is search bar height
-      paddingBottom={ 10 }
+      paddingBottom={ 8 }
     >
       { children }
     </Flex>
diff --git a/ui/shared/layout/components/NavBar.tsx b/ui/shared/layout/components/NavBar.tsx
new file mode 100644
index 0000000000..62986eae92
--- /dev/null
+++ b/ui/shared/layout/components/NavBar.tsx
@@ -0,0 +1,6 @@
+import config from 'configs/app';
+import NavigationDesktop from 'ui/snippets/navigation/horizontal/NavigationDesktop';
+
+const EmptyComponent = () => null;
+
+export default config.UI.navigation.layout === 'horizontal' ? NavigationDesktop : EmptyComponent;
diff --git a/ui/shared/layout/components/SideBar.tsx b/ui/shared/layout/components/SideBar.tsx
index 577c21bbf7..840d1d6a5a 100644
--- a/ui/shared/layout/components/SideBar.tsx
+++ b/ui/shared/layout/components/SideBar.tsx
@@ -1,3 +1,6 @@
-import NavigationDesktop from 'ui/snippets/navigation/NavigationDesktop';
+import config from 'configs/app';
+import NavigationDesktop from 'ui/snippets/navigation/vertical/NavigationDesktop';
 
-export default NavigationDesktop;
+const EmptyComponent = () => null;
+
+export default config.UI.navigation.layout === 'horizontal' ? EmptyComponent : NavigationDesktop;
diff --git a/ui/shared/layout/components/index.tsx b/ui/shared/layout/components/index.tsx
index 2818e9c5c0..67f2dfaf5e 100644
--- a/ui/shared/layout/components/index.tsx
+++ b/ui/shared/layout/components/index.tsx
@@ -5,6 +5,7 @@ import Container from './Container';
 import Content from './Content';
 import MainArea from './MainArea';
 import MainColumn from './MainColumn';
+import NavBar from './NavBar';
 import SideBar from './SideBar';
 
 export {
@@ -12,6 +13,7 @@ export {
   Content,
   MainArea,
   SideBar,
+  NavBar,
   MainColumn,
   Footer,
   TopRow,
diff --git a/ui/shared/layout/utils.ts b/ui/shared/layout/utils.ts
new file mode 100644
index 0000000000..e0b6e2c1a3
--- /dev/null
+++ b/ui/shared/layout/utils.ts
@@ -0,0 +1,6 @@
+import config from 'configs/app';
+
+const maxWidthVerticalNavigation = config.UI.maxContentWidth ? 1_920 : 10_000;
+const maxWidthHorizontalNavigation = config.UI.maxContentWidth ? 1_440 : 10_000;
+
+export const CONTENT_MAX_WIDTH = config.UI.navigation.layout === 'horizontal' ? maxWidthHorizontalNavigation : maxWidthVerticalNavigation;
diff --git a/ui/shared/links/LinkExternal.tsx b/ui/shared/links/LinkExternal.tsx
new file mode 100644
index 0000000000..7070f81981
--- /dev/null
+++ b/ui/shared/links/LinkExternal.tsx
@@ -0,0 +1,54 @@
+import type { LinkProps } from '@chakra-ui/react';
+import { Link, chakra, Box, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+import type { Variants } from './useLinkStyles';
+import { useLinkStyles } from './useLinkStyles';
+
+interface Props {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+  isLoading?: boolean;
+  variant?: Variants;
+  iconColor?: LinkProps['color'];
+  onClick?: LinkProps['onClick'];
+}
+
+const LinkExternal = ({ href, children, className, isLoading, variant, iconColor, onClick }: Props) => {
+  const commonProps = {
+    display: 'inline-block',
+    alignItems: 'center',
+  };
+
+  const styleProps = useLinkStyles(commonProps, variant);
+
+  if (isLoading) {
+    if (variant === 'subtle') {
+      return (
+        <Skeleton className={ className } { ...styleProps } bgColor="inherit">
+          { children }
+          <Box boxSize={ 3 } display="inline-block"/>
+        </Skeleton>
+      );
+    }
+
+    return (
+      <Box className={ className } { ...styleProps }>
+        { children }
+        <Skeleton boxSize={ 3 } verticalAlign="middle" display="inline-block"/>
+      </Box>
+    );
+  }
+
+  return (
+    <Link className={ className } { ...styleProps } target="_blank" href={ href } onClick={ onClick }>
+      { children }
+      <IconSvg name="link_external" boxSize={ 3 } verticalAlign="middle" color={ iconColor ?? 'icon_link_external' } flexShrink={ 0 }/>
+    </Link>
+  );
+};
+
+export default React.memo(chakra(LinkExternal));
diff --git a/ui/shared/links/LinkInternal.tsx b/ui/shared/links/LinkInternal.tsx
new file mode 100644
index 0000000000..7f0055a815
--- /dev/null
+++ b/ui/shared/links/LinkInternal.tsx
@@ -0,0 +1,34 @@
+import type { LinkProps, FlexProps } from '@chakra-ui/react';
+import { Flex, Link } from '@chakra-ui/react';
+import type { LinkProps as NextLinkProps } from 'next/link';
+import NextLink from 'next/link';
+import type { LegacyRef } from 'react';
+import React from 'react';
+
+import type { Variants } from './useLinkStyles';
+import { useLinkStyles } from './useLinkStyles';
+
+type Props = LinkProps & {
+  variant?: Variants;
+  isLoading?: boolean;
+}
+
+const LinkInternal = ({ isLoading, variant, ...props }: Props, ref: LegacyRef<HTMLAnchorElement>) => {
+  const styleProps = useLinkStyles({}, variant);
+
+  if (isLoading) {
+    return <Flex alignItems="center" { ...props as FlexProps } { ...styleProps }>{ props.children }</Flex>;
+  }
+
+  if (!props.href) {
+    return <Link { ...props } ref={ ref } { ...styleProps }/>;
+  }
+
+  return (
+    <NextLink href={ props.href as NextLinkProps['href'] } passHref target={ props.target } legacyBehavior>
+      <Link { ...props } ref={ ref } { ...styleProps }/>
+    </NextLink>
+  );
+};
+
+export default React.memo(React.forwardRef(LinkInternal));
diff --git a/ui/shared/links/LinkNewTab.tsx b/ui/shared/links/LinkNewTab.tsx
new file mode 100644
index 0000000000..7aafc2959a
--- /dev/null
+++ b/ui/shared/links/LinkNewTab.tsx
@@ -0,0 +1,36 @@
+import { chakra, IconButton, Tooltip, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from '../IconSvg';
+
+interface Props {
+  className?: string;
+  label?: string;
+  href: string;
+}
+
+const LinkNewTab = ({ className, label, href }: Props) => {
+  const iconColor = useColorModeValue('gray.400', 'gray.500');
+
+  return (
+    <Tooltip label={ label }>
+      <IconButton
+        aria-label={ label ?? 'Open link' }
+        icon={ <IconSvg name="open-link" boxSize={ 5 }/> }
+        w="20px"
+        h="20px"
+        color={ iconColor }
+        variant="simple"
+        display="inline-block"
+        flexShrink={ 0 }
+        as="a"
+        href={ href }
+        target="_blank"
+        className={ className }
+        borderRadius={ 0 }
+      />
+    </Tooltip>
+  );
+};
+
+export default React.memo(chakra(LinkNewTab));
diff --git a/ui/shared/links/useLinkStyles.ts b/ui/shared/links/useLinkStyles.ts
new file mode 100644
index 0000000000..b44ca5052f
--- /dev/null
+++ b/ui/shared/links/useLinkStyles.ts
@@ -0,0 +1,24 @@
+import type { ChakraProps } from '@chakra-ui/react';
+import { useColorModeValue } from '@chakra-ui/react';
+
+export type Variants = 'subtle'
+
+export function useLinkStyles(commonProps: ChakraProps, variant?: Variants) {
+  const subtleLinkBg = useColorModeValue('gray.100', 'gray.700');
+
+  switch (variant) {
+    case 'subtle': {
+      return {
+        ...commonProps,
+        px: '10px',
+        py: '6px',
+        bgColor: subtleLinkBg,
+        borderRadius: 'base',
+      };
+    }
+
+    default:{
+      return commonProps;
+    }
+  }
+}
diff --git a/ui/shared/logs/LogDecodedInputData.pw.tsx b/ui/shared/logs/LogDecodedInputData.pw.tsx
index ea58b4212e..d5cd7b2201 100644
--- a/ui/shared/logs/LogDecodedInputData.pw.tsx
+++ b/ui/shared/logs/LogDecodedInputData.pw.tsx
@@ -1,25 +1,16 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as mocks from 'mocks/txs/decodedInputData';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import LogDecodedInputData from './LogDecodedInputData';
 
-test('with indexed fields +@mobile +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <LogDecodedInputData data={ mocks.withIndexedFields }/>
-    </TestApp>,
-  );
+test('with indexed fields +@mobile +@dark-mode', async({ render }) => {
+  const component = await render(<LogDecodedInputData data={ mocks.withIndexedFields }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('without indexed fields +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <LogDecodedInputData data={ mocks.withoutIndexedFields }/>
-    </TestApp>,
-  );
+test('without indexed fields +@mobile', async({ render }) => {
+  const component = await render(<LogDecodedInputData data={ mocks.withoutIndexedFields }/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/logs/LogDecodedInputData.tsx b/ui/shared/logs/LogDecodedInputData.tsx
index a1022b94a6..a616e16290 100644
--- a/ui/shared/logs/LogDecodedInputData.tsx
+++ b/ui/shared/logs/LogDecodedInputData.tsx
@@ -2,17 +2,27 @@ import React from 'react';
 
 import type { DecodedInput } from 'types/api/decodedInput';
 
+import useIsMobile from 'lib/hooks/useIsMobile';
+
 import LogDecodedInputDataHeader from './LogDecodedInputDataHeader';
 import LogDecodedInputDataTable from './LogDecodedInputDataTable';
 interface Props {
   data: DecodedInput;
   isLoading?: boolean;
+  rightSlot?: React.ReactNode;
 }
 
-const LogDecodedInputData = ({ data, isLoading }: Props) => {
+const LogDecodedInputData = ({ data, isLoading, rightSlot }: Props) => {
+  const isMobile = useIsMobile();
   return (
     <>
-      <LogDecodedInputDataHeader methodId={ data.method_id } methodCall={ data.method_call } isLoading={ isLoading }/>
+      { isMobile ? rightSlot : null }
+      <LogDecodedInputDataHeader
+        methodId={ data.method_id }
+        methodCall={ data.method_call }
+        isLoading={ isLoading }
+        rightSlot={ isMobile ? null : rightSlot }
+      />
       { data.parameters.length > 0 && <LogDecodedInputDataTable data={ data.parameters } isLoading={ isLoading }/> }
     </>
   );
diff --git a/ui/shared/logs/LogDecodedInputDataHeader.tsx b/ui/shared/logs/LogDecodedInputDataHeader.tsx
index 653382b18b..aaa4528e2f 100644
--- a/ui/shared/logs/LogDecodedInputDataHeader.tsx
+++ b/ui/shared/logs/LogDecodedInputDataHeader.tsx
@@ -1,39 +1,52 @@
 import { Divider, Flex, Skeleton, VStack } from '@chakra-ui/react';
 import React from 'react';
 
+import Tag from 'ui/shared/chakra/Tag';
+
 interface Props {
   methodId: string;
   methodCall: string;
   isLoading?: boolean;
+  rightSlot?: React.ReactNode;
 }
 
-const Item = ({ label, text, isLoading }: { label: string; text: string; isLoading?: boolean}) => {
+const Item = ({ label, children, isLoading }: { label: string; children: React.ReactNode; isLoading?: boolean}) => {
   return (
     <Flex
+      w="100%"
       columnGap={ 5 }
       rowGap={ 2 }
       px={{ base: 0, lg: 4 }}
       flexDir={{ base: 'column', lg: 'row' }}
-      alignItems="flex-start"
+      alignItems={{ base: 'flex-start', lg: 'center' }}
     >
       <Skeleton fontWeight={ 600 } w={{ base: 'auto', lg: '80px' }} flexShrink={ 0 } isLoaded={ !isLoading }>
         { label }
       </Skeleton >
-      <Skeleton isLoaded={ !isLoading } whiteSpace="pre-wrap">{ text }</Skeleton>
+      { children }
     </Flex>
   );
 };
 
-const LogDecodedInputDataHeader = ({ methodId, methodCall, isLoading }: Props) => {
+const LogDecodedInputDataHeader = ({ methodId, methodCall, isLoading, rightSlot }: Props) => {
   return (
     <VStack
       align="flex-start"
       divider={ <Divider/> }
       fontSize="sm"
       lineHeight={ 5 }
+      flexGrow={ 1 }
+      w="100%"
     >
-      <Item label="Method id" text={ methodId } isLoading={ isLoading }/>
-      <Item label="Call" text={ methodCall } isLoading={ isLoading }/>
+      <Flex columnGap={ 2 } w="100%">
+        <Item label="Method id" isLoading={ isLoading }>
+          <Tag isLoading={ isLoading }>{ methodId }</Tag>
+        </Item>
+        { rightSlot }
+      </Flex>
+      <Item label="Call" isLoading={ isLoading }>
+        <Skeleton isLoaded={ !isLoading } whiteSpace="pre-wrap" w="100%">{ methodCall }</Skeleton>
+      </Item>
     </VStack>
   );
 };
diff --git a/ui/shared/logs/LogDecodedInputDataTable.tsx b/ui/shared/logs/LogDecodedInputDataTable.tsx
index f712836a50..07505d8803 100644
--- a/ui/shared/logs/LogDecodedInputDataTable.tsx
+++ b/ui/shared/logs/LogDecodedInputDataTable.tsx
@@ -33,7 +33,7 @@ const Row = ({ name, type, indexed, value, isLoading }: ArrayElement<DecodedInpu
     if (type === 'address' && typeof value === 'string') {
       return (
         <AddressEntity
-          address={{ hash: value, name: '', implementation_name: null, is_contract: false, is_verified: false }}
+          address={{ hash: value, name: '' }}
           isLoading={ isLoading }
         />
       );
diff --git a/ui/shared/logs/LogItem.pw.tsx b/ui/shared/logs/LogItem.pw.tsx
index d537307308..3c7b59b993 100644
--- a/ui/shared/logs/LogItem.pw.tsx
+++ b/ui/shared/logs/LogItem.pw.tsx
@@ -1,9 +1,8 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as addressMocks from 'mocks/address/address';
 import * as inputDataMocks from 'mocks/txs/decodedInputData';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import LogItem from './LogItem';
 
@@ -15,36 +14,32 @@ const TOPICS = [
 ];
 const DATA = '0x0000000000000000000000000000000000000000000000000070265bf0112cee';
 
-test('with decoded input data +@mobile +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <LogItem
-        index={ 42 }
-        decoded={ inputDataMocks.withIndexedFields }
-        address={{ ...addressMocks.withName, is_verified: true }}
-        topics={ TOPICS }
-        data={ DATA }
-        type="transaction"
-        tx_hash={ null }
-      />
-    </TestApp>,
+test('with decoded input data +@mobile +@dark-mode', async({ render }) => {
+  const component = await render(
+    <LogItem
+      index={ 42 }
+      decoded={ inputDataMocks.withIndexedFields }
+      address={{ ...addressMocks.withName, is_verified: true }}
+      topics={ TOPICS }
+      data={ DATA }
+      type="transaction"
+      tx_hash={ null }
+    />,
   );
   await expect(component).toHaveScreenshot();
 });
 
-test('without decoded input data +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <LogItem
-        index={ 42 }
-        decoded={ null }
-        address={ addressMocks.withoutName }
-        topics={ TOPICS }
-        data={ DATA }
-        type="transaction"
-        tx_hash={ null }
-      />
-    </TestApp>,
+test('without decoded input data +@mobile', async({ render }) => {
+  const component = await render(
+    <LogItem
+      index={ 42 }
+      decoded={ null }
+      address={ addressMocks.withoutName }
+      topics={ TOPICS }
+      data={ DATA }
+      type="transaction"
+      tx_hash={ null }
+    />,
   );
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/logs/LogItem.tsx b/ui/shared/logs/LogItem.tsx
index 184c1b8a60..f74fbf1300 100644
--- a/ui/shared/logs/LogItem.tsx
+++ b/ui/shared/logs/LogItem.tsx
@@ -53,7 +53,7 @@ const LogItem = ({ address, index, topics, data, decoded, type, tx_hash: txHash,
       ) }
       { hasTxInfo ? <RowHeader isLoading={ isLoading }>Transaction</RowHeader> : <RowHeader isLoading={ isLoading }>Address</RowHeader> }
       <GridItem display="flex" alignItems="center">
-        { type === 'address' ? (
+        { type === 'address' && txHash ? (
           <TxEntity
             hash={ txHash }
             isLoading={ isLoading }
@@ -74,7 +74,7 @@ const LogItem = ({ address, index, topics, data, decoded, type, tx_hash: txHash,
         </Tooltip> */ }
         <Skeleton isLoaded={ !isLoading } ml="auto" borderRadius="base">
           <Tooltip label="Log index">
-            <Button variant="outline" colorScheme="gray" isActive size="sm" fontWeight={ 400 }>
+            <Button variant="outline" colorScheme="gray" data-selected="true" size="sm" fontWeight={ 400 }>
               { index }
             </Button>
           </Tooltip>
diff --git a/ui/shared/logs/LogTopic.pw.tsx b/ui/shared/logs/LogTopic.pw.tsx
index 9664f2671a..5f38d8c44d 100644
--- a/ui/shared/logs/LogTopic.pw.tsx
+++ b/ui/shared/logs/LogTopic.pw.tsx
@@ -1,27 +1,18 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import LogTopic from './LogTopic';
 
-test('address view +@mobile -@default', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <LogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>
-    </TestApp>,
-  );
+test('address view +@mobile -@default', async({ render }) => {
+  const component = await render(<LogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>);
   await component.locator('select[aria-label="Data type"]').selectOption('address');
 
   await expect(component).toHaveScreenshot();
 });
 
-test('hex view +@mobile -@default', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <LogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>
-    </TestApp>,
-  );
+test('hex view +@mobile -@default', async({ render }) => {
+  const component = await render(<LogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>);
   await component.locator('select[aria-label="Data type"]').selectOption('hex');
 
   await expect(component).toHaveScreenshot();
diff --git a/ui/shared/logs/LogTopic.tsx b/ui/shared/logs/LogTopic.tsx
index bb8e7fdc22..971063ec4e 100644
--- a/ui/shared/logs/LogTopic.tsx
+++ b/ui/shared/logs/LogTopic.tsx
@@ -51,7 +51,7 @@ const LogTopic = ({ hex, index, isLoading }: Props) => {
       case 'address': {
         return (
           <AddressEntity
-            address={{ hash: value, name: '', implementation_name: null, is_contract: false, is_verified: false }}
+            address={{ hash: value, name: '' }}
             isLoading={ isLoading }
           />
         );
@@ -62,7 +62,7 @@ const LogTopic = ({ hex, index, isLoading }: Props) => {
   return (
     <Flex alignItems="center" px={{ base: 0, lg: 3 }} _notFirst={{ mt: 3 }} overflow="hidden" maxW="100%">
       <Skeleton isLoaded={ !isLoading } mr={ 3 } borderRadius="base">
-        <Button variant="outline" colorScheme="gray" isActive size="xs" fontWeight={ 400 } w={ 6 }>
+        <Button variant="outline" colorScheme="gray" data-selected size="xs" fontWeight={ 400 } w={ 6 }>
           { index }
         </Button>
       </Skeleton>
diff --git a/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_dark-color-mode_with-indexed-fields-mobile-dark-mode-1.png b/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_dark-color-mode_with-indexed-fields-mobile-dark-mode-1.png
index 98428228b9..00b9b91666 100644
Binary files a/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_dark-color-mode_with-indexed-fields-mobile-dark-mode-1.png and b/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_dark-color-mode_with-indexed-fields-mobile-dark-mode-1.png differ
diff --git a/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_default_with-indexed-fields-mobile-dark-mode-1.png b/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_default_with-indexed-fields-mobile-dark-mode-1.png
index 0e81521fd8..d7b0124d5c 100644
Binary files a/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_default_with-indexed-fields-mobile-dark-mode-1.png and b/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_default_with-indexed-fields-mobile-dark-mode-1.png differ
diff --git a/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_default_without-indexed-fields-mobile-1.png b/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_default_without-indexed-fields-mobile-1.png
index 5b5efd2b32..0d23e44363 100644
Binary files a/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_default_without-indexed-fields-mobile-1.png and b/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_default_without-indexed-fields-mobile-1.png differ
diff --git a/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_mobile_with-indexed-fields-mobile-dark-mode-1.png b/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_mobile_with-indexed-fields-mobile-dark-mode-1.png
index 173ef0fc4a..a406c70799 100644
Binary files a/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_mobile_with-indexed-fields-mobile-dark-mode-1.png and b/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_mobile_with-indexed-fields-mobile-dark-mode-1.png differ
diff --git a/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_mobile_without-indexed-fields-mobile-1.png b/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_mobile_without-indexed-fields-mobile-1.png
index 7bde892cd2..6f9b592c45 100644
Binary files a/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_mobile_without-indexed-fields-mobile-1.png and b/ui/shared/logs/__screenshots__/LogDecodedInputData.pw.tsx_mobile_without-indexed-fields-mobile-1.png differ
diff --git a/ui/shared/logs/__screenshots__/LogItem.pw.tsx_dark-color-mode_with-decoded-input-data-mobile-dark-mode-1.png b/ui/shared/logs/__screenshots__/LogItem.pw.tsx_dark-color-mode_with-decoded-input-data-mobile-dark-mode-1.png
index 3902449e9a..eae3ae1e2c 100644
Binary files a/ui/shared/logs/__screenshots__/LogItem.pw.tsx_dark-color-mode_with-decoded-input-data-mobile-dark-mode-1.png and b/ui/shared/logs/__screenshots__/LogItem.pw.tsx_dark-color-mode_with-decoded-input-data-mobile-dark-mode-1.png differ
diff --git a/ui/shared/logs/__screenshots__/LogItem.pw.tsx_default_with-decoded-input-data-mobile-dark-mode-1.png b/ui/shared/logs/__screenshots__/LogItem.pw.tsx_default_with-decoded-input-data-mobile-dark-mode-1.png
index 3063b71f5d..93855cd754 100644
Binary files a/ui/shared/logs/__screenshots__/LogItem.pw.tsx_default_with-decoded-input-data-mobile-dark-mode-1.png and b/ui/shared/logs/__screenshots__/LogItem.pw.tsx_default_with-decoded-input-data-mobile-dark-mode-1.png differ
diff --git a/ui/shared/logs/__screenshots__/LogItem.pw.tsx_mobile_with-decoded-input-data-mobile-dark-mode-1.png b/ui/shared/logs/__screenshots__/LogItem.pw.tsx_mobile_with-decoded-input-data-mobile-dark-mode-1.png
index 3834fa7b4f..7ae98dec50 100644
Binary files a/ui/shared/logs/__screenshots__/LogItem.pw.tsx_mobile_with-decoded-input-data-mobile-dark-mode-1.png and b/ui/shared/logs/__screenshots__/LogItem.pw.tsx_mobile_with-decoded-input-data-mobile-dark-mode-1.png differ
diff --git a/ui/shared/nft/NftImageFullscreen.tsx b/ui/shared/nft/NftImageFullscreen.tsx
index 9d35c313d4..b839b13aa2 100644
--- a/ui/shared/nft/NftImageFullscreen.tsx
+++ b/ui/shared/nft/NftImageFullscreen.tsx
@@ -13,11 +13,11 @@ interface Props {
 
 const NftImageFullscreen = ({ src, isOpen, onClose }: Props) => {
   const imgRef = React.useRef<HTMLImageElement>(null);
-  const [ hasDimentions, setHasDimentions ] = React.useState<boolean>(true);
+  const [ hasDimensions, setHasDimensions ] = React.useState<boolean>(true);
 
   const checkWidth = React.useCallback(() => {
     if (imgRef.current?.getBoundingClientRect().width === 0) {
-      setHasDimentions(false);
+      setHasDimensions(false);
     }
   }, [ ]);
 
@@ -30,7 +30,7 @@ const NftImageFullscreen = ({ src, isOpen, onClose }: Props) => {
         maxW="90vw"
         ref={ imgRef }
         onLoad={ checkWidth }
-        sx={ hasDimentions ? {} : { width: '90vw', height: '90vh' } }
+        { ...(hasDimensions ? {} : { width: '90vw', height: '90vh' }) }
       />
     </NftMediaFullscreenModal>
   );
diff --git a/ui/shared/nft/NftMedia.pw.tsx b/ui/shared/nft/NftMedia.pw.tsx
index 4b91def420..b709b17c85 100644
--- a/ui/shared/nft/NftMedia.pw.tsx
+++ b/ui/shared/nft/NftMedia.pw.tsx
@@ -1,42 +1,25 @@
-import { test, expect } from '@playwright/experimental-ct-react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import NftMedia from './NftMedia';
 
 test.describe('no url', () => {
   test.use({ viewport: { width: 250, height: 250 } });
-  test('preview +@dark-mode', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <NftMedia animationUrl={ null } imageUrl={ null }/>
-      </TestApp>,
-    );
-
+  test('preview +@dark-mode', async({ render }) => {
+    const component = await render(<NftMedia animationUrl={ null } imageUrl={ null }/>);
     await expect(component).toHaveScreenshot();
   });
 
-  test('with fallback', async({ mount, page }) => {
+  test('with fallback', async({ render, mockAssetResponse }) => {
     const IMAGE_URL = 'https://localhost:3000/my-image.jpg';
-
-    await page.route(IMAGE_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_long.jpg',
-      });
-    });
-
-    const component = await mount(
-      <TestApp>
-        <NftMedia animationUrl={ null } imageUrl={ IMAGE_URL }/>
-      </TestApp>,
-    );
-
+    await mockAssetResponse(IMAGE_URL, './playwright/mocks/image_long.jpg');
+    const component = await render(<NftMedia animationUrl={ null } imageUrl={ IMAGE_URL }/>);
     await expect(component).toHaveScreenshot();
   });
 
-  test('non-media url and fallback', async({ mount, page }) => {
+  test('non-media url and fallback', async({ render, page, mockAssetResponse }) => {
     const ANIMATION_URL = 'https://localhost:3000/my-animation.m3u8';
     const ANIMATION_MEDIA_TYPE_API_URL = `/node-api/media-type?url=${ encodeURIComponent(ANIMATION_URL) }`;
     const IMAGE_URL = 'https://localhost:3000/my-image.jpg';
@@ -47,88 +30,40 @@ test.describe('no url', () => {
         body: JSON.stringify({ type: undefined }),
       });
     });
+    await mockAssetResponse(IMAGE_URL, './playwright/mocks/image_long.jpg');
 
-    await page.route(IMAGE_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_long.jpg',
-      });
-    });
-
-    const component = await mount(
-      <TestApp>
-        <NftMedia animationUrl={ ANIMATION_URL } imageUrl={ IMAGE_URL }/>
-      </TestApp>,
-    );
-
+    const component = await render(<NftMedia animationUrl={ ANIMATION_URL } imageUrl={ IMAGE_URL }/>);
     await expect(component).toHaveScreenshot();
   });
 });
 
 test.describe('image', () => {
-  test.use({ viewport: { width: 250, height: 250 } });
-
   const MEDIA_URL = 'https://localhost:3000/my-image.jpg';
 
-  test.beforeEach(async({ page }) => {
-    await page.route(MEDIA_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_long.jpg',
-      });
-    });
+  test.beforeEach(async({ mockAssetResponse }) => {
+    await mockAssetResponse(MEDIA_URL, './playwright/mocks/image_long.jpg');
   });
 
-  test('preview +@dark-mode', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
+  test('preview +@dark-mode', async({ render, page }) => {
+    await render(
+      <Box boxSize="250px">
         <NftMedia animationUrl={ MEDIA_URL } imageUrl={ null }/>
-      </TestApp>,
+      </Box>,
     );
-
-    await expect(component).toHaveScreenshot();
+    await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 250 } });
   });
-});
-
-test('image preview hover', async({ mount, page }) => {
-  const MEDIA_URL = 'https://localhost:3000/my-image.jpg';
 
-  await page.route(MEDIA_URL, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_long.jpg',
-    });
+  test('preview hover', async({ render, page }) => {
+    const component = await render(<NftMedia animationUrl={ MEDIA_URL } imageUrl={ null } w="250px"/>);
+    await component.getByAltText('Token instance image').hover();
+    await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 250 } });
   });
 
-  const component = await mount(
-    <TestApp>
-      <NftMedia animationUrl={ MEDIA_URL } imageUrl={ null } w="250px"/>
-    </TestApp>,
-  );
-
-  await component.getByAltText('Token instance image').hover();
-
-  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 250 } });
-});
-
-test('image fullscreen +@dark-mode +@mobile', async({ mount, page }) => {
-  const MEDIA_URL = 'https://localhost:3000/my-image.jpg';
-
-  await page.route(MEDIA_URL, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_long.jpg',
-    });
+  test('fullscreen +@dark-mode +@mobile', async({ render, page }) => {
+    const component = await render(<NftMedia animationUrl={ MEDIA_URL } imageUrl={ null } withFullscreen w="250px"/>);
+    await component.getByAltText('Token instance image').click();
+    await expect(page).toHaveScreenshot();
   });
-  const component = await mount(
-    <TestApp>
-      <NftMedia animationUrl={ MEDIA_URL } imageUrl={ null } withFullscreen w="250px"/>
-    </TestApp>,
-  );
-
-  await component.getByAltText('Token instance image').click();
-
-  await expect(page).toHaveScreenshot();
 });
 
 test.describe('page', () => {
@@ -137,27 +72,16 @@ test.describe('page', () => {
   const MEDIA_URL = 'https://localhost:3000/page.html';
   const MEDIA_TYPE_API_URL = `/node-api/media-type?url=${ encodeURIComponent(MEDIA_URL) }`;
 
-  test.beforeEach(async({ page }) => {
-
-    await page.route(MEDIA_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/page.html',
-      });
-    });
+  test.beforeEach(async({ page, mockAssetResponse }) => {
+    await mockAssetResponse(MEDIA_URL, './playwright/mocks/page.html');
     await page.route(MEDIA_TYPE_API_URL, (route) => route.fulfill({
       status: 200,
       body: JSON.stringify({ type: 'html' }),
     }));
   });
 
-  test('preview +@dark-mode', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <NftMedia animationUrl={ MEDIA_URL } imageUrl={ null }/>
-      </TestApp>,
-    );
-
+  test('preview +@dark-mode', async({ render }) => {
+    const component = await render(<NftMedia animationUrl={ MEDIA_URL } imageUrl={ null }/>);
     await expect(component).toHaveScreenshot();
   });
 });
diff --git a/ui/shared/nft/NftMedia.tsx b/ui/shared/nft/NftMedia.tsx
index 51dd03b6e5..cc572fce4e 100644
--- a/ui/shared/nft/NftMedia.tsx
+++ b/ui/shared/nft/NftMedia.tsx
@@ -18,9 +18,10 @@ interface Props {
   className?: string;
   isLoading?: boolean;
   withFullscreen?: boolean;
+  autoplayVideo?: boolean;
 }
 
-const NftMedia = ({ imageUrl, animationUrl, className, isLoading, withFullscreen }: Props) => {
+const NftMedia = ({ imageUrl, animationUrl, className, isLoading, withFullscreen, autoplayVideo }: Props) => {
   const [ isMediaLoading, setIsMediaLoading ] = React.useState(true);
   const [ isLoadingError, setIsLoadingError ] = React.useState(false);
 
@@ -71,7 +72,7 @@ const NftMedia = ({ imageUrl, animationUrl, className, isLoading, withFullscreen
 
     switch (type) {
       case 'video':
-        return <NftVideo { ...props }/>;
+        return <NftVideo { ...props } autoPlay={ autoplayVideo } poster={ imageUrl || undefined }/>;
       case 'html':
         return <NftHtml { ...props }/>;
       case 'image':
diff --git a/ui/shared/nft/NftVideo.tsx b/ui/shared/nft/NftVideo.tsx
index a58cefbbda..6a3a710dfa 100644
--- a/ui/shared/nft/NftVideo.tsx
+++ b/ui/shared/nft/NftVideo.tsx
@@ -5,20 +5,37 @@ import { mediaStyleProps, videoPlayProps } from './utils';
 
 interface Props {
   src: string;
+  poster?: string;
+  autoPlay?: boolean;
   onLoad: () => void;
   onError: () => void;
   onClick?: () => void;
 }
 
-const NftVideo = ({ src, onLoad, onError, onClick }: Props) => {
+const NftVideo = ({ src, poster, autoPlay = true, onLoad, onError, onClick }: Props) => {
+  const ref = React.useRef<HTMLVideoElement>(null);
+
+  const handleMouseEnter = React.useCallback(() => {
+    !autoPlay && ref.current?.play();
+  }, [ autoPlay ]);
+
+  const handleMouseLeave = React.useCallback(() => {
+    !autoPlay && ref.current?.pause();
+  }, [ autoPlay ]);
+
   return (
     <chakra.video
+      ref={ ref }
       { ...videoPlayProps }
+      autoPlay={ autoPlay }
+      poster={ poster }
       src={ src }
       onCanPlayThrough={ onLoad }
       onError={ onError }
       borderRadius="md"
       onClick={ onClick }
+      onMouseEnter={ handleMouseEnter }
+      onMouseLeave={ handleMouseLeave }
       { ...mediaStyleProps }
     />
   );
diff --git a/ui/shared/nft/NftVideoFullscreen.tsx b/ui/shared/nft/NftVideoFullscreen.tsx
index 07fa250b1e..26a7081a41 100644
--- a/ui/shared/nft/NftVideoFullscreen.tsx
+++ b/ui/shared/nft/NftVideoFullscreen.tsx
@@ -18,6 +18,7 @@ const NftVideoFullscreen = ({ src, isOpen, onClose }: Props) => {
         src={ src }
         maxH="90vh"
         maxW="90vw"
+        autoPlay={ true }
       />
     </NftMediaFullscreenModal>
   );
diff --git a/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_dark-color-mode_image-preview-dark-mode-1.png b/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_dark-color-mode_image-preview-dark-mode-1.png
index b60b305a6c..59ba859811 100644
Binary files a/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_dark-color-mode_image-preview-dark-mode-1.png and b/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_dark-color-mode_image-preview-dark-mode-1.png differ
diff --git a/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_image-preview-dark-mode-1.png b/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_image-preview-dark-mode-1.png
index 2a4baa8e3a..4273139faf 100644
Binary files a/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_image-preview-dark-mode-1.png and b/ui/shared/nft/__screenshots__/NftMedia.pw.tsx_default_image-preview-dark-mode-1.png differ
diff --git a/ui/shared/nft/useNftMediaInfo.tsx b/ui/shared/nft/useNftMediaInfo.tsx
index 7c36f828e9..d040c609fb 100644
--- a/ui/shared/nft/useNftMediaInfo.tsx
+++ b/ui/shared/nft/useNftMediaInfo.tsx
@@ -24,7 +24,7 @@ interface ReturnType {
 export default function useNftMediaInfo({ imageUrl, animationUrl, isEnabled }: Params): ReturnType | null {
 
   const primaryQuery = useNftMediaTypeQuery(animationUrl, isEnabled);
-  const secondaryQuery = useNftMediaTypeQuery(imageUrl, !primaryQuery.isPending && !primaryQuery.data);
+  const secondaryQuery = useNftMediaTypeQuery(imageUrl, isEnabled && !primaryQuery.isPending && !primaryQuery.data);
 
   return React.useMemo(() => {
     if (primaryQuery.isPending) {
diff --git a/ui/shared/nft/utils.ts b/ui/shared/nft/utils.ts
index 90410798f6..3c0ce90bac 100644
--- a/ui/shared/nft/utils.ts
+++ b/ui/shared/nft/utils.ts
@@ -41,7 +41,6 @@ export const mediaStyleProps = {
 };
 
 export const videoPlayProps = {
-  autoPlay: true,
   disablePictureInPicture: true,
   loop: true,
   muted: true,
diff --git a/ui/shared/pagination/Pagination.pw.tsx b/ui/shared/pagination/Pagination.pw.tsx
index e962550667..14e8276ded 100644
--- a/ui/shared/pagination/Pagination.pw.tsx
+++ b/ui/shared/pagination/Pagination.pw.tsx
@@ -1,15 +1,14 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import type { PaginationParams } from './types';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import Pagination from './Pagination';
 
 test.use({ viewport: { width: 250, height: 50 } });
 
-test('default view', async({ mount }) => {
+test('default view', async({ render }) => {
   const props: PaginationParams = {
     page: 2,
     isVisible: true,
@@ -21,11 +20,6 @@ test('default view', async({ mount }) => {
     onPrevPageClick: () => {},
     resetPage: () => {},
   };
-  const component = await mount(
-    <TestApp>
-      <Pagination { ...props } w="fit-content"/>
-    </TestApp>,
-  );
-
+  const component = await render(<Pagination { ...props } w="fit-content"/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/pagination/Pagination.tsx b/ui/shared/pagination/Pagination.tsx
index 67c2c0593d..203eb9ebf3 100644
--- a/ui/shared/pagination/Pagination.tsx
+++ b/ui/shared/pagination/Pagination.tsx
@@ -48,7 +48,7 @@ const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasPage
         <Button
           variant="outline"
           size="sm"
-          isActive
+          data-selected={ true }
           borderWidth="1px"
           fontWeight={ 400 }
           h={ 8 }
diff --git a/ui/shared/pagination/useLazyLoadedList.tsx b/ui/shared/pagination/useLazyLoadedList.tsx
new file mode 100644
index 0000000000..f53125c1d6
--- /dev/null
+++ b/ui/shared/pagination/useLazyLoadedList.tsx
@@ -0,0 +1,45 @@
+import type { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query';
+import React from 'react';
+import { useInView } from 'react-intersection-observer';
+
+import type { PaginatedResources, ResourceError, ResourcePayload } from 'lib/api/resources';
+import type { Params as ApiInfiniteQueryParams } from 'lib/api/useApiInfiniteQuery';
+import useApiInfiniteQuery from 'lib/api/useApiInfiniteQuery';
+
+interface Params<Resource extends PaginatedResources> extends ApiInfiniteQueryParams<Resource> {
+  rootRef: React.RefObject<HTMLElement>;
+}
+
+interface ReturnType<Resource extends PaginatedResources> {
+  cutRef: (node?: Element | null) => void;
+  query: UseInfiniteQueryResult<InfiniteData<ResourcePayload<Resource>>, ResourceError<unknown>>;
+}
+
+export default function useLazyLoadedList<Resource extends PaginatedResources>({
+  rootRef,
+  resourceName,
+  queryOptions,
+  pathParams,
+}: Params<Resource>): ReturnType<Resource> {
+  const query = useApiInfiniteQuery({
+    resourceName,
+    pathParams,
+    queryOptions,
+  });
+
+  const { ref, inView } = useInView({
+    root: rootRef.current,
+    triggerOnce: false,
+    skip: queryOptions?.enabled === false || query.isFetchingNextPage || !query.hasNextPage,
+  });
+
+  React.useEffect(() => {
+    if (inView) {
+      query.fetchNextPage();
+    }
+    // should run only on inView state change
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ inView ]);
+
+  return { cutRef: ref, query };
+}
diff --git a/ui/shared/radioButtonGroup/RadioButtonGroup.pw.tsx b/ui/shared/radioButtonGroup/RadioButtonGroup.pw.tsx
index 01e60fc43b..a3b7fee236 100644
--- a/ui/shared/radioButtonGroup/RadioButtonGroup.pw.tsx
+++ b/ui/shared/radioButtonGroup/RadioButtonGroup.pw.tsx
@@ -1,19 +1,15 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import RadioButtonGroupTest from './specs/RadioButtonGroupTest';
 
-test('radio button group', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box w="400px" p="10px">
-        <RadioButtonGroupTest/>
-      </Box>
-    </TestApp>,
+test('radio button group', async({ render }) => {
+  const component = await render(
+    <Box w="400px" p="10px">
+      <RadioButtonGroupTest/>
+    </Box>,
   );
-
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/radioButtonGroup/__screenshots__/RadioButtonGroup.pw.tsx_default_radio-button-group-1.png b/ui/shared/radioButtonGroup/__screenshots__/RadioButtonGroup.pw.tsx_default_radio-button-group-1.png
index 212b0b3e89..8f18bab0d6 100644
Binary files a/ui/shared/radioButtonGroup/__screenshots__/RadioButtonGroup.pw.tsx_default_radio-button-group-1.png and b/ui/shared/radioButtonGroup/__screenshots__/RadioButtonGroup.pw.tsx_default_radio-button-group-1.png differ
diff --git a/ui/shared/search/utils.ts b/ui/shared/search/utils.ts
index aa8a8cac09..ee49ca3595 100644
--- a/ui/shared/search/utils.ts
+++ b/ui/shared/search/utils.ts
@@ -1,9 +1,9 @@
-import type { SearchResultItem } from 'types/api/search';
 import type { MarketplaceAppOverview } from 'types/client/marketplace';
+import type { SearchResultItem } from 'types/client/search';
 
 import config from 'configs/app';
 
-export type ApiCategory = 'token' | 'nft' | 'address' | 'public_tag' | 'transaction' | 'block' | 'universal_profile'| 'user_operation' | 'blob';
+export type ApiCategory = 'token' | 'nft' | 'address' | 'public_tag' | 'transaction' | 'block' | 'universal_profile'| 'user_operation' | 'blob' | 'domain';
 export type Category = ApiCategory | 'app';
 
 export type ItemsCategoriesMap =
@@ -17,8 +17,8 @@ export type SearchResultAppItem = {
 
 export const searchCategories: Array<{id: Category; title: string }> = [
   { id: 'app', title: 'DApps' },
-  { id: 'token', title: 'Tokens (ERC-20)' },
-  { id: 'nft', title: 'NFTs (ERC-721 & 1155)' },
+  { id: 'token', title: `Tokens (${ config.chain.tokenStandard }-20)` },
+  { id: 'nft', title: `NFTs (${ config.chain.tokenStandard }-721 & 1155)` },
   { id: 'address', title: 'Addresses' },
   { id: 'public_tag', title: 'Public tags' },
   { id: 'transaction', title: 'Transactions' },
@@ -31,8 +31,17 @@ if (config.features.userOps.isEnabled) {
   searchCategories.push({ id: 'user_operation', title: 'User operations' });
 }
 
+if (config.features.dataAvailability.isEnabled) {
+  searchCategories.push({ id: 'blob', title: 'Blobs' });
+}
+
+if (config.features.nameService.isEnabled) {
+  searchCategories.unshift({ id: 'domain', title: 'Names' });
+}
+
 export const searchItemTitles: Record<Category, { itemTitle: string; itemTitleShort: string }> = {
   app: { itemTitle: 'DApp', itemTitleShort: 'App' },
+  domain: { itemTitle: 'Name', itemTitleShort: 'Name' },
   token: { itemTitle: 'Token', itemTitleShort: 'Token' },
   nft: { itemTitle: 'NFT', itemTitleShort: 'NFT' },
   address: { itemTitle: 'Address', itemTitleShort: 'Address' },
@@ -77,5 +86,8 @@ export function getItemCategory(item: SearchResultItem | SearchResultAppItem): C
     case 'blob': {
       return 'blob';
     }
+    case 'ens_domain': {
+      return 'domain';
+    }
   }
 }
diff --git a/ui/shared/solidityscanReport/SolidityscanReportButton.tsx b/ui/shared/solidityscanReport/SolidityscanReportButton.tsx
index d5c43f107f..c099ef70b6 100644
--- a/ui/shared/solidityscanReport/SolidityscanReportButton.tsx
+++ b/ui/shared/solidityscanReport/SolidityscanReportButton.tsx
@@ -1,46 +1,62 @@
-import { Button, Skeleton } from '@chakra-ui/react';
+import { Button, Spinner, Tooltip, useColorModeValue, chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import useIsMobile from 'lib/hooks/useIsMobile';
+import usePreventFocusAfterModalClosing from 'lib/hooks/usePreventFocusAfterModalClosing';
 import IconSvg from 'ui/shared/IconSvg';
 
 import useScoreLevelAndColor from './useScoreLevelAndColor';
 
 interface Props {
-  className?: string;
   score: number;
   isLoading?: boolean;
-  height?: string;
   onlyIcon?: boolean;
   onClick?: () => void;
+  label?: string | React.ReactElement;
+  isActive: boolean;
+  className?: string;
 }
 
 const SolidityscanReportButton = (
-  { className, score, isLoading, height = '32px', onlyIcon, onClick }: Props,
+  { score, isLoading, onlyIcon, onClick, label = 'Security score', isActive, className }: Props,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) => {
   const { scoreColor } = useScoreLevelAndColor(score);
+  const colorLoading = useColorModeValue('gray.300', 'gray.600');
+  const isMobile = useIsMobile();
+  const onFocusCapture = usePreventFocusAfterModalClosing();
 
   return (
-    <Skeleton isLoaded={ !isLoading } borderRadius="base">
+    <Tooltip label={ label } isDisabled={ isMobile } openDelay={ 100 } textAlign="center">
       <Button
-        ref={ ref }
         className={ className }
-        color={ scoreColor }
+        ref={ ref }
+        color={ isLoading ? colorLoading : scoreColor }
         size="sm"
         variant="outline"
         colorScheme="gray"
         onClick={ onClick }
+        isActive={ isActive }
         aria-label="SolidityScan score"
         fontWeight={ 500 }
         px="6px"
-        h={ height }
         flexShrink={ 0 }
+        columnGap={ 1 }
+        isDisabled={ isLoading }
+        _disabled={{
+          opacity: 1,
+          _hover: {
+            color: colorLoading,
+          },
+        }}
+        onFocusCapture={ onFocusCapture }
       >
-        <IconSvg name={ score < 80 ? 'score/score-not-ok' : 'score/score-ok' } boxSize={ 5 } mr={ onlyIcon ? 0 : 1 }/>
-        { onlyIcon ? null : score }
+        <IconSvg name={ score < 80 ? 'score/score-not-ok' : 'score/score-ok' } boxSize={ 5 }/>
+        { isLoading && <Spinner size="sm"/> }
+        { !isLoading && (onlyIcon ? null : score) }
       </Button>
-    </Skeleton>
+    </Tooltip>
   );
 };
 
-export default React.forwardRef(SolidityscanReportButton);
+export default chakra(React.forwardRef(SolidityscanReportButton));
diff --git a/ui/shared/solidityscanReport/SolidityscanReportDetails.tsx b/ui/shared/solidityscanReport/SolidityscanReportDetails.tsx
index 2d2a5cf140..5f6e1a5942 100644
--- a/ui/shared/solidityscanReport/SolidityscanReportDetails.tsx
+++ b/ui/shared/solidityscanReport/SolidityscanReportDetails.tsx
@@ -1,10 +1,10 @@
 import { Box, Flex, Text, Grid, useColorModeValue, chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import type { SolidityscanReport } from 'types/api/contract';
+import type { SolidityScanReportSeverityDistribution } from 'lib/solidityScan/schema';
 
 type DistributionItem = {
-  id: keyof SolidityscanReport['scan_report']['scan_summary']['issue_severity_distribution'];
+  id: keyof SolidityScanReportSeverityDistribution;
   name: string;
   color: string;
 }
@@ -19,29 +19,34 @@ const DISTRIBUTION_ITEMS: Array<DistributionItem> = [
 ];
 
 interface Props {
-  vulnerabilities: SolidityscanReport['scan_report']['scan_summary']['issue_severity_distribution'];
+  vulnerabilities: SolidityScanReportSeverityDistribution;
   vulnerabilitiesCount: number;
 }
 
 type ItemProps = {
   item: DistributionItem;
-  vulnerabilities: SolidityscanReport['scan_report']['scan_summary']['issue_severity_distribution'];
+  vulnerabilities: SolidityScanReportSeverityDistribution;
   vulnerabilitiesCount: number;
 }
 
 const SolidityScanReportItem = ({ item, vulnerabilities, vulnerabilitiesCount }: ItemProps) => {
   const bgBar = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
   const yetAnotherGrayColor = useColorModeValue('gray.400', 'gray.500');
+  const vulnerability = vulnerabilities[item.id];
+
+  if (vulnerability === undefined) {
+    return null;
+  }
 
   return (
     <>
       <Box w={ 3 } h={ 3 } bg={ item.color } borderRadius="6px" mr={ 2 }></Box>
       <Flex justifyContent="space-between" mr={ 3 }>
         <Text>{ item.name }</Text>
-        <Text color={ vulnerabilities[item.id] > 0 ? 'text' : yetAnotherGrayColor }>{ vulnerabilities[item.id] }</Text>
+        <Text color={ vulnerability > 0 ? 'text' : yetAnotherGrayColor }>{ vulnerabilities[item.id] }</Text>
       </Flex>
       <Box bg={ bgBar } h="10px" borderRadius="8px">
-        <Box bg={ item.color } w={ vulnerabilities[item.id] / vulnerabilitiesCount } h="10px" borderRadius="8px"/>
+        <Box bg={ item.color } w={ vulnerability / vulnerabilitiesCount } h="10px" borderRadius="8px"/>
       </Box>
     </>
   );
diff --git a/ui/shared/sort/ButtonDesktop.tsx b/ui/shared/sort/ButtonDesktop.tsx
new file mode 100644
index 0000000000..e127a5e9db
--- /dev/null
+++ b/ui/shared/sort/ButtonDesktop.tsx
@@ -0,0 +1,57 @@
+import {
+  Box,
+  useColorModeValue,
+  Button,
+  Skeleton,
+  chakra,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+type ButtonProps = {
+  isActive: boolean;
+  onClick: () => void;
+  isLoading?: boolean;
+  children: React.ReactNode;
+  className?: string;
+};
+
+const ButtonDesktop = ({ children, isActive, onClick, isLoading, className }: ButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {
+  const primaryColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
+  const secondaryColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
+
+  return (
+    <Skeleton isLoaded={ !isLoading }>
+      <Button
+        className={ className }
+        ref={ ref }
+        size="sm"
+        variant="outline"
+        onClick={ onClick }
+        color={ primaryColor }
+        fontWeight="600"
+        borderColor="transparent"
+        px={ 2 }
+        data-selected={ isActive }
+      >
+        <Box
+          as={ isActive ? 'div' : 'span' }
+          color={ isActive ? 'inherit' : secondaryColor }
+          fontWeight="400"
+          mr={ 1 }
+          transition={ isActive ? 'none' : 'inherit' }
+        >Sort by</Box>
+        { children }
+        <IconSvg
+          name="arrows/east-mini"
+          boxSize={ 5 }
+          ml={ 1 }
+          transform={ isActive ? 'rotate(90deg)' : 'rotate(-90deg)' }
+        />
+      </Button>
+    </Skeleton>
+  );
+};
+
+export default chakra(React.forwardRef(ButtonDesktop));
diff --git a/ui/shared/sort/ButtonMobile.tsx b/ui/shared/sort/ButtonMobile.tsx
new file mode 100644
index 0000000000..b05f5bf1ce
--- /dev/null
+++ b/ui/shared/sort/ButtonMobile.tsx
@@ -0,0 +1,35 @@
+import { IconButton, chakra, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+type Props = {
+  onClick: () => void;
+  isActive: boolean;
+  className?: string;
+  isLoading?: boolean;
+}
+
+const ButtonMobile = ({ onClick, isActive, className, isLoading }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+  if (isLoading) {
+    return <Skeleton className={ className } w="36px" h="32px" borderRadius="base"/>;
+  }
+
+  return (
+    <IconButton
+      ref={ ref }
+      icon={ <IconSvg name="arrows/up-down" boxSize={ 5 }/> }
+      aria-label="sort"
+      size="sm"
+      variant="outline"
+      colorScheme="gray"
+      minWidth="36px"
+      onClick={ onClick }
+      isActive={ isActive }
+      display="flex"
+      className={ className }
+    />
+  );
+};
+
+export default chakra(React.forwardRef(ButtonMobile));
diff --git a/ui/shared/sort/Option.tsx b/ui/shared/sort/Option.tsx
new file mode 100644
index 0000000000..c24eaada0b
--- /dev/null
+++ b/ui/shared/sort/Option.tsx
@@ -0,0 +1,47 @@
+import {
+  useRadio,
+  Box,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import type { useRadioGroup } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+export interface TOption<Sort extends string> {
+  id: Sort | undefined;
+  title: string;
+}
+
+type OptionProps = ReturnType<ReturnType<typeof useRadioGroup>['getRadioProps']>;
+
+const Option = (props: OptionProps) => {
+  const { getInputProps, getRadioProps } = useRadio(props);
+
+  const input = getInputProps();
+  const checkbox = getRadioProps();
+  const bgColorHover = useColorModeValue('blue.50', 'whiteAlpha.100');
+
+  return (
+    <Box
+      as="label"
+      px={ 4 }
+      py={ 2 }
+      cursor="pointer"
+      display="flex"
+      columnGap={ 2 }
+      alignItems="center"
+      _hover={{
+        bgColor: bgColorHover,
+      }}
+    >
+      <input { ...input }/>
+      <Box { ...checkbox }>
+        { props.children }
+      </Box>
+      { props.isChecked && <IconSvg name="check" boxSize={ 4 } color="blue.600"/> }
+    </Box>
+  );
+};
+
+export default Option;
diff --git a/ui/shared/sort/Sort.tsx b/ui/shared/sort/Sort.tsx
index 37b378abf4..76f22c9f86 100644
--- a/ui/shared/sort/Sort.tsx
+++ b/ui/shared/sort/Sort.tsx
@@ -1,58 +1,70 @@
 import {
-  chakra,
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuOptionGroup,
-  MenuItemOption,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
   useDisclosure,
+  useRadioGroup,
+  chakra,
 } from '@chakra-ui/react';
 import React from 'react';
 
-import SortButton from './SortButton';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import Popover from 'ui/shared/chakra/Popover';
 
-export interface Option<Sort extends string> {
-  title: string;
-  id: Sort | undefined;
-}
+import SortButtonDesktop from './ButtonDesktop';
+import SortButtonMobile from './ButtonMobile';
+import Option from './Option';
+import type { TOption } from './Option';
 
 interface Props<Sort extends string> {
-  options: Array<Option<Sort>>;
-  sort: Sort | undefined;
-  setSort: (value: Sort | undefined) => void;
+  name: string;
+  options: Array<TOption<Sort>>;
+  defaultValue?: Sort;
   isLoading?: boolean;
+  onChange: (value: Sort | undefined) => void;
 }
 
-const Sort = <Sort extends string>({ sort, setSort, options, isLoading }: Props<Sort>) => {
-  const { isOpen, onToggle } = useDisclosure();
+const Sort = <Sort extends string>({ name, options, isLoading, onChange, defaultValue }: Props<Sort>) => {
+  const isMobile = useIsMobile(false);
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  const handleChange = (value: Sort) => {
+    onChange(value);
+    onClose();
+  };
+
+  const { value, getRootProps, getRadioProps } = useRadioGroup({
+    name,
+    defaultValue,
+    onChange: handleChange,
+  });
 
-  const setSortingFromMenu = React.useCallback((val: string | Array<string>) => {
-    const value = val as Sort | Array<Sort>;
-    setSort(Array.isArray(value) ? value[0] : value);
-  }, [ setSort ]);
+  const root = getRootProps();
 
   return (
-    <Menu>
-      <MenuButton as="div">
-        <SortButton
-          isActive={ isOpen || Boolean(sort) }
-          onClick={ onToggle }
-          isLoading={ isLoading }
-        />
-      </MenuButton>
-      <MenuList minWidth="240px" zIndex="popover">
-        <MenuOptionGroup value={ sort } title="Sort by" type="radio" onChange={ setSortingFromMenu }>
-          { options.map((option) => (
-            <MenuItemOption
-              key={ option.id || 'default' }
-              value={ option.id }
-            >
-              { option.title }
-            </MenuItemOption>
-          )) }
-        </MenuOptionGroup>
-      </MenuList>
-    </Menu>
+    <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
+      <PopoverTrigger>
+        { isMobile ? (
+          <SortButtonMobile isActive={ isOpen || Boolean(value) } onClick={ onToggle } isLoading={ isLoading }/>
+        ) : (
+          <SortButtonDesktop isActive={ isOpen } isLoading={ isLoading } onClick={ onToggle }>
+            { options.find((option: TOption<Sort>) => option.id === value || (!option.id && !value))?.title }
+          </SortButtonDesktop>
+        ) }
+      </PopoverTrigger>
+      <PopoverContent w="fit-content" minW="165px">
+        <PopoverBody { ...root } py={ 2 } px={ 0 } display="flex" flexDir="column">
+          { options.map((option, index) => {
+            const radio = getRadioProps({ value: option.id });
+            return (
+              <Option key={ index } { ...radio } isChecked={ radio.isChecked || (!option.id && !value) }>
+                { option.title }
+              </Option>
+            );
+          }) }
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
   );
 };
 
diff --git a/ui/shared/sort/SortButton.tsx b/ui/shared/sort/SortButton.tsx
deleted file mode 100644
index 903bb1fcec..0000000000
--- a/ui/shared/sort/SortButton.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { IconButton, chakra, Skeleton } from '@chakra-ui/react';
-import React from 'react';
-
-import IconSvg from 'ui/shared/IconSvg';
-
-type Props = {
-  onClick: () => void;
-  isActive: boolean;
-  className?: string;
-  isLoading?: boolean;
-}
-
-const SortButton = ({ onClick, isActive, className, isLoading }: Props) => {
-  if (isLoading) {
-    return <Skeleton className={ className } w="36px" h="32px" borderRadius="base"/>;
-  }
-
-  return (
-    <IconButton
-      icon={ <IconSvg name="arrows/up-down" boxSize={ 5 }/> }
-      aria-label="sort"
-      size="sm"
-      variant="outline"
-      colorScheme="gray-dark"
-      minWidth="36px"
-      onClick={ onClick }
-      isActive={ isActive }
-      display="flex"
-      className={ className }
-    />
-  );
-};
-
-export default chakra(SortButton);
diff --git a/ui/shared/sort/getNextSortOrder.tsx b/ui/shared/sort/getNextSortOrder.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/ui/shared/sort/getNextSortValue.ts b/ui/shared/sort/getNextSortValue.ts
index 9e29662971..a6cfcc4f21 100644
--- a/ui/shared/sort/getNextSortValue.ts
+++ b/ui/shared/sort/getNextSortValue.ts
@@ -3,8 +3,17 @@ export default function getNextSortValue<SortField extends string, Sort extends
 ) {
   return (prevValue: Sort | undefined) => {
     const sequence = sortSequence[field];
-    const curIndex = sequence.findIndex((sort) => sort === prevValue);
-    const nextIndex = curIndex + 1 > sequence.length - 1 ? 0 : curIndex + 1;
-    return sequence[nextIndex];
+    return getNextValueFromSequence(sequence, prevValue);
   };
 }
+
+export function getNextValueFromSequence<T>(sequence: Array<T>, prevValue: T) {
+  const curIndex = sequence.findIndex((val) => val === prevValue);
+  const nextIndex = curIndex + 1 > sequence.length - 1 ? 0 : curIndex + 1;
+  return sequence[nextIndex];
+}
+
+// asc desc undefined
+type Order = 'asc' | 'desc' | undefined;
+const sequence: Array<Order> = [ 'desc', 'asc', undefined ];
+export const getNextOrderValue = (getNextValueFromSequence<Order>).bind(undefined, sequence);
diff --git a/ui/shared/sort/getSortParamsFromQuery.ts b/ui/shared/sort/getSortParamsFromQuery.ts
new file mode 100644
index 0000000000..fd094917a9
--- /dev/null
+++ b/ui/shared/sort/getSortParamsFromQuery.ts
@@ -0,0 +1,23 @@
+import type { Query } from 'nextjs-routes';
+
+import getQueryParamString from 'lib/router/getQueryParamString';
+
+export default function getSortParamsFromQuery<T>(query: Query, sortOptions: Record<string, Array<string | undefined>>) {
+  if (!query.sort || !query.order) {
+    return undefined;
+  }
+
+  const sortStr = getQueryParamString(query.sort);
+
+  if (!Object.keys(sortOptions).includes(sortStr)) {
+    return undefined;
+  }
+
+  const orderStr = getQueryParamString(query.order);
+
+  if (!sortOptions[sortStr].includes(orderStr)) {
+    return undefined;
+  }
+
+  return ({ sort: sortStr, order: orderStr } as T);
+}
diff --git a/ui/shared/sort/getSortValueFromQuery.ts b/ui/shared/sort/getSortValueFromQuery.ts
index 9e8f823c60..efb07981ce 100644
--- a/ui/shared/sort/getSortValueFromQuery.ts
+++ b/ui/shared/sort/getSortValueFromQuery.ts
@@ -1,8 +1,8 @@
 import type { Query } from 'nextjs-routes';
 
-import type { Option } from 'ui/shared/sort/Sort';
+import type { TOption } from 'ui/shared/sort/Option';
 
-export default function getSortValueFromQuery<SortValue extends string>(query: Query, sortOptions: Array<Option<SortValue>>) {
+export default function getSortValueFromQuery<SortValue extends string>(query: Query, sortOptions: Array<TOption<SortValue>>) {
   if (!query.sort || !query.order) {
     return undefined;
   }
diff --git a/ui/shared/stats/StatsWidget.pw.tsx b/ui/shared/stats/StatsWidget.pw.tsx
new file mode 100644
index 0000000000..cc9fad8da4
--- /dev/null
+++ b/ui/shared/stats/StatsWidget.pw.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { test, expect } from 'playwright/lib';
+
+import StatsWidget from './StatsWidget';
+
+test.use({ viewport: { width: 300, height: 100 } });
+
+test('with positive diff +@dark-mode', async({ render }) => {
+  const component = await render(
+    <StatsWidget
+      label="Verified contracts"
+      hint="Contracts that have been verified"
+      value="1 000 000"
+      diff={ 4200 }
+      diffFormatted="4 200"
+    />,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+// according to current logic we don't show diff if it's negative
+test('with negative diff', async({ render }) => {
+  const component = await render(
+    <StatsWidget
+      label="Verified contracts"
+      hint="Contracts that have been verified"
+      value="1,000,000"
+      diff={ -4200 }
+    />,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('loading state', async({ render }) => {
+  const component = await render(
+    <StatsWidget
+      label="Verified contracts"
+      hint="Contracts that have been verified"
+      value="1,000,000"
+      isLoading
+    />,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('with period only', async({ render }) => {
+  const component = await render(
+    <StatsWidget
+      label="Verified contracts"
+      hint="Contracts that have been verified"
+      value="1,000,000"
+      period="1h"
+    />,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/shared/stats/StatsWidget.tsx b/ui/shared/stats/StatsWidget.tsx
index f95220bac9..156daff197 100644
--- a/ui/shared/stats/StatsWidget.tsx
+++ b/ui/shared/stats/StatsWidget.tsx
@@ -1,67 +1,130 @@
-import { Box, Flex, Text, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import { Box, Flex, Text, Skeleton, useColorModeValue, chakra } from '@chakra-ui/react';
+import NextLink from 'next/link';
 import React from 'react';
 
+import type { Route } from 'nextjs-routes';
+
 import Hint from 'ui/shared/Hint';
+import IconSvg, { type IconName } from 'ui/shared/IconSvg';
+import TruncatedValue from 'ui/shared/TruncatedValue';
 
-type Props = {
+export type Props = {
+  className?: string;
   label: string;
-  value: string;
-  hint?: string;
+  value: string | React.ReactNode;
+  valuePrefix?: string;
+  valuePostfix?: string;
+  hint?: string | React.ReactNode;
   isLoading?: boolean;
   diff?: string | number;
   diffFormatted?: string;
   diffPeriod?: '24h';
+  period?: '1h' | '24h';
+  href?: Route;
+  icon?: IconName;
 }
 
-const StatsWidget = ({ label, value, isLoading, hint, diff, diffPeriod = '24h', diffFormatted }: Props) => {
-  const bgColor = useColorModeValue('blue.50', 'blue.800');
+const Container = ({ href, children }: { href?: Route; children: JSX.Element }) => {
+  if (href) {
+    return (
+      <NextLink href={ href } passHref legacyBehavior>
+        { children }
+      </NextLink>
+    );
+  }
+
+  return children;
+};
+
+const StatsWidget = ({
+  className,
+  icon,
+  label,
+  value,
+  valuePrefix,
+  valuePostfix,
+  isLoading,
+  hint,
+  diff,
+  diffPeriod = '24h',
+  diffFormatted,
+  period,
+  href,
+}: Props) => {
+  const bgColor = useColorModeValue('gray.50', 'whiteAlpha.100');
   const skeletonBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
   const hintColor = useColorModeValue('gray.600', 'gray.400');
 
   return (
-    <Flex
-      alignItems="flex-start"
-      bgColor={ isLoading ? skeletonBgColor : bgColor }
-      px={ 3 }
-      py={{ base: 2, lg: 3 }}
-      borderRadius="md"
-      justifyContent="space-between"
-      columnGap={ 3 }
-    >
-      <Box>
-        <Skeleton
-          isLoaded={ !isLoading }
-          color="text_secondary"
-          fontSize="xs"
-          w="fit-content"
-        >
-          <span>{ label }</span>
-        </Skeleton>
-        <Skeleton
-          isLoaded={ !isLoading }
-          w="fit-content"
-          display="flex"
-          alignItems="baseline"
-          mt={ 1 }
-        >
-          <Text fontWeight={ 500 } fontSize="lg" lineHeight={ 6 }>{ value }</Text>
-          { diff && Number(diff) > 0 && (
-            <>
-              <Text fontWeight={ 500 } ml={ 2 } mr={ 1 } fontSize="lg" lineHeight={ 6 } color="green.500">
-                +{ diffFormatted || Number(diff).toLocaleString() }
-              </Text>
-              <Text variant="secondary" fontSize="sm">({ diffPeriod })</Text>
-            </>
-          ) }
-        </Skeleton>
-      </Box>
-      { hint && (
-        <Skeleton isLoaded={ !isLoading } alignSelf="center" borderRadius="base">
-          <Hint label={ hint } boxSize={ 6 } color={ hintColor }/>
-        </Skeleton>
-      ) }
-    </Flex>
+    <Container href={ !isLoading ? href : undefined }>
+      <Flex
+        className={ className }
+        alignItems="center"
+        bgColor={ isLoading ? skeletonBgColor : bgColor }
+        p={ 3 }
+        borderRadius="base"
+        justifyContent="space-between"
+        columnGap={ 2 }
+        { ...(href && !isLoading ? {
+          as: 'a',
+          href,
+        } : {}) }
+      >
+        { icon && (
+          <IconSvg
+            name={ icon }
+            p={ 2 }
+            boxSize="40px"
+            isLoading={ isLoading }
+            borderRadius="base"
+            display={{ base: 'none', lg: 'block' }}
+            flexShrink={ 0 }
+          />
+        ) }
+        <Box w={{ base: '100%', lg: icon ? 'calc(100% - 48px)' : '100%' }}>
+          <Skeleton
+            isLoaded={ !isLoading }
+            color="text_secondary"
+            fontSize="xs"
+            lineHeight="16px"
+            w="fit-content"
+          >
+            <h2>{ label }</h2>
+          </Skeleton>
+          <Skeleton
+            isLoaded={ !isLoading }
+            display="flex"
+            alignItems="baseline"
+            fontWeight={ 500 }
+            fontSize="lg"
+            lineHeight={ 6 }
+          >
+            { valuePrefix && <chakra.span whiteSpace="pre">{ valuePrefix }</chakra.span> }
+            { typeof value === 'string' ? (
+              <TruncatedValue isLoading={ isLoading } value={ value }/>
+            ) : (
+              value
+            ) }
+            { valuePostfix && <chakra.span whiteSpace="pre">{ valuePostfix }</chakra.span> }
+            { diff && Number(diff) > 0 && (
+              <>
+                <Text ml={ 2 } mr={ 1 } color="green.500">
+                  +{ diffFormatted || Number(diff).toLocaleString() }
+                </Text>
+                <Text variant="secondary" fontSize="sm">({ diffPeriod })</Text>
+              </>
+            ) }
+            { period && <Text variant="secondary" fontSize="xs" fontWeight={ 400 } ml={ 1 }>({ period })</Text> }
+          </Skeleton>
+        </Box>
+        { typeof hint === 'string' ? (
+          <Skeleton isLoaded={ !isLoading } alignSelf="center" borderRadius="base">
+            <Hint label={ hint } boxSize={ 6 } color={ hintColor }/>
+          </Skeleton>
+        ) : hint }
+      </Flex>
+    </Container>
   );
 };
 
-export default StatsWidget;
+export default chakra(StatsWidget);
diff --git a/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_dark-color-mode_with-positive-diff-dark-mode-1.png b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_dark-color-mode_with-positive-diff-dark-mode-1.png
new file mode 100644
index 0000000000..2555a4d6b1
Binary files /dev/null and b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_dark-color-mode_with-positive-diff-dark-mode-1.png differ
diff --git a/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_loading-state-1.png b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_loading-state-1.png
new file mode 100644
index 0000000000..e1f7bd8279
Binary files /dev/null and b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_loading-state-1.png differ
diff --git a/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-negative-diff-1.png b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-negative-diff-1.png
new file mode 100644
index 0000000000..c1ff32c324
Binary files /dev/null and b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-negative-diff-1.png differ
diff --git a/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-period-only-1.png b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-period-only-1.png
new file mode 100644
index 0000000000..48342ff201
Binary files /dev/null and b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-period-only-1.png differ
diff --git a/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-positive-diff-dark-mode-1.png b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-positive-diff-dark-mode-1.png
new file mode 100644
index 0000000000..84da508e51
Binary files /dev/null and b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-positive-diff-dark-mode-1.png differ
diff --git a/ui/shared/statusTag/ArbitrumL2MessageStatus.tsx b/ui/shared/statusTag/ArbitrumL2MessageStatus.tsx
new file mode 100644
index 0000000000..85bc6795ff
--- /dev/null
+++ b/ui/shared/statusTag/ArbitrumL2MessageStatus.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+import type { ArbitrumL2MessagesItem } from 'types/api/arbitrumL2';
+
+import type { StatusTagType } from './StatusTag';
+import StatusTag from './StatusTag';
+
+export interface Props {
+  status: ArbitrumL2MessagesItem['status'];
+  isLoading?: boolean;
+}
+
+const ArbitrumL2MessageStatus = ({ status, isLoading }: Props) => {
+  let type: StatusTagType;
+  let text: string;
+
+  switch (status) {
+    case 'relayed': {
+      type = 'ok';
+      text = 'Relayed';
+      break;
+    }
+    case 'confirmed': {
+      type = 'ok';
+      text = 'Ready for relay';
+      break;
+    }
+    case 'sent': {
+      type = 'pending';
+      text = 'Waiting';
+      break;
+    }
+    case 'initiated': {
+      type = 'pending';
+      text = 'Pending';
+      break;
+    }
+    default:
+      type = 'pending';
+      text = status;
+      break;
+  }
+
+  return <StatusTag type={ type } text={ text } isLoading={ isLoading }/>;
+};
+
+export default ArbitrumL2MessageStatus;
diff --git a/ui/shared/statusTag/ArbitrumL2TxnBatchStatus.tsx b/ui/shared/statusTag/ArbitrumL2TxnBatchStatus.tsx
new file mode 100644
index 0000000000..81536cdf5e
--- /dev/null
+++ b/ui/shared/statusTag/ArbitrumL2TxnBatchStatus.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2';
+
+import type { StatusTagType } from './StatusTag';
+import StatusTag from './StatusTag';
+
+export interface Props {
+  status: ArbitrumL2TxnBatchesItem['commitment_transaction']['status'];
+  isLoading?: boolean;
+}
+
+const ArbitrumL2TxnBatchStatus = ({ status, isLoading }: Props) => {
+  let type: StatusTagType;
+
+  switch (status) {
+    case 'finalized':
+      type = 'ok';
+      break;
+    default:
+      type = 'pending';
+      break;
+  }
+
+  return <StatusTag type={ type } text={ status } isLoading={ isLoading }/>;
+};
+
+export default ArbitrumL2TxnBatchStatus;
diff --git a/ui/shared/statusTag/StatusTag.pw.tsx b/ui/shared/statusTag/StatusTag.pw.tsx
index d289c54b5c..0aa9e64356 100644
--- a/ui/shared/statusTag/StatusTag.pw.tsx
+++ b/ui/shared/statusTag/StatusTag.pw.tsx
@@ -1,37 +1,20 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import StatusTag from './StatusTag';
 
-test('ok status', async({ page, mount }) => {
-  await mount(
-    <TestApp>
-      <StatusTag type="ok" text="Test"/>
-    </TestApp>,
-  );
-
+test('ok status', async({ page, render }) => {
+  await render(<StatusTag type="ok" text="Test"/>);
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 75, height: 30 } });
 });
 
-test('error status', async({ page, mount }) => {
-  await mount(
-    <TestApp>
-      <StatusTag type="error" text="Test"/>
-    </TestApp>,
-  );
-
+test('error status', async({ page, render }) => {
+  await render(<StatusTag type="error" text="Test"/>);
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 75, height: 30 } });
-
 });
 
-test('pending status', async({ page, mount }) => {
-  await mount(
-    <TestApp>
-      <StatusTag type="pending" text="Test"/>
-    </TestApp>,
-  );
-
+test('pending status', async({ page, render }) => {
+  await render(<StatusTag type="pending" text="Test"/>);
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 75, height: 30 } });
 });
diff --git a/ui/shared/statusTag/StatusTag.tsx b/ui/shared/statusTag/StatusTag.tsx
index fb9d59a97d..7a01aa5a5c 100644
--- a/ui/shared/statusTag/StatusTag.tsx
+++ b/ui/shared/statusTag/StatusTag.tsx
@@ -1,6 +1,7 @@
-import { TagLabel, Tooltip } from '@chakra-ui/react';
+import { TagLabel, Tooltip, chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import capitalizeFirstLetter from 'lib/capitalizeFirstLetter';
 import Tag from 'ui/shared/chakra/Tag';
 import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
@@ -12,12 +13,15 @@ export interface Props {
   text: string;
   errorText?: string | null;
   isLoading?: boolean;
+  className?: string;
 }
 
-const StatusTag = ({ type, text, errorText, isLoading }: Props) => {
+const StatusTag = ({ type, text, errorText, isLoading, className }: Props) => {
   let icon: IconName;
   let colorScheme;
 
+  const capitalizedText = capitalizeFirstLetter(text);
+
   switch (type) {
     case 'ok':
       icon = 'status/success';
@@ -29,20 +33,18 @@ const StatusTag = ({ type, text, errorText, isLoading }: Props) => {
       break;
     case 'pending':
       icon = 'status/pending';
-      // FIXME: it's not gray on mockups
-      // need to implement new color scheme or redefine colors here
       colorScheme = 'gray';
       break;
   }
 
   return (
     <Tooltip label={ errorText }>
-      <Tag colorScheme={ colorScheme } display="flex" isLoading={ isLoading } >
-        <IconSvg boxSize={ 2.5 } name={ icon } mr={ 2 } flexShrink={ 0 }/>
-        <TagLabel display="block">{ text }</TagLabel>
+      <Tag colorScheme={ colorScheme } display="flex" isLoading={ isLoading } className={ className }>
+        <IconSvg boxSize={ 2.5 } name={ icon } mr={ 1 } flexShrink={ 0 }/>
+        <TagLabel display="block">{ capitalizedText }</TagLabel>
       </Tag>
     </Tooltip>
   );
 };
 
-export default StatusTag;
+export default chakra(StatusTag);
diff --git a/ui/shared/statusTag/ValidatorStabilityStatus.tsx b/ui/shared/statusTag/ValidatorStabilityStatus.tsx
new file mode 100644
index 0000000000..93b1bb771f
--- /dev/null
+++ b/ui/shared/statusTag/ValidatorStabilityStatus.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import type { ValidatorStability } from 'types/api/validators';
+
+import StatusTag from './StatusTag';
+
+interface Props {
+  state: ValidatorStability['state'];
+  isLoading?: boolean;
+}
+
+const ValidatorStabilityStatus = ({ state, isLoading }: Props) => {
+  switch (state) {
+    case 'active':
+      return <StatusTag type="ok" text="Active" isLoading={ isLoading }/>;
+    case 'probation':
+      return <StatusTag type="pending" text="Probation" isLoading={ isLoading }/>;
+    case 'inactive':
+      return <StatusTag type="error" text="Inactive" isLoading={ isLoading }/>;
+  }
+};
+
+export default React.memo(ValidatorStabilityStatus);
diff --git a/ui/shared/statusTag/ValidatorStatus.tsx b/ui/shared/statusTag/ValidatorStatus.tsx
deleted file mode 100644
index 4386b55af5..0000000000
--- a/ui/shared/statusTag/ValidatorStatus.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-import type { Validator } from 'types/api/validators';
-
-import StatusTag from './StatusTag';
-
-interface Props {
-  state: Validator['state'];
-  isLoading?: boolean;
-}
-
-const ValidatorStatus = ({ state, isLoading }: Props) => {
-  switch (state) {
-    case 'active':
-      return <StatusTag type="ok" text="Active" isLoading={ isLoading }/>;
-    case 'probation':
-      return <StatusTag type="pending" text="Probation" isLoading={ isLoading }/>;
-    case 'inactive':
-      return <StatusTag type="error" text="Inactive" isLoading={ isLoading }/>;
-  }
-};
-
-export default React.memo(ValidatorStatus);
diff --git a/ui/shared/tagGroupSelect/TagGroupSelect.pw.tsx b/ui/shared/tagGroupSelect/TagGroupSelect.pw.tsx
new file mode 100644
index 0000000000..4ccc12110c
--- /dev/null
+++ b/ui/shared/tagGroupSelect/TagGroupSelect.pw.tsx
@@ -0,0 +1,22 @@
+import _noop from 'lodash/noop';
+import React from 'react';
+
+import { test, expect } from 'playwright/lib';
+
+import TagGroupSelect from './TagGroupSelect';
+
+test.use({ viewport: { width: 480, height: 140 } });
+
+test('base view +@dark-mode', async({ render }) => {
+  const component = await render(
+    <TagGroupSelect
+      items={ [ { id: '1', title: 'Option 1' }, { id: '2', title: 'Option 2' }, { id: 'duck', title: 'Cute little duck' } ] }
+      value="duck"
+      onChange={ _noop }
+    />,
+  );
+
+  await component.getByText('Option 2').hover();
+
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/shared/tagGroupSelect/TagGroupSelect.tsx b/ui/shared/tagGroupSelect/TagGroupSelect.tsx
new file mode 100644
index 0000000000..4bf53b2ce1
--- /dev/null
+++ b/ui/shared/tagGroupSelect/TagGroupSelect.tsx
@@ -0,0 +1,56 @@
+import { HStack, Tag } from '@chakra-ui/react';
+import React from 'react';
+
+type Props<T extends string> = {
+  items: Array<{ id: T; title: string }>;
+} & (
+  {
+    value: T;
+    onChange: (value: T) => void;
+    isMulti?: false;
+  } | {
+    value: Array<T>;
+    onChange: (value: Array<T>) => void;
+    isMulti: true;
+  }
+)
+
+const TagGroupSelect = <T extends string>({ items, value, isMulti, onChange }: Props<T>) => {
+  const onItemClick = React.useCallback((event: React.SyntheticEvent) => {
+    const itemValue = (event.currentTarget as HTMLDivElement).getAttribute('data-id') as T;
+    if (isMulti) {
+      let newValue;
+      if (value.includes(itemValue)) {
+        newValue = value.filter(i => i !== itemValue);
+      } else {
+        newValue = [ ...value, itemValue ];
+      }
+      onChange(newValue);
+    } else {
+      onChange(itemValue);
+    }
+  }, [ isMulti, onChange, value ]);
+
+  return (
+    <HStack>
+      { items.map(item => {
+        const isSelected = isMulti ? value.includes(item.id) : value === item.id;
+        return (
+          <Tag
+            variant="select"
+            key={ item.id }
+            data-id={ item.id }
+            data-selected={ isSelected }
+            fontWeight={ 500 }
+            cursor="pointer"
+            onClick={ onItemClick }
+          >
+            { item.title }
+          </Tag>
+        );
+      }) }
+    </HStack>
+  );
+};
+
+export default TagGroupSelect;
diff --git a/ui/shared/tagGroupSelect/__screenshots__/TagGroupSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/shared/tagGroupSelect/__screenshots__/TagGroupSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..4684f4fcdc
Binary files /dev/null and b/ui/shared/tagGroupSelect/__screenshots__/TagGroupSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/shared/tagGroupSelect/__screenshots__/TagGroupSelect.pw.tsx_default_base-view-dark-mode-1.png b/ui/shared/tagGroupSelect/__screenshots__/TagGroupSelect.pw.tsx_default_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..b6a14300fc
Binary files /dev/null and b/ui/shared/tagGroupSelect/__screenshots__/TagGroupSelect.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/shared/tx/TxFee.pw.tsx b/ui/shared/tx/TxFee.pw.tsx
new file mode 100644
index 0000000000..8ccd98ade6
--- /dev/null
+++ b/ui/shared/tx/TxFee.pw.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import * as txMock from 'mocks/txs/tx';
+import { test, expect } from 'playwright/lib';
+
+import TxFee from './TxFee';
+
+test.use({ viewport: { width: 300, height: 100 } });
+
+test('base view', async({ render }) => {
+  const component = await render(<TxFee tx={ txMock.base } withUsd/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('no usd value', async({ render }) => {
+  const component = await render(<TxFee tx={ txMock.base } accuracy={ 3 }/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('celo gas token', async({ render, mockAssetResponse }) => {
+  await mockAssetResponse(txMock.celoTxn.celo?.gas_token?.icon_url as string, './playwright/mocks/image_svg.svg');
+  const component = await render(<TxFee tx={ txMock.celoTxn } withUsd accuracyUsd={ 3 }/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('stability token', async({ render, mockAssetResponse }) => {
+  await mockAssetResponse(txMock.stabilityTx.stability_fee?.token.icon_url as string, './playwright/mocks/image_svg.svg');
+  const component = await render(<TxFee tx={ txMock.stabilityTx } withUsd accuracyUsd={ 3 }/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/shared/tx/TxFee.tsx b/ui/shared/tx/TxFee.tsx
new file mode 100644
index 0000000000..01fa1eb240
--- /dev/null
+++ b/ui/shared/tx/TxFee.tsx
@@ -0,0 +1,77 @@
+import { chakra, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { Transaction } from 'types/api/transaction';
+
+import config from 'configs/app';
+import getCurrencyValue from 'lib/getCurrencyValue';
+import { currencyUnits } from 'lib/units';
+import CurrencyValue from 'ui/shared/CurrencyValue';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+
+interface Props {
+  className?: string;
+  isLoading?: boolean;
+  tx: Transaction;
+  withCurrency?: boolean;
+  withUsd?: boolean;
+  accuracy?: number;
+  accuracyUsd?: number;
+}
+
+const TxFee = ({ className, tx, accuracy, accuracyUsd, isLoading, withCurrency = true, withUsd }: Props) => {
+
+  if (tx.celo?.gas_token) {
+    const token = tx.celo.gas_token;
+    const { valueStr, usd } = getCurrencyValue({
+      value: tx.fee.value || '0',
+      exchangeRate: token.exchange_rate,
+      decimals: token.decimals,
+      accuracy,
+      accuracyUsd,
+    });
+    return (
+      <Skeleton whiteSpace="pre-wrap" wordBreak="break-word" isLoaded={ !isLoading } display="flex" flexWrap="wrap" className={ className }>
+        <span>{ valueStr } </span>
+        <TokenEntity token={ token } noCopy onlySymbol w="auto" ml={ 1 }/>
+        { usd && withUsd && <chakra.span color="text_secondary"> (${ usd })</chakra.span> }
+      </Skeleton>
+    );
+  }
+
+  if (tx.stability_fee) {
+    const token = tx.stability_fee.token;
+    const { valueStr, usd } = getCurrencyValue({
+      value: tx.stability_fee.total_fee,
+      exchangeRate: token.exchange_rate,
+      decimals: token.decimals,
+      accuracy,
+      accuracyUsd,
+    });
+
+    return (
+      <Skeleton whiteSpace="pre" isLoaded={ !isLoading } display="flex" className={ className }>
+        <span>{ valueStr } </span>
+        { valueStr !== '0' && <TokenEntity token={ token } noCopy onlySymbol w="auto" ml={ 1 }/> }
+        { usd && withUsd && <chakra.span color="text_secondary"> (${ usd })</chakra.span> }
+      </Skeleton>
+    );
+  }
+
+  const showCurrency = withCurrency && !config.UI.views.tx.hiddenFields?.fee_currency;
+
+  return (
+    <CurrencyValue
+      value={ tx.fee.value }
+      currency={ showCurrency ? currencyUnits.ether : '' }
+      exchangeRate={ withUsd ? tx.exchange_rate : null }
+      accuracy={ accuracy }
+      accuracyUsd={ accuracyUsd }
+      flexWrap="wrap"
+      className={ className }
+      isLoading={ isLoading }
+    />
+  );
+};
+
+export default React.memo(chakra(TxFee));
diff --git a/ui/shared/tx/TxFeeStability.tsx b/ui/shared/tx/TxFeeStability.tsx
deleted file mode 100644
index d1c10c0d9a..0000000000
--- a/ui/shared/tx/TxFeeStability.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Skeleton, chakra } from '@chakra-ui/react';
-import React from 'react';
-
-import type { Transaction } from 'types/api/transaction';
-import type { ExcludeUndefined } from 'types/utils';
-
-import getCurrencyValue from 'lib/getCurrencyValue';
-import TokenEntity from 'ui/shared/entities/token/TokenEntity';
-
-interface Props {
-  data: ExcludeUndefined<Transaction['stability_fee']>;
-  isLoading?: boolean;
-  hideUsd?: boolean;
-  accuracy?: number;
-  className?: string;
-}
-
-const TxFeeStability = ({ data, isLoading, hideUsd, accuracy, className }: Props) => {
-
-  const { valueStr, usd } = getCurrencyValue({
-    value: data.total_fee,
-    exchangeRate: data.token.exchange_rate,
-    decimals: data.token.decimals,
-    accuracy,
-  });
-
-  return (
-    <Skeleton whiteSpace="pre" isLoaded={ !isLoading } display="flex" className={ className }>
-      <span>{ valueStr } </span>
-      { valueStr !== '0' && <TokenEntity token={ data.token } noCopy onlySymbol w="auto" ml={ 1 }/> }
-      { usd && !hideUsd && <chakra.span color="text_secondary"> (${ usd })</chakra.span> }
-    </Skeleton>
-  );
-};
-
-export default React.memo(chakra(TxFeeStability));
diff --git a/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_base-view-1.png b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_base-view-1.png
new file mode 100644
index 0000000000..c96be42fd5
Binary files /dev/null and b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_base-view-1.png differ
diff --git a/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_celo-gas-token-1.png b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_celo-gas-token-1.png
new file mode 100644
index 0000000000..801e03bc5c
Binary files /dev/null and b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_celo-gas-token-1.png differ
diff --git a/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_no-usd-value-1.png b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_no-usd-value-1.png
new file mode 100644
index 0000000000..5011b6a77e
Binary files /dev/null and b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_no-usd-value-1.png differ
diff --git a/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_stability-token-1.png b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_stability-token-1.png
new file mode 100644
index 0000000000..fcea676ba9
Binary files /dev/null and b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_stability-token-1.png differ
diff --git a/ui/shared/tx/interpretation/TxInterpretation.tsx b/ui/shared/tx/interpretation/TxInterpretation.tsx
index 3f71f9f3e5..479bcee08b 100644
--- a/ui/shared/tx/interpretation/TxInterpretation.tsx
+++ b/ui/shared/tx/interpretation/TxInterpretation.tsx
@@ -2,6 +2,7 @@ import { Skeleton, Tooltip, chakra } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
+import type { AddressParam } from 'types/api/addressParams';
 import type {
   TxInterpretationSummary,
   TxInterpretationVariable,
@@ -23,12 +24,15 @@ import { extractVariables, getStringChunks, fillStringVariables, checkSummary, N
 type Props = {
   summary?: TxInterpretationSummary;
   isLoading?: boolean;
+  addressDataMap?: Record<string, AddressParam>;
   className?: string;
 }
 
 type NonStringTxInterpretationVariable = Exclude<TxInterpretationVariable, TxInterpretationVariableString>
 
-const TxInterpretationElementByType = ({ variable }: { variable?: NonStringTxInterpretationVariable }) => {
+const TxInterpretationElementByType = (
+  { variable, addressDataMap }: { variable?: NonStringTxInterpretationVariable; addressDataMap?: Record<string, AddressParam> },
+) => {
   const onAddressClick = React.useCallback(() => {
     mixpanel.logEvent(mixpanel.EventTypes.TX_INTERPRETATION_INTERACTION, { Type: 'Address click' });
   }, []);
@@ -51,7 +55,8 @@ const TxInterpretationElementByType = ({ variable }: { variable?: NonStringTxInt
       return (
         <chakra.span display="inline-block" verticalAlign="top" _notFirst={{ marginLeft: 1 }}>
           <AddressEntity
-            address={ value }
+            address={ addressDataMap?.[value.hash] || value }
+            icon={{ marginRight: 1 }}
             truncation="constant"
             onClick={ onAddressClick }
             whiteSpace="initial"
@@ -64,6 +69,7 @@ const TxInterpretationElementByType = ({ variable }: { variable?: NonStringTxInt
         <chakra.span display="inline-block" verticalAlign="top" _notFirst={{ marginLeft: 1 }}>
           <TokenEntity
             token={ value }
+            icon={{ marginRight: 1 }}
             onlySymbol
             noCopy
             width="fit-content"
@@ -79,7 +85,8 @@ const TxInterpretationElementByType = ({ variable }: { variable?: NonStringTxInt
         return (
           <chakra.span display="inline-block" verticalAlign="top" _notFirst={{ marginLeft: 1 }}>
             <EnsEntity
-              name={ value }
+              domain={ value }
+              icon={{ marginRight: 1 }}
               width="fit-content"
               _notFirst={{ marginLeft: 1 }}
               whiteSpace="initial"
@@ -122,7 +129,7 @@ const TxInterpretationElementByType = ({ variable }: { variable?: NonStringTxInt
   }
 };
 
-const TxInterpretation = ({ summary, isLoading, className }: Props) => {
+const TxInterpretation = ({ summary, isLoading, addressDataMap, className }: Props) => {
   if (!summary) {
     return null;
   }
@@ -142,7 +149,7 @@ const TxInterpretation = ({ summary, isLoading, className }: Props) => {
   return (
     <Skeleton isLoaded={ !isLoading } className={ className } fontWeight={ 500 } whiteSpace="pre-wrap" >
       <Tooltip label="Transaction summary">
-        <IconSvg name="lightning" boxSize={ 5 } color="text_secondary" mr={ 2 } verticalAlign="text-top"/>
+        <IconSvg name="lightning" boxSize={ 5 } color="text_secondary" mr={ 1 } verticalAlign="text-top"/>
       </Tooltip>
       { chunks.map((chunk, index) => {
         return (
@@ -151,7 +158,12 @@ const TxInterpretation = ({ summary, isLoading, className }: Props) => {
             { index < variablesNames.length && (
               variablesNames[index] === NATIVE_COIN_SYMBOL_VAR_NAME ?
                 <chakra.span>{ currencyUnits.ether + ' ' }</chakra.span> :
-                <TxInterpretationElementByType variable={ variables[variablesNames[index]] as NonStringTxInterpretationVariable }/>
+                (
+                  <TxInterpretationElementByType
+                    variable={ variables[variablesNames[index]] as NonStringTxInterpretationVariable }
+                    addressDataMap={ addressDataMap }
+                  />
+                )
             ) }
           </chakra.span>
         );
diff --git a/ui/shared/verificationSteps/VerificationStep.tsx b/ui/shared/verificationSteps/VerificationStep.tsx
index 17a7c98632..0111928788 100644
--- a/ui/shared/verificationSteps/VerificationStep.tsx
+++ b/ui/shared/verificationSteps/VerificationStep.tsx
@@ -9,14 +9,20 @@ type Props = {
   step: Step;
   isLast: boolean;
   isPassed: boolean;
+  isPending?: boolean;
 }
 
-const VerificationStep = ({ step, isLast, isPassed }: Props) => {
-  const stepColor = isPassed ? 'green.500' : 'text_secondary';
+const VerificationStep = ({ step, isLast, isPassed, isPending }: Props) => {
+  let stepColor = 'text_secondary';
+  if (isPending) {
+    stepColor = 'yellow.500';
+  } else if (isPassed) {
+    stepColor = 'green.500';
+  }
 
   return (
     <HStack gap={ 2 } color={ stepColor }>
-      <IconSvg name={ isPassed ? 'finalized' : 'unfinalized' } boxSize={ 5 }/>
+      <IconSvg name={ isPassed ? 'verification-steps/finalized' : 'verification-steps/unfinalized' } boxSize={ 5 }/>
       <Box color={ stepColor }>{ typeof step === 'string' ? step : step.content }</Box>
       { !isLast && <IconSvg name="arrows/east" boxSize={ 5 }/> }
     </HStack>
diff --git a/ui/shared/verificationSteps/VerificationSteps.pw.tsx b/ui/shared/verificationSteps/VerificationSteps.pw.tsx
index 9447631099..3c83438f8f 100644
--- a/ui/shared/verificationSteps/VerificationSteps.pw.tsx
+++ b/ui/shared/verificationSteps/VerificationSteps.pw.tsx
@@ -1,33 +1,24 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { ZKEVM_L2_TX_STATUSES } from 'types/api/transaction';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import VerificationSteps from './VerificationSteps';
 
-test('first step +@mobile +@dark-mode', async({ mount }) => {
-
-  const component = await mount(
-    <TestApp>
-      <Box p={ 10 }>
-        <VerificationSteps currentStep={ ZKEVM_L2_TX_STATUSES[0] } steps={ ZKEVM_L2_TX_STATUSES }/>
-      </Box>
-    </TestApp>,
+test('first step +@mobile +@dark-mode', async({ render }) => {
+  const component = await render(
+    <Box p={ 10 }>
+      <VerificationSteps currentStep={ ZKEVM_L2_TX_STATUSES[0] } steps={ ZKEVM_L2_TX_STATUSES }/>
+    </Box>,
   );
-
   await expect(component).toHaveScreenshot();
 });
 
-test('second status', async({ mount }) => {
-
-  const component = await mount(
-    <TestApp>
-      <VerificationSteps currentStep={ ZKEVM_L2_TX_STATUSES[1] } steps={ ZKEVM_L2_TX_STATUSES }/>
-    </TestApp>,
+test('second status', async({ render }) => {
+  const component = await render(
+    <VerificationSteps currentStep={ ZKEVM_L2_TX_STATUSES[1] } steps={ ZKEVM_L2_TX_STATUSES }/>,
   );
-
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/shared/verificationSteps/VerificationSteps.tsx b/ui/shared/verificationSteps/VerificationSteps.tsx
index a7a6c506d8..889a09d370 100644
--- a/ui/shared/verificationSteps/VerificationSteps.tsx
+++ b/ui/shared/verificationSteps/VerificationSteps.tsx
@@ -7,13 +7,14 @@ import VerificationStep from './VerificationStep';
 
 export interface Props {
   currentStep: string;
+  currentStepPending?: boolean;
   steps: Array<Step>;
   isLoading?: boolean;
   rightSlot?: React.ReactNode;
   className?: string;
 }
 
-const VerificationSteps = ({ currentStep, steps, isLoading, rightSlot, className }: Props) => {
+const VerificationSteps = ({ currentStep, currentStepPending, steps, isLoading, rightSlot, className }: Props) => {
   const currentStepIndex = steps.findIndex((step) => {
     const label = typeof step === 'string' ? step : step.label;
     return label === currentStep;
@@ -34,6 +35,7 @@ const VerificationSteps = ({ currentStep, steps, isLoading, rightSlot, className
           step={ step }
           isLast={ index === steps.length - 1 && !rightSlot }
           isPassed={ index <= currentStepIndex }
+          isPending={ index === currentStepIndex && currentStepPending }
         />
       )) }
       { rightSlot }
diff --git a/ui/snippets/footer/Footer.pw.tsx b/ui/snippets/footer/Footer.pw.tsx
index a3dc45f5c4..82d7c8ede4 100644
--- a/ui/snippets/footer/Footer.pw.tsx
+++ b/ui/snippets/footer/Footer.pw.tsx
@@ -1,55 +1,28 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import type { WalletProvider } from 'types/web3';
-
-import { buildExternalAssetFilePath } from 'configs/app/utils';
 import { FOOTER_LINKS } from 'mocks/config/footerLinks';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import * as app from 'playwright/utils/app';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import Footer from './Footer';
 
-const FOOTER_LINKS_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_FOOTER_LINKS', 'https://localhost:3000/footer-links.json') || '';
-
-const BACKEND_VERSION_API_URL = buildApiUrl('config_backend_version');
-const INDEXING_ALERT_API_URL = buildApiUrl('homepage_indexing_status');
-
-base.describe('with custom links, max cols', () => {
-  const test = base.extend({
-    context: contextWithEnvs([
-      { name: 'NEXT_PUBLIC_FOOTER_LINKS', value: FOOTER_LINKS_URL },
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ]) as any,
-  });
-
-  test.beforeEach(async({ page, mount }) => {
-    await page.route(FOOTER_LINKS_URL, (route) => {
-      return route.fulfill({
-        body: JSON.stringify(FOOTER_LINKS),
-      });
+const FOOTER_LINKS_URL = 'https://localhost:3000/footer-links.json';
+
+test.describe('with custom links, max cols', () => {
+  test.beforeEach(async({ render, mockApiResponse, mockConfigResponse, injectMetaMaskProvider, mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_FOOTER_LINKS', FOOTER_LINKS_URL ],
+    ]);
+    await mockConfigResponse('NEXT_PUBLIC_FOOTER_LINKS', FOOTER_LINKS_URL, JSON.stringify(FOOTER_LINKS));
+    await injectMetaMaskProvider();
+    await mockApiResponse('homepage_indexing_status', {
+      finished_indexing: false,
+      finished_indexing_blocks: false,
+      indexed_internal_transactions_ratio: '0.1',
+      indexed_blocks_ratio: '0.1',
     });
 
-    await page.evaluate(() => {
-      window.ethereum = {
-        isMetaMask: true,
-        _events: {},
-      } as WalletProvider;
-    });
-
-    await page.route(INDEXING_ALERT_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ finished_indexing: false, indexed_internal_transactions_ratio: 0.1 }),
-    }));
-
-    await mount(
-      <TestApp>
-        <Footer/>
-      </TestApp>,
-    );
+    await render(<Footer/>);
   });
 
   test('+@mobile +@dark-mode', async({ page }) => {
@@ -57,7 +30,7 @@ base.describe('with custom links, max cols', () => {
   });
 
   test.describe('screen xl', () => {
-    test.use({ viewport: configs.viewport.xl });
+    test.use({ viewport: pwConfig.viewport.xl });
 
     test('', async({ page }) => {
       await expect(page).toHaveScreenshot();
@@ -65,74 +38,35 @@ base.describe('with custom links, max cols', () => {
   });
 });
 
-base.describe('with custom links, min cols', () => {
-  const test = base.extend({
-    context: contextWithEnvs([
-      { name: 'NEXT_PUBLIC_FOOTER_LINKS', value: FOOTER_LINKS_URL },
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ]) as any,
-  });
-
-  test('base view +@dark-mode +@mobile', async({ mount, page }) => {
-    await page.route(FOOTER_LINKS_URL, (route) => {
-      return route.fulfill({
-        body: JSON.stringify([ FOOTER_LINKS[0] ]),
-      });
-    });
-
-    await mount(
-      <TestApp>
-        <Footer/>
-      </TestApp>,
-    );
-
+test.describe('with custom links, min cols', () => {
+  test('base view +@dark-mode +@mobile', async({ render, page, mockConfigResponse, mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_FOOTER_LINKS', FOOTER_LINKS_URL ],
+    ]);
+    await mockConfigResponse('NEXT_PUBLIC_FOOTER_LINKS', FOOTER_LINKS_URL, JSON.stringify([ FOOTER_LINKS[0] ]));
+    await render(<Footer/>);
     await expect(page).toHaveScreenshot();
   });
 });
 
-base.describe('without custom links', () => {
-  base('base view +@dark-mode +@mobile', async({ mount, page }) => {
-    await page.evaluate(() => {
-      window.ethereum = {
-        isMetaMask: true,
-        _events: {},
-      } as WalletProvider;
-    });
-    await page.route(BACKEND_VERSION_API_URL, (route) => {
-      return route.fulfill({
-        body: JSON.stringify({
-          backend_version: 'v5.2.0-beta.+commit.1ce1a355',
-        }),
-      });
-    });
-
-    await mount(
-      <TestApp>
-        <Footer/>
-      </TestApp>,
-    );
-
+test.describe('without custom links', () => {
+  test('base view +@dark-mode +@mobile', async({ render, page, injectMetaMaskProvider, mockApiResponse }) => {
+    await injectMetaMaskProvider();
+    await mockApiResponse('config_backend_version', { backend_version: 'v5.2.0-beta.+commit.1ce1a355' });
+    await render(<Footer/>);
     await expect(page).toHaveScreenshot();
   });
 
-  base('with indexing alert +@dark-mode +@mobile', async({ mount, page }) => {
-    await page.evaluate(() => {
-      window.ethereum = {
-        providers: [ { isMetaMask: true, _events: {} } ],
-      } as WalletProvider;
+  test('with indexing alert +@dark-mode +@mobile', async({ render, injectMetaMaskProvider, mockApiResponse }) => {
+    await injectMetaMaskProvider();
+    await mockApiResponse('homepage_indexing_status', {
+      finished_indexing: false,
+      finished_indexing_blocks: false,
+      indexed_internal_transactions_ratio: '0.1',
+      indexed_blocks_ratio: '0.1',
     });
 
-    await page.route(INDEXING_ALERT_API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({ finished_indexing: false, indexed_internal_transactions_ratio: 0.1 }),
-    }));
-
-    const component = await mount(
-      <TestApp>
-        <Footer/>
-      </TestApp>,
-    );
-
+    const component = await render(<Footer/>);
     await expect(component).toHaveScreenshot();
   });
 });
diff --git a/ui/snippets/footer/Footer.tsx b/ui/snippets/footer/Footer.tsx
index efcb8da8b5..f5f810783b 100644
--- a/ui/snippets/footer/Footer.tsx
+++ b/ui/snippets/footer/Footer.tsx
@@ -1,5 +1,5 @@
-import type { GridProps } from '@chakra-ui/react';
-import { Box, Grid, Flex, Text, Link, VStack, Skeleton } from '@chakra-ui/react';
+import type { GridProps, HTMLChakraProps } from '@chakra-ui/react';
+import { Box, Grid, Flex, Text, Link, VStack, Skeleton, useColorModeValue } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
@@ -9,6 +9,10 @@ import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
 import useApiQuery from 'lib/api/useApiQuery';
 import useFetch from 'lib/hooks/useFetch';
+import useIssueUrl from 'lib/hooks/useIssueUrl';
+import { copy } from 'lib/html-entities';
+import IconSvg from 'ui/shared/IconSvg';
+import { CONTENT_MAX_WIDTH } from 'ui/shared/layout/utils';
 import NetworkAddToWallet from 'ui/shared/NetworkAddToWallet';
 
 import FooterLinkItem from './FooterLinkItem';
@@ -28,7 +32,22 @@ const Footer = () => {
     },
   });
   const apiVersionUrl = getApiVersionUrl(backendVersionData?.backend_version);
+  const issueUrl = useIssueUrl(backendVersionData?.backend_version);
+  const logoColor = useColorModeValue('blue.600', 'white');
+
   const BLOCKSCOUT_LINKS = [
+    {
+      icon: 'edit' as const,
+      iconSize: '16px',
+      text: 'Submit an issue',
+      url: issueUrl,
+    },
+    {
+      icon: 'social/canny' as const,
+      iconSize: '20px',
+      text: 'Feature request',
+      url: 'https://blockscout.canny.io/feature-requests',
+    },
     {
       icon: 'social/git' as const,
       iconSize: '18px',
@@ -36,7 +55,7 @@ const Footer = () => {
       url: 'https://github.com/lukso-network/',
     },
     {
-      icon: 'social/tweet' as const,
+      icon: 'social/twitter' as const,
       iconSize: '18px',
       text: 'Twitter',
       url: 'https://x.com/lukso_io/',
@@ -47,6 +66,18 @@ const Footer = () => {
       text: 'Discord',
       url: 'https://discord.gg/lukso',
     },
+    {
+      icon: 'brands/blockscout' as const,
+      iconSize: '18px',
+      text: 'All chains',
+      url: 'https://www.blockscout.com/chains-and-projects',
+    },
+    {
+      icon: 'donate' as const,
+      iconSize: '20px',
+      text: 'Donate',
+      url: 'https://github.com/sponsors/blockscout',
+    },
   ];
 
   const frontendLink = (() => {
@@ -93,109 +124,131 @@ const Footer = () => {
     return (
       <Box gridArea={ gridArea }>
         <Link fontSize="xs" href="https://lukso.network/">lukso.network</Link>
+        <Flex columnGap={ 2 } fontSize="xs" lineHeight={ 5 } alignItems="center" color="text">
+          <span>Made with</span>
+          <Link href="https://www.blockscout.com" isExternal display="inline-flex" color={ logoColor } _hover={{ color: logoColor }}>
+            <IconSvg
+              name="networks/logo-placeholder"
+              width="80px"
+              height={ 4 }
+            />
+          </Link>
+        </Flex>
         <Text mt={ 3 } fontSize="xs">
           Execution explorer is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for LUKSO Networks.
           It is the <Link fontSize="xs" href="https://www.blockscout.com/">Blockscout</Link> explorer fork.
         </Text>
-        <VStack spacing={ 1 } mt={ 6 } alignItems="start">
+        <Box mt={ 6 } alignItems="start" fontSize="xs" lineHeight={ 5 }>
           { apiVersionUrl && (
-            <Text fontSize="xs">
+            <Text>
               Backend: <Link href={ apiVersionUrl } target="_blank">{ backendVersionData?.backend_version }</Link>
             </Text>
           ) }
           { frontendLink && (
-            <Text fontSize="xs">
+            <Text>
               Frontend: { frontendLink }
             </Text>
           ) }
-        </VStack>
+          <Text>
+            Copyright { copy } Blockscout Limited 2023-{ (new Date()).getFullYear() }
+          </Text>
+        </Box>
       </Box>
     );
-  }, [ apiVersionUrl, backendVersionData?.backend_version, frontendLink ]);
+  }, [ apiVersionUrl, backendVersionData?.backend_version, frontendLink, logoColor ]);
 
-  const containerProps: GridProps = {
+  const containerProps: HTMLChakraProps<'div'> = {
     as: 'footer',
-    px: { base: 4, lg: 12 },
-    py: { base: 4, lg: 9 },
-    borderTop: '1px solid',
-    borderColor: 'divider',
+    borderTopWidth: '1px',
+    borderTopColor: 'solid',
+  };
+
+  const contentProps: GridProps = {
+    px: { base: 4, lg: config.UI.navigation.layout === 'horizontal' ? 6 : 12, '2xl': 6 },
+    py: { base: 4, lg: 8 },
     gridTemplateColumns: { base: '1fr', lg: 'minmax(auto, 470px) 1fr' },
     columnGap: { lg: '32px', xl: '100px' },
+    maxW: `${ CONTENT_MAX_WIDTH }px`,
+    m: '0 auto',
   };
 
   if (config.UI.footer.links) {
     return (
-      <Grid { ...containerProps }>
-        <div>
-          { renderNetworkInfo() }
-          { renderProjectInfo() }
-        </div>
-
-        <Grid
-          gap={{ base: 6, lg: colNum === MAX_LINKS_COLUMNS + 1 ? 2 : 8, xl: 12 }}
-          gridTemplateColumns={{
-            base: 'repeat(auto-fill, 160px)',
-            lg: `repeat(${ colNum }, 135px)`,
-            xl: `repeat(${ colNum }, 160px)`,
-          }}
-          justifyContent={{ lg: 'flex-end' }}
-          mt={{ base: 8, lg: 0 }}
-        >
-          {
-            ([
-              { title: 'Blockscout', links: BLOCKSCOUT_LINKS },
-              ...(linksData || []),
-            ])
-              .slice(0, colNum)
-              .map(linkGroup => (
-                <Box key={ linkGroup.title }>
-                  <Skeleton fontWeight={ 500 } mb={ 3 } display="inline-block" isLoaded={ !isPlaceholderData }>{ linkGroup.title }</Skeleton>
-                  <VStack spacing={ 1 } alignItems="start">
-                    { linkGroup.links.map(link => <FooterLinkItem { ...link } key={ link.text } isLoading={ isPlaceholderData }/>) }
-                  </VStack>
-                </Box>
-              ))
-          }
+      <Box { ...containerProps }>
+        <Grid { ...contentProps }>
+          <div>
+            { renderNetworkInfo() }
+            { renderProjectInfo() }
+          </div>
+
+          <Grid
+            gap={{ base: 6, lg: colNum === MAX_LINKS_COLUMNS + 1 ? 2 : 8, xl: 12 }}
+            gridTemplateColumns={{
+              base: 'repeat(auto-fill, 160px)',
+              lg: `repeat(${ colNum }, 135px)`,
+              xl: `repeat(${ colNum }, 160px)`,
+            }}
+            justifyContent={{ lg: 'flex-end' }}
+            mt={{ base: 8, lg: 0 }}
+          >
+            {
+              ([
+                { title: 'Blockscout', links: BLOCKSCOUT_LINKS },
+                ...(linksData || []),
+              ])
+                .slice(0, colNum)
+                .map(linkGroup => (
+                  <Box key={ linkGroup.title }>
+                    <Skeleton fontWeight={ 500 } mb={ 3 } display="inline-block" isLoaded={ !isPlaceholderData }>{ linkGroup.title }</Skeleton>
+                    <VStack spacing={ 1 } alignItems="start">
+                      { linkGroup.links.map(link => <FooterLinkItem { ...link } key={ link.text } isLoading={ isPlaceholderData }/>) }
+                    </VStack>
+                  </Box>
+                ))
+            }
+          </Grid>
         </Grid>
-      </Grid>
+      </Box>
     );
   }
 
   return (
-    <Grid
-      { ...containerProps }
-      gridTemplateAreas={{
-        lg: `
+    <Box { ...containerProps }>
+      <Grid
+        { ...contentProps }
+        gridTemplateAreas={{
+          lg: `
           "network links-top"
           "info links-bottom"
         `,
-      }}
-    >
-
-      { renderNetworkInfo({ lg: 'network' }) }
-      { renderProjectInfo({ lg: 'info' }) }
-
-      <Grid
-        gridArea={{ lg: 'links-bottom' }}
-        gap={ 1 }
-        gridTemplateColumns={{
-          base: 'repeat(auto-fill, 160px)',
-          lg: 'repeat(3, 160px)',
-          xl: 'repeat(4, 160px)',
-        }}
-        gridTemplateRows={{
-          base: 'auto',
-          lg: 'repeat(3, auto)',
-          xl: 'repeat(2, auto)',
         }}
-        gridAutoFlow={{ base: 'row', lg: 'column' }}
-        alignContent="start"
-        justifyContent={{ lg: 'flex-end' }}
-        mt={{ base: 8, lg: 0 }}
       >
-        { BLOCKSCOUT_LINKS.map(link => <FooterLinkItem { ...link } key={ link.text }/>) }
+
+        { renderNetworkInfo({ lg: 'network' }) }
+        { renderProjectInfo({ lg: 'info' }) }
+
+        <Grid
+          gridArea={{ lg: 'links-bottom' }}
+          gap={ 1 }
+          gridTemplateColumns={{
+            base: 'repeat(auto-fill, 160px)',
+            lg: 'repeat(3, 160px)',
+            xl: 'repeat(4, 160px)',
+          }}
+          gridTemplateRows={{
+            base: 'auto',
+            lg: 'repeat(3, auto)',
+            xl: 'repeat(2, auto)',
+          }}
+          gridAutoFlow={{ base: 'row', lg: 'column' }}
+          alignContent="start"
+          justifyContent={{ lg: 'flex-end' }}
+          mt={{ base: 8, lg: 0 }}
+        >
+          { BLOCKSCOUT_LINKS.map(link => <FooterLinkItem { ...link } key={ link.text }/>) }
+        </Grid>
       </Grid>
-    </Grid>
+    </Box>
   );
 };
 
diff --git a/ui/snippets/footer/IntTxsIndexingStatus.tsx b/ui/snippets/footer/IntTxsIndexingStatus.tsx
index fbf533f968..6e3e9350db 100644
--- a/ui/snippets/footer/IntTxsIndexingStatus.tsx
+++ b/ui/snippets/footer/IntTxsIndexingStatus.tsx
@@ -1,4 +1,4 @@
-import { IconButton, Popover, PopoverTrigger, PopoverContent, PopoverBody, Flex, Text, useColorModeValue } from '@chakra-ui/react';
+import { IconButton, PopoverTrigger, PopoverContent, PopoverBody, Flex, Text, useColorModeValue } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import React from 'react';
 
@@ -9,6 +9,7 @@ import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 import { apos, nbsp, ndash } from 'lib/html-entities';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
+import Popover from 'ui/shared/chakra/Popover';
 import IconSvg from 'ui/shared/IconSvg';
 
 const IntTxsIndexingStatus = () => {
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-max-cols-mobile-dark-mode-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-max-cols-mobile-dark-mode-1.png
index 0fc5ef3bc9..cfab3a85f0 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-max-cols-mobile-dark-mode-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-max-cols-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png
index ca21b198bd..bdc1060a74 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_without-custom-links-base-view-dark-mode-mobile-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_without-custom-links-base-view-dark-mode-mobile-1.png
index 8e7ccaa17f..6094e3a85e 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_without-custom-links-base-view-dark-mode-mobile-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_without-custom-links-base-view-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png
index 30756d332a..a35ded533b 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_dark-color-mode_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-mobile-dark-mode-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-mobile-dark-mode-1.png
index 4ed0980dbd..c036ceaff1 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-mobile-dark-mode-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-screen-xl-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-screen-xl-1.png
index 252ba0ea84..0b3ae86f08 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-screen-xl-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-max-cols-screen-xl-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png
index a8b838f541..61f69790da 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_without-custom-links-base-view-dark-mode-mobile-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_without-custom-links-base-view-dark-mode-mobile-1.png
index aada6b053a..35203be2dc 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_without-custom-links-base-view-dark-mode-mobile-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_without-custom-links-base-view-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png
index 5681129337..20615b6334 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_default_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_with-custom-links-max-cols-mobile-dark-mode-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_with-custom-links-max-cols-mobile-dark-mode-1.png
index edab8c4966..42d36ce45a 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_with-custom-links-max-cols-mobile-dark-mode-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_with-custom-links-max-cols-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png
index 483b96df6c..7579d9db10 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_with-custom-links-min-cols-base-view-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_without-custom-links-base-view-dark-mode-mobile-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_without-custom-links-base-view-dark-mode-mobile-1.png
index ba074854d2..50d8272a2b 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_without-custom-links-base-view-dark-mode-mobile-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_without-custom-links-base-view-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png
index c519578200..8791dccd84 100644
Binary files a/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png and b/ui/snippets/footer/__screenshots__/Footer.pw.tsx_mobile_without-custom-links-with-indexing-alert-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/header/Burger.pw.tsx b/ui/snippets/header/Burger.pw.tsx
index 9f64412b9b..ebda473be5 100644
--- a/ui/snippets/header/Burger.pw.tsx
+++ b/ui/snippets/header/Burger.pw.tsx
@@ -1,20 +1,16 @@
-import { test as base, expect, devices } from '@playwright/experimental-ct-react';
+import type { BrowserContext } from '@playwright/test';
 import React from 'react';
 
-import { buildExternalAssetFilePath } from 'configs/app/utils';
 import { FEATURED_NETWORKS_MOCK } from 'mocks/config/network';
-import authFixture from 'playwright/fixtures/auth';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import createContextWithStorage from 'playwright/fixtures/createContextWithStorage';
-import TestApp from 'playwright/TestApp';
-import * as app from 'playwright/utils/app';
+import { contextWithAuth } from 'playwright/fixtures/auth';
+import { test, expect, devices } from 'playwright/lib';
 
 import Burger from './Burger';
 
-const FEATURED_NETWORKS_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_FEATURED_NETWORKS', 'https://localhost:3000/featured-networks.json') || '';
+const FEATURED_NETWORKS_URL = 'https://localhost:3000/featured-networks.json';
 const LOGO_URL = 'https://localhost:3000/my-logo.png';
 
-base.use({ viewport: devices['iPhone 13 Pro'].viewport });
+test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
 const hooksConfig = {
   router: {
@@ -24,32 +20,16 @@ const hooksConfig = {
   },
 };
 
-const test = base.extend({
-  context: contextWithEnvs([
-    { name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
+test.beforeEach(async({ mockEnvs, mockConfigResponse, mockAssetResponse }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL ],
+  ]);
+  await mockConfigResponse('NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL, FEATURED_NETWORKS_MOCK);
+  await mockAssetResponse(LOGO_URL, './playwright/mocks/image_s.jpg');
 });
 
-test('base view', async({ mount, page }) => {
-  await page.route(FEATURED_NETWORKS_URL, (route) => {
-    return route.fulfill({
-      body: FEATURED_NETWORKS_MOCK,
-    });
-  });
-  await page.route(LOGO_URL, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
-
-  const component = await mount(
-    <TestApp>
-      <Burger/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('base view', async({ render, page }) => {
+  const component = await render(<Burger/>, { hooksConfig });
 
   await component.locator('div[aria-label="Menu button"]').click();
   await expect(page.locator('.chakra-modal__content-container')).toHaveScreenshot();
@@ -61,25 +41,8 @@ test('base view', async({ mount, page }) => {
 test.describe('dark mode', () => {
   test.use({ colorScheme: 'dark' });
 
-  test('base view', async({ mount, page }) => {
-    await page.route(FEATURED_NETWORKS_URL, (route) => {
-      return route.fulfill({
-        body: FEATURED_NETWORKS_MOCK,
-      });
-    });
-    await page.route(LOGO_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-
-    const component = await mount(
-      <TestApp>
-        <Burger/>
-      </TestApp>,
-      { hooksConfig },
-    );
+  test('base view', async({ render, page }) => {
+    const component = await render(<Burger/>, { hooksConfig });
 
     await component.locator('div[aria-label="Menu button"]').click();
     await expect(page).toHaveScreenshot();
@@ -89,39 +52,23 @@ test.describe('dark mode', () => {
   });
 });
 
-test('submenu', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <Burger/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('submenu', async({ render, page }) => {
+  const component = await render(<Burger/>, { hooksConfig });
 
   await component.locator('div[aria-label="Menu button"]').click();
   await page.locator('div[aria-label="Blockchain link group"]').click();
   await expect(page).toHaveScreenshot();
 });
 
-test.describe('auth', () => {
-  const extendedTest = base.extend({
-    context: async({ browser }, use) => {
-      const context = await createContextWithStorage(browser, [
-        { name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
-      ]);
-      authFixture(context);
-      use(context);
-    },
-  });
+const authTest = test.extend<{ context: BrowserContext }>({
+  context: contextWithAuth,
+});
 
-  extendedTest.use({ viewport: { width: devices['iPhone 13 Pro'].viewport.width, height: 800 } });
+authTest.describe('auth', () => {
+  authTest.use({ viewport: { width: devices['iPhone 13 Pro'].viewport.width, height: 800 } });
 
-  extendedTest('base view', async({ mount, page }) => {
-    const component = await mount(
-      <TestApp>
-        <Burger/>
-      </TestApp>,
-      { hooksConfig },
-    );
+  authTest('base view', async({ render, page }) => {
+    const component = await render(<Burger/>, { hooksConfig });
 
     await component.locator('div[aria-label="Menu button"]').click();
     await expect(page).toHaveScreenshot();
diff --git a/ui/snippets/header/Burger.tsx b/ui/snippets/header/Burger.tsx
index 8d97220ec5..2a1d4e91a5 100644
--- a/ui/snippets/header/Burger.tsx
+++ b/ui/snippets/header/Burger.tsx
@@ -3,7 +3,8 @@ import React from 'react';
 
 import config from 'configs/app';
 import IconSvg from 'ui/shared/IconSvg';
-import NavigationMobile from 'ui/snippets/navigation/NavigationMobile';
+import NavigationMobile from 'ui/snippets/navigation/mobile/NavigationMobile';
+import TestnetBadge from 'ui/snippets/navigation/TestnetBadge';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import NetworkMenuButton from 'ui/snippets/networkMenu/NetworkMenuButton';
 import NetworkMenuContentMobile from 'ui/snippets/networkMenu/NetworkMenuContentMobile';
@@ -45,12 +46,12 @@ const Burger = ({ isMarketplaceAppPage }: Props) => {
         autoFocus={ false }
       >
         <DrawerOverlay/>
-        <DrawerContent maxWidth="260px">
+        <DrawerContent maxWidth="330px">
           <DrawerBody p={ 6 } display="flex" flexDirection="column">
-            { config.chain.isTestnet && <IconSvg name="testnet" h="14px" w="37px" color="red.400" alignSelf="flex-start"/> }
+            <TestnetBadge alignSelf="flex-start"/>
             <Flex alignItems="center" justifyContent="space-between">
               <NetworkLogo onClick={ handleNetworkLogoClick }/>
-              { config.UI.sidebar.featuredNetworks ? (
+              { config.UI.navigation.featuredNetworks ? (
                 <NetworkMenuButton
                   isMobile
                   isActive={ networkMenu.isOpen }
diff --git a/ui/snippets/header/HeaderAlert.tsx b/ui/snippets/header/HeaderAlert.tsx
index fe861d57d6..8fdb609ed1 100644
--- a/ui/snippets/header/HeaderAlert.tsx
+++ b/ui/snippets/header/HeaderAlert.tsx
@@ -6,7 +6,7 @@ import MaintenanceAlert from './alerts/MaintenanceAlert';
 
 const HeaderAlert = () => {
   return (
-    <Flex flexDir="column" rowGap={ 3 } mb={ 6 } _empty={{ display: 'none' }}>
+    <Flex flexDir="column" rowGap={ 3 } mb={ 3 } _empty={{ display: 'none' }}>
       <MaintenanceAlert/>
       <IndexingBlocksAlert/>
     </Flex>
diff --git a/ui/snippets/header/HeaderDesktop.pw.tsx b/ui/snippets/header/HeaderDesktop.pw.tsx
index cb56f9e4ee..be197237e5 100644
--- a/ui/snippets/header/HeaderDesktop.pw.tsx
+++ b/ui/snippets/header/HeaderDesktop.pw.tsx
@@ -1,16 +1,10 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import HeaderDesktop from './HeaderDesktop';
 
-test('default view +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <HeaderDesktop/>
-    </TestApp>,
-  );
-
+test('default view +@dark-mode', async({ render }) => {
+  const component = await render(<HeaderDesktop/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/snippets/header/HeaderDesktop.tsx b/ui/snippets/header/HeaderDesktop.tsx
index 5da9566f03..43dcb38d8a 100644
--- a/ui/snippets/header/HeaderDesktop.tsx
+++ b/ui/snippets/header/HeaderDesktop.tsx
@@ -36,10 +36,12 @@ const HeaderDesktop = ({ renderSearchBar, isMarketplaceAppPage }: Props) => {
       <Box width="100%">
         { searchBar }
       </Box>
-      <Box display="flex">
-        { config.features.account.isEnabled && <ProfileMenuDesktop/> }
-        { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop/> }
-      </Box>
+      { config.UI.navigation.layout === 'vertical' && (
+        <Box display="flex">
+          { config.features.account.isEnabled && <ProfileMenuDesktop/> }
+          { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop/> }
+        </Box>
+      ) }
     </HStack>
   );
 };
diff --git a/ui/snippets/header/HeaderMobile.pw.tsx b/ui/snippets/header/HeaderMobile.pw.tsx
index 90c10640dc..f1658dfa72 100644
--- a/ui/snippets/header/HeaderMobile.pw.tsx
+++ b/ui/snippets/header/HeaderMobile.pw.tsx
@@ -1,18 +1,12 @@
-import { test, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect, devices } from 'playwright/lib';
 
 import HeaderMobile from './HeaderMobile';
 
 test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-test('default view +@dark-mode', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <HeaderMobile/>
-    </TestApp>,
-  );
-
+test('default view +@dark-mode', async({ render, page }) => {
+  await render(<HeaderMobile/>);
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 150 } });
 });
diff --git a/ui/snippets/header/HeaderMobile.tsx b/ui/snippets/header/HeaderMobile.tsx
index 570e0d157c..796971f795 100644
--- a/ui/snippets/header/HeaderMobile.tsx
+++ b/ui/snippets/header/HeaderMobile.tsx
@@ -11,16 +11,12 @@ import WalletMenuMobile from 'ui/snippets/walletMenu/WalletMenuMobile';
 
 import Burger from './Burger';
 
-const LOGO_IMAGE_PROPS = {
-  margin: '0 auto',
-};
-
 type Props = {
-  isHomePage?: boolean;
+  hideSearchBar?: boolean;
   renderSearchBar?: () => React.ReactNode;
 }
 
-const HeaderMobile = ({ isHomePage, renderSearchBar }: Props) => {
+const HeaderMobile = ({ hideSearchBar, renderSearchBar }: Props) => {
   const bgColor = useColorModeValue('white', 'black');
   const scrollDirection = useScrollDirection();
   const { ref, inView } = useInView({ threshold: 1 });
@@ -40,24 +36,23 @@ const HeaderMobile = ({ isHomePage, renderSearchBar }: Props) => {
     >
       <Flex
         as="header"
-        paddingX={ 4 }
+        paddingX={ 3 }
         paddingY={ 2 }
         bgColor={ bgColor }
         width="100%"
         alignItems="center"
-        justifyContent="space-between"
         transitionProperty="box-shadow"
         transitionDuration="slow"
         boxShadow={ !inView && scrollDirection === 'down' ? 'md' : 'none' }
       >
         <Burger/>
-        <NetworkLogo imageProps={ LOGO_IMAGE_PROPS }/>
+        <NetworkLogo ml={ 2 } mr="auto"/>
         <Flex columnGap={ 2 }>
           { config.features.account.isEnabled ? <ProfileMenuMobile/> : <Box boxSize={ 10 }/> }
           { config.features.blockchainInteraction.isEnabled && <WalletMenuMobile/> }
         </Flex>
       </Flex>
-      { !isHomePage && searchBar }
+      { !hideSearchBar && searchBar }
     </Box>
   );
 };
diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_base-view-2.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_base-view-2.png
index 334d7e66df..dd9ef4c1c5 100644
Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_base-view-2.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_base-view-2.png differ
diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_dark-mode-base-view-2.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_dark-mode-base-view-2.png
index e63078ebdf..12bcfedf06 100644
Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_dark-mode-base-view-2.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_dark-mode-base-view-2.png differ
diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_submenu-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_submenu-1.png
index 6acf9c1014..9e454fc8e3 100644
Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_submenu-1.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_submenu-1.png differ
diff --git a/ui/snippets/navigation/LightningLabel.tsx b/ui/snippets/navigation/LightningLabel.tsx
new file mode 100644
index 0000000000..5fea052597
--- /dev/null
+++ b/ui/snippets/navigation/LightningLabel.tsx
@@ -0,0 +1,44 @@
+import { useColorModeValue, useBreakpointValue, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
+import IconSvg from 'ui/shared/IconSvg';
+
+export const LIGHTNING_LABEL_CLASS_NAME = 'lightning-label';
+
+interface Props {
+  className?: string;
+  iconColor?: string;
+  isCollapsed?: boolean;
+}
+
+const LightningLabel = ({ className, iconColor, isCollapsed }: Props) => {
+  const isLgScreen = useBreakpointValue({ base: false, lg: true, xl: false });
+  const themeBgColor = useColorModeValue('white', 'black');
+  const defaultTransitionProps = getDefaultTransitionProps({ transitionProperty: 'color' });
+
+  const isExpanded = isCollapsed === false;
+
+  const color = React.useMemo(() => {
+    if (isCollapsed || (!isExpanded && isLgScreen)) {
+      return (iconColor && iconColor !== 'transparent') ? iconColor : themeBgColor;
+    }
+    return 'transparent';
+  }, [ iconColor, themeBgColor, isCollapsed, isExpanded, isLgScreen ]);
+
+  return (
+    <IconSvg
+      className={ LIGHTNING_LABEL_CLASS_NAME + (className ? ` ${ className }` : '') }
+      name="lightning_navbar"
+      boxSize={ 4 }
+      ml={{ base: 1, lg: isExpanded ? 1 : 0, xl: isCollapsed ? 0 : 1 }}
+      position={{ lg: isExpanded ? 'relative' : 'absolute', xl: isCollapsed ? 'absolute' : 'relative' }}
+      top={{ lg: isExpanded ? '0' : '10px', xl: isCollapsed ? '10px' : '0' }}
+      right={{ lg: isExpanded ? '0' : '15px', xl: isCollapsed ? '15px' : '0' }}
+      color={ color }
+      { ...defaultTransitionProps }
+    />
+  );
+};
+
+export default chakra(LightningLabel);
diff --git a/ui/snippets/navigation/NavLink.tsx b/ui/snippets/navigation/NavLink.tsx
deleted file mode 100644
index 67dbbe1f6f..0000000000
--- a/ui/snippets/navigation/NavLink.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { Link, Text, HStack, Tooltip, Box, useBreakpointValue, chakra, shouldForwardProp } from '@chakra-ui/react';
-import NextLink from 'next/link';
-import React from 'react';
-
-import type { NavItem } from 'types/client/navigation-items';
-
-import { route } from 'nextjs-routes';
-
-import useIsMobile from 'lib/hooks/useIsMobile';
-import { isInternalItem } from 'lib/hooks/useNavItems';
-import IconSvg from 'ui/shared/IconSvg';
-
-import NavLinkIcon from './NavLinkIcon';
-import useColors from './useColors';
-import useNavLinkStyleProps from './useNavLinkStyleProps';
-
-type Props = {
-  item: NavItem;
-  isCollapsed?: boolean;
-  px?: string | number;
-  className?: string;
-  onClick?: () => void;
-}
-
-const NavLink = ({ item, isCollapsed, px, className, onClick }: Props) => {
-  const isMobile = useIsMobile();
-  const colors = useColors();
-
-  const isExpanded = isCollapsed === false;
-  const isInternalLink = isInternalItem(item);
-
-  const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive: isInternalLink && item.isActive });
-  const isXLScreen = useBreakpointValue({ base: false, xl: true });
-  const href = isInternalLink ? route(item.nextRoute) : item.url;
-
-  const content = (
-    <Link
-      href={ href }
-      target={ isInternalLink ? '_self' : '_blank' }
-      { ...styleProps.itemProps }
-      w={{ base: '100%', lg: isExpanded ? '100%' : '60px', xl: isCollapsed ? '60px' : '100%' }}
-      display="flex"
-      px={ px || { base: 3, lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 } }
-      aria-label={ `${ item.text } link` }
-      whiteSpace="nowrap"
-      onClick={ onClick }
-      _hover={{
-        '& *': {
-          color: 'link_hovered',
-        },
-      }}
-    >
-      <Tooltip
-        label={ item.text }
-        hasArrow={ false }
-        isDisabled={ isMobile || isCollapsed === false || (isCollapsed === undefined && isXLScreen) }
-        placement="right"
-        variant="nav"
-        gutter={ 20 }
-        color={ isInternalLink && item.isActive ? colors.text.active : colors.text.hover }
-      >
-        <HStack spacing={ 3 } overflow="hidden">
-          <NavLinkIcon item={ item }/>
-          <Text { ...styleProps.textProps }>
-            <span>{ item.text }</span>
-            { !isInternalLink && <IconSvg name="arrows/north-east" boxSize={ 4 } color="text_secondary" verticalAlign="middle"/> }
-          </Text>
-        </HStack>
-      </Tooltip>
-    </Link>
-  );
-
-  return (
-    <Box as="li" listStyleType="none" w="100%" className={ className }>
-      { isInternalLink ? (
-        <NextLink href={ item.nextRoute } passHref legacyBehavior>
-          { content }
-        </NextLink>
-      ) : content }
-    </Box>
-  );
-};
-
-const NavLinkChakra = chakra(NavLink, {
-  shouldForwardProp: (prop) => {
-    const isChakraProp = !shouldForwardProp(prop);
-
-    if (isChakraProp && prop !== 'px') {
-      return false;
-    }
-
-    return true;
-  },
-});
-
-export default React.memo(NavLinkChakra);
diff --git a/ui/snippets/navigation/NavLinkGroupDesktop.tsx b/ui/snippets/navigation/NavLinkGroupDesktop.tsx
deleted file mode 100644
index 00677576d9..0000000000
--- a/ui/snippets/navigation/NavLinkGroupDesktop.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import {
-  Text,
-  HStack,
-  Box,
-  Link,
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverBody,
-  VStack,
-} from '@chakra-ui/react';
-import React from 'react';
-
-import type { NavGroupItem } from 'types/client/navigation-items';
-
-import IconSvg from 'ui/shared/IconSvg';
-
-import NavLink from './NavLink';
-import NavLinkIcon from './NavLinkIcon';
-import useNavLinkStyleProps from './useNavLinkStyleProps';
-
-type Props = {
-  item: NavGroupItem;
-  isCollapsed?: boolean;
-}
-
-const NavLinkGroupDesktop = ({ item, isCollapsed }: Props) => {
-  const isExpanded = isCollapsed === false;
-
-  const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive: item.isActive });
-
-  return (
-    <Box as="li" listStyleType="none" w="100%">
-      <Popover
-        trigger="hover"
-        placement="right-start"
-        isLazy
-      >
-        <PopoverTrigger>
-          <Link
-            { ...styleProps.itemProps }
-            w={{ lg: isExpanded ? '180px' : '60px', xl: isCollapsed ? '60px' : '180px' }}
-            pl={{ lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 }}
-            pr={{ lg: isExpanded ? 0 : '15px', xl: isCollapsed ? '15px' : 0 }}
-            aria-label={ `${ item.text } link group` }
-            position="relative"
-          >
-            <HStack spacing={ 3 } overflow="hidden">
-              <NavLinkIcon item={ item }/>
-              <Text
-                { ...styleProps.textProps }
-              >
-                { item.text }
-              </Text>
-              <IconSvg
-                name="arrows/east-mini"
-                position="absolute"
-                right="7px"
-                transform="rotate(180deg)"
-                boxSize={ 6 }
-                opacity={{ lg: isExpanded ? '1' : '0', xl: isCollapsed ? '0' : '1' }}
-                transitionProperty="opacity"
-                transitionDuration="normal"
-                transitionTimingFunction="ease"
-              />
-            </HStack>
-          </Link>
-        </PopoverTrigger>
-        <PopoverContent width="252px" top={{ lg: isExpanded ? '-16px' : 0, xl: isCollapsed ? 0 : '-16px' }}>
-          <PopoverBody p={ 4 }>
-            <Text variant="secondary" fontSize="sm" mb={ 2 } display={{ lg: isExpanded ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}>
-              { item.text }
-            </Text>
-            <VStack spacing={ 1 } alignItems="start">
-              { item.subItems.map((subItem, index) => Array.isArray(subItem) ? (
-                <Box
-                  key={ index }
-                  w="100%"
-                  as="ul"
-                  _notLast={{
-                    mb: 2,
-                    pb: 2,
-                    borderBottomWidth: '1px',
-                    borderColor: 'divider',
-                  }}
-                >
-                  { subItem.map(subSubItem => <NavLink key={ subSubItem.text } item={ subSubItem } isCollapsed={ false }/>) }
-                </Box>
-              ) :
-                <NavLink key={ subItem.text } item={ subItem } isCollapsed={ false }/>,
-              ) }
-            </VStack>
-          </PopoverBody>
-        </PopoverContent>
-      </Popover>
-    </Box>
-  );
-};
-
-export default NavLinkGroupDesktop;
diff --git a/ui/snippets/navigation/NavLinkGroupMobile.tsx b/ui/snippets/navigation/NavLinkGroupMobile.tsx
deleted file mode 100644
index 5adf8dc020..0000000000
--- a/ui/snippets/navigation/NavLinkGroupMobile.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import {
-  Text,
-  HStack,
-  Flex,
-  Box,
-} from '@chakra-ui/react';
-import React from 'react';
-
-import type { NavGroupItem } from 'types/client/navigation-items';
-
-import IconSvg from 'ui/shared/IconSvg';
-
-import NavLinkIcon from './NavLinkIcon';
-import useNavLinkStyleProps from './useNavLinkStyleProps';
-
-type Props = {
-  item: NavGroupItem;
-  onClick: () => void;
-  isExpanded?: boolean;
-}
-
-const NavLinkGroup = ({ item, onClick, isExpanded }: Props) => {
-  const styleProps = useNavLinkStyleProps({ isActive: item.isActive, isExpanded });
-
-  return (
-    <Box as="li" listStyleType="none" w="100%" onClick={ onClick }>
-      <Box
-        { ...styleProps.itemProps }
-        w="100%"
-        px={ 3 }
-        aria-label={ `${ item.text } link group` }
-      >
-        <Flex justifyContent="space-between" width="100%" alignItems="center" pr={ 1 }>
-          <HStack spacing={ 3 } overflow="hidden">
-            <NavLinkIcon item={ item }/>
-            <Text
-              { ...styleProps.textProps }
-            >
-              { item.text }
-            </Text>
-          </HStack>
-          <IconSvg name="arrows/east-mini" transform="rotate(180deg)" boxSize={ 6 }/>
-        </Flex>
-      </Box>
-    </Box>
-  );
-};
-
-export default NavLinkGroup;
diff --git a/ui/snippets/navigation/NavLinkIcon.tsx b/ui/snippets/navigation/NavLinkIcon.tsx
index 6509d92584..21ba3c7c50 100644
--- a/ui/snippets/navigation/NavLinkIcon.tsx
+++ b/ui/snippets/navigation/NavLinkIcon.tsx
@@ -1,19 +1,25 @@
+import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import type { NavItem, NavGroupItem } from 'types/client/navigation-items';
+import type { NavItem, NavGroupItem } from 'types/client/navigation';
 
 import IconSvg from 'ui/shared/IconSvg';
 
-const NavLinkIcon = ({ item }: { item: NavItem | NavGroupItem}) => {
+interface Props {
+  className?: string;
+  item: NavItem | NavGroupItem;
+}
+
+const NavLinkIcon = ({ item, className }: Props) => {
   if ('icon' in item && item.icon) {
-    return <IconSvg name={ item.icon } boxSize="30px" flexShrink={ 0 }/>;
+    return <IconSvg className={ className } name={ item.icon } boxSize="30px" flexShrink={ 0 }/>;
   }
   if ('iconComponent' in item && item.iconComponent) {
     const IconComponent = item.iconComponent;
-    return <IconComponent size={ 30 }/>;
+    return <IconComponent className={ className } size={ 30 }/>;
   }
 
   return null;
 };
 
-export default NavLinkIcon;
+export default chakra(NavLinkIcon);
diff --git a/ui/snippets/navigation/NavigationDesktop.pw.tsx b/ui/snippets/navigation/NavigationDesktop.pw.tsx
deleted file mode 100644
index 9ba7520405..0000000000
--- a/ui/snippets/navigation/NavigationDesktop.pw.tsx
+++ /dev/null
@@ -1,250 +0,0 @@
-import { Box, Flex } from '@chakra-ui/react';
-import { test as base, expect } from '@playwright/experimental-ct-react';
-import type { Locator } from '@playwright/test';
-import React from 'react';
-
-import { buildExternalAssetFilePath } from 'configs/app/utils';
-import * as cookies from 'lib/cookies';
-import authFixture from 'playwright/fixtures/auth';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import createContextWithStorage from 'playwright/fixtures/createContextWithStorage';
-import TestApp from 'playwright/TestApp';
-import * as app from 'playwright/utils/app';
-import * as configs from 'playwright/utils/configs';
-
-import NavigationDesktop from './NavigationDesktop';
-
-const hooksConfig = {
-  router: {
-    route: '/blocks',
-    query: { id: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859' },
-    pathname: '/blocks',
-  },
-};
-
-const FEATURED_NETWORKS_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_FEATURED_NETWORKS', 'https://localhost:3000/config.json') || '';
-
-const test = base.extend({
-  context: contextWithEnvs([
-    { name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
-});
-
-test.describe('no auth', () => {
-  let component: Locator;
-
-  test.beforeEach(async({ mount }) => {
-    component = await mount(
-      <TestApp>
-        <Flex w="100%" minH="100vh" alignItems="stretch">
-          <NavigationDesktop/>
-          <Box bgColor="lightpink" w="100%"/>
-        </Flex>
-      </TestApp>,
-      { hooksConfig },
-    );
-  });
-
-  test('+@dark-mode', async() => {
-    await expect(component).toHaveScreenshot();
-  });
-
-  test.describe('xl screen', () => {
-    test.use({ viewport: configs.viewport.xl });
-
-    test('+@dark-mode', async() => {
-      await expect(component).toHaveScreenshot();
-    });
-  });
-});
-
-base.describe('auth', () => {
-  const test = base.extend({
-    context: async({ browser }, use) => {
-      const context = await createContextWithStorage(browser, [
-        { name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
-      ]);
-      authFixture(context);
-      use(context);
-    },
-  });
-
-  let component: Locator;
-
-  test.beforeEach(async({ mount }) => {
-    component = await mount(
-      <TestApp>
-        <Flex w="100%" minH="100vh" alignItems="stretch">
-          <NavigationDesktop/>
-          <Box bgColor="lightpink" w="100%"/>
-        </Flex>
-      </TestApp>,
-      { hooksConfig },
-    );
-  });
-
-  test('+@dark-mode', async() => {
-    await expect(component).toHaveScreenshot();
-  });
-
-  test.describe('xl screen', () => {
-    test.use({ viewport: configs.viewport.xl });
-
-    test('+@dark-mode', async() => {
-      await expect(component).toHaveScreenshot();
-    });
-  });
-});
-
-test.describe('with tooltips', () => {
-  test.use({ viewport: configs.viewport.xl });
-
-  test('', async({ mount, page }) => {
-    const component = await mount(
-      <TestApp>
-        <Flex w="100%" minH="100vh" alignItems="stretch">
-          <NavigationDesktop/>
-          <Box bgColor="lightpink" w="100%"/>
-        </Flex>
-      </TestApp>,
-      { hooksConfig },
-    );
-
-    await component.locator('header').hover();
-    await page.locator('div[aria-label="Expand/Collapse menu"]').click();
-    await page.locator('a[aria-label="Tokens link"]').hover();
-
-    await expect(component).toHaveScreenshot();
-  });
-});
-
-test.describe('with submenu', () => {
-  let component: Locator;
-
-  test.beforeEach(async({ mount, page }) => {
-    component = await mount(
-      <TestApp>
-        <Flex w="100%" minH="100vh" alignItems="stretch">
-          <NavigationDesktop/>
-          <Box bgColor="lightpink" w="100%"/>
-        </Flex>
-      </TestApp>,
-      { hooksConfig },
-    );
-    await page.locator('a[aria-label="Blockchain link group"]').hover();
-  });
-
-  test('', async() => {
-    await expect(component).toHaveScreenshot();
-  });
-
-  test.describe('xl screen', () => {
-    test.use({ viewport: configs.viewport.xl });
-
-    test('', async() => {
-      await expect(component).toHaveScreenshot();
-    });
-  });
-});
-
-base.describe('cookie set to false', () => {
-  const test = base.extend({
-    context: async({ browser }, use) => {
-      const context = await createContextWithStorage(browser, [
-        { name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
-      ]);
-      context.addCookies([ { name: cookies.NAMES.NAV_BAR_COLLAPSED, value: 'false', domain: app.domain, path: '/' } ]);
-      use(context);
-    },
-  });
-
-  let component: Locator;
-
-  test.beforeEach(async({ mount }) => {
-    component = await mount(
-      <TestApp>
-        <Flex w="100%" minH="100vh" alignItems="stretch">
-          <NavigationDesktop/>
-          <Box bgColor="lightpink" w="100%"/>
-        </Flex>
-      </TestApp>,
-      { hooksConfig },
-    );
-  });
-
-  test('', async() => {
-    const networkMenu = component.locator('button[aria-label="Network menu"]');
-    await expect(networkMenu).toBeVisible();
-  });
-
-  test.describe('xl screen', () => {
-    test.use({ viewport: configs.viewport.xl });
-
-    test('', async() => {
-      const networkMenu = component.locator('button[aria-label="Network menu"]');
-      await expect(networkMenu).toBeVisible();
-    });
-  });
-});
-
-base.describe('cookie set to true', () => {
-  const test = base.extend({
-    context: async({ browser }, use) => {
-      const context = await createContextWithStorage(browser, [
-        { name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
-      ]);
-      context.addCookies([ { name: cookies.NAMES.NAV_BAR_COLLAPSED, value: 'true', domain: 'localhost', path: '/' } ]);
-      use(context);
-    },
-  });
-
-  test('navbar is collapsed', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <Flex w="100%" minH="100vh" alignItems="stretch">
-          <NavigationDesktop/>
-          <Box bgColor="lightpink" w="100%"/>
-        </Flex>
-      </TestApp>,
-      { hooksConfig },
-    );
-
-    const networkMenu = component.locator('button[aria-label="Network menu"]');
-    expect(await networkMenu.isVisible()).toBe(false);
-  });
-});
-
-test('hover +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Flex w="100%" minH="100vh" alignItems="stretch">
-        <NavigationDesktop/>
-        <Box bgColor="lightpink" w="100%"/>
-      </Flex>
-    </TestApp>,
-    { hooksConfig },
-  );
-
-  await component.locator('header').hover();
-  await expect(component).toHaveScreenshot();
-});
-
-test.describe('hover xl screen', () => {
-  test.use({ viewport: configs.viewport.xl });
-
-  test('+@dark-mode', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <Flex w="100%" minH="100vh" alignItems="stretch">
-          <NavigationDesktop/>
-          <Box bgColor="lightpink" w="100%"/>
-        </Flex>
-      </TestApp>,
-      { hooksConfig },
-    );
-
-    await component.locator('header').hover();
-    await expect(component).toHaveScreenshot();
-  });
-});
diff --git a/ui/snippets/navigation/NavigationDesktop.tsx b/ui/snippets/navigation/NavigationDesktop.tsx
deleted file mode 100644
index 7f04ce8c87..0000000000
--- a/ui/snippets/navigation/NavigationDesktop.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { Flex, Box, VStack, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-import config from 'configs/app';
-import { useAppContext } from 'lib/contexts/app';
-import * as cookies from 'lib/cookies';
-import useHasAccount from 'lib/hooks/useHasAccount';
-import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
-import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
-import IconSvg from 'ui/shared/IconSvg';
-import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
-import NetworkMenu from 'ui/snippets/networkMenu/NetworkMenu';
-
-import NavLink from './NavLink';
-import NavLinkGroupDesktop from './NavLinkGroupDesktop';
-
-const NavigationDesktop = () => {
-  const appProps = useAppContext();
-  const cookiesString = appProps.cookies;
-
-  const isNavBarCollapsedCookie = cookies.get(cookies.NAMES.NAV_BAR_COLLAPSED, cookiesString);
-  let isNavBarCollapsed;
-  if (isNavBarCollapsedCookie === 'true') {
-    isNavBarCollapsed = true;
-  }
-  if (isNavBarCollapsedCookie === 'false') {
-    isNavBarCollapsed = false;
-  }
-
-  const { mainNavItems, accountNavItems } = useNavItems();
-
-  const hasAccount = useHasAccount();
-
-  const [ isCollapsed, setCollapsedState ] = React.useState<boolean | undefined>(isNavBarCollapsed);
-
-  const handleTogglerClick = React.useCallback(() => {
-    setCollapsedState((flag) => !flag);
-    cookies.set(cookies.NAMES.NAV_BAR_COLLAPSED, isCollapsed ? 'false' : 'true');
-  }, [ isCollapsed ]);
-
-  const chevronIconStyles = {
-    bgColor: useColorModeValue('white', 'black'),
-    color: useColorModeValue('blackAlpha.400', 'whiteAlpha.400'),
-    borderColor: 'divider',
-  };
-
-  const isExpanded = isCollapsed === false;
-
-  return (
-    <Flex
-      display={{ base: 'none', lg: 'flex' }}
-      position="relative"
-      flexDirection="column"
-      alignItems="stretch"
-      borderRight="1px solid"
-      borderColor="divider"
-      px={{ lg: isExpanded ? 6 : 4, xl: isCollapsed ? 4 : 6 }}
-      py={ 12 }
-      width={{ lg: isExpanded ? '229px' : '92px', xl: isCollapsed ? '92px' : '229px' }}
-      { ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) }
-      sx={{
-        '&:hover #expand-icon': {
-          display: 'block',
-        },
-      }}
-    >
-      { config.chain.isTestnet && <IconSvg name="testnet" h="14px" w="49px" color="red.400" position="absolute" pl={ 3 } top="34px"/> }
-      <Box
-        as="header"
-        display="flex"
-        justifyContent="flex-start"
-        alignItems="center"
-        flexDirection="row"
-        w="100%"
-        pl={{ lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 }}
-        pr={{ lg: isExpanded ? 0 : '15px', xl: isCollapsed ? '15px' : 0 }}
-        h={ 10 }
-        transitionProperty="padding"
-        transitionDuration="normal"
-        transitionTimingFunction="ease"
-      >
-        <NetworkLogo isCollapsed={ isCollapsed }/>
-        { Boolean(config.UI.sidebar.featuredNetworks) && <NetworkMenu isCollapsed={ isCollapsed }/> }
-      </Box>
-      <Box as="nav" mt={ 8 } w="100%">
-        <VStack as="ul" spacing="1" alignItems="flex-start">
-          { mainNavItems.map((item) => {
-            if (isGroupItem(item)) {
-              return <NavLinkGroupDesktop key={ item.text } item={ item } isCollapsed={ isCollapsed }/>;
-            } else {
-              return <NavLink key={ item.text } item={ item } isCollapsed={ isCollapsed }/>;
-            }
-          }) }
-        </VStack>
-      </Box>
-      { hasAccount && (
-        <Box as="nav" borderTopWidth="1px" borderColor="divider" w="100%" mt={ 6 } pt={ 6 }>
-          <VStack as="ul" spacing="1" alignItems="flex-start">
-            { accountNavItems.map((item) => <NavLink key={ item.text } item={ item } isCollapsed={ isCollapsed }/>) }
-          </VStack>
-        </Box>
-      ) }
-      <IconSvg
-        name="arrows/east-mini"
-        width={ 6 }
-        height={ 6 }
-        border="1px"
-        _hover={{ color: 'link_hovered' }}
-        borderRadius="base"
-        { ...chevronIconStyles }
-        transform={{ lg: isExpanded ? 'rotate(0)' : 'rotate(180deg)', xl: isCollapsed ? 'rotate(180deg)' : 'rotate(0)' }}
-        { ...getDefaultTransitionProps({ transitionProperty: 'transform, left' }) }
-        transformOrigin="center"
-        position="absolute"
-        top="104px"
-        left={{ lg: isExpanded ? '216px' : '80px', xl: isCollapsed ? '80px' : '216px' }}
-        cursor="pointer"
-        onClick={ handleTogglerClick }
-        aria-label="Expand/Collapse menu"
-        id="expand-icon"
-        display="none"
-      />
-    </Flex>
-  );
-};
-
-export default NavigationDesktop;
diff --git a/ui/snippets/navigation/TestnetBadge.tsx b/ui/snippets/navigation/TestnetBadge.tsx
new file mode 100644
index 0000000000..3a3b5b25a2
--- /dev/null
+++ b/ui/snippets/navigation/TestnetBadge.tsx
@@ -0,0 +1,19 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props {
+  className?: string;
+}
+
+const TestnetBadge = ({ className }: Props) => {
+  if (!config.chain.isTestnet) {
+    return null;
+  }
+
+  return <IconSvg className={ className } name="testnet" h="14px" w="37px" color="red.400"/>;
+};
+
+export default React.memo(chakra(TestnetBadge));
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png
deleted file mode 100644
index 97fe896a5f..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-xl-screen-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-xl-screen-dark-mode-1.png
deleted file mode 100644
index 942baa9b52..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-xl-screen-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-dark-mode-1.png
deleted file mode 100644
index f2f27a55fa..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-xl-screen-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-xl-screen-dark-mode-1.png
deleted file mode 100644
index 3242ac2f0a..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-xl-screen-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-dark-mode-1.png
deleted file mode 100644
index e6ad44c5a7..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-xl-screen-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-xl-screen-dark-mode-1.png
deleted file mode 100644
index f728ad8c47..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-xl-screen-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_auth-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_auth-dark-mode-1.png
deleted file mode 100644
index 5a7fa93bd3..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_auth-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_auth-xl-screen-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_auth-xl-screen-dark-mode-1.png
deleted file mode 100644
index 2c0a99e4fa..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_auth-xl-screen-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_hover-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_hover-dark-mode-1.png
deleted file mode 100644
index dda438430f..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_hover-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_hover-xl-screen-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_hover-xl-screen-dark-mode-1.png
deleted file mode 100644
index 21c4f6017e..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_hover-xl-screen-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-dark-mode-1.png
deleted file mode 100644
index e3e6a366c5..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-xl-screen-dark-mode-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-xl-screen-dark-mode-1.png
deleted file mode 100644
index 65518475eb..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-xl-screen-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-1.png
deleted file mode 100644
index 19dc92c767..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-1.png
deleted file mode 100644
index 969abd4c90..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_with-tooltips-1.png b/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_with-tooltips-1.png
deleted file mode 100644
index 06673a6c6d..0000000000
Binary files a/ui/snippets/navigation/__screenshots__/NavigationDesktop.pw.tsx_default_with-tooltips-1.png and /dev/null differ
diff --git a/ui/snippets/navigation/horizontal/NavLink.tsx b/ui/snippets/navigation/horizontal/NavLink.tsx
new file mode 100644
index 0000000000..2f2dbf002c
--- /dev/null
+++ b/ui/snippets/navigation/horizontal/NavLink.tsx
@@ -0,0 +1,63 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { NavItem } from 'types/client/navigation';
+
+import { route } from 'nextjs-routes';
+
+import { isInternalItem } from 'lib/hooks/useNavItems';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+import LightningLabel from '../LightningLabel';
+import NavLinkIcon from '../NavLinkIcon';
+import useColors from '../useColors';
+import { checkRouteHighlight } from '../utils';
+
+interface Props {
+  className?: string;
+  item: NavItem;
+  noIcon?: boolean;
+}
+
+const NavLink = ({ className, item, noIcon }: Props) => {
+  const isInternalLink = isInternalItem(item);
+
+  const colors = useColors();
+  const color = 'isActive' in item && item.isActive ? colors.text.active : colors.text.default;
+  const bgColor = 'isActive' in item && item.isActive ? colors.bg.active : colors.bg.default;
+
+  const Link = isInternalLink ? LinkInternal : LinkExternal;
+  const href = isInternalLink ? route(item.nextRoute) : item.url;
+
+  const isHighlighted = checkRouteHighlight(item);
+
+  return (
+    <chakra.li
+      listStyleType="none"
+    >
+      <Link
+        className={ className }
+        href={ href }
+        display="flex"
+        alignItems="center"
+        color={ color }
+        bgColor={ bgColor }
+        _hover={{ textDecoration: 'none', color: colors.text.hover }}
+        w="224px"
+        px={ 2 }
+        py="9px"
+        fontSize="sm"
+        lineHeight={ 5 }
+        fontWeight={ 500 }
+        borderRadius="base"
+      >
+        { !noIcon && <NavLinkIcon item={ item } mr={ 3 }/> }
+        <chakra.span>{ item.text }</chakra.span>
+        { isHighlighted && <LightningLabel iconColor={ bgColor } position={{ lg: 'static' }} ml={{ lg: '2px' }} isCollapsed={ false }/> }
+      </Link>
+    </chakra.li>
+  );
+};
+
+export default React.memo(chakra(NavLink));
diff --git a/ui/snippets/navigation/horizontal/NavLinkGroup.tsx b/ui/snippets/navigation/horizontal/NavLinkGroup.tsx
new file mode 100644
index 0000000000..4ba5d77b4c
--- /dev/null
+++ b/ui/snippets/navigation/horizontal/NavLinkGroup.tsx
@@ -0,0 +1,91 @@
+import { HStack, PopoverBody, PopoverContent, PopoverTrigger, chakra, StackDivider } from '@chakra-ui/react';
+import React from 'react';
+
+import type { NavGroupItem } from 'types/client/navigation';
+
+import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
+import Popover from 'ui/shared/chakra/Popover';
+import IconSvg from 'ui/shared/IconSvg';
+
+import LightningLabel from '../LightningLabel';
+import useColors from '../useColors';
+import { checkRouteHighlight } from '../utils';
+import NavLink from './NavLink';
+interface Props {
+  item: NavGroupItem;
+}
+
+const NavLinkGroup = ({ item }: Props) => {
+  const colors = useColors();
+  const bgColor = item.isActive ? colors.bg.active : colors.bg.default;
+  const color = item.isActive ? colors.text.active : colors.text.default;
+
+  const isHighlighted = checkRouteHighlight(item.subItems);
+  const hasGroups = item.subItems.some((subItem) => Array.isArray(subItem));
+
+  return (
+    <Popover
+      trigger="hover"
+      placement="bottom"
+      isLazy
+      gutter={ 8 }
+    >
+      { ({ isOpen }) => (
+        <>
+          <PopoverTrigger>
+            <chakra.li
+              listStyleType="none"
+              display="flex"
+              alignItems="center"
+              px={ 2 }
+              py={ 1.5 }
+              fontSize="sm"
+              lineHeight={ 5 }
+              fontWeight={ 500 }
+              cursor="pointer"
+              color={ isOpen ? colors.text.hover : color }
+              _hover={{ color: colors.text.hover }}
+              bgColor={ bgColor }
+              borderRadius="base"
+              { ...getDefaultTransitionProps() }
+            >
+              { item.text }
+              { isHighlighted && <LightningLabel iconColor={ bgColor } position={{ lg: 'static' }} ml={{ lg: '2px' }}/> }
+              <IconSvg name="arrows/east-mini" boxSize={ 5 } transform="rotate(-90deg)" ml={ 1 }/>
+            </chakra.li>
+          </PopoverTrigger>
+          <PopoverContent w="fit-content">
+            <PopoverBody p={ 4 }>
+              { hasGroups ? (
+                <HStack divider={ <StackDivider borderColor="divider"/> } alignItems="flex-start">
+                  { item.subItems.map((subItem, index) => {
+                    if (!Array.isArray(subItem)) {
+                      return <NavLink key={ subItem.text } item={ subItem }/>;
+                    }
+
+                    return (
+                      <chakra.ul key={ index } display="flex" flexDir="column" rowGap={ 1 }>
+                        { subItem.map((navItem) => <NavLink key={ navItem.text } item={ navItem }/>) }
+                      </chakra.ul>
+                    );
+                  }) }
+                </HStack>
+              ) : (
+                <chakra.ul display="flex" flexDir="column" rowGap={ 1 }>
+                  { item.subItems.map((subItem) => {
+                    if (Array.isArray(subItem)) {
+                      return null;
+                    }
+                    return <NavLink key={ subItem.text } item={ subItem }/>;
+                  }) }
+                </chakra.ul>
+              ) }
+            </PopoverBody>
+          </PopoverContent>
+        </>
+      ) }
+    </Popover>
+  );
+};
+
+export default React.memo(NavLinkGroup);
diff --git a/ui/snippets/navigation/horizontal/NavigationDesktop.pw.tsx b/ui/snippets/navigation/horizontal/NavigationDesktop.pw.tsx
new file mode 100644
index 0000000000..60b1710024
--- /dev/null
+++ b/ui/snippets/navigation/horizontal/NavigationDesktop.pw.tsx
@@ -0,0 +1,58 @@
+import type { BrowserContext } from '@playwright/test';
+import React from 'react';
+
+import * as profileMock from 'mocks/user/profile';
+import { contextWithAuth } from 'playwright/fixtures/auth';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import NavigationDesktop from './NavigationDesktop';
+
+const testWithAuth = test.extend<{ context: BrowserContext }>({
+  context: contextWithAuth,
+});
+
+testWithAuth('base view +@dark-mode', async({ render, mockApiResponse, mockAssetResponse, mockEnvs, page }) => {
+  const hooksConfig = {
+    router: {
+      route: '/blocks',
+      pathname: '/blocks',
+    },
+  };
+
+  await mockApiResponse('user_info', profileMock.base);
+  await mockAssetResponse(profileMock.base.avatar, './playwright/mocks/image_s.jpg');
+  await mockEnvs([
+    ...ENVS_MAP.userOps,
+    ...ENVS_MAP.nameService,
+    [ 'NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES', '["/blocks","/apps"]' ],
+  ]);
+
+  const component = await render(<NavigationDesktop/>, { hooksConfig });
+  await component.getByText('Blockchain').hover();
+  await expect(page.getByText('Blocks')).toBeVisible();
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 450 } });
+});
+
+test('with groped items', async({ render, mockEnvs, page }) => {
+  const hooksConfig = {
+    router: {
+      route: '/apps',
+      pathname: '/apps',
+    },
+  };
+
+  await mockEnvs([
+    ...ENVS_MAP.optimisticRollup,
+    ...ENVS_MAP.userOps,
+    ...ENVS_MAP.nameService,
+    ...ENVS_MAP.navigationHighlightedRoutes,
+    ...ENVS_MAP.noWalletClient,
+    ...ENVS_MAP.noAccount,
+  ]);
+
+  const component = await render(<NavigationDesktop/>, { hooksConfig });
+  await component.getByText('Blockchain').hover();
+  await expect(page.getByText('Blocks')).toBeVisible();
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 450 } });
+});
diff --git a/ui/snippets/navigation/horizontal/NavigationDesktop.tsx b/ui/snippets/navigation/horizontal/NavigationDesktop.tsx
new file mode 100644
index 0000000000..063db1ba0a
--- /dev/null
+++ b/ui/snippets/navigation/horizontal/NavigationDesktop.tsx
@@ -0,0 +1,48 @@
+import { Box, chakra, Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
+import { CONTENT_MAX_WIDTH } from 'ui/shared/layout/utils';
+import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
+import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
+import WalletMenuDesktop from 'ui/snippets/walletMenu/WalletMenuDesktop';
+
+import TestnetBadge from '../TestnetBadge';
+import NavLink from './NavLink';
+import NavLinkGroup from './NavLinkGroup';
+
+const NavigationDesktop = () => {
+  const { mainNavItems } = useNavItems();
+
+  return (
+    <Box borderColor="divider" borderBottomWidth="1px">
+      <Flex
+        display={{ base: 'none', lg: 'flex' }}
+        alignItems="center"
+        px={ 6 }
+        py={ 2 }
+        maxW={ `${ CONTENT_MAX_WIDTH }px` }
+        m="0 auto"
+      >
+        <NetworkLogo isCollapsed={ false } w={{ lg: 'auto' }} maxW="120px"/>
+        <TestnetBadge ml={ 3 }/>
+        <chakra.nav ml="auto" mr={ config.features.account.isEnabled || config.features.blockchainInteraction.isEnabled ? 8 : 0 }>
+          <Flex as="ul" columnGap={ 3 }>
+            { mainNavItems.map((item) => {
+              if (isGroupItem(item)) {
+                return <NavLinkGroup key={ item.text } item={ item }/>;
+              } else {
+                return <NavLink key={ item.text } item={ item } noIcon py={ 1.5 } w="fit-content"/>;
+              }
+            }) }
+          </Flex>
+        </chakra.nav>
+        { config.features.account.isEnabled && <ProfileMenuDesktop buttonBoxSize="32px"/> }
+        { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop size="sm"/> }
+      </Flex>
+    </Box>
+  );
+};
+
+export default React.memo(NavigationDesktop);
diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..dcdc0bf595
Binary files /dev/null and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_base-view-dark-mode-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_base-view-dark-mode-1.png
new file mode 100644
index 0000000000..ae0fdffe40
Binary files /dev/null and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-groped-items-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-groped-items-1.png
new file mode 100644
index 0000000000..15bf22a354
Binary files /dev/null and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-groped-items-1.png differ
diff --git a/ui/snippets/navigation/mobile/NavLinkGroup.tsx b/ui/snippets/navigation/mobile/NavLinkGroup.tsx
new file mode 100644
index 0000000000..3edfa845b9
--- /dev/null
+++ b/ui/snippets/navigation/mobile/NavLinkGroup.tsx
@@ -0,0 +1,55 @@
+import {
+  Text,
+  HStack,
+  Flex,
+  Box,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import type { NavGroupItem } from 'types/client/navigation';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+import LightningLabel from '../LightningLabel';
+import NavLinkIcon from '../NavLinkIcon';
+import useNavLinkStyleProps from '../useNavLinkStyleProps';
+import { checkRouteHighlight } from '../utils';
+
+type Props = {
+  item: NavGroupItem;
+  onClick: () => void;
+  isExpanded?: boolean;
+}
+
+const NavLinkGroup = ({ item, onClick, isExpanded }: Props) => {
+  const styleProps = useNavLinkStyleProps({ isActive: item.isActive, isExpanded });
+
+  const isHighlighted = checkRouteHighlight(item.subItems);
+
+  return (
+    <Box as="li" listStyleType="none" w="100%" onClick={ onClick }>
+      <Box
+        { ...styleProps.itemProps }
+        w="100%"
+        px={ 2 }
+        aria-label={ `${ item.text } link group` }
+      >
+        <Flex justifyContent="space-between" width="100%" alignItems="center" pr={ 1 }>
+          <HStack spacing={ 0 } overflow="hidden">
+            <NavLinkIcon item={ item }/>
+            <Text
+              { ...styleProps.textProps }
+              ml={ 3 }
+            >
+              { item.text }
+            </Text>
+            { isHighlighted && (<LightningLabel iconColor={ styleProps.itemProps.bgColor }/>) }
+          </HStack>
+          <IconSvg name="arrows/east-mini" transform="rotate(180deg)" boxSize={ 6 }/>
+        </Flex>
+      </Box>
+    </Box>
+  );
+};
+
+export default NavLinkGroup;
diff --git a/ui/snippets/navigation/NavigationMobile.tsx b/ui/snippets/navigation/mobile/NavigationMobile.tsx
similarity index 87%
rename from ui/snippets/navigation/NavigationMobile.tsx
rename to ui/snippets/navigation/mobile/NavigationMobile.tsx
index bfa06737b2..f3c243e9d9 100644
--- a/ui/snippets/navigation/NavigationMobile.tsx
+++ b/ui/snippets/navigation/mobile/NavigationMobile.tsx
@@ -5,9 +5,11 @@ import React, { useCallback } from 'react';
 import useHasAccount from 'lib/hooks/useHasAccount';
 import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
 import IconSvg from 'ui/shared/IconSvg';
-import NavLink from 'ui/snippets/navigation/NavLink';
 
-import NavLinkGroupMobile from './NavLinkGroupMobile';
+import NavLink from '../vertical/NavLink';
+import NavLinkGroup from './NavLinkGroup';
+
+const DRAWER_WIDTH = 330;
 
 interface Props {
   onNavLinkClick?: () => void;
@@ -20,17 +22,17 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
   const [ openedGroupIndex, setOpenedGroupIndex ] = React.useState(-1);
 
   const mainX = useMotionValue(0);
-  const subX = useMotionValue(250);
+  const subX = useMotionValue(DRAWER_WIDTH);
 
   const onGroupItemOpen = (index: number) => () => {
     setOpenedGroupIndex(index);
-    animate(mainX, -250, { ease: 'easeInOut' });
+    animate(mainX, -DRAWER_WIDTH, { ease: 'easeInOut' });
     animate(subX, 0, { ease: 'easeInOut' });
   };
 
   const onGroupItemClose = useCallback(() => {
     animate(mainX, 0, { ease: 'easeInOut' });
-    animate(subX, 250, { ease: 'easeInOut', onComplete: () => setOpenedGroupIndex(-1) });
+    animate(subX, DRAWER_WIDTH, { ease: 'easeInOut', onComplete: () => setOpenedGroupIndex(-1) });
   }, [ mainX, subX ]);
 
   const hasAccount = useHasAccount();
@@ -64,7 +66,7 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
           >
             { mainNavItems.map((item, index) => {
               if (isGroupItem(item)) {
-                return <NavLinkGroupMobile key={ item.text } item={ item } onClick={ onGroupItemOpen(index) } isExpanded={ isMarketplaceAppPage }/>;
+                return <NavLinkGroup key={ item.text } item={ item } onClick={ onGroupItemOpen(index) } isExpanded={ isMarketplaceAppPage }/>;
               } else {
                 return <NavLink key={ item.text } item={ item } onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>;
               }
@@ -74,8 +76,8 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
         { hasAccount && (
           <Box
             as="nav"
-            mt={ 6 }
-            pt={ 6 }
+            mt={ 3 }
+            pt={ 3 }
             borderTopWidth="1px"
             borderColor="divider"
           >
@@ -95,7 +97,7 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
           style={{ x: subX }}
           key="sub"
         >
-          <Flex alignItems="center" px={ 3 } py={ 2.5 } w="100%" h="50px" onClick={ onGroupItemClose } mb={ 1 }>
+          <Flex alignItems="center" px={ 2 } py={ 2.5 } w="100%" h="50px" onClick={ onGroupItemClose } mb={ 1 }>
             <IconSvg name="arrows/east-mini" boxSize={ 6 } mr={ 2 } color={ iconColor }/>
             <Text variant="secondary" fontSize="sm">{ mainNavItems[openedGroupIndex].text }</Text>
           </Flex>
diff --git a/ui/snippets/navigation/useNavLinkStyleProps.tsx b/ui/snippets/navigation/useNavLinkStyleProps.tsx
index 786e5bcc78..641ac36641 100644
--- a/ui/snippets/navigation/useNavLinkStyleProps.tsx
+++ b/ui/snippets/navigation/useNavLinkStyleProps.tsx
@@ -6,7 +6,6 @@ type Props = {
   isExpanded?: boolean;
   isCollapsed?: boolean;
   isActive?: boolean;
-  px?: string | number;
 }
 
 export default function useNavLinkProps({ isExpanded, isCollapsed, isActive }: Props) {
@@ -14,7 +13,7 @@ export default function useNavLinkProps({ isExpanded, isCollapsed, isActive }: P
 
   return {
     itemProps: {
-      py: 2.5,
+      py: '9px',
       display: 'flex',
       color: isActive ? colors.text.active : colors.text.default,
       bgColor: isActive ? colors.bg.active : colors.bg.default,
diff --git a/ui/snippets/navigation/utils.ts b/ui/snippets/navigation/utils.ts
new file mode 100644
index 0000000000..00c9e69ef8
--- /dev/null
+++ b/ui/snippets/navigation/utils.ts
@@ -0,0 +1,11 @@
+import type { NavItem } from 'types/client/navigation';
+
+import config from 'configs/app';
+import { isInternalItem } from 'lib/hooks/useNavItems';
+
+export function checkRouteHighlight(item: NavItem | Array<NavItem> | Array<Array<NavItem>>): boolean {
+  if (Array.isArray(item)) {
+    return item.some((subItem) => checkRouteHighlight(subItem));
+  }
+  return isInternalItem(item) && (config.UI.navigation.highlightedRoutes.includes(item.nextRoute.pathname));
+}
diff --git a/ui/snippets/navigation/vertical/NavLink.tsx b/ui/snippets/navigation/vertical/NavLink.tsx
new file mode 100644
index 0000000000..4dfaf67e43
--- /dev/null
+++ b/ui/snippets/navigation/vertical/NavLink.tsx
@@ -0,0 +1,106 @@
+import { Link, Text, HStack, Tooltip, Box, useBreakpointValue, chakra, shouldForwardProp } from '@chakra-ui/react';
+import NextLink from 'next/link';
+import React from 'react';
+
+import type { NavItem } from 'types/client/navigation';
+
+import { route } from 'nextjs-routes';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import { isInternalItem } from 'lib/hooks/useNavItems';
+import IconSvg from 'ui/shared/IconSvg';
+
+import LightningLabel, { LIGHTNING_LABEL_CLASS_NAME } from '../LightningLabel';
+import NavLinkIcon from '../NavLinkIcon';
+import useColors from '../useColors';
+import useNavLinkStyleProps from '../useNavLinkStyleProps';
+import { checkRouteHighlight } from '../utils';
+
+type Props = {
+  item: NavItem;
+  isCollapsed?: boolean;
+  px?: string | number;
+  className?: string;
+  onClick?: () => void;
+  disableActiveState?: boolean;
+}
+
+const NavLink = ({ item, isCollapsed, px, className, onClick, disableActiveState }: Props) => {
+  const isMobile = useIsMobile();
+  const colors = useColors();
+
+  const isExpanded = isCollapsed === false;
+  const isInternalLink = isInternalItem(item);
+
+  const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive: isInternalLink && item.isActive && !disableActiveState });
+  const isXLScreen = useBreakpointValue({ base: false, xl: true });
+  const href = isInternalLink ? route(item.nextRoute) : item.url;
+
+  const isHighlighted = checkRouteHighlight(item);
+
+  const content = (
+    <Link
+      href={ href }
+      target={ isInternalLink ? '_self' : '_blank' }
+      { ...styleProps.itemProps }
+      w={{ base: '100%', lg: isExpanded ? '100%' : '60px', xl: isCollapsed ? '60px' : '100%' }}
+      display="flex"
+      position="relative"
+      px={ px || { base: 2, lg: isExpanded ? 2 : '15px', xl: isCollapsed ? '15px' : 2 } }
+      aria-label={ `${ item.text } link` }
+      whiteSpace="nowrap"
+      onClick={ onClick }
+      _hover={{
+        [`& *:not(.${ LIGHTNING_LABEL_CLASS_NAME }, .${ LIGHTNING_LABEL_CLASS_NAME } *)`]: {
+          color: 'link_hovered',
+        },
+      }}
+    >
+      <Tooltip
+        label={ item.text }
+        hasArrow={ false }
+        isDisabled={ isMobile || isCollapsed === false || (isCollapsed === undefined && isXLScreen) }
+        placement="right"
+        variant="nav"
+        gutter={ 20 }
+        color={ isInternalLink && item.isActive ? colors.text.active : colors.text.hover }
+        margin={ 0 }
+      >
+        <HStack spacing={ 0 } overflow="hidden">
+          <NavLinkIcon item={ item }/>
+          <Text { ...styleProps.textProps } as="span" ml={ 3 }>
+            <span>{ item.text }</span>
+            { !isInternalLink && <IconSvg name="link_external" boxSize={ 3 } color="icon_link_external" verticalAlign="middle"/> }
+          </Text>
+          { isHighlighted && (
+            <LightningLabel iconColor={ styleProps.itemProps.bgColor } isCollapsed={ isCollapsed }/>
+          ) }
+        </HStack>
+      </Tooltip>
+    </Link>
+  );
+
+  return (
+    <Box as="li" listStyleType="none" w="100%" className={ className }>
+      { isInternalLink ? (
+        <NextLink href={ item.nextRoute } passHref legacyBehavior>
+          { content }
+        </NextLink>
+      ) : content }
+    </Box>
+  );
+};
+
+const NavLinkChakra = chakra(NavLink, {
+  shouldForwardProp: (prop) => {
+    const isChakraProp = !shouldForwardProp(prop);
+
+    if (isChakraProp && prop !== 'px') {
+      return false;
+    }
+
+    return true;
+  },
+});
+
+export default React.memo(NavLinkChakra);
diff --git a/ui/snippets/navigation/vertical/NavLinkGroup.tsx b/ui/snippets/navigation/vertical/NavLinkGroup.tsx
new file mode 100644
index 0000000000..89d368a96d
--- /dev/null
+++ b/ui/snippets/navigation/vertical/NavLinkGroup.tsx
@@ -0,0 +1,109 @@
+import {
+  Text,
+  HStack,
+  Box,
+  Link,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  VStack,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import type { NavGroupItem } from 'types/client/navigation';
+
+import Popover from 'ui/shared/chakra/Popover';
+import IconSvg from 'ui/shared/IconSvg';
+
+import LightningLabel from '../LightningLabel';
+import NavLinkIcon from '../NavLinkIcon';
+import useNavLinkStyleProps from '../useNavLinkStyleProps';
+import { checkRouteHighlight } from '../utils';
+import NavLink from './NavLink';
+
+type Props = {
+  item: NavGroupItem;
+  isCollapsed?: boolean;
+}
+
+const NavLinkGroup = ({ item, isCollapsed }: Props) => {
+  const isExpanded = isCollapsed === false;
+
+  const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive: item.isActive });
+
+  const isHighlighted = checkRouteHighlight(item.subItems);
+
+  return (
+    <Box as="li" listStyleType="none" w="100%">
+      <Popover
+        trigger="hover"
+        placement="right-start"
+        isLazy
+        gutter={ 8 }
+      >
+        <PopoverTrigger>
+          <Link
+            { ...styleProps.itemProps }
+            w={{ lg: isExpanded ? '180px' : '60px', xl: isCollapsed ? '60px' : '180px' }}
+            pl={{ lg: isExpanded ? 2 : '15px', xl: isCollapsed ? '15px' : 2 }}
+            pr={{ lg: isExpanded ? 0 : '15px', xl: isCollapsed ? '15px' : 0 }}
+            aria-label={ `${ item.text } link group` }
+            position="relative"
+          >
+            <HStack spacing={ 0 } overflow="hidden">
+              <NavLinkIcon item={ item }/>
+              <Text
+                { ...styleProps.textProps }
+                ml={ 3 }
+              >
+                { item.text }
+              </Text>
+              { isHighlighted && (
+                <LightningLabel iconColor={ styleProps.itemProps.bgColor } isCollapsed={ isCollapsed }/>
+              ) }
+              <IconSvg
+                name="arrows/east-mini"
+                position="absolute"
+                right="7px"
+                transform="rotate(180deg)"
+                boxSize={ 6 }
+                opacity={{ lg: isExpanded ? '1' : '0', xl: isCollapsed ? '0' : '1' }}
+                transitionProperty="opacity"
+                transitionDuration="normal"
+                transitionTimingFunction="ease"
+              />
+            </HStack>
+          </Link>
+        </PopoverTrigger>
+        <PopoverContent width="252px" top={{ lg: isExpanded ? '-16px' : 0, xl: isCollapsed ? 0 : '-16px' }}>
+          <PopoverBody p={ 4 }>
+            <Text variant="secondary" fontSize="sm" mb={ 1 } display={{ lg: isExpanded ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}>
+              { item.text }
+            </Text>
+            <VStack spacing={ 1 } alignItems="start">
+              { item.subItems.map((subItem, index) => Array.isArray(subItem) ? (
+                <Box
+                  key={ index }
+                  w="100%"
+                  as="ul"
+                  _notLast={{
+                    mb: 2,
+                    pb: 2,
+                    borderBottomWidth: '1px',
+                    borderColor: 'divider',
+                  }}
+                >
+                  { subItem.map(subSubItem => <NavLink key={ subSubItem.text } item={ subSubItem } isCollapsed={ false }/>) }
+                </Box>
+              ) :
+                <NavLink key={ subItem.text } item={ subItem } isCollapsed={ false }/>,
+              ) }
+            </VStack>
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
+    </Box>
+  );
+};
+
+export default NavLinkGroup;
diff --git a/ui/snippets/navigation/vertical/NavigationDesktop.pw.tsx b/ui/snippets/navigation/vertical/NavigationDesktop.pw.tsx
new file mode 100644
index 0000000000..16000c2415
--- /dev/null
+++ b/ui/snippets/navigation/vertical/NavigationDesktop.pw.tsx
@@ -0,0 +1,253 @@
+import { Box, Flex } from '@chakra-ui/react';
+import type { BrowserContext, Locator } from '@playwright/test';
+import React from 'react';
+
+import config from 'configs/app';
+import * as cookies from 'lib/cookies';
+import { FEATURED_NETWORKS_MOCK } from 'mocks/config/network';
+import { contextWithAuth } from 'playwright/fixtures/auth';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
+
+import NavigationDesktop from './NavigationDesktop';
+
+const hooksConfig = {
+  router: {
+    route: '/blocks',
+    query: { id: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859' },
+    pathname: '/blocks',
+  },
+};
+
+const FEATURED_NETWORKS_URL = 'https://localhost:3000/featured-networks.json';
+
+test.beforeEach(async({ mockEnvs, mockConfigResponse }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL ],
+  ]);
+  await mockConfigResponse('NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL, FEATURED_NETWORKS_MOCK);
+});
+
+test.describe('no auth', () => {
+  let component: Locator;
+
+  test.beforeEach(async({ render }) => {
+    component = await render(
+      <Flex w="100%" minH="100vh" alignItems="stretch">
+        <NavigationDesktop/>
+        <Box bgColor="lightpink" w="100%"/>
+      </Flex>,
+      { hooksConfig },
+    );
+  });
+
+  test('+@dark-mode', async() => {
+    await expect(component).toHaveScreenshot();
+  });
+
+  test.describe('xl screen', () => {
+    test.use({ viewport: pwConfig.viewport.xl });
+
+    test('+@dark-mode', async() => {
+      await expect(component).toHaveScreenshot();
+    });
+  });
+});
+
+const authTest = test.extend<{ context: BrowserContext }>({
+  context: contextWithAuth,
+});
+
+authTest.describe('auth', () => {
+  let component: Locator;
+
+  authTest.beforeEach(async({ render }) => {
+    component = await render(
+      <Flex w="100%" minH="100vh" alignItems="stretch">
+        <NavigationDesktop/>
+        <Box bgColor="lightpink" w="100%"/>
+      </Flex>,
+      { hooksConfig },
+    );
+  });
+
+  authTest('+@dark-mode', async() => {
+    await expect(component).toHaveScreenshot();
+  });
+
+  authTest.describe('xl screen', () => {
+    authTest.use({ viewport: pwConfig.viewport.xl });
+
+    authTest('+@dark-mode', async() => {
+      await expect(component).toHaveScreenshot();
+    });
+  });
+});
+
+test.describe('with tooltips', () => {
+  test.use({ viewport: pwConfig.viewport.xl });
+
+  test('', async({ render, page }) => {
+    const component = await render(
+      <Flex w="100%" minH="100vh" alignItems="stretch">
+        <NavigationDesktop/>
+        <Box bgColor="lightpink" w="100%"/>
+      </Flex>,
+      { hooksConfig },
+    );
+
+    await component.locator('header').hover();
+    await page.locator('div[aria-label="Expand/Collapse menu"]').click();
+    await page.locator('a[aria-label="Tokens link"]').hover();
+
+    await expect(component).toHaveScreenshot();
+  });
+});
+
+test.describe('with submenu', () => {
+  let component: Locator;
+
+  test.beforeEach(async({ render, page }) => {
+    component = await render(
+      <Flex w="100%" minH="100vh" alignItems="stretch">
+        <NavigationDesktop/>
+        <Box bgColor="lightpink" w="100%"/>
+      </Flex>,
+      { hooksConfig },
+    );
+    await page.locator('a[aria-label="Blockchain link group"]').hover();
+  });
+
+  test('', async() => {
+    await expect(component).toHaveScreenshot();
+  });
+
+  test.describe('xl screen', () => {
+    test.use({ viewport: pwConfig.viewport.xl });
+
+    test('', async() => {
+      await expect(component).toHaveScreenshot();
+    });
+  });
+});
+
+const noSideBarCookieTest = test.extend({
+  context: ({ context }, use) => {
+    context.addCookies([ { name: cookies.NAMES.NAV_BAR_COLLAPSED, value: 'false', domain: config.app.host, path: '/' } ]);
+    use(context);
+  },
+});
+
+noSideBarCookieTest.describe('cookie set to false', () => {
+  let component: Locator;
+
+  noSideBarCookieTest.beforeEach(async({ render }) => {
+    component = await render(
+      <Flex w="100%" minH="100vh" alignItems="stretch">
+        <NavigationDesktop/>
+        <Box bgColor="lightpink" w="100%"/>
+      </Flex>,
+      { hooksConfig },
+    );
+  });
+
+  noSideBarCookieTest('', async() => {
+    const networkMenu = component.locator('button[aria-label="Network menu"]');
+    await expect(networkMenu).toBeVisible();
+  });
+
+  noSideBarCookieTest.describe('xl screen', () => {
+    noSideBarCookieTest.use({ viewport: pwConfig.viewport.xl });
+
+    noSideBarCookieTest('', async() => {
+      const networkMenu = component.locator('button[aria-label="Network menu"]');
+      await expect(networkMenu).toBeVisible();
+    });
+  });
+});
+
+const sideBarCookieTest = test.extend({
+  context: ({ context }, use) => {
+    context.addCookies([ { name: cookies.NAMES.NAV_BAR_COLLAPSED, value: 'true', domain: config.app.host, path: '/' } ]);
+    use(context);
+  },
+});
+
+sideBarCookieTest.describe('cookie set to true', () => {
+  sideBarCookieTest('navbar is collapsed', async({ render }) => {
+    const component = await render(
+      <Flex w="100%" minH="100vh" alignItems="stretch">
+        <NavigationDesktop/>
+        <Box bgColor="lightpink" w="100%"/>
+      </Flex>,
+      { hooksConfig },
+    );
+
+    const networkMenu = component.locator('button[aria-label="Network menu"]');
+    expect(await networkMenu.isVisible()).toBe(false);
+  });
+});
+
+test('hover +@dark-mode', async({ render }) => {
+  const component = await render(
+    <Flex w="100%" minH="100vh" alignItems="stretch">
+      <NavigationDesktop/>
+      <Box bgColor="lightpink" w="100%"/>
+    </Flex>,
+    { hooksConfig },
+  );
+
+  await component.locator('header').hover();
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('hover xl screen', () => {
+  test.use({ viewport: pwConfig.viewport.xl });
+
+  test('+@dark-mode', async({ render }) => {
+    const component = await render(
+      <Flex w="100%" minH="100vh" alignItems="stretch">
+        <NavigationDesktop/>
+        <Box bgColor="lightpink" w="100%"/>
+      </Flex>,
+      { hooksConfig },
+    );
+
+    await component.locator('header').hover();
+    await expect(component).toHaveScreenshot();
+  });
+});
+
+test.describe('with highlighted routes', () => {
+  let component: Locator;
+
+  test.beforeEach(async({ render, mockEnvs }) => {
+    await mockEnvs(ENVS_MAP.navigationHighlightedRoutes);
+
+    component = await render(
+      <Flex w="100%" minH="100vh" alignItems="stretch">
+        <NavigationDesktop/>
+        <Box bgColor="lightpink" w="100%"/>
+      </Flex>,
+      { hooksConfig },
+    );
+  });
+
+  test('+@dark-mode', async() => {
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('with submenu', async({ page }) => {
+    await page.locator('a[aria-label="Blockchain link group"]').hover();
+    await expect(component).toHaveScreenshot();
+  });
+
+  test.describe('xl screen', () => {
+    test.use({ viewport: pwConfig.viewport.xl });
+
+    test('+@dark-mode', async() => {
+      await expect(component).toHaveScreenshot();
+    });
+  });
+});
diff --git a/ui/snippets/navigation/vertical/NavigationDesktop.tsx b/ui/snippets/navigation/vertical/NavigationDesktop.tsx
new file mode 100644
index 0000000000..420bb782c9
--- /dev/null
+++ b/ui/snippets/navigation/vertical/NavigationDesktop.tsx
@@ -0,0 +1,131 @@
+import { Flex, Box, VStack, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import { useAppContext } from 'lib/contexts/app';
+import * as cookies from 'lib/cookies';
+import useHasAccount from 'lib/hooks/useHasAccount';
+import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
+import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
+import IconSvg from 'ui/shared/IconSvg';
+import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
+import NetworkMenu from 'ui/snippets/networkMenu/NetworkMenu';
+
+import TestnetBadge from '../TestnetBadge';
+import NavLink from './NavLink';
+import NavLinkGroup from './NavLinkGroup';
+
+const NavigationDesktop = () => {
+  const appProps = useAppContext();
+  const cookiesString = appProps.cookies;
+
+  const isNavBarCollapsedCookie = cookies.get(cookies.NAMES.NAV_BAR_COLLAPSED, cookiesString);
+  let isNavBarCollapsed;
+  if (isNavBarCollapsedCookie === 'true') {
+    isNavBarCollapsed = true;
+  }
+  if (isNavBarCollapsedCookie === 'false') {
+    isNavBarCollapsed = false;
+  }
+
+  const { mainNavItems, accountNavItems } = useNavItems();
+
+  const hasAccount = useHasAccount();
+
+  const [ isCollapsed, setCollapsedState ] = React.useState<boolean | undefined>(isNavBarCollapsed);
+
+  const handleTogglerClick = React.useCallback(() => {
+    setCollapsedState((flag) => !flag);
+    cookies.set(cookies.NAMES.NAV_BAR_COLLAPSED, isCollapsed ? 'false' : 'true');
+  }, [ isCollapsed ]);
+
+  const handleContainerClick = React.useCallback((event: React.MouseEvent) => {
+    if (event.target === event.currentTarget) {
+      handleTogglerClick();
+    }
+  }, [ handleTogglerClick ]);
+
+  const chevronIconStyles = {
+    bgColor: useColorModeValue('white', 'black'),
+    color: useColorModeValue('blackAlpha.400', 'whiteAlpha.400'),
+    borderColor: 'divider',
+  };
+
+  const isExpanded = isCollapsed === false;
+
+  return (
+    <Flex
+      display={{ base: 'none', lg: 'flex' }}
+      role="group"
+      position="relative"
+      flexDirection="column"
+      alignItems="stretch"
+      borderRight="1px solid"
+      borderColor="divider"
+      px={{ lg: isExpanded ? 6 : 4, xl: isCollapsed ? 4 : 6 }}
+      py={ 12 }
+      width={{ lg: isExpanded ? '229px' : '92px', xl: isCollapsed ? '92px' : '229px' }}
+      { ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) }
+      onClick={ handleContainerClick }
+    >
+      <TestnetBadge position="absolute" pl={ 3 } w="49px" top="34px"/>
+      <Box
+        as="header"
+        display="flex"
+        justifyContent="flex-start"
+        alignItems="center"
+        flexDirection="row"
+        w="100%"
+        pl={{ lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 }}
+        pr={{ lg: isExpanded ? 0 : '15px', xl: isCollapsed ? '15px' : 0 }}
+        h={ 10 }
+        transitionProperty="padding"
+        transitionDuration="normal"
+        transitionTimingFunction="ease"
+      >
+        <NetworkLogo isCollapsed={ isCollapsed }/>
+        { Boolean(config.UI.navigation.featuredNetworks) && <NetworkMenu isCollapsed={ isCollapsed }/> }
+      </Box>
+      <Box as="nav" mt={ 6 } w="100%">
+        <VStack as="ul" spacing="1" alignItems="flex-start">
+          { mainNavItems.map((item) => {
+            if (isGroupItem(item)) {
+              return <NavLinkGroup key={ item.text } item={ item } isCollapsed={ isCollapsed }/>;
+            } else {
+              return <NavLink key={ item.text } item={ item } isCollapsed={ isCollapsed }/>;
+            }
+          }) }
+        </VStack>
+      </Box>
+      { hasAccount && (
+        <Box as="nav" borderTopWidth="1px" borderColor="divider" w="100%" mt={ 3 } pt={ 3 }>
+          <VStack as="ul" spacing="1" alignItems="flex-start">
+            { accountNavItems.map((item) => <NavLink key={ item.text } item={ item } isCollapsed={ isCollapsed }/>) }
+          </VStack>
+        </Box>
+      ) }
+      <IconSvg
+        name="arrows/east-mini"
+        width={ 6 }
+        height={ 6 }
+        border="1px"
+        _hover={{ color: 'link_hovered' }}
+        borderRadius="base"
+        { ...chevronIconStyles }
+        transform={{ lg: isExpanded ? 'rotate(0)' : 'rotate(180deg)', xl: isCollapsed ? 'rotate(180deg)' : 'rotate(0)' }}
+        { ...getDefaultTransitionProps({ transitionProperty: 'transform, left' }) }
+        transformOrigin="center"
+        position="absolute"
+        top="104px"
+        left={{ lg: isExpanded ? '216px' : '80px', xl: isCollapsed ? '80px' : '216px' }}
+        cursor="pointer"
+        onClick={ handleTogglerClick }
+        aria-label="Expand/Collapse menu"
+        display="none"
+        _groupHover={{ display: 'block' }}
+      />
+    </Flex>
+  );
+};
+
+export default NavigationDesktop;
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png
new file mode 100644
index 0000000000..a164e0d570
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-xl-screen-dark-mode-1.png
new file mode 100644
index 0000000000..2f319988b0
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-dark-mode-1.png
new file mode 100644
index 0000000000..8b994663af
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-xl-screen-dark-mode-1.png
new file mode 100644
index 0000000000..8ccb65a327
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-dark-mode-1.png
new file mode 100644
index 0000000000..69968c1f8b
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-xl-screen-dark-mode-1.png
new file mode 100644
index 0000000000..f1437bacce
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-dark-mode-1.png
new file mode 100644
index 0000000000..362a358e80
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-xl-screen-dark-mode-1.png
new file mode 100644
index 0000000000..1efb64fae0
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_auth-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_auth-dark-mode-1.png
new file mode 100644
index 0000000000..1fdea87741
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_auth-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_auth-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_auth-xl-screen-dark-mode-1.png
new file mode 100644
index 0000000000..089d5a985d
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_auth-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-dark-mode-1.png
new file mode 100644
index 0000000000..f3f7619a92
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-xl-screen-dark-mode-1.png
new file mode 100644
index 0000000000..02922b2f28
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-dark-mode-1.png
new file mode 100644
index 0000000000..7c452c00fc
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-xl-screen-dark-mode-1.png
new file mode 100644
index 0000000000..c5bb8f6d69
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-dark-mode-1.png
new file mode 100644
index 0000000000..d67dcfaa74
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-with-submenu-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-with-submenu-1.png
new file mode 100644
index 0000000000..6b9d2b4d9d
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-with-submenu-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-xl-screen-dark-mode-1.png
new file mode 100644
index 0000000000..2cca0d31a0
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-1.png
new file mode 100644
index 0000000000..39d26a9482
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-1.png
new file mode 100644
index 0000000000..4b8669777d
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-tooltips-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-tooltips-1.png
new file mode 100644
index 0000000000..54fcbfb516
Binary files /dev/null and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-tooltips-1.png differ
diff --git a/ui/snippets/networkMenu/NetworkLogo.pw.tsx b/ui/snippets/networkMenu/NetworkLogo.pw.tsx
index 12c2d8da12..0c4985cbd2 100644
--- a/ui/snippets/networkMenu/NetworkLogo.pw.tsx
+++ b/ui/snippets/networkMenu/NetworkLogo.pw.tsx
@@ -1,81 +1,50 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import type { Locator } from '@playwright/test';
 import React from 'react';
 
-import { buildExternalAssetFilePath } from 'configs/app/utils';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import * as app from 'playwright/utils/app';
-import * as configs from 'playwright/utils/configs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import NetworkLogo from './NetworkLogo';
 
-base.describe('placeholder logo', () => {
-  const test = base.extend({
-    context: contextWithEnvs([
-      { name: 'NEXT_PUBLIC_NETWORK_LOGO', value: '' },
-      { name: 'NEXT_PUBLIC_NETWORK_ICON', value: '' },
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ]) as any,
+const LOGO_URL = 'https://localhost:3000/my-logo.png';
+const ICON_URL = 'https://localhost:3000/my-icon.png';
+
+test.describe('placeholder logo', () => {
+  test.beforeEach(async({ mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_NETWORK_LOGO', '' ],
+      [ 'NEXT_PUBLIC_NETWORK_ICON', '' ],
+    ]);
   });
 
-  test('+@dark-mode', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <NetworkLogo/>
-      </TestApp>,
-    );
+  test('+@dark-mode', async({ render }) => {
+    const component = await render(<NetworkLogo/>);
 
     await expect(component.locator('a')).toHaveScreenshot();
   });
 
   test.describe('screen xl', () => {
-    test.use({ viewport: configs.viewport.xl });
+    test.use({ viewport: pwConfig.viewport.xl });
 
-    test('+@dark-mode', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          <NetworkLogo/>
-        </TestApp>,
-      );
+    test('+@dark-mode', async({ render }) => {
+      const component = await render(<NetworkLogo/>);
 
       await expect(component.locator('a')).toHaveScreenshot();
     });
   });
 });
 
-base.describe('custom logo', () => {
-  const LOGO_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_NETWORK_LOGO', 'https://localhost:3000/my-logo.png') || '';
-  const ICON_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_NETWORK_ICON', 'https://localhost:3000/my-icon.png') || '';
-  const test = base.extend({
-    context: contextWithEnvs([
-      { name: 'NEXT_PUBLIC_NETWORK_LOGO', value: LOGO_URL },
-      { name: 'NEXT_PUBLIC_NETWORK_ICON', value: ICON_URL },
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ]) as any,
-  });
-
+test.describe('custom logo', () => {
   let component: Locator;
 
-  test.beforeEach(async({ page, mount }) => {
-    await page.route(LOGO_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/network-logo.svg',
-      });
-    });
-    await page.route(ICON_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_svg.svg',
-      });
-    });
-
-    component = await mount(
-      <TestApp>
-        <NetworkLogo/>
-      </TestApp>,
-    );
+  test.beforeEach(async({ render, mockConfigResponse, mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_NETWORK_LOGO', LOGO_URL ],
+      [ 'NEXT_PUBLIC_NETWORK_ICON', ICON_URL ],
+    ]);
+    await mockConfigResponse('NEXT_PUBLIC_NETWORK_LOGO', LOGO_URL, './playwright/mocks/network-logo.svg', true);
+    await mockConfigResponse('NEXT_PUBLIC_NETWORK_ICON', ICON_URL, './playwright/mocks/image_svg.svg', true);
+    component = await render(<NetworkLogo/>);
   });
 
   test('+@dark-mode', async() => {
@@ -83,7 +52,7 @@ base.describe('custom logo', () => {
   });
 
   test.describe('screen xl', () => {
-    test.use({ viewport: configs.viewport.xl });
+    test.use({ viewport: pwConfig.viewport.xl });
 
     test('+@dark-mode', async() => {
       await expect(component.locator('a')).toHaveScreenshot();
@@ -91,54 +60,22 @@ base.describe('custom logo', () => {
   });
 });
 
-base.describe('custom logo with dark option -@default +@dark-mode', () => {
-  const LOGO_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_NETWORK_LOGO', 'https://localhost:3000/my-logo.png') || '';
-  const LOGO_URL_DARK = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_NETWORK_LOGO_DARK', 'https://localhost:3000/my-logo.png') || '';
-  const ICON_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_NETWORK_ICON', 'https://localhost:3000/my-icon.png') || '';
-  const ICON_URL_DARK = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_NETWORK_ICON_DARK', 'https://localhost:3000/my-icon.png') || '';
-  const test = base.extend({
-    context: contextWithEnvs([
-      { name: 'NEXT_PUBLIC_NETWORK_LOGO', value: LOGO_URL },
-      { name: 'NEXT_PUBLIC_NETWORK_LOGO_DARK', value: LOGO_URL_DARK },
-      { name: 'NEXT_PUBLIC_NETWORK_ICON', value: ICON_URL },
-      { name: 'NEXT_PUBLIC_NETWORK_ICON_DARK', value: ICON_URL_DARK },
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ]) as any,
-  });
-
+test.describe('custom logo with dark option -@default +@dark-mode', () => {
   let component: Locator;
 
-  test.beforeEach(async({ page, mount }) => {
-    await page.route(LOGO_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_long.jpg',
-      });
-    });
-    await page.route(LOGO_URL_DARK, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_long.jpg',
-      });
-    });
-    await page.route(ICON_URL, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-    await page.route(ICON_URL_DARK, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-
-    component = await mount(
-      <TestApp>
-        <NetworkLogo/>
-      </TestApp>,
-    );
+  test.beforeEach(async({ render, mockConfigResponse, mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_NETWORK_LOGO', LOGO_URL ],
+      [ 'NEXT_PUBLIC_NETWORK_LOGO_DARK', LOGO_URL ],
+      [ 'NEXT_PUBLIC_NETWORK_ICON', ICON_URL ],
+      [ 'NEXT_PUBLIC_NETWORK_ICON_DARK', ICON_URL ],
+    ]);
+    await mockConfigResponse('NEXT_PUBLIC_NETWORK_LOGO', LOGO_URL, './playwright/mocks/image_long.jpg', true);
+    await mockConfigResponse('NEXT_PUBLIC_NETWORK_LOGO_DARK', LOGO_URL, './playwright/mocks/image_long.jpg', true);
+    await mockConfigResponse('NEXT_PUBLIC_NETWORK_ICON', ICON_URL, './playwright/mocks/image_s.jpg', true);
+    await mockConfigResponse('NEXT_PUBLIC_NETWORK_ICON_DARK', ICON_URL, './playwright/mocks/image_s.jpg', true);
+
+    component = await render(<NetworkLogo/>);
   });
 
   test('', async() => {
@@ -146,7 +83,7 @@ base.describe('custom logo with dark option -@default +@dark-mode', () => {
   });
 
   test.describe('screen xl', () => {
-    test.use({ viewport: configs.viewport.xl });
+    test.use({ viewport: pwConfig.viewport.xl });
 
     test('', async() => {
       await expect(component.locator('a')).toHaveScreenshot();
diff --git a/ui/snippets/networkMenu/NetworkLogo.tsx b/ui/snippets/networkMenu/NetworkLogo.tsx
index c89029e58a..7c8a935efa 100644
--- a/ui/snippets/networkMenu/NetworkLogo.tsx
+++ b/ui/snippets/networkMenu/NetworkLogo.tsx
@@ -1,5 +1,4 @@
-import type { StyleProps } from '@chakra-ui/react';
-import { Box, Image, useColorModeValue, Skeleton } from '@chakra-ui/react';
+import { Box, Image, useColorModeValue, Skeleton, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
@@ -10,10 +9,10 @@ import IconSvg from 'ui/shared/IconSvg';
 interface Props {
   isCollapsed?: boolean;
   onClick?: (event: React.SyntheticEvent) => void;
-  imageProps?: StyleProps;
+  className?: string;
 }
 
-const LogoFallback = ({ isCollapsed, isSmall, imageProps }: { isCollapsed?: boolean; isSmall?: boolean; imageProps?: StyleProps }) => {
+const LogoFallback = ({ isCollapsed, isSmall }: { isCollapsed?: boolean; isSmall?: boolean }) => {
   const field = isSmall ? 'icon' : 'logo';
   const logoColor = useColorModeValue('blue.600', 'white');
 
@@ -27,7 +26,7 @@ const LogoFallback = ({ isCollapsed, isSmall, imageProps }: { isCollapsed?: bool
     xl: isCollapsed ? 'none' : 'block',
   };
 
-  if (config.UI.sidebar[field].default) {
+  if (config.UI.navigation[field].default) {
     return <Skeleton w="100%" borderRadius="sm" display={ display }/>;
   }
 
@@ -38,21 +37,21 @@ const LogoFallback = ({ isCollapsed, isSmall, imageProps }: { isCollapsed?: bool
       height="100%"
       color={ logoColor }
       display={ display }
-      { ...imageProps }
     />
   );
 };
 
-const NetworkLogo = ({ isCollapsed, onClick, imageProps }: Props) => {
+const NetworkLogo = ({ isCollapsed, onClick, className }: Props) => {
 
-  const logoSrc = useColorModeValue(config.UI.sidebar.logo.default, config.UI.sidebar.logo.dark || config.UI.sidebar.logo.default);
-  const iconSrc = useColorModeValue(config.UI.sidebar.icon.default, config.UI.sidebar.icon.dark || config.UI.sidebar.icon.default);
+  const logoSrc = useColorModeValue(config.UI.navigation.logo.default, config.UI.navigation.logo.dark || config.UI.navigation.logo.default);
+  const iconSrc = useColorModeValue(config.UI.navigation.icon.default, config.UI.navigation.icon.dark || config.UI.navigation.icon.default);
   const darkModeFilter = { filter: 'brightness(0) invert(1)' };
-  const logoStyle = useColorModeValue({}, !config.UI.sidebar.logo.dark ? darkModeFilter : {});
-  const iconStyle = useColorModeValue({}, !config.UI.sidebar.icon.dark ? darkModeFilter : {});
+  const logoStyle = useColorModeValue({}, !config.UI.navigation.logo.dark ? darkModeFilter : {});
+  const iconStyle = useColorModeValue({}, !config.UI.navigation.icon.dark ? darkModeFilter : {});
 
   return (
     <Box
+      className={ className }
       as="a"
       href={ route({ pathname: '/' }) }
       width={{ base: '120px', lg: isCollapsed === false ? '120px' : '30px', xl: isCollapsed ? '30px' : '120px' }}
@@ -69,10 +68,9 @@ const NetworkLogo = ({ isCollapsed, onClick, imageProps }: Props) => {
         h="100%"
         src={ logoSrc }
         alt={ `${ config.chain.name } network logo` }
-        fallback={ <LogoFallback isCollapsed={ isCollapsed } imageProps={ imageProps }/> }
+        fallback={ <LogoFallback isCollapsed={ isCollapsed }/> }
         display={{ base: 'block', lg: isCollapsed === false ? 'block' : 'none', xl: isCollapsed ? 'none' : 'block' }}
         style={ logoStyle }
-        { ...imageProps }
       />
       { /* small logo */ }
       <Image
@@ -80,13 +78,12 @@ const NetworkLogo = ({ isCollapsed, onClick, imageProps }: Props) => {
         h="100%"
         src={ iconSrc }
         alt={ `${ config.chain.name } network logo` }
-        fallback={ <LogoFallback isCollapsed={ isCollapsed } imageProps={ imageProps } isSmall/> }
+        fallback={ <LogoFallback isCollapsed={ isCollapsed } isSmall/> }
         display={{ base: 'none', lg: isCollapsed === false ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}
         style={ iconStyle }
-        { ...imageProps }
       />
     </Box>
   );
 };
 
-export default React.memo(NetworkLogo);
+export default React.memo(chakra(NetworkLogo));
diff --git a/ui/snippets/networkMenu/NetworkMenu.pw.tsx b/ui/snippets/networkMenu/NetworkMenu.pw.tsx
index 808f198c2d..71159ec0f5 100644
--- a/ui/snippets/networkMenu/NetworkMenu.pw.tsx
+++ b/ui/snippets/networkMenu/NetworkMenu.pw.tsx
@@ -1,45 +1,23 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import { buildExternalAssetFilePath } from 'configs/app/utils';
 import { FEATURED_NETWORKS_MOCK } from 'mocks/config/network';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import * as app from 'playwright/utils/app';
+import { test, expect } from 'playwright/lib';
 
 import NetworkMenu from './NetworkMenu';
 
-const FEATURED_NETWORKS_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_FEATURED_NETWORKS', 'https://localhost:3000/featured-networks.json') || '';
+const FEATURED_NETWORKS_URL = 'https://localhost:3000/featured-networks.json';
+const LOGO_URL = 'https://localhost:3000/my-logo.png';
 
-const extendedTest = test.extend({
-  context: contextWithEnvs([
-    { name: 'NEXT_PUBLIC_FEATURED_NETWORKS', value: FEATURED_NETWORKS_URL },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
-});
+test.use({ viewport: { width: 1600, height: 1000 } });
+
+test('base view +@dark-mode', async({ render, page, mockConfigResponse, mockAssetResponse, mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL ],
+  ]);
+  await mockConfigResponse('NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL, FEATURED_NETWORKS_MOCK);
+  await mockAssetResponse(LOGO_URL, './playwright/mocks/image_s.jpg');
 
-extendedTest.use({ viewport: { width: 1600, height: 1000 } });
-
-extendedTest('base view +@dark-mode', async({ mount, page }) => {
-  const LOGO_URL = 'https://localhost:3000/my-logo.png';
-  await page.route(LOGO_URL, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
-  await page.route(FEATURED_NETWORKS_URL, (route) => {
-    return route.fulfill({
-      status: 200,
-      body: FEATURED_NETWORKS_MOCK,
-    });
-  });
-
-  const component = await mount(
-    <TestApp>
-      <NetworkMenu/>
-    </TestApp>,
-  );
+  const component = await render(<NetworkMenu/>);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 36, height: 36 } });
 
diff --git a/ui/snippets/networkMenu/NetworkMenu.tsx b/ui/snippets/networkMenu/NetworkMenu.tsx
index 01888e0b6a..4fd11a2965 100644
--- a/ui/snippets/networkMenu/NetworkMenu.tsx
+++ b/ui/snippets/networkMenu/NetworkMenu.tsx
@@ -1,6 +1,8 @@
-import { Popover, PopoverTrigger } from '@chakra-ui/react';
+import { PopoverTrigger } from '@chakra-ui/react';
 import React from 'react';
 
+import Popover from 'ui/shared/chakra/Popover';
+
 import NetworkMenuButton from './NetworkMenuButton';
 import NetworkMenuContentDesktop from './NetworkMenuContentDesktop';
 import useNetworkMenu from './useNetworkMenu';
@@ -13,7 +15,7 @@ const NetworkMenu = ({ isCollapsed }: Props) => {
   const menu = useNetworkMenu();
 
   return (
-    <Popover openDelay={ 300 } placement="right-start" gutter={ 8 } isLazy isOpen={ menu.isOpen } onClose={ menu.onClose }>
+    <Popover openDelay={ 300 } placement="right-start" isLazy isOpen={ menu.isOpen } onClose={ menu.onClose }>
       <PopoverTrigger>
         <NetworkMenuButton
           marginLeft="auto"
diff --git a/ui/snippets/networkMenu/NetworkMenuContentDesktop.tsx b/ui/snippets/networkMenu/NetworkMenuContentDesktop.tsx
index 89db170903..bb640fd1bc 100644
--- a/ui/snippets/networkMenu/NetworkMenuContentDesktop.tsx
+++ b/ui/snippets/networkMenu/NetworkMenuContentDesktop.tsx
@@ -1,4 +1,4 @@
-import { PopoverContent, PopoverBody, Text, Tabs, TabList, TabPanels, TabPanel, Tab, VStack, Skeleton, Flex, useColorModeValue } from '@chakra-ui/react';
+import { PopoverContent, PopoverBody, Tabs, TabList, TabPanels, TabPanel, Tab, VStack, Skeleton, Flex, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import type { FeaturedNetwork, NetworkGroup } from 'types/networks';
@@ -12,65 +12,79 @@ interface Props {
 
 const NetworkMenuPopup = ({ items, tabs }: Props) => {
   const selectedNetwork = items?.find(({ isActive }) => isActive);
-  const selectedTab = tabs.findIndex((tab) => selectedNetwork?.group === tab);
+  const defaultTab = tabs.findIndex((tab) => selectedNetwork?.group === tab);
+
+  const [ tabIndex, setTabIndex ] = React.useState(defaultTab > -1 ? defaultTab : 0);
+
   const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
+  const handleTabChange = React.useCallback((index: number) => {
+    setTabIndex(index);
+  }, []);
+
   const content = !items || items.length === 0 ? (
     <>
-      <Skeleton h="30px" w="120px"/>
-      <Flex mt={ 4 } alignItems="center">
-        <Flex h="40px" w="105px" bgColor={ bgColor } borderRadius="base" px={ 4 } py={ 2 }>
-          <Skeleton h="24px" w="100%"/>
+      <Flex alignItems="center">
+        <Flex h="32px" w="105px" bgColor={ bgColor } borderRadius="base" px={ 4 } py={ 2 }>
+          <Skeleton h="16px" w="100%"/>
         </Flex>
-        <Skeleton h="24px" w="68px" mx={ 4 }/>
-        <Skeleton h="24px" w="45px" mx={ 4 }/>
+        <Skeleton h="16px" w="68px" mx={ 4 }/>
+        <Skeleton h="16px" w="45px" mx={ 4 }/>
       </Flex>
-      <Flex mt={ 8 } flexDir="column" rowGap={ 2 }>
-        <Flex mx={ 4 } my={ 2 } alignItems="center">
+      <Flex mt={ 3 } flexDir="column" rowGap={ 2 }>
+        <Flex mx={ 3 } my={ 2 } alignItems="center">
           <Skeleton h="30px" w="30px" borderRadius="full"/>
-          <Skeleton h="24px" w="120px" ml={ 3 }/>
+          <Skeleton h="16px" w="120px" ml={ 3 }/>
         </Flex>
-        <Flex mx={ 4 } my={ 2 } alignItems="center">
+        <Flex mx={ 3 } my={ 2 } alignItems="center">
           <Skeleton h="30px" w="30px" borderRadius="full"/>
-          <Skeleton h="24px" w="180px" ml={ 3 }/>
+          <Skeleton h="16px" w="180px" ml={ 3 }/>
         </Flex>
-        <Flex mx={ 4 } my={ 2 } alignItems="center">
+        <Flex mx={ 3 } my={ 2 } alignItems="center">
           <Skeleton h="30px" w="30px" borderRadius="full"/>
-          <Skeleton h="24px" w="150px" ml={ 3 }/>
+          <Skeleton h="16px" w="150px" ml={ 3 }/>
         </Flex>
       </Flex>
     </>
   ) : (
-    <>
-      <Text as="h4" fontSize="18px" lineHeight="30px" fontWeight="500">Networks</Text>
-      <Tabs variant="soft-rounded" mt={ 4 } isLazy defaultIndex={ selectedTab !== -1 ? selectedTab : undefined }>
-        { tabs.length > 1 && (
-          <TabList>
-            { tabs.map((tab) => <Tab key={ tab } textTransform="capitalize">{ tab }</Tab>) }
-          </TabList>
-        ) }
-        <TabPanels mt={ 8 }>
-          { tabs.map((tab) => (
-            <TabPanel key={ tab } p={ 0 }>
-              <VStack as="ul" spacing={ 2 } alignItems="stretch" mt={ 4 }>
-                { items
-                  .filter((network) => network.group === tab)
-                  .map((network) => (
-                    <NetworkMenuLink
-                      key={ network.title }
-                      { ...network }
-                    />
-                  )) }
-              </VStack>
-            </TabPanel>
+    <Tabs
+      variant="outline"
+      colorScheme="gray"
+      size="sm"
+      isLazy
+      index={ tabIndex }
+      onChange={ handleTabChange }
+    >
+      { tabs.length > 1 && (
+        <TabList columnGap={ 2 }>
+          { tabs.map((tab, index) => (
+            <Tab key={ tab } textTransform="capitalize" { ...(tabIndex === index ? { 'data-selected': 'true' } : {}) }>
+              { tab }
+            </Tab>
           )) }
-        </TabPanels>
-      </Tabs>
-    </>
+        </TabList>
+      ) }
+      <TabPanels mt={ 3 }>
+        { tabs.map((tab) => (
+          <TabPanel key={ tab } p={ 0 }>
+            <VStack as="ul" spacing={ 1 } alignItems="stretch" mt={ 4 } maxH="516px" overflowY="scroll">
+              { items
+                .filter((network) => network.group === tab)
+                .map((network) => (
+                  <NetworkMenuLink
+                    key={ network.title }
+                    { ...network }
+                  />
+                )) }
+            </VStack>
+          </TabPanel>
+        )) }
+      </TabPanels>
+    </Tabs>
   );
 
   return (
-    <PopoverContent w="382px">
+    <PopoverContent w="330px">
       <PopoverBody>
         { content }
       </PopoverBody>
diff --git a/ui/snippets/networkMenu/NetworkMenuContentMobile.tsx b/ui/snippets/networkMenu/NetworkMenuContentMobile.tsx
index aa56ba83f6..357830f831 100644
--- a/ui/snippets/networkMenu/NetworkMenuContentMobile.tsx
+++ b/ui/snippets/networkMenu/NetworkMenuContentMobile.tsx
@@ -26,29 +26,28 @@ const NetworkMenuContentMobile = ({ items, tabs }: Props) => {
   }, []);
 
   const content = !items || items.length === 0 ? (
-    <>
-      <Skeleton h="32px" w="100%"/>
-      <Flex mt={ 6 } flexDir="column" rowGap={ 2 }>
-        <Flex mx={ 3 } my={ 2 } alignItems="center">
-          <Skeleton h="30px" w="30px" borderRadius="full"/>
-          <Skeleton h="20px" w="60px" ml={ 3 }/>
-        </Flex>
-        <Flex mx={ 3 } my={ 2 } alignItems="center">
-          <Skeleton h="30px" w="30px" borderRadius="full"/>
-          <Skeleton h="20px" w="120px" ml={ 3 }/>
-        </Flex>
-        <Flex mx={ 3 } my={ 2 } alignItems="center">
-          <Skeleton h="30px" w="30px" borderRadius="full"/>
-          <Skeleton h="20px" w="80px" ml={ 3 }/>
-        </Flex>
+    <Flex mt={ 6 } flexDir="column" rowGap={ 2 }>
+      <Flex mx={ 3 } my={ 2 } alignItems="center">
+        <Skeleton h="30px" w="30px" borderRadius="full"/>
+        <Skeleton h="20px" w="60px" ml={ 3 }/>
       </Flex>
-    </>
+      <Flex mx={ 3 } my={ 2 } alignItems="center">
+        <Skeleton h="30px" w="30px" borderRadius="full"/>
+        <Skeleton h="20px" w="120px" ml={ 3 }/>
+      </Flex>
+      <Flex mx={ 3 } my={ 2 } alignItems="center">
+        <Skeleton h="30px" w="30px" borderRadius="full"/>
+        <Skeleton h="20px" w="80px" ml={ 3 }/>
+      </Flex>
+    </Flex>
   ) : (
     <>
-      <Select size="xs" borderRadius="base" value={ selectedTab } onChange={ handleSelectChange } focusBorderColor="none">
-        { tabs.map((tab) => <option key={ tab } value={ tab }>{ capitalize(tab) }</option>) }
-      </Select>
-      <VStack as="ul" spacing={ 2 } alignItems="stretch" mt={ 6 }>
+      { tabs.length > 1 && (
+        <Select size="xs" borderRadius="base" value={ selectedTab } onChange={ handleSelectChange } mb={ 3 }>
+          { tabs.map((tab) => <option key={ tab } value={ tab }>{ capitalize(tab) }</option>) }
+        </Select>
+      ) }
+      <VStack as="ul" spacing={ 2 } alignItems="stretch">
         { items
           .filter(({ group }) => group === selectedTab)
           .map((network) => (
diff --git a/ui/snippets/networkMenu/NetworkMenuLink.tsx b/ui/snippets/networkMenu/NetworkMenuLink.tsx
index c629cd7460..b6fdc86a6f 100644
--- a/ui/snippets/networkMenu/NetworkMenuLink.tsx
+++ b/ui/snippets/networkMenu/NetworkMenuLink.tsx
@@ -32,8 +32,8 @@ const NetworkMenuLink = ({ title, icon, isActive, isMobile, url, invertIconInDar
       <Flex
         as="a"
         href={ url }
-        px={ isMobile ? 3 : 4 }
-        py={ 2 }
+        px={ 3 }
+        py="9px"
         alignItems="center"
         cursor="pointer"
         pointerEvents={ isActive ? 'none' : 'initial' }
diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-3.png b/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-3.png
index 5e7dc4a120..51117c86fb 100644
Binary files a/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-3.png and b/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-3.png differ
diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-4.png b/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-4.png
index 9da53d9357..1afae83b0a 100644
Binary files a/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-4.png and b/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_dark-color-mode_base-view-dark-mode-4.png differ
diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_default_base-view-dark-mode-3.png b/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_default_base-view-dark-mode-3.png
index 60836ceb3a..d47e6aa99d 100644
Binary files a/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_default_base-view-dark-mode-3.png and b/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_default_base-view-dark-mode-3.png differ
diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_default_base-view-dark-mode-4.png b/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_default_base-view-dark-mode-4.png
index 0cccc6f2b0..0047402b4f 100644
Binary files a/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_default_base-view-dark-mode-4.png and b/ui/snippets/networkMenu/__screenshots__/NetworkMenu.pw.tsx_default_base-view-dark-mode-4.png differ
diff --git a/ui/snippets/networkMenu/useColors.ts b/ui/snippets/networkMenu/useColors.ts
index 06efe4f87f..40044366fd 100644
--- a/ui/snippets/networkMenu/useColors.ts
+++ b/ui/snippets/networkMenu/useColors.ts
@@ -5,18 +5,18 @@ export default function useColors() {
     text: {
       'default': useColorModeValue('gray.600', 'gray.400'),
       active: useColorModeValue('blackAlpha.900', 'whiteAlpha.900'),
-      hover: useColorModeValue('blue.600', 'link_hovered'),
+      hover: 'link_hovered',
     },
     iconPlaceholder: {
       'default': useColorModeValue('blackAlpha.100', 'whiteAlpha.300'),
     },
     bg: {
       'default': 'transparent',
-      active: useColorModeValue('blue.50', 'gray.800'),
+      active: useColorModeValue('blue.50', 'whiteAlpha.100'),
     },
     border: {
       'default': 'divider',
-      active: useColorModeValue('blue.50', 'gray.800'),
+      active: useColorModeValue('blue.50', 'whiteAlpha.100'),
     },
   };
 }
diff --git a/ui/snippets/networkMenu/useNetworkMenu.tsx b/ui/snippets/networkMenu/useNetworkMenu.tsx
index c6a75b7554..2ac2b8af55 100644
--- a/ui/snippets/networkMenu/useNetworkMenu.tsx
+++ b/ui/snippets/networkMenu/useNetworkMenu.tsx
@@ -15,8 +15,8 @@ export default function useNetworkMenu() {
   const fetch = useFetch();
   const { isPending, data } = useQuery<unknown, ResourceError<unknown>, Array<FeaturedNetwork>>({
     queryKey: [ 'featured-network' ],
-    queryFn: async() => fetch(config.UI.sidebar.featuredNetworks || '', undefined, { resource: 'featured-network' }),
-    enabled: Boolean(config.UI.sidebar.featuredNetworks) && isOpen,
+    queryFn: async() => fetch(config.UI.navigation.featuredNetworks || '', undefined, { resource: 'featured-network' }),
+    enabled: Boolean(config.UI.navigation.featuredNetworks) && isOpen,
     staleTime: Infinity,
   });
 
diff --git a/ui/snippets/profileMenu/ProfileMenuContent.tsx b/ui/snippets/profileMenu/ProfileMenuContent.tsx
index 602fe2ed07..b4086850c4 100644
--- a/ui/snippets/profileMenu/ProfileMenuContent.tsx
+++ b/ui/snippets/profileMenu/ProfileMenuContent.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Text, VStack, useColorModeValue } from '@chakra-ui/react';
+import { Box, Button, VStack, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { UserInfo } from 'types/api/account';
@@ -7,7 +7,7 @@ import config from 'configs/app';
 import useNavItems from 'lib/hooks/useNavItems';
 import * as mixpanel from 'lib/mixpanel/index';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
-import NavLink from 'ui/snippets/navigation/NavLink';
+import NavLink from 'ui/snippets/navigation/vertical/NavLink';
 
 const feature = config.features.account;
 
@@ -18,7 +18,6 @@ type Props = {
 
 const ProfileMenuContent = ({ data, onNavLinkClick }: Props) => {
   const { accountNavItems, profileItem } = useNavItems();
-  const primaryTextColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
 
   const handleSingOutClick = React.useCallback(() => {
     mixpanel.logEvent(
@@ -32,37 +31,28 @@ const ProfileMenuContent = ({ data, onNavLinkClick }: Props) => {
     return null;
   }
 
+  const userName = data?.email || data?.nickname || data?.name;
+
   return (
     <Box>
-      { (data?.name || data?.nickname) && (
-        <Text
+      { userName && (
+        <Box
           fontSize="sm"
           fontWeight={ 500 }
-          color={ primaryTextColor }
-          { ...getDefaultTransitionProps() }
-        >
-        Signed in as { data.name || data.nickname }
-        </Text>
-      ) }
-      { data?.email && (
-        <Text
-          fontSize="sm"
           mb={ 1 }
-          fontWeight={ 500 }
-          color="gray.500"
-          { ...getDefaultTransitionProps() }
         >
-          { data.email }
-        </Text>
+          <span>Signed in as </span>
+          <chakra.span color="text_secondary">{ userName }</chakra.span>
+        </Box>
       ) }
-      <NavLink item={ profileItem } isActive={ undefined } px="0px" isCollapsed={ false } onClick={ onNavLinkClick }/>
+      <NavLink item={ profileItem } disableActiveState={ true } px="0px" isCollapsed={ false } onClick={ onNavLinkClick }/>
       <Box as="nav" mt={ 2 } pt={ 2 } borderTopColor="divider" borderTopWidth="1px" { ...getDefaultTransitionProps() }>
         <VStack as="ul" spacing="0" alignItems="flex-start" overflow="hidden">
           { accountNavItems.map((item) => (
             <NavLink
               key={ item.text }
               item={ item }
-              isActive={ undefined }
+              disableActiveState={ true }
               isCollapsed={ false }
               px="0px"
               onClick={ onNavLinkClick }
diff --git a/ui/snippets/profileMenu/ProfileMenuDesktop.pw.tsx b/ui/snippets/profileMenu/ProfileMenuDesktop.pw.tsx
index 381777ecb2..5b1f67d618 100644
--- a/ui/snippets/profileMenu/ProfileMenuDesktop.pw.tsx
+++ b/ui/snippets/profileMenu/ProfileMenuDesktop.pw.tsx
@@ -1,9 +1,10 @@
+import type { BrowserContext } from '@playwright/test';
 import React from 'react';
 
+import config from 'configs/app';
 import * as profileMock from 'mocks/user/profile';
-import authFixture from 'playwright/fixtures/auth';
+import { contextWithAuth } from 'playwright/fixtures/auth';
 import { test, expect } from 'playwright/lib';
-import * as app from 'playwright/utils/app';
 
 import ProfileMenuDesktop from './ProfileMenuDesktop';
 
@@ -17,14 +18,11 @@ test('no auth', async({ render, page }) => {
   const component = await render(<ProfileMenuDesktop/>, { hooksConfig });
   await component.locator('a').click();
 
-  expect(page.url()).toBe(`${ app.url }/auth/auth0?path=%2F`);
+  expect(page.url()).toBe(`${ config.app.baseUrl }/auth/auth0?path=%2F`);
 });
 
-const authTest = test.extend({
-  context: ({ context }, use) => {
-    authFixture(context);
-    use(context);
-  },
+const authTest = test.extend<{ context: BrowserContext }>({
+  context: contextWithAuth,
 });
 authTest('auth +@dark-mode', async({ render, page, mockApiResponse, mockAssetResponse }) => {
   await mockApiResponse('user_info', profileMock.base);
diff --git a/ui/snippets/profileMenu/ProfileMenuDesktop.tsx b/ui/snippets/profileMenu/ProfileMenuDesktop.tsx
index 90e445ec47..d0e0e05fcd 100644
--- a/ui/snippets/profileMenu/ProfileMenuDesktop.tsx
+++ b/ui/snippets/profileMenu/ProfileMenuDesktop.tsx
@@ -1,23 +1,24 @@
 import type { IconButtonProps } from '@chakra-ui/react';
-import { Popover, PopoverContent, PopoverBody, PopoverTrigger, IconButton, Tooltip, Box } from '@chakra-ui/react';
+import { PopoverContent, PopoverBody, PopoverTrigger, IconButton, Tooltip, Box, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
 import useLoginUrl from 'lib/hooks/useLoginUrl';
 import * as mixpanel from 'lib/mixpanel/index';
+import Popover from 'ui/shared/chakra/Popover';
 import UserAvatar from 'ui/shared/UserAvatar';
 import ProfileMenuContent from 'ui/snippets/profileMenu/ProfileMenuContent';
 
-import useMenuButtonColors from '../useMenuButtonColors';
-
 type Props = {
   isHomePage?: boolean;
+  className?: string;
+  fallbackIconSize?: number;
+  buttonBoxSize?: string;
 };
 
-const ProfileMenuDesktop = ({ isHomePage }: Props) => {
+const ProfileMenuDesktop = ({ isHomePage, className, fallbackIconSize, buttonBoxSize }: Props) => {
   const { data, error, isPending } = useFetchProfileInfo();
   const loginUrl = useLoginUrl();
-  const { themedBackground, themedBorderColor, themedColor } = useMenuButtonColors();
   const [ hasMenu, setHasMenu ] = React.useState(false);
 
   React.useEffect(() => {
@@ -46,29 +47,6 @@ const ProfileMenuDesktop = ({ isHomePage }: Props) => {
     };
   })();
 
-  const variant = React.useMemo(() => {
-    if (hasMenu) {
-      return 'subtle';
-    }
-    return isHomePage ? 'solid' : 'outline';
-  }, [ hasMenu, isHomePage ]);
-
-  let iconButtonStyles: Partial<IconButtonProps> = {};
-  if (hasMenu) {
-    iconButtonStyles = {
-      bg: isHomePage ? 'blue.50' : themedBackground,
-    };
-  } else if (isHomePage) {
-    iconButtonStyles = {
-      color: 'white',
-    };
-  } else {
-    iconButtonStyles = {
-      borderColor: themedBorderColor,
-      color: themedColor,
-    };
-  }
-
   return (
     <Popover openDelay={ 300 } placement="bottom-end" gutter={ 10 } isLazy>
       <Tooltip
@@ -81,20 +59,20 @@ const ProfileMenuDesktop = ({ isHomePage }: Props) => {
         <Box>
           <PopoverTrigger>
             <IconButton
+              className={ className }
               aria-label="profile menu"
-              icon={ <UserAvatar size={ 20 }/> }
-              variant={ variant }
-              colorScheme="blue"
-              boxSize="40px"
+              icon={ <UserAvatar size={ 20 } fallbackIconSize={ fallbackIconSize }/> }
+              variant={ isHomePage ? 'hero' : 'header' }
+              data-selected={ hasMenu }
+              boxSize={ buttonBoxSize ?? '40px' }
               flexShrink={ 0 }
               { ...iconButtonProps }
-              { ...iconButtonStyles }
             />
           </PopoverTrigger>
         </Box>
       </Tooltip>
       { hasMenu && (
-        <PopoverContent w="212px">
+        <PopoverContent maxW="400px" minW="220px" w="min-content">
           <PopoverBody padding="24px 16px 16px 16px">
             <ProfileMenuContent data={ data }/>
           </PopoverBody>
@@ -104,4 +82,4 @@ const ProfileMenuDesktop = ({ isHomePage }: Props) => {
   );
 };
 
-export default ProfileMenuDesktop;
+export default chakra(ProfileMenuDesktop);
diff --git a/ui/snippets/profileMenu/ProfileMenuMobile.pw.tsx b/ui/snippets/profileMenu/ProfileMenuMobile.pw.tsx
index b5d3fcc373..0867bf2bd8 100644
--- a/ui/snippets/profileMenu/ProfileMenuMobile.pw.tsx
+++ b/ui/snippets/profileMenu/ProfileMenuMobile.pw.tsx
@@ -1,61 +1,40 @@
-import { test, expect, devices } from '@playwright/experimental-ct-react';
+import type { BrowserContext } from '@playwright/test';
 import React from 'react';
 
+import config from 'configs/app';
 import * as profileMock from 'mocks/user/profile';
-import authFixture from 'playwright/fixtures/auth';
-import TestApp from 'playwright/TestApp';
-import * as app from 'playwright/utils/app';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { contextWithAuth } from 'playwright/fixtures/auth';
+import { test, expect, devices } from 'playwright/lib';
 
 import ProfileMenuMobile from './ProfileMenuMobile';
 
-test('no auth', async({ mount, page }) => {
+test('no auth', async({ render, page }) => {
   const hooksConfig = {
     router: {
       asPath: '/',
       pathname: '/',
     },
   };
-  const component = await mount(
-    <TestApp>
-      <ProfileMenuMobile/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+  const component = await render(<ProfileMenuMobile/>, { hooksConfig });
   await component.locator('a').click();
-  expect(page.url()).toBe(`${ app.url }/auth/auth0?path=%2F`);
+
+  expect(page.url()).toBe(`${ config.app.baseUrl }/auth/auth0?path=%2F`);
 });
 
 test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-test.describe('auth', () => {
-  const extendedTest = test.extend({
-    context: ({ context }, use) => {
-      authFixture(context);
-      use(context);
-    },
-  });
+const authTest = test.extend<{ context: BrowserContext }>({
+  context: contextWithAuth,
+});
 
-  extendedTest('base view', async({ mount, page }) => {
-    await page.route(buildApiUrl('user_info'), (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(profileMock.base),
-    }));
-    await page.route(profileMock.base.avatar, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-
-    const component = await mount(
-      <TestApp>
-        <ProfileMenuMobile/>
-      </TestApp>,
-    );
+authTest.describe('auth', () => {
+  authTest('base view', async({ render, page, mockApiResponse, mockAssetResponse }) => {
+    await mockApiResponse('user_info', profileMock.base);
+    await mockAssetResponse(profileMock.base.avatar, './playwright/mocks/image_s.jpg');
 
+    const component = await render(<ProfileMenuMobile/>);
     await component.getByAltText(/Profile picture/i).click();
+
     await expect(page).toHaveScreenshot();
   });
 });
diff --git a/ui/snippets/profileMenu/ProfileMenuMobile.tsx b/ui/snippets/profileMenu/ProfileMenuMobile.tsx
index 0a1b97eda6..51feea6f4f 100644
--- a/ui/snippets/profileMenu/ProfileMenuMobile.tsx
+++ b/ui/snippets/profileMenu/ProfileMenuMobile.tsx
@@ -8,13 +8,10 @@ import * as mixpanel from 'lib/mixpanel/index';
 import UserAvatar from 'ui/shared/UserAvatar';
 import ProfileMenuContent from 'ui/snippets/profileMenu/ProfileMenuContent';
 
-import useMenuButtonColors from '../useMenuButtonColors';
-
 const ProfileMenuMobile = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { data, error, isPending } = useFetchProfileInfo();
   const loginUrl = useLoginUrl();
-  const { themedBackground, themedBorderColor, themedColor } = useMenuButtonColors();
   const [ hasMenu, setHasMenu ] = React.useState(false);
 
   const handleSignInClick = React.useCallback(() => {
@@ -48,13 +45,10 @@ const ProfileMenuMobile = () => {
       <IconButton
         aria-label="profile menu"
         icon={ <UserAvatar size={ 20 }/> }
-        variant={ data?.avatar ? 'subtle' : 'outline' }
-        colorScheme="gray"
+        variant="header"
+        data-selected={ hasMenu }
         boxSize="40px"
         flexShrink={ 0 }
-        bg={ data?.avatar ? themedBackground : undefined }
-        color={ themedColor }
-        borderColor={ !data?.avatar ? themedBorderColor : undefined }
         onClick={ hasMenu ? onOpen : undefined }
         { ...iconButtonProps }
       />
@@ -66,7 +60,7 @@ const ProfileMenuMobile = () => {
           autoFocus={ false }
         >
           <DrawerOverlay/>
-          <DrawerContent maxWidth="260px">
+          <DrawerContent maxWidth="300px">
             <DrawerBody p={ 6 }>
               <ProfileMenuContent data={ data } onNavLinkClick={ onClose }/>
             </DrawerBody>
diff --git a/ui/snippets/profileMenu/__screenshots__/ProfileMenuDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png b/ui/snippets/profileMenu/__screenshots__/ProfileMenuDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png
index 430e738c37..5e247adba1 100644
Binary files a/ui/snippets/profileMenu/__screenshots__/ProfileMenuDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png and b/ui/snippets/profileMenu/__screenshots__/ProfileMenuDesktop.pw.tsx_dark-color-mode_auth-dark-mode-1.png differ
diff --git a/ui/snippets/profileMenu/__screenshots__/ProfileMenuDesktop.pw.tsx_default_auth-dark-mode-1.png b/ui/snippets/profileMenu/__screenshots__/ProfileMenuDesktop.pw.tsx_default_auth-dark-mode-1.png
index b4ae10b93c..da481493f4 100644
Binary files a/ui/snippets/profileMenu/__screenshots__/ProfileMenuDesktop.pw.tsx_default_auth-dark-mode-1.png and b/ui/snippets/profileMenu/__screenshots__/ProfileMenuDesktop.pw.tsx_default_auth-dark-mode-1.png differ
diff --git a/ui/snippets/profileMenu/__screenshots__/ProfileMenuMobile.pw.tsx_default_auth-base-view-1.png b/ui/snippets/profileMenu/__screenshots__/ProfileMenuMobile.pw.tsx_default_auth-base-view-1.png
index b5ad715272..e0a36caf2b 100644
Binary files a/ui/snippets/profileMenu/__screenshots__/ProfileMenuMobile.pw.tsx_default_auth-base-view-1.png and b/ui/snippets/profileMenu/__screenshots__/ProfileMenuMobile.pw.tsx_default_auth-base-view-1.png differ
diff --git a/ui/snippets/searchBar/SearchBar.pw.tsx b/ui/snippets/searchBar/SearchBar.pw.tsx
index 9aef377007..4189e113e5 100644
--- a/ui/snippets/searchBar/SearchBar.pw.tsx
+++ b/ui/snippets/searchBar/SearchBar.pw.tsx
@@ -1,373 +1,240 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import { buildExternalAssetFilePath } from 'configs/app/utils';
-import * as textAdMock from 'mocks/ad/textAd';
 import { apps as appsMock } from 'mocks/apps/apps';
 import * as searchMock from 'mocks/search/index';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import * as app from 'playwright/utils/app';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import SearchBar from './SearchBar';
 
-const test = base.extend({
-  context: contextWithEnvs([
-    { name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: '' },
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
+test.beforeEach(async({ mockAssetResponse, mockEnvs, mockTextAd }) => {
+  await mockTextAd();
+  await mockAssetResponse(searchMock.token1.icon_url as string, './playwright/mocks/image_s.jpg');
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_MARKETPLACE_ENABLED', 'false' ],
+  ]);
 });
 
-test.beforeEach(async({ page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
-  await page.route(searchMock.token1.icon_url as string, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_s.jpg',
-    });
-  });
-});
-
-test('search by token name  +@mobile +@dark-mode', async({ mount, page }) => {
-  const API_URL = buildApiUrl('quick_search') + '?q=o';
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.token1,
-      searchMock.token2,
-    ]),
-  }));
-
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
+test('search by token name  +@mobile +@dark-mode', async({ render, page, mockApiResponse }) => {
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.token1,
+    searchMock.token2,
+  ], { queryParams: { q: 'o' } });
+  await render(<SearchBar/>);
   await page.getByPlaceholder(/search/i).fill('o');
-  await page.waitForResponse(API_URL);
+  await page.waitForResponse(apiUrl);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
 });
 
-test('search by contract name  +@mobile +@dark-mode', async({ mount, page }) => {
-  const API_URL = buildApiUrl('quick_search') + '?q=o';
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.contract1,
-      searchMock.address2,
-    ]),
-  }));
-
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
+test('search by contract name  +@mobile +@dark-mode', async({ render, page, mockApiResponse }) => {
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.contract1,
+    searchMock.contract2,
+    searchMock.address2,
+  ], { queryParams: { q: 'o' } });
+
+  await render(<SearchBar/>);
   await page.getByPlaceholder(/search/i).fill('o');
-  await page.waitForResponse(API_URL);
+  await page.waitForResponse(apiUrl);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
 });
 
-test('search by name homepage +@dark-mode', async({ mount, page }) => {
-  const API_URL = buildApiUrl('quick_search') + '?q=o';
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.token1,
-      searchMock.token2,
-      searchMock.contract1,
-    ]),
-  }));
-
-  await mount(
-    <TestApp>
-      <SearchBar isHomepage/>
-    </TestApp>,
-  );
+test('search by name homepage +@dark-mode', async({ render, page, mockApiResponse }) => {
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.token1,
+    searchMock.token2,
+    searchMock.contract1,
+  ], { queryParams: { q: 'o' } });
+  await render(<SearchBar isHomepage/>);
   await page.getByPlaceholder(/search/i).fill('o');
-  await page.waitForResponse(API_URL);
+  await page.waitForResponse(apiUrl);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
 });
 
-test('search by tag  +@mobile +@dark-mode', async({ mount, page }) => {
-  const API_URL = buildApiUrl('quick_search') + '?q=o';
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.label1,
-    ]),
-  }));
-
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
+test('search by tag  +@mobile +@dark-mode', async({ render, page, mockApiResponse }) => {
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.label1,
+  ], { queryParams: { q: 'o' } });
+  await render(<SearchBar/>);
   await page.getByPlaceholder(/search/i).fill('o');
-  await page.waitForResponse(API_URL);
+  await page.waitForResponse(apiUrl);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
 });
 
-test('search by address hash +@mobile', async({ mount, page }) => {
-  const API_URL = buildApiUrl('quick_search') + `?q=${ searchMock.address1.address }`;
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.address1,
-    ]),
-  }));
-
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
+test('search by address hash +@mobile', async({ render, page, mockApiResponse }) => {
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.address1,
+  ], { queryParams: { q: searchMock.address1.address } });
+  await render(<SearchBar/>);
   await page.getByPlaceholder(/search/i).fill(searchMock.address1.address);
-  await page.waitForResponse(API_URL);
+  await page.waitForResponse(apiUrl);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
 });
 
-test('search by block number +@mobile', async({ mount, page }) => {
-  const API_URL = buildApiUrl('quick_search') + `?q=${ searchMock.block1.block_number }`;
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.block1,
-      searchMock.block2,
-      searchMock.block3,
-    ]),
-  }));
-
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
+test('search by block number +@mobile', async({ render, page, mockApiResponse }) => {
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.block1,
+    searchMock.block2,
+    searchMock.block3,
+  ], { queryParams: { q: searchMock.block1.block_number } });
+  await render(<SearchBar/>);
   await page.getByPlaceholder(/search/i).fill(String(searchMock.block1.block_number));
-  await page.waitForResponse(API_URL);
+  await page.waitForResponse(apiUrl);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 600 } });
 });
 
-test('search by block hash +@mobile', async({ mount, page }) => {
-  const API_URL = buildApiUrl('quick_search') + `?q=${ searchMock.block1.block_hash }`;
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.block1,
-    ]),
-  }));
-
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
+test('search by block hash +@mobile', async({ render, page, mockApiResponse }) => {
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.block1,
+  ], { queryParams: { q: searchMock.block1.block_hash } });
+  await render(<SearchBar/>);
   await page.getByPlaceholder(/search/i).fill(searchMock.block1.block_hash);
-  await page.waitForResponse(API_URL);
+  await page.waitForResponse(apiUrl);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
 });
 
-test('search by tx hash +@mobile', async({ mount, page }) => {
-  const API_URL = buildApiUrl('quick_search') + `?q=${ searchMock.tx1.tx_hash }`;
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.tx1,
-    ]),
-  }));
-
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
+test('search by tx hash +@mobile', async({ render, page, mockApiResponse }) => {
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.tx1,
+  ], { queryParams: { q: searchMock.tx1.tx_hash } });
+  await render(<SearchBar/>);
   await page.getByPlaceholder(/search/i).fill(searchMock.tx1.tx_hash);
-  await page.waitForResponse(API_URL);
+  await page.waitForResponse(apiUrl);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
 });
 
-test('search by blob hash +@mobile', async({ mount, page }) => {
-  const API_URL = buildApiUrl('quick_search') + `?q=${ searchMock.blob1.blob_hash }`;
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.blob1,
-    ]),
-  }));
-
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
+test('search by blob hash +@mobile', async({ render, page, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.dataAvailability);
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.blob1,
+  ], { queryParams: { q: searchMock.blob1.blob_hash } });
+  await render(<SearchBar/>);
   await page.getByPlaceholder(/search/i).fill(searchMock.blob1.blob_hash);
-  await page.waitForResponse(API_URL);
+  await page.waitForResponse(apiUrl);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
 });
 
-const testWithUserOps = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.userOps) as any,
+test('search by domain name +@mobile', async({ render, page, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.nameService);
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.domain1,
+  ], { queryParams: { q: searchMock.domain1.ens_info.name } });
+
+  await render(<SearchBar/>);
+  await page.getByPlaceholder(/search/i).fill(searchMock.domain1.ens_info.name);
+  await page.waitForResponse(apiUrl);
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
 });
 
-testWithUserOps('search by user op hash +@mobile', async({ mount, page }) => {
-  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(textAdMock.duck),
-  }));
-  const API_URL = buildApiUrl('quick_search') + `?q=${ searchMock.tx1.tx_hash }`;
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.userOp1,
-    ]),
-  }));
-
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
+test('search by user op hash +@mobile', async({ render, page, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.userOps);
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.userOp1,
+  ], { queryParams: { q: searchMock.tx1.tx_hash } });
+  await render(<SearchBar/>);
   await page.getByPlaceholder(/search/i).fill(searchMock.tx1.tx_hash);
-  await page.waitForResponse(API_URL);
+  await page.waitForResponse(apiUrl);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
 });
 
-test('search with view all link', async({ mount, page }) => {
-  const API_URL = buildApiUrl('quick_search') + '?q=o';
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.token1,
-      searchMock.token2,
-      searchMock.contract1,
-      ...Array(47).fill(searchMock.contract1),
-    ]),
-  }));
-
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
+test('search with view all link', async({ render, page, mockApiResponse }) => {
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.token1,
+    searchMock.token2,
+    searchMock.contract1,
+    ...Array(47).fill(searchMock.contract1),
+  ], { queryParams: { q: 'o' } });
+  await render(<SearchBar/>);
   await page.getByPlaceholder(/search/i).fill('o');
-
-  await page.waitForResponse(API_URL);
+  await page.waitForResponse(apiUrl);
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
 });
 
-test('scroll suggest to category', async({ mount, page }) => {
-  const API_URL = buildApiUrl('quick_search') + '?q=o';
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify([
-      searchMock.token1,
-      searchMock.token2,
-      searchMock.contract1,
-      searchMock.token1,
-      searchMock.token2,
-      searchMock.contract1,
-      searchMock.token1,
-      searchMock.token2,
-      searchMock.contract1,
-      searchMock.token1,
-      searchMock.token2,
-      searchMock.contract1,
-    ]),
-  }));
-
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
+test('scroll suggest to category', async({ render, page, mockApiResponse }) => {
+  const apiUrl = await mockApiResponse('quick_search', [
+    searchMock.token1,
+    searchMock.token2,
+    searchMock.contract1,
+    searchMock.token1,
+    searchMock.token2,
+    searchMock.contract1,
+    searchMock.token1,
+    searchMock.token2,
+    searchMock.contract1,
+    searchMock.token1,
+    searchMock.token2,
+    searchMock.contract1,
+  ], { queryParams: { q: 'o' } });
+  await render(<SearchBar/>);
   await page.getByPlaceholder(/search/i).fill('o');
-  await page.waitForResponse(API_URL);
+  await page.waitForResponse(apiUrl);
 
   await page.getByRole('tab', { name: 'Addresses' }).click();
 
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
 });
 
-test('recent keywords suggest +@mobile', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <SearchBar/>
-    </TestApp>,
-  );
+test('recent keywords suggest +@mobile', async({ render, page }, { project }) => {
+  await render(<SearchBar/>);
   // eslint-disable-next-line max-len
   await page.evaluate(() => window.localStorage.setItem('recent_search_keywords', '["10x2d311959270e0bbdc1fc7bc6dbd8ad645c4dd8d6aa32f5f89d54629a924f112b","0x1d311959270e0bbdc1fc7bc6dbd8ad645c4dd8d6aa32f5f89d54629a924f112b","usd","bob"]'));
   await page.getByPlaceholder(/search/i).click();
-  await page.getByText('0x1d311959270e0bbdc1fc7bc6db').isVisible();
+  await page.getByText(project.name === 'mobile' ? '0x1d311959270e0bbdc1fc7bc6dbd...112b' : '0x1d311959270e0bbdc1fc7bc6dbd').isVisible();
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
 });
 
-base.describe('with apps', () => {
-  const MARKETPLACE_CONFIG_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', 'https://marketplace-config.json') || '';
-  const test = base.extend({
-    context: contextWithEnvs([
-      { name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: MARKETPLACE_CONFIG_URL },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ]) as any,
-  });
+test.describe('with apps', () => {
+  const MARKETPLACE_CONFIG_URL = 'http://localhost:4000/marketplace-config.json';
 
-  test('default view +@mobile', async({ mount, page }) => {
-    const API_URL = buildApiUrl('quick_search') + '?q=o';
-    await page.route(API_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify([
-        searchMock.token1,
-      ]),
-    }));
-
-    await page.route(MARKETPLACE_CONFIG_URL, (route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify(appsMock),
-    }));
-
-    await page.route(appsMock[0].logo, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-    await page.route(appsMock[1].logo as string, (route) => {
-      return route.fulfill({
-        status: 200,
-        path: './playwright/mocks/image_s.jpg',
-      });
-    });
-
-    await mount(
-      <TestApp>
-        <SearchBar/>
-      </TestApp>,
-    );
+  test('default view +@mobile', async({ render, page, mockApiResponse, mockConfigResponse, mockAssetResponse, mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_MARKETPLACE_ENABLED', 'true' ],
+      [ 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL ],
+    ]);
+    const apiUrl = await mockApiResponse('quick_search', [
+      searchMock.token1,
+    ], { queryParams: { q: 'o' } });
+    await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL, JSON.stringify(appsMock));
+    await mockAssetResponse(appsMock[0].logo, './playwright/mocks/image_s.jpg');
+    await mockAssetResponse(appsMock[1].logo, './playwright/mocks/image_s.jpg');
+
+    await render(<SearchBar/>);
     await page.getByPlaceholder(/search/i).fill('o');
+    await page.waitForResponse(apiUrl);
+
+    await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
+  });
+});
+
+test.describe('block countdown', () => {
+  test('no results +@mobile', async({ render, page, mockApiResponse }) => {
+    const apiUrl = await mockApiResponse('quick_search', [], { queryParams: { q: '1234567890' } });
+    await render(<SearchBar/>);
+    await page.getByPlaceholder(/search/i).fill('1234567890');
+    await page.waitForResponse(apiUrl);
+
+    await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
+  });
 
-    await page.waitForResponse(API_URL);
+  test('with results +@mobile', async({ render, page, mockApiResponse }) => {
+    const apiUrl = await mockApiResponse('quick_search', [
+      { ...searchMock.token1, name: '1234567890123456789' },
+    ], { queryParams: { q: '1234567890' } });
+    await render(<SearchBar/>);
+    await page.getByPlaceholder(/search/i).fill('1234567890');
+    await page.waitForResponse(apiUrl);
 
     await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
   });
diff --git a/ui/snippets/searchBar/SearchBar.tsx b/ui/snippets/searchBar/SearchBar.tsx
index 9ceee88101..51bbdce9a8 100644
--- a/ui/snippets/searchBar/SearchBar.tsx
+++ b/ui/snippets/searchBar/SearchBar.tsx
@@ -1,7 +1,6 @@
 import {
   Box,
   Portal,
-  Popover,
   PopoverTrigger,
   PopoverContent,
   PopoverBody,
@@ -15,12 +14,14 @@ import type { FormEvent } from 'react';
 import React from 'react';
 import { Element } from 'react-scroll';
 
+import type { Route } from 'nextjs-routes';
 import { route } from 'nextjs-routes';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import * as mixpanel from 'lib/mixpanel/index';
 import { getRecentSearchKeywords, saveToRecentKeywords } from 'lib/recentSearchKeywords';
-import LinkInternal from 'ui/shared/LinkInternal';
+import Popover from 'ui/shared/chakra/Popover';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 
 import SearchBarBackdrop from './SearchBarBackdrop';
 import SearchBarInput from './SearchBarInput';
@@ -45,21 +46,22 @@ const SearchBar = ({ isHomepage }: Props) => {
 
   const recentSearchKeywords = getRecentSearchKeywords();
 
-  const { searchTerm, debouncedSearchTerm, handleSearchTermChange, query, pathname } = useQuickSearchQuery();
+  const { searchTerm, debouncedSearchTerm, handleSearchTermChange, query } = useQuickSearchQuery();
 
   const handleSubmit = React.useCallback((event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (searchTerm) {
-      const url = route({ pathname: '/search-results', query: { q: searchTerm } });
+      const resultRoute: Route = { pathname: '/search-results', query: { q: searchTerm, redirect: 'true' } };
+      const url = route(resultRoute);
       mixpanel.logEvent(mixpanel.EventTypes.SEARCH_QUERY, {
         'Search query': searchTerm,
-        'Source page type': mixpanel.getPageType(pathname),
+        'Source page type': mixpanel.getPageType(router.pathname),
         'Result URL': url,
       });
       saveToRecentKeywords(searchTerm);
-      router.push({ pathname: '/search-results', query: { q: searchTerm } }, undefined, { shallow: true });
+      router.push(resultRoute, undefined, { shallow: true });
     }
-  }, [ searchTerm, pathname, router ]);
+  }, [ searchTerm, router ]);
 
   const handleFocus = React.useCallback(() => {
     onOpen();
@@ -88,18 +90,24 @@ const SearchBar = ({ isHomepage }: Props) => {
   const handleItemClick = React.useCallback((event: React.MouseEvent<HTMLAnchorElement>) => {
     mixpanel.logEvent(mixpanel.EventTypes.SEARCH_QUERY, {
       'Search query': searchTerm,
-      'Source page type': mixpanel.getPageType(pathname),
+      'Source page type': mixpanel.getPageType(router.pathname),
       'Result URL': event.currentTarget.href,
     });
     saveToRecentKeywords(searchTerm);
     onClose();
-  }, [ pathname, searchTerm, onClose ]);
+  }, [ router.pathname, searchTerm, onClose ]);
 
-  const menuPaddingX = isMobile && !isHomepage ? 32 : 0;
+  const menuPaddingX = isMobile && !isHomepage ? 24 : 0;
   const calculateMenuWidth = React.useCallback(() => {
     menuWidth.current = (inputRef.current?.getBoundingClientRect().width || 0) - menuPaddingX;
   }, [ menuPaddingX ]);
 
+  // clear input on page change
+  React.useEffect(() => {
+    handleSearchTermChange('');
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ router.pathname ]);
+
   React.useEffect(() => {
     const inputEl = inputRef.current;
     if (!inputEl) {
@@ -123,7 +131,7 @@ const SearchBar = ({ isHomepage }: Props) => {
         autoFocus={ false }
         onClose={ onClose }
         placement="bottom-start"
-        offset={ isMobile && !isHomepage ? [ 16, -4 ] : undefined }
+        offset={ isMobile && !isHomepage ? [ 12, -4 ] : [ 0, 8 ] }
         isLazy
       >
         <PopoverTrigger>
diff --git a/ui/snippets/searchBar/SearchBarInput.pw.tsx b/ui/snippets/searchBar/SearchBarInput.pw.tsx
index 8e6bd9b059..d365034acf 100644
--- a/ui/snippets/searchBar/SearchBarInput.pw.tsx
+++ b/ui/snippets/searchBar/SearchBarInput.pw.tsx
@@ -1,8 +1,7 @@
 import { LightMode } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import SearchBarInput from './SearchBarInput';
 
@@ -13,26 +12,18 @@ const props = {
   value: 'duck duck',
 };
 
-test('input on regular page +@mobile +@dark-mode', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <SearchBarInput { ...props }/>
-    </TestApp>,
-  );
+test('input on regular page +@mobile +@dark-mode', async({ render, page }) => {
+  await render(<SearchBarInput { ...props }/>);
   const input = page.getByPlaceholder(/search by/i);
-
   await expect(input).toHaveScreenshot();
 });
 
-test('input on home page +@mobile +@dark-mode', async({ mount, page }) => {
-  await mount(
-    <TestApp>
-      <LightMode>
-        <SearchBarInput { ...props } isHomepage/>
-      </LightMode>
-    </TestApp>,
+test('input on home page +@mobile +@dark-mode', async({ render, page }) => {
+  await render(
+    <LightMode>
+      <SearchBarInput { ...props } isHomepage/>
+    </LightMode>,
   );
   const input = page.getByPlaceholder(/search by/i);
-
   await expect(input).toHaveScreenshot();
 });
diff --git a/ui/snippets/searchBar/SearchBarInput.tsx b/ui/snippets/searchBar/SearchBarInput.tsx
index d4088e06a8..d8b1475bff 100644
--- a/ui/snippets/searchBar/SearchBarInput.tsx
+++ b/ui/snippets/searchBar/SearchBarInput.tsx
@@ -79,7 +79,7 @@ const SearchBarInput = (
       top={{ base: isHomepage ? 0 : 55, lg: 0 }}
       left="0"
       zIndex={{ base: isHomepage ? 'auto' : '-1', lg: isSuggestOpen ? 'popover' : 'auto' }}
-      paddingX={{ base: isHomepage ? 0 : 4, lg: 0 }}
+      paddingX={{ base: isHomepage ? 0 : 3, lg: 0 }}
       paddingTop={{ base: isHomepage ? 0 : 1, lg: 0 }}
       paddingBottom={{ base: isHomepage ? 0 : 2, lg: 0 }}
       boxShadow={ scrollDirection !== 'down' && isSticky ? 'md' : 'none' }
@@ -88,7 +88,7 @@ const SearchBarInput = (
       transitionDuration="normal"
       transitionTimingFunction="ease"
     >
-      <InputGroup size={{ base: isHomepage ? 'md' : 'sm', lg: 'md' }}>
+      <InputGroup size={{ base: 'sm', lg: isHomepage ? 'sm_md' : 'sm' }}>
         <InputLeftElement w={{ base: isHomepage ? 6 : 4, lg: 6 }} ml={{ base: isHomepage ? 4 : 3, lg: 4 }} h="100%">
           <IconSvg name="search" boxSize={{ base: isHomepage ? 6 : 4, lg: 6 }} color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/>
         </InputLeftElement>
@@ -112,7 +112,7 @@ const SearchBarInput = (
           value={ value }
         />
         { value && (
-          <InputRightElement top={{ base: isHomepage ? '18px' : 2, lg: '18px' }} right={ 2 }>
+          <InputRightElement top={{ base: 2, lg: isHomepage ? 3 : 2 }} right={ 2 }>
             <ClearButton onClick={ onClear }/>
           </InputRightElement>
         ) }
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx
index b8a8e6a5e7..1cb4affdef 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx
@@ -7,6 +7,7 @@ import { scroller, Element } from 'react-scroll';
 import type { SearchResultItem } from 'types/api/search';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
+import * as regexp from 'lib/regexp';
 import useMarketplaceApps from 'ui/marketplace/useMarketplaceApps';
 import TextAd from 'ui/shared/ad/TextAd';
 import ContentLoader from 'ui/shared/ContentLoader';
@@ -14,6 +15,7 @@ import type { ApiCategory, ItemsCategoriesMap } from 'ui/shared/search/utils';
 import { getItemCategory, searchCategories } from 'ui/shared/search/utils';
 
 import SearchBarSuggestApp from './SearchBarSuggestApp';
+import SearchBarSuggestBlockCountdown from './SearchBarSuggestBlockCountdown';
 import SearchBarSuggestItem from './SearchBarSuggestItem';
 
 interface Props {
@@ -68,7 +70,9 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
     if (!query.data && !marketplaceApps.displayedApps) {
       return {};
     }
+
     const map: Partial<ItemsCategoriesMap> = {};
+
     query.data?.forEach(item => {
       const cat = getItemCategory(item) as ApiCategory;
       if (cat) {
@@ -79,11 +83,23 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
         }
       }
     });
+
     if (marketplaceApps.displayedApps.length) {
       map.app = marketplaceApps.displayedApps;
     }
+
+    if (Object.keys(map).length > 0 && !map.block && regexp.BLOCK_HEIGHT.test(searchTerm)) {
+      map['block'] = [ {
+        type: 'block',
+        block_type: 'block',
+        block_number: searchTerm,
+        block_hash: '',
+        timestamp: undefined,
+      } ];
+    }
+
     return map;
-  }, [ query.data, marketplaceApps.displayedApps ]);
+  }, [ query.data, marketplaceApps.displayedApps, searchTerm ]);
 
   React.useEffect(() => {
     categoriesRefs.current = Array(Object.keys(itemsGroups).length).fill('').map((_, i) => categoriesRefs.current[i] || React.createRef());
@@ -113,6 +129,10 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
     const resultCategories = searchCategories.filter(cat => itemsGroups[cat.id]);
 
     if (resultCategories.length === 0) {
+      if (regexp.BLOCK_HEIGHT.test(searchTerm)) {
+        return <SearchBarSuggestBlockCountdown blockHeight={ searchTerm } onClick={ onItemClick }/>;
+      }
+
       return <Text>No results found.</Text>;
     }
 
@@ -122,7 +142,11 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
           <Box position="sticky" top="0" width="100%" background={ bgColor } py={ 5 } my={ -5 } ref={ tabsRef }>
             <Tabs variant="outline" colorScheme="gray" size="sm" index={ tabIndex }>
               <TabList columnGap={ 3 } rowGap={ 2 } flexWrap="wrap">
-                { resultCategories.map((cat, index) => <Tab key={ cat.id } onClick={ scrollToCategory(index) }>{ cat.title }</Tab>) }
+                { resultCategories.map((cat, index) => (
+                  <Tab key={ cat.id } onClick={ scrollToCategory(index) } { ...(tabIndex === index ? { 'data-selected': 'true' } : {}) }>
+                    { cat.title }
+                  </Tab>
+                )) }
               </TabList>
             </Tabs>
           </Box>
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx
index ff2471cb04..89b9b3d786 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx
@@ -1,14 +1,15 @@
-import { Box, chakra, Flex, Text } from '@chakra-ui/react';
+import { chakra, Box, Text, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { SearchResultAddressOrContractOrUniversalProfile } from 'types/api/search';
 
-import dayjs from '../../../../lib/date/dayjs';
-import highlightText from '../../../../lib/highlightText';
-import { ADDRESS_REGEXP } from '../../../../lib/validations/address';
-import * as AddressEntity from '../../../shared/entities/address/AddressEntity';
-import { formattedLuksoName } from '../../../shared/entities/address/IdenticonUniversalProfileQuery';
-import HashStringShortenDynamic from '../../../shared/HashStringShortenDynamic';
+import dayjs from 'lib/date/dayjs';
+import highlightText from 'lib/highlightText';
+import { ADDRESS_REGEXP } from 'lib/validations/address';
+import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
+import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import { formattedLuksoName } from 'ui/shared/entities/address/IdenticonUniversalProfileQuery';
+import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
 interface Props {
   data: SearchResultAddressOrContractOrUniversalProfile;
@@ -18,6 +19,7 @@ interface Props {
 
 const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
   const shouldHighlightHash = ADDRESS_REGEXP.test(searchTerm);
+
   const icon = (
     <AddressEntity.Icon
       address={{
@@ -25,8 +27,8 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
         is_contract: data.type === 'contract' || data.type === 'universal_profile',
         name: '',
         is_verified: data.is_smart_contract_verified,
-        implementation_name: null,
         ens_domain_name: null,
+        implementations: null,
       }}
     />
   );
@@ -37,24 +39,23 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
     data.name = '';
   }
 
-  const highlightedText = data.type === 'universal_profile' ? data.address : data.name;
-
   const nameEl = addressName && (
-    <Text
-      variant="secondary"
-      overflow="hidden"
-      whiteSpace="nowrap"
-      textOverflow="ellipsis"
-    >
-      <chakra.span fontWeight={ 500 } dangerouslySetInnerHTML={{ __html: highlightText(highlightedText, searchTerm) }}/>
-      { data.ens_info &&
-                (
-                  data.ens_info.names_count > 1 ?
-                    <span> ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` })</span> :
-                    <span>{ expiresText }</span>
-                )
-      }
-    </Text>
+    <Flex alignItems="center">
+      <Text
+        variant="secondary"
+        overflow="hidden"
+        whiteSpace="nowrap"
+        textOverflow="ellipsis"
+      >
+        <chakra.span fontWeight={ 500 } dangerouslySetInnerHTML={{ __html: highlightText(addressName, searchTerm) }}/>
+        { data.ens_info && (
+          data.ens_info.names_count > 1 ?
+            <span> ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` })</span> :
+            <span>{ expiresText }</span>
+        ) }
+      </Text>
+      { data.certified && <ContractCertifiedLabel boxSize={ 5 } iconSize={ 5 } ml={ 1 }/> }
+    </Flex>
   );
 
   const dynamicTitle = data.type === 'universal_profile' ? formattedLuksoName(data.address, data.name) : data.address;
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx
index 85554bc427..f945d372ca 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx
@@ -42,16 +42,16 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
             >
               <span dangerouslySetInnerHTML={{ __html: highlightText(data.title, searchTerm) }}/>
             </Text>
-            { data.external && <IconSvg name="arrows/north-east" boxSize={ 4 } verticalAlign="middle" flexShrink={ 0 }/> }
+            { data.external && <IconSvg name="link_external" color="icon_link_external" boxSize={ 3 } verticalAlign="middle" flexShrink={ 0 }/> }
           </Flex>
           <Text
             variant="secondary"
             overflow="hidden"
             textOverflow="ellipsis"
-            sx={{
+            style={{
+              WebkitLineClamp: 3,
+              WebkitBoxOrient: 'vertical',
               display: '-webkit-box',
-              '-webkit-box-orient': 'vertical',
-              '-webkit-line-clamp': '3',
             }}
           >
             { data.description }
@@ -81,7 +81,15 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
         >
           { data.description }
         </Text>
-        { data.external && <IconSvg name="arrows/north-east" boxSize={ 4 } verticalAlign="middle" color="text_secondary" flexShrink={ 0 }/> }
+        { data.external && (
+          <IconSvg
+            name="link_external"
+            color="icon_link_external"
+            boxSize={ 3 }
+            verticalAlign="middle"
+            flexShrink={ 0 }
+          />
+        ) }
       </Flex>
     );
   })();
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx
index 8bdc7239ac..d0cb352a9a 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx
@@ -1,7 +1,7 @@
 import { Text, Flex, Grid, Tag } from '@chakra-ui/react';
 import React from 'react';
 
-import type { SearchResultBlock } from 'types/api/search';
+import type { SearchResultBlock } from 'types/client/search';
 
 import dayjs from 'lib/date/dayjs';
 import highlightText from 'lib/highlightText';
@@ -17,6 +17,8 @@ interface Props {
 const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
   const icon = <BlockEntity.Icon/>;
   const shouldHighlightHash = data.block_hash.toLowerCase() === searchTerm.toLowerCase();
+  const isFutureBlock = data.timestamp === undefined;
+
   const blockNumber = (
     <Text
       fontWeight={ 700 }
@@ -27,7 +29,7 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
       <span dangerouslySetInnerHTML={{ __html: highlightText(data.block_number.toString(), searchTerm) }}/>
     </Text>
   );
-  const hash = (
+  const hash = !isFutureBlock ? (
     <Text
       variant="secondary"
       overflow="hidden"
@@ -37,8 +39,9 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
     >
       <HashStringShortenDynamic hash={ data.block_hash } isTooltipDisabled/>
     </Text>
-  );
-  const date = dayjs(data.timestamp).format('llll');
+  ) : null;
+  const date = !isFutureBlock ? dayjs(data.timestamp).format('llll') : undefined;
+  const futureBlockText = <Text variant="secondary">Learn estimated time for this block to be created.</Text>;
 
   if (isMobile) {
     return (
@@ -50,7 +53,7 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
           { data.block_type === 'uncle' && <Tag ml="auto">Uncle</Tag> }
         </Flex>
         { hash }
-        <Text variant="secondary">{ date }</Text>
+        { isFutureBlock ? futureBlockText : <Text variant="secondary">{ date }</Text> }
       </>
     );
   }
@@ -64,9 +67,9 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
       <Flex columnGap={ 3 } minW={ 0 } alignItems="center">
         { data.block_type === 'reorg' && <Tag flexShrink={ 0 }>Reorg</Tag> }
         { data.block_type === 'uncle' && <Tag flexShrink={ 0 }>Uncle</Tag> }
-        { hash }
+        { isFutureBlock ? futureBlockText : hash }
       </Flex>
-      <Text variant="secondary" textAlign="end">{ date }</Text>
+      { date && <Text variant="secondary" textAlign="end">{ date }</Text> }
     </Grid>
   );
 };
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlockCountdown.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlockCountdown.tsx
new file mode 100644
index 0000000000..222e55a150
--- /dev/null
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlockCountdown.tsx
@@ -0,0 +1,26 @@
+import { chakra, Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+interface Props {
+  blockHeight: string;
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+  className?: string;
+}
+
+const SearchBarSuggestBlockCountdown = ({ blockHeight, onClick, className }: Props) => {
+  return (
+    <Box className={ className }>
+      <span>Learn </span>
+      <LinkInternal href={ route({ pathname: '/block/countdown/[height]', query: { height: blockHeight } }) } onClick={ onClick }>
+        estimated time for this block
+      </LinkInternal>
+      <span> to be created.</span>
+    </Box>
+  );
+};
+
+export default React.memo(chakra(SearchBarSuggestBlockCountdown));
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestDomain.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestDomain.tsx
new file mode 100644
index 0000000000..2ec60ccc8d
--- /dev/null
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestDomain.tsx
@@ -0,0 +1,82 @@
+import { Grid, Text, Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import type { SearchResultDomain } from 'types/api/search';
+
+import dayjs from 'lib/date/dayjs';
+import highlightText from 'lib/highlightText';
+import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props {
+  data: SearchResultDomain;
+  isMobile: boolean | undefined;
+  searchTerm: string;
+}
+
+const SearchBarSuggestDomain = ({ data, isMobile, searchTerm }: Props) => {
+  const icon = <IconSvg name="ENS_slim" boxSize={ 5 } color="gray.500"/>;
+
+  const name = (
+    <Text
+      fontWeight={ 700 }
+      overflow="hidden"
+      whiteSpace="nowrap"
+      textOverflow="ellipsis"
+    >
+      <span dangerouslySetInnerHTML={{ __html: highlightText(data.ens_info.name, searchTerm) }}/>
+    </Text>
+  );
+
+  const address = (
+    <Text
+      overflow="hidden"
+      whiteSpace="nowrap"
+      variant="secondary"
+    >
+      <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
+    </Text>
+  );
+
+  const isContractVerified = data.is_smart_contract_verified && <IconSvg name="status/success" boxSize="14px" color="green.500" flexShrink={ 0 }/>;
+
+  const expiresText = data.ens_info?.expiry_date ? ` expires ${ dayjs(data.ens_info.expiry_date).fromNow() }` : '';
+  const ensNamesCount = data?.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }`;
+  const additionalInfo = (
+    <Text variant="secondary" textAlign={ isMobile ? 'start' : 'end' }>
+      { data?.ens_info.names_count > 1 ? ensNamesCount : expiresText }
+    </Text>
+  );
+
+  if (isMobile) {
+    return (
+      <>
+        <Flex alignItems="center" overflow="hidden" gap={ 2 }>
+          { icon }
+          { name }
+        </Flex>
+        <Flex alignItems="center" overflow="hidden" gap={ 1 }>
+          { address }
+          { isContractVerified }
+        </Flex>
+        { additionalInfo }
+      </>
+    );
+  }
+
+  return (
+    <Grid alignItems="center" gridTemplateColumns="228px minmax(auto, max-content) auto" gap={ 2 }>
+      <Flex alignItems="center" gap={ 2 }>
+        { icon }
+        { name }
+      </Flex>
+      <Flex alignItems="center" overflow="hidden" gap={ 1 }>
+        { address }
+        { isContractVerified }
+      </Flex>
+      { additionalInfo }
+    </Grid>
+  );
+};
+
+export default React.memo(SearchBarSuggestDomain);
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItem.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItem.tsx
index c4b702b559..74acd3b5a7 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItem.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItem.tsx
@@ -2,13 +2,14 @@ import type { LinkProps as NextLinkProps } from 'next/link';
 import NextLink from 'next/link';
 import React from 'react';
 
-import type { SearchResultItem } from 'types/api/search';
+import type { SearchResultItem } from 'types/client/search';
 
 import { route } from 'nextjs-routes';
 
 import SearchBarSuggestAddress from './SearchBarSuggestAddress';
 import SearchBarSuggestBlob from './SearchBarSuggestBlob';
 import SearchBarSuggestBlock from './SearchBarSuggestBlock';
+import SearchBarSuggestDomain from './SearchBarSuggestDomain';
 import SearchBarSuggestItemLink from './SearchBarSuggestItemLink';
 import SearchBarSuggestLabel from './SearchBarSuggestLabel';
 import SearchBarSuggestToken from './SearchBarSuggestToken';
@@ -39,6 +40,11 @@ const SearchBarSuggestItem = ({ data, isMobile, searchTerm, onClick }: Props) =>
         return route({ pathname: '/tx/[hash]', query: { hash: data.tx_hash } });
       }
       case 'block': {
+        const isFutureBlock = data.timestamp === undefined;
+        if (isFutureBlock) {
+          return route({ pathname: '/block/countdown/[height]', query: { height: String(data.block_number) } });
+        }
+
         return route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.block_hash) } });
       }
       case 'user_operation': {
@@ -47,6 +53,9 @@ const SearchBarSuggestItem = ({ data, isMobile, searchTerm, onClick }: Props) =>
       case 'blob': {
         return route({ pathname: '/blobs/[hash]', query: { hash: data.blob_hash } });
       }
+      case 'ens_domain': {
+        return route({ pathname: '/address/[hash]', query: { hash: data.address } });
+      }
     }
   })();
 
@@ -76,6 +85,9 @@ const SearchBarSuggestItem = ({ data, isMobile, searchTerm, onClick }: Props) =>
       case 'blob': {
         return <SearchBarSuggestBlob data={ data } searchTerm={ searchTerm }/>;
       }
+      case 'ens_domain': {
+        return <SearchBarSuggestDomain data={ data } searchTerm={ searchTerm } isMobile={ isMobile }/>;
+      }
     }
   })();
 
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx
index 7635e40ddd..67e31f239c 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx
@@ -16,7 +16,7 @@ interface Props {
 
 const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
   const icon = <TokenEntity.Icon token={{ ...data, type: data.token_type }}/>;
-  const verifiedIcon = <IconSvg name="verified_token" boxSize={ 4 } color="green.500" ml={ 1 }/>;
+  const verifiedIcon = <IconSvg name="certified" boxSize={ 4 } color="green.500" ml={ 1 }/>;
   const name = (
     <Text
       fontWeight={ 700 }
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-name-homepage-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-name-homepage-dark-mode-1.png
index a9ee87486e..671f662dc5 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-name-homepage-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-name-homepage-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-tag-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-tag-mobile-dark-mode-1.png
index 252b4efc8d..8486ca83fa 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-tag-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-tag-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-token-name-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-token-name-mobile-dark-mode-1.png
index 05f4094a28..69562014aa 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-token-name-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-token-name-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_block-countdown-no-results-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_block-countdown-no-results-mobile-1.png
new file mode 100644
index 0000000000..2da19d713d
Binary files /dev/null and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_block-countdown-no-results-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_block-countdown-with-results-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_block-countdown-with-results-mobile-1.png
new file mode 100644
index 0000000000..03a797d38a
Binary files /dev/null and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_block-countdown-with-results-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-domain-name-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-domain-name-mobile-1.png
new file mode 100644
index 0000000000..f55fa2a35c
Binary files /dev/null and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-domain-name-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_block-countdown-no-results-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_block-countdown-no-results-mobile-1.png
new file mode 100644
index 0000000000..34b5266330
Binary files /dev/null and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_block-countdown-no-results-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_block-countdown-with-results-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_block-countdown-with-results-mobile-1.png
new file mode 100644
index 0000000000..2ce4bbb2ee
Binary files /dev/null and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_block-countdown-with-results-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_recent-keywords-suggest-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_recent-keywords-suggest-mobile-1.png
index a7c2b5af44..a49472af78 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_recent-keywords-suggest-mobile-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_recent-keywords-suggest-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-domain-name-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-domain-name-mobile-1.png
new file mode 100644
index 0000000000..21330a9fea
Binary files /dev/null and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-domain-name-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-tag-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-tag-mobile-dark-mode-1.png
index ac05354a7c..137eedcf26 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-tag-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-tag-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_dark-color-mode_input-on-home-page-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_dark-color-mode_input-on-home-page-mobile-dark-mode-1.png
index 97c623ea75..4d0492626c 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_dark-color-mode_input-on-home-page-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_dark-color-mode_input-on-home-page-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_dark-color-mode_input-on-regular-page-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_dark-color-mode_input-on-regular-page-mobile-dark-mode-1.png
index 4bda13963c..78148aeef4 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_dark-color-mode_input-on-regular-page-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_dark-color-mode_input-on-regular-page-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_default_input-on-home-page-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_default_input-on-home-page-mobile-dark-mode-1.png
index 57a0d913fb..71d8315d16 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_default_input-on-home-page-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_default_input-on-home-page-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_default_input-on-regular-page-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_default_input-on-regular-page-mobile-dark-mode-1.png
index 71553c6c9a..9c48e707be 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_default_input-on-regular-page-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_default_input-on-regular-page-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_mobile_input-on-home-page-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_mobile_input-on-home-page-mobile-dark-mode-1.png
index 6665d682f5..9500392484 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_mobile_input-on-home-page-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_mobile_input-on-home-page-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_mobile_input-on-regular-page-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_mobile_input-on-regular-page-mobile-dark-mode-1.png
index 31668d1a3a..458f367141 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_mobile_input-on-regular-page-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarInput.pw.tsx_mobile_input-on-regular-page-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/useQuickSearchQuery.tsx b/ui/snippets/searchBar/useQuickSearchQuery.tsx
index 6c4ea806c2..a66ced4ace 100644
--- a/ui/snippets/searchBar/useQuickSearchQuery.tsx
+++ b/ui/snippets/searchBar/useQuickSearchQuery.tsx
@@ -1,5 +1,4 @@
 import { useQuery } from '@tanstack/react-query';
-import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { SearchResultItem } from '../../../types/api/search';
@@ -10,12 +9,9 @@ import useDebounce from 'lib/hooks/useDebounce';
 import useUniversalProfileQuery from '../../../lib/api/useUniversalProfileQuery';
 
 export default function useQuickSearchQuery() {
-  const router = useRouter();
-
   const [ searchTerm, setSearchTerm ] = React.useState('');
 
   const debouncedSearchTerm = useDebounce(searchTerm, 300);
-  const pathname = router.pathname;
 
   const quickSearchQuery = useApiQuery('quick_search', {
     queryParams: { q: debouncedSearchTerm },
@@ -50,6 +46,5 @@ export default function useQuickSearchQuery() {
     handleSearchTermChange: setSearchTerm,
     query,
     redirectCheckQuery,
-    pathname,
-  }), [ debouncedSearchTerm, pathname, redirectCheckQuery, searchTerm, query ]);
+  }), [ debouncedSearchTerm, query, redirectCheckQuery, searchTerm ]);
 }
diff --git a/ui/snippets/searchBar/useSearchQuery.tsx b/ui/snippets/searchBar/useSearchQuery.tsx
index 57cca96faa..da24b3e0d7 100644
--- a/ui/snippets/searchBar/useSearchQuery.tsx
+++ b/ui/snippets/searchBar/useSearchQuery.tsx
@@ -9,7 +9,7 @@ import { SEARCH_RESULT_ITEM, SEARCH_RESULT_NEXT_PAGE_PARAMS } from 'stubs/search
 import { generateListStub } from 'stubs/utils';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
-export default function useSearchQuery() {
+export default function useSearchQuery(withRedirectCheck?: boolean) {
   const router = useRouter();
   const q = React.useRef(getQueryParamString(router.query.q));
   const initialValue = q.current;
@@ -31,7 +31,7 @@ export default function useSearchQuery() {
   const redirectCheckQuery = useApiQuery('search_check_redirect', {
     // on search result page we check redirect only once on mount
     queryParams: { q: q.current },
-    queryOptions: { enabled: Boolean(q.current) },
+    queryOptions: { enabled: Boolean(q.current) && withRedirectCheck },
   });
 
   useUpdateValueEffect(() => {
diff --git a/ui/snippets/topBar/DeFiDropdown.tsx b/ui/snippets/topBar/DeFiDropdown.tsx
new file mode 100644
index 0000000000..01e4fff269
--- /dev/null
+++ b/ui/snippets/topBar/DeFiDropdown.tsx
@@ -0,0 +1,85 @@
+import { Button, Box, Flex, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure, chakra } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import getPageType from 'lib/mixpanel/getPageType';
+import * as mixpanel from 'lib/mixpanel/index';
+import Popover from 'ui/shared/chakra/Popover';
+import IconSvg from 'ui/shared/IconSvg';
+
+import DeFiDropdownItem from './DeFiDropdownItem';
+
+const feature = config.features.deFiDropdown;
+
+const DeFiDropdown = () => {
+  const router = useRouter();
+  const source = getPageType(router.pathname);
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  const handleClick = React.useCallback((content: string) => {
+    mixpanel.logEvent(mixpanel.EventTypes.BUTTON_CLICK, { Content: content, Source: source });
+  }, [ source ]);
+
+  if (!feature.isEnabled) {
+    return null;
+  }
+
+  const buttonStyles = {
+    variant: 'solid',
+    size: 'xs',
+    borderRadius: 'sm',
+    height: 5,
+    px: 1.5,
+    fontWeight: '500',
+  };
+
+  const items = feature.items.map((item) => ({
+    ...item,
+    onClick: () => handleClick(item.text),
+  }));
+
+  return items.length > 1 ? (
+    <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
+      <PopoverTrigger>
+        <Button
+          onClick={ onToggle }
+          isActive={ isOpen }
+          { ...buttonStyles }
+        >
+          <chakra.span display={{ base: 'none', lg: 'inline' }} mr={ 1 }>
+            Blockscout
+          </chakra.span>
+          DeFi
+          <IconSvg name="arrows/east-mini" boxSize={ 4 } ml={ 1 } transform="rotate(-90deg)"/>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent w="auto">
+        <PopoverBody >
+          <Flex flexDirection="column" gap={ 1 }>
+            { items.map((item, index) => (
+              <DeFiDropdownItem key={ index } item={ item }/>
+            )) }
+          </Flex>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  ) : (
+    <Button
+      as="a"
+      href={ items[0].dappId ? route({ pathname: '/apps/[id]', query: { id: items[0].dappId, action: 'connect' } }) : items[0].url }
+      target={ items[0].dappId ? '_self' : '_blank' }
+      onClick={ items[0].onClick }
+      { ...buttonStyles }
+    >
+      <IconSvg name={ items[0].icon } boxSize={ 3 } mr={{ base: 0, sm: 1 }}/>
+      <Box display={{ base: 'none', sm: 'inline' }}>
+        { items[0].text }
+      </Box>
+    </Button>
+  );
+};
+
+export default chakra(React.memo(DeFiDropdown));
diff --git a/ui/snippets/topBar/DeFiDropdownItem.tsx b/ui/snippets/topBar/DeFiDropdownItem.tsx
new file mode 100644
index 0000000000..b2f225a25e
--- /dev/null
+++ b/ui/snippets/topBar/DeFiDropdownItem.tsx
@@ -0,0 +1,53 @@
+import { Text, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import type { DeFiDropdownItem as TDeFiDropdownItem } from 'types/client/deFiDropdown';
+
+import { route } from 'nextjs-routes';
+
+import IconSvg from 'ui/shared/IconSvg';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+type Props = {
+  item: TDeFiDropdownItem & { onClick: () => void };
+}
+
+const DeFiDropdownItem = ({ item }: Props) => {
+  const styles = {
+    width: '100%',
+    height: '34px',
+    display: 'inline-flex',
+    alignItems: 'center',
+    color: useColorModeValue('blackAlpha.800', 'gray.400'),
+    _hover: {
+      textDecoration: 'none',
+      '& *': {
+        color: 'link_hovered',
+      },
+    },
+  };
+
+  const content = (
+    <>
+      <IconSvg name={ item.icon } boxSize={ 5 } mr={ 2 }/>
+      <Text as="span" fontSize="sm">{ item.text }</Text>
+    </>
+  );
+
+  return item.dappId ? (
+    <LinkInternal
+      href={ route({ pathname: '/apps/[id]', query: { id: item.dappId, action: 'connect' } }) }
+      target="_self"
+      { ...styles }
+    >
+      { content }
+    </LinkInternal>
+  ) : (
+    <LinkExternal href={ item.url } { ...styles }>
+      { content }
+    </LinkExternal>
+  );
+};
+
+export default React.memo(DeFiDropdownItem);
diff --git a/ui/snippets/topBar/GetGasButton.tsx b/ui/snippets/topBar/GetGasButton.tsx
new file mode 100644
index 0000000000..8025a29ae4
--- /dev/null
+++ b/ui/snippets/topBar/GetGasButton.tsx
@@ -0,0 +1,64 @@
+import { Image, Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import * as mixpanel from 'lib/mixpanel/index';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+const getGasFeature = config.features.getGasButton;
+
+const GetGasButton = () => {
+  const isMobile = useIsMobile(false);
+
+  const onGetGasClick = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.BUTTON_CLICK, { Content: 'Get gas', Source: 'address' });
+  }, []);
+
+  if (getGasFeature.isEnabled && !isMobile) {
+    try {
+      const dappId = getGasFeature.dappId;
+      const urlObj = new URL(getGasFeature.url);
+
+      urlObj.searchParams.append('utm_source', 'blockscout');
+      urlObj.searchParams.append('utm_medium', 'address');
+
+      const url = urlObj.toString();
+      const isInternal = typeof dappId === 'string';
+
+      const Link = isInternal ? LinkInternal : LinkExternal;
+      const href = isInternal ? route({ pathname: '/apps/[id]', query: { id: dappId, url } }) : url;
+
+      return (
+        <>
+          <Box h="1px" w="8px" bg="divider" mx={ 1 }/>
+          <Link
+            href={ href }
+            display="flex"
+            alignItems="center"
+            fontSize="xs"
+            lineHeight={ 5 }
+            onClick={ onGetGasClick }
+          >
+            { getGasFeature.logoUrl && (
+              <Image
+                src={ getGasFeature.logoUrl }
+                alt={ getGasFeature.name }
+                boxSize="14px"
+                mr={ 1 }
+              />
+            ) }
+            { getGasFeature.name }
+          </Link>
+        </>
+      );
+    } catch (error) {}
+  }
+
+  return null;
+};
+
+export default GetGasButton;
diff --git a/ui/snippets/topBar/NetworkMenu.tsx b/ui/snippets/topBar/NetworkMenu.tsx
new file mode 100644
index 0000000000..c56191457c
--- /dev/null
+++ b/ui/snippets/topBar/NetworkMenu.tsx
@@ -0,0 +1,31 @@
+import { IconButton, PopoverTrigger } from '@chakra-ui/react';
+import React from 'react';
+
+import Popover from 'ui/shared/chakra/Popover';
+import IconSvg from 'ui/shared/IconSvg';
+import NetworkMenuContentDesktop from 'ui/snippets/networkMenu/NetworkMenuContentDesktop';
+import useNetworkMenu from 'ui/snippets/networkMenu/useNetworkMenu';
+
+const NetworkMenu = () => {
+  const menu = useNetworkMenu();
+
+  return (
+    <Popover placement="bottom-start" trigger="click" isLazy isOpen={ menu.isOpen } onClose={ menu.onClose }>
+      <PopoverTrigger>
+        <IconButton
+          variant="simple"
+          colorScheme="blue"
+          aria-label="Network menu"
+          icon={ <IconSvg name="networks" boxSize={ 4 }/> }
+          p="1px"
+          boxSize={ 4 }
+          borderRadius="none"
+          onClick={ menu.onToggle }
+        />
+      </PopoverTrigger>
+      <NetworkMenuContentDesktop items={ menu.data } tabs={ menu.availableTabs }/>
+    </Popover>
+  );
+};
+
+export default React.memo(NetworkMenu);
diff --git a/ui/snippets/topBar/TopBar.pw.tsx b/ui/snippets/topBar/TopBar.pw.tsx
index 5b7702f1e1..c99e5d30d0 100644
--- a/ui/snippets/topBar/TopBar.pw.tsx
+++ b/ui/snippets/topBar/TopBar.pw.tsx
@@ -1,35 +1,79 @@
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import { FEATURED_NETWORKS_MOCK } from 'mocks/config/network';
 import * as statsMock from 'mocks/stats/index';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import TopBar from './TopBar';
 
-const test = base.extend({
-  context: contextWithEnvs([
-    { name: 'NEXT_PUBLIC_SWAP_BUTTON_URL', value: 'uniswap' },
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
+test.beforeEach(async({ mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS', '[{"text":"Swap","icon":"swap","dappId":"uniswap"}]' ],
+    [ 'NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL', 'DUCK' ],
+  ]);
 });
 
-test('default view +@dark-mode +@mobile', async({ mount, page }) => {
-  await page.route(buildApiUrl('stats'), (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(statsMock.base),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <TopBar/>
-    </TestApp>,
-  );
+test('default view +@dark-mode +@mobile', async({ render, mockApiResponse, page }) => {
+  await mockApiResponse('stats', statsMock.base);
+  const component = await render(<TopBar/>);
 
   await component.getByText(/\$1\.39/).click();
+  await expect(page.getByText(/last update/i)).toBeVisible();
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 220 } });
 
   await component.getByLabel('User settings').click();
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 400 } });
 });
+
+test('with secondary coin price +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('stats', statsMock.withSecondaryCoin);
+  const component = await render(<TopBar/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('with horizontal nav bar layout', async({ render, mockApiResponse, mockEnvs, mockConfigResponse, mockAssetResponse, page }) => {
+  const FEATURED_NETWORKS_URL = 'https://localhost:3000/featured-networks.json';
+
+  await mockApiResponse('stats', statsMock.base);
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_NAVIGATION_LAYOUT', 'horizontal' ],
+    [ 'NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL ],
+  ]);
+  await mockConfigResponse('NEXT_PUBLIC_FEATURED_NETWORKS', FEATURED_NETWORKS_URL, FEATURED_NETWORKS_MOCK);
+  await mockAssetResponse('https://localhost:3000/my-logo.png', './playwright/mocks/image_s.jpg');
+
+  const component = await render(<TopBar/>);
+  await component.getByLabel('Network menu').click();
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 500 } });
+});
+
+test('with DeFi dropdown +@dark-mode +@mobile', async({ render, page, mockApiResponse, mockEnvs }) => {
+  await mockEnvs([
+    [
+      'NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS',
+      '[{"text":"Swap","icon":"swap","dappId":"uniswap"},{"text":"Payment link","icon":"payment_link","url":"https://example.com"}]',
+    ],
+  ]);
+  await mockApiResponse('stats', statsMock.base);
+
+  const component = await render(<TopBar/>);
+
+  await component.getByText(/DeFi/i).click();
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 220 } });
+});
+
+test('with Get gas button', async({ render, mockApiResponse, mockEnvs, mockAssetResponse }) => {
+  const ICON_URL = 'https://localhost:3000/my-icon.png';
+
+  await mockEnvs([
+    [
+      'NEXT_PUBLIC_GAS_REFUEL_PROVIDER_CONFIG',
+      `{"name": "Need gas?", "dapp_id": "duck", "url_template": "https://duck.url/{chainId}", "logo": "${ ICON_URL }"}`,
+    ],
+  ]);
+  await mockApiResponse('stats', statsMock.base);
+  await mockAssetResponse(ICON_URL, './playwright/mocks/image_svg.svg');
+
+  const component = await render(<TopBar/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/snippets/topBar/TopBar.tsx b/ui/snippets/topBar/TopBar.tsx
index 0b97de2aff..80e261dbef 100644
--- a/ui/snippets/topBar/TopBar.tsx
+++ b/ui/snippets/topBar/TopBar.tsx
@@ -1,36 +1,45 @@
-import { Flex, Divider, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Divider, useColorModeValue, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
+import { CONTENT_MAX_WIDTH } from 'ui/shared/layout/utils';
 
+import DeFiDropdown from './DeFiDropdown';
+import NetworkMenu from './NetworkMenu';
 import Settings from './settings/Settings';
-import SwapButton from './SwapButton';
 import TopBarStats from './TopBarStats';
 
-const feature = config.features.swapButton;
-
 const TopBar = () => {
   const bgColor = useColorModeValue('gray.50', 'whiteAlpha.100');
 
   return (
-    <Flex
-      py={ 2 }
-      px={ 6 }
-      bgColor={ bgColor }
-      justifyContent="space-between"
-      alignItems="center"
-    >
-      <TopBarStats/>
-      <Flex alignItems="center">
-        { feature.isEnabled && (
-          <>
-            <SwapButton/>
-            <Divider mr={ 3 } ml={{ base: 2, sm: 3 }} height={ 4 } orientation="vertical"/>
-          </>
-        ) }
-        <Settings/>
+    <Box bgColor={ bgColor }>
+      <Flex
+        py={ 2 }
+        px={{ base: 3, lg: 6 }}
+        maxW={ `${ CONTENT_MAX_WIDTH }px` }
+        m="0 auto"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <TopBarStats/>
+        <Flex alignItems="center">
+          { config.features.deFiDropdown.isEnabled && (
+            <>
+              <DeFiDropdown/>
+              <Divider mr={ 3 } ml={{ base: 2, sm: 3 }} height={ 4 } orientation="vertical"/>
+            </>
+          ) }
+          <Settings/>
+          { config.UI.navigation.layout === 'horizontal' && Boolean(config.UI.navigation.featuredNetworks) && (
+            <Box display={{ base: 'none', lg: 'flex' }}>
+              <Divider mx={ 3 } height={ 4 } orientation="vertical"/>
+              <NetworkMenu/>
+            </Box>
+          ) }
+        </Flex>
       </Flex>
-    </Flex>
+    </Box>
   );
 };
 
diff --git a/ui/snippets/topBar/TopBarStats.tsx b/ui/snippets/topBar/TopBarStats.tsx
index 7bc180f0c6..d6ec93a891 100644
--- a/ui/snippets/topBar/TopBarStats.tsx
+++ b/ui/snippets/topBar/TopBarStats.tsx
@@ -4,12 +4,17 @@ import React from 'react';
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import dayjs from 'lib/date/dayjs';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import { HOMEPAGE_STATS } from 'stubs/stats';
 import GasInfoTooltip from 'ui/shared/gas/GasInfoTooltip';
 import GasPrice from 'ui/shared/gas/GasPrice';
 import TextSeparator from 'ui/shared/TextSeparator';
 
+import GetGasButton from './GetGasButton';
+
 const TopBarStats = () => {
+  const isMobile = useIsMobile();
+
   const { data, isPlaceholderData, isError, refetch, dataUpdatedAt } = useApiQuery('stats', {
     queryOptions: {
       placeholderData: HOMEPAGE_STATS,
@@ -51,7 +56,7 @@ const TopBarStats = () => {
       { data?.coin_price && (
         <Flex columnGap={ 1 }>
           <Skeleton isLoaded={ !isPlaceholderData }>
-            <chakra.span color="text_secondary">{ config.chain.governanceToken.symbol || config.chain.currency.symbol } </chakra.span>
+            <chakra.span color="text_secondary">{ config.chain.currency.symbol } </chakra.span>
             <span>${ Number(data.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }) }</span>
           </Skeleton>
           { data.coin_price_change_percentage && (
@@ -63,16 +68,27 @@ const TopBarStats = () => {
           ) }
         </Flex>
       ) }
+      { !isMobile && data?.secondary_coin_price && config.chain.secondaryCoin.symbol && (
+        <Flex columnGap={ 1 } ml={ data?.coin_price ? 3 : 0 }>
+          <Skeleton isLoaded={ !isPlaceholderData }>
+            <chakra.span color="text_secondary">{ config.chain.secondaryCoin.symbol } </chakra.span>
+            <span>${ Number(data.secondary_coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }) }</span>
+          </Skeleton>
+        </Flex>
+      ) }
       { data?.coin_price && config.features.gasTracker.isEnabled && <TextSeparator color="divider"/> }
       { data?.gas_prices && data.gas_prices.average !== null && config.features.gasTracker.isEnabled && (
-        <Skeleton isLoaded={ !isPlaceholderData }>
-          <chakra.span color="text_secondary">Gas </chakra.span>
-          <GasInfoTooltip data={ data } dataUpdatedAt={ dataUpdatedAt } >
-            <Link>
-              <GasPrice data={ data.gas_prices.average }/>
-            </Link>
-          </GasInfoTooltip>
-        </Skeleton>
+        <>
+          <Skeleton isLoaded={ !isPlaceholderData }>
+            <chakra.span color="text_secondary">Gas </chakra.span>
+            <GasInfoTooltip data={ data } dataUpdatedAt={ dataUpdatedAt } placement={ !data?.coin_price ? 'bottom-start' : undefined }>
+              <Link>
+                <GasPrice data={ data.gas_prices.average }/>
+              </Link>
+            </GasInfoTooltip>
+          </Skeleton>
+          { !isPlaceholderData && <GetGasButton/> }
+        </>
       ) }
     </Flex>
   );
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_with-DeFi-dropdown-dark-mode-mobile-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_with-DeFi-dropdown-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..91c5da3027
Binary files /dev/null and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_with-DeFi-dropdown-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-DeFi-dropdown-dark-mode-mobile-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-DeFi-dropdown-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..58ae563947
Binary files /dev/null and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-DeFi-dropdown-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-Get-gas-button-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-Get-gas-button-1.png
new file mode 100644
index 0000000000..b93f026cee
Binary files /dev/null and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-Get-gas-button-1.png differ
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-horizontal-nav-bar-layout-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-horizontal-nav-bar-layout-1.png
new file mode 100644
index 0000000000..04f5871745
Binary files /dev/null and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-horizontal-nav-bar-layout-1.png differ
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-secondary-coin-price-mobile-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-secondary-coin-price-mobile-1.png
new file mode 100644
index 0000000000..79f58c8573
Binary files /dev/null and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-secondary-coin-price-mobile-1.png differ
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_with-DeFi-dropdown-dark-mode-mobile-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_with-DeFi-dropdown-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..49ad042546
Binary files /dev/null and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_with-DeFi-dropdown-dark-mode-mobile-1.png differ
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_with-secondary-coin-price-mobile-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_with-secondary-coin-price-mobile-1.png
new file mode 100644
index 0000000000..8529cf4fd4
Binary files /dev/null and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_with-secondary-coin-price-mobile-1.png differ
diff --git a/ui/snippets/topBar/settings/Settings.tsx b/ui/snippets/topBar/settings/Settings.tsx
index 664ec6461c..95b445ab47 100644
--- a/ui/snippets/topBar/settings/Settings.tsx
+++ b/ui/snippets/topBar/settings/Settings.tsx
@@ -1,6 +1,7 @@
-import { Box, IconButton, Popover, PopoverBody, PopoverContent, PopoverTrigger, useDisclosure } from '@chakra-ui/react';
+import { Box, IconButton, PopoverBody, PopoverContent, PopoverTrigger, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 
+import Popover from 'ui/shared/chakra/Popover';
 import IconSvg from 'ui/shared/IconSvg';
 
 import SettingsColorTheme from './SettingsColorTheme';
@@ -24,7 +25,7 @@ const Settings = () => {
       </PopoverTrigger>
       <PopoverContent overflowY="hidden" w="auto" fontSize="sm">
         <PopoverBody boxShadow="2xl" p={ 4 }>
-          <SettingsColorTheme/>
+          <SettingsColorTheme onSelect={ onClose }/>
           <Box borderColor="divider" borderWidth="1px" my={ 3 }/>
           <SettingsIdentIcon/>
         </PopoverBody>
diff --git a/ui/snippets/topBar/settings/SettingsColorTheme.tsx b/ui/snippets/topBar/settings/SettingsColorTheme.tsx
index a8ba9c580e..b6b115fd8f 100644
--- a/ui/snippets/topBar/settings/SettingsColorTheme.tsx
+++ b/ui/snippets/topBar/settings/SettingsColorTheme.tsx
@@ -2,11 +2,15 @@ import { Box, Flex, useColorMode } from '@chakra-ui/react';
 import React from 'react';
 
 import * as cookies from 'lib/cookies';
+import { COLOR_THEMES } from 'lib/settings/colorTheme';
 
 import SettingsSample from './SettingsSample';
-import { COLOR_THEMES } from './utils';
 
-const SettingsColorTheme = () => {
+interface Props {
+  onSelect?: () => void;
+}
+
+const SettingsColorTheme = ({ onSelect }: Props) => {
   const { setColorMode } = useColorMode();
 
   const [ activeHex, setActiveHex ] = React.useState<string>();
@@ -58,7 +62,8 @@ const SettingsColorTheme = () => {
 
     setTheme(hex);
     setActiveHex(hex);
-  }, [ setTheme ]);
+    onSelect?.();
+  }, [ setTheme, onSelect ]);
 
   const activeTheme = COLOR_THEMES.find((theme) => theme.hex === activeHex);
 
diff --git a/ui/snippets/topBar/settings/SettingsIdentIcon.tsx b/ui/snippets/topBar/settings/SettingsIdentIcon.tsx
index af8f4b3140..97a2b8af2c 100644
--- a/ui/snippets/topBar/settings/SettingsIdentIcon.tsx
+++ b/ui/snippets/topBar/settings/SettingsIdentIcon.tsx
@@ -3,9 +3,9 @@ import React from 'react';
 
 import config from 'configs/app';
 import * as cookies from 'lib/cookies';
+import { IDENTICONS } from 'lib/settings/identIcon';
 
 import SettingsSample from './SettingsSample';
-import { IDENTICONS } from './utils';
 
 const SettingsIdentIcon = () => {
   const [ activeId, setActiveId ] = React.useState<string>();
diff --git a/ui/snippets/useMenuButtonColors.tsx b/ui/snippets/useMenuButtonColors.tsx
deleted file mode 100644
index 1583e18fb5..0000000000
--- a/ui/snippets/useMenuButtonColors.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useColorModeValue } from '@chakra-ui/react';
-
-export default function useMenuColors() {
-  const themedBackground = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
-  const themedBorderColor = useColorModeValue('gray.300', 'gray.700');
-  const themedColor = useColorModeValue('blackAlpha.800', 'gray.400');
-
-  return { themedBackground, themedBorderColor, themedColor };
-}
diff --git a/ui/snippets/walletMenu/WalletIdenticon.tsx b/ui/snippets/walletMenu/WalletIdenticon.tsx
new file mode 100644
index 0000000000..3cdb29ffa2
--- /dev/null
+++ b/ui/snippets/walletMenu/WalletIdenticon.tsx
@@ -0,0 +1,45 @@
+import { Box, Flex, chakra, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import AddressIdenticon from 'ui/shared/entities/address/AddressIdenticon';
+import IconSvg from 'ui/shared/IconSvg';
+
+type Props = {
+  address: string;
+  isAutoConnectDisabled?: boolean;
+  className?: string;
+};
+
+const WalletIdenticon = ({ address, isAutoConnectDisabled, className }: Props) => {
+  const isMobile = useIsMobile();
+  const borderColor = useColorModeValue('orange.100', 'orange.900');
+
+  return (
+    <Box className={ className } position="relative">
+      <AddressIdenticon size={ 20 } hash={ address }/>
+      { isAutoConnectDisabled && (
+        <Flex
+          alignItems="center"
+          justifyContent="center"
+          boxSize="14px"
+          position="absolute"
+          bottom={ isMobile ? '-3px' : '-1px' }
+          right={ isMobile ? '-4px' : '-5px' }
+          backgroundColor="rgba(16, 17, 18, 0.80)"
+          borderRadius="full"
+          border="1px solid"
+          borderColor={ borderColor }
+        >
+          <IconSvg
+            name="integration/partial"
+            color="white"
+            boxSize="8px"
+          />
+        </Flex>
+      ) }
+    </Box>
+  );
+};
+
+export default chakra(WalletIdenticon);
diff --git a/ui/snippets/walletMenu/WalletMenuContent.tsx b/ui/snippets/walletMenu/WalletMenuContent.tsx
index 0578d3c6c5..68a551f840 100644
--- a/ui/snippets/walletMenu/WalletMenuContent.tsx
+++ b/ui/snippets/walletMenu/WalletMenuContent.tsx
@@ -1,22 +1,56 @@
-import { Box, Button, Text } from '@chakra-ui/react';
+import { Box, Button, Text, Flex, IconButton, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import * as mixpanel from 'lib/mixpanel/index';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import IconSvg from 'ui/shared/IconSvg';
 
 type Props = {
   address?: string;
+  ensDomainName?: string | null;
   disconnect?: () => void;
+  isAutoConnectDisabled?: boolean;
+  openWeb3Modal: () => void;
+  closeWalletMenu: () => void;
 };
 
-const WalletMenuContent = ({ address, disconnect }: Props) => {
+const WalletMenuContent = ({ address, ensDomainName, disconnect, isAutoConnectDisabled, openWeb3Modal, closeWalletMenu }: Props) => {
+  const bgColor = useColorModeValue('orange.100', 'orange.900');
+  const [ isModalOpening, setIsModalOpening ] = React.useState(false);
+
   const onAddressClick = React.useCallback(() => {
     mixpanel.logEvent(mixpanel.EventTypes.WALLET_ACTION, { Action: 'Address click' });
   }, []);
 
+  const handleOpenWeb3Modal = React.useCallback(async() => {
+    setIsModalOpening(true);
+    await openWeb3Modal();
+    setTimeout(closeWalletMenu, 300);
+  }, [ openWeb3Modal, closeWalletMenu ]);
+
   return (
     <Box>
+      { isAutoConnectDisabled && (
+        <Flex
+          borderRadius="base"
+          p={ 3 }
+          mb={ 3 }
+          alignItems="center"
+          backgroundColor={ bgColor }
+        >
+          <IconSvg
+            name="integration/partial"
+            color="text"
+            boxSize={ 5 }
+            flexShrink={ 0 }
+            mr={ 2 }
+          />
+          <Text fontSize="xs" lineHeight="16px">
+            Connect your wallet in the app below
+          </Text>
+        </Flex>
+      ) }
       <Text
         fontSize="sm"
         fontWeight={ 600 }
@@ -34,16 +68,30 @@ const WalletMenuContent = ({ address, disconnect }: Props) => {
       >
         Your wallet is used to interact with apps and contracts in the explorer.
       </Text>
-      <AddressEntity
-        address={{ hash: address }}
-        noTooltip
-        truncation="dynamic"
-        fontSize="sm"
-        fontWeight={ 700 }
-        color="text"
-        mb={ 6 }
-        onClick={ onAddressClick }
-      />
+      { address && (
+        <Flex alignItems="center" mb={ 6 }>
+          <AddressEntity
+            address={{ hash: address, ens_domain_name: ensDomainName }}
+            noTooltip
+            truncation="dynamic"
+            fontSize="sm"
+            fontWeight={ 700 }
+            color="text"
+            onClick={ onAddressClick }
+            flex={ 1 }
+          />
+          <IconButton
+            aria-label="open wallet"
+            icon={ <IconSvg name="gear_slim" boxSize={ 5 }/> }
+            variant="simple"
+            h="20px"
+            w="20px"
+            ml={ 1 }
+            onClick={ handleOpenWeb3Modal }
+            isLoading={ isModalOpening }
+          />
+        </Flex>
+      ) }
       <Button size="sm" width="full" variant="outline" onClick={ disconnect }>
         Disconnect
       </Button>
diff --git a/ui/snippets/walletMenu/WalletMenuDesktop.pw.tsx b/ui/snippets/walletMenu/WalletMenuDesktop.pw.tsx
new file mode 100644
index 0000000000..eed4e34883
--- /dev/null
+++ b/ui/snippets/walletMenu/WalletMenuDesktop.pw.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+
+import type * as bens from '@blockscout/bens-types';
+
+import config from 'configs/app';
+import * as addressMock from 'mocks/address/address';
+import * as domainMock from 'mocks/ens/domain';
+import { test, expect } from 'playwright/lib';
+
+import { WalletMenuDesktop } from './WalletMenuDesktop';
+
+const props = {
+  isWalletConnected: false,
+  address: '',
+  connect: () => {},
+  disconnect: () => {},
+  isModalOpening: false,
+  isModalOpen: false,
+  openModal: () => {},
+};
+
+test.use({ viewport: { width: 1440, height: 750 } }); // xl
+
+test('wallet is not connected +@dark-mode', async({ page, render }) => {
+  await render(<WalletMenuDesktop { ...props }/>);
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 50 } });
+});
+
+test('wallet is not connected (home page) +@dark-mode', async({ page, render }) => {
+  await render(<WalletMenuDesktop { ...props } isHomePage/>);
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 50 } });
+});
+
+test('wallet is loading', async({ page, render }) => {
+  await render(<WalletMenuDesktop { ...props } isModalOpen/>);
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 50 } });
+});
+
+test('wallet connected +@dark-mode', async({ page, render, mockApiResponse }) => {
+  await mockApiResponse(
+    'address_domain',
+    { domain: undefined, resolved_domains_count: 0 } as bens.GetAddressResponse,
+    { pathParams: { address: addressMock.hash, chainId: config.chain.id } },
+  );
+
+  const component = await render(<WalletMenuDesktop { ...props } isWalletConnected address={ addressMock.hash }/>);
+  await component.locator('button').click();
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 300 } });
+});
+
+test('wallet connected (home page) +@dark-mode', async({ page, render }) => {
+  const component = await render(<WalletMenuDesktop { ...props } isHomePage isWalletConnected address={ addressMock.hash }/>);
+  await component.locator('button').click();
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 300 } });
+});
+
+test('wallet with ENS connected', async({ page, render, mockApiResponse }) => {
+  await mockApiResponse(
+    'address_domain',
+    { domain: domainMock.ensDomainB, resolved_domains_count: 1 } as bens.GetAddressResponse,
+    { pathParams: { address: addressMock.hash, chainId: config.chain.id } },
+  );
+
+  const component = await render(<WalletMenuDesktop { ...props } isWalletConnected address={ addressMock.hash }/>);
+  await component.locator('button').click();
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 300 } });
+});
diff --git a/ui/snippets/walletMenu/WalletMenuDesktop.tsx b/ui/snippets/walletMenu/WalletMenuDesktop.tsx
index df19ef5cf9..b60a9f2c4a 100644
--- a/ui/snippets/walletMenu/WalletMenuDesktop.tsx
+++ b/ui/snippets/walletMenu/WalletMenuDesktop.tsx
@@ -1,97 +1,119 @@
-import type { ButtonProps } from '@chakra-ui/react';
-import { Popover, PopoverContent, PopoverBody, PopoverTrigger, Button, Box, useBoolean } from '@chakra-ui/react';
+import { PopoverContent, PopoverBody, PopoverTrigger, Button, Box, useBoolean, chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+import { useMarketplaceContext } from 'lib/contexts/marketplace';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import * as mixpanel from 'lib/mixpanel/index';
-import AddressIdenticon from 'ui/shared/entities/address/AddressIdenticon';
+import Popover from 'ui/shared/chakra/Popover';
 import HashStringShorten from 'ui/shared/HashStringShorten';
+import IconSvg from 'ui/shared/IconSvg';
 import useWallet from 'ui/snippets/walletMenu/useWallet';
 import WalletMenuContent from 'ui/snippets/walletMenu/WalletMenuContent';
 
-import useMenuButtonColors from '../useMenuButtonColors';
+import WalletIdenticon from './WalletIdenticon';
 import WalletTooltip from './WalletTooltip';
 
 type Props = {
   isHomePage?: boolean;
+  className?: string;
+  size?: 'sm' | 'md';
 };
 
-const WalletMenuDesktop = ({ isHomePage }: Props) => {
-  const { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen } = useWallet({ source: 'Header' });
-  const { themedBackground, themedBorderColor, themedColor } = useMenuButtonColors();
+type ComponentProps = Props & {
+  isWalletConnected: boolean;
+  address: string;
+  connect: () => void;
+  disconnect: () => void;
+  isModalOpening: boolean;
+  isModalOpen: boolean;
+  openModal: () => void;
+};
+
+export const WalletMenuDesktop = ({
+  isHomePage, className, size = 'md', isWalletConnected, address, connect,
+  disconnect, isModalOpening, isModalOpen, openModal,
+}: ComponentProps) => {
   const [ isPopoverOpen, setIsPopoverOpen ] = useBoolean(false);
   const isMobile = useIsMobile();
-
-  const variant = React.useMemo(() => {
-    if (isWalletConnected) {
-      return 'subtle';
-    }
-    return isHomePage ? 'solid' : 'outline';
-  }, [ isWalletConnected, isHomePage ]);
-
-  let buttonStyles: Partial<ButtonProps> = {};
-  if (isWalletConnected) {
-    buttonStyles = {
-      bg: isHomePage ? 'blue.50' : themedBackground,
-      color: isHomePage ? 'blackAlpha.800' : themedColor,
-      _hover: {
-        color: isHomePage ? 'blackAlpha.800' : themedColor,
-      },
-    };
-  } else if (isHomePage) {
-    buttonStyles = {
-      color: 'white',
-    };
-  } else {
-    buttonStyles = {
-      borderColor: themedBorderColor,
-      color: themedColor,
-    };
-  }
+  const { isAutoConnectDisabled } = useMarketplaceContext();
+  const addressDomainQuery = useApiQuery('address_domain', {
+    pathParams: {
+      chainId: config.chain.id,
+      address,
+    },
+    queryOptions: {
+      enabled: config.features.nameService.isEnabled,
+    },
+  });
 
   const openPopover = React.useCallback(() => {
     mixpanel.logEvent(mixpanel.EventTypes.WALLET_ACTION, { Action: 'Open' });
-    setIsPopoverOpen.on();
+    setIsPopoverOpen.toggle();
   }, [ setIsPopoverOpen ]);
 
   return (
     <Popover
       openDelay={ 300 }
       placement="bottom-end"
-      gutter={ 10 }
       isLazy
       isOpen={ isPopoverOpen }
       onClose={ setIsPopoverOpen.off }
     >
-      <WalletTooltip isDisabled={ isWalletConnected || isMobile === undefined || isMobile }>
-        <Box ml={ 2 }>
-          <PopoverTrigger>
+      <Box ml={ 2 }>
+        <PopoverTrigger>
+          <WalletTooltip
+            isDisabled={ isMobile === undefined || isMobile || isModalOpening || isModalOpen }
+            isWalletConnected={ isWalletConnected }
+            isAutoConnectDisabled={ isAutoConnectDisabled }
+          >
             <Button
-              variant={ variant }
-              colorScheme="blue"
+              className={ className }
+              variant={ isHomePage ? 'hero' : 'header' }
+              data-selected={ isWalletConnected }
+              data-warning={ isAutoConnectDisabled }
               flexShrink={ 0 }
-              isLoading={ isModalOpening || isModalOpen }
+              isLoading={
+                ((isModalOpening || isModalOpen) && !isWalletConnected) ||
+                (addressDomainQuery.isLoading && isWalletConnected)
+              }
               loadingText="Connect wallet"
               onClick={ isWalletConnected ? openPopover : connect }
               fontSize="sm"
-              { ...buttonStyles }
+              size={ size }
+              px={{ lg: isHomePage ? 2 : 4, xl: 4 }}
             >
               { isWalletConnected ? (
                 <>
-                  <Box mr={ 2 }>
-                    <AddressIdenticon size={ 20 } hash={ address }/>
-                  </Box>
-                  <HashStringShorten hash={ address } isTooltipDisabled/>
+                  <WalletIdenticon address={ address } isAutoConnectDisabled={ isAutoConnectDisabled } mr={ 2 }/>
+                  { addressDomainQuery.data?.domain?.name ? (
+                    <chakra.span>{ addressDomainQuery.data.domain?.name }</chakra.span>
+                  ) : (
+                    <HashStringShorten hash={ address } isTooltipDisabled/>
+                  ) }
+                </>
+              ) : (
+                <>
+                  <IconSvg display={{ base: isHomePage ? 'inline' : 'none', xl: 'none' }} name="wallet" boxSize={ 6 } p={ 0.5 }/>
+                  <chakra.span display={{ base: isHomePage ? 'none' : 'inline', xl: 'inline' }}>Connect wallet</chakra.span>
                 </>
-              ) : 'Connect wallet' }
+              ) }
             </Button>
-          </PopoverTrigger>
-        </Box>
-      </WalletTooltip>
+          </WalletTooltip>
+        </PopoverTrigger>
+      </Box>
       { isWalletConnected && (
         <PopoverContent w="235px">
           <PopoverBody padding="24px 16px 16px 16px">
-            <WalletMenuContent address={ address } disconnect={ disconnect }/>
+            <WalletMenuContent
+              address={ address }
+              ensDomainName={ addressDomainQuery.data?.domain?.name }
+              disconnect={ disconnect }
+              isAutoConnectDisabled={ isAutoConnectDisabled }
+              openWeb3Modal={ openModal }
+              closeWalletMenu={ setIsPopoverOpen.off }
+            />
           </PopoverBody>
         </PopoverContent>
       ) }
@@ -99,4 +121,27 @@ const WalletMenuDesktop = ({ isHomePage }: Props) => {
   );
 };
 
-export default WalletMenuDesktop;
+// separated the useWallet hook from the main component because it's hard to mock it in tests
+const WalletMenuDesktopWrapper = ({ isHomePage, className, size = 'md' }: Props) => {
+  const {
+    isWalletConnected, address, connect, disconnect,
+    isModalOpening, isModalOpen, openModal,
+  } = useWallet({ source: 'Header' });
+
+  return (
+    <WalletMenuDesktop
+      isHomePage={ isHomePage }
+      className={ className }
+      size={ size }
+      isWalletConnected={ isWalletConnected }
+      address={ address }
+      connect={ connect }
+      disconnect={ disconnect }
+      isModalOpening={ isModalOpening }
+      isModalOpen={ isModalOpen }
+      openModal={ openModal }
+    />
+  );
+};
+
+export default chakra(WalletMenuDesktopWrapper);
diff --git a/ui/snippets/walletMenu/WalletMenuMobile.pw.tsx b/ui/snippets/walletMenu/WalletMenuMobile.pw.tsx
new file mode 100644
index 0000000000..82236189c5
--- /dev/null
+++ b/ui/snippets/walletMenu/WalletMenuMobile.pw.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+
+import type * as bens from '@blockscout/bens-types';
+
+import config from 'configs/app';
+import * as addressMock from 'mocks/address/address';
+import * as domainMock from 'mocks/ens/domain';
+import { test, expect, devices } from 'playwright/lib';
+
+import { WalletMenuMobile } from './WalletMenuMobile';
+
+const props = {
+  isWalletConnected: false,
+  address: '',
+  connect: () => {},
+  disconnect: () => {},
+  isModalOpening: false,
+  isModalOpen: false,
+  openModal: () => {},
+};
+
+test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+test('wallet is not connected +@dark-mode', async({ page, render }) => {
+  await render(<WalletMenuMobile { ...props }/>);
+  await expect(page).toHaveScreenshot();
+});
+
+test('wallet is loading', async({ page, render }) => {
+  await render(<WalletMenuMobile { ...props } isModalOpen/>);
+  await expect(page).toHaveScreenshot();
+});
+
+test('wallet connected +@dark-mode', async({ page, render, mockApiResponse }) => {
+  await mockApiResponse(
+    'address_domain',
+    { domain: undefined, resolved_domains_count: 0 } as bens.GetAddressResponse,
+    { pathParams: { address: addressMock.hash, chainId: config.chain.id } },
+  );
+
+  const component = await render(<WalletMenuMobile { ...props } isWalletConnected address={ addressMock.hash }/>);
+  await component.locator('button').click();
+
+  await expect(page).toHaveScreenshot();
+});
+
+test('wallet with ENS connected', async({ page, render, mockApiResponse }) => {
+  await mockApiResponse(
+    'address_domain',
+    { domain: domainMock.ensDomainB, resolved_domains_count: 1 } as bens.GetAddressResponse,
+    { pathParams: { address: addressMock.hash, chainId: config.chain.id } },
+  );
+
+  const component = await render(<WalletMenuMobile { ...props } isWalletConnected address={ addressMock.hash }/>);
+  await component.locator('button').click();
+
+  await expect(page).toHaveScreenshot();
+});
diff --git a/ui/snippets/walletMenu/WalletMenuMobile.tsx b/ui/snippets/walletMenu/WalletMenuMobile.tsx
index e8e6bcb48a..153551b52d 100644
--- a/ui/snippets/walletMenu/WalletMenuMobile.tsx
+++ b/ui/snippets/walletMenu/WalletMenuMobile.tsx
@@ -1,21 +1,43 @@
 import { Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, IconButton } from '@chakra-ui/react';
 import React from 'react';
 
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+import { useMarketplaceContext } from 'lib/contexts/marketplace';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import * as mixpanel from 'lib/mixpanel/index';
-import AddressIdenticon from 'ui/shared/entities/address/AddressIdenticon';
 import IconSvg from 'ui/shared/IconSvg';
 import useWallet from 'ui/snippets/walletMenu/useWallet';
 import WalletMenuContent from 'ui/snippets/walletMenu/WalletMenuContent';
 
-import useMenuButtonColors from '../useMenuButtonColors';
+import WalletIdenticon from './WalletIdenticon';
 import WalletTooltip from './WalletTooltip';
 
-const WalletMenuMobile = () => {
+type ComponentProps = {
+  isWalletConnected: boolean;
+  address: string;
+  connect: () => void;
+  disconnect: () => void;
+  isModalOpening: boolean;
+  isModalOpen: boolean;
+  openModal: () => void;
+};
+
+export const WalletMenuMobile = (
+  { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen, openModal }: ComponentProps,
+) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen } = useWallet({ source: 'Header' });
-  const { themedBackground, themedBorderColor, themedColor } = useMenuButtonColors();
   const isMobile = useIsMobile();
+  const { isAutoConnectDisabled } = useMarketplaceContext();
+  const addressDomainQuery = useApiQuery('address_domain', {
+    pathParams: {
+      chainId: config.chain.id,
+      address,
+    },
+    queryOptions: {
+      enabled: config.features.nameService.isEnabled,
+    },
+  });
 
   const openPopover = React.useCallback(() => {
     mixpanel.logEvent(mixpanel.EventTypes.WALLET_ACTION, { Action: 'Open' });
@@ -24,22 +46,28 @@ const WalletMenuMobile = () => {
 
   return (
     <>
-      <WalletTooltip isDisabled={ isWalletConnected || isMobile === undefined || !isMobile } isMobile>
+      <WalletTooltip
+        isDisabled={ isMobile === undefined || !isMobile }
+        isMobile
+        isWalletConnected={ isWalletConnected }
+        isAutoConnectDisabled={ isAutoConnectDisabled }
+      >
         <IconButton
           aria-label="wallet menu"
           icon={ isWalletConnected ?
-            <AddressIdenticon size={ 20 } hash={ address }/> :
-            <IconSvg name="wallet" boxSize={ 6 }/>
+            <WalletIdenticon address={ address } isAutoConnectDisabled={ isAutoConnectDisabled }/> :
+            <IconSvg name="wallet" boxSize={ 6 } p={ 0.5 }/>
           }
-          variant={ isWalletConnected ? 'subtle' : 'outline' }
-          colorScheme="gray"
+          variant="header"
+          data-selected={ isWalletConnected }
+          data-warning={ isAutoConnectDisabled }
           boxSize="40px"
           flexShrink={ 0 }
-          bg={ isWalletConnected ? themedBackground : undefined }
-          color={ themedColor }
-          borderColor={ !isWalletConnected ? themedBorderColor : undefined }
           onClick={ isWalletConnected ? openPopover : connect }
-          isLoading={ isModalOpening || isModalOpen }
+          isLoading={
+            ((isModalOpening || isModalOpen) && !isWalletConnected) ||
+            (addressDomainQuery.isLoading && isWalletConnected)
+          }
         />
       </WalletTooltip>
       { isWalletConnected && (
@@ -52,7 +80,14 @@ const WalletMenuMobile = () => {
           <DrawerOverlay/>
           <DrawerContent maxWidth="260px">
             <DrawerBody p={ 6 }>
-              <WalletMenuContent address={ address } disconnect={ disconnect }/>
+              <WalletMenuContent
+                address={ address }
+                ensDomainName={ addressDomainQuery.data?.domain?.name }
+                disconnect={ disconnect }
+                isAutoConnectDisabled={ isAutoConnectDisabled }
+                openWeb3Modal={ openModal }
+                closeWalletMenu={ onClose }
+              />
             </DrawerBody>
           </DrawerContent>
         </Drawer>
@@ -61,4 +96,23 @@ const WalletMenuMobile = () => {
   );
 };
 
-export default WalletMenuMobile;
+const WalletMenuMobileWrapper = () => {
+  const {
+    isWalletConnected, address, connect, disconnect,
+    isModalOpening, isModalOpen, openModal,
+  } = useWallet({ source: 'Header' });
+
+  return (
+    <WalletMenuMobile
+      isWalletConnected={ isWalletConnected }
+      address={ address }
+      connect={ connect }
+      disconnect={ disconnect }
+      isModalOpening={ isModalOpening }
+      isModalOpen={ isModalOpen }
+      openModal={ openModal }
+    />
+  );
+};
+
+export default WalletMenuMobileWrapper;
diff --git a/ui/snippets/walletMenu/WalletTooltip.tsx b/ui/snippets/walletMenu/WalletTooltip.tsx
index fc03e6dcee..10942fc321 100644
--- a/ui/snippets/walletMenu/WalletTooltip.tsx
+++ b/ui/snippets/walletMenu/WalletTooltip.tsx
@@ -1,4 +1,4 @@
-import { Tooltip, useBoolean, useOutsideClick } from '@chakra-ui/react';
+import { Tooltip, useBoolean, useOutsideClick, Box } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -9,38 +9,46 @@ type Props = {
   children: React.ReactNode;
   isDisabled?: boolean;
   isMobile?: boolean;
+  isWalletConnected?: boolean;
+  isAutoConnectDisabled?: boolean;
 };
 
-const WalletTooltip = ({ children, isDisabled, isMobile }: Props) => {
+const LOCAL_STORAGE_KEY = 'wallet-connect-tooltip-shown';
+
+const WalletTooltip = ({ children, isDisabled, isMobile, isWalletConnected, isAutoConnectDisabled }: Props, ref: React.ForwardedRef<HTMLDivElement>) => {
   const router = useRouter();
   const [ isTooltipShown, setIsTooltipShown ] = useBoolean(false);
-  const ref = React.useRef(null);
-  useOutsideClick({ ref, handler: setIsTooltipShown.off });
+  const innerRef = React.useRef(null);
+  useOutsideClick({ ref: innerRef, handler: setIsTooltipShown.off });
+
+  const label = React.useMemo(() => {
+    if (isWalletConnected) {
+      if (isAutoConnectDisabled) {
+        return <span>Your wallet is not<br/>connected to this app.<br/>Connect your wallet<br/>in the app directly</span>;
+      }
+      return null;
+    }
+    return <span>Connect your wallet<br/>to Blockscout for<br/>full-featured access</span>;
+  }, [ isWalletConnected, isAutoConnectDisabled ]);
 
-  const { defaultLabel, label, localStorageKey } = React.useMemo(() => {
-    const isAppPage = router.pathname === '/apps/[id]';
-    const defaultLabel = <span>Your wallet is used to interact with<br/>apps and contracts in the explorer</span>;
-    const label = isAppPage ?
-      <span>Connect once to use your wallet with<br/>all apps in the DAppscout marketplace!</span> :
-      defaultLabel;
-    const localStorageKey = `${ isAppPage ? 'dapp-' : '' }wallet-connect-tooltip-shown`;
-    return { defaultLabel, label, localStorageKey };
-  }, [ router.pathname ]);
+  const isAppPage = router.pathname === '/apps/[id]';
 
   React.useEffect(() => {
-    const wasShown = window.localStorage.getItem(localStorageKey);
-    const isMarketplacePage = [ '/apps', '/apps/[id]' ].includes(router.pathname);
+    const wasShown = window.localStorage.getItem(LOCAL_STORAGE_KEY);
+    const isMarketplacePage = router.pathname === '/apps';
     const isTooltipShowAction = router.query.action === 'tooltip';
     const isConnectWalletAction = router.query.action === 'connect';
-    const needToShow = (!wasShown && !isConnectWalletAction) || isTooltipShowAction;
+    const needToShow = (isAppPage && !isConnectWalletAction) || isTooltipShowAction || (!wasShown && isMarketplacePage);
     let timer1: ReturnType<typeof setTimeout>;
     let timer2: ReturnType<typeof setTimeout>;
 
-    if (!isDisabled && isMarketplacePage && needToShow) {
+    if (!isDisabled && needToShow) {
       timer1 = setTimeout(() => {
         setIsTooltipShown.on();
-        window.localStorage.setItem(localStorageKey, 'true');
-        timer2 = setTimeout(() => setIsTooltipShown.off(), 5 * SECOND);
+        timer2 = setTimeout(() => setIsTooltipShown.off(), 3 * SECOND);
+        if (!wasShown && isMarketplacePage) {
+          window.localStorage.setItem(LOCAL_STORAGE_KEY, 'true');
+        }
         if (isTooltipShowAction) {
           removeQueryParam(router, 'action');
         }
@@ -51,23 +59,25 @@ const WalletTooltip = ({ children, isDisabled, isMobile }: Props) => {
       clearTimeout(timer1);
       clearTimeout(timer2);
     };
-  }, [ setIsTooltipShown, localStorageKey, isDisabled, router ]);
+  }, [ setIsTooltipShown, isDisabled, router, isAppPage ]);
 
   return (
-    <Tooltip
-      label={ isTooltipShown ? label : defaultLabel }
-      textAlign="center"
-      padding={ 2 }
-      isDisabled={ isDisabled }
-      openDelay={ 500 }
-      isOpen={ isTooltipShown || (isMobile ? false : undefined) }
-      onClose={ setIsTooltipShown.off }
-      display={ isMobile ? { base: 'flex', lg: 'none' } : { base: 'none', lg: 'flex' } }
-      ref={ ref }
-    >
-      { children }
-    </Tooltip>
+    <Box ref={ ref }>
+      <Tooltip
+        label={ label }
+        textAlign="center"
+        padding={ 2 }
+        isDisabled={ isDisabled || !label || (isWalletConnected && !isAppPage) }
+        openDelay={ 500 }
+        isOpen={ isTooltipShown || (isMobile ? false : undefined) }
+        onClose={ setIsTooltipShown.off }
+        display={ isMobile ? { base: 'flex', lg: 'none' } : { base: 'none', lg: 'flex' } }
+        ref={ innerRef }
+      >
+        { children }
+      </Tooltip>
+    </Box>
   );
 };
 
-export default WalletTooltip;
+export default React.forwardRef(WalletTooltip);
diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-connected-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-connected-dark-mode-1.png
new file mode 100644
index 0000000000..405eee4950
Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-connected-dark-mode-1.png differ
diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-connected-home-page-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-connected-home-page-dark-mode-1.png
new file mode 100644
index 0000000000..57d31f2169
Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-connected-home-page-dark-mode-1.png differ
diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-is-not-connected-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-is-not-connected-dark-mode-1.png
new file mode 100644
index 0000000000..b10ddfbe29
Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-is-not-connected-dark-mode-1.png differ
diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-is-not-connected-home-page-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-is-not-connected-home-page-dark-mode-1.png
new file mode 100644
index 0000000000..cbeefa84af
Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-is-not-connected-home-page-dark-mode-1.png differ
diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-connected-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-connected-dark-mode-1.png
new file mode 100644
index 0000000000..835d3779ab
Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-connected-dark-mode-1.png differ
diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-connected-home-page-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-connected-home-page-dark-mode-1.png
new file mode 100644
index 0000000000..f11da2a62e
Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-connected-home-page-dark-mode-1.png differ
diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-is-loading-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-is-loading-1.png
new file mode 100644
index 0000000000..705c3a06da
Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-is-loading-1.png differ
diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-is-not-connected-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-is-not-connected-dark-mode-1.png
new file mode 100644
index 0000000000..b6a05d2dde
Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-is-not-connected-dark-mode-1.png differ
diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-is-not-connected-home-page-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-is-not-connected-home-page-dark-mode-1.png
new file mode 100644
index 0000000000..502530e671
Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-is-not-connected-home-page-dark-mode-1.png differ
diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-with-ENS-connected-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-with-ENS-connected-1.png
new file mode 100644
index 0000000000..7fbb3a6bca
Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-with-ENS-connected-1.png differ
diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_dark-color-mode_wallet-connected-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_dark-color-mode_wallet-connected-dark-mode-1.png
new file mode 100644
index 0000000000..05dc391f4d
Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_dark-color-mode_wallet-connected-dark-mode-1.png differ
diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_dark-color-mode_wallet-is-not-connected-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_dark-color-mode_wallet-is-not-connected-dark-mode-1.png
new file mode 100644
index 0000000000..3e44a5260e
Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_dark-color-mode_wallet-is-not-connected-dark-mode-1.png differ
diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-connected-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-connected-dark-mode-1.png
new file mode 100644
index 0000000000..95158695b9
Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-connected-dark-mode-1.png differ
diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-is-loading-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-is-loading-1.png
new file mode 100644
index 0000000000..fbe46c9f22
Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-is-loading-1.png differ
diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-is-not-connected-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-is-not-connected-dark-mode-1.png
new file mode 100644
index 0000000000..874b76d86a
Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-is-not-connected-dark-mode-1.png differ
diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-with-ENS-connected-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-with-ENS-connected-1.png
new file mode 100644
index 0000000000..8968c8030e
Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-with-ENS-connected-1.png differ
diff --git a/ui/snippets/walletMenu/useWallet.tsx b/ui/snippets/walletMenu/useWallet.tsx
index 370c4f4d7e..9b252dded9 100644
--- a/ui/snippets/walletMenu/useWallet.tsx
+++ b/ui/snippets/walletMenu/useWallet.tsx
@@ -29,8 +29,12 @@ export default function useWallet({ source }: Params) {
   }, [ open, source ]);
 
   const handleAccountConnected = React.useCallback(({ isReconnected }: { isReconnected: boolean }) => {
-    !isReconnected && isConnectionStarted.current &&
+    if (!isReconnected && isConnectionStarted.current) {
       mixpanel.logEvent(mixpanel.EventTypes.WALLET_CONNECT, { Source: source, Status: 'Connected' });
+      mixpanel.userProfile.setOnce({
+        'With Connected Wallet': true,
+      });
+    }
     isConnectionStarted.current = false;
   }, [ source ]);
 
@@ -45,6 +49,7 @@ export default function useWallet({ source }: Params) {
   const isWalletConnected = isClientLoaded && !isDisconnected && address !== undefined;
 
   return {
+    openModal: open,
     isWalletConnected,
     address: address || '',
     connect: handleConnect,
diff --git a/ui/sol2uml/Sol2UmlDiagram.tsx b/ui/sol2uml/Sol2UmlDiagram.tsx
index eaebf9c3c1..8af184211f 100644
--- a/ui/sol2uml/Sol2UmlDiagram.tsx
+++ b/ui/sol2uml/Sol2UmlDiagram.tsx
@@ -1,6 +1,7 @@
 import { chakra, Tooltip, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
+import type * as visualizer from '@blockscout/visualizer-types';
 import type { SmartContract } from 'types/api/contract';
 
 import type { ResourceError } from 'lib/api/resources';
@@ -13,7 +14,7 @@ interface Props {
   addressHash: string;
 }
 
-function composeSources(contract: SmartContract | undefined) {
+function composeSources(contract: SmartContract | undefined): visualizer.VisualizeStorageRequest['sources'] {
   if (!contract) {
     return {};
   }
@@ -23,7 +24,7 @@ function composeSources(contract: SmartContract | undefined) {
   }, {});
 
   return {
-    [contract.file_path || 'index.sol']: contract.source_code,
+    [contract.file_path || 'index.sol']: contract.source_code || '',
     ...additionalSources,
   };
 }
@@ -45,6 +46,7 @@ const Sol2UmlDiagram = ({ addressHash }: Props) => {
       },
     },
     queryOptions: {
+      queryKey: [ 'visualize_sol2uml', addressHash ],
       enabled: Boolean(contractQuery.data),
       refetchOnMount: false,
     },
@@ -76,7 +78,7 @@ const Sol2UmlDiagram = ({ addressHash }: Props) => {
   return (
     <Tooltip label="Click on image to zoom" placement="top">
       <chakra.img
-        src={ `data:image/svg+xml;base64,${ umlQuery.data.svg }` }
+        src={ imgUrl }
         alt={ `Contract ${ contractQuery.data.name } UML diagram` }
         onClick={ handleClick }
         cursor="pointer"
diff --git a/ui/stats/ChartWidgetContainer.tsx b/ui/stats/ChartWidgetContainer.tsx
index b9e45ebc79..5f41a5c2af 100644
--- a/ui/stats/ChartWidgetContainer.tsx
+++ b/ui/stats/ChartWidgetContainer.tsx
@@ -42,7 +42,7 @@ const ChartWidgetContainer = ({ id, title, description, interval, onLoadingError
   });
 
   const items = useMemo(() => data?.chart?.map((item) => {
-    return { date: new Date(item.date), value: Number(item.value) };
+    return { date: new Date(item.date), value: Number(item.value), isApproximate: item.is_approximate };
   }), [ data ]);
 
   useEffect(() => {
diff --git a/ui/stats/ChartsWidgetsList.tsx b/ui/stats/ChartsWidgetsList.tsx
index 102ce73a7d..3d40f550ba 100644
--- a/ui/stats/ChartsWidgetsList.tsx
+++ b/ui/stats/ChartsWidgetsList.tsx
@@ -1,7 +1,7 @@
 import { Box, Grid, Heading, List, ListItem, Skeleton } from '@chakra-ui/react';
 import React, { useCallback, useState } from 'react';
 
-import type { StatsChartsSection } from 'types/api/stats';
+import type * as stats from '@blockscout/stats-types';
 import type { StatsIntervalIds } from 'types/client/stats';
 
 import useApiQuery from 'lib/api/useApiQuery';
@@ -15,16 +15,26 @@ import ChartWidgetContainer from './ChartWidgetContainer';
 
 type Props = {
   filterQuery: string;
+  initialFilterQuery: string;
   isError: boolean;
   isPlaceholderData: boolean;
-  charts?: Array<StatsChartsSection>;
+  charts?: Array<stats.LineChartSection>;
   interval: StatsIntervalIds;
 }
 
-const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, interval }: Props) => {
+const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, interval, initialFilterQuery }: Props) => {
   const [ isSomeChartLoadingError, setIsSomeChartLoadingError ] = useState(false);
   const isAnyChartDisplayed = charts?.some((section) => section.charts.length > 0);
   const isEmptyChartList = Boolean(filterQuery) && !isAnyChartDisplayed;
+  const sectionRef = React.useRef<HTMLUListElement | null>(null);
+
+  const shouldScrollToSection = Boolean(initialFilterQuery);
+
+  React.useEffect(() => {
+    if (shouldScrollToSection) {
+      sectionRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [ shouldScrollToSection ]);
 
   const homeStatsQuery = useApiQuery('stats', {
     queryOptions: {
@@ -50,7 +60,7 @@ const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, in
         <ChartsLoadingErrorAlert/>
       ) }
 
-      <List>
+      <List ref={ sectionRef }>
         {
           charts?.map((section) => (
             <ListItem
@@ -61,12 +71,12 @@ const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, in
               }}
             >
               <Skeleton isLoaded={ !isPlaceholderData } mb={ 4 } display="inline-flex" alignItems="center" columnGap={ 2 } id={ section.id }>
-                <Heading size="md" >
+                <Heading size="md" id={ section.id }>
                   { section.title }
                 </Heading>
                 { section.id === 'gas' && homeStatsQuery.data && homeStatsQuery.data.gas_prices && (
                   <GasInfoTooltip data={ homeStatsQuery.data } dataUpdatedAt={ homeStatsQuery.dataUpdatedAt }>
-                    <IconSvg name="info" boxSize={ 5 } display="block" cursor="pointer" _hover={{ color: 'link_hovered' }}/>
+                    <IconSvg name="info" boxSize={ 5 } display="block" cursor="pointer" color="icon_info" _hover={{ color: 'link_hovered' }}/>
                   </GasInfoTooltip>
                 ) }
               </Skeleton>
diff --git a/ui/stats/NumberWidgetsList.tsx b/ui/stats/NumberWidgetsList.tsx
index 758d9810c5..ad222401b5 100644
--- a/ui/stats/NumberWidgetsList.tsx
+++ b/ui/stats/NumberWidgetsList.tsx
@@ -29,7 +29,7 @@ const NumberWidgetsList = () => {
         data?.counters?.map(({ id, title, value, units, description }, index) => {
 
           let unitsStr = '';
-          if (UNITS_WITHOUT_SPACE.includes(units)) {
+          if (units && UNITS_WITHOUT_SPACE.includes(units)) {
             unitsStr = units;
           } else if (units) {
             unitsStr = ' ' + units;
diff --git a/ui/stats/StatsDropdownMenu.tsx b/ui/stats/StatsDropdownMenu.tsx
index 7ab89f9ebe..203e3c79f0 100644
--- a/ui/stats/StatsDropdownMenu.tsx
+++ b/ui/stats/StatsDropdownMenu.tsx
@@ -1,6 +1,7 @@
-import { Box, Button, Menu, MenuButton, MenuItemOption, MenuList, MenuOptionGroup, Text } from '@chakra-ui/react';
+import { Box, Button, MenuButton, MenuItemOption, MenuList, MenuOptionGroup, chakra } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 
+import Menu from 'ui/shared/chakra/Menu';
 import IconSvg from 'ui/shared/IconSvg';
 
 type Props<T extends string> = {
@@ -32,13 +33,13 @@ export function StatsDropdownMenu<T extends string>({ items, selectedId, onSelec
           display="flex"
           alignItems="center"
         >
-          <Text
+          <chakra.span
             whiteSpace="nowrap"
             overflow="hidden"
             textOverflow="ellipsis"
           >
             { selectedCategory?.title }
-          </Text>
+          </chakra.span>
           <IconSvg transform="rotate(-90deg)" ml="auto" name="arrows/east-mini" w={ 5 } h={ 5 }/>
         </Box>
       </MenuButton>
diff --git a/ui/stats/StatsFilters.tsx b/ui/stats/StatsFilters.tsx
index 23f1bfce47..09891555e4 100644
--- a/ui/stats/StatsFilters.tsx
+++ b/ui/stats/StatsFilters.tsx
@@ -1,7 +1,7 @@
-import { Grid, GridItem } from '@chakra-ui/react';
+import { Grid, GridItem, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import type { StatsChartsSection } from 'types/api/stats';
+import type * as stats from '@blockscout/stats-types';
 import type { StatsInterval, StatsIntervalIds } from 'types/client/stats';
 
 import FilterInput from 'ui/shared/filters/FilterInput';
@@ -15,12 +15,14 @@ const intervalList = Object.keys(STATS_INTERVALS).map((id: string) => ({
 })) as Array<StatsInterval>;
 
 type Props = {
-  sections?: Array<StatsChartsSection>;
+  sections?: Array<stats.LineChartSection>;
   currentSection: string;
   onSectionChange: (newSection: string) => void;
   interval: StatsIntervalIds;
   onIntervalChange: (newInterval: StatsIntervalIds) => void;
   onFilterInputChange: (q: string) => void;
+  isLoading: boolean;
+  initialFilterValue: string;
 }
 
 const StatsFilters = ({
@@ -30,8 +32,9 @@ const StatsFilters = ({
   interval,
   onIntervalChange,
   onFilterInputChange,
+  isLoading,
+  initialFilterValue,
 }: Props) => {
-
   const sectionsList = [ {
     id: 'all',
     title: 'All',
@@ -51,22 +54,26 @@ const StatsFilters = ({
         w={{ base: '100%', lg: 'auto' }}
         area="section"
       >
-        <StatsDropdownMenu
-          items={ sectionsList }
-          selectedId={ currentSection }
-          onSelect={ onSectionChange }
-        />
+        { isLoading ? <Skeleton w={{ base: '100%', lg: '76px' }} h="40px" borderRadius="base"/> : (
+          <StatsDropdownMenu
+            items={ sectionsList }
+            selectedId={ currentSection }
+            onSelect={ onSectionChange }
+          />
+        ) }
       </GridItem>
 
       <GridItem
         w={{ base: '100%', lg: 'auto' }}
         area="interval"
       >
-        <StatsDropdownMenu
-          items={ intervalList }
-          selectedId={ interval }
-          onSelect={ onIntervalChange }
-        />
+        { isLoading ? <Skeleton w={{ base: '100%', lg: '118px' }} h="40px" borderRadius="base"/> : (
+          <StatsDropdownMenu
+            items={ intervalList }
+            selectedId={ interval }
+            onSelect={ onIntervalChange }
+          />
+        ) }
       </GridItem>
 
       <GridItem
@@ -74,8 +81,12 @@ const StatsFilters = ({
         area="input"
       >
         <FilterInput
+          key={ initialFilterValue }
+          isLoading={ isLoading }
           onChange={ onFilterInputChange }
-          placeholder="Find chart, metric..."/>
+          placeholder="Find chart, metric..."
+          initialValue={ initialFilterValue }
+        />
       </GridItem>
     </Grid>
   );
diff --git a/ui/stats/useStats.tsx b/ui/stats/useStats.tsx
index 565c413b11..f4a15dc110 100644
--- a/ui/stats/useStats.tsx
+++ b/ui/stats/useStats.tsx
@@ -1,21 +1,24 @@
+import { useRouter } from 'next/router';
 import React, { useCallback, useMemo, useState } from 'react';
 
-import type { StatsChartInfo, StatsChartsSection } from 'types/api/stats';
+import type * as stats from '@blockscout/stats-types';
 import type { StatsIntervalIds } from 'types/client/stats';
 
 import useApiQuery from 'lib/api/useApiQuery';
-import useDebounce from 'lib/hooks/useDebounce';
+import getQueryParamString from 'lib/router/getQueryParamString';
 import { STATS_CHARTS } from 'stubs/stats';
 
-function isSectionMatches(section: StatsChartsSection, currentSection: string): boolean {
+function isSectionMatches(section: stats.LineChartSection, currentSection: string): boolean {
   return currentSection === 'all' || section.id === currentSection;
 }
 
-function isChartNameMatches(q: string, chart: StatsChartInfo) {
+function isChartNameMatches(q: string, chart: stats.LineChartInfo) {
   return chart.title.toLowerCase().includes(q.toLowerCase());
 }
 
 export default function useStats() {
+  const router = useRouter();
+
   const { data, isPlaceholderData, isError } = useApiQuery('stats_lines', {
     queryOptions: {
       placeholderData: STATS_CHARTS,
@@ -24,22 +27,35 @@ export default function useStats() {
 
   const [ currentSection, setCurrentSection ] = useState('all');
   const [ filterQuery, setFilterQuery ] = useState('');
+  const [ initialFilterQuery, setInitialFilterQuery ] = React.useState('');
   const [ interval, setInterval ] = useState<StatsIntervalIds>('oneMonth');
   const sectionIds = useMemo(() => data?.sections?.map(({ id }) => id), [ data ]);
 
-  const debouncedFilterQuery = useDebounce(filterQuery, 500);
+  React.useEffect(() => {
+    if (!isPlaceholderData && !isError) {
+      const chartId = getQueryParamString(router.query.chartId);
+      const chartName = data?.sections.map((section) => section.charts.find((chart) => chart.id === chartId)).filter(Boolean)[0]?.title;
+      if (chartName) {
+        setInitialFilterQuery(chartName);
+        setFilterQuery(chartName);
+        router.replace({ pathname: '/stats' }, undefined, { scroll: false });
+      }
+    }
+  // run only when data is loaded
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ isPlaceholderData ]);
 
   const displayedCharts = React.useMemo(() => {
     return data?.sections
       ?.map((section) => {
-        const charts = section.charts.filter((chart) => isSectionMatches(section, currentSection) && isChartNameMatches(debouncedFilterQuery, chart));
+        const charts = section.charts.filter((chart) => isSectionMatches(section, currentSection) && isChartNameMatches(filterQuery, chart));
 
         return {
           ...section,
           charts,
         };
       }).filter((section) => section.charts.length > 0);
-  }, [ currentSection, data?.sections, debouncedFilterQuery ]);
+  }, [ currentSection, data?.sections, filterQuery ]);
 
   const handleSectionChange = useCallback((newSection: string) => {
     setCurrentSection(newSection);
@@ -58,6 +74,7 @@ export default function useStats() {
     sectionIds,
     isPlaceholderData,
     isError,
+    initialFilterQuery,
     filterQuery,
     currentSection,
     handleSectionChange,
@@ -70,6 +87,7 @@ export default function useStats() {
     sectionIds,
     isPlaceholderData,
     isError,
+    initialFilterQuery,
     filterQuery,
     currentSection,
     handleSectionChange,
diff --git a/ui/token/TokenDetails.tsx b/ui/token/TokenDetails.tsx
index d6a9c7b276..d3e5152eb9 100644
--- a/ui/token/TokenDetails.tsx
+++ b/ui/token/TokenDetails.tsx
@@ -7,13 +7,17 @@ import { scroller } from 'react-scroll';
 
 import type { TokenInfo } from 'types/api/token';
 
+import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
 import useApiQuery from 'lib/api/useApiQuery';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
 import getCurrencyValue from 'lib/getCurrencyValue';
+import useIsMounted from 'lib/hooks/useIsMounted';
 import { TOKEN_COUNTERS } from 'stubs/token';
 import type { TokenTabs } from 'ui/pages/Token';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import AppActionButton from 'ui/shared/AppActionButton/AppActionButton';
+import useAppActionData from 'ui/shared/AppActionButton/useAppActionData';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
@@ -25,6 +29,8 @@ interface Props {
 
 const TokenDetails = ({ tokenQuery }: Props) => {
   const router = useRouter();
+  const isMounted = useIsMounted();
+
   const hash = router.query.hash?.toString();
 
   const tokenCountersQuery = useApiQuery('token_counters', {
@@ -32,6 +38,8 @@ const TokenDetails = ({ tokenQuery }: Props) => {
     queryOptions: { enabled: Boolean(router.query.hash), placeholderData: TOKEN_COUNTERS },
   });
 
+  const appActionData = useAppActionData(hash);
+
   const changeUrlAndScroll = useCallback((tab: TokenTabs) => () => {
     router.push(
       { pathname: '/token/[hash]', query: { hash: hash || '', tab } },
@@ -66,6 +74,10 @@ const TokenDetails = ({ tokenQuery }: Props) => {
 
   throwOnResourceLoadError(tokenQuery);
 
+  if (!isMounted) {
+    return null;
+  }
+
   const {
     exchange_rate: exchangeRate,
     total_supply: totalSupply,
@@ -91,77 +103,118 @@ const TokenDetails = ({ tokenQuery }: Props) => {
       templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden"
     >
       { exchangeRate && (
-        <DetailsInfoItem
-          title="Price"
-          hint="Price per token on the exchanges"
-          alignSelf="center"
-          isLoading={ tokenQuery.isPlaceholderData }
-        >
-          <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } display="inline-block">
-            <span>{ `$${ Number(exchangeRate).toLocaleString(undefined, { minimumSignificantDigits: 4 }) }` }</span>
-          </Skeleton>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Price per token on the exchanges"
+            isLoading={ tokenQuery.isPlaceholderData }
+          >
+            Price
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } display="inline-block">
+              <span>{ `$${ Number(exchangeRate).toLocaleString(undefined, { minimumSignificantDigits: 4 }) }` }</span>
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       { marketCap && (
-        <DetailsInfoItem
-          title="Fully diluted market cap"
-          hint="Total supply * Price"
-          alignSelf="center"
-          isLoading={ tokenQuery.isPlaceholderData }
-        >
-          <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } display="inline-block">
-            <span>{ `$${ BigNumber(marketCap).toFormat() }` }</span>
-          </Skeleton>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Total supply * Price"
+            isLoading={ tokenQuery.isPlaceholderData }
+          >
+            Fully diluted market cap
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } display="inline-block">
+              <span>{ `$${ BigNumber(marketCap).toFormat() }` }</span>
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
       ) }
-      <DetailsInfoItem
-        title="Max total supply"
+
+      <DetailsInfoItem.Label
         hint="The total amount of tokens issued"
+        isLoading={ tokenQuery.isPlaceholderData }
+      >
+        Max total supply
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value
         alignSelf="center"
         wordBreak="break-word"
         whiteSpace="pre-wrap"
-        isLoading={ tokenQuery.isPlaceholderData }
       >
         <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } w="100%" display="flex">
           <TruncatedValue value={ totalSupplyValue || '0' } maxW="80%" flexShrink={ 0 }/>
           <Box flexShrink={ 0 }> </Box>
           <TruncatedValue value={ symbol || '' }/>
         </Skeleton>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Holders"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Number of accounts holding the token"
-        alignSelf="center"
         isLoading={ tokenQuery.isPlaceholderData }
       >
+        Holders
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !tokenCountersQuery.isPlaceholderData }>
           { countersItem('token_holders_count') }
         </Skeleton>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Transfers"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Number of transfer for the token"
-        alignSelf="center"
         isLoading={ tokenQuery.isPlaceholderData }
       >
+        Transfers
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !tokenCountersQuery.isPlaceholderData }>
           { countersItem('transfers_count') }
         </Skeleton>
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
+
       { decimals && (
-        <DetailsInfoItem
-          title="Decimals"
-          hint="Number of digits that come after the decimal place when displaying token value"
-          alignSelf="center"
+        <>
+          <DetailsInfoItem.Label
+            hint="Number of digits that come after the decimal place when displaying token value"
+            isLoading={ tokenQuery.isPlaceholderData }
+          >
+            Decimals
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } minW={ 6 }>
+              { decimals }
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { type !== 'ERC-20' && (
+        <TokenNftMarketplaces
+          hash={ hash }
           isLoading={ tokenQuery.isPlaceholderData }
-        >
-          <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } minW={ 6 }>
-            { decimals }
-          </Skeleton>
-        </DetailsInfoItem>
+          appActionData={ appActionData }
+          source="NFT collection"
+        />
       ) }
 
-      { type !== 'ERC-20' && <TokenNftMarketplaces hash={ hash } isLoading={ tokenQuery.isPlaceholderData }/> }
+      { (type !== 'ERC-20' && config.UI.views.nft.marketplaces.length === 0 && appActionData) && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Link to the dapp"
+          >
+            Dapp
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value
+            py="1px"
+          >
+            <AppActionButton data={ appActionData } height="30px" source="NFT collection"/>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
 
       <DetailsSponsoredItem isLoading={ tokenQuery.isPlaceholderData }/>
     </Grid>
diff --git a/ui/token/TokenHolders/TokenHolders.tsx b/ui/token/TokenHolders/TokenHolders.tsx
index 5b912d5aa8..e87cf2d5f5 100644
--- a/ui/token/TokenHolders/TokenHolders.tsx
+++ b/ui/token/TokenHolders/TokenHolders.tsx
@@ -4,6 +4,8 @@ import React from 'react';
 import type { TokenInfo } from 'types/api/token';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
+import useIsMounted from 'lib/hooks/useIsMounted';
+import AddressCsvExportLink from 'ui/address/AddressCsvExportLink';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DataListDisplay from 'ui/shared/DataListDisplay';
@@ -13,20 +15,33 @@ import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPage
 import TokenHoldersList from './TokenHoldersList';
 import TokenHoldersTable from './TokenHoldersTable';
 
+const TABS_HEIGHT = 88;
+
 type Props = {
   token?: TokenInfo;
   holdersQuery: QueryWithPagesResult<'token_holders'>;
+  shouldRender?: boolean;
 }
 
-const TokenHoldersContent = ({ holdersQuery, token }: Props) => {
-
+const TokenHoldersContent = ({ holdersQuery, token, shouldRender = true }: Props) => {
   const isMobile = useIsMobile();
+  const isMounted = useIsMounted();
+
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
   if (holdersQuery.isError) {
     return <DataFetchAlert/>;
   }
 
   const actionBar = isMobile && holdersQuery.pagination.isVisible && (
     <ActionBar mt={ -6 }>
+      <AddressCsvExportLink
+        address={ token?.address }
+        params={{ type: 'holders' }}
+        isLoading={ holdersQuery.pagination.isLoading }
+      />
       <Pagination ml="auto" { ...holdersQuery.pagination }/>
     </ActionBar>
   );
@@ -39,7 +54,7 @@ const TokenHoldersContent = ({ holdersQuery, token }: Props) => {
         <TokenHoldersTable
           data={ items }
           token={ token }
-          top={ holdersQuery.pagination.isVisible ? 80 : 0 }
+          top={ holdersQuery.pagination.isVisible ? TABS_HEIGHT : 0 }
           isLoading={ holdersQuery.isPlaceholderData }
         />
       </Box>
diff --git a/ui/token/TokenHolders/TokenHoldersList.pw.tsx b/ui/token/TokenHolders/TokenHoldersList.pw.tsx
index 2bd3fd1267..c6b1f4fca9 100644
--- a/ui/token/TokenHolders/TokenHoldersList.pw.tsx
+++ b/ui/token/TokenHolders/TokenHoldersList.pw.tsx
@@ -1,30 +1,19 @@
-import { test, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { tokenHoldersERC20, tokenHoldersERC1155 } from 'mocks/tokens/tokenHolders';
 import { tokenInfo, tokenInfoERC1155a } from 'mocks/tokens/tokenInfo';
-import TestApp from 'playwright/TestApp';
+import { test, expect, devices } from 'playwright/lib';
 
 import TokenHoldersList from './TokenHoldersList';
 
 test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-test('base view without IDs', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TokenHoldersList data={ tokenHoldersERC20.items } token={ tokenInfo }/>
-    </TestApp>,
-  );
-
+test('base view without IDs', async({ render }) => {
+  const component = await render(<TokenHoldersList data={ tokenHoldersERC20.items } token={ tokenInfo }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('base view with IDs', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TokenHoldersList data={ tokenHoldersERC1155.items } token={ tokenInfoERC1155a }/>
-    </TestApp>,
-  );
-
+test('base view with IDs', async({ render }) => {
+  const component = await render(<TokenHoldersList data={ tokenHoldersERC1155.items } token={ tokenInfoERC1155a }/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/token/TokenHolders/TokenHoldersTable.pw.tsx b/ui/token/TokenHolders/TokenHoldersTable.pw.tsx
index 1f81e97af5..de818fc680 100644
--- a/ui/token/TokenHolders/TokenHoldersTable.pw.tsx
+++ b/ui/token/TokenHolders/TokenHoldersTable.pw.tsx
@@ -1,30 +1,27 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { tokenHoldersERC20, tokenHoldersERC1155 } from 'mocks/tokens/tokenHolders';
 import { tokenInfo, tokenInfoERC1155a } from 'mocks/tokens/tokenInfo';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import TokenHoldersTable from './TokenHoldersTable';
 
-test('base view without IDs', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h="128px"/>
-      <TokenHoldersTable data={ tokenHoldersERC20.items } token={ tokenInfo } top={ 80 }/>
-    </TestApp>,
+test('base view without IDs', async({ render }) => {
+  const component = await render(
+    <Box pt="128px">
+      <TokenHoldersTable data={ tokenHoldersERC20.items } token={ tokenInfo } top={ 88 }/>
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('base view with IDs', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h="128px"/>
-      <TokenHoldersTable data={ tokenHoldersERC1155.items } token={ tokenInfoERC1155a } top={ 80 }/>
-    </TestApp>,
+test('base view with IDs', async({ render }) => {
+  const component = await render(
+    <Box pt="128px">
+      <TokenHoldersTable data={ tokenHoldersERC1155.items } token={ tokenInfoERC1155a } top={ 88 }/>
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
diff --git a/ui/token/TokenInventory.pw.tsx b/ui/token/TokenInventory.pw.tsx
index d7b75dee28..522b729513 100644
--- a/ui/token/TokenInventory.pw.tsx
+++ b/ui/token/TokenInventory.pw.tsx
@@ -1,17 +1,15 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { tokenInfoERC721a } from 'mocks/tokens/tokenInfo';
 import { base as tokenInstanse } from 'mocks/tokens/tokenInstance';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import TokenInventory from './TokenInventory';
 
-test('base view +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: 0 }}/>
+test('base view +@mobile', async({ render }) => {
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 0 }}>
       <TokenInventory
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore:
@@ -30,7 +28,7 @@ test('base view +@mobile', async({ mount }) => {
           data: tokenInfoERC721a,
         }}
       />
-    </TestApp>,
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
diff --git a/ui/token/TokenInventory.tsx b/ui/token/TokenInventory.tsx
index bbd1e264db..086167035d 100644
--- a/ui/token/TokenInventory.tsx
+++ b/ui/token/TokenInventory.tsx
@@ -7,6 +7,7 @@ import type { TokenInfo } from 'types/api/token';
 import type { ResourceError } from 'lib/api/resources';
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import useIsMounted from 'lib/hooks/useIsMounted';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
@@ -20,15 +21,21 @@ type Props = {
   inventoryQuery: QueryWithPagesResult<'token_inventory'>;
   tokenQuery: UseQueryResult<TokenInfo, ResourceError<unknown>>;
   ownerFilter?: string;
+  shouldRender?: boolean;
 }
 
-const TokenInventory = ({ inventoryQuery, tokenQuery, ownerFilter }: Props) => {
+const TokenInventory = ({ inventoryQuery, tokenQuery, ownerFilter, shouldRender = true }: Props) => {
   const isMobile = useIsMobile();
+  const isMounted = useIsMounted();
 
   const resetOwnerFilter = React.useCallback(() => {
     inventoryQuery.onFilterChange({});
   }, [ inventoryQuery ]);
 
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
   const isActionBarHidden = !ownerFilter && !inventoryQuery.data?.items.length;
 
   const ownerFilterComponent = ownerFilter && (
diff --git a/ui/token/TokenInventoryItem.tsx b/ui/token/TokenInventoryItem.tsx
index 6add374550..d1ea257658 100644
--- a/ui/token/TokenInventoryItem.tsx
+++ b/ui/token/TokenInventoryItem.tsx
@@ -7,7 +7,7 @@ import { route } from 'nextjs-routes';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import NftMedia from 'ui/shared/nft/NftMedia';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
@@ -23,6 +23,7 @@ const TokenInventoryItem = ({ item, token, isLoading }: Props) => {
       animationUrl={ item.animation_url }
       imageUrl={ item.image_url }
       isLoading={ isLoading }
+      autoplayVideo={ false }
     />
   );
 
diff --git a/ui/token/TokenNftMarketplaces.tsx b/ui/token/TokenNftMarketplaces.tsx
index d2aea7442a..4081c7e209 100644
--- a/ui/token/TokenNftMarketplaces.tsx
+++ b/ui/token/TokenNftMarketplaces.tsx
@@ -1,48 +1,65 @@
 import { Image, Link, Skeleton, Tooltip } from '@chakra-ui/react';
 import React from 'react';
 
+import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
+
 import config from 'configs/app';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import AppActionButton from 'ui/shared/AppActionButton/AppActionButton';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import TextSeparator from 'ui/shared/TextSeparator';
 
 interface Props {
   hash: string | undefined;
   id?: string;
   isLoading?: boolean;
+  appActionData?: AddressMetadataTagFormatted['meta'];
+  source: 'NFT collection' | 'NFT item';
 }
 
-const TokenNftMarketplaces = ({ hash, id, isLoading }: Props) => {
+const TokenNftMarketplaces = ({ hash, id, isLoading, appActionData, source }: Props) => {
   if (!hash || config.UI.views.nft.marketplaces.length === 0) {
     return null;
   }
 
   return (
-    <DetailsInfoItem
-      title="Marketplaces"
-      hint="Marketplaces trading this NFT"
-      alignSelf="center"
-      isLoading={ isLoading }
-    >
-      <Skeleton isLoaded={ !isLoading } display="flex" columnGap={ 3 } flexWrap="wrap">
-        { config.UI.views.nft.marketplaces.map((item) => {
-
-          const hrefTemplate = id ? item.instance_url : item.collection_url;
-          const href = hrefTemplate.replace('{id}', id || '').replace('{hash}', hash || '');
-
-          return (
-            <Tooltip label={ `View on ${ item.name }` } key={ item.name }>
-              <Link href={ href } target="_blank">
-                <Image
-                  src={ item.logo_url }
-                  alt={ `${ item.name } marketplace logo` }
-                  boxSize={ 5 }
-                  borderRadius="full"
-                />
-              </Link>
-            </Tooltip>
-          );
-        }) }
-      </Skeleton>
-    </DetailsInfoItem>
+    <>
+      <DetailsInfoItem.Label
+        hint="Marketplaces trading this NFT"
+        isLoading={ isLoading }
+      >
+        Marketplaces
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value
+        py={ appActionData ? '1px' : '6px' }
+      >
+        <Skeleton isLoaded={ !isLoading } display="flex" columnGap={ 3 } flexWrap="wrap" alignItems="center">
+          { config.UI.views.nft.marketplaces.map((item) => {
+
+            const hrefTemplate = id ? item.instance_url : item.collection_url;
+            const href = hrefTemplate.replace('{id}', id || '').replace('{hash}', hash || '');
+
+            return (
+              <Tooltip label={ `View on ${ item.name }` } key={ item.name }>
+                <Link href={ href } target="_blank">
+                  <Image
+                    src={ item.logo_url }
+                    alt={ `${ item.name } marketplace logo` }
+                    boxSize={ 5 }
+                    borderRadius="full"
+                  />
+                </Link>
+              </Tooltip>
+            );
+          }) }
+          { appActionData && (
+            <>
+              <TextSeparator color="gray.500" margin={ 0 }/>
+              <AppActionButton data={ appActionData } height="30px" source={ source }/>
+            </>
+          ) }
+        </Skeleton>
+      </DetailsInfoItem.Value>
+    </>
   );
 };
 
diff --git a/ui/token/TokenPageTitle.tsx b/ui/token/TokenPageTitle.tsx
new file mode 100644
index 0000000000..2cc648cb53
--- /dev/null
+++ b/ui/token/TokenPageTitle.tsx
@@ -0,0 +1,153 @@
+import { Box, Flex, Tooltip, useToken } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import React from 'react';
+
+import type { Address } from 'types/api/address';
+import type { TokenInfo } from 'types/api/token';
+import type { EntityTag } from 'ui/shared/EntityTags/types';
+
+import config from 'configs/app';
+import useAddressMetadataInfoQuery from 'lib/address/useAddressMetadataInfoQuery';
+import type { ResourceError } from 'lib/api/resources';
+import useApiQuery from 'lib/api/useApiQuery';
+import { useAppContext } from 'lib/contexts/app';
+import { getTokenTypeName } from 'lib/token/tokenTypes';
+import AddressQrCode from 'ui/address/details/AddressQrCode';
+import AccountActionsMenu from 'ui/shared/AccountActionsMenu/AccountActionsMenu';
+import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import EntityTags from 'ui/shared/EntityTags/EntityTags';
+import formatUserTags from 'ui/shared/EntityTags/formatUserTags';
+import sortEntityTags from 'ui/shared/EntityTags/sortEntityTags';
+import IconSvg from 'ui/shared/IconSvg';
+import NetworkExplorers from 'ui/shared/NetworkExplorers';
+import PageTitle from 'ui/shared/Page/PageTitle';
+
+import TokenVerifiedInfo from './TokenVerifiedInfo';
+
+interface Props {
+  tokenQuery: UseQueryResult<TokenInfo, ResourceError<unknown>>;
+  addressQuery: UseQueryResult<Address, ResourceError<unknown>>;
+  hash: string;
+}
+
+const TokenPageTitle = ({ tokenQuery, addressQuery, hash }: Props) => {
+  const appProps = useAppContext();
+  const addressHash = !tokenQuery.isPlaceholderData ? (tokenQuery.data?.address || '') : '';
+
+  const verifiedInfoQuery = useApiQuery('token_verified_info', {
+    pathParams: { hash: addressHash, chainId: config.chain.id },
+    queryOptions: { enabled: Boolean(tokenQuery.data) && !tokenQuery.isPlaceholderData && config.features.verifiedTokens.isEnabled },
+  });
+
+  const addressesForMetadataQuery = React.useMemo(() => ([ hash ].filter(Boolean)), [ hash ]);
+  const addressMetadataQuery = useAddressMetadataInfoQuery(addressesForMetadataQuery);
+
+  const isLoading = tokenQuery.isPlaceholderData ||
+    addressQuery.isPlaceholderData ||
+    (config.features.verifiedTokens.isEnabled && verifiedInfoQuery.isPending);
+
+  const tokenSymbolText = tokenQuery.data?.symbol ? ` (${ tokenQuery.data.symbol })` : '';
+
+  const backLink = React.useMemo(() => {
+    const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/tokens');
+
+    if (!hasGoBackLink) {
+      return;
+    }
+
+    return {
+      label: 'Back to tokens list',
+      url: appProps.referrer,
+    };
+  }, [ appProps.referrer ]);
+
+  const bridgedTokenTagBgColor = useToken('colors', 'blue.500');
+  const bridgedTokenTagTextColor = useToken('colors', 'white');
+
+  const tags: Array<EntityTag> = React.useMemo(() => {
+    return [
+      tokenQuery.data ? { slug: tokenQuery.data?.type, name: getTokenTypeName(tokenQuery.data.type), tagType: 'custom' as const, ordinal: -20 } : undefined,
+      config.features.bridgedTokens.isEnabled && tokenQuery.data?.is_bridged ?
+        {
+          slug: 'bridged',
+          name: 'Bridged',
+          tagType: 'custom' as const,
+          ordinal: -10,
+          meta: { bgColor: bridgedTokenTagBgColor, textColor: bridgedTokenTagTextColor },
+        } :
+        undefined,
+      ...formatUserTags(addressQuery.data),
+      verifiedInfoQuery.data?.projectSector ?
+        { slug: verifiedInfoQuery.data.projectSector, name: verifiedInfoQuery.data.projectSector, tagType: 'custom' as const, ordinal: -30 } :
+        undefined,
+      ...(addressMetadataQuery.data?.addresses?.[hash.toLowerCase()]?.tags || []),
+    ].filter(Boolean).sort(sortEntityTags);
+  }, [
+    addressMetadataQuery.data?.addresses,
+    addressQuery.data,
+    bridgedTokenTagBgColor,
+    bridgedTokenTagTextColor,
+    tokenQuery.data,
+    verifiedInfoQuery.data?.projectSector,
+    hash,
+  ]);
+
+  const contentAfter = (
+    <>
+      { verifiedInfoQuery.data?.tokenAddress && (
+        <Tooltip label={ `Information on this token has been verified by ${ config.chain.name }` }>
+          <Box boxSize={ 6 }>
+            <IconSvg name="certified" color="green.500" boxSize={ 6 } cursor="pointer"/>
+          </Box>
+        </Tooltip>
+      ) }
+      <EntityTags
+        isLoading={ isLoading || (config.features.addressMetadata.isEnabled && addressMetadataQuery.isPending) }
+        tags={ tags }
+        flexGrow={ 1 }
+      />
+    </>
+  );
+
+  const secondRow = (
+    <Flex alignItems="center" w="100%" minW={ 0 } columnGap={ 2 } rowGap={ 2 } flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
+      { addressQuery.data && (
+        <AddressEntity
+          address={{ ...addressQuery.data, name: '' }}
+          isLoading={ isLoading }
+          fontFamily="heading"
+          fontSize="lg"
+          fontWeight={ 500 }
+        />
+      ) }
+      { !isLoading && tokenQuery.data && <AddressAddToWallet token={ tokenQuery.data } variant="button"/> }
+      <AddressQrCode address={ addressQuery.data } isLoading={ isLoading }/>
+      <AccountActionsMenu isLoading={ isLoading }/>
+      <Flex ml={{ base: 0, lg: 'auto' }} columnGap={ 2 } flexGrow={{ base: 1, lg: 0 }}>
+        <TokenVerifiedInfo verifiedInfoQuery={ verifiedInfoQuery }/>
+        <NetworkExplorers type="token" pathParam={ addressHash } ml={{ base: 'auto', lg: 0 }}/>
+      </Flex>
+    </Flex>
+  );
+
+  return (
+    <PageTitle
+      title={ `${ tokenQuery.data?.name || 'Unnamed token' }${ tokenSymbolText }` }
+      isLoading={ tokenQuery.isPlaceholderData }
+      backLink={ backLink }
+      beforeTitle={ tokenQuery.data ? (
+        <TokenEntity.Icon
+          token={ tokenQuery.data }
+          isLoading={ tokenQuery.isPlaceholderData }
+          size="lg"
+        />
+      ) : null }
+      contentAfter={ contentAfter }
+      secondRow={ secondRow }
+    />
+  );
+};
+
+export default TokenPageTitle;
diff --git a/ui/token/TokenProjectInfo.tsx b/ui/token/TokenProjectInfo.tsx
index 4aa71e47f2..a2e20f1aa1 100644
--- a/ui/token/TokenProjectInfo.tsx
+++ b/ui/token/TokenProjectInfo.tsx
@@ -1,5 +1,5 @@
 import {
-  Popover, PopoverTrigger, PopoverContent, PopoverBody,
+  PopoverTrigger, PopoverContent, PopoverBody,
   Modal, ModalContent, ModalCloseButton,
   useDisclosure,
 } from '@chakra-ui/react';
@@ -8,6 +8,7 @@ import React from 'react';
 import type { TokenVerifiedInfo } from 'types/api/token';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
+import Popover from 'ui/shared/chakra/Popover';
 
 import Content, { hasContent } from './TokenProjectInfo/Content';
 import TriggerButton from './TokenProjectInfo/TriggerButton';
@@ -27,7 +28,7 @@ const TokenProjectInfo = ({ data }: Props) => {
   if (isMobile) {
     return (
       <>
-        <TriggerButton onClick={ onToggle }/>
+        <TriggerButton onClick={ onToggle } isActive={ isOpen }/>
         <Modal isOpen={ isOpen } onClose={ onClose } size="full">
           <ModalContent>
             <ModalCloseButton/>
@@ -41,7 +42,7 @@ const TokenProjectInfo = ({ data }: Props) => {
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
       <PopoverTrigger>
-        <TriggerButton onClick={ onToggle }/>
+        <TriggerButton onClick={ onToggle } isActive={ isOpen }/>
       </PopoverTrigger>
       <PopoverContent w="500px">
         <PopoverBody px={ 6 } py={ 5 }>
diff --git a/ui/token/TokenProjectInfo/Content.tsx b/ui/token/TokenProjectInfo/Content.tsx
index 91a7d80704..16cdfb4d79 100644
--- a/ui/token/TokenProjectInfo/Content.tsx
+++ b/ui/token/TokenProjectInfo/Content.tsx
@@ -14,7 +14,7 @@ interface Props {
 
 const SOCIAL_LINKS: Array<Omit<ServiceLinkProps, 'href'>> = [
   { field: 'github', icon: 'social/github_filled', title: 'Github' },
-  { field: 'twitter', icon: 'social/twitter_filled', title: 'Twitter' },
+  { field: 'twitter', icon: 'social/twitter_filled', title: 'X (ex-Twitter)' },
   { field: 'telegram', icon: 'social/telegram_filled', title: 'Telegram' },
   { field: 'openSea', icon: 'social/opensea_filled', title: 'OpenSea' },
   { field: 'linkedin', icon: 'social/linkedin_filled', title: 'LinkedIn' },
diff --git a/ui/token/TokenProjectInfo/TriggerButton.tsx b/ui/token/TokenProjectInfo/TriggerButton.tsx
index 9a96e937d5..fa5a03f317 100644
--- a/ui/token/TokenProjectInfo/TriggerButton.tsx
+++ b/ui/token/TokenProjectInfo/TriggerButton.tsx
@@ -5,9 +5,10 @@ import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   onClick: () => void;
+  isActive: boolean;
 }
 
-const TriggerButton = ({ onClick }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+const TriggerButton = ({ onClick, isActive }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
   return (
     <Button
       ref={ ref }
@@ -15,6 +16,7 @@ const TriggerButton = ({ onClick }: Props, ref: React.ForwardedRef<HTMLButtonEle
       variant="outline"
       colorScheme="gray"
       onClick={ onClick }
+      isActive={ isActive }
       aria-label="Show project info"
       fontWeight={ 500 }
       lineHeight={ 6 }
diff --git a/ui/token/TokenTransfer/TokenTransfer.pw.tsx b/ui/token/TokenTransfer/TokenTransfer.pw.tsx
index 70e6eb4699..417c9fa502 100644
--- a/ui/token/TokenTransfer/TokenTransfer.pw.tsx
+++ b/ui/token/TokenTransfer/TokenTransfer.pw.tsx
@@ -1,16 +1,14 @@
 import { Box } from '@chakra-ui/react';
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import TokenTransfer from './TokenTransfer';
 
-test('erc20 +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: '100px' }}/>
+test('erc20 +@mobile', async({ render }) => {
+  const component = await render(
+    <Box pt={{ base: '134px', lg: '100px' }}>
       <TokenTransfer
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore:
@@ -24,16 +22,15 @@ test('erc20 +@mobile', async({ mount }) => {
           pagination: { page: 1, isVisible: true },
         }}
       />
-    </TestApp>,
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('erc721 +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: '100px' }}/>
+test('erc721 +@mobile', async({ render }) => {
+  const component = await render(
+    <Box pt={{ base: '134px', lg: '100px' }}>
       <TokenTransfer
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore:
@@ -47,16 +44,15 @@ test('erc721 +@mobile', async({ mount }) => {
           pagination: { page: 1, isVisible: true },
         }}
       />
-    </TestApp>,
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
 });
 
-test('erc1155 +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <Box h={{ base: '134px', lg: '100px' }}/>
+test('erc1155 +@mobile', async({ render }) => {
+  const component = await render(
+    <Box pt={{ base: '134px', lg: '100px' }}>
       <TokenTransfer
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore:
@@ -75,7 +71,7 @@ test('erc1155 +@mobile', async({ mount }) => {
           pagination: { page: 1, isVisible: true },
         }}
       />
-    </TestApp>,
+    </Box>,
   );
 
   await expect(component).toHaveScreenshot();
diff --git a/ui/token/TokenTransfer/TokenTransfer.tsx b/ui/token/TokenTransfer/TokenTransfer.tsx
index 5c28a3d129..1ac2e3056f 100644
--- a/ui/token/TokenTransfer/TokenTransfer.tsx
+++ b/ui/token/TokenTransfer/TokenTransfer.tsx
@@ -7,6 +7,7 @@ import type { TokenInfo } from 'types/api/token';
 
 import useGradualIncrement from 'lib/hooks/useGradualIncrement';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import useIsMounted from 'lib/hooks/useIsMounted';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import ActionBar from 'ui/shared/ActionBar';
@@ -17,14 +18,18 @@ import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 import TokenTransferList from 'ui/token/TokenTransfer/TokenTransferList';
 import TokenTransferTable from 'ui/token/TokenTransfer/TokenTransferTable';
 
+const TABS_HEIGHT = 88;
+
 type Props = {
   transfersQuery: QueryWithPagesResult<'token_transfers'> | QueryWithPagesResult<'token_instance_transfers'>;
   tokenId?: string;
   token?: TokenInfo;
+  shouldRender?: boolean;
 }
 
-const TokenTransfer = ({ transfersQuery, tokenId, token }: Props) => {
+const TokenTransfer = ({ transfersQuery, tokenId, token, shouldRender = true }: Props) => {
   const isMobile = useIsMobile();
+  const isMounted = useIsMounted();
   const router = useRouter();
   const { isError, isPlaceholderData, data, pagination } = transfersQuery;
 
@@ -55,13 +60,16 @@ const TokenTransfer = ({ transfersQuery, tokenId, token }: Props) => {
     handler: handleNewTransfersMessage,
   });
 
-  const content = data?.items ? (
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
 
+  const content = data?.items ? (
     <>
       <Box display={{ base: 'none', lg: 'block' }}>
         <TokenTransferTable
           data={ data?.items }
-          top={ pagination.isVisible ? 80 : 0 }
+          top={ pagination.isVisible ? TABS_HEIGHT : 0 }
           showSocketInfo={ pagination.page === 1 }
           socketInfoAlert={ socketAlert }
           socketInfoNum={ newItemsCount }
diff --git a/ui/token/TokenTransfer/TokenTransferListItem.tsx b/ui/token/TokenTransfer/TokenTransferListItem.tsx
index f4c582e039..40c9b70cd2 100644
--- a/ui/token/TokenTransfer/TokenTransferListItem.tsx
+++ b/ui/token/TokenTransfer/TokenTransferListItem.tsx
@@ -4,13 +4,13 @@ import React from 'react';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import Tag from 'ui/shared/chakra/Tag';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
 type Props = TokenTransfer & { tokenId?: string; isLoading?: boolean };
@@ -26,7 +26,6 @@ const TokenTransferListItem = ({
   tokenId,
   isLoading,
 }: Props) => {
-  const timeAgo = useTimeAgoIncrement(timestamp, true);
   const { usd, valueStr } = 'value' in total && total.value !== null ? getCurrencyValue({
     value: total.value,
     exchangeRate: token.exchange_rate,
@@ -44,13 +43,15 @@ const TokenTransferListItem = ({
           truncation="constant_long"
           fontWeight="700"
         />
-        { timestamp && (
-          <Skeleton isLoaded={ !isLoading } display="inline-block" fontWeight="400" fontSize="sm" color="text_secondary">
-            <span>
-              { timeAgo }
-            </span>
-          </Skeleton>
-        ) }
+        <TimeAgoWithTooltip
+          timestamp={ timestamp }
+          enableIncrement
+          isLoading={ isLoading }
+          color="text_secondary"
+          fontWeight="400"
+          fontSize="sm"
+          display="inline-block"
+        />
       </Flex>
       { method && <Tag isLoading={ isLoading }>{ method }</Tag> }
       <AddressFromTo
diff --git a/ui/token/TokenTransfer/TokenTransferTableItem.tsx b/ui/token/TokenTransfer/TokenTransferTableItem.tsx
index 63b2ee005f..f09c802e20 100644
--- a/ui/token/TokenTransfer/TokenTransferTableItem.tsx
+++ b/ui/token/TokenTransfer/TokenTransferTableItem.tsx
@@ -4,12 +4,12 @@ import React from 'react';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import Tag from 'ui/shared/chakra/Tag';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 type Props = TokenTransfer & { tokenId?: string; isLoading?: boolean }
 
@@ -24,7 +24,6 @@ const TokenTransferTableItem = ({
   tokenId,
   isLoading,
 }: Props) => {
-  const timeAgo = useTimeAgoIncrement(timestamp, true);
   const { usd, valueStr } = 'value' in total && total.value !== null ? getCurrencyValue({
     value: total.value,
     exchangeRate: token.exchange_rate,
@@ -44,13 +43,15 @@ const TokenTransferTableItem = ({
             noIcon
             truncation="constant_long"
           />
-          { timestamp && (
-            <Skeleton isLoaded={ !isLoading } display="inline-block" color="gray.500" fontWeight="400" ml="10px">
-              <span>
-                { timeAgo }
-              </span>
-            </Skeleton>
-          ) }
+          <TimeAgoWithTooltip
+            timestamp={ timestamp }
+            enableIncrement
+            isLoading={ isLoading }
+            display="inline-block"
+            color="gray.500"
+            fontWeight="400"
+            ml="10px"
+          />
         </Flex>
       </Td>
       <Td>
diff --git a/ui/token/TokenVerifiedInfo.tsx b/ui/token/TokenVerifiedInfo.tsx
index 56af8bda88..28f69bee4e 100644
--- a/ui/token/TokenVerifiedInfo.tsx
+++ b/ui/token/TokenVerifiedInfo.tsx
@@ -6,7 +6,7 @@ import type { TokenVerifiedInfo as TTokenVerifiedInfo } from 'types/api/token';
 
 import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
-import LinkExternal from 'ui/shared/LinkExternal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
 
 import TokenProjectInfo from './TokenProjectInfo';
 
diff --git a/ui/token/__screenshots__/TokenInventory.pw.tsx_mobile_base-view-mobile-1.png b/ui/token/__screenshots__/TokenInventory.pw.tsx_mobile_base-view-mobile-1.png
index 68c891937f..b904e8d503 100644
Binary files a/ui/token/__screenshots__/TokenInventory.pw.tsx_mobile_base-view-mobile-1.png and b/ui/token/__screenshots__/TokenInventory.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/token/useTokenQuery.tsx b/ui/token/useTokenQuery.tsx
new file mode 100644
index 0000000000..4359f299b6
--- /dev/null
+++ b/ui/token/useTokenQuery.tsx
@@ -0,0 +1,16 @@
+import useApiQuery from 'lib/api/useApiQuery';
+import { useAppContext } from 'lib/contexts/app';
+import * as tokenStubs from 'stubs/token';
+
+export default function useTokenQuery(hash: string) {
+  const { apiData } = useAppContext<'/token/[hash]'>();
+
+  return useApiQuery('token', {
+    pathParams: { hash },
+    queryOptions: {
+      enabled: Boolean(hash),
+      placeholderData: tokenStubs.TOKEN_INFO_ERC_20,
+      initialData: apiData || undefined,
+    },
+  });
+}
diff --git a/ui/tokenInfo/TokenInfoForm.pw.tsx b/ui/tokenInfo/TokenInfoForm.pw.tsx
index 46ed578c00..ac7ce03bf9 100644
--- a/ui/tokenInfo/TokenInfoForm.pw.tsx
+++ b/ui/tokenInfo/TokenInfoForm.pw.tsx
@@ -1,66 +1,33 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as mocks from 'mocks/account/verifiedAddresses';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import TokenInfoForm from './TokenInfoForm';
 
-const FORM_CONFIG_URL = buildApiUrl('token_info_applications_config', { chainId: '1' });
-
-test('base view +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(mocks.TOKEN_INFO_APPLICATION_BASE.iconUrl, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_md.jpg',
-    });
-  });
-
-  await page.route(FORM_CONFIG_URL, (route) => route.fulfill({
-    body: JSON.stringify(mocks.TOKEN_INFO_FORM_CONFIG),
-  }));
+test.beforeEach(async({ mockApiResponse, mockAssetResponse }) => {
+  await mockApiResponse('token_info_applications_config', mocks.TOKEN_INFO_FORM_CONFIG, { pathParams: { chainId: '1' } });
+  await mockAssetResponse(mocks.TOKEN_INFO_APPLICATION_BASE.iconUrl, './playwright/mocks/image_md.jpg');
+});
 
+test('base view +@mobile +@dark-mode', async({ render }) => {
   const props = {
     address: mocks.VERIFIED_ADDRESS.ITEM_1.contractAddress,
     tokenName: 'Test Token (TT)',
     application: mocks.TOKEN_INFO_APPLICATION.APPROVED,
     onSubmit: () => {},
   };
-
-  const component = await mount(
-    <TestApp>
-      <TokenInfoForm { ...props }/>
-    </TestApp>,
-  );
-
+  const component = await render(<TokenInfoForm { ...props }/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('status IN_PROCESS', async({ mount, page }) => {
-  await page.route(mocks.TOKEN_INFO_APPLICATION_BASE.iconUrl, (route) => {
-    return route.fulfill({
-      status: 200,
-      path: './playwright/mocks/image_md.jpg',
-    });
-  });
-
-  await page.route(FORM_CONFIG_URL, (route) => route.fulfill({
-    body: JSON.stringify(mocks.TOKEN_INFO_FORM_CONFIG),
-  }));
-
+test('status IN_PROCESS', async({ render }) => {
   const props = {
     address: mocks.VERIFIED_ADDRESS.ITEM_1.contractAddress,
     tokenName: 'Test Token (TT)',
     application: mocks.TOKEN_INFO_APPLICATION.IN_PROCESS,
     onSubmit: () => {},
   };
-
-  const component = await mount(
-    <TestApp>
-      <TokenInfoForm { ...props }/>
-    </TestApp>,
-  );
-
+  const component = await render(<TokenInfoForm { ...props }/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png
index 8eef0d0de8..ad3fd4814a 100644
Binary files a/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png and b/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_default_base-view-mobile-dark-mode-1.png
index d1737b30ec..e2c2f880ef 100644
Binary files a/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_default_base-view-mobile-dark-mode-1.png and b/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_default_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_default_status-IN-PROCESS-1.png b/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_default_status-IN-PROCESS-1.png
index a05db20f6f..427366f672 100644
Binary files a/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_default_status-IN-PROCESS-1.png and b/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_default_status-IN-PROCESS-1.png differ
diff --git a/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png b/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png
index b64f67d6ac..05cc4a0efb 100644
Binary files a/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png and b/ui/tokenInfo/__screenshots__/TokenInfoForm.pw.tsx_mobile_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/tokenInfo/fields/TokenInfoFieldAddress.tsx b/ui/tokenInfo/fields/TokenInfoFieldAddress.tsx
index ee4fcd5b83..0d40c03d1b 100644
--- a/ui/tokenInfo/fields/TokenInfoFieldAddress.tsx
+++ b/ui/tokenInfo/fields/TokenInfoFieldAddress.tsx
@@ -18,7 +18,7 @@ const TokenInfoFieldAddress = ({ control }: Props) => {
         <Input
           { ...field }
           required
-          isDisabled
+          isReadOnly
         />
         <InputPlaceholder text="Token contract address"/>
       </FormControl>
diff --git a/ui/tokenInfo/fields/TokenInfoFieldComment.tsx b/ui/tokenInfo/fields/TokenInfoFieldComment.tsx
index 9782c82d3e..6fbe297506 100644
--- a/ui/tokenInfo/fields/TokenInfoFieldComment.tsx
+++ b/ui/tokenInfo/fields/TokenInfoFieldComment.tsx
@@ -19,7 +19,8 @@ const TokenInfoFieldComment = ({ control, isReadOnly }: Props) => {
         <Textarea
           { ...field }
           isInvalid={ Boolean(fieldState.error) }
-          isDisabled={ formState.isSubmitting || isReadOnly }
+          isDisabled={ formState.isSubmitting }
+          isReadOnly={ isReadOnly }
           autoComplete="off"
           maxH="160px"
           maxLength={ 300 }
diff --git a/ui/tokenInfo/fields/TokenInfoFieldDocs.tsx b/ui/tokenInfo/fields/TokenInfoFieldDocs.tsx
index d31a2e2d10..e0124009af 100644
--- a/ui/tokenInfo/fields/TokenInfoFieldDocs.tsx
+++ b/ui/tokenInfo/fields/TokenInfoFieldDocs.tsx
@@ -20,7 +20,8 @@ const TokenInfoFieldDocs = ({ control, isReadOnly }: Props) => {
         <Input
           { ...field }
           isInvalid={ Boolean(fieldState.error) }
-          isDisabled={ formState.isSubmitting || isReadOnly }
+          isDisabled={ formState.isSubmitting }
+          isReadOnly={ isReadOnly }
           autoComplete="off"
         />
         <InputPlaceholder text="Docs" error={ fieldState.error }/>
diff --git a/ui/tokenInfo/fields/TokenInfoFieldIconUrl.tsx b/ui/tokenInfo/fields/TokenInfoFieldIconUrl.tsx
index 432117b21d..674aef6f7c 100644
--- a/ui/tokenInfo/fields/TokenInfoFieldIconUrl.tsx
+++ b/ui/tokenInfo/fields/TokenInfoFieldIconUrl.tsx
@@ -58,7 +58,8 @@ const TokenInfoFieldIconUrl = ({ control, isReadOnly, trigger }: Props) => {
           { ...field }
           onBlur={ handleBlur }
           isInvalid={ Boolean(fieldState.error) }
-          isDisabled={ formState.isSubmitting || isReadOnly }
+          isDisabled={ formState.isSubmitting }
+          isReadOnly={ isReadOnly }
           autoComplete="off"
           required
         />
diff --git a/ui/tokenInfo/fields/TokenInfoFieldPriceTicker.tsx b/ui/tokenInfo/fields/TokenInfoFieldPriceTicker.tsx
index 68bb040f73..7732c211bb 100644
--- a/ui/tokenInfo/fields/TokenInfoFieldPriceTicker.tsx
+++ b/ui/tokenInfo/fields/TokenInfoFieldPriceTicker.tsx
@@ -22,7 +22,8 @@ const TokenInfoFieldPriceTicker = ({ control, isReadOnly, name, label }: Props)
         <Input
           { ...field }
           isInvalid={ Boolean(fieldState.error) }
-          isDisabled={ formState.isSubmitting || isReadOnly }
+          isDisabled={ formState.isSubmitting }
+          isReadOnly={ isReadOnly }
           autoComplete="off"
         />
         <InputPlaceholder text={ label } error={ fieldState.error }/>
diff --git a/ui/tokenInfo/fields/TokenInfoFieldProjectDescription.tsx b/ui/tokenInfo/fields/TokenInfoFieldProjectDescription.tsx
index 7b9ed16767..f2d7cc6708 100644
--- a/ui/tokenInfo/fields/TokenInfoFieldProjectDescription.tsx
+++ b/ui/tokenInfo/fields/TokenInfoFieldProjectDescription.tsx
@@ -20,7 +20,8 @@ const TokenInfoFieldProjectDescription = ({ control, isReadOnly }: Props) => {
           { ...field }
           required
           isInvalid={ Boolean(fieldState.error) }
-          isDisabled={ formState.isSubmitting || isReadOnly }
+          isDisabled={ formState.isSubmitting }
+          isReadOnly={ isReadOnly }
           autoComplete="off"
           maxH="160px"
           maxLength={ 300 }
diff --git a/ui/tokenInfo/fields/TokenInfoFieldProjectEmail.tsx b/ui/tokenInfo/fields/TokenInfoFieldProjectEmail.tsx
index bcd1ff7850..d295dbbf40 100644
--- a/ui/tokenInfo/fields/TokenInfoFieldProjectEmail.tsx
+++ b/ui/tokenInfo/fields/TokenInfoFieldProjectEmail.tsx
@@ -21,7 +21,8 @@ const TokenInfoFieldProjectEmail = ({ control, isReadOnly }: Props) => {
           { ...field }
           required
           isInvalid={ Boolean(fieldState.error) }
-          isDisabled={ formState.isSubmitting || isReadOnly }
+          isDisabled={ formState.isSubmitting }
+          isReadOnly={ isReadOnly }
           autoComplete="off"
         />
         <InputPlaceholder text="Official project email address" error={ fieldState.error }/>
diff --git a/ui/tokenInfo/fields/TokenInfoFieldProjectName.tsx b/ui/tokenInfo/fields/TokenInfoFieldProjectName.tsx
index 9048e500ca..4a5423206a 100644
--- a/ui/tokenInfo/fields/TokenInfoFieldProjectName.tsx
+++ b/ui/tokenInfo/fields/TokenInfoFieldProjectName.tsx
@@ -20,7 +20,8 @@ const TokenInfoFieldProjectName = ({ control, isReadOnly }: Props) => {
         <Input
           { ...field }
           isInvalid={ Boolean(fieldState.error) }
-          isDisabled={ formState.isSubmitting || isReadOnly }
+          isDisabled={ formState.isSubmitting }
+          isReadOnly={ isReadOnly }
           autoComplete="off"
         />
         <InputPlaceholder text="Project name" error={ fieldState.error }/>
diff --git a/ui/tokenInfo/fields/TokenInfoFieldProjectSector.tsx b/ui/tokenInfo/fields/TokenInfoFieldProjectSector.tsx
index e6a7dd7e02..57804b6e96 100644
--- a/ui/tokenInfo/fields/TokenInfoFieldProjectSector.tsx
+++ b/ui/tokenInfo/fields/TokenInfoFieldProjectSector.tsx
@@ -29,7 +29,8 @@ const TokenInfoFieldProjectSector = ({ control, isReadOnly, config }: Props) =>
         options={ options }
         size={ isMobile ? 'md' : 'lg' }
         placeholder="Project industry"
-        isDisabled={ formState.isSubmitting || isReadOnly }
+        isDisabled={ formState.isSubmitting }
+        isReadOnly={ isReadOnly }
         error={ fieldState.error }
       />
     );
diff --git a/ui/tokenInfo/fields/TokenInfoFieldProjectWebsite.tsx b/ui/tokenInfo/fields/TokenInfoFieldProjectWebsite.tsx
index 0336e3b30f..878a520de6 100644
--- a/ui/tokenInfo/fields/TokenInfoFieldProjectWebsite.tsx
+++ b/ui/tokenInfo/fields/TokenInfoFieldProjectWebsite.tsx
@@ -20,7 +20,8 @@ const TokenInfoFieldProjectWebsite = ({ control, isReadOnly }: Props) => {
         <Input
           { ...field }
           isInvalid={ Boolean(fieldState.error) }
-          isDisabled={ formState.isSubmitting || isReadOnly }
+          isDisabled={ formState.isSubmitting }
+          isReadOnly={ isReadOnly }
           autoComplete="off"
           required
         />
diff --git a/ui/tokenInfo/fields/TokenInfoFieldRequesterEmail.tsx b/ui/tokenInfo/fields/TokenInfoFieldRequesterEmail.tsx
index 60eba7682a..8311a0275d 100644
--- a/ui/tokenInfo/fields/TokenInfoFieldRequesterEmail.tsx
+++ b/ui/tokenInfo/fields/TokenInfoFieldRequesterEmail.tsx
@@ -21,7 +21,8 @@ const TokenInfoFieldRequesterEmail = ({ control, isReadOnly }: Props) => {
           { ...field }
           required
           isInvalid={ Boolean(fieldState.error) }
-          isDisabled={ formState.isSubmitting || isReadOnly }
+          isDisabled={ formState.isSubmitting }
+          isReadOnly={ isReadOnly }
           autoComplete="off"
         />
         <InputPlaceholder text="Requester email" error={ fieldState.error }/>
diff --git a/ui/tokenInfo/fields/TokenInfoFieldRequesterName.tsx b/ui/tokenInfo/fields/TokenInfoFieldRequesterName.tsx
index b346124af6..8e1b3f137b 100644
--- a/ui/tokenInfo/fields/TokenInfoFieldRequesterName.tsx
+++ b/ui/tokenInfo/fields/TokenInfoFieldRequesterName.tsx
@@ -20,7 +20,8 @@ const TokenInfoFieldRequesterName = ({ control, isReadOnly }: Props) => {
           { ...field }
           required
           isInvalid={ Boolean(fieldState.error) }
-          isDisabled={ formState.isSubmitting || isReadOnly }
+          isDisabled={ formState.isSubmitting }
+          isReadOnly={ isReadOnly }
           autoComplete="off"
         />
         <InputPlaceholder text="Requester name" error={ fieldState.error }/>
diff --git a/ui/tokenInfo/fields/TokenInfoFieldSocialLink.tsx b/ui/tokenInfo/fields/TokenInfoFieldSocialLink.tsx
index c0521edf66..23bc5ce62d 100644
--- a/ui/tokenInfo/fields/TokenInfoFieldSocialLink.tsx
+++ b/ui/tokenInfo/fields/TokenInfoFieldSocialLink.tsx
@@ -21,7 +21,7 @@ const SETTINGS: Record<keyof SocialLinkFields, Item> = {
   linkedin: { label: 'LinkedIn', icon: 'social/linkedin_filled', color: 'linkedin' },
   discord: { label: 'Discord', icon: 'social/discord_filled', color: 'discord' },
   slack: { label: 'Slack', icon: 'social/slack_filled', color: 'slack' },
-  twitter: { label: 'Twitter', icon: 'social/twitter_filled', color: 'twitter' },
+  twitter: { label: 'X (ex-Twitter)', icon: 'social/twitter_filled', color: 'inherit' },
   opensea: { label: 'OpenSea', icon: 'social/opensea_filled', color: 'opensea' },
   facebook: { label: 'Facebook', icon: 'social/facebook_filled', color: 'facebook' },
   medium: { label: 'Medium', icon: 'social/medium_filled', color: 'inherit' },
@@ -42,7 +42,8 @@ const TokenInfoFieldSocialLink = ({ control, isReadOnly, name }: Props) => {
           <Input
             { ...field }
             isInvalid={ Boolean(fieldState.error) }
-            isDisabled={ formState.isSubmitting || isReadOnly }
+            isDisabled={ formState.isSubmitting }
+            isReadOnly={ isReadOnly }
             autoComplete="off"
           />
           <InputPlaceholder text={ SETTINGS[name].label } error={ fieldState.error }/>
diff --git a/ui/tokenInfo/fields/TokenInfoFieldSupport.tsx b/ui/tokenInfo/fields/TokenInfoFieldSupport.tsx
index ac69abab40..ec61ab505b 100644
--- a/ui/tokenInfo/fields/TokenInfoFieldSupport.tsx
+++ b/ui/tokenInfo/fields/TokenInfoFieldSupport.tsx
@@ -22,7 +22,8 @@ const TokenInfoFieldSupport = ({ control, isReadOnly }: Props) => {
         <Input
           { ...field }
           isInvalid={ Boolean(fieldState.error) }
-          isDisabled={ formState.isSubmitting || isReadOnly }
+          isDisabled={ formState.isSubmitting }
+          isReadOnly={ isReadOnly }
           autoComplete="off"
         />
         <InputPlaceholder text="Support URL or email" error={ fieldState.error }/>
diff --git a/ui/tokenInfo/fields/TokenInfoFieldTokenName.tsx b/ui/tokenInfo/fields/TokenInfoFieldTokenName.tsx
index e186e25c39..8101c64b7c 100644
--- a/ui/tokenInfo/fields/TokenInfoFieldTokenName.tsx
+++ b/ui/tokenInfo/fields/TokenInfoFieldTokenName.tsx
@@ -18,7 +18,7 @@ const TokenInfoFieldTokenName = ({ control }: Props) => {
         <Input
           { ...field }
           required
-          isDisabled
+          isReadOnly
         />
         <InputPlaceholder text="Token name"/>
       </FormControl>
diff --git a/ui/tokenInstance/TokenInstanceDetails.pw.tsx b/ui/tokenInstance/TokenInstanceDetails.pw.tsx
index d4d31085e4..84ea79091e 100644
--- a/ui/tokenInstance/TokenInstanceDetails.pw.tsx
+++ b/ui/tokenInstance/TokenInstanceDetails.pw.tsx
@@ -1,45 +1,88 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import type { AddressMetadataInfo, AddressMetadataTagApi } from 'types/api/addressMetadata';
+
+import config from 'configs/app';
 import * as addressMock from 'mocks/address/address';
+import { protocolTagWithMeta } from 'mocks/metadata/address';
 import { tokenInfoERC721a } from 'mocks/tokens/tokenInfo';
 import * as tokenInstanceMock from 'mocks/tokens/tokenInstance';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
+import { MetadataUpdateProvider } from 'ui/tokenInstance/contexts/metadataUpdate';
 
 import TokenInstanceDetails from './TokenInstanceDetails';
 
 const hash = tokenInfoERC721a.address;
 
-const API_URL_ADDRESS = buildApiUrl('address', { hash });
-const API_URL_TOKEN_TRANSFERS_COUNT = buildApiUrl('token_instance_transfers_count', {
-  id: tokenInstanceMock.unique.id,
-  hash,
+const addressMetadataQueryParams = {
+  addresses: [ hash ],
+  chainId: config.chain.id,
+  tagsLimit: '20',
+};
+
+function generateAddressMetadataResponse(tag: AddressMetadataTagApi) {
+  return {
+    addresses: {
+      [ hash.toLowerCase() as string ]: {
+        tags: [ {
+          ...tag,
+          meta: JSON.stringify(tag.meta),
+        } ],
+      },
+    },
+  } as AddressMetadataInfo;
+}
+
+test.beforeEach(async({ mockApiResponse, mockAssetResponse }) => {
+  await mockApiResponse('address', addressMock.contract, { pathParams: { hash } });
+  await mockApiResponse('token_instance_transfers_count', { transfers_count: 42 }, { pathParams: { id: tokenInstanceMock.unique.id, hash } });
+  await mockAssetResponse('http://localhost:3000/nft-marketplace-logo.png', './playwright/mocks/image_s.jpg');
+  await mockAssetResponse(tokenInstanceMock.unique.image_url as string, './playwright/mocks/image_md.jpg');
 });
 
-test('base view +@dark-mode +@mobile', async({ mount, page }) => {
-  await page.route('http://localhost:3000/nft-marketplace-logo.png', (route) => route.fulfill({
-    status: 200,
-    path: './playwright/mocks/image_s.jpg',
-  }));
-  await page.route(API_URL_ADDRESS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(addressMock.contract),
-  }));
-  await page.route(API_URL_TOKEN_TRANSFERS_COUNT, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ transfers_count: 42 }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <TokenInstanceDetails data={ tokenInstanceMock.unique } token={ tokenInfoERC721a }/>
-    </TestApp>,
+test('base view +@dark-mode +@mobile', async({ render, page }) => {
+  const component = await render(
+    <MetadataUpdateProvider>
+      <TokenInstanceDetails data={{ ...tokenInstanceMock.unique, image_url: null }} token={ tokenInfoERC721a }/>
+    </MetadataUpdateProvider>,
   );
-
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
+});
+
+test.describe('action button', () => {
+  test.beforeEach(async({ mockApiResponse, mockAssetResponse }) => {
+    const metadataResponse = generateAddressMetadataResponse(protocolTagWithMeta);
+    await mockApiResponse('address_metadata_info', metadataResponse, { queryParams: addressMetadataQueryParams });
+    await mockAssetResponse(protocolTagWithMeta?.meta?.appLogoURL as string, './playwright/mocks/image_s.jpg');
+  });
+
+  test('base view +@dark-mode +@mobile', async({ render, page }) => {
+    const component = await render(
+      <MetadataUpdateProvider>
+        <TokenInstanceDetails data={ tokenInstanceMock.unique } token={ tokenInfoERC721a }/>
+      </MetadataUpdateProvider>,
+    );
+    await expect(component).toHaveScreenshot({
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
+    });
+  });
+
+  test('without marketplaces +@dark-mode +@mobile', async({ render, page, mockEnvs }) => {
+    mockEnvs(ENVS_MAP.noNftMarketplaces);
+    const component = await render(
+      <MetadataUpdateProvider>
+        <TokenInstanceDetails data={ tokenInstanceMock.unique } token={ tokenInfoERC721a }/>
+      </MetadataUpdateProvider>,
+    );
+    await expect(component).toHaveScreenshot({
+      mask: [ page.locator(pwConfig.adsBannerSelector) ],
+      maskColor: pwConfig.maskColor,
+    });
   });
 });
diff --git a/ui/tokenInstance/TokenInstanceDetails.tsx b/ui/tokenInstance/TokenInstanceDetails.tsx
index dfff7aacc4..cac82c8ace 100644
--- a/ui/tokenInstance/TokenInstanceDetails.tsx
+++ b/ui/tokenInstance/TokenInstanceDetails.tsx
@@ -3,8 +3,12 @@ import React from 'react';
 
 import type { TokenInfo, TokenInstance } from 'types/api/token';
 
+import config from 'configs/app';
+import useIsMounted from 'lib/hooks/useIsMounted';
+import AppActionButton from 'ui/shared/AppActionButton/AppActionButton';
+import useAppActionData from 'ui/shared/AppActionButton/useAppActionData';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
 import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
@@ -24,6 +28,9 @@ interface Props {
 }
 
 const TokenInstanceDetails = ({ data, token, scrollRef, isLoading }: Props) => {
+  const appActionData = useAppActionData(token?.address, !isLoading);
+  const isMounted = useIsMounted();
+
   const handleCounterItemClick = React.useCallback(() => {
     window.setTimeout(() => {
       // cannot do scroll instantly, have to wait a little
@@ -31,7 +38,7 @@ const TokenInstanceDetails = ({ data, token, scrollRef, isLoading }: Props) => {
     }, 500);
   }, [ scrollRef ]);
 
-  if (!data || !token) {
+  if (!data || !token || !isMounted) {
     return null;
   }
 
@@ -46,32 +53,61 @@ const TokenInstanceDetails = ({ data, token, scrollRef, isLoading }: Props) => {
           overflow="hidden"
         >
           { data.is_unique && data.owner && (
-            <DetailsInfoItem
-              title="Owner"
-              hint="Current owner of this token instance"
-              isLoading={ isLoading }
-            >
-              <AddressEntity
-                address={ data.owner }
+            <>
+              <DetailsInfoItem.Label
+                hint="Current owner of this token instance"
                 isLoading={ isLoading }
-              />
-            </DetailsInfoItem>
+              >
+                Owner
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <AddressEntity
+                  address={ data.owner }
+                  isLoading={ isLoading }
+                />
+              </DetailsInfoItem.Value>
+            </>
           ) }
+
           <TokenInstanceCreatorAddress hash={ isLoading ? '' : token.address }/>
-          <DetailsInfoItem
-            title="Token ID"
+
+          <DetailsInfoItem.Label
             hint="This token instance unique token ID"
             isLoading={ isLoading }
           >
+            Token ID
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
             <Flex alignItems="center" overflow="hidden">
               <Skeleton isLoaded={ !isLoading } overflow="hidden" display="inline-block" w="100%">
                 <HashStringShortenDynamic hash={ data.id }/>
               </Skeleton>
               <CopyToClipboard text={ data.id } isLoading={ isLoading }/>
             </Flex>
-          </DetailsInfoItem>
+          </DetailsInfoItem.Value>
+
           <TokenInstanceTransfersCount hash={ isLoading ? '' : token.address } id={ isLoading ? '' : data.id } onClick={ handleCounterItemClick }/>
-          <TokenNftMarketplaces isLoading={ isLoading } hash={ token.address } id={ data.id }/>
+
+          <TokenNftMarketplaces
+            isLoading={ isLoading }
+            hash={ token.address }
+            id={ data.id }
+            appActionData={ appActionData }
+            source="NFT item"
+          />
+
+          { (config.UI.views.nft.marketplaces.length === 0 && appActionData) && (
+            <>
+              <DetailsInfoItem.Label
+                hint="Link to the dapp"
+              >
+                Dapp
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value py="1px">
+                <AppActionButton data={ appActionData } height="30px" source="NFT item"/>
+              </DetailsInfoItem.Value>
+            </>
+          ) }
         </Grid>
         <NftMedia
           animationUrl={ data.animation_url }
diff --git a/ui/tokenInstance/TokenInstanceMetadata.pw.tsx b/ui/tokenInstance/TokenInstanceMetadata.pw.tsx
index b27f7f46b6..430c67b3ee 100644
--- a/ui/tokenInstance/TokenInstanceMetadata.pw.tsx
+++ b/ui/tokenInstance/TokenInstanceMetadata.pw.tsx
@@ -1,17 +1,12 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as tokenInstanceMock from 'mocks/tokens/tokenInstance';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import TokenInstanceMetadata from './TokenInstanceMetadata';
 
-test('base view +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TokenInstanceMetadata data={ tokenInstanceMock.withRichMetadata.metadata }/>
-    </TestApp>,
-  );
+test('base view +@mobile', async({ render }) => {
+  const component = await render(<TokenInstanceMetadata data={ tokenInstanceMock.withRichMetadata.metadata }/>);
 
   await component.getByRole('button', { name: /png/i }).click();
   await component.getByRole('button', { name: /primary/i }).click();
@@ -26,14 +21,8 @@ test('base view +@mobile', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('raw view', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TokenInstanceMetadata data={ tokenInstanceMock.withRichMetadata.metadata }/>
-    </TestApp>,
-  );
-
+test('raw view', async({ render }) => {
+  const component = await render(<TokenInstanceMetadata data={ tokenInstanceMock.withRichMetadata.metadata }/>);
   await component.locator('select').selectOption('JSON');
-
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/tokenInstance/TokenInstanceMetadata.tsx b/ui/tokenInstance/TokenInstanceMetadata.tsx
index fa045be1a1..0a0c8f9b3e 100644
--- a/ui/tokenInstance/TokenInstanceMetadata.tsx
+++ b/ui/tokenInstance/TokenInstanceMetadata.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Select, chakra } from '@chakra-ui/react';
+import { Alert, Box, Flex, Select, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenInstance } from 'types/api/token';
@@ -7,6 +7,7 @@ import ContentLoader from 'ui/shared/ContentLoader';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
 
+import { useMetadataUpdateContext } from './contexts/metadataUpdate';
 import MetadataAccordion from './metadata/MetadataAccordion';
 
 type Format = 'JSON' | 'Table'
@@ -19,11 +20,13 @@ interface Props {
 const TokenInstanceMetadata = ({ data, isPlaceholderData }: Props) => {
   const [ format, setFormat ] = React.useState<Format>('Table');
 
+  const { status: refetchStatus } = useMetadataUpdateContext() || {};
+
   const handleSelectChange = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
     setFormat(event.target.value as Format);
   }, []);
 
-  if (isPlaceholderData) {
+  if (isPlaceholderData || refetchStatus === 'WAITING_FOR_RESPONSE') {
     return <ContentLoader/>;
   }
 
@@ -37,9 +40,15 @@ const TokenInstanceMetadata = ({ data, isPlaceholderData }: Props) => {
 
   return (
     <Box>
+      { refetchStatus === 'ERROR' && (
+        <Alert status="warning" display="flow" mb={ 6 }>
+          <chakra.span fontWeight={ 600 }>Ooops! </chakra.span>
+          <span>We { `couldn't` } refresh metadata. Please try again now or later.</span>
+        </Alert>
+      ) }
       <Flex alignItems="center" mb={ 6 }>
         <chakra.span fontWeight={ 500 }>Metadata</chakra.span>
-        <Select size="xs" borderRadius="base" value={ format } onChange={ handleSelectChange } focusBorderColor="none" w="auto" ml={ 5 }>
+        <Select size="xs" borderRadius="base" value={ format } onChange={ handleSelectChange } w="auto" ml={ 5 }>
           <option value="Table">Table</option>
           <option value="JSON">JSON</option>
         </Select>
diff --git a/ui/tokenInstance/TokenInstanceMetadataFetcher.tsx b/ui/tokenInstance/TokenInstanceMetadataFetcher.tsx
new file mode 100644
index 0000000000..255ed645c4
--- /dev/null
+++ b/ui/tokenInstance/TokenInstanceMetadataFetcher.tsx
@@ -0,0 +1,186 @@
+import type { ToastId } from '@chakra-ui/react';
+import { chakra, Alert, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Spinner } from '@chakra-ui/react';
+import { useQueryClient } from '@tanstack/react-query';
+import React from 'react';
+import ReCaptcha from 'react-google-recaptcha';
+
+import type { SocketMessage } from 'lib/socket/types';
+import type { TokenInstance } from 'types/api/token';
+
+import config from 'configs/app';
+import useApiFetch from 'lib/api/useApiFetch';
+import { getResourceKey } from 'lib/api/useApiQuery';
+import { MINUTE, SECOND } from 'lib/consts';
+import useToast from 'lib/hooks/useToast';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
+
+import { useMetadataUpdateContext } from './contexts/metadataUpdate';
+
+interface Props {
+  hash: string;
+  id: string;
+}
+
+const TokenInstanceMetadataFetcher = ({ hash, id }: Props) => {
+  const timeoutId = React.useRef<number>();
+  const toastId = React.useRef<ToastId>();
+
+  const { status, setStatus } = useMetadataUpdateContext() || {};
+  const apiFetch = useApiFetch();
+  const toast = useToast();
+  const queryClient = useQueryClient();
+
+  const handleRefreshError = React.useCallback(() => {
+    setStatus?.('ERROR');
+    toastId.current && toast.update(toastId.current, {
+      title: 'Error',
+      description: 'The refreshing process has failed. Please try again.',
+      status: 'warning',
+      duration: 5 * SECOND,
+      isClosable: true,
+    });
+  }, [ setStatus, toast ]);
+
+  const initializeUpdate = React.useCallback((reCaptchaToken: string) => {
+    apiFetch<'token_instance_refresh_metadata', unknown, unknown>('token_instance_refresh_metadata', {
+      pathParams: { hash, id },
+      fetchParams: {
+        method: 'PATCH',
+        body: { recaptcha_response: reCaptchaToken },
+      },
+    })
+      .then(() => {
+        setStatus?.('WAITING_FOR_RESPONSE');
+        toastId.current = toast({
+          title: 'Please wait',
+          description: 'Refetching metadata request sent',
+          icon: <Spinner size="sm" mr={ 2 }/>,
+          status: 'warning',
+          duration: null,
+          isClosable: false,
+        });
+        timeoutId.current = window.setTimeout(handleRefreshError, 2 * MINUTE);
+      })
+      .catch(() => {
+        toast({
+          title: 'Error',
+          description: 'Unable to initialize metadata update',
+          status: 'warning',
+        });
+        setStatus?.('ERROR');
+      });
+  }, [ apiFetch, handleRefreshError, hash, id, setStatus, toast ]);
+
+  const handleModalClose = React.useCallback(() => {
+    setStatus?.('INITIAL');
+  }, [ setStatus ]);
+
+  const handleReCaptchaChange = React.useCallback((token: string | null) => {
+    if (token) {
+      initializeUpdate(token);
+    }
+  }, [ initializeUpdate ]);
+
+  const handleFormSubmit: React.FormEventHandler<HTMLFormElement> = React.useCallback((event) => {
+    event.preventDefault();
+    const data = new FormData(event.target as HTMLFormElement);
+    const token = data.get('recaptcha_token');
+    typeof token === 'string' && initializeUpdate(token);
+  }, [ initializeUpdate ]);
+
+  const handleSocketMessage: SocketMessage.TokenInstanceMetadataFetched['handler'] = React.useCallback((payload) => {
+    if (String(payload.token_id) !== id) {
+      return;
+    }
+
+    const queryKey = getResourceKey('token_instance', { queryParams: { hash, id } });
+    queryClient.setQueryData(queryKey, (prevData: TokenInstance | undefined): TokenInstance | undefined => {
+      if (!prevData) {
+        return;
+      }
+
+      const castToString = (value: unknown) => typeof value === 'string' ? value : undefined;
+
+      return {
+        ...prevData,
+        external_app_url: castToString(payload.fetched_metadata?.external_url) ?? null,
+        animation_url: castToString(payload.fetched_metadata?.animation_url) ?? null,
+        image_url: castToString(
+          payload.fetched_metadata?.image ||
+            payload.fetched_metadata?.image_url ||
+            payload.fetched_metadata?.animation_url,
+        ) ?? null,
+        metadata: payload.fetched_metadata,
+      };
+    });
+
+    toastId.current && toast.update(toastId.current, {
+      title: 'Success!',
+      description: 'Metadata has been refreshed',
+      status: 'success',
+      duration: 5 * SECOND,
+      isClosable: true,
+    });
+
+    setStatus?.('SUCCESS');
+
+    window.clearTimeout(timeoutId.current);
+  }, [ hash, id, queryClient, setStatus, toast ]);
+
+  const channel = useSocketChannel({
+    topic: `token_instances:${ hash.toLowerCase() }`,
+    onSocketClose: handleRefreshError,
+    onSocketError: handleRefreshError,
+    isDisabled: status !== 'WAITING_FOR_RESPONSE',
+  });
+
+  useSocketMessage({
+    channel,
+    event: 'fetched_token_instance_metadata',
+    handler: handleSocketMessage,
+  });
+
+  React.useEffect(() => {
+    return () => {
+      timeoutId.current && window.clearTimeout(timeoutId.current);
+      toastId.current && toast.close(toastId.current);
+    };
+  // run only on mount/unmount
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <Modal isOpen={ status === 'MODAL_OPENED' } onClose={ handleModalClose } size={{ base: 'full', lg: 'sm' }}>
+      <ModalOverlay/>
+      <ModalContent>
+        <ModalHeader fontWeight="500" textStyle="h3" mb={ 4 }>Solve captcha to refresh metadata</ModalHeader>
+        <ModalCloseButton/>
+        <ModalBody mb={ 0 } minH="78px">
+          { config.services.reCaptcha.siteKey ? (
+            <ReCaptcha
+              className="recaptcha"
+              sitekey={ config.services.reCaptcha.siteKey }
+              onChange={ handleReCaptchaChange }
+            />
+          ) : (
+            <Alert status="error">
+                Metadata refresh is not available at the moment since reCaptcha is not configured for this application.
+                Please contact the service maintainer to make necessary changes in the service configuration.
+            </Alert>
+          ) }
+          { /* ONLY FOR TEST PURPOSES */ }
+          <chakra.form noValidate onSubmit={ handleFormSubmit } display="none">
+            <chakra.input
+              name="recaptcha_token"
+              placeholder="reCaptcha token"
+            />
+            <chakra.button type="submit">Submit</chakra.button>
+          </chakra.form>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default React.memo(TokenInstanceMetadataFetcher);
diff --git a/ui/tokenInstance/TokenInstancePageTitle.tsx b/ui/tokenInstance/TokenInstancePageTitle.tsx
new file mode 100644
index 0000000000..e6a0266d06
--- /dev/null
+++ b/ui/tokenInstance/TokenInstancePageTitle.tsx
@@ -0,0 +1,124 @@
+import { Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenInfo, TokenInstance } from 'types/api/token';
+
+import { useAppContext } from 'lib/contexts/app';
+import * as regexp from 'lib/regexp';
+import { getTokenTypeName } from 'lib/token/tokenTypes';
+import AddressQrCode from 'ui/address/details/AddressQrCode';
+import AccountActionsMenu from 'ui/shared/AccountActionsMenu/AccountActionsMenu';
+import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
+import Tag from 'ui/shared/chakra/Tag';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import PageTitle from 'ui/shared/Page/PageTitle';
+
+interface Props {
+  isLoading: boolean;
+  token: TokenInfo | undefined;
+  instance: TokenInstance | undefined;
+  hash: string | undefined;
+}
+
+const TokenInstancePageTitle = ({ isLoading, token, instance, hash }: Props) => {
+  const appProps = useAppContext();
+
+  const title = (() => {
+    if (typeof instance?.metadata?.name === 'string') {
+      return instance.metadata.name;
+    }
+
+    if (!instance) {
+      return `Unknown token instance`;
+    }
+
+    if (token?.name || token?.symbol) {
+      return (token.name || token.symbol) + ' #' + instance.id;
+    }
+
+    return `ID ${ instance.id }`;
+  })();
+
+  const backLink = React.useMemo(() => {
+    const hasGoBackLink = appProps.referrer && appProps.referrer.includes(`/token/${ hash }`) && !appProps.referrer.includes('instance');
+
+    if (!hasGoBackLink) {
+      return;
+    }
+
+    return {
+      label: 'Back to token page',
+      url: appProps.referrer,
+    };
+  }, [ appProps.referrer, hash ]);
+
+  const tokenTag = token ? <Tag isLoading={ isLoading }>{ getTokenTypeName(token.type) }</Tag> : null;
+
+  const appLink = (() => {
+    if (!instance?.external_app_url) {
+      return null;
+    }
+
+    try {
+      const url = regexp.URL_PREFIX.test(instance.external_app_url) ?
+        new URL(instance.external_app_url) :
+        new URL('https://' + instance.external_app_url);
+
+      return (
+        <LinkExternal href={ url.toString() } variant="subtle" isLoading={ isLoading } ml={{ base: 0, lg: 'auto' }}>
+          { url.hostname || instance.external_app_url }
+        </LinkExternal>
+      );
+    } catch (error) {
+      return (
+        <LinkExternal href={ instance.external_app_url } isLoading={ isLoading } ml={{ base: 0, lg: 'auto' }}>
+            View in app
+        </LinkExternal>
+      );
+    }
+  })();
+
+  const address = {
+    hash: hash || '',
+    is_contract: true,
+    implementations: null,
+    watchlist_names: [],
+    watchlist_address_id: null,
+  };
+
+  const titleSecondRow = (
+    <Flex alignItems="center" w="100%" minW={ 0 } columnGap={ 2 } rowGap={ 2 } flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
+      { token && (
+        <TokenEntity
+          token={ token }
+          isLoading={ isLoading }
+          noSymbol
+          noCopy
+          jointSymbol
+          fontFamily="heading"
+          fontSize="lg"
+          fontWeight={ 500 }
+          w="auto"
+          maxW="700px"
+        />
+      ) }
+      { !isLoading && <AddressAddToWallet token={ token } variant="button"/> }
+      <AddressQrCode address={ address } isLoading={ isLoading }/>
+      <AccountActionsMenu isLoading={ isLoading } showUpdateMetadataItem={ Boolean(instance?.metadata) }/>
+      { appLink }
+    </Flex>
+  );
+
+  return (
+    <PageTitle
+      title={ title }
+      backLink={ backLink }
+      contentAfter={ tokenTag }
+      secondRow={ titleSecondRow }
+      isLoading={ isLoading }
+    />
+  );
+};
+
+export default React.memo(TokenInstancePageTitle);
diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_action-button-base-view-dark-mode-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_action-button-base-view-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..3e5e153d45
Binary files /dev/null and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_action-button-base-view-dark-mode-mobile-1.png differ
diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_action-button-without-marketplaces-dark-mode-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_action-button-without-marketplaces-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..f61a3f62c9
Binary files /dev/null and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_action-button-without-marketplaces-dark-mode-mobile-1.png differ
diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png
index 9927f5e081..3d42333dd1 100644
Binary files a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png differ
diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_action-button-base-view-dark-mode-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_action-button-base-view-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..196a00ba5d
Binary files /dev/null and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_action-button-base-view-dark-mode-mobile-1.png differ
diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_action-button-without-marketplaces-dark-mode-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_action-button-without-marketplaces-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..132a3b7ce8
Binary files /dev/null and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_action-button-without-marketplaces-dark-mode-mobile-1.png differ
diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_base-view-dark-mode-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_base-view-dark-mode-mobile-1.png
index 36eb9cb6e2..4d4c569e40 100644
Binary files a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_base-view-dark-mode-mobile-1.png and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_base-view-dark-mode-mobile-1.png differ
diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_action-button-base-view-dark-mode-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_action-button-base-view-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..1f2d25b5c0
Binary files /dev/null and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_action-button-base-view-dark-mode-mobile-1.png differ
diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_action-button-without-marketplaces-dark-mode-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_action-button-without-marketplaces-dark-mode-mobile-1.png
new file mode 100644
index 0000000000..b186d012a7
Binary files /dev/null and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_action-button-without-marketplaces-dark-mode-mobile-1.png differ
diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_base-view-dark-mode-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_base-view-dark-mode-mobile-1.png
index 19af76236f..e6b04e5496 100644
Binary files a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_base-view-dark-mode-mobile-1.png and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_base-view-dark-mode-mobile-1.png differ
diff --git a/ui/tokenInstance/contexts/metadataUpdate.tsx b/ui/tokenInstance/contexts/metadataUpdate.tsx
new file mode 100644
index 0000000000..3dcd2eb464
--- /dev/null
+++ b/ui/tokenInstance/contexts/metadataUpdate.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+interface MetadataUpdateProviderProps {
+  children: React.ReactNode;
+}
+
+interface TMetadataUpdateContext {
+  status: Status;
+  setStatus: (status: Status) => void;
+}
+
+export const MetadataUpdateContext = React.createContext<TMetadataUpdateContext | null>(null);
+
+type Status = 'INITIAL' | 'MODAL_OPENED' | 'WAITING_FOR_RESPONSE' | 'SUCCESS' | 'ERROR';
+
+export function MetadataUpdateProvider({ children }: MetadataUpdateProviderProps) {
+
+  const [ status, setStatus ] = React.useState<Status>('INITIAL');
+
+  const value = React.useMemo(() => {
+    return {
+      status,
+      setStatus,
+    };
+  }, [ status ]);
+
+  return (
+    <MetadataUpdateContext.Provider value={ value }>
+      { children }
+    </MetadataUpdateContext.Provider>
+  );
+}
+
+export function useMetadataUpdateContext() {
+  const context = React.useContext(MetadataUpdateContext);
+  if (context === undefined) {
+    return null;
+  }
+  return context;
+}
diff --git a/ui/tokenInstance/details/TokenInstanceCreatorAddress.tsx b/ui/tokenInstance/details/TokenInstanceCreatorAddress.tsx
index 2f60ae2772..bab4c00800 100644
--- a/ui/tokenInstance/details/TokenInstanceCreatorAddress.tsx
+++ b/ui/tokenInstance/details/TokenInstanceCreatorAddress.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import { ADDRESS_INFO } from 'stubs/address';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 
 interface Props {
@@ -29,20 +29,24 @@ const TokenInstanceCreatorAddress = ({ hash }: Props) => {
   const creatorAddress = {
     hash: addressQuery.data.creator_address_hash,
     is_contract: false,
-    implementation_name: null,
+    implementations: null,
   };
 
   return (
-    <DetailsInfoItem
-      title="Creator"
-      hint="Address that deployed this token contract"
-      isLoading={ addressQuery.isPlaceholderData }
-    >
-      <AddressEntity
-        address={ creatorAddress }
+    <>
+      <DetailsInfoItem.Label
+        hint="Address that deployed this token contract"
         isLoading={ addressQuery.isPlaceholderData }
-      />
-    </DetailsInfoItem>
+      >
+        Creator
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <AddressEntity
+          address={ creatorAddress }
+          isLoading={ addressQuery.isPlaceholderData }
+        />
+      </DetailsInfoItem.Value>
+    </>
   );
 };
 
diff --git a/ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx b/ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx
index 85dd53856c..4839358912 100644
--- a/ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx
+++ b/ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx
@@ -5,11 +5,13 @@ import type { TokenInstance } from 'types/api/token';
 import type { MetadataAttributes } from 'types/client/token';
 
 import parseMetadata from 'lib/token/parseMetadata';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
-import LinkExternal from 'ui/shared/LinkExternal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
+import { useMetadataUpdateContext } from '../contexts/metadataUpdate';
+
 interface Props {
   data?: TokenInstance;
   isLoading?: boolean;
@@ -35,8 +37,9 @@ const Item = ({ data, isLoading }: ItemProps) => {
           href={ data.value }
           fontSize="sm"
           lineHeight={ 5 }
+          isLoading={ isLoading }
         >
-          <TruncatedValue value={ data.value } w="calc(100% - 16px)"/>
+          <TruncatedValue value={ data.value } w="calc(100% - 16px)" isLoading={ isLoading }/>
         </LinkExternal>
       );
     }
@@ -62,54 +65,71 @@ const Item = ({ data, isLoading }: ItemProps) => {
   );
 };
 
-const TokenInstanceMetadataInfo = ({ data, isLoading }: Props) => {
+const TokenInstanceMetadataInfo = ({ data, isLoading: isLoadingProp }: Props) => {
+  const { status: refetchStatus } = useMetadataUpdateContext() || {};
+
   const metadata = React.useMemo(() => parseMetadata(data?.metadata), [ data ]);
-  const hasMetadata = metadata && Boolean((metadata.name || metadata.description || metadata.attributes));
 
+  const hasMetadata = metadata && Boolean((metadata.name || metadata.description || metadata.attributes));
   if (!hasMetadata) {
     return null;
   }
 
+  const isLoading = isLoadingProp || refetchStatus === 'WAITING_FOR_RESPONSE';
+
   return (
     <>
       <DetailsInfoItemDivider/>
       { metadata?.name && (
-        <DetailsInfoItem
-          title="Name"
-          hint="NFT name"
-          whiteSpace="normal"
-          wordBreak="break-word"
-          isLoading={ isLoading }
-        >
-          <Skeleton isLoaded={ !isLoading }>
-            { metadata.name }
-          </Skeleton>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="NFT name"
+            isLoading={ isLoading }
+          >
+            Name
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value
+            whiteSpace="normal"
+            wordBreak="break-word"
+          >
+            <Skeleton isLoaded={ !isLoading }>
+              { metadata.name }
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
       ) }
       { metadata?.description && (
-        <DetailsInfoItem
-          title="Description"
-          hint="NFT description"
-          whiteSpace="normal"
-          wordBreak="break-word"
-          isLoading={ isLoading }
-        >
-          <Skeleton isLoaded={ !isLoading }>
-            { metadata.description }
-          </Skeleton>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="NFT description"
+            isLoading={ isLoading }
+          >
+            Description
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value
+            whiteSpace="normal"
+            wordBreak="break-word"
+          >
+            <Skeleton isLoaded={ !isLoading }>
+              { metadata.description }
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
       ) }
       { metadata?.attributes && (
-        <DetailsInfoItem
-          title="Attributes"
-          hint="NFT attributes"
-          whiteSpace="normal"
-          isLoading={ isLoading }
-        >
-          <Grid gap={ 2 } templateColumns="repeat(auto-fill,minmax(160px, 1fr))" w="100%">
-            { metadata.attributes.map((attribute, index) => <Item key={ index } data={ attribute } isLoading={ isLoading }/>) }
-          </Grid>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="NFT attributes"
+            isLoading={ isLoading }
+          >
+            Attributes
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Grid gap={ 2 } templateColumns="repeat(auto-fill,minmax(160px, 1fr))" w="100%" whiteSpace="normal">
+              { metadata.attributes.map((attribute, index) => <Item key={ index } data={ attribute } isLoading={ isLoading }/>) }
+            </Grid>
+          </DetailsInfoItem.Value>
+        </>
       ) }
     </>
   );
diff --git a/ui/tokenInstance/details/TokenInstanceTransfersCount.tsx b/ui/tokenInstance/details/TokenInstanceTransfersCount.tsx
index 0635df72d3..5bb07ff37a 100644
--- a/ui/tokenInstance/details/TokenInstanceTransfersCount.tsx
+++ b/ui/tokenInstance/details/TokenInstanceTransfersCount.tsx
@@ -4,8 +4,8 @@ import React from 'react';
 import { route } from 'nextjs-routes';
 
 import useApiQuery from 'lib/api/useApiQuery';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
-import LinkInternal from 'ui/shared/LinkInternal';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 
 interface Props {
   hash: string;
@@ -37,20 +37,24 @@ const TokenInstanceTransfersCount = ({ hash, id, onClick }: Props) => {
     undefined;
 
   return (
-    <DetailsInfoItem
-      title="Transfers"
-      hint="Number of transfer for the token instance"
-      isLoading={ transfersCountQuery.isPlaceholderData }
-    >
-      <Skeleton isLoaded={ !transfersCountQuery.isPlaceholderData } display="inline-block">
-        <LinkInternal
-          href={ url }
-          onClick={ transfersCountQuery.data.transfers_count > 0 ? onClick : undefined }
-        >
-          { transfersCountQuery.data.transfers_count.toLocaleString() }
-        </LinkInternal>
-      </Skeleton>
-    </DetailsInfoItem>
+    <>
+      <DetailsInfoItem.Label
+        hint="Number of transfer for the token instance"
+        isLoading={ transfersCountQuery.isPlaceholderData }
+      >
+        Transfers
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !transfersCountQuery.isPlaceholderData } display="inline-block">
+          <LinkInternal
+            href={ url }
+            onClick={ transfersCountQuery.data.transfers_count > 0 ? onClick : undefined }
+          >
+            { transfersCountQuery.data.transfers_count.toLocaleString() }
+          </LinkInternal>
+        </Skeleton>
+      </DetailsInfoItem.Value>
+    </>
   );
 };
 
diff --git a/ui/tokenInstance/metadata/MetadataItemPrimitive.tsx b/ui/tokenInstance/metadata/MetadataItemPrimitive.tsx
index 24a08b47fc..256290b5e7 100644
--- a/ui/tokenInstance/metadata/MetadataItemPrimitive.tsx
+++ b/ui/tokenInstance/metadata/MetadataItemPrimitive.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import type { Primitive } from 'react-hook-form';
 
 import urlParser from 'lib/token/metadata/urlParser';
-import LinkExternal from 'ui/shared/LinkExternal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
 
 import MetadataAccordionItem from './MetadataAccordionItem';
 import MetadataAccordionItemTitle from './MetadataAccordionItemTitle';
diff --git a/ui/tokens/Tokens.tsx b/ui/tokens/Tokens.tsx
index e0d66b2ac7..442bc2272f 100644
--- a/ui/tokens/Tokens.tsx
+++ b/ui/tokens/Tokens.tsx
@@ -18,9 +18,10 @@ interface Props {
   actionBar?: React.ReactNode;
   hasActiveFilters: boolean;
   description?: React.ReactNode;
+  tableTop?: number;
 }
 
-const Tokens = ({ query, onSortChange, sort, actionBar, description, hasActiveFilters }: Props) => {
+const Tokens = ({ query, onSortChange, sort, actionBar, description, hasActiveFilters, tableTop }: Props) => {
 
   const { isError, isPlaceholderData, data, pagination } = query;
 
@@ -50,6 +51,7 @@ const Tokens = ({ query, onSortChange, sort, actionBar, description, hasActiveFi
           isLoading={ isPlaceholderData }
           setSorting={ onSortChange }
           sorting={ sort }
+          top={ tableTop }
         />
       </Hide>
     </>
diff --git a/ui/tokens/TokensActionBar.tsx b/ui/tokens/TokensActionBar.tsx
index 497dcc9ca4..bca2d05112 100644
--- a/ui/tokens/TokensActionBar.tsx
+++ b/ui/tokens/TokensActionBar.tsx
@@ -45,15 +45,16 @@ const TokensActionBar = ({
       <HStack spacing={ 3 } mb={ 6 } display={{ base: 'flex', lg: 'none' }}>
         { filter }
         <Sort
+          name="tokens_sorting"
+          defaultValue={ sort }
           options={ SORT_OPTIONS }
-          setSort={ onSortChange }
-          sort={ sort }
+          onChange={ onSortChange }
         />
         { searchInput }
       </HStack>
       <ActionBar
         mt={ inTabsSlot ? 0 : -6 }
-        py={ inTabsSlot ? 0 : undefined }
+        py={{ lg: inTabsSlot ? 0 : undefined }}
         justifyContent={ inTabsSlot ? 'space-between' : undefined }
         display={{ base: pagination.isVisible ? 'flex' : 'none', lg: 'flex' }}
       >
diff --git a/ui/tokens/TokensListItem.tsx b/ui/tokens/TokensListItem.tsx
index 0d8570ecd2..b0cbfdd352 100644
--- a/ui/tokens/TokensListItem.tsx
+++ b/ui/tokens/TokensListItem.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import type { TokenInfo } from 'types/api/token';
 
 import config from 'configs/app';
+import { getTokenTypeName } from 'lib/token/tokenTypes';
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
 import Tag from 'ui/shared/chakra/Tag';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
@@ -59,7 +60,7 @@ const TokensTableItem = ({
             fontWeight="700"
           />
           <Flex ml={ 3 } flexShrink={ 0 } columnGap={ 1 }>
-            <Tag isLoading={ isLoading }>{ type }</Tag>
+            <Tag isLoading={ isLoading }>{ getTokenTypeName(type) }</Tag>
             { bridgedChainTag && <Tag isLoading={ isLoading }>{ bridgedChainTag }</Tag> }
           </Flex>
           <Skeleton isLoaded={ !isLoading } fontSize="sm" ml="auto" color="text_secondary" minW="24px" textAlign="right" lineHeight={ 6 }>
diff --git a/ui/tokens/TokensTable.tsx b/ui/tokens/TokensTable.tsx
index 0a406175de..0a1484bdbb 100644
--- a/ui/tokens/TokensTable.tsx
+++ b/ui/tokens/TokensTable.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import type { TokenInfo } from 'types/api/token';
 import type { TokensSortingField, TokensSortingValue } from 'types/api/tokens';
 
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import IconSvg from 'ui/shared/IconSvg';
 import { default as getNextSortValueShared } from 'ui/shared/sort/getNextSortValue';
 import { default as Thead } from 'ui/shared/TheadSticky';
@@ -24,9 +25,10 @@ type Props = {
   sorting?: TokensSortingValue;
   setSorting: (val?: TokensSortingValue) => void;
   isLoading?: boolean;
+  top?: number;
 }
 
-const TokensTable = ({ items, page, isLoading, sorting, setSorting }: Props) => {
+const TokensTable = ({ items, page, isLoading, sorting, setSorting, top }: Props) => {
   const sortIconTransform = sorting?.includes('asc') ? 'rotate(-90deg)' : 'rotate(90deg)';
 
   const sort = React.useCallback((field: TokensSortingField) => () => {
@@ -36,7 +38,7 @@ const TokensTable = ({ items, page, isLoading, sorting, setSorting }: Props) =>
 
   return (
     <Table>
-      <Thead top={ 80 }>
+      <Thead top={ top ?? ACTION_BAR_HEIGHT_DESKTOP }>
         <Tr>
           <Th w="50%">Token</Th>
           <Th isNumeric w="15%">
diff --git a/ui/tokens/TokensTableItem.tsx b/ui/tokens/TokensTableItem.tsx
index e8f2916866..b3ac7f577a 100644
--- a/ui/tokens/TokensTableItem.tsx
+++ b/ui/tokens/TokensTableItem.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import type { TokenInfo } from 'types/api/token';
 
 import config from 'configs/app';
+import { getTokenTypeName } from 'lib/token/tokenTypes';
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
 import Tag from 'ui/shared/chakra/Tag';
 import type { EntityProps as AddressEntityProps } from 'ui/shared/entities/address/AddressEntity';
@@ -45,19 +46,15 @@ const TokensTableItem = ({
   const tokenAddress: AddressEntityProps['address'] = {
     hash: address,
     name: '',
-    implementation_name: null,
     is_contract: true,
     is_verified: false,
     ens_domain_name: null,
+    implementations: null,
   };
 
   return (
     <Tr
-      sx={{
-        '&:hover [aria-label="Add token to wallet"]': {
-          opacity: 1,
-        },
-      }}
+      role="group"
     >
       <Td>
         <Flex alignItems="flex-start">
@@ -93,10 +90,11 @@ const TokensTableItem = ({
                 isLoading={ isLoading }
                 iconSize={ 5 }
                 opacity={ 0 }
+                _groupHover={{ opacity: 1 }}
               />
             </Flex>
             <Flex columnGap={ 1 }>
-              <Tag isLoading={ isLoading }>{ type }</Tag>
+              <Tag isLoading={ isLoading }>{ getTokenTypeName(type) }</Tag>
               { bridgedChainTag && <Tag isLoading={ isLoading }>{ bridgedChainTag }</Tag> }
             </Flex>
           </Flex>
diff --git a/ui/tokens/utils.ts b/ui/tokens/utils.ts
index 804271ccbc..1069626b63 100644
--- a/ui/tokens/utils.ts
+++ b/ui/tokens/utils.ts
@@ -4,9 +4,9 @@ import type { TokensSortingValue } from 'types/api/tokens';
 import config from 'configs/app';
 import getFilterValuesFromQuery from 'lib/getFilterValuesFromQuery';
 import { TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
-import type { Option } from 'ui/shared/sort/Sort';
+import type { TOption } from 'ui/shared/sort/Option';
 
-export const SORT_OPTIONS: Array<Option<TokensSortingValue>> = [
+export const SORT_OPTIONS: Array<TOption<TokensSortingValue>> = [
   { title: 'Default', id: undefined },
   { title: 'Price ascending', id: 'fiat_value-asc' },
   { title: 'Price descending', id: 'fiat_value-desc' },
diff --git a/ui/tx/NftTokenTransferSnippet.tsx b/ui/tx/NftTokenTransferSnippet.tsx
deleted file mode 100644
index be304f70db..0000000000
--- a/ui/tx/NftTokenTransferSnippet.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { chakra } from '@chakra-ui/react';
-import React from 'react';
-
-import type { TokenInfo } from 'types/api/token';
-
-import NftEntity from 'ui/shared/entities/nft/NftEntity';
-import TokenEntity from 'ui/shared/entities/token/TokenEntity';
-
-interface Props {
-  token: TokenInfo;
-  value: string;
-  tokenId: string | null;
-}
-
-const NftTokenTransferSnippet = ({ value, token, tokenId }: Props) => {
-  const num = value === '1' ? '' : value;
-
-  const tokenIdContent = (() => {
-    if (tokenId === null) {
-      // ERC-404 may not have an ID
-      if (token.type === 'ERC-404') {
-        return null;
-      }
-      return <chakra.span color="text_secondary"> N/A </chakra.span>;
-    }
-
-    return (
-      <NftEntity
-        hash={ token.address }
-        id={ tokenId }
-        fontWeight={ 600 }
-        iconSize="md"
-        maxW={{ base: '100%', lg: '150px' }}
-        w="auto"
-        flexShrink={ 0 }
-      />
-    );
-
-  })();
-
-  return (
-    <>
-      { num ? (
-        <>
-          <chakra.span color="text_secondary">for</chakra.span>
-          <span>{ num }</span>
-          <chakra.span color="text_secondary">token ID</chakra.span>
-        </>
-      ) : (
-        <chakra.span color="text_secondary">for token ID</chakra.span>
-      ) }
-      { tokenIdContent }
-      <chakra.span color="text_secondary">of</chakra.span>
-      <TokenEntity
-        token={ token }
-        noCopy
-        w="auto"
-        flexGrow={ 1 }
-      />
-    </>
-  );
-};
-
-export default React.memo(NftTokenTransferSnippet);
diff --git a/ui/tx/TxAllowedPeekers.tsx b/ui/tx/TxAllowedPeekers.tsx
index 0a3487dcb6..e83a3fe000 100644
--- a/ui/tx/TxAllowedPeekers.tsx
+++ b/ui/tx/TxAllowedPeekers.tsx
@@ -1,7 +1,7 @@
 import { Flex, Link, useBoolean } from '@chakra-ui/react';
 import React from 'react';
 
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 
 interface Props {
@@ -14,27 +14,31 @@ const TxAllowedPeekers = ({ items }: Props) => {
   const [ isExpanded, expand ] = useBoolean(false);
 
   return (
-    <DetailsInfoItem
-      title="Allowed peekers"
-      hint="Smart contracts allowed to interact with confidential data"
-    >
-      <Flex flexDir="column" rowGap={ 3 } w="100%">
-        { items
-          .slice(0, isExpanded ? undefined : CUT_LENGTH)
-          .map((item) => <AddressEntity key={ item } address={{ hash: item, is_contract: true }}/>) }
-      </Flex>
-      { items.length > CUT_LENGTH && (
-        <Link
-          display="inline-block"
-          fontSize="sm"
-          textDecorationLine="underline"
-          textDecorationStyle="dashed"
-          onClick={ expand.toggle }
-        >
-          { isExpanded ? 'Hide' : 'Show all' }
-        </Link>
-      ) }
-    </DetailsInfoItem>
+    <>
+      <DetailsInfoItem.Label
+        hint="Smart contracts allowed to interact with confidential data"
+      >
+        Allowed peekers
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Flex flexDir="column" rowGap={ 3 } w="100%">
+          { items
+            .slice(0, isExpanded ? undefined : CUT_LENGTH)
+            .map((item) => <AddressEntity key={ item } address={{ hash: item, is_contract: true }}/>) }
+        </Flex>
+        { items.length > CUT_LENGTH && (
+          <Link
+            display="inline-block"
+            fontSize="sm"
+            textDecorationLine="underline"
+            textDecorationStyle="dashed"
+            onClick={ expand.toggle }
+          >
+            { isExpanded ? 'Hide' : 'Show all' }
+          </Link>
+        ) }
+      </DetailsInfoItem.Value>
+    </>
   );
 };
 
diff --git a/ui/tx/TxAssetFlows.tsx b/ui/tx/TxAssetFlows.tsx
index 931332151b..6d4c757cf9 100644
--- a/ui/tx/TxAssetFlows.tsx
+++ b/ui/tx/TxAssetFlows.tsx
@@ -1,5 +1,5 @@
 import { Table, Tbody, Tr, Th, Box, Skeleton, Text, Show, Hide } from '@chakra-ui/react';
-import _ from 'lodash';
+import _chunk from 'lodash/chunk';
 import React, { useMemo, useState } from 'react';
 
 import type { PaginationParams } from 'ui/shared/pagination/types';
@@ -33,7 +33,7 @@ export default function TxAssetFlows(props: FlowViewProps) {
   const [ page, setPage ] = useState<number>(1);
 
   const ViewData = useMemo(() => (queryData ? generateFlowViewData(queryData) : []), [ queryData ]);
-  const chunkedViewData = _.chunk(ViewData, 50);
+  const chunkedViewData = _chunk(ViewData, 50);
 
   const paginationProps: PaginationParams = useMemo(() => ({
     onNextPageClick: () => setPage(page + 1),
diff --git a/ui/tx/TxBlobs.pw.tsx b/ui/tx/TxBlobs.pw.tsx
index dcec52a170..5ec48a6825 100644
--- a/ui/tx/TxBlobs.pw.tsx
+++ b/ui/tx/TxBlobs.pw.tsx
@@ -1,39 +1,25 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as blobsMock from 'mocks/blobs/blobs';
 import * as txMock from 'mocks/txs/tx';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import TxBlobs from './TxBlobs';
 import type { TxQuery } from './useTxQuery';
 
-const TX_BLOBS_API_URL = buildApiUrl('tx_blobs', { hash: txMock.base.hash });
 const hooksConfig = {
   router: {
     query: { hash: txMock.base.hash },
   },
 };
 
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(TX_BLOBS_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(blobsMock.txBlobs),
-  }));
-
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('tx_blobs', blobsMock.txBlobs, { pathParams: { hash: txMock.base.hash } });
   const txQuery = {
     data: txMock.base,
     isPlaceholderData: false,
     isError: false,
   } as TxQuery;
-
-  const component = await mount(
-    <TestApp>
-      <TxBlobs txQuery={ txQuery }/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+  const component = await render(<TxBlobs txQuery={ txQuery }/>, { hooksConfig });
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/tx/TxBlobs.tsx b/ui/tx/TxBlobs.tsx
index fd10854681..994d5f4853 100644
--- a/ui/tx/TxBlobs.tsx
+++ b/ui/tx/TxBlobs.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { TX_BLOB } from 'stubs/blobs';
 import { generateListStub } from 'stubs/utils';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -35,7 +35,7 @@ const TxBlobs = ({ txQuery }: Props) => {
   const content = data ? (
     <>
       <Hide below="lg" ssr={ false }>
-        <TxBlobsTable data={ data.items } isLoading={ isPlaceholderData } top={ pagination.isVisible ? 80 : 0 }/>
+        <TxBlobsTable data={ data.items } isLoading={ isPlaceholderData } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }/>
       </Hide>
       <Show below="lg" ssr={ false }>
         <TxBlobsList data={ data.items } isLoading={ isPlaceholderData }/>
diff --git a/ui/tx/TxDetailsWrapped.tsx b/ui/tx/TxDetailsWrapped.tsx
index d01a740739..29bf0bf9c9 100644
--- a/ui/tx/TxDetailsWrapped.tsx
+++ b/ui/tx/TxDetailsWrapped.tsx
@@ -8,12 +8,13 @@ import type { ExcludeUndefined } from 'types/utils';
 import { currencyUnits } from 'lib/units';
 import Tag from 'ui/shared/chakra/Tag';
 import CurrencyValue from 'ui/shared/CurrencyValue';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
 import RawInputData from 'ui/shared/RawInputData';
+import TxFee from 'ui/shared/tx/TxFee';
 import TxDetailsGasPrice from 'ui/tx/details/TxDetailsGasPrice';
 import TxDetailsOther from 'ui/tx/details/TxDetailsOther';
 
@@ -24,85 +25,110 @@ interface Props {
 const TxDetailsWrapped = ({ data }: Props) => {
   return (
     <Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }}>
-      <DetailsInfoItem
-        title="Transaction hash"
+      <DetailsInfoItem.Label
         hint="Unique character string (TxID) assigned to every verified transaction"
-        flexWrap="nowrap"
       >
+        Transaction hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value flexWrap="nowrap">
         <TxEntity hash={ data.hash } noIcon noLink noCopy={ false }/>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Method"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Transaction method name"
       >
+        Method
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Tag colorScheme="gray">
           { data.method }
         </Tag>
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
 
       <DetailsInfoItemDivider/>
 
-      <DetailsInfoItem
-        title={ data.to?.is_contract ? 'Interacted with contract' : 'To' }
-        hint="Address (external or contract) receiving the transaction"
-        flexWrap={{ base: 'wrap', lg: 'nowrap' }}
-        columnGap={ 3 }
-      >
-        <Flex flexWrap="nowrap" alignItems="center" maxW="100%">
-          <AddressEntity address={ data.to }/>
-        </Flex>
-      </DetailsInfoItem>
+      { data.to && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Address (external or contract) receiving the transaction"
+          >
+            { data.to.is_contract ? 'Interacted with contract' : 'To' }
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Flex flexWrap="nowrap" alignItems="center" maxW="100%">
+              <AddressEntity address={ data.to }/>
+            </Flex>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
 
       <DetailsInfoItemDivider/>
 
-      <DetailsInfoItem
-        title="Value"
+      <DetailsInfoItem.Label
         hint="Value sent in the native token (and USD) if applicable"
       >
+        Value
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <CurrencyValue
           value={ data.value }
           currency={ currencyUnits.ether }
           flexWrap="wrap"
         />
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
+
       { data.fee.value !== null && (
-        <DetailsInfoItem
-          title="Transaction fee"
-          hint="Total transaction fee"
-        >
-          <CurrencyValue
-            value={ data.fee.value }
-            currency={ currencyUnits.ether }
-            flexWrap="wrap"
-          />
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Total transaction fee"
+          >
+            Transaction fee
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <TxFee tx={ data } withUsd/>
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       <TxDetailsGasPrice gasPrice={ data.gas_price }/>
+
       { data.gas_limit && (
-        <DetailsInfoItem
-          title="Gas limit"
-          hint="Maximum amount of gas that can be used by the transaction"
-        >
-          { BigNumber(data.gas_limit).toFormat() }
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Maximum amount of gas that can be used by the transaction"
+          >
+            Gas limit
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            { BigNumber(data.gas_limit).toFormat() }
+          </DetailsInfoItem.Value>
+        </>
       ) }
 
       <DetailsInfoItemDivider/>
 
       <TxDetailsOther type={ data.type } nonce={ data.nonce } position={ null }/>
-      <DetailsInfoItem
-        title="Raw input"
+
+      <DetailsInfoItem.Label
         hint="Binary data included with the transaction. See logs tab for additional info"
       >
+        Raw input
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <RawInputData hex={ data.raw_input }/>
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
+
       { data.decoded_input && (
-        <DetailsInfoItem
-          title="Decoded input data"
-          hint="Decoded input data"
-        >
-          <LogDecodedInputData data={ data.decoded_input }/>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Decoded input data"
+          >
+            Decoded input data
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <LogDecodedInputData data={ data.decoded_input }/>
+          </DetailsInfoItem.Value>
+        </>
       ) }
     </Grid>
   );
diff --git a/ui/tx/TxInternals.pw.tsx b/ui/tx/TxInternals.pw.tsx
index 3e0c2e30be..fbbb15b7d0 100644
--- a/ui/tx/TxInternals.pw.tsx
+++ b/ui/tx/TxInternals.pw.tsx
@@ -1,40 +1,26 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as internalTxsMock from 'mocks/txs/internalTxs';
 import * as txMock from 'mocks/txs/tx';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import TxInternals from './TxInternals';
 import type { TxQuery } from './useTxQuery';
 
 const TX_HASH = txMock.base.hash;
-const API_URL_TX_INTERNALS = buildApiUrl('tx_internal_txs', { hash: TX_HASH });
 const hooksConfig = {
   router: {
     query: { hash: TX_HASH },
   },
 };
 
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(API_URL_TX_INTERNALS, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(internalTxsMock.baseResponse),
-  }));
-
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('tx_internal_txs', internalTxsMock.baseResponse, { pathParams: { hash: TX_HASH } });
   const txQuery = {
     data: txMock.base,
     isPlaceholderData: false,
     isError: false,
   } as TxQuery;
-
-  const component = await mount(
-    <TestApp>
-      <TxInternals txQuery={ txQuery }/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+  const component = await render(<TxInternals txQuery={ txQuery }/>, { hooksConfig });
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/tx/TxInternals.tsx b/ui/tx/TxInternals.tsx
index 3f0396c155..271c984096 100644
--- a/ui/tx/TxInternals.tsx
+++ b/ui/tx/TxInternals.tsx
@@ -3,10 +3,11 @@ import React from 'react';
 
 import type { InternalTransaction } from 'types/api/internalTransaction';
 
+import compareBns from 'lib/bigint/compareBns';
 // import { apos } from 'lib/html-entities';
 import { INTERNAL_TX } from 'stubs/internalTx';
 import { generateListStub } from 'stubs/utils';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 // import FilterInput from 'ui/shared/filters/FilterInput';
 // import TxInternalsFilter from 'ui/tx/internals/TxInternalsFilter';
@@ -31,23 +32,20 @@ const getNextSortValue = (getNextSortValueShared<SortField, Sort>).bind(undefine
 const sortFn = (sort: Sort | undefined) => (a: InternalTransaction, b: InternalTransaction) => {
   switch (sort) {
     case 'value-desc': {
-      const result = a.value > b.value ? -1 : 1;
-      return a.value === b.value ? 0 : result;
+      return compareBns(b.value, a.value);
     }
 
     case 'value-asc': {
-      const result = a.value > b.value ? 1 : -1;
-      return a.value === b.value ? 0 : result;
+      return compareBns(a.value, b.value);
     }
 
     case 'gas-limit-desc': {
-      const result = a.gas_limit > b.gas_limit ? -1 : 1;
-      return a.gas_limit === b.gas_limit ? 0 : result;
+      return compareBns(b.gas_limit, a.gas_limit);
     }
 
     case 'gas-limit-asc': {
-      const result = a.gas_limit > b.gas_limit ? 1 : -1;
-      return a.gas_limit === b.gas_limit ? 0 : result;
+      return compareBns(a.gas_limit, b.gas_limit);
+
     }
 
     default:
@@ -111,7 +109,7 @@ const TxInternals = ({ txQuery }: Props) => {
           data={ filteredData }
           sort={ sort }
           onSortToggle={ handleSortToggle }
-          top={ pagination.isVisible ? 80 : 0 }
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
           isLoading={ isPlaceholderData }
         />
       </Hide>
diff --git a/ui/tx/TxState.pw.tsx b/ui/tx/TxState.pw.tsx
index 9c65e1cd5d..a07fe8025a 100644
--- a/ui/tx/TxState.pw.tsx
+++ b/ui/tx/TxState.pw.tsx
@@ -1,39 +1,25 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as txStateMock from 'mocks/txs/state';
 import * as txMock from 'mocks/txs/tx';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
+import { test, expect } from 'playwright/lib';
 
 import TxState from './TxState';
 import type { TxQuery } from './useTxQuery';
 
-const TX_STATE_API_URL = buildApiUrl('tx_state_changes', { hash: txMock.base.hash });
 const hooksConfig = {
   router: {
     query: { hash: txMock.base.hash },
   },
 };
 
-test('base view +@mobile', async({ mount, page }) => {
-  await page.route(TX_STATE_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(txStateMock.baseResponse),
-  }));
-
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('tx_state_changes', txStateMock.baseResponse, { pathParams: { hash: txMock.base.hash } });
   const txQuery = {
     data: txMock.base,
     isPlaceholderData: false,
     isError: false,
   } as TxQuery;
-
-  const component = await mount(
-    <TestApp>
-      <TxState txQuery={ txQuery }/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+  const component = await render(<TxState txQuery={ txQuery }/>, { hooksConfig });
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/tx/TxState.tsx b/ui/tx/TxState.tsx
index c20b4e7a7d..2205f24646 100644
--- a/ui/tx/TxState.tsx
+++ b/ui/tx/TxState.tsx
@@ -2,7 +2,7 @@ import { Accordion, Hide, Show, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import { TX_STATE_CHANGES } from 'stubs/txStateChanges';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -40,7 +40,7 @@ const TxState = ({ txQuery }: Props) => {
   const content = data ? (
     <Accordion allowMultiple defaultIndex={ [] }>
       <Hide below="lg" ssr={ false }>
-        <TxStateTable data={ data.items } isLoading={ isPlaceholderData } top={ pagination.isVisible ? 80 : 0 }/>
+        <TxStateTable data={ data.items } isLoading={ isPlaceholderData } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }/>
       </Hide>
       <Show below="lg" ssr={ false }>
         <TxStateList data={ data.items } isLoading={ isPlaceholderData }/>
diff --git a/ui/tx/TxSubHeading.pw.tsx b/ui/tx/TxSubHeading.pw.tsx
index 93f51906fb..dfbd612bb7 100644
--- a/ui/tx/TxSubHeading.pw.tsx
+++ b/ui/tx/TxSubHeading.pw.tsx
@@ -1,102 +1,139 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import type { AddressMetadataInfo, AddressMetadataTagApi } from 'types/api/addressMetadata';
+
+import config from 'configs/app';
+import { protocolTagWithMeta } from 'mocks/metadata/address';
 import * as txMock from 'mocks/txs/tx';
 import { txInterpretation } from 'mocks/txs/txInterpretation';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import TxSubHeading from './TxSubHeading';
 import type { TxQuery } from './useTxQuery';
 
 const hash = '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193';
 
-const TX_INTERPRETATION_API_URL = buildApiUrl('tx_interpretation', { hash });
-
 const txQuery = {
   data: txMock.base,
   isPlaceholderData: false,
   isError: false,
 } as TxQuery;
 
-test('no interpretation +@mobile', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-const bsInterpretationTest = test.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.txInterpretation) as any,
-});
-
-bsInterpretationTest('with interpretation +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(TX_INTERPRETATION_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(txInterpretation),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-bsInterpretationTest('with interpretation and view all link +@mobile', async({ mount, page }) => {
-  await page.route(TX_INTERPRETATION_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ data: { summaries: [ ...txInterpretation.data.summaries, ...txInterpretation.data.summaries ] } }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>
-    </TestApp>,
-  );
-
+const addressMetadataQueryParams = {
+  addresses: [ txMock.base.to?.hash as string ],
+  chainId: config.chain.id,
+  tagsLimit: '20',
+};
+
+function generateAddressMetadataResponse(tag: AddressMetadataTagApi) {
+  return {
+    addresses: {
+      [ txMock.base.to?.hash?.toLowerCase() as string ]: {
+        tags: [ {
+          ...tag,
+          meta: JSON.stringify(tag.meta),
+        } ],
+      },
+    },
+  } as AddressMetadataInfo;
+}
+
+test('no interpretation +@mobile', async({ render }) => {
+  const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
   await expect(component).toHaveScreenshot();
 });
 
-bsInterpretationTest('no interpretation, has method called', async({ mount, page }) => {
-  await page.route(TX_INTERPRETATION_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ data: { summaries: [] } }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
-});
-
-bsInterpretationTest('no interpretation', async({ mount, page }) => {
-  const txPendingQuery = {
-    data: txMock.pending,
-    isPlaceholderData: false,
-    isError: false,
-  } as TxQuery;
-  await page.route(TX_INTERPRETATION_API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify({ data: { summaries: [] } }),
-  }));
-
-  const component = await mount(
-    <TestApp>
-      <TxSubHeading hash={ hash } hasTag={ false } txQuery={ txPendingQuery }/>
-    </TestApp>,
-  );
-
-  await expect(component).toHaveScreenshot();
+test.describe('blockscout provider', () => {
+  test.beforeEach(async({ mockEnvs }) => {
+    await mockEnvs(ENVS_MAP.txInterpretation);
+  });
+
+  test('with interpretation +@mobile +@dark-mode', async({ render, mockApiResponse }) => {
+    await mockApiResponse('tx_interpretation', txInterpretation, { pathParams: { hash } });
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('with interpretation and action button +@mobile +@dark-mode', async({ render, mockApiResponse, mockAssetResponse }) => {
+    const metadataResponse = generateAddressMetadataResponse(protocolTagWithMeta);
+    await mockApiResponse('address_metadata_info', metadataResponse, { queryParams: addressMetadataQueryParams });
+    await mockAssetResponse(protocolTagWithMeta?.meta?.appLogoURL as string, './playwright/mocks/image_s.jpg');
+    await mockApiResponse('tx_interpretation', txInterpretation, { pathParams: { hash } });
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('with interpretation and recipient name +@mobile', async({ render, mockApiResponse }) => {
+    const newTxQuery = { ...txQuery, data: txMock.withRecipientName } as TxQuery;
+    await mockApiResponse('tx_interpretation', txInterpretation, { pathParams: { hash } });
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ newTxQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('with interpretation and recipient ENS domain +@mobile', async({ render, mockApiResponse }) => {
+    const newTxQuery = { ...txQuery, data: txMock.withRecipientEns } as TxQuery;
+    await mockApiResponse('tx_interpretation', txInterpretation, { pathParams: { hash } });
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ newTxQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('with interpretation and recipient name tag +@mobile', async({ render, mockApiResponse }) => {
+    const newTxQuery = { ...txQuery, data: txMock.withRecipientNameTag } as TxQuery;
+    await mockApiResponse('tx_interpretation', txInterpretation, { pathParams: { hash } });
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ newTxQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('with interpretation and view all link +@mobile', async({ render, mockApiResponse }) => {
+    await mockApiResponse(
+      'tx_interpretation',
+      { data: { summaries: [ ...txInterpretation.data.summaries, ...txInterpretation.data.summaries ] } },
+      { pathParams: { hash } },
+    );
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('with interpretation and view all link, and action button (external link) +@mobile', async({
+    render, mockApiResponse, mockAssetResponse,
+  }) => {
+    delete protocolTagWithMeta?.meta?.appID;
+    const metadataResponse = generateAddressMetadataResponse(protocolTagWithMeta);
+    await mockApiResponse('address_metadata_info', metadataResponse, { queryParams: addressMetadataQueryParams });
+    await mockAssetResponse(protocolTagWithMeta?.meta?.appLogoURL as string, './playwright/mocks/image_s.jpg');
+    await mockApiResponse(
+      'tx_interpretation',
+      { data: { summaries: [ ...txInterpretation.data.summaries, ...txInterpretation.data.summaries ] } },
+      { pathParams: { hash } },
+    );
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('no interpretation, has method called', async({ render, mockApiResponse }) => {
+    // the action button should not render if there is no interpretation
+    const newTxQuery = { ...txQuery, data: txMock.withRecipientContract } as TxQuery;
+    const metadataResponse = generateAddressMetadataResponse(protocolTagWithMeta);
+    await mockApiResponse('address_metadata_info', metadataResponse, { queryParams: addressMetadataQueryParams });
+    await mockApiResponse('tx_interpretation', { data: { summaries: [] } }, { pathParams: { hash } });
+
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ newTxQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('no interpretation', async({ render, mockApiResponse }) => {
+    // the action button should not render if there is no interpretation
+    const metadataResponse = generateAddressMetadataResponse(protocolTagWithMeta);
+    await mockApiResponse('address_metadata_info', metadataResponse, { queryParams: addressMetadataQueryParams });
+
+    const txPendingQuery = {
+      data: txMock.pending,
+      isPlaceholderData: false,
+      isError: false,
+    } as TxQuery;
+    await mockApiResponse('tx_interpretation', { data: { summaries: [] } }, { pathParams: { hash } });
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txPendingQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
 });
diff --git a/ui/tx/TxSubHeading.tsx b/ui/tx/TxSubHeading.tsx
index 7ee1336512..258ca63dc6 100644
--- a/ui/tx/TxSubHeading.tsx
+++ b/ui/tx/TxSubHeading.tsx
@@ -1,11 +1,15 @@
 import { Box, Flex, Link } from '@chakra-ui/react';
 import React from 'react';
 
+import type { AddressParam } from 'types/api/addressParams';
+
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import { NOVES_TRANSLATE } from 'stubs/noves/NovesTranslate';
 import { TX_INTERPRETATION } from 'stubs/txInterpretation';
 import AccountActionsMenu from 'ui/shared/AccountActionsMenu/AccountActionsMenu';
+import AppActionButton from 'ui/shared/AppActionButton/AppActionButton';
+import useAppActionData from 'ui/shared/AppActionButton/useAppActionData';
 import { TX_ACTIONS_BLOCK_ID } from 'ui/shared/DetailsActionsWrapper';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import NetworkExplorers from 'ui/shared/NetworkExplorers';
@@ -15,7 +19,7 @@ import { createNovesSummaryObject } from './assetFlows/utils/createNovesSummaryO
 import type { TxQuery } from './useTxQuery';
 
 type Props = {
-  hash?: string;
+  hash: string;
   hasTag: boolean;
   txQuery: TxQuery;
 }
@@ -26,6 +30,8 @@ const TxSubHeading = ({ hash, hasTag, txQuery }: Props) => {
   const hasInterpretationFeature = feature.isEnabled;
   const isNovesInterpretation = hasInterpretationFeature && feature.provider === 'noves';
 
+  const appActionData = useAppActionData(txQuery.data?.to?.hash, !txQuery.isPlaceholderData);
+
   const txInterpretationQuery = useApiQuery('tx_interpretation', {
     pathParams: { hash },
     queryOptions: {
@@ -42,23 +48,34 @@ const TxSubHeading = ({ hash, hasTag, txQuery }: Props) => {
     },
   });
 
-  const content = (() => {
-    const hasNovesInterpretation = isNovesInterpretation &&
+  const hasNovesInterpretation = isNovesInterpretation &&
     (novesInterpretationQuery.isPlaceholderData || Boolean(novesInterpretationQuery.data?.classificationData.description));
 
-    const hasInternalInterpretation = (hasInterpretationFeature && !isNovesInterpretation) &&
-    (txInterpretationQuery.isPlaceholderData || Boolean(txInterpretationQuery.data?.data.summaries.length));
+  const hasInternalInterpretation = (hasInterpretationFeature && !isNovesInterpretation) &&
+  (txInterpretationQuery.isPlaceholderData || Boolean(txInterpretationQuery.data?.data.summaries.length));
+
+  const hasViewAllInterpretationsLink =
+    !txInterpretationQuery.isPlaceholderData && txInterpretationQuery.data?.data.summaries && txInterpretationQuery.data?.data.summaries.length > 1;
+
+  const hasAnyInterpretation =
+    (hasNovesInterpretation && novesInterpretationQuery.data && !novesInterpretationQuery.isPlaceholderData) ||
+    (hasInternalInterpretation && !txInterpretationQuery.isPlaceholderData);
 
-    const hasViewAllInterpretationsLink =
-      !txInterpretationQuery.isPlaceholderData && txInterpretationQuery.data?.data.summaries && txInterpretationQuery.data?.data.summaries.length > 1;
+  const addressDataMap: Record<string, AddressParam> = {};
+  [ txQuery.data?.from, txQuery.data?.to ]
+    .filter((data): data is AddressParam => Boolean(data && data.hash))
+    .forEach(data => {
+      addressDataMap[data.hash] = data;
+    });
 
+  const content = (() => {
     if (hasNovesInterpretation && novesInterpretationQuery.data) {
       const novesSummary = createNovesSummaryObject(novesInterpretationQuery.data);
-
       return (
         <TxInterpretation
           summary={ novesSummary }
-          isLoading={ novesInterpretationQuery.isPlaceholderData }
+          isLoading={ novesInterpretationQuery.isPlaceholderData || txQuery.isPlaceholderData }
+          addressDataMap={ addressDataMap }
           fontSize="lg"
           mr={{ base: 0, lg: 6 }}
         />
@@ -68,7 +85,8 @@ const TxSubHeading = ({ hash, hasTag, txQuery }: Props) => {
         <Flex mr={{ base: 0, lg: 6 }} flexWrap="wrap" alignItems="center">
           <TxInterpretation
             summary={ txInterpretationQuery.data?.data.summaries[0] }
-            isLoading={ txInterpretationQuery.isPlaceholderData }
+            isLoading={ txInterpretationQuery.isPlaceholderData || txQuery.isPlaceholderData }
+            addressDataMap={ addressDataMap }
             fontSize="lg"
             mr={ hasViewAllInterpretationsLink ? 3 : 0 }
           />
@@ -98,6 +116,7 @@ const TxSubHeading = ({ hash, hasTag, txQuery }: Props) => {
           }}
           isLoading={ txQuery.isPlaceholderData }
           fontSize="lg"
+          mr={{ base: 0, lg: 6 }}
         />
       );
     } else {
@@ -105,12 +124,26 @@ const TxSubHeading = ({ hash, hasTag, txQuery }: Props) => {
     }
   })();
 
+  const isLoading =
+    txQuery.isPlaceholderData ||
+    (hasNovesInterpretation && novesInterpretationQuery.isPlaceholderData) ||
+    (hasInternalInterpretation && txInterpretationQuery.isPlaceholderData);
+
   return (
     <Box display={{ base: 'block', lg: 'flex' }} alignItems="center" w="100%">
       { content }
-      <Flex alignItems="center" justifyContent={{ base: 'start', lg: 'space-between' }} flexGrow={ 1 }>
-        { !hasTag && <AccountActionsMenu mr={ 3 } mt={{ base: 3, lg: 0 }}/> }
-        <NetworkExplorers type="tx" pathParam={ hash } ml={{ base: 0, lg: 'auto' }} mt={{ base: 3, lg: 0 }}/>
+      <Flex
+        alignItems="center"
+        justifyContent={{ base: 'start', lg: 'space-between' }}
+        flexGrow={ 1 }
+        gap={ 3 }
+        mt={{ base: 3, lg: 0 }}
+      >
+        { !hasTag && <AccountActionsMenu isLoading={ isLoading }/> }
+        { (appActionData && hasAnyInterpretation) && (
+          <AppActionButton data={ appActionData } txHash={ hash } source="Txn"/>
+        ) }
+        <NetworkExplorers type="tx" pathParam={ hash } ml={{ base: 0, lg: 'auto' }}/>
       </Flex>
     </Box>
   );
diff --git a/ui/tx/TxTokenTransfer.tsx b/ui/tx/TxTokenTransfer.tsx
index e50ceda1cf..937b8f8d3c 100644
--- a/ui/tx/TxTokenTransfer.tsx
+++ b/ui/tx/TxTokenTransfer.tsx
@@ -9,7 +9,7 @@ import getFilterValuesFromQuery from 'lib/getFilterValuesFromQuery';
 import { apos } from 'lib/html-entities';
 import { TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
 import { getTokenTransfersStub } from 'stubs/token';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
@@ -73,7 +73,7 @@ const TxTokenTransfer = ({ txQuery, tokenTransferFilter }: Props) => {
   const content = tokenTransferQuery.data?.items ? (
     <>
       <Hide below="lg" ssr={ false }>
-        <TokenTransferTable data={ items } top={ isActionBarHidden ? 0 : 80 } isLoading={ tokenTransferQuery.isPlaceholderData }/>
+        <TokenTransferTable data={ items } top={ isActionBarHidden ? 0 : ACTION_BAR_HEIGHT_DESKTOP } isLoading={ tokenTransferQuery.isPlaceholderData }/>
       </Hide>
       <Show below="lg" ssr={ false }>
         <TokenTransferList data={ items } isLoading={ tokenTransferQuery.isPlaceholderData }/>
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..1bc3a3dc37
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..4eada08c0e
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-mobile-dark-mode-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_with-interpretation-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_with-interpretation-mobile-dark-mode-1.png
deleted file mode 100644
index d87e1bcea8..0000000000
Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_with-interpretation-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-1.png
new file mode 100644
index 0000000000..873f856877
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-has-method-called-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-has-method-called-1.png
new file mode 100644
index 0000000000..669b08f06f
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-has-method-called-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..ecc3ecb5cf
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-ENS-domain-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-ENS-domain-1.png
new file mode 100644
index 0000000000..bfc91a9f8c
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-ENS-domain-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png
new file mode 100644
index 0000000000..5ef51ef2df
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png
new file mode 100644
index 0000000000..df660a7849
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png
new file mode 100644
index 0000000000..f278c210f9
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png
new file mode 100644
index 0000000000..e642508a5e
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png
new file mode 100644
index 0000000000..18df21b392
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..a90b07bc07
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-mobile-dark-mode-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_no-interpretation-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_no-interpretation-1.png
deleted file mode 100644
index 218085ff3e..0000000000
Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_no-interpretation-1.png and /dev/null differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..cb6d636824
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png
new file mode 100644
index 0000000000..870dd9b7ba
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png
new file mode 100644
index 0000000000..679c35306e
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png
new file mode 100644
index 0000000000..0708cbbe49
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png
new file mode 100644
index 0000000000..02de930e4c
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png
new file mode 100644
index 0000000000..1a14a91254
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-mobile-dark-mode-1.png
new file mode 100644
index 0000000000..450c1ab5f4
Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-mobile-dark-mode-1.png differ
diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_with-interpretation-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_with-interpretation-mobile-dark-mode-1.png
deleted file mode 100644
index aa2a6801ce..0000000000
Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_with-interpretation-mobile-dark-mode-1.png and /dev/null differ
diff --git a/ui/tx/assetFlows/components/NovesActionSnippet.tsx b/ui/tx/assetFlows/components/NovesActionSnippet.tsx
index c1acc6b0db..daa05266c5 100644
--- a/ui/tx/assetFlows/components/NovesActionSnippet.tsx
+++ b/ui/tx/assetFlows/components/NovesActionSnippet.tsx
@@ -1,8 +1,9 @@
-import { Box, Hide, Popover, PopoverArrow, PopoverContent, PopoverTrigger, Show, Skeleton, Text, useColorModeValue } from '@chakra-ui/react';
+import { Box, Hide, PopoverArrow, PopoverContent, PopoverTrigger, Show, Skeleton, Text, useColorModeValue } from '@chakra-ui/react';
 import type { FC } from 'react';
 import React from 'react';
 
 import { HEX_REGEXP } from 'lib/regexp';
+import Popover from 'ui/shared/chakra/Popover';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import IconSvg from 'ui/shared/IconSvg';
 
@@ -24,9 +25,11 @@ const NovesActionSnippet: FC<Props> = ({ item, isLoaded }) => {
     const symbol = action.nft?.symbol || action.token?.symbol;
 
     const token = {
-      name: name,
-      symbol: symbol?.toLowerCase() === name?.toLowerCase() ? undefined : symbol,
-      address: action.nft?.address || action.token?.address,
+      name: name || '',
+      symbol: (symbol?.toLowerCase() === name?.toLowerCase() ? undefined : symbol) || '',
+      address: action.nft?.address || action.token?.address || '',
+      icon_url: '',
+      type: action.nft ? 'ERC-721' as const : 'ERC-20' as const,
     };
 
     return token;
diff --git a/ui/tx/assetFlows/utils/generateFlowViewData.ts b/ui/tx/assetFlows/utils/generateFlowViewData.ts
index 9564c574d8..e4adb0d348 100644
--- a/ui/tx/assetFlows/utils/generateFlowViewData.ts
+++ b/ui/tx/assetFlows/utils/generateFlowViewData.ts
@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import _findIndex from 'lodash/findIndex';
 
 import type { NovesNft, NovesResponseData, NovesSentReceived, NovesToken } from 'types/api/noves';
 
@@ -27,7 +27,7 @@ export function generateFlowViewData(data: NovesResponseData): Array<NovesFlowVi
 
   const txItems = [ ...sent, ...received ];
 
-  const paidGasIndex = _.findIndex(txItems, (item) => item.action === 'paidGas');
+  const paidGasIndex = _findIndex(txItems, (item) => item.action === 'paidGas');
   if (paidGasIndex >= 0) {
     const element = txItems.splice(paidGasIndex, 1)[0];
     element.to.name = 'Validators';
diff --git a/ui/tx/assetFlows/utils/getAddressValues.ts b/ui/tx/assetFlows/utils/getAddressValues.ts
index 9588a44392..7e20b92843 100644
--- a/ui/tx/assetFlows/utils/getAddressValues.ts
+++ b/ui/tx/assetFlows/utils/getAddressValues.ts
@@ -57,6 +57,10 @@ function extractAddresses(data: NovesResponseData) {
     addressesSet.add({ hash: data.classificationData.approved.spender });
   }
 
+  if (data.classificationData.deployedContractAddress) {
+    addressesSet.add({ hash: data.classificationData.deployedContractAddress });
+  }
+
   if (data.txTypeVersion === 2) {
     data.classificationData.sent.forEach((transaction) => {
       addressesSet.add({ hash: transaction.from.address, name: transaction.from.name });
@@ -72,5 +76,5 @@ function extractAddresses(data: NovesResponseData) {
   const addresses = Array.from(addressesSet) as Array<{hash: string; name?: string}>; // Convert Set to an array
 
   // Remove empty and null values
-  return addresses.filter(address => address.hash !== null && address.hash !== '');
+  return addresses.filter(address => address.hash !== null && address.hash !== '' && address.hash !== undefined);
 }
diff --git a/ui/tx/assetFlows/utils/getTokensData.ts b/ui/tx/assetFlows/utils/getTokensData.ts
index 2b14c9231c..159dcca11a 100644
--- a/ui/tx/assetFlows/utils/getTokensData.ts
+++ b/ui/tx/assetFlows/utils/getTokensData.ts
@@ -1,4 +1,6 @@
-import _ from 'lodash';
+import _groupBy from 'lodash/groupBy';
+import _keysIn from 'lodash/keysIn';
+import _mapValues from 'lodash/mapValues';
 
 import type { NovesResponseData } from 'types/api/noves';
 import type { TokenInfo } from 'types/api/token';
@@ -47,28 +49,28 @@ export function getTokensData(data: NovesResponseData): TokensData {
   });
 
   // Group tokens by property into arrays
-  const tokensGroupByname = _.groupBy(tokens, 'name');
-  const tokensGroupBySymbol = _.groupBy(tokens, 'symbol');
-  const tokensGroupById = _.groupBy(tokens, 'id');
+  const tokensGroupByname = _groupBy(tokens, 'name');
+  const tokensGroupBySymbol = _groupBy(tokens, 'symbol');
+  const tokensGroupById = _groupBy(tokens, 'id');
 
   // Map properties to an object and remove duplicates
-  const mappedNames = _.mapValues(tokensGroupByname, (i) => {
+  const mappedNames = _mapValues(tokensGroupByname, (i) => {
     return i[0];
   });
 
-  const mappedSymbols = _.mapValues(tokensGroupBySymbol, (i) => {
+  const mappedSymbols = _mapValues(tokensGroupBySymbol, (i) => {
     return i[0];
   });
 
-  const mappedIds = _.mapValues(tokensGroupById, (i) => {
+  const mappedIds = _mapValues(tokensGroupById, (i) => {
     return i[0];
   });
 
   const filters = [ 'undefined', 'null' ];
   // Array of keys to match in string
-  const nameList = _.keysIn(mappedNames).filter(i => !filters.includes(i));
-  const symbolList = _.keysIn(mappedSymbols).filter(i => !filters.includes(i));
-  const idList = _.keysIn(mappedIds).filter(i => !filters.includes(i));
+  const nameList = _keysIn(mappedNames).filter(i => !filters.includes(i));
+  const symbolList = _keysIn(mappedSymbols).filter(i => !filters.includes(i));
+  const idList = _keysIn(mappedIds).filter(i => !filters.includes(i));
 
   return {
     nameList,
diff --git a/ui/tx/details/TxDetailsBurntFees.tsx b/ui/tx/details/TxDetailsBurntFees.tsx
index dc613035c5..9054964c1a 100644
--- a/ui/tx/details/TxDetailsBurntFees.tsx
+++ b/ui/tx/details/TxDetailsBurntFees.tsx
@@ -7,7 +7,7 @@ import config from 'configs/app';
 import { ZERO } from 'lib/consts';
 import { currencyUnits } from 'lib/units';
 import CurrencyValue from 'ui/shared/CurrencyValue';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import IconSvg from 'ui/shared/IconSvg';
 
 const rollupFeature = config.features.rollup;
@@ -30,24 +30,28 @@ const TxDetailsBurntFees = ({ data, isLoading }: Props) => {
   }
 
   return (
-    <DetailsInfoItem
-      title="Burnt fees"
-      hint={ `
+    <>
+      <DetailsInfoItem.Label
+        hint={ `
             Amount of ${ currencyUnits.ether } burned for this transaction. Equals Block Base Fee per Gas * Gas Used
             ${ data.blob_gas_price && data.blob_gas_used ? ' + Blob Gas Price * Blob Gas Used' : '' }
           ` }
-      isLoading={ isLoading }
-    >
-      <IconSvg name="flame" boxSize={ 5 } color="gray.500" isLoading={ isLoading }/>
-      <CurrencyValue
-        value={ value.toString() }
-        currency={ currencyUnits.ether }
-        exchangeRate={ data.exchange_rate }
-        flexWrap="wrap"
-        ml={ 2 }
         isLoading={ isLoading }
-      />
-    </DetailsInfoItem>
+      >
+        Burnt fees
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <IconSvg name="flame" boxSize={ 5 } color="gray.500" isLoading={ isLoading }/>
+        <CurrencyValue
+          value={ value.toString() }
+          currency={ currencyUnits.ether }
+          exchangeRate={ data.exchange_rate }
+          flexWrap="wrap"
+          ml={ 2 }
+          isLoading={ isLoading }
+        />
+      </DetailsInfoItem.Value>
+    </>
   );
 };
 
diff --git a/ui/tx/details/TxDetailsFeePerGas.tsx b/ui/tx/details/TxDetailsFeePerGas.tsx
index 3cbe465e5b..afc7bfb8d4 100644
--- a/ui/tx/details/TxDetailsFeePerGas.tsx
+++ b/ui/tx/details/TxDetailsFeePerGas.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 import config from 'configs/app';
 import { currencyUnits } from 'lib/units';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 
 interface Props {
   txFee: string | null;
@@ -18,16 +18,20 @@ const TxDetailsFeePerGas = ({ txFee, gasUsed, isLoading }: Props) => {
   }
 
   return (
-    <DetailsInfoItem
-      title="Fee per gas"
-      hint="Fee per gas"
-      isLoading={ isLoading }
-    >
-      <Skeleton isLoaded={ !isLoading } mr={ 1 }>
-        { BigNumber(txFee).dividedBy(10 ** config.chain.currency.decimals).dividedBy(gasUsed).toFixed() }
-        { config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ currencyUnits.ether }` }
-      </Skeleton>
-    </DetailsInfoItem>
+    <>
+      <DetailsInfoItem.Label
+        hint="Fee per gas"
+        isLoading={ isLoading }
+      >
+        Fee per gas
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isLoading } mr={ 1 }>
+          { BigNumber(txFee).dividedBy(10 ** config.chain.currency.decimals).dividedBy(gasUsed).toFixed() }
+          { config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ currencyUnits.ether }` }
+        </Skeleton>
+      </DetailsInfoItem.Value>
+    </>
   );
 };
 
diff --git a/ui/tx/details/TxDetailsGasPrice.tsx b/ui/tx/details/TxDetailsGasPrice.tsx
index e27d2880a2..16934da4fa 100644
--- a/ui/tx/details/TxDetailsGasPrice.tsx
+++ b/ui/tx/details/TxDetailsGasPrice.tsx
@@ -2,34 +2,59 @@ import { Skeleton } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
+import type { TokenInfo } from 'types/api/token';
+
 import config from 'configs/app';
 import { WEI, WEI_IN_GWEI } from 'lib/consts';
 import { currencyUnits } from 'lib/units';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 
 interface Props {
+  gasToken?: TokenInfo<'ERC-20'> | null;
   gasPrice: string | null;
   isLoading?: boolean;
 }
 
-const TxDetailsGasPrice = ({ gasPrice, isLoading }: Props) => {
+const TxDetailsGasPrice = ({ gasPrice, gasToken, isLoading }: Props) => {
   if (config.UI.views.tx.hiddenFields?.gas_price || !gasPrice) {
     return null;
   }
 
+  const content = (() => {
+    if (gasToken) {
+      return (
+        <Skeleton isLoaded={ !isLoading } display="flex">
+          <span>{ BigNumber(gasPrice).dividedBy(WEI).toFixed() }</span>
+          <TokenEntity token={ gasToken } noCopy onlySymbol w="auto" ml={ 1 }/>
+        </Skeleton>
+      );
+    }
+
+    return (
+      <>
+        <Skeleton isLoaded={ !isLoading } mr={ 1 }>
+          { BigNumber(gasPrice).dividedBy(WEI).toFixed() } { currencyUnits.ether }
+        </Skeleton>
+        <Skeleton isLoaded={ !isLoading } color="text_secondary">
+          <span>({ BigNumber(gasPrice).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</span>
+        </Skeleton>
+      </>
+    );
+  })();
+
   return (
-    <DetailsInfoItem
-      title="Gas price"
-      hint="Price per unit of gas specified by the sender. Higher gas prices can prioritize transaction inclusion during times of high usage"
-      isLoading={ isLoading }
-    >
-      <Skeleton isLoaded={ !isLoading } mr={ 1 }>
-        { BigNumber(gasPrice).dividedBy(WEI).toFixed() } { currencyUnits.ether }
-      </Skeleton>
-      <Skeleton isLoaded={ !isLoading } color="text_secondary">
-        <span>({ BigNumber(gasPrice).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</span>
-      </Skeleton>
-    </DetailsInfoItem>
+    <>
+      <DetailsInfoItem.Label
+        hint="Price per unit of gas specified by the sender. Higher gas prices can prioritize transaction inclusion during times of high usage"
+        isLoading={ isLoading }
+      >
+        Gas price
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        { content }
+      </DetailsInfoItem.Value>
+    </>
   );
 };
 
diff --git a/ui/tx/details/TxDetailsOther.tsx b/ui/tx/details/TxDetailsOther.tsx
index 2ca2450978..157bbb057c 100644
--- a/ui/tx/details/TxDetailsOther.tsx
+++ b/ui/tx/details/TxDetailsOther.tsx
@@ -3,47 +3,51 @@ import React from 'react';
 
 import type { Transaction } from 'types/api/transaction';
 
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import TextSeparator from 'ui/shared/TextSeparator';
 
 type Props = Pick<Transaction, 'nonce' | 'type' | 'position'>
 
 const TxDetailsOther = ({ nonce, type, position }: Props) => {
   return (
-    <DetailsInfoItem
-      title="Other"
-      hint="Other data related to this transaction"
-    >
-      {
-        [
-          typeof type === 'number' && (
-            <Box key="type">
-              <Text as="span" fontWeight="500">Txn type: </Text>
-              <Text fontWeight="600" as="span">{ type }</Text>
-              { type === 2 && <Text fontWeight="400" as="span" ml={ 1 } variant="secondary">(EIP-1559)</Text> }
-              { type === 3 && <Text fontWeight="400" as="span" ml={ 1 } variant="secondary">(EIP-4844)</Text> }
-            </Box>
-          ),
-          <Box key="nonce">
-            <Text as="span" fontWeight="500">Nonce: </Text>
-            <Text fontWeight="600" as="span">{ nonce }</Text>
-          </Box>,
-          position !== null && position !== undefined && (
-            <Box key="position">
-              <Text as="span" fontWeight="500">Position: </Text>
-              <Text fontWeight="600" as="span">{ position }</Text>
-            </Box>
-          ),
-        ]
-          .filter(Boolean)
-          .map((item, index) => (
-            <>
-              { index !== 0 && <TextSeparator/> }
-              { item }
-            </>
-          ))
-      }
-    </DetailsInfoItem>
+    <>
+      <DetailsInfoItem.Label
+        hint="Other data related to this transaction"
+      >
+        Other
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        {
+          [
+            typeof type === 'number' && (
+              <Box key="type">
+                <Text as="span" fontWeight="500">Txn type: </Text>
+                <Text fontWeight="600" as="span">{ type }</Text>
+                { type === 2 && <Text fontWeight="400" as="span" ml={ 1 } variant="secondary">(EIP-1559)</Text> }
+                { type === 3 && <Text fontWeight="400" as="span" ml={ 1 } variant="secondary">(EIP-4844)</Text> }
+              </Box>
+            ),
+            <Box key="nonce">
+              <Text as="span" fontWeight="500">Nonce: </Text>
+              <Text fontWeight="600" as="span">{ nonce }</Text>
+            </Box>,
+            position !== null && position !== undefined && (
+              <Box key="position">
+                <Text as="span" fontWeight="500">Position: </Text>
+                <Text fontWeight="600" as="span">{ position }</Text>
+              </Box>
+            ),
+          ]
+            .filter(Boolean)
+            .map((item, index) => (
+              <>
+                { index !== 0 && <TextSeparator/> }
+                { item }
+              </>
+            ))
+        }
+      </DetailsInfoItem.Value>
+    </>
   );
 };
 
diff --git a/ui/tx/details/TxDetailsTokenTransfer.tsx b/ui/tx/details/TxDetailsTokenTransfer.tsx
deleted file mode 100644
index 4307b77ab8..0000000000
--- a/ui/tx/details/TxDetailsTokenTransfer.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { Flex, chakra } from '@chakra-ui/react';
-import React from 'react';
-
-import type {
-  TokenTransfer as TTokenTransfer,
-  Erc20TotalPayload,
-  Erc721TotalPayload,
-  Erc1155TotalPayload,
-  Erc404TotalPayload,
-} from 'types/api/tokenTransfer';
-
-import getCurrencyValue from 'lib/getCurrencyValue';
-import AddressFromTo from 'ui/shared/address/AddressFromTo';
-import TokenEntity from 'ui/shared/entities/token/TokenEntity';
-import NftTokenTransferSnippet from 'ui/tx/NftTokenTransferSnippet';
-
-interface Props {
-  data: TTokenTransfer;
-}
-
-const TxDetailsTokenTransfer = ({ data }: Props) => {
-
-  const content = (() => {
-    switch (data.token.type) {
-      case 'ERC-20': {
-        const total = data.total as Erc20TotalPayload;
-        const { valueStr, usd } = getCurrencyValue({
-          value: total.value,
-          exchangeRate: data.token.exchange_rate,
-          accuracyUsd: 2,
-          decimals: total.decimals,
-        });
-
-        return (
-          <>
-            <chakra.span color="text_secondary">for</chakra.span>
-            <span>{ valueStr }</span>
-            <TokenEntity
-              token={{ ...data.token, name: data.token.symbol || data.token.name }}
-              noCopy
-              noSymbol
-              w="auto"
-            />
-            { usd && <chakra.span color="text_secondary">(${ usd })</chakra.span> }
-          </>
-        );
-      }
-
-      case 'ERC-721': {
-        const total = data.total as Erc721TotalPayload;
-        return (
-          <NftTokenTransferSnippet
-            token={ data.token }
-            tokenId={ total.token_id }
-            value="1"
-          />
-        );
-      }
-
-      case 'ERC-1155': {
-        const total = data.total as Erc1155TotalPayload;
-        return (
-          <NftTokenTransferSnippet
-            key={ total.token_id }
-            token={ data.token }
-            tokenId={ total.token_id }
-            value={ total.value }
-          />
-        );
-      }
-
-      case 'ERC-404': {
-        const total = data.total as Erc404TotalPayload;
-        return (
-          <NftTokenTransferSnippet
-            token={ data.token }
-            tokenId={ 'token_id' in total ? total.token_id : null }
-            value={ 'value' in total && total.value ?
-              getCurrencyValue({ value: total.value, decimals: total.decimals || '0', accuracy: 2 }).valueStr :
-              '1'
-            }
-          />
-        );
-      }
-    }
-  })();
-
-  return (
-    <Flex
-      alignItems="flex-start"
-      flexWrap="wrap"
-      columnGap={ 2 }
-      rowGap={ 3 }
-      flexDir="row"
-      w="100%"
-      fontWeight={ 500 }
-    >
-      <AddressFromTo
-        from={ data.from }
-        to={ data.to }
-        truncation="constant"
-        noIcon
-        fontWeight="500"
-      />
-      { content }
-    </Flex>
-  );
-};
-
-export default React.memo(TxDetailsTokenTransfer);
diff --git a/ui/tx/details/TxDetailsTokenTransfers.tsx b/ui/tx/details/TxDetailsTokenTransfers.tsx
index fb728c3887..d8e57c8450 100644
--- a/ui/tx/details/TxDetailsTokenTransfers.tsx
+++ b/ui/tx/details/TxDetailsTokenTransfers.tsx
@@ -5,11 +5,10 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import { route } from 'nextjs-routes';
 
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkInternal from 'ui/shared/LinkInternal';
-
-import TxDetailsTokenTransfer from './TxDetailsTokenTransfer';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import TokenTransferSnippet from 'ui/shared/TokenTransferSnippet/TokenTransferSnippet';
 
 interface Props {
   data: Array<TokenTransfer>;
@@ -40,22 +39,24 @@ const TxDetailsTokenTransfers = ({ data, txHash, isOverflow }: Props) => {
         }
 
         return (
-          <DetailsInfoItem
-            key={ type }
-            title={ title }
-            hint={ hint }
-            position="relative"
-          >
-            <Flex
-              flexDirection="column"
-              alignItems="flex-start"
-              rowGap={ 5 }
-              w="100%"
-              overflow="hidden"
+          <React.Fragment key={ type }>
+            <DetailsInfoItem.Label
+              hint={ hint }
             >
-              { items.map((item, index) => <TxDetailsTokenTransfer key={ index } data={ item }/>) }
-            </Flex>
-          </DetailsInfoItem>
+              { title }
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value position="relative">
+              <Flex
+                flexDirection="column"
+                alignItems="flex-start"
+                rowGap={ 5 }
+                w="100%"
+                overflow="hidden"
+              >
+                { items.map((item, index) => <TokenTransferSnippet key={ index } data={ item }/>) }
+              </Flex>
+            </DetailsInfoItem.Value>
+          </React.Fragment>
         );
       }) }
       { isOverflow && (
diff --git a/ui/tx/details/TxDetailsWithdrawalStatus.pw.tsx b/ui/tx/details/TxDetailsWithdrawalStatus.pw.tsx
index b4cc8c6171..4a3e58473f 100644
--- a/ui/tx/details/TxDetailsWithdrawalStatus.pw.tsx
+++ b/ui/tx/details/TxDetailsWithdrawalStatus.pw.tsx
@@ -1,12 +1,10 @@
 import { Box } from '@chakra-ui/react';
-import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import type { OptimisticL2WithdrawalStatus } from 'types/api/optimisticL2';
 
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
 
 import TxDetailsWithdrawalStatus from './TxDetailsWithdrawalStatus';
 
@@ -16,20 +14,13 @@ const statuses: Array<OptimisticL2WithdrawalStatus> = [
   'Relayed',
 ];
 
-const test = base.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
 statuses.forEach((status) => {
-  test(`status="${ status }"`, async({ mount }) => {
-
-    const component = await mount(
-      <TestApp>
-        <Box p={ 2 }>
-          <TxDetailsWithdrawalStatus status={ status } l1TxHash="0x7d93a59a228e97d084a635181c3053e324237d07566ec12287eae6da2bcf9456"/>
-        </Box>
-      </TestApp>,
+  test(`status="${ status }"`, async({ render, mockEnvs }) => {
+    await mockEnvs(ENVS_MAP.optimisticRollup);
+    const component = await render(
+      <Box p={ 2 }>
+        <TxDetailsWithdrawalStatus status={ status } l1TxHash="0x7d93a59a228e97d084a635181c3053e324237d07566ec12287eae6da2bcf9456"/>
+      </Box>,
     );
 
     await expect(component).toHaveScreenshot();
diff --git a/ui/tx/details/TxDetailsWithdrawalStatus.tsx b/ui/tx/details/TxDetailsWithdrawalStatus.tsx
index b2b7c88ce4..6e30e5a163 100644
--- a/ui/tx/details/TxDetailsWithdrawalStatus.tsx
+++ b/ui/tx/details/TxDetailsWithdrawalStatus.tsx
@@ -2,8 +2,8 @@ import { Button } from '@chakra-ui/react';
 import React from 'react';
 
 import type { OptimisticL2WithdrawalStatus } from 'types/api/optimisticL2';
-import { WITHDRAWAL_STATUSES } from 'types/api/optimisticL2';
 
+import config from 'configs/app';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps';
 
@@ -12,8 +12,34 @@ interface Props {
   l1TxHash: string | undefined;
 }
 
+const WITHDRAWAL_STATUS_STEPS: Array<OptimisticL2WithdrawalStatus> = [
+  'Waiting for state root',
+  'Ready to prove',
+  'In challenge period',
+  'Ready for relay',
+  'Relayed',
+];
+
+const WITHDRAWAL_STATUS_ORDER_PROVEN: Array<OptimisticL2WithdrawalStatus> = [
+  'Waiting for state root',
+  'Ready to prove',
+  'Proven',
+  'Relayed',
+];
+
+const WITHDRAWAL_STATUS_ORDER_GAME: Array<OptimisticL2WithdrawalStatus> = [
+  'Waiting for state root',
+  'Ready to prove',
+  'Waiting a game to resolve',
+  'In challenge period',
+  'Ready for relay',
+  'Relayed',
+];
+
+const rollupFeature = config.features.rollup;
+
 const TxDetailsWithdrawalStatus = ({ status, l1TxHash }: Props) => {
-  if (!status || !WITHDRAWAL_STATUSES.includes(status)) {
+  if (!status || !rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') {
     return null;
   }
 
@@ -22,10 +48,14 @@ const TxDetailsWithdrawalStatus = ({ status, l1TxHash }: Props) => {
   const steps = (() => {
     switch (status) {
       case 'Ready for relay':
-        return WITHDRAWAL_STATUSES.slice(0, -1);
+        return WITHDRAWAL_STATUS_STEPS.slice(0, -1);
+      case 'Proven':
+        return WITHDRAWAL_STATUS_ORDER_PROVEN;
+      case 'Waiting a game to resolve':
+        return WITHDRAWAL_STATUS_ORDER_GAME;
       case 'Relayed': {
         if (l1TxHash) {
-          return WITHDRAWAL_STATUSES.map((status) => {
+          return WITHDRAWAL_STATUS_STEPS.map((status) => {
             return status === 'Relayed' ? {
               content: <TxEntityL1 hash={ l1TxHash } truncation="constant" text="Relayed" noIcon/>,
               label: status,
@@ -33,11 +63,11 @@ const TxDetailsWithdrawalStatus = ({ status, l1TxHash }: Props) => {
           });
         }
 
-        return WITHDRAWAL_STATUSES;
+        return WITHDRAWAL_STATUS_STEPS;
       }
 
       default:
-        return WITHDRAWAL_STATUSES;
+        return WITHDRAWAL_STATUS_STEPS;
     }
   })();
 
@@ -46,7 +76,7 @@ const TxDetailsWithdrawalStatus = ({ status, l1TxHash }: Props) => {
       variant="outline"
       size="sm"
       as="a"
-      href="https://app.optimism.io/bridge/withdraw"
+      href={ rollupFeature.L2WithdrawalUrl }
       target="_blank"
     >
       Claim funds
diff --git a/ui/tx/details/TxInfo.pw.tsx b/ui/tx/details/TxInfo.pw.tsx
index 3a81c773d7..4a34314d1c 100644
--- a/ui/tx/details/TxInfo.pw.tsx
+++ b/ui/tx/details/TxInfo.pw.tsx
@@ -1,192 +1,119 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as txMock from 'mocks/txs/tx';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
-import * as configs from 'playwright/utils/configs';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import TxInfo from './TxInfo';
 
-const hooksConfig = {
-  router: {
-    query: { hash: 1 },
-  },
-};
-
-test('between addresses +@mobile +@dark-mode', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.base } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('between addresses +@mobile +@dark-mode', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.base } isLoading={ false }/>);
 
   await page.getByText('View details').click();
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-test('creating contact', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.withContractCreation } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('creating contact', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.withContractCreation } isLoading={ false }/>);
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-test('with token transfer +@mobile', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.withTokenTransfer } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('with token transfer +@mobile', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.withTokenTransfer } isLoading={ false }/>);
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-test('with decoded revert reason', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.withDecodedRevertReason } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('with decoded revert reason', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.withDecodedRevertReason } isLoading={ false }/>);
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-test('with decoded raw reason', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.withRawRevertReason } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('with decoded raw reason', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.withRawRevertReason } isLoading={ false }/>);
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-test('pending', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.pending } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('pending', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.pending } isLoading={ false }/>);
 
   await page.getByText('View details').click();
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-test('with actions uniswap +@mobile +@dark-mode', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.withActionsUniswap } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+// NOTE: On the screenshot from the test for the mobile device, the scroll overlay is not quite right.
+// I checked it manually in the real device, there was not any issue with it
+test('with actions uniswap +@mobile +@dark-mode', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.withActionsUniswap } isLoading={ false }/>);
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-test('with blob', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.withBlob } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('with blob', async({ render, page }) => {
+  const component = await render(<TxInfo data={ txMock.withBlob } isLoading={ false }/>);
 
   await page.getByText('View details').click();
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-const l2Test = test.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.featureEnvs.optimisticRollup) as any,
-});
-
-l2Test('l2', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.l2tx } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
-
+test('l2', async({ render, page, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+  const component = await render(<TxInfo data={ txMock.l2tx } isLoading={ false }/>);
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-const mainnetTest = test.extend({
-  context: contextWithEnvs([
-    { name: 'NEXT_PUBLIC_IS_TESTNET', value: 'false' },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
-});
-
-mainnetTest('without testnet warning', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.l2tx } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('without testnet warning', async({ render, page, mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_IS_TESTNET', 'false' ],
+  ]);
+  const component = await render(<TxInfo data={ txMock.l2tx } isLoading={ false }/>);
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
 
-const stabilityTest = test.extend({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: contextWithEnvs(configs.stabilityEnvs) as any,
-});
-
-stabilityTest('stability customization', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxInfo data={ txMock.stabilityTx } isLoading={ false }/>
-    </TestApp>,
-    { hooksConfig },
-  );
+test('stability customization', async({ render, page, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.stabilityEnvs);
+  const component = await render(<TxInfo data={ txMock.stabilityTx } isLoading={ false }/>);
 
   await expect(component).toHaveScreenshot({
-    mask: [ page.locator(configs.adsBannerSelector) ],
-    maskColor: configs.maskColor,
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
   });
 });
diff --git a/ui/tx/details/TxInfo.tsx b/ui/tx/details/TxInfo.tsx
index f038a278a8..e66fa99808 100644
--- a/ui/tx/details/TxInfo.tsx
+++ b/ui/tx/details/TxInfo.tsx
@@ -10,11 +10,13 @@ import {
   chakra,
   useColorModeValue,
   Skeleton,
+  HStack,
 } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 import { scroller, Element } from 'react-scroll';
 
+import { ARBITRUM_L2_TX_BATCH_STATUSES } from 'types/api/arbitrumL2';
 import type { Transaction } from 'types/api/transaction';
 import { ZKEVM_L2_TX_STATUSES } from 'types/api/transaction';
 import { ZKSYNC_L2_TX_BATCH_STATUSES } from 'types/api/zkSyncL2';
@@ -23,26 +25,31 @@ import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import { WEI, WEI_IN_GWEI } from 'lib/consts';
+import getArbitrumVerificationStepStatus from 'lib/getArbitrumVerificationStepStatus';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
+import { MESSAGE_DESCRIPTIONS } from 'lib/tx/arbitrumMessageStatusDescription';
 import getConfirmationDuration from 'lib/tx/getConfirmationDuration';
 import { currencyUnits } from 'lib/units';
 import Tag from 'ui/shared/chakra/Tag';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import CurrencyValue from 'ui/shared/CurrencyValue';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
 import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
 import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+import Hint from 'ui/shared/Hint';
 import IconSvg from 'ui/shared/IconSvg';
 import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
 import RawInputData from 'ui/shared/RawInputData';
+import StatusTag from 'ui/shared/statusTag/StatusTag';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
 import TextSeparator from 'ui/shared/TextSeparator';
-import TxFeeStability from 'ui/shared/tx/TxFeeStability';
+import TxFee from 'ui/shared/tx/TxFee';
 import Utilization from 'ui/shared/Utilization/Utilization';
 import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps';
 import TxDetailsActions from 'ui/tx/details/txDetailsActions/TxDetailsActions';
@@ -77,6 +84,14 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
   }, []);
   const executionSuccessIconColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
 
+  const showAssociatedL1Tx = React.useCallback(() => {
+    setIsExpanded(true);
+    scroller.scrollTo('TxInfo__cutLink', {
+      duration: 500,
+      smooth: true,
+    });
+  }, []);
+
   if (!data) {
     return null;
   }
@@ -125,12 +140,14 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
           <TxSocketAlert status={ socketStatus }/>
         </GridItem>
       ) }
-      <DetailsInfoItem
-        title="Transaction hash"
+
+      <DetailsInfoItem.Label
         hint="Unique character string (TxID) assigned to every verified transaction"
-        flexWrap="nowrap"
         isLoading={ isLoading }
       >
+        Transaction hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value flexWrap="nowrap">
         { data.status === null && <Spinner mr={ 2 } size="sm" flexShrink={ 0 }/> }
         <Skeleton isLoaded={ !isLoading } overflow="hidden">
           <HashStringShortenDynamic hash={ data.hash }/>
@@ -143,75 +160,128 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
             <Box display="none" flexShrink={ 0 } id="meta-suites__tx-explorer-link"/>
           </>
         ) }
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title={
-          rollupFeature.isEnabled && (rollupFeature.type === 'zkEvm' || rollupFeature.type === 'zkSync') ?
-            'L2 status and method' :
-            'Status and method'
-        }
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Current transaction state: Success, Failed (Error), or Pending (In Process)"
         isLoading={ isLoading }
       >
+        {
+          rollupFeature.isEnabled && (rollupFeature.type === 'zkEvm' || rollupFeature.type === 'zkSync' || rollupFeature.type === 'arbitrum') ?
+            'L2 status and method' :
+            'Status and method'
+        }
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <TxStatus status={ data.status } errorText={ data.status === 'error' ? data.result : undefined } isLoading={ isLoading }/>
         { data.method && (
           <Tag colorScheme={ data.method === 'Multicall' ? 'teal' : 'gray' } isLoading={ isLoading } isTruncated ml={ 3 }>
             { data.method }
           </Tag>
         ) }
-      </DetailsInfoItem>
-      { rollupFeature.isEnabled && rollupFeature.type === 'optimistic' && data.op_withdrawals && data.op_withdrawals.length > 0 && (
-        <DetailsInfoItem
-          title="Withdrawal status"
-          hint="Detailed status progress of the transaction"
-        >
-          <Flex flexDir="column" rowGap={ 2 }>
-            { data.op_withdrawals.map((withdrawal) => (
-              <Box key={ withdrawal.nonce }>
-                <Box mb={ 2 }>
-                  <span>Nonce: </span>
-                  <chakra.span fontWeight={ 600 }>{ withdrawal.nonce }</chakra.span>
+        { data.arbitrum?.contains_message && (
+          <Skeleton isLoaded={ !isLoading } onClick={ showAssociatedL1Tx }>
+            <Link isTruncated ml={ 3 }>
+              { data.arbitrum?.contains_message === 'incoming' ? 'Incoming message' : 'Outgoing message' }
+            </Link>
+          </Skeleton>
+        ) }
+      </DetailsInfoItem.Value>
+
+      { rollupFeature.isEnabled && rollupFeature.type === 'optimistic' && data.op_withdrawals && data.op_withdrawals.length > 0 &&
+      !config.UI.views.tx.hiddenFields?.L1_status && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Detailed status progress of the transaction"
+          >
+            Withdrawal status
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Flex flexDir="column" rowGap={ 2 }>
+              { data.op_withdrawals.map((withdrawal) => (
+                <Box key={ withdrawal.nonce }>
+                  <Box mb={ 2 }>
+                    <span>Nonce: </span>
+                    <chakra.span fontWeight={ 600 }>{ withdrawal.nonce }</chakra.span>
+                  </Box>
+                  <TxDetailsWithdrawalStatus
+                    status={ withdrawal.status }
+                    l1TxHash={ withdrawal.l1_transaction_hash }
+                  />
                 </Box>
-                <TxDetailsWithdrawalStatus
-                  status={ withdrawal.status }
-                  l1TxHash={ withdrawal.l1_transaction_hash }
-                />
-              </Box>
-            )) }
-          </Flex>
-        </DetailsInfoItem>
+              )) }
+            </Flex>
+          </DetailsInfoItem.Value>
+        </>
       ) }
-      { data.zkevm_status && (
-        <DetailsInfoItem
-          title="Confirmation status"
-          hint="Status of the transaction confirmation path to L1"
-          isLoading={ isLoading }
-        >
-          <VerificationSteps currentStep={ data.zkevm_status } steps={ ZKEVM_L2_TX_STATUSES } isLoading={ isLoading }/>
-        </DetailsInfoItem>
+
+      { data.zkevm_status && !config.UI.views.tx.hiddenFields?.L1_status && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Status of the transaction confirmation path to L1"
+            isLoading={ isLoading }
+          >
+            Confirmation status
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <VerificationSteps currentStep={ data.zkevm_status } steps={ ZKEVM_L2_TX_STATUSES } isLoading={ isLoading }/>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { data.arbitrum?.status && !config.UI.views.tx.hiddenFields?.L1_status && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Status of the transaction confirmation path to L1"
+            isLoading={ isLoading }
+          >
+            L1 status
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <VerificationSteps
+              currentStep={ data.arbitrum.status }
+              currentStepPending={ getArbitrumVerificationStepStatus(data.arbitrum) === 'pending' }
+              steps={ ARBITRUM_L2_TX_BATCH_STATUSES }
+              isLoading={ isLoading }
+            />
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       { data.revert_reason && (
-        <DetailsInfoItem
-          title="Revert reason"
-          hint="The revert reason of the transaction"
-        >
-          <TxRevertReason { ...data.revert_reason }/>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="The revert reason of the transaction"
+          >
+            Revert reason
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <TxRevertReason { ...data.revert_reason }/>
+          </DetailsInfoItem.Value>
+        </>
       ) }
-      { data.zksync && (
-        <DetailsInfoItem
-          title="L1 status"
-          hint="Status is the short interpretation of the batch lifecycle"
-          isLoading={ isLoading }
-        >
-          <VerificationSteps steps={ ZKSYNC_L2_TX_BATCH_STATUSES } currentStep={ data.zksync.status } isLoading={ isLoading }/>
-        </DetailsInfoItem>
+
+      { data.zksync && !config.UI.views.tx.hiddenFields?.L1_status && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Status is the short interpretation of the batch lifecycle"
+            isLoading={ isLoading }
+          >
+            L1 status
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <VerificationSteps steps={ ZKSYNC_L2_TX_BATCH_STATUSES } currentStep={ data.zksync.status } isLoading={ isLoading }/>
+          </DetailsInfoItem.Value>
+        </>
       ) }
-      <DetailsInfoItem
-        title="Block"
+
+      <DetailsInfoItem.Label
         hint="Block number containing the transaction"
         isLoading={ isLoading }
       >
+        Block
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         { data.block === null ?
           <Text>Pending</Text> : (
             <BlockEntity
@@ -228,77 +298,116 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
             </Skeleton>
           </>
         ) }
-      </DetailsInfoItem>
-      { data.zkevm_batch_number && (
-        <DetailsInfoItem
-          title="Tx batch"
-          hint="Batch index for this transaction"
-          isLoading={ isLoading }
-        >
-          <BatchEntityL2
+      </DetailsInfoItem.Value>
+
+      { data.zkevm_batch_number && !config.UI.views.tx.hiddenFields?.batch && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Batch index for this transaction"
             isLoading={ isLoading }
-            number={ data.zkevm_batch_number }
-          />
-        </DetailsInfoItem>
-      ) }
-      { data.zksync && (
-        <DetailsInfoItem
-          title="Batch"
-          hint="Batch number"
-          isLoading={ isLoading }
-        >
-          { data.zksync.batch_number ? (
+          >
+            Tx batch
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
             <BatchEntityL2
               isLoading={ isLoading }
-              number={ data.zksync.batch_number }
+              number={ data.zkevm_batch_number }
             />
-          ) : <Skeleton isLoaded={ !isLoading }>Pending</Skeleton> }
-        </DetailsInfoItem>
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
+      { data.zksync && !config.UI.views.tx.hiddenFields?.batch && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Batch number"
+            isLoading={ isLoading }
+          >
+            Batch
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            { data.zksync.batch_number ? (
+              <BatchEntityL2
+                isLoading={ isLoading }
+                number={ data.zksync.batch_number }
+              />
+            ) : <Skeleton isLoaded={ !isLoading }>Pending</Skeleton> }
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { data.arbitrum && !config.UI.views.tx.hiddenFields?.batch && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Index of the batch containing this transaction"
+            isLoading={ isLoading }
+          >
+          Batch
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            { data.arbitrum.batch_number ?
+              <BatchEntityL2 isLoading={ isLoading } number={ data.arbitrum.batch_number }/> :
+              <Skeleton isLoaded={ !isLoading }>Pending</Skeleton> }
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
       { data.timestamp && (
-        <DetailsInfoItem
-          title="Timestamp"
-          hint="Date & time of transaction inclusion, including length of time for confirmation"
-          isLoading={ isLoading }
-        >
-          <DetailsTimestamp timestamp={ data.timestamp } isLoading={ isLoading }/>
-          { data.confirmation_duration && (
-            <>
-              <TextSeparator color="gray.500"/>
-              <Skeleton isLoaded={ !isLoading } color="text_secondary">
-                <span>{ getConfirmationDuration(data.confirmation_duration) }</span>
-              </Skeleton>
-            </>
-          ) }
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Date & time of transaction inclusion, including length of time for confirmation"
+            isLoading={ isLoading }
+          >
+            Timestamp
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <DetailsTimestamp timestamp={ data.timestamp } isLoading={ isLoading }/>
+            { data.confirmation_duration && (
+              <>
+                <TextSeparator color="gray.500"/>
+                <Skeleton isLoaded={ !isLoading } color="text_secondary">
+                  <span>{ getConfirmationDuration(data.confirmation_duration) }</span>
+                </Skeleton>
+              </>
+            ) }
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       { data.execution_node && (
-        <DetailsInfoItem
-          title="Kettle"
-          hint="Node that carried out the confidential computation"
-          isLoading={ isLoading }
-        >
-          <AddressEntity
-            address={ data.execution_node }
-            href={ route({ pathname: '/txs/kettle/[hash]', query: { hash: data.execution_node.hash } }) }
-          />
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Node that carried out the confidential computation"
+            isLoading={ isLoading }
+          >
+            Kettle
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <AddressEntity
+              address={ data.execution_node }
+              href={ route({ pathname: '/txs/kettle/[hash]', query: { hash: data.execution_node.hash } }) }
+            />
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       { data.allowed_peekers && data.allowed_peekers.length > 0 && (
         <TxAllowedPeekers items={ data.allowed_peekers }/>
       ) }
+
       <DetailsSponsoredItem isLoading={ isLoading }/>
 
       <DetailsInfoItemDivider/>
 
       <TxDetailsActions hash={ data.hash } actions={ data.actions } isTxDataLoading={ isLoading }/>
 
-      <DetailsInfoItem
-        title="From"
+      <DetailsInfoItem.Label
         hint="Address (external or contract) sending the transaction"
         isLoading={ isLoading }
-        columnGap={ 3 }
       >
+        From
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value columnGap={ 3 }>
         <AddressEntity
           address={ data.from }
           isLoading={ isLoading }
@@ -309,11 +418,15 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
             { addressFromTags }
           </Flex>
         ) }
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title={ data.to?.is_contract ? 'Interacted with contract' : 'To' }
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Address (external or contract) receiving the transaction"
         isLoading={ isLoading }
+      >
+        { data.to?.is_contract ? 'Interacted with contract' : 'To' }
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value
         flexWrap={{ base: 'wrap', lg: 'nowrap' }}
         columnGap={ 3 }
       >
@@ -350,172 +463,313 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
         ) : (
           <span>[ Contract creation ]</span>
         ) }
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
+
       { data.token_transfers && <TxDetailsTokenTransfers data={ data.token_transfers } txHash={ data.hash } isOverflow={ data.token_transfers_overflow }/> }
 
       <DetailsInfoItemDivider/>
 
+      { (data.arbitrum?.commitment_transaction.hash || data.arbitrum?.confirmation_transaction.hash) &&
+      (
+        <>
+          { data.arbitrum?.commitment_transaction.hash && (
+            <>
+              <DetailsInfoItem.Label
+                hint="L1 transaction containing this batch commitment"
+                isLoading={ isLoading }
+              >
+                Commitment tx
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <TxEntityL1 hash={ data.arbitrum?.commitment_transaction.hash } isLoading={ isLoading }/>
+                { data.arbitrum?.commitment_transaction.status === 'finalized' && <StatusTag type="ok" text="Finalized" ml={ 2 }/> }
+              </DetailsInfoItem.Value>
+            </>
+          ) }
+          { data.arbitrum?.confirmation_transaction.hash && (
+            <>
+              <DetailsInfoItem.Label
+                hint="L1 transaction containing confirmation of this batch"
+                isLoading={ isLoading }
+              >
+                Confirmation tx
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <TxEntityL1 hash={ data.arbitrum?.confirmation_transaction.hash } isLoading={ isLoading }/>
+                { data.arbitrum?.commitment_transaction.status === 'finalized' && <StatusTag type="ok" text="Finalized" ml={ 2 }/> }
+              </DetailsInfoItem.Value>
+            </>
+          ) }
+          <DetailsInfoItemDivider/>
+        </>
+      ) }
+
       { data.zkevm_sequence_hash && (
-        <DetailsInfoItem
-          title="Sequence tx hash"
-          flexWrap="nowrap"
+        <>
+          <DetailsInfoItem.Label
+            isLoading={ isLoading }
+          >
+            Sequence tx hash
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value flexWrap="nowrap">
+            <Skeleton isLoaded={ !isLoading } overflow="hidden">
+              <HashStringShortenDynamic hash={ data.zkevm_sequence_hash }/>
+            </Skeleton>
+            <CopyToClipboard text={ data.zkevm_sequence_hash } isLoading={ isLoading }/>
+          </DetailsInfoItem.Value>
+        </>
 
-          isLoading={ isLoading }
-        >
-          <Skeleton isLoaded={ !isLoading } overflow="hidden">
-            <HashStringShortenDynamic hash={ data.zkevm_sequence_hash }/>
-          </Skeleton>
-          <CopyToClipboard text={ data.zkevm_sequence_hash } isLoading={ isLoading }/>
-        </DetailsInfoItem>
       ) }
-      { data.zkevm_verify_hash && (
-        <DetailsInfoItem
-          title="Verify tx hash"
-          flexWrap="nowrap"
-          isLoading={ isLoading }
-        >
-          <Skeleton isLoaded={ !isLoading } overflow="hidden">
-
-            <HashStringShortenDynamic hash={ data.zkevm_verify_hash }/>
-          </Skeleton>
-          <CopyToClipboard text={ data.zkevm_verify_hash } isLoading={ isLoading }/>
 
-        </DetailsInfoItem>
+      { data.zkevm_verify_hash && (
+        <>
+          <DetailsInfoItem.Label
+            isLoading={ isLoading }
+          >
+        Verify tx hash
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value flexWrap="nowrap">
+            <Skeleton isLoaded={ !isLoading } overflow="hidden">
+              <HashStringShortenDynamic hash={ data.zkevm_verify_hash }/>
+            </Skeleton>
+            <CopyToClipboard text={ data.zkevm_verify_hash } isLoading={ isLoading }/>
+          </DetailsInfoItem.Value>
+        </>
       ) }
 
       { (data.zkevm_batch_number || data.zkevm_verify_hash) && <DetailsInfoItemDivider/> }
 
       { !config.UI.views.tx.hiddenFields?.value && (
-        <DetailsInfoItem
-          title="Value"
-          hint="Value sent in the native token (and USD) if applicable"
-          isLoading={ isLoading }
-        >
-          <CurrencyValue
-            value={ data.value }
-            currency={ currencyUnits.ether }
-            exchangeRate={ data.exchange_rate }
+        <>
+          <DetailsInfoItem.Label
+            hint="Value sent in the native token (and USD) if applicable"
             isLoading={ isLoading }
-            flexWrap="wrap"
-          />
-        </DetailsInfoItem>
+          >
+            Value
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <CurrencyValue
+              value={ data.value }
+              currency={ currencyUnits.ether }
+              exchangeRate={ data.exchange_rate }
+              isLoading={ isLoading }
+              flexWrap="wrap"
+            />
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       { !config.UI.views.tx.hiddenFields?.tx_fee && (
-        <DetailsInfoItem
-          title="Transaction fee"
-          hint={ data.blob_gas_used ? 'Transaction fee without blob fee' : 'Total transaction fee' }
-          isLoading={ isLoading }
-        >
-          { data.stability_fee ? (
-            <TxFeeStability data={ data.stability_fee } isLoading={ isLoading }/>
-          ) : (
+        <>
+          <DetailsInfoItem.Label
+            hint={ data.blob_gas_used ? 'Transaction fee without blob fee' : 'Total transaction fee' }
+            isLoading={ isLoading }
+          >
+            Transaction fee
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <TxFee tx={ data } isLoading={ isLoading } withUsd/>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Fee paid to the poster for L1 resources"
+            isLoading={ isLoading }
+          >
+            Poster fee
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
             <CurrencyValue
-              value={ data.fee.value }
-              currency={ config.UI.views.tx.hiddenFields?.fee_currency ? '' : currencyUnits.ether }
+              value={ data.arbitrum.poster_fee }
+              currency={ currencyUnits.ether }
               exchangeRate={ data.exchange_rate }
               flexWrap="wrap"
               isLoading={ isLoading }
             />
-          ) }
-        </DetailsInfoItem>
+          </DetailsInfoItem.Value>
+
+          <DetailsInfoItem.Label
+            hint="Fee paid to the network for L2 resources"
+            isLoading={ isLoading }
+          >
+            Network fee
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <CurrencyValue
+              value={ data.arbitrum.network_fee }
+              currency={ currencyUnits.ether }
+              exchangeRate={ data.exchange_rate }
+              flexWrap="wrap"
+              isLoading={ isLoading }
+            />
+          </DetailsInfoItem.Value>
+        </>
       ) }
 
-      <TxDetailsGasPrice gasPrice={ data.gas_price } isLoading={ isLoading }/>
+      <TxDetailsGasPrice gasPrice={ data.gas_price } gasToken={ data.celo?.gas_token } isLoading={ isLoading }/>
 
       <TxDetailsFeePerGas txFee={ data.fee.value } gasUsed={ data.gas_used } isLoading={ isLoading }/>
 
-      <DetailsInfoItem
-        title="Gas usage & limit by txn"
+      <DetailsInfoItem.Label
         hint="Actual gas amount used by the transaction"
         isLoading={ isLoading }
       >
+        Gas usage & limit by txn
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isLoading }>{ BigNumber(data.gas_used || 0).toFormat() }</Skeleton>
         <TextSeparator/>
         <Skeleton isLoaded={ !isLoading }>{ BigNumber(data.gas_limit).toFormat() }</Skeleton>
         <Utilization ml={ 4 } value={ BigNumber(data.gas_used || 0).dividedBy(BigNumber(data.gas_limit)).toNumber() } isLoading={ isLoading }/>
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
+
+      { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && data.gas_used && (
+        <>
+          <DetailsInfoItem.Label
+            hint="L2 gas set aside for L1 data charges"
+            isLoading={ isLoading }
+          >
+            Gas used for L1
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !isLoading }>{ BigNumber(data.arbitrum.gas_used_for_l1 || 0).toFormat() }</Skeleton>
+            <TextSeparator/>
+            <Utilization
+              ml={ 4 }
+              value={ BigNumber(data.arbitrum.gas_used_for_l1 || 0).dividedBy(BigNumber(data.gas_used)).toNumber() }
+              isLoading={ isLoading }
+            />
+          </DetailsInfoItem.Value>
+
+          <DetailsInfoItem.Label
+            hint="L2 gas spent on L2 resources"
+            isLoading={ isLoading }
+          >
+            Gas used for L2
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !isLoading }>{ BigNumber(data.arbitrum.gas_used_for_l2 || 0).toFormat() }</Skeleton>
+            <TextSeparator/>
+            <Utilization
+              ml={ 4 }
+              value={ BigNumber(data.arbitrum.gas_used_for_l2 || 0).dividedBy(BigNumber(data.gas_used)).toNumber() }
+              isLoading={ isLoading }
+            />
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
       { !config.UI.views.tx.hiddenFields?.gas_fees &&
             (data.base_fee_per_gas || data.max_fee_per_gas || data.max_priority_fee_per_gas) && (
-        <DetailsInfoItem
-          title={ `Gas fees (${ currencyUnits.gwei })` }
-          // eslint-disable-next-line max-len
-          hint={ `
-                Base Fee refers to the network Base Fee at the time of the block, 
-                while Max Fee & Max Priority Fee refer to the max amount a user is willing to pay 
-                for their tx & to give to the ${ getNetworkValidatorTitle() } respectively
-              ` }
-          isLoading={ isLoading }
-        >
-          { data.base_fee_per_gas && (
-            <Skeleton isLoaded={ !isLoading }>
-              <Text as="span" fontWeight="500">Base: </Text>
-              <Text fontWeight="600" as="span">{ BigNumber(data.base_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
-              { (data.max_fee_per_gas || data.max_priority_fee_per_gas) && <TextSeparator/> }
-            </Skeleton>
-          ) }
-          { data.max_fee_per_gas && (
-            <Skeleton isLoaded={ !isLoading }>
-              <Text as="span" fontWeight="500">Max: </Text>
-              <Text fontWeight="600" as="span">{ BigNumber(data.max_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
-              { data.max_priority_fee_per_gas && <TextSeparator/> }
-            </Skeleton>
-          ) }
-          { data.max_priority_fee_per_gas && (
-            <Skeleton isLoaded={ !isLoading }>
-              <Text as="span" fontWeight="500">Max priority: </Text>
-              <Text fontWeight="600" as="span">{ BigNumber(data.max_priority_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
-            </Skeleton>
-          ) }
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            // eslint-disable-next-line max-len
+            hint={ `
+            Base Fee refers to the network Base Fee at the time of the block,
+            while Max Fee & Max Priority Fee refer to the max amount a user is willing to pay
+            for their tx & to give to the ${ getNetworkValidatorTitle() } respectively
+          ` }
+            isLoading={ isLoading }
+          >
+            { `Gas fees (${ currencyUnits.gwei })` }
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            { data.base_fee_per_gas && (
+              <Skeleton isLoaded={ !isLoading }>
+                <Text as="span" fontWeight="500">Base: </Text>
+                <Text fontWeight="600" as="span">{ BigNumber(data.base_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
+                { (data.max_fee_per_gas || data.max_priority_fee_per_gas) && <TextSeparator/> }
+              </Skeleton>
+            ) }
+            { data.max_fee_per_gas && (
+              <Skeleton isLoaded={ !isLoading }>
+                <Text as="span" fontWeight="500">Max: </Text>
+                <Text fontWeight="600" as="span">{ BigNumber(data.max_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
+                { data.max_priority_fee_per_gas && <TextSeparator/> }
+              </Skeleton>
+            ) }
+            { data.max_priority_fee_per_gas && (
+              <Skeleton isLoaded={ !isLoading }>
+                <Text as="span" fontWeight="500">Max priority: </Text>
+                <Text fontWeight="600" as="span">{ BigNumber(data.max_priority_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
+              </Skeleton>
+            ) }
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       <TxDetailsBurntFees data={ data } isLoading={ isLoading }/>
+
       { rollupFeature.isEnabled && rollupFeature.type === 'optimistic' && (
         <>
           { data.l1_gas_used && (
-            <DetailsInfoItem
-              title="L1 gas used by txn"
-              hint="L1 gas used by transaction"
-              isLoading={ isLoading }
-            >
-              <Text>{ BigNumber(data.l1_gas_used).toFormat() }</Text>
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="L1 gas used by transaction"
+                isLoading={ isLoading }
+              >
+                L1 gas used by txn
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <Text>{ BigNumber(data.l1_gas_used).toFormat() }</Text>
+              </DetailsInfoItem.Value>
+            </>
           ) }
+
           { data.l1_gas_price && (
-            <DetailsInfoItem
-              title="L1 gas price"
-              hint="L1 gas price"
-              isLoading={ isLoading }
-            >
-              <Text mr={ 1 }>{ BigNumber(data.l1_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether }</Text>
-              <Text variant="secondary">({ BigNumber(data.l1_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</Text>
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="L1 gas price"
+                isLoading={ isLoading }
+              >
+                L1 gas price
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <Text mr={ 1 }>{ BigNumber(data.l1_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether }</Text>
+                <Text variant="secondary">({ BigNumber(data.l1_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</Text>
+              </DetailsInfoItem.Value>
+            </>
           ) }
+
           { data.l1_fee && (
-            <DetailsInfoItem
-              title="L1 fee"
-              // eslint-disable-next-line max-len
-              hint={ `L1 Data Fee which is used to cover the L1 "security" cost from the batch submission mechanism. In combination with L2 execution fee, L1 fee makes the total amount of fees that a transaction pays.` }
-              isLoading={ isLoading }
-            >
-              <CurrencyValue
-                value={ data.l1_fee }
-                currency={ currencyUnits.ether }
-                exchangeRate={ data.exchange_rate }
-                flexWrap="wrap"
-              />
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                // eslint-disable-next-line max-len
+                hint={ `L1 Data Fee which is used to cover the L1 "security" cost from the batch submission mechanism. In combination with L2 execution fee, L1 fee makes the total amount of fees that a transaction pays.` }
+                isLoading={ isLoading }
+              >
+                L1 fee
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <CurrencyValue
+                  value={ data.l1_fee }
+                  currency={ currencyUnits.ether }
+                  exchangeRate={ data.exchange_rate }
+                  flexWrap="wrap"
+                />
+              </DetailsInfoItem.Value>
+            </>
           ) }
+
           { data.l1_fee_scalar && (
-            <DetailsInfoItem
-              title="L1 fee scalar"
-              hint="A Dynamic overhead (fee scalar) premium, which serves as a buffer in case L1 prices rapidly increase."
-              isLoading={ isLoading }
-            >
-              <Text>{ data.l1_fee_scalar }</Text>
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="A Dynamic overhead (fee scalar) premium, which serves as a buffer in case L1 prices rapidly increase."
+                isLoading={ isLoading }
+              >
+                L1 fee scalar
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <Text>{ data.l1_fee_scalar }</Text>
+              </DetailsInfoItem.Value>
+            </>
           ) }
         </>
       ) }
+
       <GridItem colSpan={{ base: undefined, lg: 2 }}>
         <Element name="TxInfo__cutLink">
           <Skeleton isLoaded={ !isLoading } mt={ 6 } display="inline-block">
@@ -531,68 +785,117 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
           </Skeleton>
         </Element>
       </GridItem>
+
       { isExpanded && (
         <>
           <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
+
+          { data.arbitrum?.contains_message && data.arbitrum?.message_related_info && (
+            <>
+              <DetailsInfoItem.Label
+                hint={ data.arbitrum.contains_message === 'incoming' ?
+                  'The hash of the transaction that originated the message from the base layer' :
+                  'The hash of the transaction that completed the message on the base layer'
+                }
+              >
+                { data.arbitrum.contains_message === 'incoming' ? 'Originating L1 txn hash' : 'Completion L1 txn hash' }
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                { data.arbitrum.message_related_info.associated_l1_transaction ?
+                  <TxEntityL1 hash={ data.arbitrum.message_related_info.associated_l1_transaction }/> : (
+                    <HStack gap={ 2 }>
+                      <Text color="text_secondary">{ data.arbitrum.message_related_info.message_status }</Text>
+                      <Hint label={ MESSAGE_DESCRIPTIONS[data.arbitrum.message_related_info.message_status] }/>
+                    </HStack>
+                  )
+                }
+              </DetailsInfoItem.Value>
+            </>
+          ) }
+
           { (data.blob_gas_used || data.max_fee_per_blob_gas || data.blob_gas_price) && (
             <>
               { data.blob_gas_used && data.blob_gas_price && (
-                <DetailsInfoItem
-                  title="Blob fee"
-                  hint="Blob fee for this transaction"
-                >
-                  <CurrencyValue
-                    value={ BigNumber(data.blob_gas_used).multipliedBy(data.blob_gas_price).toString() }
-                    currency={ config.UI.views.tx.hiddenFields?.fee_currency ? '' : currencyUnits.ether }
-                    exchangeRate={ data.exchange_rate }
-                    flexWrap="wrap"
-                    isLoading={ isLoading }
-                  />
-                </DetailsInfoItem>
+                <>
+                  <DetailsInfoItem.Label
+                    hint="Blob fee for this transaction"
+                  >
+                    Blob fee
+                  </DetailsInfoItem.Label>
+                  <DetailsInfoItem.Value>
+                    <CurrencyValue
+                      value={ BigNumber(data.blob_gas_used).multipliedBy(data.blob_gas_price).toString() }
+                      currency={ config.UI.views.tx.hiddenFields?.fee_currency ? '' : currencyUnits.ether }
+                      exchangeRate={ data.exchange_rate }
+                      flexWrap="wrap"
+                      isLoading={ isLoading }
+                    />
+                  </DetailsInfoItem.Value>
+                </>
               ) }
+
               { data.blob_gas_used && (
-                <DetailsInfoItem
-                  title="Blob gas usage"
-                  hint="Amount of gas used by the blobs in this transaction"
-                >
-                  { BigNumber(data.blob_gas_used).toFormat() }
-                </DetailsInfoItem>
+                <>
+                  <DetailsInfoItem.Label
+                    hint="Amount of gas used by the blobs in this transaction"
+                  >
+                    Blob gas usage
+                  </DetailsInfoItem.Label>
+                  <DetailsInfoItem.Value>
+                    { BigNumber(data.blob_gas_used).toFormat() }
+                  </DetailsInfoItem.Value>
+                </>
               ) }
+
               { (data.max_fee_per_blob_gas || data.blob_gas_price) && (
-                <DetailsInfoItem
-                  title={ `Blob gas fees (${ currencyUnits.gwei })` }
-                  hint={ `Amount of ${ currencyUnits.ether } used for blobs in this transaction` }
-                >
-                  { data.blob_gas_price && (
-                    <Text fontWeight="600" as="span">{ BigNumber(data.blob_gas_price).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
-                  ) }
-                  { (data.max_fee_per_blob_gas && data.blob_gas_price) && <TextSeparator/> }
-                  { data.max_fee_per_blob_gas && (
-                    <>
-                      <Text as="span" fontWeight="500" whiteSpace="pre">Max: </Text>
-                      <Text fontWeight="600" as="span">{ BigNumber(data.max_fee_per_blob_gas).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
-                    </>
-                  ) }
-                </DetailsInfoItem>
+                <>
+                  <DetailsInfoItem.Label
+                    hint={ `Amount of ${ currencyUnits.ether } used for blobs in this transaction` }
+                  >
+                    { `Blob gas fees (${ currencyUnits.gwei })` }
+                  </DetailsInfoItem.Label>
+                  <DetailsInfoItem.Value>
+                    { data.blob_gas_price && (
+                      <Text fontWeight="600" as="span">{ BigNumber(data.blob_gas_price).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
+                    ) }
+                    { (data.max_fee_per_blob_gas && data.blob_gas_price) && <TextSeparator/> }
+                    { data.max_fee_per_blob_gas && (
+                      <>
+                        <Text as="span" fontWeight="500" whiteSpace="pre">Max: </Text>
+                        <Text fontWeight="600" as="span">{ BigNumber(data.max_fee_per_blob_gas).dividedBy(WEI_IN_GWEI).toFixed() }</Text>
+                      </>
+                    ) }
+                  </DetailsInfoItem.Value>
+                </>
               ) }
               <DetailsInfoItemDivider/>
             </>
           ) }
+
           <TxDetailsOther nonce={ data.nonce } type={ data.type } position={ data.position }/>
-          <DetailsInfoItem
-            title="Raw input"
+
+          <DetailsInfoItem.Label
             hint="Binary data included with the transaction. See logs tab for additional info"
           >
+            Raw input
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
             <RawInputData hex={ data.raw_input }/>
-          </DetailsInfoItem>
+          </DetailsInfoItem.Value>
+
           { data.decoded_input && (
-            <DetailsInfoItem
-              title="Decoded input data"
-              hint="Decoded input data"
-            >
-              <LogDecodedInputData data={ data.decoded_input }/>
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="Decoded input data"
+              >
+                Decoded input data
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <LogDecodedInputData data={ data.decoded_input }/>
+              </DetailsInfoItem.Value>
+            </>
           ) }
+
           { data.zksync && <ZkSyncL2TxnBatchHashesInfo data={ data.zksync } isLoading={ isLoading }/> }
         </>
       ) }
diff --git a/ui/tx/details/txDetailsActions/TxDetailsAction.tsx b/ui/tx/details/txDetailsActions/TxDetailsAction.tsx
index 0c53d1570d..4189133a5a 100644
--- a/ui/tx/details/txDetailsActions/TxDetailsAction.tsx
+++ b/ui/tx/details/txDetailsActions/TxDetailsAction.tsx
@@ -41,14 +41,14 @@ const TxDetailsAction = ({ action }: Props) => {
       const token0 = {
         address: data.symbol0 === 'Ether' ? '' : data.address0,
         name: data.symbol0 === 'Ether' ? config.chain.currency.symbol || null : data.symbol0,
-        type: 'ERC-20',
+        type: 'ERC-20' as const,
         symbol: null,
         icon_url: null,
       };
       const token1 = {
         address: data.symbol1 === 'Ether' ? '' : data.address1,
         name: data.symbol1 === 'Ether' ? config.chain.currency.symbol || null : data.symbol1,
-        type: 'ERC-20',
+        type: 'ERC-20' as const,
         symbol: null,
         icon_url: null,
       };
@@ -99,7 +99,7 @@ const TxDetailsAction = ({ action }: Props) => {
       const token = {
         address: data.address,
         name: data.name,
-        type: 'ERC-20',
+        type: 'ERC-20' as const,
         symbol: null,
         icon_url: null,
       };
@@ -133,7 +133,7 @@ const TxDetailsAction = ({ action }: Props) => {
                   <Flex key={ data.address + id } whiteSpace="pre-wrap" columnGap={ 2 }>
                     <chakra.span flexShrink={ 0 }>1</chakra.span>
                     <chakra.span color="text_secondary" flexShrink={ 0 }>of token ID</chakra.span>
-                    <NftEntity hash={ data.address } id={ id } w="min-content" iconSize="md"/>
+                    <NftEntity hash={ data.address } id={ id } w="min-content" icon={{ size: 'md' }}/>
                   </Flex>
                 );
               })
diff --git a/ui/tx/internals/TxInternalsList.tsx b/ui/tx/internals/TxInternalsList.tsx
index f756c12eab..b057015525 100644
--- a/ui/tx/internals/TxInternalsList.tsx
+++ b/ui/tx/internals/TxInternalsList.tsx
@@ -8,7 +8,7 @@ import TxInternalsListItem from 'ui/tx/internals/TxInternalsListItem';
 const TxInternalsList = ({ data, isLoading }: { data: Array<InternalTransaction>; isLoading?: boolean }) => {
   return (
     <Box>
-      { data.map((item, index) => <TxInternalsListItem key={ item.transaction_hash + (isLoading ? index : '') } { ...item } isLoading={ isLoading }/>) }
+      { data.map((item, index) => <TxInternalsListItem key={ item.index.toString() + (isLoading ? index : '') } { ...item } isLoading={ isLoading }/>) }
     </Box>
   );
 };
diff --git a/ui/tx/internals/TxInternalsTable.tsx b/ui/tx/internals/TxInternalsTable.tsx
index 4dba5af613..aeb8ce7e48 100644
--- a/ui/tx/internals/TxInternalsTable.tsx
+++ b/ui/tx/internals/TxInternalsTable.tsx
@@ -37,14 +37,14 @@ const TxInternalsTable = ({ data, sort, onSortToggle, top, isLoading }: Props) =
             <Th width="16%" isNumeric>
               <Link display="flex" alignItems="center" justifyContent="flex-end" onClick={ onSortToggle('gas-limit') } columnGap={ 1 }>
                 { sort?.includes('gas-limit') && <IconSvg name="arrows/east" boxSize={ 4 } transform={ sortIconTransform }/> }
-                Gas limit
+                Gas limit { currencyUnits.ether }
               </Link>
             </Th>
           </Tr>
         </Thead>
         <Tbody>
           { data.map((item, index) => (
-            <TxInternalsTableItem key={ item.transaction_hash + (isLoading ? index : '') } { ...item } isLoading={ isLoading }/>
+            <TxInternalsTableItem key={ item.index.toString() + (isLoading ? index : '') } { ...item } isLoading={ isLoading }/>
           )) }
         </Tbody>
       </Table>
diff --git a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetails.tsx b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetails.tsx
new file mode 100644
index 0000000000..9b1823deb4
--- /dev/null
+++ b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetails.tsx
@@ -0,0 +1,235 @@
+import { Grid, GridItem, Link, Skeleton } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+import React from 'react';
+import { scroller, Element } from 'react-scroll';
+
+import type { ArbitrumL2TxnBatch } from 'types/api/arbitrumL2';
+
+import { route } from 'nextjs-routes';
+
+import type { ResourceError } from 'lib/api/resources';
+import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
+import ArbitrumL2TxnBatchDA from 'ui/shared/batch/ArbitrumL2TxnBatchDA';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import PrevNext from 'ui/shared/PrevNext';
+
+import ArbitrumL2TxnBatchDetailsDA from './ArbitrumL2TxnBatchDetailsDA';
+interface Props {
+  query: UseQueryResult<ArbitrumL2TxnBatch, ResourceError>;
+}
+
+const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
+  const router = useRouter();
+  const [ isExpanded, setIsExpanded ] = React.useState(false);
+
+  const handleCutClick = React.useCallback(() => {
+    setIsExpanded((flag) => !flag);
+    scroller.scrollTo('BatchDetails__cutLink', {
+      duration: 500,
+      smooth: true,
+    });
+  }, []);
+
+  const { data, isPlaceholderData, isError, error } = query;
+
+  const handlePrevNextClick = React.useCallback((direction: 'prev' | 'next') => {
+    if (!data) {
+      return;
+    }
+
+    const increment = direction === 'next' ? +1 : -1;
+    const nextId = String(data.number + increment);
+
+    router.push({ pathname: '/batches/[number]', query: { number: nextId } }, undefined);
+  }, [ data, router ]);
+
+  if (isError) {
+    if (isCustomAppError(error)) {
+      throwOnResourceLoadError({ isError, error });
+    }
+
+    return <DataFetchAlert/>;
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  const blocksCount = data.end_block - data.start_block + 1;
+
+  return (
+    <Grid
+      columnGap={ 8 }
+      rowGap={{ base: 3, lg: 3 }}
+      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
+      overflow="hidden"
+    >
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Batch number indicates the length of batches produced by grouping L2 blocks to be proven on L1"
+      >
+        Tx batch number
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          { data.number }
+        </Skeleton>
+        <PrevNext
+          ml={ 6 }
+          onClick={ handlePrevNextClick }
+          prevLabel="View previous tx batch"
+          nextLabel="View next tx batch"
+          isPrevDisabled={ data.number === 0 }
+          isLoading={ isPlaceholderData }
+        />
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Date and time at which batch is submitted to L1"
+      >
+        Timestamp
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        { data.commitment_transaction.timestamp ?
+          <DetailsTimestamp timestamp={ data.commitment_transaction.timestamp }isLoading={ isPlaceholderData }/> :
+          'Undefined'
+        }
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Number of transactions in this batch"
+      >
+        Transactions
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
+            { data.transactions_count.toLocaleString() } transaction{ data.transactions_count === 1 ? '' : 's' }
+          </LinkInternal>
+        </Skeleton>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Number of L2 blocks in this batch"
+      >
+        Blocks
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'blocks' } }) }>
+            { blocksCount.toLocaleString() } block{ blocksCount === 1 ? '' : 's' }
+          </LinkInternal>
+        </Skeleton>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Hash of L1 transaction in which transactions was committed"
+      >
+        L1 transaction hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <TxEntityL1
+          isLoading={ isPlaceholderData }
+          hash={ data.commitment_transaction.hash }
+          maxW="100%"
+        />
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Heigh of L1 block which includes L1 transactions"
+      >
+        L1 block
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <BlockEntityL1
+          isLoading={ isPlaceholderData }
+          number={ data.commitment_transaction.block_number }
+        />
+      </DetailsInfoItem.Value>
+
+      { data.data_availability.batch_data_container && (
+        <>
+          <DetailsInfoItem.Label
+            isLoading={ isPlaceholderData }
+            hint="Where the batch data is stored"
+          >
+            Batch data container
+          </DetailsInfoItem.Label><DetailsInfoItem.Value>
+            <ArbitrumL2TxnBatchDA dataContainer={ data.data_availability.batch_data_container } isLoading={ isPlaceholderData }/>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="The hash of the state before the batch"
+      >
+        Before acc
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
+          <HashStringShortenDynamic hash={ data.before_acc }/>
+          <CopyToClipboard text={ data.before_acc }/>
+        </Skeleton>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="The hash of the state after the batch"
+      >
+        After acc
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
+          <HashStringShortenDynamic hash={ data.after_acc }/>
+          <CopyToClipboard text={ data.after_acc }/>
+        </Skeleton>
+      </DetailsInfoItem.Value>
+
+      { data.data_availability.batch_data_container === 'in_anytrust' && (
+        <>
+          { /* CUT */ }
+          <GridItem colSpan={{ base: undefined, lg: 2 }}>
+            <Element name="BatchDetails__cutLink">
+              <Skeleton isLoaded={ !isPlaceholderData } mt={ 6 } display="inline-block">
+                <Link
+                  fontSize="sm"
+                  textDecorationLine="underline"
+                  textDecorationStyle="dashed"
+                  onClick={ handleCutClick }
+                >
+                  { isExpanded ? 'Hide data availability info' : 'Show data availability info' }
+                </Link>
+              </Skeleton>
+            </Element>
+          </GridItem>
+
+          { /* ADDITIONAL INFO */ }
+          { isExpanded && !isPlaceholderData && (
+            <>
+              <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
+
+              <ArbitrumL2TxnBatchDetailsDA dataAvailability={ data.data_availability }/>
+            </>
+          ) }
+        </>
+      ) }
+    </Grid>
+  );
+};
+
+export default ArbitrumL2TxnBatchDetails;
diff --git a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetailsDA.tsx b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetailsDA.tsx
new file mode 100644
index 0000000000..9a96e2e766
--- /dev/null
+++ b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetailsDA.tsx
@@ -0,0 +1,122 @@
+import { Grid, Text, Flex, Box, useColorModeValue, Show, Hide, VStack } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ArbitrumL2TxnBatchDAAnytrust } from 'types/api/arbitrumL2';
+
+import dayjs from 'lib/date/dayjs';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
+import HashStringShorten from 'ui/shared/HashStringShorten';
+import IconSvg from 'ui/shared/IconSvg';
+import TextSeparator from 'ui/shared/TextSeparator';
+
+type Props = {
+  dataAvailability: ArbitrumL2TxnBatchDAAnytrust;
+}
+
+const ArbitrumL2TxnBatchDetailsDA = ({ dataAvailability }: Props) => {
+  const signersBg = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  return (
+    <>
+      <DetailsInfoItem.Label
+        hint="Aggregated BLS signature of AnyTrust committee members"
+      >
+      Signature
+      </DetailsInfoItem.Label><DetailsInfoItem.Value wordBreak="break-all" whiteSpace="break-spaces">
+        { dataAvailability.bls_signature }
+      </DetailsInfoItem.Value><DetailsInfoItem.Label
+        hint="The hash of the data blob stored by the AnyTrust committee"
+      >
+        Data hash
+      </DetailsInfoItem.Label><DetailsInfoItem.Value>
+        { dataAvailability.data_hash }
+        <CopyToClipboard text={ dataAvailability.data_hash } ml={ 2 }/>
+      </DetailsInfoItem.Value><DetailsInfoItem.Label
+        hint="Expiration timeout for the data blob"
+      >
+        Timeout
+      </DetailsInfoItem.Label><DetailsInfoItem.Value>
+        { dayjs(dataAvailability.timeout) < dayjs() ?
+          <DetailsTimestamp timestamp={ dataAvailability.timeout }/> :
+          (
+            <>
+              <Text>{ dayjs(dataAvailability.timeout).format('llll') }</Text>
+              <TextSeparator color="gray.500"/>
+              <Text color="red.500">{ dayjs(dataAvailability.timeout).diff(dayjs(), 'day') } days left</Text>
+            </>
+          ) }
+      </DetailsInfoItem.Value>
+      <DetailsInfoItem.Label
+        hint="Members of AnyTrust committee"
+      >
+        Signers
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value overflowX="scroll" fontSize="sm">
+        <Show above="lg" ssr={ false }>
+          <Grid
+            templateColumns="1fr auto auto"
+            gap={ 5 }
+            backgroundColor={ signersBg }
+            padding={ 4 }
+            borderRadius="md"
+            minW="600px"
+          >
+            <Text fontWeight={ 600 }>Key</Text>
+            <Text fontWeight={ 600 }>Trusted</Text>
+            <Text fontWeight={ 600 }>Proof</Text>
+            { dataAvailability.signers.map(signer => (
+              <>
+                <Flex justifyContent="space-between">
+                  <Text wordBreak="break-all" whiteSpace="break-spaces">{ signer.key }</Text>
+                  <CopyToClipboard text={ signer.key } ml={ 2 }/>
+                </Flex>
+                <Box justifySelf="center">
+                  { signer.trusted ? <IconSvg name="check" boxSize={ 6 }/> : <IconSvg name="cross" boxSize={ 6 }/> }
+                </Box>
+                { signer.proof ? (
+                  <Flex>
+                    <HashStringShorten hash={ signer.proof }/>
+                    <CopyToClipboard text={ signer.proof } ml={ 2 }/>
+                  </Flex>
+                ) : '-' }
+              </>
+            )) }
+          </Grid>
+        </Show>
+
+        <Hide above="lg" ssr={ false }>
+          <Box backgroundColor={ signersBg } borderRadius="md">
+            { dataAvailability.signers.map(signer => (
+              <VStack padding={ 4 } key={ signer.key } gap={ 2 }>
+                <Flex w="100%" justifyContent="space-between">
+                  <Text fontWeight={ 600 }>Key</Text>
+                  <CopyToClipboard text={ signer.key }/>
+                </Flex>
+                <Text wordBreak="break-all" whiteSpace="break-spaces">{ signer.key }</Text>
+                <Flex w="100%" alignItems="center">
+                  <Flex alignItems="center" w="50%">
+                    <Text fontWeight={ 600 } mr={ 2 }>Trusted</Text>
+                    { signer.trusted ? <IconSvg name="check" boxSize={ 6 }/> : <IconSvg name="cross" boxSize={ 6 }/> }
+                  </Flex>
+                  <Flex alignItems="center" w="50%">
+                    <Text fontWeight={ 600 } mr={ 2 }>Proof</Text>
+                    { signer.proof ? (
+                      <Flex>
+                        <HashStringShorten hash={ signer.proof }/>
+                        <CopyToClipboard text={ signer.proof } ml={ 2 }/>
+                      </Flex>
+                    ) : '-' }
+                  </Flex>
+                </Flex>
+              </VStack>
+            )) }
+          </Box>
+        </Hide>
+      </DetailsInfoItem.Value>
+    </>
+  );
+};
+
+export default ArbitrumL2TxnBatchDetailsDA;
diff --git a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesListItem.tsx b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesListItem.tsx
new file mode 100644
index 0000000000..21fc5fe04a
--- /dev/null
+++ b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesListItem.tsx
@@ -0,0 +1,108 @@
+import { Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import ArbitrumL2TxnBatchDA from 'ui/shared/batch/ArbitrumL2TxnBatchDA';
+import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import ArbitrumL2TxnBatchStatus from 'ui/shared/statusTag/ArbitrumL2TxnBatchStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: ArbitrumL2TxnBatchesItem; isLoading?: boolean };
+
+const ArbitrumL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'arbitrum') {
+    return null;
+  }
+
+  return (
+    <ListItemMobileGrid.Container gridTemplateColumns="110px auto">
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Batch #</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BatchEntityL2
+          isLoading={ isLoading }
+          number={ item.number }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 status</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <ArbitrumL2TxnBatchStatus status={ item.commitment_transaction.status } isLoading={ isLoading }/>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 block</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BlockEntityL1
+          number={ item.commitment_transaction.block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+        />
+      </ListItemMobileGrid.Value>
+
+      { item.blocks_count && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>Block count</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value>
+            <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.blocks_count.toLocaleString() }</Skeleton>
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 transaction</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TxEntityL1
+          hash={ item.commitment_transaction.hash }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TimeAgoWithTooltip
+          timestamp={ item.commitment_transaction.timestamp }
+          fallbackText="Undefined"
+          isLoading={ isLoading }
+          display="inline-block"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Txn count</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <LinkInternal
+          href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
+          isLoading={ isLoading }
+          fontWeight={ 600 }
+        >
+          <Skeleton isLoaded={ !isLoading } minW="40px">
+            { item.transactions_count.toLocaleString() }
+          </Skeleton>
+        </LinkInternal>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Data container</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <ArbitrumL2TxnBatchDA dataContainer={ item.batch_data_container } isLoading={ isLoading }/>
+      </ListItemMobileGrid.Value>
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default ArbitrumL2TxnBatchesListItem;
diff --git a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTable.tsx b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTable.tsx
new file mode 100644
index 0000000000..a3abae3c37
--- /dev/null
+++ b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTable.tsx
@@ -0,0 +1,43 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import ArbitrumL2TxnBatchesTableItem from './ArbitrumL2TxnBatchesTableItem';
+
+type Props = {
+  items: Array<ArbitrumL2TxnBatchesItem>;
+  top: number;
+  isLoading?: boolean;
+}
+
+const ArbitrumL2TxnBatchesTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table variant="simple" size="sm" minW="1000px" style={{ tableLayout: 'auto' }}>
+      <Thead top={ top }>
+        <Tr>
+          <Th>Batch #</Th>
+          <Th>L1 status</Th>
+          <Th>L1 block</Th>
+          <Th>Block count</Th>
+          <Th>L1 transaction</Th>
+          <Th>Age</Th>
+          <Th>Txn count</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <ArbitrumL2TxnBatchesTableItem
+            key={ item.number + (isLoading ? String(index) : '') }
+            item={ item }
+            isLoading={ isLoading }
+          />
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default ArbitrumL2TxnBatchesTable;
diff --git a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTableItem.tsx b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTableItem.tsx
new file mode 100644
index 0000000000..f57825e855
--- /dev/null
+++ b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTableItem.tsx
@@ -0,0 +1,86 @@
+import { Td, Tr, Skeleton, HStack } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import ArbitrumL2TxnBatchDA from 'ui/shared/batch/ArbitrumL2TxnBatchDA';
+import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import ArbitrumL2TxnBatchStatus from 'ui/shared/statusTag/ArbitrumL2TxnBatchStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: ArbitrumL2TxnBatchesItem; isLoading?: boolean };
+
+const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'arbitrum') {
+    return null;
+  }
+
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <BatchEntityL2
+          isLoading={ isLoading }
+          number={ item.number }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+          noIcon
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <HStack gap={ 1 }>
+          <ArbitrumL2TxnBatchStatus status={ item.commitment_transaction.status } isLoading={ isLoading }/>
+          <ArbitrumL2TxnBatchDA dataContainer={ item.batch_data_container } isLoading={ isLoading }/>
+        </HStack>
+      </Td>
+      <Td verticalAlign="middle">
+        <BlockEntityL1
+          number={ item.commitment_transaction.block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.blocks_count ? item.blocks_count.toLocaleString() : 'N/A' }</Skeleton>
+      </Td>
+      <Td pr={ 12 } verticalAlign="middle">
+        <TxEntityL1
+          hash={ item.commitment_transaction.hash }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <TimeAgoWithTooltip
+          timestamp={ item.commitment_transaction.timestamp }
+          fallbackText="Undefined"
+          isLoading={ isLoading }
+          color="text_secondary"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <LinkInternal
+          href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
+          isLoading={ isLoading }
+        >
+          <Skeleton isLoaded={ !isLoading } minW="40px">
+            { item.transactions_count.toLocaleString() }
+          </Skeleton>
+        </LinkInternal>
+      </Td>
+    </Tr>
+  );
+};
+
+export default TxnBatchesTableItem;
diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCallData.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCallData.tsx
new file mode 100644
index 0000000000..b5d0c36c0c
--- /dev/null
+++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCallData.tsx
@@ -0,0 +1,31 @@
+import { GridItem } from '@chakra-ui/react';
+import React from 'react';
+
+import dayjs from 'lib/date/dayjs';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+
+import OptimisticL2TxnBatchBlobWrapper from './OptimisticL2TxnBatchBlobWrapper';
+
+interface Props {
+  l1TxHashes: Array<string>;
+  l1Timestamp: string;
+  isLoading: boolean;
+}
+
+const OptimisticL2TxnBatchBlobCallData = ({ l1TxHashes, l1Timestamp, isLoading }: Props) => {
+  return (
+    <OptimisticL2TxnBatchBlobWrapper isLoading={ isLoading }>
+      <GridItem fontWeight={ 600 }>Timestamp</GridItem>
+      <GridItem whiteSpace="normal">
+        { dayjs(l1Timestamp).fromNow() } | { dayjs(l1Timestamp).format('llll') }
+      </GridItem>
+      <GridItem fontWeight={ 600 }>L1 txn hash{ l1TxHashes.length > 1 ? 'es' : '' }</GridItem>
+      <GridItem overflow="hidden" display="flex" flexDir="column" rowGap={ 2 }>
+        { l1TxHashes.map((hash) => <TxEntityL1 key={ hash } hash={ hash } noIcon noCopy={ false }/>) }
+      </GridItem>
+    </OptimisticL2TxnBatchBlobWrapper>
+
+  );
+};
+
+export default React.memo(OptimisticL2TxnBatchBlobCallData);
diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCelestia.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCelestia.tsx
new file mode 100644
index 0000000000..102160536b
--- /dev/null
+++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCelestia.tsx
@@ -0,0 +1,70 @@
+import { Flex, GridItem, Icon, VStack } from '@chakra-ui/react';
+import React from 'react';
+
+import type { OptimisticL2BlobTypeCelestia } from 'types/api/optimisticL2';
+
+// This icon doesn't work properly when it is in the sprite
+// Probably because of the gradient
+// eslint-disable-next-line no-restricted-imports
+import celeniumIcon from 'icons/brands/celenium.svg';
+import dayjs from 'lib/date/dayjs';
+import hexToBase64 from 'lib/hexToBase64';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+
+import OptimisticL2TxnBatchBlobWrapper from './OptimisticL2TxnBatchBlobWrapper';
+
+function getCeleniumUrl(blob: OptimisticL2BlobTypeCelestia) {
+  const url = new URL('https://mocha.celenium.io/blob');
+  url.searchParams.set('commitment', hexToBase64(blob.commitment));
+  url.searchParams.set('hash', hexToBase64(blob.namespace));
+  url.searchParams.set('height', String(blob.height));
+
+  return url.toString();
+}
+
+interface Props {
+  blobs: Array<OptimisticL2BlobTypeCelestia>;
+  isLoading: boolean;
+}
+
+const OptimisticL2TxnBatchBlobCelestia = ({ blobs, isLoading }: Props) => {
+  return (
+    <VStack rowGap={ 2 } w="100%">
+      { blobs.map((blob) => {
+        return (
+          <OptimisticL2TxnBatchBlobWrapper key={ blob.commitment } isLoading={ isLoading } gridTemplateColumns="auto 1fr auto">
+            <GridItem fontWeight={ 600 }>Commitment</GridItem>
+            <GridItem overflow="hidden">
+              <Flex minW="0" w="calc(100% - 20px)">
+                <HashStringShortenDynamic hash={ blob.commitment }/>
+                <CopyToClipboard text={ blob.commitment }/>
+              </Flex>
+            </GridItem>
+            <GridItem display="flex" columnGap={ 2 }>
+              <Icon as={ celeniumIcon } boxSize={ 5 }/>
+              <LinkExternal href={ getCeleniumUrl(blob) }>Blob page</LinkExternal>
+            </GridItem>
+            <GridItem fontWeight={ 600 }>Hight</GridItem>
+            <GridItem colSpan={ 2 }>
+              { blob.height }
+            </GridItem>
+            <GridItem fontWeight={ 600 }>Timestamp</GridItem>
+            <GridItem whiteSpace="normal" colSpan={ 2 }>
+              { dayjs(blob.l1_timestamp).fromNow() } | { dayjs(blob.l1_timestamp).format('llll') }
+            </GridItem>
+            <GridItem fontWeight={ 600 }>L1 txn hash</GridItem>
+            <GridItem overflow="hidden" colSpan={ 2 }>
+              <TxEntityL1 hash={ blob.l1_transaction_hash } noIcon noCopy={ false }/>
+            </GridItem>
+          </OptimisticL2TxnBatchBlobWrapper>
+        );
+      }) }
+    </VStack>
+
+  );
+};
+
+export default React.memo(OptimisticL2TxnBatchBlobCelestia);
diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobEip4844.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobEip4844.tsx
new file mode 100644
index 0000000000..8d40574898
--- /dev/null
+++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobEip4844.tsx
@@ -0,0 +1,43 @@
+import { GridItem, VStack } from '@chakra-ui/react';
+import React from 'react';
+
+import type { OptimisticL2BlobTypeEip4844 } from 'types/api/optimisticL2';
+
+import dayjs from 'lib/date/dayjs';
+import BlobEntityL1 from 'ui/shared/entities/blob/BlobEntityL1';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+
+import OptimisticL2TxnBatchBlobWrapper from './OptimisticL2TxnBatchBlobWrapper';
+
+interface Props {
+  blobs: Array<OptimisticL2BlobTypeEip4844>;
+  isLoading: boolean;
+}
+
+const OptimisticL2TxnBatchBlobEip4844 = ({ blobs, isLoading }: Props) => {
+  return (
+    <VStack rowGap={ 2 } w="100%">
+      { blobs.map((blob) => {
+        return (
+          <OptimisticL2TxnBatchBlobWrapper key={ blob.hash } isLoading={ isLoading }>
+            <GridItem fontWeight={ 600 }>Versioned hash</GridItem>
+            <GridItem overflow="hidden">
+              <BlobEntityL1 hash={ blob.hash }/>
+            </GridItem>
+            <GridItem fontWeight={ 600 }>Timestamp</GridItem>
+            <GridItem whiteSpace="normal">
+              { dayjs(blob.l1_timestamp).fromNow() } | { dayjs(blob.l1_timestamp).format('llll') }
+            </GridItem>
+            <GridItem fontWeight={ 600 }>L1 txn hash</GridItem>
+            <GridItem overflow="hidden">
+              <TxEntityL1 hash={ blob.l1_transaction_hash } noIcon noCopy={ false }/>
+            </GridItem>
+          </OptimisticL2TxnBatchBlobWrapper>
+        );
+      }) }
+    </VStack>
+
+  );
+};
+
+export default React.memo(OptimisticL2TxnBatchBlobEip4844);
diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobWrapper.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobWrapper.tsx
new file mode 100644
index 0000000000..63f32e21fb
--- /dev/null
+++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobWrapper.tsx
@@ -0,0 +1,31 @@
+import { chakra, Grid, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  children: React.ReactNode;
+  className?: string;
+  isLoading: boolean;
+}
+
+const OptimisticL2TxnBatchBlobWrapper = ({ children, className, isLoading }: Props) => {
+  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.100');
+  return (
+    <Grid
+      className={ className }
+      columnGap={ 3 }
+      rowGap="10px"
+      p={ 4 }
+      bgColor={ bgColor }
+      gridTemplateColumns="auto 1fr"
+      borderRadius="base"
+      w="100%"
+      h={ isLoading ? '140px' : undefined }
+      fontSize="sm"
+      lineHeight={ 5 }
+    >
+      { isLoading ? null : children }
+    </Grid>
+  );
+};
+
+export default React.memo(chakra(OptimisticL2TxnBatchBlobWrapper));
diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchDetails.pw.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchDetails.pw.tsx
new file mode 100644
index 0000000000..5295faee0a
--- /dev/null
+++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchDetails.pw.tsx
@@ -0,0 +1,45 @@
+import type { UseQueryResult } from '@tanstack/react-query';
+import React from 'react';
+
+import type { OptimismL2TxnBatch } from 'types/api/optimisticL2';
+
+import type { ResourceError } from 'lib/api/resources';
+import * as txnBatchesMock from 'mocks/optimism/txnBatches';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import OptimisticL2TxnBatchDetails from './OptimisticL2TxnBatchDetails';
+
+const hooksConfig = {
+  router: {
+    query: { number: '1' },
+  },
+};
+
+test.beforeEach(async({ mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.optimisticRollup);
+});
+
+test('call data blob container +@mobile', async({ render }) => {
+  const query = {
+    data: txnBatchesMock.txnBatchTypeCallData,
+  } as UseQueryResult<OptimismL2TxnBatch, ResourceError>;
+  const component = await render(<OptimisticL2TxnBatchDetails query={ query }/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
+
+test('celestia blob container +@mobile', async({ render }) => {
+  const query = {
+    data: txnBatchesMock.txnBatchTypeCelestia,
+  } as UseQueryResult<OptimismL2TxnBatch, ResourceError>;
+  const component = await render(<OptimisticL2TxnBatchDetails query={ query }/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
+
+test('EIP-4844 blob container +@mobile', async({ render }) => {
+  const query = {
+    data: txnBatchesMock.txnBatchTypeEip4844,
+  } as UseQueryResult<OptimismL2TxnBatch, ResourceError>;
+  const component = await render(<OptimisticL2TxnBatchDetails query={ query }/>, { hooksConfig });
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchDetails.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchDetails.tsx
new file mode 100644
index 0000000000..bd28c75a2e
--- /dev/null
+++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchDetails.tsx
@@ -0,0 +1,152 @@
+import { Grid, Skeleton } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { OptimismL2TxnBatch } from 'types/api/optimisticL2';
+
+import { route } from 'nextjs-routes';
+
+import type { ResourceError } from 'lib/api/resources';
+import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
+import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import PrevNext from 'ui/shared/PrevNext';
+
+import OptimisticL2TxnBatchBlobCallData from './OptimisticL2TxnBatchBlobCallData';
+import OptimisticL2TxnBatchBlobCelestia from './OptimisticL2TxnBatchBlobCelestia';
+import OptimisticL2TxnBatchBlobEip4844 from './OptimisticL2TxnBatchBlobEip4844';
+
+interface Props {
+  query: UseQueryResult<OptimismL2TxnBatch, ResourceError>;
+}
+
+const OptimisticL2TxnBatchDetails = ({ query }: Props) => {
+  const router = useRouter();
+
+  const { data, isError, error, isPlaceholderData } = query;
+
+  const handlePrevNextClick = React.useCallback((direction: 'prev' | 'next') => {
+    if (!data) {
+      return;
+    }
+
+    const increment = direction === 'next' ? +1 : -1;
+    const nextId = String(data.internal_id + increment);
+
+    router.push({ pathname: '/batches/[number]', query: { number: nextId } }, undefined);
+  }, [ data, router ]);
+
+  if (isError) {
+    if (isCustomAppError(error)) {
+      throwOnResourceLoadError({ isError, error });
+    }
+
+    return <DataFetchAlert/>;
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  const blocksCount = data.l2_block_end - data.l2_block_start + 1;
+
+  return (
+    <Grid
+      columnGap={ 8 }
+      rowGap={{ base: 3, lg: 3 }}
+      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
+      overflow="hidden"
+    >
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Batch ID indicates the length of batches produced by grouping L2 blocks to be proven on L1"
+      >
+        Batch ID
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          { data.internal_id }
+        </Skeleton>
+        <PrevNext
+          ml={ 6 }
+          onClick={ handlePrevNextClick }
+          prevLabel="View previous tx batch"
+          nextLabel="View next tx batch"
+          isPrevDisabled={ data.internal_id === 0 }
+          isLoading={ isPlaceholderData }
+        />
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Date and time at which batch is submitted to L1"
+      >
+        Timestamp
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        { data.l1_timestamp ?
+          <DetailsTimestamp timestamp={ data.l1_timestamp }isLoading={ isPlaceholderData }/> :
+          'Undefined'
+        }
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Number of transactions in this batch"
+      >
+        Transactions
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.internal_id.toString(), tab: 'txs' } }) }>
+            { data.tx_count.toLocaleString() } transaction{ data.tx_count === 1 ? '' : 's' }
+          </LinkInternal>
+          { ' ' }in this batch
+        </Skeleton>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Number of L2 blocks in this batch"
+      >
+        Blocks
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <Skeleton isLoaded={ !isPlaceholderData }>
+          <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.internal_id.toString(), tab: 'blocks' } }) }>
+            { blocksCount.toLocaleString() } block{ blocksCount === 1 ? '' : 's' }
+          </LinkInternal>
+          { ' ' }in this batch
+        </Skeleton>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
+        isLoading={ isPlaceholderData }
+        hint="Where the batch data is stored"
+      >
+        Batch data container
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value flexDir="column" alignItems="flex-start" rowGap={ 2 }>
+        <OptimisticL2TxnBatchDA container={ data.batch_data_container } isLoading={ isPlaceholderData }/>
+        { data.batch_data_container === 'in_blob4844' && data.blobs &&
+          <OptimisticL2TxnBatchBlobEip4844 blobs={ data.blobs } isLoading={ isPlaceholderData }/> }
+        { data.batch_data_container === 'in_calldata' && (
+          <OptimisticL2TxnBatchBlobCallData
+            l1TxHashes={ data.l1_tx_hashes }
+            l1Timestamp={ data.l1_timestamp }
+            isLoading={ isPlaceholderData }
+          />
+        ) }
+        { data.batch_data_container === 'in_celestia' && data.blobs &&
+          <OptimisticL2TxnBatchBlobCelestia blobs={ data.blobs } isLoading={ isPlaceholderData }/> }
+      </DetailsInfoItem.Value>
+    </Grid>
+  );
+};
+
+export default OptimisticL2TxnBatchDetails;
diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesListItem.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesListItem.tsx
index 4a322b02e7..8c6ffcc654 100644
--- a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesListItem.tsx
+++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesListItem.tsx
@@ -1,4 +1,4 @@
-import { Skeleton, VStack } from '@chakra-ui/react';
+import { Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import type { OptimisticL2TxnBatchesItem } from 'types/api/optimisticL2';
@@ -6,19 +6,17 @@ import type { OptimisticL2TxnBatchesItem } from 'types/api/optimisticL2';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
-import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
-import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkInternal from 'ui/shared/LinkInternal';
+import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA';
+import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
 type Props = { item: OptimisticL2TxnBatchesItem; isLoading?: boolean };
 
 const OptimisticL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
-  const timeAgo = dayjs(item.l1_timestamp).fromNow();
-
   if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') {
     return null;
   }
@@ -26,48 +24,60 @@ const OptimisticL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
   return (
     <ListItemMobileGrid.Container gridTemplateColumns="100px auto">
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 block #</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value py="3px">
-        <BlockEntityL2
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Batch ID</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BatchEntityL2 number={ item.internal_id } isLoading={ isLoading }/>
+      </ListItemMobileGrid.Value>
+
+      { item.batch_data_container && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>
+            Storage
+          </ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value>
+            <OptimisticL2TxnBatchDA container={ item.batch_data_container } isLoading={ isLoading }/>
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TimeAgoWithTooltip
+          timestamp={ item.l1_timestamp }
           isLoading={ isLoading }
-          number={ item.l2_block_number }
-          fontSize="sm"
-          lineHeight={ 5 }
-          fontWeight={ 600 }
+          display="inline-block"
         />
       </ListItemMobileGrid.Value>
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 block txn count</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn count</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } minW="40px">
+          { item.l1_tx_hashes.length }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 blocks</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <LinkInternal
-          href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: item.l2_block_number.toString(), tab: 'txs' } }) }
+          href={ route({ pathname: '/batches/[number]', query: { number: item.internal_id.toString(), tab: 'blocks' } }) }
           isLoading={ isLoading }
         >
           <Skeleton isLoaded={ !isLoading } minW="40px">
-            { item.tx_count }
+            { item.l2_block_end - item.l2_block_start + 1 }
           </Skeleton>
         </LinkInternal>
       </ListItemMobileGrid.Value>
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn hash</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value py="3px">
-        <VStack spacing={ 3 } w="100%" overflow="hidden" alignItems="flex-start">
-          { item.l1_tx_hashes.map(hash => (
-            <TxEntityL1
-              key={ hash }
-              isLoading={ isLoading }
-              hash={ hash }
-              fontSize="sm"
-              lineHeight={ 5 }
-              truncation="constant_long"
-            />
-          )) }
-        </VStack>
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 blocks</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ timeAgo }</Skeleton>
+        <LinkInternal
+          href={ route({ pathname: '/batches/[number]', query: { number: item.internal_id.toString(), tab: 'txs' } }) }
+          isLoading={ isLoading }
+        >
+          <Skeleton isLoaded={ !isLoading } minW="40px">
+            { item.tx_count }
+          </Skeleton>
+        </LinkInternal>
       </ListItemMobileGrid.Value>
 
     </ListItemMobileGrid.Container>
diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTable.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTable.tsx
index 3df60d996b..44e5e06e12 100644
--- a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTable.tsx
+++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTable.tsx
@@ -15,19 +15,21 @@ type Props = {
 
 const OptimisticL2TxnBatchesTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" minW="850px">
+    <Table variant="simple" size="sm" minW="850px" layout="auto">
       <Thead top={ top }>
         <Tr>
-          <Th width="170px">L2 block #</Th>
-          <Th width="170px">L2 block txn count</Th>
-          <Th width="100%">L1 txn hash</Th>
-          <Th width="150px">Age</Th>
+          <Th>Batch ID</Th>
+          <Th >Storage</Th>
+          <Th >Age</Th>
+          <Th isNumeric>L1 txn count</Th>
+          <Th isNumeric>L2 blocks</Th>
+          <Th isNumeric>Txn</Th>
         </Tr>
       </Thead>
       <Tbody>
         { items.map((item, index) => (
           <OptimisticL2TxnBatchesTableItem
-            key={ item.l2_block_number + (isLoading ? String(index) : '') }
+            key={ item.internal_id + (isLoading ? String(index) : '') }
             item={ item }
             isLoading={ isLoading }
           />
diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx
index 4cc1b9e4b9..8397e5f729 100644
--- a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx
+++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx
@@ -1,4 +1,4 @@
-import { Td, Tr, VStack, Skeleton } from '@chakra-ui/react';
+import { Td, Tr, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import type { OptimisticL2TxnBatchesItem } from 'types/api/optimisticL2';
@@ -6,63 +6,63 @@ import type { OptimisticL2TxnBatchesItem } from 'types/api/optimisticL2';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
-import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
-import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkInternal from 'ui/shared/LinkInternal';
+import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA';
+import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
 type Props = { item: OptimisticL2TxnBatchesItem; isLoading?: boolean };
 
 const OptimisticL2TxnBatchesTableItem = ({ item, isLoading }: Props) => {
-  const timeAgo = dayjs(item.l1_timestamp).fromNow();
-
   if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') {
     return null;
   }
 
   return (
     <Tr>
-      <Td>
-        <BlockEntityL2
+      <Td verticalAlign="middle">
+        <BatchEntityL2 number={ item.internal_id } isLoading={ isLoading }/>
+      </Td>
+      <Td verticalAlign="middle">
+        { item.batch_data_container ? <OptimisticL2TxnBatchDA container={ item.batch_data_container } isLoading={ isLoading }/> : '-' }
+      </Td>
+      <Td verticalAlign="middle">
+        <TimeAgoWithTooltip
+          timestamp={ item.l1_timestamp }
           isLoading={ isLoading }
-          number={ item.l2_block_number }
-          fontSize="sm"
-          lineHeight={ 5 }
-          fontWeight={ 600 }
-          noIcon
+          display="inline-block"
+          color="text_secondary"
+          my={ 1 }
         />
       </Td>
-      <Td>
+      <Td verticalAlign="middle" isNumeric>
+        <Skeleton isLoaded={ !isLoading } minW="40px" display="inline-block">
+          { item.l1_tx_hashes.length }
+        </Skeleton>
+      </Td>
+      <Td verticalAlign="middle" isNumeric>
         <LinkInternal
-          href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: item.l2_block_number.toString(), tab: 'txs' } }) }
+          href={ route({ pathname: '/batches/[number]', query: { number: item.internal_id.toString(), tab: 'blocks' } }) }
           isLoading={ isLoading }
+          justifyContent="flex-end"
         >
-          <Skeleton isLoaded={ !isLoading } minW="40px" my={ 1 }>
-            { item.tx_count }
+          <Skeleton isLoaded={ !isLoading } minW="40px" display="inline-block">
+            { item.l2_block_end - item.l2_block_start + 1 }
           </Skeleton>
         </LinkInternal>
       </Td>
-      <Td pr={ 12 }>
-        <VStack spacing={ 3 } alignItems="flex-start">
-          { item.l1_tx_hashes.map(hash => (
-            <TxEntityL1
-              key={ hash }
-              isLoading={ isLoading }
-              hash={ hash }
-              fontSize="sm"
-              lineHeight={ 5 }
-              truncation="constant_long"
-              noIcon
-            />
-          )) }
-        </VStack>
-      </Td>
-      <Td>
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" my={ 1 } display="inline-block">
-          <span>{ timeAgo }</span>
-        </Skeleton>
+      <Td verticalAlign="middle" isNumeric>
+        <LinkInternal
+          href={ route({ pathname: '/batches/[number]', query: { number: item.internal_id.toString(), tab: 'txs' } }) }
+          isLoading={ isLoading }
+          justifyContent="flex-end"
+        >
+          <Skeleton isLoaded={ !isLoading } minW="40px" display="inline-block">
+            { item.tx_count }
+          </Skeleton>
+        </LinkInternal>
       </Td>
     </Tr>
   );
diff --git a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_EIP-4844-blob-container-mobile-1.png b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_EIP-4844-blob-container-mobile-1.png
new file mode 100644
index 0000000000..4c5208475e
Binary files /dev/null and b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_EIP-4844-blob-container-mobile-1.png differ
diff --git a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_call-data-blob-container-mobile-1.png b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_call-data-blob-container-mobile-1.png
new file mode 100644
index 0000000000..86da34a87a
Binary files /dev/null and b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_call-data-blob-container-mobile-1.png differ
diff --git a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_celestia-blob-container-mobile-1.png b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_celestia-blob-container-mobile-1.png
new file mode 100644
index 0000000000..cafb495518
Binary files /dev/null and b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_celestia-blob-container-mobile-1.png differ
diff --git a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_EIP-4844-blob-container-mobile-1.png b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_EIP-4844-blob-container-mobile-1.png
new file mode 100644
index 0000000000..8fa3285db7
Binary files /dev/null and b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_EIP-4844-blob-container-mobile-1.png differ
diff --git a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_call-data-blob-container-mobile-1.png b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_call-data-blob-container-mobile-1.png
new file mode 100644
index 0000000000..1dad1e55de
Binary files /dev/null and b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_call-data-blob-container-mobile-1.png differ
diff --git a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_celestia-blob-container-mobile-1.png b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_celestia-blob-container-mobile-1.png
new file mode 100644
index 0000000000..20f26756b1
Binary files /dev/null and b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_celestia-blob-container-mobile-1.png differ
diff --git a/ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails.tsx b/ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails.tsx
index 950a2ccec7..422996e7b3 100644
--- a/ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails.tsx
+++ b/ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails.tsx
@@ -13,12 +13,12 @@ import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
 import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
 import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import PrevNext from 'ui/shared/PrevNext';
 import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps';
 
@@ -61,10 +61,12 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
       templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
       overflow="hidden"
     >
-      <DetailsInfoItem
-        title="Tx batch number"
+      <DetailsInfoItem.Label
         isLoading={ isPlaceholderData }
       >
+        Tx batch number
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData }>
           { data.number }
         </Skeleton>
@@ -76,23 +78,32 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
           isPrevDisabled={ data.number === 0 }
           isLoading={ isPlaceholderData }
         />
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Status"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         isLoading={ isPlaceholderData }
       >
+        Status
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <VerificationSteps steps={ ZKEVM_L2_TX_BATCH_STATUSES } currentStep={ data.status } isLoading={ isPlaceholderData }/>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Timestamp"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         isLoading={ isPlaceholderData }
       >
+        Timestamp
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         { data.timestamp ? <DetailsTimestamp timestamp={ data.timestamp } isLoading={ isPlaceholderData }/> : 'Undefined' }
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Verify tx hash"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         isLoading={ isPlaceholderData }
       >
+        Verify tx hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         { data.verify_tx_hash ? (
           <TxEntityL1
             isLoading={ isPlaceholderData }
@@ -100,44 +111,57 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
             maxW="100%"
           />
         ) : <Text>Pending</Text> }
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Transactions"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         isLoading={ isPlaceholderData }
       >
+        Transactions
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData }>
           <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
             { data.transactions.length } transaction{ data.transactions.length === 1 ? '' : 's' }
           </LinkInternal>
         </Skeleton>
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
 
       <DetailsInfoItemDivider/>
 
-      <DetailsInfoItem
-        title="Global exit root"
+      <DetailsInfoItem.Label
         isLoading={ isPlaceholderData }
+      >
+        Global exit root
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value
         flexWrap="nowrap"
       >
         <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
           <HashStringShortenDynamic hash={ data.global_exit_root }/>
         </Skeleton>
         <CopyToClipboard text={ data.global_exit_root } isLoading={ isPlaceholderData }/>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Acc input hash"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         isLoading={ isPlaceholderData }
+      >
+        Acc input hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value
         flexWrap="nowrap"
       >
         <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
           <HashStringShortenDynamic hash={ data.acc_input_hash }/>
         </Skeleton>
         <CopyToClipboard text={ data.acc_input_hash } isLoading={ isPlaceholderData }/>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Sequence tx hash"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         isLoading={ isPlaceholderData }
       >
+        Sequence tx hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         { data.sequence_tx_hash ? (
           <TxEntityL1
             isLoading={ isPlaceholderData }
@@ -145,17 +169,21 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
             maxW="100%"
           />
         ) : <Text>Pending</Text> }
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="State root"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         isLoading={ isPlaceholderData }
+      >
+        State root
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value
         flexWrap="nowrap"
       >
         <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
           <HashStringShortenDynamic hash={ data.state_root }/>
         </Skeleton>
         <CopyToClipboard text={ data.state_root } isLoading={ isPlaceholderData }/>
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
     </Grid>
   );
 };
diff --git a/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx b/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx
index 401e64bbf3..43be4e0fd7 100644
--- a/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx
+++ b/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx
@@ -6,20 +6,18 @@ import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
 import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
 type Props = { item: ZkEvmL2TxnBatchesItem; isLoading?: boolean };
 
 const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => {
-  const timeAgo = item.timestamp ? dayjs(item.timestamp).fromNow() : 'Undefined';
-
   if (!rollupFeature.isEnabled || rollupFeature.type !== 'zkEvm') {
     return null;
   }
@@ -45,7 +43,12 @@ const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ timeAgo }</Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          fallbackText="Undefined"
+          isLoading={ isLoading }
+          display="inline-block"
+        />
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Txn count</ListItemMobileGrid.Label>
diff --git a/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTableItem.tsx b/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTableItem.tsx
index a22c3e3fcd..85bfabb461 100644
--- a/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTableItem.tsx
+++ b/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTableItem.tsx
@@ -6,19 +6,17 @@ import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
 import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
 type Props = { item: ZkEvmL2TxnBatchesItem; isLoading?: boolean };
 
 const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
-  const timeAgo = item.timestamp ? dayjs(item.timestamp).fromNow() : 'Undefined';
-
   if (!rollupFeature.isEnabled || rollupFeature.type !== 'zkEvm') {
     return null;
   }
@@ -39,9 +37,12 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
         <ZkEvmL2TxnBatchStatus status={ item.status } isLoading={ isLoading }/>
       </Td>
       <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } color="text_secondary">
-          <span>{ timeAgo }</span>
-        </Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          fallbackText="Undefined"
+          isLoading={ isLoading }
+          color="text_secondary"
+        />
       </Td>
       <Td verticalAlign="middle">
         <LinkInternal
diff --git a/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails.tsx b/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails.tsx
index 8505177d25..b51499834d 100644
--- a/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails.tsx
+++ b/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails.tsx
@@ -16,10 +16,10 @@ import { currencyUnits } from 'lib/units';
 import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
 import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import PrevNext from 'ui/shared/PrevNext';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps';
@@ -76,11 +76,13 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
       templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
       overflow="hidden"
     >
-      <DetailsInfoItem
-        title="Tx batch number"
+      <DetailsInfoItem.Label
         hint="Batch number indicates the length of batches produced by grouping L2 blocks to be proven on Ethereum."
         isLoading={ isPlaceholderData }
       >
+        Tx batch number
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData }>
           { data.number }
         </Skeleton>
@@ -92,35 +94,41 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
           isPrevDisabled={ data.number === 0 }
           isLoading={ isPlaceholderData }
         />
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
 
-      <DetailsInfoItem
-        title="Status"
+      <DetailsInfoItem.Label
         hint="Status is the short interpretation of the batch lifecycle"
         isLoading={ isPlaceholderData }
       >
+        Status
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <VerificationSteps steps={ ZKSYNC_L2_TX_BATCH_STATUSES.slice(1) } currentStep={ data.status } isLoading={ isPlaceholderData }/>
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
 
-      <DetailsInfoItem
-        title="Timestamp"
+      <DetailsInfoItem.Label
         hint="Date and time at which batch is produced"
         isLoading={ isPlaceholderData }
       >
+        Timestamp
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         { data.timestamp ? <DetailsTimestamp timestamp={ data.timestamp } isLoading={ isPlaceholderData }/> : 'Undefined' }
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
 
-      <DetailsInfoItem
-        title="Transactions"
+      <DetailsInfoItem.Label
         hint="Number of transactions inside the batch."
         isLoading={ isPlaceholderData }
       >
+        Transactions
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData }>
           <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
             { txNum } transaction{ txNum === 1 ? '' : 's' }
           </LinkInternal>
         </Skeleton>
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
 
       <DetailsInfoItemDivider/>
 
@@ -146,31 +154,38 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
         <>
           <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
 
-          <DetailsInfoItem
-            title="Root hash"
+          <DetailsInfoItem.Label
             hint="L1 batch root is a hash that summarizes batch data and submitted to the L1"
+          >
+            Root hash
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value
             flexWrap="nowrap"
             alignSelf="flex-start"
           >
             <TruncatedValue value={ data.root_hash }/>
             <CopyToClipboard text={ data.root_hash }/>
-          </DetailsInfoItem>
+          </DetailsInfoItem.Value>
 
-          <DetailsInfoItem
-            title="L1 gas price"
+          <DetailsInfoItem.Label
             hint="Gas price for the batch settlement transaction on L1"
           >
+            L1 gas price
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
             <Text mr={ 1 }>{ BigNumber(data.l1_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether }</Text>
             <Text variant="secondary">({ BigNumber(data.l1_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</Text>
-          </DetailsInfoItem>
+          </DetailsInfoItem.Value>
 
-          <DetailsInfoItem
-            title="L2 fair gas price"
+          <DetailsInfoItem.Label
             hint={ 'The gas price below which the "baseFee" of the batch should not fall' }
           >
+            L2 fair gas price
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
             <Text mr={ 1 }>{ BigNumber(data.l2_fair_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether }</Text>
             <Text variant="secondary">({ BigNumber(data.l2_fair_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</Text>
-          </DetailsInfoItem>
+          </DetailsInfoItem.Value>
         </>
       ) }
     </Grid>
diff --git a/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo.tsx b/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo.tsx
index bb0bfcb80d..30123c9f60 100644
--- a/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo.tsx
+++ b/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import type { ZkSyncBatch } from 'types/api/zkSyncL2';
 
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 
@@ -23,10 +23,13 @@ interface Props {
 const ZkSyncL2TxnBatchHashesInfo = ({ isLoading, data }: Props) => {
   return (
     <>
-      <DetailsInfoItem
-        title="Commit tx hash"
+      <DetailsInfoItem.Label
         hint="Hash of L1 tx on which the batch was committed"
         isLoading={ isLoading }
+      >
+        Commit tx hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value
         flexDir="column"
         alignItems="flex-start"
       >
@@ -45,12 +48,15 @@ const ZkSyncL2TxnBatchHashesInfo = ({ isLoading, data }: Props) => {
             ) }
           </>
         ) : <Skeleton isLoaded={ !isLoading }>Pending</Skeleton> }
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
 
-      <DetailsInfoItem
-        title="Prove tx hash"
+      <DetailsInfoItem.Label
         hint="Hash of L1 tx on which the batch was proven"
         isLoading={ isLoading }
+      >
+        Prove tx hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value
         flexDir="column"
         alignItems="flex-start"
       >
@@ -69,12 +75,15 @@ const ZkSyncL2TxnBatchHashesInfo = ({ isLoading, data }: Props) => {
             ) }
           </>
         ) : <Skeleton isLoaded={ !isLoading }>Pending</Skeleton> }
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
 
-      <DetailsInfoItem
-        title="Execute tx hash"
+      <DetailsInfoItem.Label
         hint="Hash of L1 tx on which the batch was executed and finalized"
         isLoading={ isLoading }
+      >
+        Execute tx hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value
         flexDir="column"
         alignItems="flex-start"
       >
@@ -93,7 +102,7 @@ const ZkSyncL2TxnBatchHashesInfo = ({ isLoading, data }: Props) => {
             ) }
           </>
         ) : <Skeleton isLoaded={ !isLoading }>Pending</Skeleton> }
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
     </>
   );
 };
diff --git a/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesListItem.tsx b/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesListItem.tsx
index d930604763..0b7eff7e1e 100644
--- a/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesListItem.tsx
+++ b/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesListItem.tsx
@@ -6,20 +6,18 @@ import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
 import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 import ZkSyncL2TxnBatchStatus from 'ui/shared/statusTag/ZkSyncL2TxnBatchStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
 type Props = { item: ZkSyncBatchesItem; isLoading?: boolean };
 
 const ZkSyncTxnBatchesListItem = ({ item, isLoading }: Props) => {
-  const timeAgo = item.timestamp ? dayjs(item.timestamp).fromNow() : 'Undefined';
-
   if (!rollupFeature.isEnabled || rollupFeature.type !== 'zkSync') {
     return null;
   }
@@ -45,7 +43,12 @@ const ZkSyncTxnBatchesListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ timeAgo }</Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          fallbackText="Undefined"
+          isLoading={ isLoading }
+          display="inline-block"
+        />
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Txn count</ListItemMobileGrid.Label>
diff --git a/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTableItem.tsx b/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTableItem.tsx
index 82a2f93fdf..282dd598c7 100644
--- a/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTableItem.tsx
+++ b/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTableItem.tsx
@@ -6,19 +6,17 @@ import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
 import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import ZkSyncL2TxnBatchStatus from 'ui/shared/statusTag/ZkSyncL2TxnBatchStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
 type Props = { item: ZkSyncBatchesItem; isLoading?: boolean };
 
 const ZkSyncTxnBatchesTableItem = ({ item, isLoading }: Props) => {
-  const timeAgo = item.timestamp ? dayjs(item.timestamp).fromNow() : 'Undefined';
-
   if (!rollupFeature.isEnabled || rollupFeature.type !== 'zkSync') {
     return null;
   }
@@ -39,9 +37,12 @@ const ZkSyncTxnBatchesTableItem = ({ item, isLoading }: Props) => {
         <ZkSyncL2TxnBatchStatus status={ item.status } isLoading={ isLoading }/>
       </Td>
       <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } color="text_secondary">
-          <span>{ timeAgo }</span>
-        </Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          fallbackText="Undefined"
+          isLoading={ isLoading }
+          color="text_secondary"
+        />
       </Td>
       <Td verticalAlign="middle">
         <LinkInternal
diff --git a/ui/txs/TxAdditionalInfo.pw.tsx b/ui/txs/TxAdditionalInfo.pw.tsx
index 3b12be42a5..d6f5f612c7 100644
--- a/ui/txs/TxAdditionalInfo.pw.tsx
+++ b/ui/txs/TxAdditionalInfo.pw.tsx
@@ -1,43 +1,24 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as txMock from 'mocks/txs/tx';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 
 import TxAdditionalInfo from './TxAdditionalInfo';
 
-test('regular transaction +@dark-mode', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxAdditionalInfo tx={ txMock.base }/>
-    </TestApp>,
-  );
-
+test('regular transaction +@dark-mode', async({ render, page }) => {
+  const component = await render(<TxAdditionalInfo tx={ txMock.base }/>);
   await component.getByLabel('Transaction info').click();
-
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 600 } });
 });
 
-test('regular transaction +@mobile -@default', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxAdditionalInfo tx={ txMock.base } isMobile/>
-    </TestApp>,
-  );
-
+test('regular transaction +@mobile -@default', async({ render, page }) => {
+  const component = await render(<TxAdditionalInfo tx={ txMock.base } isMobile/>);
   await component.getByLabel('Transaction info').click();
-
   await expect(page).toHaveScreenshot();
 });
 
-test('blob transaction', async({ mount, page }) => {
-  const component = await mount(
-    <TestApp>
-      <TxAdditionalInfo tx={ txMock.withBlob }/>
-    </TestApp>,
-  );
-
+test('blob transaction', async({ render, page }) => {
+  const component = await render(<TxAdditionalInfo tx={ txMock.withBlob }/>);
   await component.getByLabel('Transaction info').click();
-
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 400, height: 600 } });
 });
diff --git a/ui/txs/TxAdditionalInfo.tsx b/ui/txs/TxAdditionalInfo.tsx
index 3acba5141f..32ce7a5eed 100644
--- a/ui/txs/TxAdditionalInfo.tsx
+++ b/ui/txs/TxAdditionalInfo.tsx
@@ -3,7 +3,6 @@ import {
   Modal,
   ModalContent,
   ModalCloseButton,
-  Popover,
   PopoverTrigger,
   PopoverContent,
   PopoverBody,
@@ -14,6 +13,7 @@ import React from 'react';
 import type { Transaction } from 'types/api/transaction';
 
 import AdditionalInfoButton from 'ui/shared/AdditionalInfoButton';
+import Popover from 'ui/shared/chakra/Popover';
 
 import TxAdditionalInfoContainer from './TxAdditionalInfoContainer';
 import TxAdditionalInfoContent from './TxAdditionalInfoContent';
diff --git a/ui/txs/TxAdditionalInfoContent.tsx b/ui/txs/TxAdditionalInfoContent.tsx
index 88588ea06a..92b5d9fbfa 100644
--- a/ui/txs/TxAdditionalInfoContent.tsx
+++ b/ui/txs/TxAdditionalInfoContent.tsx
@@ -9,11 +9,10 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import getValueWithUnit from 'lib/getValueWithUnit';
 import { currencyUnits } from 'lib/units';
-import CurrencyValue from 'ui/shared/CurrencyValue';
 import BlobEntity from 'ui/shared/entities/blob/BlobEntity';
-import LinkInternal from 'ui/shared/LinkInternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 import TextSeparator from 'ui/shared/TextSeparator';
-import TxFeeStability from 'ui/shared/tx/TxFeeStability';
+import TxFee from 'ui/shared/tx/TxFee';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => {
@@ -60,20 +59,7 @@ const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => {
           { (tx.stability_fee !== undefined || tx.fee.value !== null) && (
             <>
               <Text { ...sectionTitleProps }>Transaction fee</Text>
-              { tx.stability_fee ? (
-                <TxFeeStability data={ tx.stability_fee }/>
-              ) : (
-                <Flex>
-                  <CurrencyValue
-                    value={ tx.fee.value }
-                    currency={ config.UI.views.tx.hiddenFields?.fee_currency ? '' : currencyUnits.ether }
-                    exchangeRate={ tx.exchange_rate }
-                    accuracyUsd={ 2 }
-                    flexWrap="wrap"
-                    rowGap={ 0 }
-                  />
-                </Flex>
-              ) }
+              <TxFee tx={ tx } withUsd accuracyUsd={ 2 } rowGap={ 0 }/>
             </>
           ) }
         </Box>
diff --git a/ui/txs/TxsContent.tsx b/ui/txs/TxsContent.tsx
index 44f687afc5..4f4f435094 100644
--- a/ui/txs/TxsContent.tsx
+++ b/ui/txs/TxsContent.tsx
@@ -6,6 +6,7 @@ import type { Transaction, TransactionsSortingField, TransactionsSortingValue }
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AddressCsvExportLink from 'ui/address/AddressCsvExportLink';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
 import getNextSortValue from 'ui/shared/sort/getNextSortValue';
@@ -88,7 +89,7 @@ const TxsContent = ({
           showSocketInfo={ showSocketInfo }
           socketInfoAlert={ socketInfoAlert }
           socketInfoNum={ socketInfoNum }
-          top={ top || query.pagination.isVisible ? 80 : 0 }
+          top={ top || (query.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0) }
           currentAddress={ currentAddress }
           enableTimeIncrement={ enableTimeIncrement }
           isLoading={ isPlaceholderData }
diff --git a/ui/txs/TxsHeaderMobile.tsx b/ui/txs/TxsHeaderMobile.tsx
index 9efde1de84..cad7d45840 100644
--- a/ui/txs/TxsHeaderMobile.tsx
+++ b/ui/txs/TxsHeaderMobile.tsx
@@ -30,9 +30,10 @@ const TxsHeaderMobile = ({ filterComponent, sorting, setSorting, paginationProps
       <HStack>
         { filterComponent }
         <Sort
+          name="transactions_sorting"
+          defaultValue={ sorting }
           options={ SORT_OPTIONS }
-          setSort={ setSorting }
-          sort={ sorting }
+          onChange={ setSorting }
           isLoading={ paginationProps.isLoading }
         />
         { /* api is not implemented */ }
diff --git a/ui/txs/TxsListItem.pw.tsx b/ui/txs/TxsListItem.pw.tsx
index 945ce74011..d078e85b51 100644
--- a/ui/txs/TxsListItem.pw.tsx
+++ b/ui/txs/TxsListItem.pw.tsx
@@ -1,29 +1,18 @@
-import { test, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as txMock from 'mocks/txs/tx';
-import TestApp from 'playwright/TestApp';
+import { test, expect, devices } from 'playwright/lib';
 
 import TxsListItem from './TxsListItem';
 
 test.use({ viewport: devices['iPhone 13 Pro'].viewport });
 
-test('base view +@dark-mode', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TxsListItem tx={ txMock.withWatchListNames } showBlockInfo/>
-    </TestApp>,
-  );
-
+test('base view +@dark-mode', async({ render }) => {
+  const component = await render(<TxsListItem tx={ txMock.withWatchListNames } showBlockInfo/>);
   await expect(component).toHaveScreenshot();
 });
 
-test('with base address', async({ mount }) => {
-  const component = await mount(
-    <TestApp>
-      <TxsListItem tx={ txMock.withWatchListNames } showBlockInfo currentAddress={ txMock.base.from.hash }/>
-    </TestApp>,
-  );
-
+test('with base address', async({ render }) => {
+  const component = await render(<TxsListItem tx={ txMock.withWatchListNames } showBlockInfo currentAddress={ txMock.base.from.hash }/>);
   await expect(component).toHaveScreenshot();
 });
diff --git a/ui/txs/TxsListItem.tsx b/ui/txs/TxsListItem.tsx
index 654c83239c..a5786be434 100644
--- a/ui/txs/TxsListItem.tsx
+++ b/ui/txs/TxsListItem.tsx
@@ -9,7 +9,6 @@ import type { Transaction } from 'types/api/transaction';
 
 import config from 'configs/app';
 import getValueWithUnit from 'lib/getValueWithUnit';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import { space } from 'lib/html-entities';
 import { currencyUnits } from 'lib/units';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
@@ -17,7 +16,8 @@ import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
-import TxFeeStability from 'ui/shared/tx/TxFeeStability';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TxFee from 'ui/shared/tx/TxFee';
 import TxWatchListTags from 'ui/shared/tx/TxWatchListTags';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 import TxType from 'ui/txs/TxType';
@@ -35,8 +35,6 @@ type Props = {
 const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeIncrement }: Props) => {
   const dataTo = tx.to ? tx.to : tx.created_contract;
 
-  const timeAgo = useTimeAgoIncrement(tx.timestamp, enableTimeIncrement);
-
   return (
     <ListItemMobile display="block" width="100%" isAnimated key={ tx.hash }>
       <Flex justifyContent="space-between" mt={ 4 }>
@@ -56,12 +54,18 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
           hash={ tx.hash }
           truncation="constant_long"
           fontWeight="700"
+          icon={{
+            name: tx.tx_types.includes('blob_transaction') ? 'blob' : undefined,
+          }}
+        />
+        <TimeAgoWithTooltip
+          timestamp={ tx.timestamp }
+          enableIncrement={ enableTimeIncrement }
+          isLoading={ isLoading }
+          color="text_secondary"
+          fontWeight="400"
+          fontSize="sm"
         />
-        { tx.timestamp && (
-          <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm">
-            <span>{ timeAgo }</span>
-          </Skeleton>
-        ) }
       </Flex>
       { tx.method && (
         <Flex mt={ 3 }>
@@ -110,14 +114,7 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
           { (tx.stability_fee !== undefined || tx.fee.value !== null) && (
             <>
               <Skeleton isLoaded={ !isLoading } display="inline-block" whiteSpace="pre">Fee</Skeleton>
-              { tx.stability_fee ? (
-                <TxFeeStability data={ tx.stability_fee } isLoading={ isLoading } hideUsd/>
-              ) : (
-                <Skeleton isLoaded={ !isLoading } display="inline-block" variant="text_secondary" whiteSpace="pre">
-                  { getValueWithUnit(tx.fee.value || 0).toFormat() }
-                  { config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ currencyUnits.ether }` }
-                </Skeleton>
-              ) }
+              <TxFee tx={ tx } isLoading={ isLoading }/>
             </>
           ) }
         </Flex>
diff --git a/ui/txs/TxsStats.pw.tsx b/ui/txs/TxsStats.pw.tsx
new file mode 100644
index 0000000000..88d11e3552
--- /dev/null
+++ b/ui/txs/TxsStats.pw.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import * as statsMock from 'mocks/stats';
+import * as txsStatsMock from 'mocks/txs/stats';
+import { test, expect } from 'playwright/lib';
+
+import TxsStats from './TxsStats';
+
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('stats', statsMock.base);
+  await mockApiResponse('txs_stats', txsStatsMock.base);
+  const component = await render(<TxsStats/>);
+  await expect(component).toHaveScreenshot();
+});
diff --git a/ui/txs/TxsStats.tsx b/ui/txs/TxsStats.tsx
new file mode 100644
index 0000000000..50327362ab
--- /dev/null
+++ b/ui/txs/TxsStats.tsx
@@ -0,0 +1,81 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+import getCurrencyValue from 'lib/getCurrencyValue';
+import { thinsp } from 'lib/html-entities';
+import { HOMEPAGE_STATS } from 'stubs/stats';
+import { TXS_STATS } from 'stubs/tx';
+import StatsWidget from 'ui/shared/stats/StatsWidget';
+
+const TxsStats = () => {
+  const txsStatsQuery = useApiQuery('txs_stats', {
+    queryOptions: {
+      placeholderData: TXS_STATS,
+    },
+  });
+
+  const statsQuery = useApiQuery('stats', {
+    queryOptions: {
+      placeholderData: HOMEPAGE_STATS,
+    },
+  });
+
+  if (!txsStatsQuery.data) {
+    return null;
+  }
+
+  const txFeeAvg = getCurrencyValue({
+    value: txsStatsQuery.data.transaction_fees_avg_24h,
+    exchangeRate: statsQuery.data?.coin_price,
+    decimals: String(config.chain.currency.decimals),
+    accuracyUsd: 2,
+  });
+
+  return (
+    <Box
+      display="grid"
+      gridTemplateColumns={{ base: '1fr', lg: 'repeat(4, calc(25% - 9px))' }}
+      rowGap={ 3 }
+      columnGap={ 3 }
+      mb={ 6 }
+    >
+      <StatsWidget
+        label="Transactions"
+        value={ Number(txsStatsQuery.data?.transactions_count_24h).toLocaleString() }
+        period="24h"
+        isLoading={ txsStatsQuery.isPlaceholderData }
+        href={ config.features.stats.isEnabled ? { pathname: '/stats', query: { chartId: 'newTxns' } } : undefined }
+      />
+      <StatsWidget
+        label="Pending transactions"
+        value={ Number(txsStatsQuery.data?.pending_transactions_count).toLocaleString() }
+        period="1h"
+        isLoading={ txsStatsQuery.isPlaceholderData }
+      />
+      <StatsWidget
+        label="Transactions fees"
+        value={
+          (Number(txsStatsQuery.data?.transaction_fees_sum_24h) / (10 ** config.chain.currency.decimals))
+            .toLocaleString(undefined, { maximumFractionDigits: 2 })
+        }
+        valuePostfix={ thinsp + config.chain.currency.symbol }
+        period="24h"
+        isLoading={ txsStatsQuery.isPlaceholderData }
+        href={ config.features.stats.isEnabled ? { pathname: '/stats', query: { chartId: 'txnsFee' } } : undefined }
+      />
+      <StatsWidget
+        label="Avg. transaction fee"
+        value={ txFeeAvg.usd ? txFeeAvg.usd : txFeeAvg.valueStr }
+        valuePrefix={ txFeeAvg.usd ? '$' : undefined }
+        valuePostfix={ txFeeAvg.usd ? undefined : thinsp + config.chain.currency.symbol }
+        period="24h"
+        isLoading={ txsStatsQuery.isPlaceholderData }
+        href={ config.features.stats.isEnabled ? { pathname: '/stats', query: { chartId: 'averageTxnFee' } } : undefined }
+      />
+    </Box>
+  );
+};
+
+export default React.memo(TxsStats);
diff --git a/ui/txs/TxsTable.pw.tsx b/ui/txs/TxsTable.pw.tsx
index 7cd4d86eb6..50dd35f22d 100644
--- a/ui/txs/TxsTable.pw.tsx
+++ b/ui/txs/TxsTable.pw.tsx
@@ -1,20 +1,23 @@
-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as txMock from 'mocks/txs/tx';
-import TestApp from 'playwright/TestApp';
-import * as configs from 'playwright/utils/configs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import TxsTable from './TxsTable';
 
 test.describe('base view', () => {
 
-  test('+@dark-mode', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        { /* eslint-disable-next-line react/jsx-no-bind */ }
-        <TxsTable txs={ [ txMock.base, txMock.withWatchListNames ] } sort={ () => () => {} } top={ 0 } showBlockInfo showSocketInfo={ false }/>
-      </TestApp>,
+  test('+@dark-mode', async({ render }) => {
+    const component = await render(
+      <TxsTable
+        txs={ [ txMock.base, txMock.withWatchListNames ] }
+        // eslint-disable-next-line react/jsx-no-bind
+        sort={ () => () => {} }
+        top={ 0 }
+        showBlockInfo
+        showSocketInfo={ false }
+      />,
     );
 
     await component.getByText('kitty').first().hover();
@@ -23,14 +26,18 @@ test.describe('base view', () => {
   });
 
   test.describe('screen xl', () => {
-    test.use({ viewport: configs.viewport.xl });
-
-    test('', async({ mount }) => {
-      const component = await mount(
-        <TestApp>
-          { /* eslint-disable-next-line react/jsx-no-bind */ }
-          <TxsTable txs={ [ txMock.base, txMock.withWatchListNames ] } sort={ () => () => {} } top={ 0 } showBlockInfo showSocketInfo={ false }/>
-        </TestApp>,
+    test.use({ viewport: pwConfig.viewport.xl });
+
+    test('', async({ render }) => {
+      const component = await render(
+        <TxsTable
+          txs={ [ txMock.base, txMock.withWatchListNames ] }
+          // eslint-disable-next-line react/jsx-no-bind
+          sort={ () => () => {} }
+          top={ 0 }
+          showBlockInfo
+          showSocketInfo={ false }
+        />,
       );
 
       await component.getByText('kitty').first().hover();
diff --git a/ui/txs/TxsTable.tsx b/ui/txs/TxsTable.tsx
index d581056365..eb688d5cc6 100644
--- a/ui/txs/TxsTable.tsx
+++ b/ui/txs/TxsTable.tsx
@@ -43,6 +43,10 @@ const TxsTable = ({
 }: Props) => {
   const { cutRef, renderedItemsNum } = useLazyRenderedList(txs, !isLoading);
 
+  const feeCurrency = config.UI.views.tx.hiddenFields?.fee_currency || config.chain.hasMultipleGasCurrencies ?
+    '' :
+    ' ' + currencyUnits.ether;
+
   return (
     <AddressHighlightProvider>
       <Table variant="simple" minWidth="950px" size="xs">
@@ -68,7 +72,7 @@ const TxsTable = ({
                 <Link onClick={ sort('fee') } display="flex" justifyContent="end">
                   { sorting === 'fee-asc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(-90deg)"/> }
                   { sorting === 'fee-desc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(90deg)"/> }
-                  { `Fee${ config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ currencyUnits.ether }` }` }
+                  { `Fee${ feeCurrency }` }
                 </Link>
               </Th>
             ) }
diff --git a/ui/txs/TxsTableItem.tsx b/ui/txs/TxsTableItem.tsx
index 216003bfeb..c47d7a2395 100644
--- a/ui/txs/TxsTableItem.tsx
+++ b/ui/txs/TxsTableItem.tsx
@@ -2,7 +2,6 @@ import {
   Tr,
   Td,
   VStack,
-  Skeleton,
 } from '@chakra-ui/react';
 import { motion } from 'framer-motion';
 import React from 'react';
@@ -10,14 +9,14 @@ import React from 'react';
 import type { Transaction } from 'types/api/transaction';
 
 import config from 'configs/app';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import Tag from 'ui/shared/chakra/Tag';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
-import TxFeeStability from 'ui/shared/tx/TxFeeStability';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TxFee from 'ui/shared/tx/TxFee';
 import TxWatchListTags from 'ui/shared/tx/TxWatchListTags';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 
@@ -34,7 +33,6 @@ type Props = {
 
 const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement, isLoading }: Props) => {
   const dataTo = tx.to ? tx.to : tx.created_contract;
-  const timeAgo = useTimeAgoIncrement(tx.timestamp, enableTimeIncrement);
 
   return (
     <Tr
@@ -58,7 +56,13 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
             maxW="100%"
             truncation="constant_long"
           />
-          { tx.timestamp && <Skeleton color="text_secondary" fontWeight="400" isLoaded={ !isLoading }><span>{ timeAgo }</span></Skeleton> }
+          <TimeAgoWithTooltip
+            timestamp={ tx.timestamp }
+            enableIncrement={ enableTimeIncrement }
+            isLoading={ isLoading }
+            color="text_secondary"
+            fontWeight="400"
+          />
         </VStack>
       </Td>
       <Td>
@@ -109,12 +113,13 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
       ) }
       { !config.UI.views.tx.hiddenFields?.tx_fee && (
         <Td isNumeric>
-          { /* eslint-disable-next-line no-nested-ternary */ }
-          { tx.stability_fee ? (
-            <TxFeeStability data={ tx.stability_fee } isLoading={ isLoading } accuracy={ 8 } justifyContent="end" hideUsd/>
-          ) : (
-            tx.fee.value ? <CurrencyValue value={ tx.fee.value } accuracy={ 8 } isLoading={ isLoading }/> : '-'
-          ) }
+          <TxFee
+            tx={ tx }
+            accuracy={ 8 }
+            isLoading={ isLoading }
+            withCurrency={ Boolean(tx.celo || tx.stability_fee) }
+            justifyContent="end"
+          />
         </Td>
       ) }
     </Tr>
diff --git a/ui/txs/TxsWatchlist.tsx b/ui/txs/TxsWatchlist.tsx
index 67edde53d2..308669e33c 100644
--- a/ui/txs/TxsWatchlist.tsx
+++ b/ui/txs/TxsWatchlist.tsx
@@ -10,7 +10,7 @@ type Props = {
 
 const TxsWatchlist = ({ query }: Props) => {
   useRedirectForInvalidAuthToken();
-  return <TxsWithFrontendSorting query={ query } showSocketInfo={ false }/>;
+  return <TxsWithFrontendSorting query={ query } showSocketInfo={ false } top={ 88 }/>;
 };
 
 export default TxsWatchlist;
diff --git a/ui/txs/__screenshots__/TxsStats.pw.tsx_default_base-view-mobile-1.png b/ui/txs/__screenshots__/TxsStats.pw.tsx_default_base-view-mobile-1.png
new file mode 100644
index 0000000000..3bff4a152c
Binary files /dev/null and b/ui/txs/__screenshots__/TxsStats.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/txs/__screenshots__/TxsStats.pw.tsx_mobile_base-view-mobile-1.png b/ui/txs/__screenshots__/TxsStats.pw.tsx_mobile_base-view-mobile-1.png
new file mode 100644
index 0000000000..4990a34745
Binary files /dev/null and b/ui/txs/__screenshots__/TxsStats.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/txs/noves/useDescribeTxs.tsx b/ui/txs/noves/useDescribeTxs.tsx
index d9081492cd..57bfe14cc2 100644
--- a/ui/txs/noves/useDescribeTxs.tsx
+++ b/ui/txs/noves/useDescribeTxs.tsx
@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
-import _ from 'lodash';
+import _chunk from 'lodash/chunk';
+import _uniq from 'lodash/uniq';
 import React from 'react';
 
 import type { NovesDescribeTxsResponse } from 'types/api/noves';
@@ -15,8 +16,8 @@ const translateEnabled = feature.isEnabled && feature.provider === 'noves';
 export default function useDescribeTxs(items: Array<Transaction> | undefined, viewAsAccountAddress: string | undefined, isPlaceholderData: boolean) {
   const apiFetch = useApiFetch();
 
-  const txsHash = _.uniq(items?.map(i => i.hash));
-  const txChunks = _.chunk(txsHash, 10);
+  const txsHash = _uniq(items?.map(i => i.hash));
+  const txChunks = _chunk(txsHash, 10);
 
   const queryKey = {
     viewAsAccountAddress,
diff --git a/ui/txs/noves/utils.ts b/ui/txs/noves/utils.ts
index c5a986b66a..0197b38e7c 100644
--- a/ui/txs/noves/utils.ts
+++ b/ui/txs/noves/utils.ts
@@ -1,3 +1,5 @@
+import capitalizeFirstLetter from 'lib/capitalizeFirstLetter';
+
 export function camelCaseToSentence(camelCaseString: string | undefined) {
   if (!camelCaseString) {
     return '';
@@ -5,7 +7,7 @@ export function camelCaseToSentence(camelCaseString: string | undefined) {
 
   let sentence = camelCaseString.replace(/([a-z])([A-Z])/g, '$1 $2');
   sentence = sentence.replace(/([A-Z])([A-Z][a-z])/g, '$1 $2');
-  sentence = sentence.charAt(0).toUpperCase() + sentence.slice(1);
+  sentence = capitalizeFirstLetter(sentence);
 
   return sentence;
 }
diff --git a/ui/txs/useTxsSort.tsx b/ui/txs/useTxsSort.tsx
index c2ec9d8377..37e49cdf03 100644
--- a/ui/txs/useTxsSort.tsx
+++ b/ui/txs/useTxsSort.tsx
@@ -5,11 +5,11 @@ import type { TransactionsSortingValue, TxsResponse } from 'types/api/transactio
 
 import type { ResourceError } from 'lib/api/resources';
 import * as cookies from 'lib/cookies';
-import type { Option } from 'ui/shared/sort/Sort';
+import type { TOption } from 'ui/shared/sort/Option';
 
 import sortTxs from './sortTxs';
 
-export const SORT_OPTIONS: Array<Option<TransactionsSortingValue>> = [
+export const SORT_OPTIONS: Array<TOption<TransactionsSortingValue>> = [
   { title: 'Default', id: undefined },
   { title: 'Value ascending', id: 'value-asc' },
   { title: 'Value descending', id: 'value-desc' },
diff --git a/ui/userOp/UserOpCallData.tsx b/ui/userOp/UserOpCallData.tsx
new file mode 100644
index 0000000000..08e962f696
--- /dev/null
+++ b/ui/userOp/UserOpCallData.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+import type { UserOp } from 'types/api/userOps';
+
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import RawInputData from 'ui/shared/RawInputData';
+
+import UserOpCallDataSwitch from './UserOpCallDataSwitch';
+
+interface Props {
+  data: UserOp;
+}
+
+const UserOpDecodedCallData = ({ data }: Props) => {
+
+  const [ callData, setCallData ] = React.useState<string | null>(data.execute_call_data || data.call_data);
+
+  const handleSwitchChange = React.useCallback((isChecked: boolean) => {
+    setCallData(isChecked ? data.call_data : data.execute_call_data);
+  }, [ data ]);
+
+  if (!callData) {
+    return null;
+  }
+
+  const toggler = data.call_data && data.execute_call_data ? (
+    <UserOpCallDataSwitch
+      onChange={ handleSwitchChange }
+      initialValue={ false }
+      ml={{ base: 3, lg: 'auto' }}
+    />
+  ) : null;
+
+  const labelText = data.call_data && !data.execute_call_data ? 'External call data' : 'Call data';
+
+  return (
+    <>
+      <DetailsInfoItem.Label
+        hint="Data that’s passed to the sender for execution"
+      >
+        { labelText }
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <RawInputData hex={ callData } rightSlot={ toggler }/>
+      </DetailsInfoItem.Value>
+    </>
+  );
+};
+
+export default React.memo(UserOpDecodedCallData);
diff --git a/ui/userOp/UserOpCallDataSwitch.tsx b/ui/userOp/UserOpCallDataSwitch.tsx
new file mode 100644
index 0000000000..17b54f7864
--- /dev/null
+++ b/ui/userOp/UserOpCallDataSwitch.tsx
@@ -0,0 +1,35 @@
+import { chakra, FormLabel, FormControl, Switch } from '@chakra-ui/react';
+import React from 'react';
+
+import Hint from 'ui/shared/Hint';
+
+interface Props {
+  onChange: (isChecked: boolean) => void;
+  initialValue?: boolean;
+  isDisabled?: boolean;
+  className?: string;
+}
+
+const UserOpCallDataSwitch = ({ className, initialValue, isDisabled, onChange }: Props) => {
+  const [ isChecked, setIsChecked ] = React.useState(initialValue ?? false);
+
+  const handleChange = React.useCallback(() => {
+    setIsChecked((prevValue) => {
+      const nextValue = !prevValue;
+      onChange(nextValue);
+      return nextValue;
+    });
+  }, [ onChange ]);
+
+  return (
+    <FormControl className={ className } display="flex" columnGap={ 2 } ml="auto" w="fit-content">
+      <FormLabel htmlFor="isExternal" fontSize="sm" lineHeight={ 5 } fontWeight={ 600 } m={ 0 }>
+        Show external call data
+      </FormLabel>
+      <Switch id="isExternal" isChecked={ isChecked } isDisabled={ isDisabled } onChange={ handleChange }/>
+      <Hint label="Inner call data is a predicted decoded call from this user operation"/>
+    </FormControl>
+  );
+};
+
+export default React.memo(chakra(UserOpCallDataSwitch));
diff --git a/ui/userOp/UserOpDecodedCallData.tsx b/ui/userOp/UserOpDecodedCallData.tsx
new file mode 100644
index 0000000000..c896a23836
--- /dev/null
+++ b/ui/userOp/UserOpDecodedCallData.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+
+import type { UserOp } from 'types/api/userOps';
+
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
+
+import UserOpCallDataSwitch from './UserOpCallDataSwitch';
+
+interface Props {
+  data: UserOp;
+}
+
+const UserOpDecodedCallData = ({ data }: Props) => {
+
+  const [ callData, setCallData ] = React.useState(data.decoded_execute_call_data || data.decoded_call_data);
+
+  const handleSwitchChange = React.useCallback((isChecked: boolean) => {
+    setCallData(isChecked ? data.decoded_call_data : data.decoded_execute_call_data);
+  }, [ data ]);
+
+  if (!callData) {
+    return null;
+  }
+
+  const toggler = data.decoded_call_data && data.decoded_execute_call_data ? (
+    <UserOpCallDataSwitch
+      onChange={ handleSwitchChange }
+      initialValue={ false }
+      ml={{ base: 0, lg: 'auto' }}
+    />
+  ) : null;
+
+  const labelText = data.call_data && !data.execute_call_data ? 'Decoded external call data' : 'Decoded call data';
+
+  return (
+    <>
+      <DetailsInfoItem.Label
+        hint={ labelText }
+      >
+        { labelText }
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value
+        flexDir={{ base: 'column', lg: 'row' }}
+        alignItems={{ base: 'flex-start', lg: 'center' }}
+      >
+        <LogDecodedInputData data={ callData } rightSlot={ toggler }/>
+      </DetailsInfoItem.Value>
+    </>
+  );
+};
+
+export default React.memo(UserOpDecodedCallData);
diff --git a/ui/userOp/UserOpDetails.tsx b/ui/userOp/UserOpDetails.tsx
index 9d06807485..9aad7a9bb3 100644
--- a/ui/userOp/UserOpDetails.tsx
+++ b/ui/userOp/UserOpDetails.tsx
@@ -15,18 +15,19 @@ import { currencyUnits } from 'lib/units';
 import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
-import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
 import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
 import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
-import RawInputData from 'ui/shared/RawInputData';
 import UserOpSponsorType from 'ui/shared/userOps/UserOpSponsorType';
 import UserOpStatus from 'ui/shared/userOps/UserOpStatus';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
+import UserOpCallData from './UserOpCallData';
+import UserOpDecodedCallData from './UserOpDecodedCallData';
 import UserOpDetailsActions from './UserOpDetailsActions';
 
 interface Props {
@@ -67,78 +68,108 @@ const UserOpDetails = ({ query }: Props) => {
       templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 220px) minmax(0, 1fr)' }}
       overflow="hidden"
     >
-      <DetailsInfoItem
-        title="User operation hash"
+      <DetailsInfoItem.Label
         hint="Unique character string assigned to every User operation"
         isLoading={ isPlaceholderData }
       >
+        User operation hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
           <UserOpEntity hash={ data.hash } noIcon noLink noCopy={ false }/>
         </Skeleton>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Sender"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="The address of the smart contract account"
         isLoading={ isPlaceholderData }
       >
+        Sender
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <AddressStringOrParam address={ data.sender } isLoading={ isPlaceholderData }/>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Status"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Current User operation state"
         isLoading={ isPlaceholderData }
       >
+        Status
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <UserOpStatus status={ data.status } isLoading={ isPlaceholderData }/>
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
+
       { data.revert_reason && (
-        <DetailsInfoItem
-          title="Revert reason"
-          hint="The revert reason of the User operation"
-          isLoading={ isPlaceholderData }
-          wordBreak="break-all"
-          whiteSpace="normal"
-        >
-          <Skeleton isLoaded={ !isPlaceholderData }>
-            { data.revert_reason }
-          </Skeleton>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="The revert reason of the User operation"
+            isLoading={ isPlaceholderData }
+          >
+            Revert reason
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value
+            wordBreak="break-all"
+            whiteSpace="normal"
+          >
+            <Skeleton isLoaded={ !isPlaceholderData }>
+              { data.revert_reason }
+            </Skeleton>
+          </DetailsInfoItem.Value>
+        </>
       ) }
+
       { data.timestamp && (
-        <DetailsInfoItem
-          title="Timestamp"
-          hint="Date and time of User operation"
-          isLoading={ isPlaceholderData }
-        >
-          <DetailsTimestamp timestamp={ data.timestamp } isLoading={ isPlaceholderData }/>
-        </DetailsInfoItem>
+        <>
+          <DetailsInfoItem.Label
+            hint="Date and time of User operation"
+            isLoading={ isPlaceholderData }
+          >
+            Timestamp
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <DetailsTimestamp timestamp={ data.timestamp } isLoading={ isPlaceholderData }/>
+          </DetailsInfoItem.Value>
+        </>
+
       ) }
       { !config.UI.views.tx.hiddenFields?.tx_fee && (
-        <DetailsInfoItem
-          title="Fee"
-          hint="Total User operation fee"
-          isLoading={ isPlaceholderData }
-        >
-          <CurrencyValue
-            value={ data.fee }
-            currency={ currencyUnits.ether }
+        <>
+          <DetailsInfoItem.Label
+            hint="Total User operation fee"
             isLoading={ isPlaceholderData }
-          />
-        </DetailsInfoItem>
+          >
+            Fee
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <CurrencyValue
+              value={ data.fee }
+              currency={ currencyUnits.ether }
+              isLoading={ isPlaceholderData }
+            />
+          </DetailsInfoItem.Value>
+        </>
       ) }
-      <DetailsInfoItem
-        title="Gas limit"
+
+      <DetailsInfoItem.Label
         hint="Gas limit for the User operation"
         isLoading={ isPlaceholderData }
       >
+        Gas limit
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData }>
           { BigNumber(data.gas).toFormat() }
         </Skeleton>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Gas used"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Actual gas amount used by the User operation"
         isLoading={ isPlaceholderData }
       >
+        Gas used
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData }>
           { BigNumber(data.gas_used).toFormat() }
         </Skeleton>
@@ -148,28 +179,37 @@ const UserOpDetails = ({ query }: Props) => {
           value={ BigNumber(data.gas_used).dividedBy(BigNumber(data.gas)).toNumber() }
           isLoading={ isPlaceholderData }
         />
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Transaction hash"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Hash of the transaction this User operation belongs to"
         isLoading={ isPlaceholderData }
       >
+        Transaction hash
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <TxEntity hash={ data.transaction_hash } isLoading={ isPlaceholderData } noCopy={ false }/>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Block"
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Block number containing this User operation"
         isLoading={ isPlaceholderData }
       >
-        <BlockEntity number={ data.block_number } isLoading={ isPlaceholderData }/>
-      </DetailsInfoItem>
-      <DetailsInfoItem
-        title="Entry point"
+        Block
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
+        <BlockEntity number={ Number(data.block_number) } isLoading={ isPlaceholderData }/>
+      </DetailsInfoItem.Value>
+
+      <DetailsInfoItem.Label
         hint="Contract that executes bundles of User operations"
         isLoading={ isPlaceholderData }
       >
+        Entry point
+      </DetailsInfoItem.Label>
+      <DetailsInfoItem.Value>
         <AddressStringOrParam address={ data.entry_point } isLoading={ isPlaceholderData }/>
-      </DetailsInfoItem>
+      </DetailsInfoItem.Value>
 
       { config.features.txInterpretation.isEnabled && <UserOpDetailsActions hash={ data.hash } isUserOpDataLoading={ isPlaceholderData }/> }
 
@@ -194,118 +234,162 @@ const UserOpDetails = ({ query }: Props) => {
         <>
           <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
 
-          <DetailsInfoItem
-            title="Call gas limit"
+          <DetailsInfoItem.Label
             hint="Gas limit for execution phase"
           >
+            Call gas limit
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
             { BigNumber(data.call_gas_limit).toFormat() }
-          </DetailsInfoItem>
-          <DetailsInfoItem
-            title="Verification gas limit"
+          </DetailsInfoItem.Value>
+
+          <DetailsInfoItem.Label
             hint="Gas limit for verification phase"
           >
+            Verification gas limit
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
             { BigNumber(data.verification_gas_limit).toFormat() }
-          </DetailsInfoItem>
-          <DetailsInfoItem
-            title="Pre-verification gas"
+          </DetailsInfoItem.Value>
+
+          <DetailsInfoItem.Label
             hint="Gas to compensate the bundler"
           >
+            Pre-verification gas
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
             { BigNumber(data.pre_verification_gas).toFormat() }
-          </DetailsInfoItem>
+          </DetailsInfoItem.Value>
+
           { !config.UI.views.tx.hiddenFields?.gas_fees && (
             <>
-              <DetailsInfoItem
-                title="Max fee per gas"
+              <DetailsInfoItem.Label
                 hint="Maximum fee per gas "
               >
+                Max fee per gas
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
                 <Text>{ BigNumber(data.max_fee_per_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text>
                 <Text variant="secondary" whiteSpace="pre">
                   { space }({ BigNumber(data.max_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })
                 </Text>
-              </DetailsInfoItem><DetailsInfoItem
-                title="Max priority fee per gas"
+              </DetailsInfoItem.Value>
+
+              <DetailsInfoItem.Label
                 hint="Maximum priority fee per gas"
               >
+                Max priority fee per gas
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
                 <Text>{ BigNumber(data.max_priority_fee_per_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text>
                 <Text variant="secondary" whiteSpace="pre">
                   { space }({ BigNumber(data.max_priority_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })
                 </Text>
-              </DetailsInfoItem>
+              </DetailsInfoItem.Value>
             </>
           ) }
 
           <DetailsInfoItemDivider/>
 
           { data.aggregator && (
-            <DetailsInfoItem
-              title="Aggregator"
-              hint="Helper contract to validate an aggregated signature"
-            >
-              <AddressStringOrParam address={ data.aggregator }/>
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="Helper contract to validate an aggregated signature"
+              >
+                Aggregator
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <AddressStringOrParam address={ data.aggregator }/>
+              </DetailsInfoItem.Value>
+            </>
           ) }
+
           { data.aggregator_signature && (
-            <DetailsInfoItem
-              title="Aggregator signature"
-              hint="Aggregator signature"
-            >
-              { data.aggregator_signature }
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="Aggregator signature"
+              >
+                Aggregator signature
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                { data.aggregator_signature }
+              </DetailsInfoItem.Value>
+            </>
           ) }
-          <DetailsInfoItem
-            title="Bundler"
+
+          <DetailsInfoItem.Label
             hint="A node (block builder) that handles User operations"
           >
+            Bundler
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
             <AddressStringOrParam address={ data.bundler }/>
-          </DetailsInfoItem>
+          </DetailsInfoItem.Value>
+
           { data.factory && (
-            <DetailsInfoItem
-              title="Factory"
-              hint="Smart contract that deploys new smart contract wallets for users"
-            >
-              <AddressStringOrParam address={ data.factory }/>
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="Smart contract that deploys new smart contract wallets for users"
+              >
+                Factory
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <AddressStringOrParam address={ data.factory }/>
+              </DetailsInfoItem.Value>
+            </>
           ) }
+
           { data.paymaster && (
-            <DetailsInfoItem
-              title="Paymaster"
-              hint="Contract to sponsor the gas fees for User operations"
-            >
-              <AddressStringOrParam address={ data.paymaster }/>
-            </DetailsInfoItem>
+            <>
+              <DetailsInfoItem.Label
+                hint="Contract to sponsor the gas fees for User operations"
+              >
+                Paymaster
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                <AddressStringOrParam address={ data.paymaster }/>
+              </DetailsInfoItem.Value>
+            </>
           ) }
-          <DetailsInfoItem
-            title="Sponsor type"
+
+          <DetailsInfoItem.Label
             hint="Type of the gas fees sponsor"
           >
+            Sponsor type
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
             <UserOpSponsorType sponsorType={ data.sponsor_type }/>
-          </DetailsInfoItem>
+          </DetailsInfoItem.Value>
 
           <DetailsInfoItemDivider/>
 
-          <DetailsInfoItem
-            title="Signature"
+          <DetailsInfoItem.Label
             hint="Used to validate a User operation along with the nonce during verification"
+          >
+            Signature
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value
             wordBreak="break-all"
             whiteSpace="normal"
-
           >
             { data.signature }
-          </DetailsInfoItem>
-          <DetailsInfoItem
-            title="Nonce"
+          </DetailsInfoItem.Value>
+
+          <DetailsInfoItem.Label
             hint="Anti-replay protection; also used as the salt for first-time account creation"
+          >
+            Nonce
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value
             wordBreak="break-all"
             whiteSpace="normal"
           >
             { data.nonce }
-          </DetailsInfoItem>
-          <DetailsInfoItem
-            title="Call data"
-            hint="Data that’s passed to the sender for execution"
-          >
-            <RawInputData hex={ data.call_data }/>
-          </DetailsInfoItem>
+          </DetailsInfoItem.Value>
+
+          <UserOpCallData data={ data }/>
+
+          <UserOpDecodedCallData data={ data }/>
         </>
       ) }
     </Grid>
diff --git a/ui/userOp/UserOpSubHeading.tsx b/ui/userOp/UserOpSubHeading.tsx
index 230f946bb3..f7f3c8c9f6 100644
--- a/ui/userOp/UserOpSubHeading.tsx
+++ b/ui/userOp/UserOpSubHeading.tsx
@@ -13,7 +13,7 @@ import UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
 import TxInterpretation from 'ui/shared/tx/interpretation/TxInterpretation';
 
 type Props = {
-  hash?: string;
+  hash: string;
   // userOpQuery: UseQueryResult<UserOp, ResourceError<unknown>>;
 }
 
diff --git a/ui/userOps/UserOpsContent.tsx b/ui/userOps/UserOpsContent.tsx
index 8d2b8c756c..829ad5b948 100644
--- a/ui/userOps/UserOpsContent.tsx
+++ b/ui/userOps/UserOpsContent.tsx
@@ -1,7 +1,7 @@
 import { Hide, Show } from '@chakra-ui/react';
 import React from 'react';
 
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
@@ -26,7 +26,7 @@ const UserOpsContent = ({ query, showTx = true, showSender = true }: Props) => {
       <Hide below="lg" ssr={ false }>
         <UserOpsTable
           items={ query.data.items }
-          top={ query.pagination.isVisible ? 80 : 0 }
+          top={ query.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
           isLoading={ query.isPlaceholderData }
           showTx={ showTx }
           showSender={ showSender }
diff --git a/ui/userOps/UserOpsListItem.tsx b/ui/userOps/UserOpsListItem.tsx
index e43fcbea7a..df9a97660a 100644
--- a/ui/userOps/UserOpsListItem.tsx
+++ b/ui/userOps/UserOpsListItem.tsx
@@ -4,13 +4,13 @@ import React from 'react';
 import type { UserOpsItem } from 'types/api/userOps';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import UserOpStatus from 'ui/shared/userOps/UserOpStatus';
 
 type Props = {
@@ -21,8 +21,6 @@ type Props = {
 };
 
 const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => {
-  const timeAgo = dayjs(item.timestamp).fromNow();
-
   return (
     <ListItemMobileGrid.Container gridTemplateColumns="100px auto">
 
@@ -33,7 +31,12 @@ const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block"><span>{ timeAgo }</span></Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Status</ListItemMobileGrid.Label>
@@ -71,7 +74,7 @@ const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => {
       <ListItemMobileGrid.Label isLoading={ isLoading }>Block</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <BlockEntity
-          number={ item.block_number }
+          number={ Number(item.block_number) }
           isLoading={ isLoading }
           fontSize="sm"
           lineHeight={ 5 }
diff --git a/ui/userOps/UserOpsTableItem.tsx b/ui/userOps/UserOpsTableItem.tsx
index 476e931fc2..926a165457 100644
--- a/ui/userOps/UserOpsTableItem.tsx
+++ b/ui/userOps/UserOpsTableItem.tsx
@@ -1,15 +1,15 @@
-import { Td, Tr, Skeleton } from '@chakra-ui/react';
+import { Td, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { UserOpsItem } from 'types/api/userOps';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import UserOpStatus from 'ui/shared/userOps/UserOpStatus';
 
  type Props = {
@@ -20,15 +20,18 @@ import UserOpStatus from 'ui/shared/userOps/UserOpStatus';
  };
 
 const UserOpsTableItem = ({ item, isLoading, showTx, showSender }: Props) => {
-  const timeAgo = dayjs(item.timestamp).fromNow();
-
   return (
     <Tr>
       <Td verticalAlign="middle">
         <UserOpEntity hash={ item.hash } isLoading={ isLoading } noIcon fontWeight={ 700 } truncation="constant_long"/>
       </Td>
       <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block"><span>{ timeAgo }</span></Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
       </Td>
       <Td verticalAlign="middle">
         <UserOpStatus status={ item.status } isLoading={ isLoading }/>
@@ -54,7 +57,7 @@ const UserOpsTableItem = ({ item, isLoading, showTx, showSender }: Props) => {
       ) }
       <Td verticalAlign="middle">
         <BlockEntity
-          number={ item.block_number }
+          number={ Number(item.block_number) }
           isLoading={ isLoading }
           fontSize="sm"
           lineHeight={ 5 }
diff --git a/ui/validators/ValidatorsCounters.tsx b/ui/validators/ValidatorsCounters.tsx
deleted file mode 100644
index 2e056ff1aa..0000000000
--- a/ui/validators/ValidatorsCounters.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Box } from '@chakra-ui/react';
-import React from 'react';
-
-import { getFeaturePayload } from 'configs/app/features/types';
-
-import config from 'configs/app';
-import useApiQuery from 'lib/api/useApiQuery';
-import { VALIDATORS_COUNTERS } from 'stubs/validators';
-import StatsWidget from 'ui/shared/stats/StatsWidget';
-
-const ValidatorsCounters = () => {
-  const countersQuery = useApiQuery('validators_counters', {
-    pathParams: { chainType: getFeaturePayload(config.features.validators)?.chainType },
-    queryOptions: {
-      enabled: config.features.validators.isEnabled,
-      placeholderData: VALIDATORS_COUNTERS,
-    },
-  });
-
-  if (!countersQuery.data) {
-    return null;
-  }
-
-  return (
-    <Box columnGap={ 3 } rowGap={ 3 } mb={ 6 } display="grid" gridTemplateColumns={{ base: '1fr', lg: 'repeat(2, 1fr)' }}>
-      <StatsWidget
-        label="Total validators"
-        value={ Number(countersQuery.data.validators_counter).toLocaleString() }
-        diff={ Number(countersQuery.data.new_validators_counter_24h).toLocaleString() }
-        isLoading={ countersQuery.isPlaceholderData }
-      />
-      <StatsWidget
-        label="Active validators"
-        value={ `${ Number(countersQuery.data.active_validators_percentage).toLocaleString() }%` }
-        isLoading={ countersQuery.isPlaceholderData }
-      />
-    </Box>
-  );
-};
-
-export default React.memo(ValidatorsCounters);
diff --git a/ui/validators/ValidatorsFilter.tsx b/ui/validators/ValidatorsFilter.tsx
deleted file mode 100644
index 08ca7dce94..0000000000
--- a/ui/validators/ValidatorsFilter.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import {
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuOptionGroup,
-  MenuItemOption,
-  useDisclosure,
-} from '@chakra-ui/react';
-import React from 'react';
-
-import type { ValidatorsFilters } from 'types/api/validators';
-
-import FilterButton from 'ui/shared/filters/FilterButton';
-
-interface Props {
-  isActive: boolean;
-  defaultValue: ValidatorsFilters['state_filter'] | undefined;
-  onChange: (nextValue: string | Array<string>) => void;
-}
-
-const ValidatorsFilter = ({ onChange, defaultValue, isActive }: Props) => {
-  const { isOpen, onToggle } = useDisclosure();
-
-  return (
-    <Menu>
-      <MenuButton>
-        <FilterButton
-          isActive={ isOpen || isActive }
-          appliedFiltersNum={ isActive ? 1 : 0 }
-          onClick={ onToggle }
-          as="div"
-        />
-      </MenuButton>
-      <MenuList zIndex="popover">
-        <MenuOptionGroup defaultValue={ defaultValue || 'all' } title="Status" type="radio" onChange={ onChange }>
-          <MenuItemOption value="all">All</MenuItemOption>
-          <MenuItemOption value="active">Active</MenuItemOption>
-          <MenuItemOption value="probation">Probation</MenuItemOption>
-          <MenuItemOption value="inactive">Inactive</MenuItemOption>
-        </MenuOptionGroup>
-      </MenuList>
-    </Menu>
-  );
-};
-
-export default React.memo(ValidatorsFilter);
diff --git a/ui/validators/ValidatorsList.tsx b/ui/validators/ValidatorsList.tsx
deleted file mode 100644
index abb7305ca0..0000000000
--- a/ui/validators/ValidatorsList.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Box } from '@chakra-ui/react';
-import React from 'react';
-
-import type { Validator } from 'types/api/validators';
-
-import ValidatorsListItem from './ValidatorsListItem';
-
-const ValidatorsList = ({ data, isLoading }: { data: Array<Validator>; isLoading: boolean }) => {
-  return (
-    <Box>
-      { data.map((item, index) => (
-        <ValidatorsListItem
-          key={ item.address.hash + (isLoading ? index : '') }
-          data={ item }
-          isLoading={ isLoading }
-        />
-      )) }
-    </Box>
-  );
-};
-
-export default React.memo(ValidatorsList);
diff --git a/ui/validators/ValidatorsListItem.tsx b/ui/validators/ValidatorsListItem.tsx
deleted file mode 100644
index 35c97654d6..0000000000
--- a/ui/validators/ValidatorsListItem.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Skeleton } from '@chakra-ui/react';
-import React from 'react';
-
-import type { Validator } from 'types/api/validators';
-
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
-import ValidatorStatus from 'ui/shared/statusTag/ValidatorStatus';
-
-interface Props {
-  data: Validator;
-  isLoading?: boolean;
-}
-
-const ValidatorsListItem = ({ data, isLoading }: Props) => {
-
-  return (
-    <ListItemMobileGrid.Container>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Address</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <AddressEntity
-          isLoading={ isLoading }
-          address={ data.address }
-          truncation="constant"
-        />
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Status</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <ValidatorStatus state={ data.state } isLoading={ isLoading }/>
-      </ListItemMobileGrid.Value>
-
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Blocks</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
-          { data.blocks_validated_count.toLocaleString() }
-        </Skeleton>
-      </ListItemMobileGrid.Value>
-    </ListItemMobileGrid.Container>
-  );
-};
-
-export default React.memo(ValidatorsListItem);
diff --git a/ui/validators/ValidatorsTable.tsx b/ui/validators/ValidatorsTable.tsx
deleted file mode 100644
index 2c36cf1987..0000000000
--- a/ui/validators/ValidatorsTable.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Table, Tbody, Tr, Th, Link } from '@chakra-ui/react';
-import React from 'react';
-
-import type { Validator, ValidatorsSorting, ValidatorsSortingField, ValidatorsSortingValue } from 'types/api/validators';
-
-import IconSvg from 'ui/shared/IconSvg';
-import getNextSortValue from 'ui/shared/sort/getNextSortValue';
-import { default as Thead } from 'ui/shared/TheadSticky';
-
-import { SORT_SEQUENCE } from './utils';
-import ValidatorsTableItem from './ValidatorsTableItem';
-
-interface Props {
-  data: Array<Validator>;
-  sort: ValidatorsSortingValue | undefined;
-  setSorting: (val: ValidatorsSortingValue | undefined) => void;
-  isLoading?: boolean;
-}
-
-const ValidatorsTable = ({ data, sort, setSorting, isLoading }: Props) => {
-  const sortIconTransform = sort?.includes('asc' as ValidatorsSorting['order']) ? 'rotate(-90deg)' : 'rotate(90deg)';
-
-  const onSortToggle = React.useCallback((field: ValidatorsSortingField) => () => {
-    const value = getNextSortValue<ValidatorsSortingField, ValidatorsSortingValue>(SORT_SEQUENCE, field)(sort);
-    setSorting(value);
-  }, [ sort, setSorting ]);
-
-  return (
-    <Table variant="simple" size="sm">
-      <Thead top={ 80 }>
-        <Tr>
-          <Th width="50%">Validator’s address</Th>
-          <Th width="25%">
-            <Link
-              display="flex"
-              alignItems="center"
-              onClick={ isLoading ? undefined : onSortToggle('state') }
-              columnGap={ 1 }
-            >
-              { sort?.includes('state') && <IconSvg name="arrows/east" boxSize={ 4 } transform={ sortIconTransform }/> }
-              Status
-            </Link>
-          </Th>
-          <Th width="25%" isNumeric>
-            <Link
-              display="flex"
-              alignItems="center"
-              justifyContent="flex-end"
-              onClick={ isLoading ? undefined : onSortToggle('blocks_validated') }
-              columnGap={ 1 }
-            >
-              { sort?.includes('blocks_validated') && <IconSvg name="arrows/east" boxSize={ 4 } transform={ sortIconTransform }/> }
-              Blocks
-            </Link>
-          </Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        { data.map((item, index) => (
-          <ValidatorsTableItem
-            key={ item.address.hash + (isLoading ? index : '') }
-            data={ item }
-            isLoading={ isLoading }/>
-        )) }
-      </Tbody>
-    </Table>
-  );
-};
-
-export default React.memo(ValidatorsTable);
diff --git a/ui/validators/ValidatorsTableItem.tsx b/ui/validators/ValidatorsTableItem.tsx
deleted file mode 100644
index e4c600357c..0000000000
--- a/ui/validators/ValidatorsTableItem.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Tr, Td, Skeleton } from '@chakra-ui/react';
-import React from 'react';
-
-import type { Validator } from 'types/api/validators';
-
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import ValidatorStatus from 'ui/shared/statusTag/ValidatorStatus';
-
-interface Props {
-  data: Validator;
-  isLoading?: boolean;
-}
-
-const ValidatorsTableItem = ({ data, isLoading }: Props) => {
-  return (
-    <Tr>
-      <Td verticalAlign="middle">
-        <AddressEntity
-          address={ data.address }
-          isLoading={ isLoading }
-          truncation="constant"
-        />
-      </Td>
-      <Td verticalAlign="middle">
-        <ValidatorStatus state={ data.state } isLoading={ isLoading }/>
-      </Td>
-      <Td verticalAlign="middle" isNumeric>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
-          { data.blocks_validated_count.toLocaleString() }
-        </Skeleton>
-      </Td>
-    </Tr>
-  );
-};
-
-export default React.memo(ValidatorsTableItem);
diff --git a/ui/validators/utils.ts b/ui/validators/utils.ts
deleted file mode 100644
index d35b6dce11..0000000000
--- a/ui/validators/utils.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { ValidatorsSortingValue, ValidatorsSortingField } from 'types/api/validators';
-
-import type { Option } from 'ui/shared/sort/Sort';
-
-export const SORT_OPTIONS: Array<Option<ValidatorsSortingValue>> = [
-  { title: 'Default', id: undefined },
-  { title: 'Status descending', id: 'state-desc' },
-  { title: 'Status ascending', id: 'state-asc' },
-  { title: 'Blocks validated descending', id: 'blocks_validated-desc' },
-  { title: 'Blocks validated ascending', id: 'blocks_validated-asc' },
-];
-
-export const SORT_SEQUENCE: Record<ValidatorsSortingField, Array<ValidatorsSortingValue | undefined>> = {
-  state: [ 'state-desc', 'state-asc', undefined ],
-  blocks_validated: [ 'blocks_validated-desc', 'blocks_validated-asc', undefined ],
-};
diff --git a/ui/validatorsBlackfort/ValidatorsCounters.tsx b/ui/validatorsBlackfort/ValidatorsCounters.tsx
new file mode 100644
index 0000000000..0901e57688
--- /dev/null
+++ b/ui/validatorsBlackfort/ValidatorsCounters.tsx
@@ -0,0 +1,33 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+import { VALIDATORS_BLACKFORT_COUNTERS } from 'stubs/validators';
+import StatsWidget from 'ui/shared/stats/StatsWidget';
+
+const ValidatorsCounters = () => {
+  const countersQuery = useApiQuery('validators_blackfort_counters', {
+    queryOptions: {
+      enabled: config.features.validators.isEnabled,
+      placeholderData: VALIDATORS_BLACKFORT_COUNTERS,
+    },
+  });
+
+  if (!countersQuery.data) {
+    return null;
+  }
+
+  return (
+    <Box columnGap={ 3 } rowGap={ 3 } mb={ 6 } display="grid" gridTemplateColumns={{ base: '1fr', lg: 'repeat(2, 1fr)' }}>
+      <StatsWidget
+        label="Total validators"
+        value={ Number(countersQuery.data.validators_counter).toLocaleString() }
+        diff={ Number(countersQuery.data.new_validators_counter_24h).toLocaleString() }
+        isLoading={ countersQuery.isPlaceholderData }
+      />
+    </Box>
+  );
+};
+
+export default React.memo(ValidatorsCounters);
diff --git a/ui/validatorsBlackfort/ValidatorsList.tsx b/ui/validatorsBlackfort/ValidatorsList.tsx
new file mode 100644
index 0000000000..90c24fea7e
--- /dev/null
+++ b/ui/validatorsBlackfort/ValidatorsList.tsx
@@ -0,0 +1,22 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ValidatorBlackfort } from 'types/api/validators';
+
+import ValidatorsListItem from './ValidatorsListItem';
+
+const ValidatorsList = ({ data, isLoading }: { data: Array<ValidatorBlackfort>; isLoading: boolean }) => {
+  return (
+    <Box>
+      { data.map((item, index) => (
+        <ValidatorsListItem
+          key={ item.address.hash + (isLoading ? index : '') }
+          data={ item }
+          isLoading={ isLoading }
+        />
+      )) }
+    </Box>
+  );
+};
+
+export default React.memo(ValidatorsList);
diff --git a/ui/validatorsBlackfort/ValidatorsListItem.tsx b/ui/validatorsBlackfort/ValidatorsListItem.tsx
new file mode 100644
index 0000000000..a01a144378
--- /dev/null
+++ b/ui/validatorsBlackfort/ValidatorsListItem.tsx
@@ -0,0 +1,62 @@
+import { Flex, Skeleton } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { ValidatorBlackfort } from 'types/api/validators';
+
+import config from 'configs/app';
+import { currencyUnits } from 'lib/units';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TruncatedValue from 'ui/shared/TruncatedValue';
+
+interface Props {
+  data: ValidatorBlackfort;
+  isLoading?: boolean;
+}
+
+const ValidatorsListItem = ({ data, isLoading }: Props) => {
+
+  return (
+    <ListItemMobileGrid.Container gridTemplateColumns="130px auto">
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Address</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <AddressEntity
+          isLoading={ isLoading }
+          address={ data.address }
+          truncation="constant"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Name</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Flex><TruncatedValue value={ data.name } isLoading={ isLoading }/></Flex>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Commission</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { `${ data.commission / 100 }%` }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Self bonded</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { `${ BigNumber(data.self_bonded_amount).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() } ${ currencyUnits.ether }` }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Delegated amount</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { `${ BigNumber(data.delegated_amount).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() } ${ currencyUnits.ether }` }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default React.memo(ValidatorsListItem);
diff --git a/ui/validatorsBlackfort/ValidatorsTable.tsx b/ui/validatorsBlackfort/ValidatorsTable.tsx
new file mode 100644
index 0000000000..cf7b839b7f
--- /dev/null
+++ b/ui/validatorsBlackfort/ValidatorsTable.tsx
@@ -0,0 +1,68 @@
+import { Table, Tbody, Tr, Th, Link } from '@chakra-ui/react';
+import React from 'react';
+
+import type {
+  ValidatorBlackfort,
+  ValidatorsBlackfortSorting,
+  ValidatorsBlackfortSortingField,
+  ValidatorsBlackfortSortingValue,
+} from 'types/api/validators';
+
+import { currencyUnits } from 'lib/units';
+import IconSvg from 'ui/shared/IconSvg';
+import getNextSortValue from 'ui/shared/sort/getNextSortValue';
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import { VALIDATORS_BLACKFORT_SORT_SEQUENCE } from './utils';
+import ValidatorsTableItem from './ValidatorsTableItem';
+
+interface Props {
+  data: Array<ValidatorBlackfort>;
+  sort: ValidatorsBlackfortSortingValue | undefined;
+  setSorting: (val: ValidatorsBlackfortSortingValue | undefined) => void;
+  isLoading?: boolean;
+  top: number;
+}
+
+const ValidatorsTable = ({ data, sort, setSorting, isLoading, top }: Props) => {
+  const sortIconTransform = sort?.includes('asc' as ValidatorsBlackfortSorting['order']) ? 'rotate(-90deg)' : 'rotate(90deg)';
+
+  const onSortToggle = React.useCallback((field: ValidatorsBlackfortSortingField) => () => {
+    const value = getNextSortValue<ValidatorsBlackfortSortingField, ValidatorsBlackfortSortingValue>(VALIDATORS_BLACKFORT_SORT_SEQUENCE, field)(sort);
+    setSorting(value);
+  }, [ sort, setSorting ]);
+
+  return (
+    <Table variant="simple" size="sm">
+      <Thead top={ top }>
+        <Tr>
+          <Th>
+            <Link
+              display="flex"
+              alignItems="center"
+              onClick={ isLoading ? undefined : onSortToggle('address_hash') }
+              columnGap={ 1 }
+            >
+              { sort?.includes('address') && <IconSvg name="arrows/east" boxSize={ 4 } transform={ sortIconTransform }/> }
+              Validator’s address
+            </Link>
+          </Th>
+          <Th>Name</Th>
+          <Th isNumeric>Commission</Th>
+          <Th isNumeric>{ `Self bonded ${ currencyUnits.ether }` }</Th>
+          <Th isNumeric>{ `Delegated amount ${ currencyUnits.ether }` }</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { data.map((item, index) => (
+          <ValidatorsTableItem
+            key={ item.address.hash + (isLoading ? index : '') }
+            data={ item }
+            isLoading={ isLoading }/>
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default React.memo(ValidatorsTable);
diff --git a/ui/validatorsBlackfort/ValidatorsTableItem.tsx b/ui/validatorsBlackfort/ValidatorsTableItem.tsx
new file mode 100644
index 0000000000..35e7cd0cbc
--- /dev/null
+++ b/ui/validatorsBlackfort/ValidatorsTableItem.tsx
@@ -0,0 +1,50 @@
+import { Tr, Td, Skeleton, Flex } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { ValidatorBlackfort } from 'types/api/validators';
+
+import config from 'configs/app';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TruncatedValue from 'ui/shared/TruncatedValue';
+
+interface Props {
+  data: ValidatorBlackfort;
+  isLoading?: boolean;
+}
+
+const ValidatorsTableItem = ({ data, isLoading }: Props) => {
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <AddressEntity
+          address={ data.address }
+          isLoading={ isLoading }
+          truncation="constant"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <Flex>
+          <TruncatedValue value={ data.name } isLoading={ isLoading }/>
+        </Flex>
+      </Td>
+      <Td verticalAlign="middle" isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { `${ data.commission / 100 }%` }
+        </Skeleton>
+      </Td>
+      <Td verticalAlign="middle" isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { BigNumber(data.self_bonded_amount).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() }
+        </Skeleton>
+      </Td>
+      <Td verticalAlign="middle" isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { BigNumber(data.delegated_amount).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() }
+        </Skeleton>
+      </Td>
+    </Tr>
+  );
+};
+
+export default React.memo(ValidatorsTableItem);
diff --git a/ui/validatorsBlackfort/utils.ts b/ui/validatorsBlackfort/utils.ts
new file mode 100644
index 0000000000..a146199674
--- /dev/null
+++ b/ui/validatorsBlackfort/utils.ts
@@ -0,0 +1,16 @@
+import type {
+  ValidatorsBlackfortSortingValue,
+  ValidatorsBlackfortSortingField,
+} from 'types/api/validators';
+
+import type { TOption } from 'ui/shared/sort/Option';
+
+export const VALIDATORS_BLACKFORT_SORT_OPTIONS: Array<TOption<ValidatorsBlackfortSortingValue>> = [
+  { title: 'Default', id: undefined },
+  { title: 'Address descending', id: 'address_hash-desc' },
+  { title: 'Address ascending', id: 'address_hash-asc' },
+];
+
+export const VALIDATORS_BLACKFORT_SORT_SEQUENCE: Record<ValidatorsBlackfortSortingField, Array<ValidatorsBlackfortSortingValue | undefined>> = {
+  address_hash: [ 'address_hash-desc', 'address_hash-asc', undefined ],
+};
diff --git a/ui/validatorsStability/ValidatorsCounters.tsx b/ui/validatorsStability/ValidatorsCounters.tsx
new file mode 100644
index 0000000000..3e76e81312
--- /dev/null
+++ b/ui/validatorsStability/ValidatorsCounters.tsx
@@ -0,0 +1,38 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+import { VALIDATORS_STABILITY_COUNTERS } from 'stubs/validators';
+import StatsWidget from 'ui/shared/stats/StatsWidget';
+
+const ValidatorsCounters = () => {
+  const countersQuery = useApiQuery('validators_stability_counters', {
+    queryOptions: {
+      enabled: config.features.validators.isEnabled,
+      placeholderData: VALIDATORS_STABILITY_COUNTERS,
+    },
+  });
+
+  if (!countersQuery.data) {
+    return null;
+  }
+
+  return (
+    <Box columnGap={ 3 } rowGap={ 3 } mb={ 6 } display="grid" gridTemplateColumns={{ base: '1fr', lg: 'repeat(2, 1fr)' }}>
+      <StatsWidget
+        label="Total validators"
+        value={ Number(countersQuery.data.validators_counter).toLocaleString() }
+        diff={ Number(countersQuery.data.new_validators_counter_24h).toLocaleString() }
+        isLoading={ countersQuery.isPlaceholderData }
+      />
+      <StatsWidget
+        label="Active validators"
+        value={ `${ Number(countersQuery.data.active_validators_percentage).toLocaleString() }%` }
+        isLoading={ countersQuery.isPlaceholderData }
+      />
+    </Box>
+  );
+};
+
+export default React.memo(ValidatorsCounters);
diff --git a/ui/validatorsStability/ValidatorsFilter.tsx b/ui/validatorsStability/ValidatorsFilter.tsx
new file mode 100644
index 0000000000..bcda1b5984
--- /dev/null
+++ b/ui/validatorsStability/ValidatorsFilter.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import type { ValidatorsStabilityFilters } from 'types/api/validators';
+
+import PopoverFilterRadio from 'ui/shared/filters/PopoverFilterRadio';
+
+const OPTIONS = [
+  { value: 'all', label: 'All' },
+  { value: 'active', label: 'Active' },
+  { value: 'probation', label: 'Probation' },
+  { value: 'inactive', label: 'Inactive' },
+];
+
+interface Props {
+  hasActiveFilter: boolean;
+  defaultValue: ValidatorsStabilityFilters['state_filter'] | undefined;
+  onChange: (nextValue: string | Array<string>) => void;
+}
+
+const ValidatorsFilter = ({ onChange, defaultValue, hasActiveFilter }: Props) => {
+  return (
+    <PopoverFilterRadio
+      name="validators_filter"
+      options={ OPTIONS }
+      onChange={ onChange }
+      hasActiveFilter={ hasActiveFilter }
+      defaultValue={ defaultValue || OPTIONS[0].value }
+    />
+  );
+};
+
+export default React.memo(ValidatorsFilter);
diff --git a/ui/validatorsStability/ValidatorsList.tsx b/ui/validatorsStability/ValidatorsList.tsx
new file mode 100644
index 0000000000..1193a908c3
--- /dev/null
+++ b/ui/validatorsStability/ValidatorsList.tsx
@@ -0,0 +1,22 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ValidatorStability } from 'types/api/validators';
+
+import ValidatorsListItem from './ValidatorsListItem';
+
+const ValidatorsList = ({ data, isLoading }: { data: Array<ValidatorStability>; isLoading: boolean }) => {
+  return (
+    <Box>
+      { data.map((item, index) => (
+        <ValidatorsListItem
+          key={ item.address.hash + (isLoading ? index : '') }
+          data={ item }
+          isLoading={ isLoading }
+        />
+      )) }
+    </Box>
+  );
+};
+
+export default React.memo(ValidatorsList);
diff --git a/ui/validatorsStability/ValidatorsListItem.tsx b/ui/validatorsStability/ValidatorsListItem.tsx
new file mode 100644
index 0000000000..668bad3e86
--- /dev/null
+++ b/ui/validatorsStability/ValidatorsListItem.tsx
@@ -0,0 +1,44 @@
+import { Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ValidatorStability } from 'types/api/validators';
+
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import ValidatorStatus from 'ui/shared/statusTag/ValidatorStabilityStatus';
+
+interface Props {
+  data: ValidatorStability;
+  isLoading?: boolean;
+}
+
+const ValidatorsListItem = ({ data, isLoading }: Props) => {
+
+  return (
+    <ListItemMobileGrid.Container>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Address</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <AddressEntity
+          isLoading={ isLoading }
+          address={ data.address }
+          truncation="constant"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Status</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <ValidatorStatus state={ data.state } isLoading={ isLoading }/>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Blocks</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { data.blocks_validated_count.toLocaleString() }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default React.memo(ValidatorsListItem);
diff --git a/ui/validatorsStability/ValidatorsTable.tsx b/ui/validatorsStability/ValidatorsTable.tsx
new file mode 100644
index 0000000000..dd68f96109
--- /dev/null
+++ b/ui/validatorsStability/ValidatorsTable.tsx
@@ -0,0 +1,76 @@
+import { Table, Tbody, Tr, Th, Link } from '@chakra-ui/react';
+import React from 'react';
+
+import type {
+  ValidatorStability,
+  ValidatorsStabilitySorting,
+  ValidatorsStabilitySortingField,
+  ValidatorsStabilitySortingValue,
+} from 'types/api/validators';
+
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import IconSvg from 'ui/shared/IconSvg';
+import getNextSortValue from 'ui/shared/sort/getNextSortValue';
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import { VALIDATORS_STABILITY_SORT_SEQUENCE } from './utils';
+import ValidatorsTableItem from './ValidatorsTableItem';
+
+interface Props {
+  data: Array<ValidatorStability>;
+  sort: ValidatorsStabilitySortingValue | undefined;
+  setSorting: (val: ValidatorsStabilitySortingValue | undefined) => void;
+  isLoading?: boolean;
+}
+
+const ValidatorsTable = ({ data, sort, setSorting, isLoading }: Props) => {
+  const sortIconTransform = sort?.includes('asc' as ValidatorsStabilitySorting['order']) ? 'rotate(-90deg)' : 'rotate(90deg)';
+
+  const onSortToggle = React.useCallback((field: ValidatorsStabilitySortingField) => () => {
+    const value = getNextSortValue<ValidatorsStabilitySortingField, ValidatorsStabilitySortingValue>(VALIDATORS_STABILITY_SORT_SEQUENCE, field)(sort);
+    setSorting(value);
+  }, [ sort, setSorting ]);
+
+  return (
+    <Table variant="simple" size="sm">
+      <Thead top={ ACTION_BAR_HEIGHT_DESKTOP }>
+        <Tr>
+          <Th width="50%">Validator’s address</Th>
+          <Th width="25%">
+            <Link
+              display="flex"
+              alignItems="center"
+              onClick={ isLoading ? undefined : onSortToggle('state') }
+              columnGap={ 1 }
+            >
+              { sort?.includes('state') && <IconSvg name="arrows/east" boxSize={ 4 } transform={ sortIconTransform }/> }
+              Status
+            </Link>
+          </Th>
+          <Th width="25%" isNumeric>
+            <Link
+              display="flex"
+              alignItems="center"
+              justifyContent="flex-end"
+              onClick={ isLoading ? undefined : onSortToggle('blocks_validated') }
+              columnGap={ 1 }
+            >
+              { sort?.includes('blocks_validated') && <IconSvg name="arrows/east" boxSize={ 4 } transform={ sortIconTransform }/> }
+              Blocks
+            </Link>
+          </Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { data.map((item, index) => (
+          <ValidatorsTableItem
+            key={ item.address.hash + (isLoading ? index : '') }
+            data={ item }
+            isLoading={ isLoading }/>
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default React.memo(ValidatorsTable);
diff --git a/ui/validatorsStability/ValidatorsTableItem.tsx b/ui/validatorsStability/ValidatorsTableItem.tsx
new file mode 100644
index 0000000000..7a1231b796
--- /dev/null
+++ b/ui/validatorsStability/ValidatorsTableItem.tsx
@@ -0,0 +1,36 @@
+import { Tr, Td, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ValidatorStability } from 'types/api/validators';
+
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import ValidatorStatus from 'ui/shared/statusTag/ValidatorStabilityStatus';
+
+interface Props {
+  data: ValidatorStability;
+  isLoading?: boolean;
+}
+
+const ValidatorsTableItem = ({ data, isLoading }: Props) => {
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <AddressEntity
+          address={ data.address }
+          isLoading={ isLoading }
+          truncation="constant"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <ValidatorStatus state={ data.state } isLoading={ isLoading }/>
+      </Td>
+      <Td verticalAlign="middle" isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { data.blocks_validated_count.toLocaleString() }
+        </Skeleton>
+      </Td>
+    </Tr>
+  );
+};
+
+export default React.memo(ValidatorsTableItem);
diff --git a/ui/validatorsStability/utils.ts b/ui/validatorsStability/utils.ts
new file mode 100644
index 0000000000..d3e37f8bf0
--- /dev/null
+++ b/ui/validatorsStability/utils.ts
@@ -0,0 +1,19 @@
+import type {
+  ValidatorsStabilitySortingValue,
+  ValidatorsStabilitySortingField,
+} from 'types/api/validators';
+
+import type { TOption } from 'ui/shared/sort/Option';
+
+export const VALIDATORS_STABILITY_SORT_OPTIONS: Array<TOption<ValidatorsStabilitySortingValue>> = [
+  { title: 'Default', id: undefined },
+  { title: 'Status descending', id: 'state-desc' },
+  { title: 'Status ascending', id: 'state-asc' },
+  { title: 'Blocks validated descending', id: 'blocks_validated-desc' },
+  { title: 'Blocks validated ascending', id: 'blocks_validated-asc' },
+];
+
+export const VALIDATORS_STABILITY_SORT_SEQUENCE: Record<ValidatorsStabilitySortingField, Array<ValidatorsStabilitySortingValue | undefined>> = {
+  state: [ 'state-desc', 'state-asc', undefined ],
+  blocks_validated: [ 'blocks_validated-desc', 'blocks_validated-asc', undefined ],
+};
diff --git a/ui/verifiedAddresses/VerifiedAddressesListItem.tsx b/ui/verifiedAddresses/VerifiedAddressesListItem.tsx
index c87e885c91..45b19a661f 100644
--- a/ui/verifiedAddresses/VerifiedAddressesListItem.tsx
+++ b/ui/verifiedAddresses/VerifiedAddressesListItem.tsx
@@ -48,6 +48,7 @@ const VerifiedAddressesListItem = ({ item, application, onAdd, onEdit, isLoading
     }
 
     const token = {
+      type: 'ERC-20' as const,
       icon_url: application.iconUrl,
       address: application.tokenAddress,
       name: item.metadata.tokenName,
@@ -82,7 +83,7 @@ const VerifiedAddressesListItem = ({ item, application, onAdd, onEdit, isLoading
       <ListItemMobileGrid.Label isLoading={ isLoading }>Address</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <AddressEntity
-          address={{ hash: item.contractAddress, is_contract: true, implementation_name: null }}
+          address={{ hash: item.contractAddress, is_contract: true }}
           isLoading={ isLoading }
           w="100%"
         />
diff --git a/ui/verifiedAddresses/VerifiedAddressesTableItem.tsx b/ui/verifiedAddresses/VerifiedAddressesTableItem.tsx
index 7efcaa2e91..640f944ca5 100644
--- a/ui/verifiedAddresses/VerifiedAddressesTableItem.tsx
+++ b/ui/verifiedAddresses/VerifiedAddressesTableItem.tsx
@@ -48,6 +48,7 @@ const VerifiedAddressesTableItem = ({ item, application, onAdd, onEdit, isLoadin
     }
 
     const token = {
+      type: 'ERC-20' as const,
       icon_url: application.iconUrl,
       address: application.tokenAddress,
       name: item.metadata.tokenName,
@@ -68,7 +69,7 @@ const VerifiedAddressesTableItem = ({ item, application, onAdd, onEdit, isLoadin
     <Tr>
       <Td>
         <AddressEntity
-          address={{ hash: item.contractAddress, is_contract: true, implementation_name: null }}
+          address={{ hash: item.contractAddress, is_contract: true }}
           isLoading={ isLoading }
           fontWeight="600"
         />
diff --git a/ui/verifiedContracts/VerifiedContractsCounters.tsx b/ui/verifiedContracts/VerifiedContractsCounters.tsx
index 4d7dcd562f..708b29d823 100644
--- a/ui/verifiedContracts/VerifiedContractsCounters.tsx
+++ b/ui/verifiedContracts/VerifiedContractsCounters.tsx
@@ -1,6 +1,7 @@
 import { Box } from '@chakra-ui/react';
 import React from 'react';
 
+import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import { VERIFIED_CONTRACTS_COUNTERS } from 'stubs/contract';
 import StatsWidget from 'ui/shared/stats/StatsWidget';
@@ -24,6 +25,7 @@ const VerifiedContractsCounters = () => {
         diff={ countersQuery.data.new_smart_contracts_24h }
         diffFormatted={ Number(countersQuery.data.new_smart_contracts_24h).toLocaleString() }
         isLoading={ countersQuery.isPlaceholderData }
+        href={ config.features.stats.isEnabled ? { pathname: '/stats', query: { chartId: 'contractsGrowth' } } : undefined }
       />
       <StatsWidget
         label="Verified contracts"
@@ -31,6 +33,7 @@ const VerifiedContractsCounters = () => {
         diff={ countersQuery.data.new_verified_smart_contracts_24h }
         diffFormatted={ Number(countersQuery.data.new_verified_smart_contracts_24h).toLocaleString() }
         isLoading={ countersQuery.isPlaceholderData }
+        href={ config.features.stats.isEnabled ? { pathname: '/stats', query: { chartId: 'verifiedContractsGrowth' } } : undefined }
       />
     </Box>
   );
diff --git a/ui/verifiedContracts/VerifiedContractsFilter.tsx b/ui/verifiedContracts/VerifiedContractsFilter.tsx
index 36790c5260..7b8d9e6698 100644
--- a/ui/verifiedContracts/VerifiedContractsFilter.tsx
+++ b/ui/verifiedContracts/VerifiedContractsFilter.tsx
@@ -1,45 +1,31 @@
-import {
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuOptionGroup,
-  MenuItemOption,
-  useDisclosure,
-} from '@chakra-ui/react';
 import React from 'react';
 
 import type { VerifiedContractsFilters } from 'types/api/contracts';
 
-import FilterButton from 'ui/shared/filters/FilterButton';
+import PopoverFilterRadio from 'ui/shared/filters/PopoverFilterRadio';
+
+const OPTIONS = [
+  { value: 'all', label: 'All' },
+  { value: 'solidity', label: 'Solidity' },
+  { value: 'vyper', label: 'Vyper' },
+  { value: 'yul', label: 'Yul' },
+];
 
 interface Props {
-  isActive: boolean;
+  hasActiveFilter: boolean;
   defaultValue: VerifiedContractsFilters['filter'] | undefined;
   onChange: (nextValue: string | Array<string>) => void;
 }
 
-const VerifiedContractsFilter = ({ onChange, defaultValue, isActive }: Props) => {
-  const { isOpen, onToggle } = useDisclosure();
-
+const VerifiedContractsFilter = ({ onChange, defaultValue, hasActiveFilter }: Props) => {
   return (
-    <Menu>
-      <MenuButton>
-        <FilterButton
-          isActive={ isOpen || isActive }
-          appliedFiltersNum={ isActive ? 1 : 0 }
-          onClick={ onToggle }
-          as="div"
-        />
-      </MenuButton>
-      <MenuList zIndex="popover">
-        <MenuOptionGroup defaultValue={ defaultValue || 'all' } title="Filter" type="radio" onChange={ onChange }>
-          <MenuItemOption value="all">All</MenuItemOption>
-          <MenuItemOption value="solidity">Solidity</MenuItemOption>
-          <MenuItemOption value="vyper">Vyper</MenuItemOption>
-          <MenuItemOption value="yul">Yul</MenuItemOption>
-        </MenuOptionGroup>
-      </MenuList>
-    </Menu>
+    <PopoverFilterRadio
+      name="verified_contracts_filter"
+      options={ OPTIONS }
+      onChange={ onChange }
+      hasActiveFilter={ hasActiveFilter }
+      defaultValue={ defaultValue || OPTIONS[0].value }
+    />
   );
 };
 
diff --git a/ui/verifiedContracts/VerifiedContractsListItem.tsx b/ui/verifiedContracts/VerifiedContractsListItem.tsx
index 04765654a5..fe64a1fb05 100644
--- a/ui/verifiedContracts/VerifiedContractsListItem.tsx
+++ b/ui/verifiedContracts/VerifiedContractsListItem.tsx
@@ -6,13 +6,14 @@ import type { VerifiedContract } from 'types/api/contracts';
 
 import config from 'configs/app';
 import { CONTRACT_LICENSES } from 'lib/contracts/licenses';
-import dayjs from 'lib/date/dayjs';
 import { currencyUnits } from 'lib/units';
+import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import IconSvg from 'ui/shared/IconSvg';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 interface Props {
   data: VerifiedContract;
@@ -36,12 +37,15 @@ const VerifiedContractsListItem = ({ data, isLoading }: Props) => {
   return (
     <ListItemMobile rowGap={ 3 }>
       <Flex w="100%">
-        <AddressEntity
-          isLoading={ isLoading }
-          address={ data.address }
-          query={{ tab: 'contract' }}
-          noCopy
-        />
+        <Flex alignItems="center" overflow="hidden">
+          <AddressEntity
+            isLoading={ isLoading }
+            address={ data.address }
+            query={{ tab: 'contract' }}
+            noCopy
+          />
+          { data.certified && <ContractCertifiedLabel iconSize={ 5 } boxSize={ 5 } mx={ 2 }/> }
+        </Flex>
         <Skeleton isLoaded={ !isLoading } color="text_secondary" ml="auto">
           <HashStringShorten hash={ data.address.hash } isTooltipDisabled/>
         </Skeleton>
@@ -66,6 +70,14 @@ const VerifiedContractsListItem = ({ data, isLoading }: Props) => {
           <Box color="text_secondary" wordBreak="break-all" whiteSpace="pre-wrap"> ({ data.compiler_version })</Box>
         </Skeleton>
       </Flex>
+      { data.zk_compiler_version && (
+        <Flex columnGap={ 3 }>
+          <Skeleton isLoaded={ !isLoading } fontWeight={ 500 } flexShrink="0">ZK compiler</Skeleton>
+          <Skeleton isLoaded={ !isLoading } color="text_secondary" wordBreak="break-all" whiteSpace="pre-wrap">
+            { data.zk_compiler_version }
+          </Skeleton>
+        </Flex>
+      ) }
       <Flex columnGap={ 3 }>
         <Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>Optimization</Skeleton>
         { data.optimization_enabled ?
@@ -82,9 +94,11 @@ const VerifiedContractsListItem = ({ data, isLoading }: Props) => {
         <Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>Verified</Skeleton>
         <Flex alignItems="center" columnGap={ 2 }>
           <IconSvg name="status/success" boxSize={ 4 } color="green.500" isLoading={ isLoading }/>
-          <Skeleton isLoaded={ !isLoading } color="text_secondary">
-            <span>{ dayjs(data.verified_at).fromNow() }</span>
-          </Skeleton>
+          <TimeAgoWithTooltip
+            timestamp={ data.verified_at }
+            isLoading={ isLoading }
+            color="text_secondary"
+          />
         </Flex>
       </Flex>
       <Flex columnGap={ 3 }>
diff --git a/ui/verifiedContracts/VerifiedContractsTable.tsx b/ui/verifiedContracts/VerifiedContractsTable.tsx
index 5032b78603..ca777b1a15 100644
--- a/ui/verifiedContracts/VerifiedContractsTable.tsx
+++ b/ui/verifiedContracts/VerifiedContractsTable.tsx
@@ -5,6 +5,7 @@ import type { VerifiedContract } from 'types/api/contracts';
 import type { VerifiedContractsSorting, VerifiedContractsSortingField, VerifiedContractsSortingValue } from 'types/api/verifiedContracts';
 
 import { currencyUnits } from 'lib/units';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import IconSvg from 'ui/shared/IconSvg';
 import getNextSortValue from 'ui/shared/sort/getNextSortValue';
 import { default as Thead } from 'ui/shared/TheadSticky';
@@ -28,8 +29,8 @@ const VerifiedContractsTable = ({ data, sort, setSorting, isLoading }: Props) =>
   }, [ sort, setSorting ]);
 
   return (
-    <Table variant="simple" size="sm">
-      <Thead top={ 80 }>
+    <Table variant="simple" size="sm" minW="915px">
+      <Thead top={ ACTION_BAR_HEIGHT_DESKTOP }>
         <Tr>
           <Th width="50%">Contract</Th>
           <Th width="130px" isNumeric>
diff --git a/ui/verifiedContracts/VerifiedContractsTableItem.tsx b/ui/verifiedContracts/VerifiedContractsTableItem.tsx
index 3bafd4446e..0282dea6ca 100644
--- a/ui/verifiedContracts/VerifiedContractsTableItem.tsx
+++ b/ui/verifiedContracts/VerifiedContractsTableItem.tsx
@@ -6,11 +6,12 @@ import type { VerifiedContract } from 'types/api/contracts';
 
 import config from 'configs/app';
 import { CONTRACT_LICENSES } from 'lib/contracts/licenses';
-import dayjs from 'lib/date/dayjs';
+import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import IconSvg from 'ui/shared/IconSvg';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 interface Props {
   data: VerifiedContract;
@@ -34,13 +35,15 @@ const VerifiedContractsTableItem = ({ data, isLoading }: Props) => {
   return (
     <Tr>
       <Td>
-        <AddressEntity
-          address={ data.address }
-          isLoading={ isLoading }
-          query={{ tab: 'contract' }}
-          noCopy
-          mt={ 1 }
-        />
+        <Flex alignItems="center" mt={ 1 }>
+          <AddressEntity
+            address={ data.address }
+            isLoading={ isLoading }
+            query={{ tab: 'contract' }}
+            noCopy
+          />
+          { data.certified && <ContractCertifiedLabel iconSize={ 5 } boxSize={ 5 } ml={ 2 }/> }
+        </Flex>
         <Flex alignItems="center" ml={ 7 }>
           <Skeleton isLoaded={ !isLoading } color="text_secondary" my={ 1 }>
             <HashStringShorten hash={ data.address.hash } isTooltipDisabled/>
@@ -67,6 +70,14 @@ const VerifiedContractsTableItem = ({ data, isLoading }: Props) => {
             </Tooltip>
           </Skeleton>
         </Flex>
+        { data.zk_compiler_version && (
+          <Flex flexWrap="wrap" columnGap={ 2 } my={ 1 }>
+            <Skeleton isLoaded={ !isLoading } >ZK compiler</Skeleton>
+            <Skeleton isLoaded={ !isLoading } color="text_secondary" wordBreak="break-all">
+              <span>{ data.zk_compiler_version }</span>
+            </Skeleton>
+          </Flex>
+        ) }
       </Td>
       <Td>
         <Tooltip label={ isLoading ? undefined : 'Optimization' }>
@@ -87,9 +98,11 @@ const VerifiedContractsTableItem = ({ data, isLoading }: Props) => {
       <Td>
         <Flex alignItems="center" columnGap={ 2 } my={ 1 }>
           <IconSvg name="status/success" boxSize={ 4 } color="green.500" isLoading={ isLoading }/>
-          <Skeleton isLoaded={ !isLoading } color="text_secondary">
-            <span>{ dayjs(data.verified_at).fromNow() }</span>
-          </Skeleton>
+          <TimeAgoWithTooltip
+            timestamp={ data.verified_at }
+            isLoading={ isLoading }
+            color="text_secondary"
+          />
         </Flex>
       </Td>
       <Td>
diff --git a/ui/verifiedContracts/utils.ts b/ui/verifiedContracts/utils.ts
index caf609899f..3f6a13bf65 100644
--- a/ui/verifiedContracts/utils.ts
+++ b/ui/verifiedContracts/utils.ts
@@ -1,8 +1,8 @@
 import type { VerifiedContractsSortingValue, VerifiedContractsSortingField } from 'types/api/verifiedContracts';
 
-import type { Option } from 'ui/shared/sort/Sort';
+import type { TOption } from 'ui/shared/sort/Option';
 
-export const SORT_OPTIONS: Array<Option<VerifiedContractsSortingValue>> = [
+export const SORT_OPTIONS: Array<TOption<VerifiedContractsSortingValue>> = [
   { title: 'Default', id: undefined },
   { title: 'Balance descending', id: 'balance-desc' },
   { title: 'Balance ascending', id: 'balance-asc' },
diff --git a/ui/watchlist/AddressModal/AddressForm.tsx b/ui/watchlist/AddressModal/AddressForm.tsx
index 613d4029ae..23c880f136 100644
--- a/ui/watchlist/AddressModal/AddressForm.tsx
+++ b/ui/watchlist/AddressModal/AddressForm.tsx
@@ -2,7 +2,6 @@ import {
   Box,
   Button,
   Text,
-  useColorModeValue,
 } from '@chakra-ui/react';
 import { useMutation } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
@@ -22,7 +21,7 @@ import TagInput from 'ui/shared/TagInput';
 import AddressFormNotifications from './AddressFormNotifications';
 
 // does it depend on the network?
-const NOTIFICATIONS = [ 'native', 'ERC-20', 'ERC-721' ] as const;
+const NOTIFICATIONS = [ 'native', 'ERC-20', 'ERC-721', 'ERC-404' ] as const;
 
 const TAG_MAX_LENGTH = 35;
 
@@ -50,6 +49,10 @@ type Inputs = {
       outcoming: boolean;
       incoming: boolean;
     };
+    'ERC-404': {
+      outcoming: boolean;
+      incoming: boolean;
+    };
   };
 }
 
@@ -59,11 +62,12 @@ type Checkboxes = 'notification' |
 'notification_settings.ERC-20.outcoming' |
 'notification_settings.ERC-20.incoming' |
 'notification_settings.ERC-721.outcoming' |
-'notification_settings.ERC-721.incoming';
+'notification_settings.ERC-721.incoming' |
+'notification_settings.ERC-404.outcoming' |
+'notification_settings.ERC-404.incoming';
 
 const AddressForm: React.FC<Props> = ({ data, onSuccess, setAlertVisible, isAdd }) => {
   const [ pending, setPending ] = useState(false);
-  const formBackgroundColor = useColorModeValue('white', 'gray.900');
 
   let notificationsDefault = {} as Inputs['notification_settings'];
   if (!data?.notification_settings) {
@@ -96,7 +100,7 @@ const AddressForm: React.FC<Props> = ({ data, onSuccess, setAlertVisible, isAdd
     if (!isAdd && data) {
       // edit address
       return apiFetch('watchlist', {
-        pathParams: { id: data?.id || '' },
+        pathParams: { id: data?.id ? String(data.id) : '' },
         fetchParams: { method: 'PUT', body },
       });
 
@@ -136,15 +140,15 @@ const AddressForm: React.FC<Props> = ({ data, onSuccess, setAlertVisible, isAdd
     return (
       <AddressInput<Inputs, 'address'>
         field={ field }
-        backgroundColor={ formBackgroundColor }
+        bgColor="dialog_bg"
         error={ errors.address }
       />
     );
-  }, [ errors, formBackgroundColor ]);
+  }, [ errors ]);
 
   const renderTagInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'tag'>}) => {
-    return <TagInput<Inputs, 'tag'> field={ field } error={ errors.tag } backgroundColor={ formBackgroundColor }/>;
-  }, [ errors, formBackgroundColor ]);
+    return <TagInput<Inputs, 'tag'> field={ field } error={ errors.tag } bgColor="dialog_bg"/>;
+  }, [ errors ]);
 
   // eslint-disable-next-line react/display-name
   const renderCheckbox = useCallback((text: string) => ({ field }: {field: ControllerRenderProps<Inputs, Checkboxes>}) => (
diff --git a/ui/watchlist/AddressModal/AddressFormNotifications.tsx b/ui/watchlist/AddressModal/AddressFormNotifications.tsx
index f8db8b18a7..526ddb190b 100644
--- a/ui/watchlist/AddressModal/AddressFormNotifications.tsx
+++ b/ui/watchlist/AddressModal/AddressFormNotifications.tsx
@@ -6,9 +6,14 @@ import type { Path, ControllerRenderProps, FieldValues, Control } from 'react-ho
 import config from 'configs/app';
 import CheckboxInput from 'ui/shared/CheckboxInput';
 
-// does it depend on the network?
-const NOTIFICATIONS = [ 'native', 'ERC-20', 'ERC-721' ] as const;
-const NOTIFICATIONS_NAMES = [ config.chain.currency.symbol, 'ERC-20', 'ERC-721, ERC-1155, ERC-404 (NFT)' ];
+const tokenStandardName = config.chain.tokenStandard;
+
+const NOTIFICATIONS = [ 'native', 'ERC-20', 'ERC-721', 'ERC-404' ] as const;
+const NOTIFICATIONS_NAMES = [
+  config.chain.currency.symbol,
+  `${ tokenStandardName }-20`,
+  `${ tokenStandardName }-721, ${ tokenStandardName }-1155 (NFT)`,
+  `${ tokenStandardName }-404` ];
 
 type Props<Inputs extends FieldValues> = {
   control: Control<Inputs>;
diff --git a/ui/watchlist/DeleteAddressModal.tsx b/ui/watchlist/DeleteAddressModal.tsx
index b231a6a0d2..3dc6172be4 100644
--- a/ui/watchlist/DeleteAddressModal.tsx
+++ b/ui/watchlist/DeleteAddressModal.tsx
@@ -20,7 +20,7 @@ const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, onSuccess, data
 
   const mutationFn = useCallback(() => {
     return apiFetch('watchlist', {
-      pathParams: { id: data.id },
+      pathParams: { id: String(data.id) },
       fetchParams: { method: 'DELETE' },
     });
   }, [ data?.id, apiFetch ]);
diff --git a/ui/watchlist/WatchlistTable/WatchListItem.tsx b/ui/watchlist/WatchlistTable/WatchListItem.tsx
index 571306dae2..c8820513e5 100644
--- a/ui/watchlist/WatchlistTable/WatchListItem.tsx
+++ b/ui/watchlist/WatchlistTable/WatchListItem.tsx
@@ -65,7 +65,7 @@ const WatchListItem = ({ item, isLoading, onEditClick, onDeleteClick }: Props) =
       const body = { ...item, notification_methods: { email: !notificationEnabled } };
       setNotificationEnabled(prevState => !prevState);
       return apiFetch('watchlist', {
-        pathParams: { id: item.id },
+        pathParams: { id: String(item.id) },
         fetchParams: { method: 'PUT', body },
       });
     },
diff --git a/ui/watchlist/WatchlistTable/WatchListTableItem.tsx b/ui/watchlist/WatchlistTable/WatchListTableItem.tsx
index 5c33383f30..acab24b073 100644
--- a/ui/watchlist/WatchlistTable/WatchListTableItem.tsx
+++ b/ui/watchlist/WatchlistTable/WatchListTableItem.tsx
@@ -69,7 +69,7 @@ const WatchlistTableItem = ({ item, isLoading, onEditClick, onDeleteClick }: Pro
       const body = { ...item, notification_methods: { email: !notificationEnabled } };
       setNotificationEnabled(prevState => !prevState);
       return apiFetch('watchlist', {
-        pathParams: { id: item.id },
+        pathParams: { id: String(item.id) },
         fetchParams: { method: 'PUT', body },
       });
     },
diff --git a/ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx
index 9b97b53e75..0d1c362b97 100644
--- a/ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx
+++ b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx
@@ -6,12 +6,12 @@ import type { BlockWithdrawalsItem } from 'types/api/block';
 import type { WithdrawalsItem } from 'types/api/withdrawals';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
 import { currencyUnits } from 'lib/units';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 const feature = config.features.beaconChain;
 
@@ -74,7 +74,11 @@ const BeaconChainWithdrawalsListItem = ({ item, isLoading, view }: Props) => {
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
-            <Skeleton isLoaded={ !isLoading } display="inline-block">{ dayjs(item.timestamp).fromNow() }</Skeleton>
+            <TimeAgoWithTooltip
+              timestamp={ item.timestamp }
+              isLoading={ isLoading }
+              display="inline-block"
+            />
           </ListItemMobileGrid.Value>
 
           <ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label>
diff --git a/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx
index f7c509e555..a4e4b37a82 100644
--- a/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx
+++ b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx
@@ -5,10 +5,10 @@ import type { AddressWithdrawalsItem } from 'types/api/address';
 import type { BlockWithdrawalsItem } from 'types/api/block';
 import type { WithdrawalsItem } from 'types/api/withdrawals';
 
-import dayjs from 'lib/date/dayjs';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 type Props = ({
   item: WithdrawalsItem;
@@ -52,9 +52,12 @@ const BeaconChainWithdrawalsTableItem = ({ item, view, isLoading }: Props) => {
       ) }
       { view !== 'block' && (
         <Td verticalAlign="middle" pr={ 12 }>
-          <Skeleton isLoaded={ !isLoading } display="inline-block" color="text_secondary">
-            <span>{ dayjs(item.timestamp).fromNow() }</span>
-          </Skeleton>
+          <TimeAgoWithTooltip
+            timestamp={ item.timestamp }
+            isLoading={ isLoading }
+            color="text_secondary"
+            display="inline-block"
+          />
         </Td>
       ) }
       <Td verticalAlign="middle">
diff --git a/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx
index af58d02600..098d0ef848 100644
--- a/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx
+++ b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx
@@ -8,15 +8,15 @@ import dayjs from 'lib/date/dayjs';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkExternal from 'ui/shared/LinkExternal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
 type Props = { item: OptimisticL2WithdrawalsItem; isLoading?: boolean };
 
 const OptimisticL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
-  const timeAgo = item.l2_timestamp ? dayjs(item.l2_timestamp).fromNow() : null;
   const timeToEnd = item.challenge_period_end ? dayjs(item.challenge_period_end).fromNow(true) + ' left' : null;
 
   if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') {
@@ -57,13 +57,15 @@ const OptimisticL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
         />
       </ListItemMobileGrid.Value>
 
-      { timeAgo && (
+      { item.l2_timestamp && (
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
-            <Skeleton isLoaded={ !isLoading } display="inline-block">
-              { timeAgo }
-            </Skeleton>
+            <TimeAgoWithTooltip
+              timestamp={ item.l2_timestamp }
+              isLoading={ isLoading }
+              display="inline-block"
+            />
           </ListItemMobileGrid.Value>
         </>
       ) }
diff --git a/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx
index ea6104c1fd..569729902d 100644
--- a/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx
+++ b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx
@@ -8,14 +8,14 @@ import dayjs from 'lib/date/dayjs';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkExternal from 'ui/shared/LinkExternal';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
  type Props = { item: OptimisticL2WithdrawalsItem; isLoading?: boolean };
 
 const OptimisticL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
-  const timeAgo = item.l2_timestamp ? dayjs(item.l2_timestamp).fromNow() : 'N/A';
   const timeToEnd = item.challenge_period_end ? dayjs(item.challenge_period_end).fromNow(true) + ' left' : '';
 
   if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') {
@@ -47,9 +47,13 @@ const OptimisticL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
         />
       </Td>
       <Td verticalAlign="middle" pr={ 12 }>
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block">
-          <span> { timeAgo }</span>
-        </Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ item.l2_timestamp }
+          fallbackText="N/A"
+          isLoading={ isLoading }
+          display="inline-block"
+          color="text_secondary"
+        />
       </Td>
       <Td verticalAlign="middle">
         { item.status === 'Ready for relay' && rollupFeature.L2WithdrawalUrl ?
diff --git a/ui/withdrawals/shibarium/WithdrawalsListItem.tsx b/ui/withdrawals/shibarium/WithdrawalsListItem.tsx
index bf34e0365c..fe1f456e56 100644
--- a/ui/withdrawals/shibarium/WithdrawalsListItem.tsx
+++ b/ui/withdrawals/shibarium/WithdrawalsListItem.tsx
@@ -1,23 +1,20 @@
-import { Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ShibariumWithdrawalsItem } from 'types/api/shibarium';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
 import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 const feature = config.features.rollup;
 
 type Props = { item: ShibariumWithdrawalsItem; isLoading?: boolean };
 
 const WithdrawalsListItem = ({ item, isLoading }: Props) => {
-  const timeAgo = item.timestamp ? dayjs(item.timestamp).fromNow() : null;
-
   if (!(feature.isEnabled && feature.type === 'shibarium')) {
     return null;
   }
@@ -69,7 +66,11 @@ const WithdrawalsListItem = ({ item, isLoading }: Props) => {
       </ListItemMobileGrid.Value>
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ timeAgo }</Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          isLoading={ isLoading }
+          display="inline-block"
+        />
       </ListItemMobileGrid.Value>
 
     </ListItemMobileGrid.Container>
diff --git a/ui/withdrawals/shibarium/WithdrawalsTableItem.tsx b/ui/withdrawals/shibarium/WithdrawalsTableItem.tsx
index 13d564b061..479dcfec05 100644
--- a/ui/withdrawals/shibarium/WithdrawalsTableItem.tsx
+++ b/ui/withdrawals/shibarium/WithdrawalsTableItem.tsx
@@ -1,22 +1,20 @@
-import { Td, Tr, Skeleton } from '@chakra-ui/react';
+import { Td, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ShibariumWithdrawalsItem } from 'types/api/shibarium';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
 import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 const feature = config.features.rollup;
 
  type Props = { item: ShibariumWithdrawalsItem; isLoading?: boolean };
 
 const WithdrawalsTableItem = ({ item, isLoading }: Props) => {
-  const timeAgo = dayjs(item.timestamp).fromNow();
-
   if (!(feature.isEnabled && feature.type === 'shibarium')) {
     return null;
   }
@@ -59,7 +57,12 @@ const WithdrawalsTableItem = ({ item, isLoading }: Props) => {
         />
       </Td>
       <Td verticalAlign="middle" pr={ 12 }>
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block"><span>{ timeAgo }</span></Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          isLoading={ isLoading }
+          display="inline-block"
+          color="text_secondary"
+        />
       </Td>
     </Tr>
   );
diff --git a/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx
new file mode 100644
index 0000000000..7ff895f10e
--- /dev/null
+++ b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx
@@ -0,0 +1,99 @@
+import { Skeleton, chakra } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2';
+
+import config from 'configs/app';
+import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: ZkEvmL2WithdrawalsItem; isLoading?: boolean };
+
+const ZkEvmL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'zkEvm') {
+    return null;
+  }
+
+  return (
+    <ListItemMobileGrid.Container>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Block</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BlockEntity
+          number={ item.block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Index</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { item.index }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TxEntity
+          isLoading={ isLoading }
+          hash={ item.l2_transaction_hash }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          isLoading={ isLoading }
+          display="inline-block"
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        { item.l1_transaction_hash ? (
+          <TxEntityL1
+            isLoading={ isLoading }
+            hash={ item.l1_transaction_hash }
+            fontSize="sm"
+            lineHeight={ 5 }
+            truncation="constant_long"
+          />
+        ) : (
+          <chakra.span>
+            Pending Claim
+          </chakra.span>
+        ) }
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { BigNumber(item.value).toFormat() }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Token</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          { item.symbol }
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default ZkEvmL2WithdrawalsListItem;
diff --git a/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTable.tsx b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTable.tsx
new file mode 100644
index 0000000000..d50579e41e
--- /dev/null
+++ b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTable.tsx
@@ -0,0 +1,39 @@
+import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import ZkEvmL2WithdrawalsTableItem from './ZkEvmL2WithdrawalsTableItem';
+
+ type Props = {
+   items: Array<ZkEvmL2WithdrawalsItem>;
+   top: number;
+   isLoading?: boolean;
+ }
+
+const ZkEvmL2DepositsTable = ({ items, top, isLoading }: Props) => {
+  return (
+    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px">
+      <Thead top={ top }>
+        <Tr>
+          <Th>Block</Th>
+          <Th>Index</Th>
+          <Th>L2 txn hash</Th>
+          <Th>Age</Th>
+          <Th>L1 txn hash</Th>
+          <Th isNumeric>Value</Th>
+          <Th>Token</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { items.map((item, index) => (
+          <ZkEvmL2WithdrawalsTableItem key={ String(item.index) + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default ZkEvmL2DepositsTable;
diff --git a/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx
new file mode 100644
index 0000000000..698d54be1b
--- /dev/null
+++ b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx
@@ -0,0 +1,86 @@
+import { Td, Tr, Skeleton, chakra } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2';
+
+import config from 'configs/app';
+import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+
+const rollupFeature = config.features.rollup;
+
+ type Props = { item: ZkEvmL2WithdrawalsItem; isLoading?: boolean };
+
+const ZkEvmL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'zkEvm') {
+    return null;
+  }
+
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <BlockEntity
+          number={ item.block_number }
+          isLoading={ isLoading }
+          fontSize="sm"
+          lineHeight={ 5 }
+          fontWeight={ 600 }
+          noIcon
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading }>
+          <span>{ item.index }</span>
+        </Skeleton>
+      </Td>
+      <Td verticalAlign="middle">
+        <TxEntity
+          isLoading={ isLoading }
+          hash={ item.l2_transaction_hash }
+          fontSize="sm"
+          lineHeight={ 5 }
+          truncation="constant_long"
+          noIcon
+        />
+      </Td>
+      <Td verticalAlign="middle" pr={ 12 }>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+        />
+      </Td>
+      <Td verticalAlign="middle">
+        { item.l1_transaction_hash ? (
+          <TxEntityL1
+            isLoading={ isLoading }
+            hash={ item.l1_transaction_hash }
+            truncation="constant_long"
+            noIcon
+            fontSize="sm"
+            lineHeight={ 5 }
+          />
+        ) : (
+          <chakra.span color="text_secondary">
+            Pending Claim
+          </chakra.span>
+        ) }
+      </Td>
+      <Td verticalAlign="middle" isNumeric>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          <span>{ BigNumber(item.value).toFormat() }</span>
+        </Skeleton>
+      </Td>
+      <Td verticalAlign="middle">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">
+          <span>{ item.symbol }</span>
+        </Skeleton>
+      </Td>
+    </Tr>
+  );
+};
+
+export default ZkEvmL2WithdrawalsTableItem;
diff --git a/yarn.lock b/yarn.lock
index 3c676c28d5..ba4bcb39ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,11 +7,6 @@
   resolved "https://registry.yarnpkg.com/@adraffy/ens-normalize/-/ens-normalize-1.10.0.tgz#d2a39395c587e092d77cbbc80acf956a54f38bf7"
   integrity sha512-nA9XHtlAkYfJxY7bce8DcN7eKxWWCWkU+1GR9d+U6MbNpfwQp8TI7vqOsBsMcHoT4mBu2kypKoSKnghEzOOq5Q==
 
-"@adraffy/ens-normalize@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@adraffy/ens-normalize/-/ens-normalize-1.9.0.tgz#223572538f6bea336750039bb43a4016dcc8182d"
-  integrity sha512-iowxq3U30sghZotgl4s/oJRci6WPBfNO5YYgk2cIOMCHr3LeGPcsZjCEr+33Q4N+oV3OABDAtA+pyvWjbvBifQ==
-
 "@algolia/cache-browser-local-storage@4.22.1":
   version "4.22.1"
   resolved "https://registry.yarnpkg.com/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.22.1.tgz#14b6dc9abc9e3a304a5fffb063d15f30af1032d1"
@@ -566,7 +561,7 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.4.tgz#a770e98fd785c231af9d93f6459d36770993fb32"
   integrity sha512-VLLsx06XkEYqBtE5YGPwfSGwfrjnyPP5oiGty3S8pQLFDFLaS8VwWSIxkTXpcvr5zeYLE6+MBNl2npl/YnfofA==
 
-"@babel/parser@^7.22.15", "@babel/parser@^7.23.5", "@babel/parser@^7.23.6":
+"@babel/parser@^7.22.15", "@babel/parser@^7.23.6":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.6.tgz#ba1c9e512bda72a47e285ae42aff9d2a635a9e3b"
   integrity sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==
@@ -1275,14 +1270,6 @@
     "@babel/helper-validator-option" "^7.18.6"
     "@babel/plugin-transform-typescript" "^7.18.6"
 
-"@babel/runtime-corejs3@^7.10.2":
-  version "7.19.4"
-  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.19.4.tgz#870dbfd9685b3dad5aeb2d00841bb8b6192e3095"
-  integrity sha512-HzjQ8+dzdx7dmZy4DQ8KV8aHi/74AjEbBGTFutBmg/pd3dY5/q1sfuOGPTFGEytlQhWoeVXqcK5BwMgIkRkNDQ==
-  dependencies:
-    core-js-pure "^3.25.1"
-    regenerator-runtime "^0.13.4"
-
 "@babel/runtime-corejs3@^7.20.7":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.21.0.tgz#6e4939d9d9789ff63e2dc58e88f13a3913a24eba"
@@ -1299,7 +1286,7 @@
     core-js-pure "^3.30.2"
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3":
   version "7.19.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.4.tgz#a42f814502ee467d55b38dd1c256f53a7b885c78"
   integrity sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA==
@@ -1320,7 +1307,14 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.20.6", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.23.2":
+"@babel/runtime@^7.19.4":
+  version "7.24.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.5.tgz#230946857c053a36ccc66e1dd03b17dd0c4ed02c"
+  integrity sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
+"@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e"
   integrity sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==
@@ -1432,6 +1426,21 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@blockscout/bens-types@1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@blockscout/bens-types/-/bens-types-1.4.1.tgz#9182a79d9015b7fa2339edf0bfa3cd0c32045e66"
+  integrity sha512-TlZ1HVdZ2Cswm/CcvNoxS+Ydiht/YGaLo//PJR/UmkmihlEFoY4HfVJvVcUnOQXi+Si7FwJ486DPii889nTJsQ==
+
+"@blockscout/stats-types@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@blockscout/stats-types/-/stats-types-1.6.0.tgz#cdb27ab3d3cb1eef7b8b069c39d4e09afda1aec9"
+  integrity sha512-MzItYOsLa3zgoFzRgFAgg7gynSXG0w/GqHzg5BGHcBPbPSp/g7A6mMtyIchI6TnZxxnCwziHHvzmJFXz11emUg==
+
+"@blockscout/visualizer-types@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@blockscout/visualizer-types/-/visualizer-types-0.2.0.tgz#a8ef326d69e29417db124c78f868d68aca959ad1"
+  integrity sha512-gasqbEL89iH8YnH/TIEk0MBSG9SwhEJegY9tnQ1c/jFZOCYjiVkgNwm4oH0ncwCKoNX1GoKAregbkEUwDDw7FQ==
+
 "@braintree/sanitize-url@=6.0.4":
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz#923ca57e173c6b232bbbb07347b1be982f03e783"
@@ -2260,16 +2269,13 @@
     picocolors "^1.0.0"
     sisteransi "^1.0.5"
 
-"@coinbase/wallet-sdk@3.9.1":
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/@coinbase/wallet-sdk/-/wallet-sdk-3.9.1.tgz#503a14671bb392d653623ef2340934e213ac971f"
-  integrity sha512-cGUE8wm1/cMI8irRMVOqbFWYcnNugqCtuy2lnnHfgloBg+GRLs9RsrkOUDMdv/StfUeeKhCDyYudsXXvcL1xIA==
+"@coinbase/wallet-sdk@4.0.4":
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/@coinbase/wallet-sdk/-/wallet-sdk-4.0.4.tgz#634cd89bac93eeaf381a1f026476794e53431ed6"
+  integrity sha512-74c040CRnGhfRjr3ArnkAgud86erIqdkPHNt5HR1k9u97uTIZCJww9eGYT67Qf7gHPpGS/xW8Be1D4dvRm63FA==
   dependencies:
-    bn.js "^5.2.1"
     buffer "^6.0.3"
     clsx "^1.2.1"
-    eth-block-tracker "^7.1.0"
-    eth-json-rpc-filters "^6.0.0"
     eventemitter3 "^5.0.1"
     keccak "^3.0.3"
     preact "^10.16.0"
@@ -2287,6 +2293,11 @@
   resolved "https://registry.yarnpkg.com/@cush/relative/-/relative-1.0.0.tgz#8cd1769bf9bde3bb27dac356b1bc94af40f6cc16"
   integrity sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==
 
+"@discoveryjs/json-ext@0.5.7":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
+  integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
+
 "@emotion/babel-plugin@^11.10.5":
   version "11.10.5"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz#65fa6e1790ddc9e23cc22658a4c5dea423c55c3c"
@@ -2305,23 +2316,6 @@
     source-map "^0.5.7"
     stylis "4.1.3"
 
-"@emotion/babel-plugin@^11.11.0":
-  version "11.11.0"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c"
-  integrity sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==
-  dependencies:
-    "@babel/helper-module-imports" "^7.16.7"
-    "@babel/runtime" "^7.18.3"
-    "@emotion/hash" "^0.9.1"
-    "@emotion/memoize" "^0.8.1"
-    "@emotion/serialize" "^1.1.2"
-    babel-plugin-macros "^3.1.0"
-    convert-source-map "^1.5.0"
-    escape-string-regexp "^4.0.0"
-    find-root "^1.1.0"
-    source-map "^0.5.7"
-    stylis "4.2.0"
-
 "@emotion/cache@^11.10.5", "@emotion/cache@^11.4.0":
   version "11.10.5"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.5.tgz#c142da9351f94e47527ed458f7bbbbe40bb13c12"
@@ -2333,27 +2327,11 @@
     "@emotion/weak-memoize" "^0.3.0"
     stylis "4.1.3"
 
-"@emotion/cache@^11.11.0":
-  version "11.11.0"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff"
-  integrity sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==
-  dependencies:
-    "@emotion/memoize" "^0.8.1"
-    "@emotion/sheet" "^1.2.2"
-    "@emotion/utils" "^1.2.1"
-    "@emotion/weak-memoize" "^0.3.1"
-    stylis "4.2.0"
-
 "@emotion/hash@^0.9.0":
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7"
   integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==
 
-"@emotion/hash@^0.9.1":
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
-  integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
-
 "@emotion/is-prop-valid@^0.8.2":
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
@@ -2368,13 +2346,6 @@
   dependencies:
     "@emotion/memoize" "^0.8.0"
 
-"@emotion/is-prop-valid@^1.2.1":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz#d4175076679c6a26faa92b03bb786f9e52612337"
-  integrity sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==
-  dependencies:
-    "@emotion/memoize" "^0.8.1"
-
 "@emotion/memoize@0.7.4":
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
@@ -2385,11 +2356,6 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
   integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
 
-"@emotion/memoize@^0.8.1":
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
-  integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
-
 "@emotion/react@^11.10.4", "@emotion/react@^11.8.1":
   version "11.10.5"
   resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.5.tgz#95fff612a5de1efa9c0d535384d3cfa115fe175d"
@@ -2404,20 +2370,6 @@
     "@emotion/weak-memoize" "^0.3.0"
     hoist-non-react-statics "^3.3.1"
 
-"@emotion/react@^11.10.6":
-  version "11.11.4"
-  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.4.tgz#3a829cac25c1f00e126408fab7f891f00ecc3c1d"
-  integrity sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==
-  dependencies:
-    "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.11.0"
-    "@emotion/cache" "^11.11.0"
-    "@emotion/serialize" "^1.1.3"
-    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
-    "@emotion/utils" "^1.2.1"
-    "@emotion/weak-memoize" "^0.3.1"
-    hoist-non-react-statics "^3.3.1"
-
 "@emotion/serialize@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.1.tgz#0595701b1902feded8a96d293b26be3f5c1a5cf0"
@@ -2429,27 +2381,11 @@
     "@emotion/utils" "^1.2.0"
     csstype "^3.0.2"
 
-"@emotion/serialize@^1.1.2", "@emotion/serialize@^1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.3.tgz#84b77bfcfe3b7bb47d326602f640ccfcacd5ffb0"
-  integrity sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA==
-  dependencies:
-    "@emotion/hash" "^0.9.1"
-    "@emotion/memoize" "^0.8.1"
-    "@emotion/unitless" "^0.8.1"
-    "@emotion/utils" "^1.2.1"
-    csstype "^3.0.2"
-
 "@emotion/sheet@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.1.tgz#0767e0305230e894897cadb6c8df2c51e61a6c2c"
   integrity sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==
 
-"@emotion/sheet@^1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec"
-  integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==
-
 "@emotion/styled@^11.10.4":
   version "11.10.5"
   resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.10.5.tgz#1fe7bf941b0909802cb826457e362444e7e96a79"
@@ -2462,58 +2398,26 @@
     "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
     "@emotion/utils" "^1.2.0"
 
-"@emotion/styled@^11.10.6":
-  version "11.11.0"
-  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.11.0.tgz#26b75e1b5a1b7a629d7c0a8b708fbf5a9cdce346"
-  integrity sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==
-  dependencies:
-    "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.11.0"
-    "@emotion/is-prop-valid" "^1.2.1"
-    "@emotion/serialize" "^1.1.2"
-    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
-    "@emotion/utils" "^1.2.1"
-
 "@emotion/unitless@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
   integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
 
-"@emotion/unitless@^0.8.1":
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
-  integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
-
 "@emotion/use-insertion-effect-with-fallbacks@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df"
   integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==
 
-"@emotion/use-insertion-effect-with-fallbacks@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963"
-  integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==
-
 "@emotion/utils@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561"
   integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==
 
-"@emotion/utils@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4"
-  integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==
-
 "@emotion/weak-memoize@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb"
   integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==
 
-"@emotion/weak-memoize@^0.3.1":
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
-  integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
-
 "@esbuild/android-arm64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
@@ -2631,19 +2535,19 @@
   dependencies:
     eslint-visitor-keys "^3.3.0"
 
-"@eslint-community/regexpp@^4.4.0":
-  version "4.5.1"
-  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.5.1.tgz#cdd35dce4fa1a89a4fd42b1599eb35b3af408884"
-  integrity sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==
+"@eslint-community/regexpp@^4.4.0", "@eslint-community/regexpp@^4.6.1":
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.0.tgz#548f6de556857c8bb73bbee70c35dc82a2e74d63"
+  integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
 
-"@eslint/eslintrc@^1.4.1":
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.4.1.tgz#af58772019a2d271b7e2d4c23ff4ddcba3ccfb3e"
-  integrity sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==
+"@eslint/eslintrc@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
+  integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
-    espree "^9.4.0"
+    espree "^9.6.0"
     globals "^13.19.0"
     ignore "^5.2.0"
     import-fresh "^3.2.1"
@@ -2651,6 +2555,11 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@eslint/js@8.57.0":
+  version "8.57.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
+  integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
+
 "@ethereumjs/common@^3.2.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@ethereumjs/common/-/common-3.2.0.tgz#b71df25845caf5456449163012074a55f048e0a0"
@@ -2742,21 +2651,21 @@
     dom-mutator "^0.6.0"
 
 "@grpc/grpc-js@^1.7.1":
-  version "1.9.9"
-  resolved "https://registry.yarnpkg.com/@grpc/grpc-js/-/grpc-js-1.9.9.tgz#ce3a05439b1c957ec64c2ecdc6f1e4f54e8af797"
-  integrity sha512-vQ1qwi/Kiyprt+uhb1+rHMpyk4CVRMTGNUGGPRGS7pLNfWkdCHrGEnT6T3/JyC2VZgoOX/X1KwdoU0WYQAeYcQ==
+  version "1.10.10"
+  resolved "https://registry.yarnpkg.com/@grpc/grpc-js/-/grpc-js-1.10.10.tgz#476d315feeb9dbb0f2d6560008c92688c30f13e0"
+  integrity sha512-HPa/K5NX6ahMoeBv15njAc/sfF4/jmiXLar9UlC2UfHFKZzsCVLc3wbe7+7qua7w9VPh2/L6EBxyAV7/E8Wftg==
   dependencies:
-    "@grpc/proto-loader" "^0.7.8"
-    "@types/node" ">=12.12.47"
+    "@grpc/proto-loader" "^0.7.13"
+    "@js-sdsl/ordered-map" "^4.4.2"
 
-"@grpc/proto-loader@^0.7.8":
-  version "0.7.10"
-  resolved "https://registry.yarnpkg.com/@grpc/proto-loader/-/proto-loader-0.7.10.tgz#6bf26742b1b54d0a473067743da5d3189d06d720"
-  integrity sha512-CAqDfoaQ8ykFd9zqBDn4k6iWT9loLAlc2ETmDFS9JCD70gDcnA4L3AFEo2iV7KyAtAAHFW9ftq1Fz+Vsgq80RQ==
+"@grpc/proto-loader@^0.7.13":
+  version "0.7.13"
+  resolved "https://registry.yarnpkg.com/@grpc/proto-loader/-/proto-loader-0.7.13.tgz#f6a44b2b7c9f7b609f5748c6eac2d420e37670cf"
+  integrity sha512-AiXO/bfe9bmxBjxxtYxFAXGZvMaN5s8kO+jBHAJCON8rJoB5YS/D6X7ZNc6XQkuHNmyl4CYaMI1fJ/Gn27RGGw==
   dependencies:
     lodash.camelcase "^4.3.0"
     long "^5.0.0"
-    protobufjs "^7.2.4"
+    protobufjs "^7.2.5"
     yargs "^17.7.2"
 
 "@hapi/b64@5.x.x":
@@ -2830,13 +2739,13 @@
     "@hapi/hoek" "^9.0.0"
     "@hapi/topo" "^5.0.0"
 
-"@humanwhocodes/config-array@^0.11.8":
-  version "0.11.8"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"
-  integrity sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==
+"@humanwhocodes/config-array@^0.11.14":
+  version "0.11.14"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
+  integrity sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==
   dependencies:
-    "@humanwhocodes/object-schema" "^1.2.1"
-    debug "^4.1.1"
+    "@humanwhocodes/object-schema" "^2.0.2"
+    debug "^4.3.1"
     minimatch "^3.0.5"
 
 "@humanwhocodes/module-importer@^1.0.1":
@@ -2844,10 +2753,10 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
   integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
-"@humanwhocodes/object-schema@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
-  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+"@humanwhocodes/object-schema@^2.0.2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
+  integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
 
 "@hypelab/sdk-react@^1.0.0":
   version "1.0.0"
@@ -3111,11 +3020,6 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 
-"@jridgewell/sourcemap-codec@^1.4.15":
-  version "1.4.15"
-  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
-  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
-
 "@jridgewell/trace-mapping@0.3.9":
   version "0.3.9"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz#6534fd5933a53ba7cbf3a17615e273a0d1273ff9"
@@ -3140,6 +3044,11 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@js-sdsl/ordered-map@^4.4.2":
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/@js-sdsl/ordered-map/-/ordered-map-4.4.2.tgz#9299f82874bab9e4c7f9c48d865becbfe8d6907c"
+  integrity sha512-iUKgm52T8HOE/makSxjqoWhe95ZJA1/G1sYsGev2JDKUSS14KAgg1LHb+Ba+IPow0xflbnSkOsZcO08C7w1gYw==
+
 "@lit-labs/ssr-dom-shim@^1.0.0", "@lit-labs/ssr-dom-shim@^1.1.0":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz#64df34e2f12e68e78ac57e571d25ec07fa460ca9"
@@ -3198,6 +3107,25 @@
     "@metamask/safe-event-emitter" "^3.0.0"
     "@metamask/utils" "^8.3.0"
 
+"@metamask/json-rpc-engine@^8.0.1", "@metamask/json-rpc-engine@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@metamask/json-rpc-engine/-/json-rpc-engine-8.0.2.tgz#29510a871a8edef892f838ee854db18de0bf0d14"
+  integrity sha512-IoQPmql8q7ABLruW7i4EYVHWUbF74yrp63bRuXV5Zf9BQwcn5H9Ww1eLtROYvI1bUXwOiHZ6qT5CWTrDc/t/AA==
+  dependencies:
+    "@metamask/rpc-errors" "^6.2.1"
+    "@metamask/safe-event-emitter" "^3.0.0"
+    "@metamask/utils" "^8.3.0"
+
+"@metamask/json-rpc-middleware-stream@^7.0.1":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@metamask/json-rpc-middleware-stream/-/json-rpc-middleware-stream-7.0.2.tgz#2e8b2cbc38968e3c6239a9144c35bbb08a8fb57d"
+  integrity sha512-yUdzsJK04Ev98Ck4D7lmRNQ8FPioXYhEUZOMS01LXW8qTvPGiRVXmVltj2p4wrLkh0vW7u6nv0mNl5xzC5Qmfg==
+  dependencies:
+    "@metamask/json-rpc-engine" "^8.0.2"
+    "@metamask/safe-event-emitter" "^3.0.0"
+    "@metamask/utils" "^8.3.0"
+    readable-stream "^3.6.2"
+
 "@metamask/object-multiplex@^1.1.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@metamask/object-multiplex/-/object-multiplex-1.2.0.tgz#38fc15c142f61939391e1b9a8eed679696c7e4f4"
@@ -3207,6 +3135,14 @@
     once "^1.4.0"
     readable-stream "^2.3.3"
 
+"@metamask/object-multiplex@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@metamask/object-multiplex/-/object-multiplex-2.0.0.tgz#aa6e4aa7b4e2f457ea4bb51cd7281d931e0aa35d"
+  integrity sha512-+ItrieVZie3j2LfYE0QkdW3dsEMfMEp419IGx1zyeLqjRZ14iQUPRO0H6CGgfAAoC0x6k2PfCAGRwJUA9BMrqA==
+  dependencies:
+    once "^1.4.0"
+    readable-stream "^3.6.2"
+
 "@metamask/onboarding@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@metamask/onboarding/-/onboarding-1.0.1.tgz#14a36e1e175e2f69f09598e2008ab6dc1b3297e6"
@@ -3214,14 +3150,6 @@
   dependencies:
     bowser "^2.9.0"
 
-"@metamask/post-message-stream@^6.1.0":
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/@metamask/post-message-stream/-/post-message-stream-6.2.0.tgz#3db0a50adc2b2206d1bb95739e7fff49e36e0324"
-  integrity sha512-WunZ0bruClF862mvbKQGETn5SM0XKGmocPMQR1Ew6sYix9/FDzeoZnoI8RkXk01E+70FCdxhTE/r8kk5SFOuTw==
-  dependencies:
-    "@metamask/utils" "^5.0.0"
-    readable-stream "2.3.3"
-
 "@metamask/post-message-stream@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@metamask/post-message-stream/-/post-message-stream-7.0.0.tgz#b7698909ec54923b6a6990b8d46cc15c2810d840"
@@ -3230,6 +3158,24 @@
     "@metamask/utils" "^5.0.0"
     readable-stream "3.6.2"
 
+"@metamask/providers@16.1.0":
+  version "16.1.0"
+  resolved "https://registry.yarnpkg.com/@metamask/providers/-/providers-16.1.0.tgz#7da593d17c541580fa3beab8d9d8a9b9ce19ea07"
+  integrity sha512-znVCvux30+3SaUwcUGaSf+pUckzT5ukPRpcBmy+muBLC0yaWnBcvDqGfcsw6CBIenUdFrVoAFa8B6jsuCY/a+g==
+  dependencies:
+    "@metamask/json-rpc-engine" "^8.0.1"
+    "@metamask/json-rpc-middleware-stream" "^7.0.1"
+    "@metamask/object-multiplex" "^2.0.0"
+    "@metamask/rpc-errors" "^6.2.1"
+    "@metamask/safe-event-emitter" "^3.1.1"
+    "@metamask/utils" "^8.3.0"
+    detect-browser "^5.2.0"
+    extension-port-stream "^3.0.0"
+    fast-deep-equal "^3.1.3"
+    is-stream "^2.0.0"
+    readable-stream "^3.6.2"
+    webextension-polyfill "^0.10.0"
+
 "@metamask/providers@^10.2.1":
   version "10.2.1"
   resolved "https://registry.yarnpkg.com/@metamask/providers/-/providers-10.2.1.tgz#61304940adeccc7421dcda30ffd1d834273cc77b"
@@ -3266,59 +3212,53 @@
   resolved "https://registry.yarnpkg.com/@metamask/safe-event-emitter/-/safe-event-emitter-3.0.0.tgz#8c2b9073fe0722d48693143b0dc8448840daa3bd"
   integrity sha512-j6Z47VOmVyGMlnKXZmL0fyvWfEYtKWCA9yGZkU3FCsGZUT5lHGmvaV9JA5F2Y+010y7+ROtR3WMXIkvl/nVzqQ==
 
-"@metamask/sdk-communication-layer@0.14.3":
-  version "0.14.3"
-  resolved "https://registry.yarnpkg.com/@metamask/sdk-communication-layer/-/sdk-communication-layer-0.14.3.tgz#0e7ec8e472641273da5802f3b357687ce12369c3"
-  integrity sha512-yjSbj8y7fFbQXv2HBzUX6D9C8BimkCYP6BDV7hdw53W8b/GlYCtXVxUFajQ9tuO1xPTRjR/xt/dkdr2aCi6WGw==
+"@metamask/safe-event-emitter@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@metamask/safe-event-emitter/-/safe-event-emitter-3.1.1.tgz#e89b840a7af8097a8ed4953d8dc8470d1302d3ef"
+  integrity sha512-ihb3B0T/wJm1eUuArYP4lCTSEoZsClHhuWyfo/kMX3m/odpqNcPfsz5O2A3NT7dXCAgWPGDQGPqygCpgeniKMw==
+
+"@metamask/sdk-communication-layer@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@metamask/sdk-communication-layer/-/sdk-communication-layer-0.28.2.tgz#25d84a6af4dd79324e0d4c9d1f307711fbd4aa91"
+  integrity sha512-kGx6qgP482DecPILnIS38bgxIjNransR3/Jh5Lfg9BXJLaXpq/MEGrjHGnJHAqCyfRymnd5cgexHtXJvQtRWQA==
   dependencies:
     bufferutil "^4.0.8"
-    cross-fetch "^3.1.5"
     date-fns "^2.29.3"
-    eciesjs "^0.3.16"
-    eventemitter2 "^6.4.5"
-    socket.io-client "^4.5.1"
-    utf-8-validate "^6.0.3"
+    debug "^4.3.4"
+    utf-8-validate "^5.0.2"
     uuid "^8.3.2"
 
-"@metamask/sdk-install-modal-web@0.14.1":
-  version "0.14.1"
-  resolved "https://registry.yarnpkg.com/@metamask/sdk-install-modal-web/-/sdk-install-modal-web-0.14.1.tgz#c8e64b4f7d2dac262c2ec28025c541b258478c31"
-  integrity sha512-emT8HKbnfVwGhPxyUfMja6DWzvtJvDEBQxqCVx93H0HsyrrOzOC43iGCAosslw6o5h7gOfRKLqWmK8V7jQAS2Q==
+"@metamask/sdk-install-modal-web@0.28.1":
+  version "0.28.1"
+  resolved "https://registry.yarnpkg.com/@metamask/sdk-install-modal-web/-/sdk-install-modal-web-0.28.1.tgz#3e7085c34eaec7f9974e4a928e7f5bea33a278c9"
+  integrity sha512-mHkIjWTpYQMPDMtLEEtTVXhae4pEjy7jDBfV7497L0U3VCPQrBl/giZBwA6AgKEX1emYcM2d1WRHWR9N4YhyJA==
   dependencies:
-    "@emotion/react" "^11.10.6"
-    "@emotion/styled" "^11.10.6"
-    i18next "22.5.1"
     qr-code-styling "^1.6.0-rc.1"
-    react "^18.2.0"
-    react-dom "^18.2.0"
-    react-i18next "^13.2.2"
 
-"@metamask/sdk@0.14.3":
-  version "0.14.3"
-  resolved "https://registry.yarnpkg.com/@metamask/sdk/-/sdk-0.14.3.tgz#ec1ecf00edef981fd17e2c5cf4ec40ce0a43a55c"
-  integrity sha512-BYLs//nY2wioVSih78gOQI6sLIYY3vWkwVqXGYUgkBV+bi49bv+9S0m+hZ2cwiRaxfMYtKs0KvhAQ8weiYwDrg==
+"@metamask/sdk@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@metamask/sdk/-/sdk-0.28.2.tgz#99995a2cefd4bc6c4459869ee15c3b91ad02c488"
+  integrity sha512-pylk1uJAZYyO3HcNW/TNfII3+T+Yx6qrFYaC/HmuSIuRJeXsdZuExSbNQ236iQocIy3L7JjI+GQKbv3TbN+HQQ==
   dependencies:
     "@metamask/onboarding" "^1.0.1"
-    "@metamask/post-message-stream" "^6.1.0"
-    "@metamask/providers" "^10.2.1"
-    "@metamask/sdk-communication-layer" "0.14.3"
-    "@metamask/sdk-install-modal-web" "0.14.1"
-    "@react-native-async-storage/async-storage" "^1.17.11"
+    "@metamask/providers" "16.1.0"
+    "@metamask/sdk-communication-layer" "0.28.2"
+    "@metamask/sdk-install-modal-web" "0.28.1"
     "@types/dom-screen-wake-lock" "^1.0.0"
+    "@types/uuid" "^10.0.0"
     bowser "^2.9.0"
     cross-fetch "^4.0.0"
+    debug "^4.3.4"
     eciesjs "^0.3.15"
     eth-rpc-errors "^4.0.3"
     eventemitter2 "^6.4.7"
-    extension-port-stream "^2.0.1"
-    i18next "22.5.1"
-    i18next-browser-languagedetector "^7.1.0"
+    i18next "23.11.5"
+    i18next-browser-languagedetector "7.1.0"
     obj-multiplex "^1.0.0"
     pump "^3.0.0"
     qrcode-terminal-nooctal "^0.12.1"
-    react-i18next "^13.2.2"
     react-native-webview "^11.26.0"
-    readable-stream "^2.3.7"
+    readable-stream "^3.6.2"
     rollup-plugin-visualizer "^5.9.2"
     socket.io-client "^4.5.1"
     util "^0.12.4"
@@ -3491,17 +3431,17 @@
   resolved "https://registry.yarnpkg.com/@n1ru4l/push-pull-async-iterable-iterator/-/push-pull-async-iterable-iterator-3.2.0.tgz#c15791112db68dd9315d329d652b7e797f737655"
   integrity sha512-3fkKj25kEjsfObL6IlKPAlHYPq/oYwUkkQ03zsTTiDjD7vg/RxjdiLeCydqtxHZP0JgsXL3D/X5oAkMGzuUp/Q==
 
-"@next/bundle-analyzer@^14.0.1":
-  version "14.0.1"
-  resolved "https://registry.yarnpkg.com/@next/bundle-analyzer/-/bundle-analyzer-14.0.1.tgz#0b371a00a4c252596669319e2fdda2d3cff4b52b"
-  integrity sha512-AbZZnj4gZ1ZQFppZxAC9e8+skj0rFiSvY6E6Ut+ydS1r6oizR7PMu/7o02psIm4ekAsmp2O1Eq8IowHQgPWPCQ==
+"@next/bundle-analyzer@14.2.3":
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/@next/bundle-analyzer/-/bundle-analyzer-14.2.3.tgz#dfa43586983d3fffdeb5f3c50f2c65ab1c51f184"
+  integrity sha512-Z88hbbngMs7njZKI8kTJIlpdLKYfMSLwnsqYe54AP4aLmgL70/Ynx/J201DQ+q2Lr6FxFw1uCeLGImDrHOl2ZA==
   dependencies:
-    webpack-bundle-analyzer "4.7.0"
+    webpack-bundle-analyzer "4.10.1"
 
-"@next/env@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-13.5.4.tgz#777c3af16de2cf2f611b6c8126910062d13d222c"
-  integrity sha512-LGegJkMvRNw90WWphGJ3RMHMVplYcOfRWf2Be3td3sUa+1AaxmsYyANsA+znrGCBjXJNi4XAQlSoEfUxs/4kIQ==
+"@next/env@14.2.13":
+  version "14.2.13"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.13.tgz#ba341ba9eb70db428fc1c754f49c3c516f7bab47"
+  integrity sha512-s3lh6K8cbW1h5Nga7NNeXrbe0+2jIIYK9YaA9T7IufDWnZpozdFUp6Hf0d5rNWUKu4fEuSX2rCKlGjCrtylfDw==
 
 "@next/eslint-plugin-next@13.3.0":
   version "13.3.0"
@@ -3510,57 +3450,50 @@
   dependencies:
     glob "7.1.7"
 
-"@next/swc-darwin-arm64@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.4.tgz#241957774fef3f876dc714cfc0ca6f00f561737e"
-  integrity sha512-Df8SHuXgF1p+aonBMcDPEsaahNo2TCwuie7VXED4FVyECvdXfRT9unapm54NssV9tF3OQFKBFOdlje4T43VO0w==
-
-"@next/swc-darwin-x64@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.4.tgz#fa11bb97bf06cd45cbd554354b46bf93e22c025b"
-  integrity sha512-siPuUwO45PnNRMeZnSa8n/Lye5ZX93IJom9wQRB5DEOdFrw0JjOMu1GINB8jAEdwa7Vdyn1oJ2xGNaQpdQQ9Pw==
-
-"@next/swc-linux-arm64-gnu@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.4.tgz#dd3a482cd6871ed23b049066a0f3c4c2f955dc88"
-  integrity sha512-l/k/fvRP/zmB2jkFMfefmFkyZbDkYW0mRM/LB+tH5u9pB98WsHXC0WvDHlGCYp3CH/jlkJPL7gN8nkTQVrQ/2w==
-
-"@next/swc-linux-arm64-musl@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.4.tgz#ed6d7abaf5712cff2752ce5300d6bacc6aff1b18"
-  integrity sha512-YYGb7SlLkI+XqfQa8VPErljb7k9nUnhhRrVaOdfJNCaQnHBcvbT7cx/UjDQLdleJcfyg1Hkn5YSSIeVfjgmkTg==
-
-"@next/swc-linux-x64-gnu@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.4.tgz#977a040388e8a685a3a85e0dbdff90a4ee2a7189"
-  integrity sha512-uE61vyUSClnCH18YHjA8tE1prr/PBFlBFhxBZis4XBRJoR+txAky5d7gGNUIbQ8sZZ7LVkSVgm/5Fc7mwXmRAg==
-
-"@next/swc-linux-x64-musl@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.4.tgz#3e29a0ad8efc016196c3a120da04397eea328b2a"
-  integrity sha512-qVEKFYML/GvJSy9CfYqAdUexA6M5AklYcQCW+8JECmkQHGoPxCf04iMh7CPR7wkHyWWK+XLt4Ja7hhsPJtSnhg==
-
-"@next/swc-win32-arm64-msvc@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.4.tgz#18a236c3fe5a48d24b56d939e6a05488bb682b7e"
-  integrity sha512-mDSQfqxAlfpeZOLPxLymZkX0hYF3juN57W6vFHTvwKlnHfmh12Pt7hPIRLYIShk8uYRsKPtMTth/EzpwRI+u8w==
-
-"@next/swc-win32-ia32-msvc@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.4.tgz#255132243ab6fb20d3c7c92a585e2c4fa50368fe"
-  integrity sha512-aoqAT2XIekIWoriwzOmGFAvTtVY5O7JjV21giozBTP5c6uZhpvTWRbmHXbmsjZqY4HnEZQRXWkSAppsIBweKqw==
-
-"@next/swc-win32-x64-msvc@13.5.4":
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.4.tgz#cc542907b55247c5634d9a8298e1c143a1847e25"
-  integrity sha512-cyRvlAxwlddlqeB9xtPSfNSCRy8BOa4wtMo0IuI9P7Y0XT2qpDrpFKRyZ7kUngZis59mPVla5k8X1oOJ8RxDYg==
-
-"@noble/curves@1.0.0", "@noble/curves@~1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.0.0.tgz#e40be8c7daf088aaf291887cbc73f43464a92932"
-  integrity sha512-2upgEu0iLiDVDZkNLeFV2+ht0BAVgQnEmCk6JsOch9Rp8xfkMCbvbAZlA2pBHQc73dbl+vFOXfqkf4uemdn0bw==
-  dependencies:
-    "@noble/hashes" "1.3.0"
+"@next/swc-darwin-arm64@14.2.13":
+  version "14.2.13"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.13.tgz#76f08d78360c4d27d444df7f35a56f59a48f4808"
+  integrity sha512-IkAmQEa2Htq+wHACBxOsslt+jMoV3msvxCn0WFSfJSkv/scy+i/EukBKNad36grRxywaXUYJc9mxEGkeIs8Bzg==
+
+"@next/swc-darwin-x64@14.2.13":
+  version "14.2.13"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.13.tgz#1d4821d54bb01dacc6a6c32408f8468a4f4af269"
+  integrity sha512-Dv1RBGs2TTjkwEnFMVL5XIfJEavnLqqwYSD6LXgTPdEy/u6FlSrLBSSfe1pcfqhFEXRAgVL3Wpjibe5wXJzWog==
+
+"@next/swc-linux-arm64-gnu@14.2.13":
+  version "14.2.13"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.13.tgz#79d9af8d3408df9990c8911889eca1ca6a308f19"
+  integrity sha512-yB1tYEFFqo4ZNWkwrJultbsw7NPAAxlPXURXioRl9SdW6aIefOLS+0TEsKrWBtbJ9moTDgU3HRILL6QBQnMevg==
+
+"@next/swc-linux-arm64-musl@14.2.13":
+  version "14.2.13"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.13.tgz#b13180645865b120591db2f1e831743ebc02ab36"
+  integrity sha512-v5jZ/FV/eHGoWhMKYrsAweQ7CWb8xsWGM/8m1mwwZQ/sutJjoFaXchwK4pX8NqwImILEvQmZWyb8pPTcP7htWg==
+
+"@next/swc-linux-x64-gnu@14.2.13":
+  version "14.2.13"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.13.tgz#8cb8480dfeee512648e4e08c2095aac0461b876f"
+  integrity sha512-aVc7m4YL7ViiRv7SOXK3RplXzOEe/qQzRA5R2vpXboHABs3w8vtFslGTz+5tKiQzWUmTmBNVW0UQdhkKRORmGA==
+
+"@next/swc-linux-x64-musl@14.2.13":
+  version "14.2.13"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.13.tgz#df5ca922fa1e1ee81b15a06a2d3d3ace0efd2bd7"
+  integrity sha512-4wWY7/OsSaJOOKvMsu1Teylku7vKyTuocvDLTZQq0TYv9OjiYYWt63PiE1nTuZnqQ4RPvME7Xai+9enoiN0Wrg==
+
+"@next/swc-win32-arm64-msvc@14.2.13":
+  version "14.2.13"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.13.tgz#8a7db6e71f526212587975f743b28e4d1cb829d1"
+  integrity sha512-uP1XkqCqV2NVH9+g2sC7qIw+w2tRbcMiXFEbMihkQ8B1+V6m28sshBwAB0SDmOe0u44ne1vFU66+gx/28RsBVQ==
+
+"@next/swc-win32-ia32-msvc@14.2.13":
+  version "14.2.13"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.13.tgz#6aa664f36f2d70c5ae6ffcbbc56784d33f24522d"
+  integrity sha512-V26ezyjPqQpDBV4lcWIh8B/QICQ4v+M5Bo9ykLN+sqeKKBxJVDpEc6biDVyluTXTC40f5IqCU0ttth7Es2ZuMw==
+
+"@next/swc-win32-x64-msvc@14.2.13":
+  version "14.2.13"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.13.tgz#5a920eea82a58affa6146192586716cec6c87fed"
+  integrity sha512-WwzOEAFBGhlDHE5Z73mNU8CO8mqMNLqaG+AO9ETmzdCQlJhVtWZnOl2+rqgVQS+YHunjOWptdFmNfbpwcUuEsw==
 
 "@noble/curves@1.1.0", "@noble/curves@~1.1.0":
   version "1.1.0"
@@ -3576,10 +3509,26 @@
   dependencies:
     "@noble/hashes" "1.3.2"
 
-"@noble/hashes@1.3.0", "@noble/hashes@~1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.0.tgz#085fd70f6d7d9d109671090ccae1d3bec62554a1"
-  integrity sha512-ilHEACi9DwqJB0pw7kv+Apvh50jiiSyR/cQ3y4W7lOR5mhvn/50FLUfsnfJz0BDZtl/RR16kXvptiv6q1msYZg==
+"@noble/curves@1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.4.0.tgz#f05771ef64da724997f69ee1261b2417a49522d6"
+  integrity sha512-p+4cb332SFCrReJkCYe8Xzm0OWi4Jji5jVdIZRL/PmacmDkFNw6MrrV+gGpiPxLHbV+zKFRywUWbaseT+tZRXg==
+  dependencies:
+    "@noble/hashes" "1.4.0"
+
+"@noble/curves@^1.4.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.6.0.tgz#be5296ebcd5a1730fccea4786d420f87abfeb40b"
+  integrity sha512-TlaHRXDehJuRNR9TfZDNQ45mMEd5dwUwmicsafcIX4SsNiqnCHKjE/1alYPd/lDRVhxdhUAlv8uEhMCI5zjIJQ==
+  dependencies:
+    "@noble/hashes" "1.5.0"
+
+"@noble/curves@~1.4.0":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.4.2.tgz#40309198c76ed71bc6dbf7ba24e81ceb4d0d1fe9"
+  integrity sha512-TavHr8qycMChk8UwMld0ZDRvatedkzWfH8IiaeGCfymOP5i0hSCozz9vHOL0nkwk7HRMlFnAiKpS2jrUmSybcw==
+  dependencies:
+    "@noble/hashes" "1.4.0"
 
 "@noble/hashes@1.3.1":
   version "1.3.1"
@@ -3591,11 +3540,26 @@
   resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.2.tgz#6f26dbc8fbc7205873ce3cee2f690eba0d421b39"
   integrity sha512-MVC8EAQp7MvEcm30KWENFjgR+Mkmf+D189XJTkFIlwohU5hcBbn1ZkKq7KVTi2Hme3PMGF390DaL52beVrIihQ==
 
+"@noble/hashes@1.4.0", "@noble/hashes@~1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.4.0.tgz#45814aa329f30e4fe0ba49426f49dfccdd066426"
+  integrity sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==
+
+"@noble/hashes@1.5.0", "@noble/hashes@^1.4.0", "@noble/hashes@~1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.5.0.tgz#abadc5ca20332db2b1b2aa3e496e9af1213570b0"
+  integrity sha512-1j6kQFb7QRru7eKN3ZDvRcP13rugwdxZqCjbiAVZfIJwgj2A65UmT4TgARXGlXgnRkORLTDTrO19ZErt7+QXgA==
+
 "@noble/hashes@^1.3.1", "@noble/hashes@~1.3.2":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.3.tgz#39908da56a4adc270147bb07968bf3b16cfe1699"
   integrity sha512-V7/fPHgl+jsVPXqqeOzT8egNj2iBIVt+ECeMMG8TdcnTikP3oaBtUVqpT/gYCR68aEBJSF+XbYUxStjbFMqIIA==
 
+"@noble/hashes@~1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.0.tgz#085fd70f6d7d9d109671090ccae1d3bec62554a1"
+  integrity sha512-ilHEACi9DwqJB0pw7kv+Apvh50jiiSyR/cQ3y4W7lOR5mhvn/50FLUfsnfJz0BDZtl/RR16kXvptiv6q1msYZg==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -3617,24 +3581,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@opentelemetry/api-logs@0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/api-logs/-/api-logs-0.44.0.tgz#4bbb04e9043234c240b3a9129732281f1ceae759"
-  integrity sha512-OctojdKGmXHKAJa4/Ml+Nf7MD9jtYXvZyP64xTh0pNTmtgaTdWW3FURri2DdB/+l7YxRy0tYYZS3/tYEM1pj3w==
-  dependencies:
-    "@opentelemetry/api" "^1.0.0"
-
-"@opentelemetry/api-logs@0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/api-logs/-/api-logs-0.45.0.tgz#d18ba361bbab77244cf3ec7bb14a5dfcb7a990f2"
-  integrity sha512-swhLdhH/nftC/bNhc3bQ7cn4XJvVO1n8aidDJ7fSw+5ostDLSurDdHS2bY8dxVmb+oHndgBlYOvrx7Jx4OPO6A==
-  dependencies:
-    "@opentelemetry/api" "^1.0.0"
-
-"@opentelemetry/api-logs@0.45.1":
-  version "0.45.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/api-logs/-/api-logs-0.45.1.tgz#9e4f2c652dcce798c5627939b22304c2b5ce19c5"
-  integrity sha512-zVGq/k70l+kB/Wuv3O/zhptP2hvDhEbhDu9EtHde1iWZJf3FedeYS/nWVcMBkkyPAjS/JKNk86WN4CBQLGUuOw==
+"@opentelemetry/api-logs@0.49.1", "@opentelemetry/api-logs@^0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/api-logs/-/api-logs-0.49.1.tgz#51a66ed5eb5eeeafffbd36c1713aa91cbfdd5259"
+  integrity sha512-kaNl/T7WzyMUQHQlVq7q0oV4Kev6+0xFwqzofryC66jgGMacd0QH5TwfpbUwSTby+SdAdprAe5UKMvBw4tKS5Q==
   dependencies:
     "@opentelemetry/api" "^1.0.0"
 
@@ -3643,72 +3593,65 @@
   resolved "https://registry.yarnpkg.com/@opentelemetry/api/-/api-1.7.0.tgz#b139c81999c23e3c8d3c0a7234480e945920fc40"
   integrity sha512-AdY5wvN0P2vXBi3b29hxZgSFvdhdxPB9+f0B6s//P9Q8nibRWeA3cHm8UmLpio9ABigkVHJ5NMPk+Mz8VCCyrw==
 
-"@opentelemetry/auto-instrumentations-node@^0.39.4":
-  version "0.39.4"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/auto-instrumentations-node/-/auto-instrumentations-node-0.39.4.tgz#c772201ba224e6ebffaaf17c9f2234e6e8343328"
-  integrity sha512-1bOMl+7qPe0RJeNaCo9UwNftl/cE0N81EEfxL0BJhPY4dHfCwQLMVoGpXrW8TxRy8ccjS1l1rwYIMnRHJseFqA==
-  dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
-    "@opentelemetry/instrumentation-amqplib" "^0.33.2"
-    "@opentelemetry/instrumentation-aws-lambda" "^0.37.1"
-    "@opentelemetry/instrumentation-aws-sdk" "^0.36.1"
-    "@opentelemetry/instrumentation-bunyan" "^0.32.2"
-    "@opentelemetry/instrumentation-cassandra-driver" "^0.33.2"
-    "@opentelemetry/instrumentation-connect" "^0.32.2"
-    "@opentelemetry/instrumentation-cucumber" "^0.1.1"
-    "@opentelemetry/instrumentation-dataloader" "^0.5.2"
-    "@opentelemetry/instrumentation-dns" "^0.32.3"
-    "@opentelemetry/instrumentation-express" "^0.33.2"
-    "@opentelemetry/instrumentation-fastify" "^0.32.3"
-    "@opentelemetry/instrumentation-fs" "^0.8.2"
-    "@opentelemetry/instrumentation-generic-pool" "^0.32.3"
-    "@opentelemetry/instrumentation-graphql" "^0.35.2"
-    "@opentelemetry/instrumentation-grpc" "^0.44.0"
-    "@opentelemetry/instrumentation-hapi" "^0.33.1"
-    "@opentelemetry/instrumentation-http" "^0.44.0"
-    "@opentelemetry/instrumentation-ioredis" "^0.35.2"
-    "@opentelemetry/instrumentation-knex" "^0.32.2"
-    "@opentelemetry/instrumentation-koa" "^0.36.1"
-    "@opentelemetry/instrumentation-lru-memoizer" "^0.33.2"
-    "@opentelemetry/instrumentation-memcached" "^0.32.2"
-    "@opentelemetry/instrumentation-mongodb" "^0.37.1"
-    "@opentelemetry/instrumentation-mongoose" "^0.33.2"
-    "@opentelemetry/instrumentation-mysql" "^0.34.2"
-    "@opentelemetry/instrumentation-mysql2" "^0.34.2"
-    "@opentelemetry/instrumentation-nestjs-core" "^0.33.2"
-    "@opentelemetry/instrumentation-net" "^0.32.2"
-    "@opentelemetry/instrumentation-pg" "^0.36.2"
-    "@opentelemetry/instrumentation-pino" "^0.34.2"
-    "@opentelemetry/instrumentation-redis" "^0.35.2"
-    "@opentelemetry/instrumentation-redis-4" "^0.35.3"
-    "@opentelemetry/instrumentation-restify" "^0.34.1"
-    "@opentelemetry/instrumentation-router" "^0.33.2"
-    "@opentelemetry/instrumentation-socket.io" "^0.34.2"
-    "@opentelemetry/instrumentation-tedious" "^0.6.2"
-    "@opentelemetry/instrumentation-winston" "^0.32.2"
-    "@opentelemetry/resource-detector-alibaba-cloud" "^0.28.2"
-    "@opentelemetry/resource-detector-aws" "^1.3.2"
-    "@opentelemetry/resource-detector-container" "^0.3.2"
-    "@opentelemetry/resource-detector-gcp" "^0.29.2"
+"@opentelemetry/api@^1.4.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/api/-/api-1.8.0.tgz#5aa7abb48f23f693068ed2999ae627d2f7d902ec"
+  integrity sha512-I/s6F7yKUDdtMsoBWXJe8Qz40Tui5vsuKCWJEWVL+5q9sSWRzzx6v2KeNsOBEwd94j0eWkpWCH4yB6rZg9Mf0w==
+
+"@opentelemetry/auto-instrumentations-node@0.43.0":
+  version "0.43.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/auto-instrumentations-node/-/auto-instrumentations-node-0.43.0.tgz#1833f4bd3975dd125f278685054c30c158ad211c"
+  integrity sha512-2WvHUSi/QVeVG8ObPD0Ls6WevfIbQjspxIQRuHaQFWXhmEwy/MsEcoQUjbNKXwO5516aS04GTydKEoRKsMwhdA==
+  dependencies:
+    "@opentelemetry/instrumentation" "^0.49.1"
+    "@opentelemetry/instrumentation-amqplib" "^0.35.0"
+    "@opentelemetry/instrumentation-aws-lambda" "^0.39.0"
+    "@opentelemetry/instrumentation-aws-sdk" "^0.39.1"
+    "@opentelemetry/instrumentation-bunyan" "^0.36.0"
+    "@opentelemetry/instrumentation-cassandra-driver" "^0.36.0"
+    "@opentelemetry/instrumentation-connect" "^0.34.0"
+    "@opentelemetry/instrumentation-cucumber" "^0.4.0"
+    "@opentelemetry/instrumentation-dataloader" "^0.7.0"
+    "@opentelemetry/instrumentation-dns" "^0.34.0"
+    "@opentelemetry/instrumentation-express" "^0.36.1"
+    "@opentelemetry/instrumentation-fastify" "^0.34.0"
+    "@opentelemetry/instrumentation-fs" "^0.10.0"
+    "@opentelemetry/instrumentation-generic-pool" "^0.34.0"
+    "@opentelemetry/instrumentation-graphql" "^0.38.1"
+    "@opentelemetry/instrumentation-grpc" "^0.49.1"
+    "@opentelemetry/instrumentation-hapi" "^0.35.0"
+    "@opentelemetry/instrumentation-http" "^0.49.1"
+    "@opentelemetry/instrumentation-ioredis" "^0.38.0"
+    "@opentelemetry/instrumentation-knex" "^0.34.0"
+    "@opentelemetry/instrumentation-koa" "^0.38.0"
+    "@opentelemetry/instrumentation-lru-memoizer" "^0.35.0"
+    "@opentelemetry/instrumentation-memcached" "^0.34.0"
+    "@opentelemetry/instrumentation-mongodb" "^0.41.0"
+    "@opentelemetry/instrumentation-mongoose" "^0.36.0"
+    "@opentelemetry/instrumentation-mysql" "^0.36.0"
+    "@opentelemetry/instrumentation-mysql2" "^0.36.0"
+    "@opentelemetry/instrumentation-nestjs-core" "^0.35.0"
+    "@opentelemetry/instrumentation-net" "^0.34.0"
+    "@opentelemetry/instrumentation-pg" "^0.39.1"
+    "@opentelemetry/instrumentation-pino" "^0.36.0"
+    "@opentelemetry/instrumentation-redis" "^0.37.0"
+    "@opentelemetry/instrumentation-redis-4" "^0.37.0"
+    "@opentelemetry/instrumentation-restify" "^0.36.0"
+    "@opentelemetry/instrumentation-router" "^0.35.0"
+    "@opentelemetry/instrumentation-socket.io" "^0.37.0"
+    "@opentelemetry/instrumentation-tedious" "^0.8.0"
+    "@opentelemetry/instrumentation-winston" "^0.35.0"
+    "@opentelemetry/resource-detector-alibaba-cloud" "^0.28.7"
+    "@opentelemetry/resource-detector-aws" "^1.4.0"
+    "@opentelemetry/resource-detector-container" "^0.3.7"
+    "@opentelemetry/resource-detector-gcp" "^0.29.7"
     "@opentelemetry/resources" "^1.12.0"
-    "@opentelemetry/sdk-node" "^0.44.0"
-
-"@opentelemetry/context-async-hooks@1.17.1":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/context-async-hooks/-/context-async-hooks-1.17.1.tgz#4eba80bd66f8cd367e9ba94b5fec5f5acf5d7b25"
-  integrity sha512-up5I+RiQEkGrVEHtbAtmRgS+ZOnFh3shaDNHqZPBlGy+O92auL6yMmjzYpSKmJOGWowvs3fhVHePa8Exb5iHUg==
+    "@opentelemetry/sdk-node" "^0.49.1"
 
-"@opentelemetry/context-async-hooks@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/context-async-hooks/-/context-async-hooks-1.18.0.tgz#9263ed61789219ca4722c92bbf67bbf1cdd836e2"
-  integrity sha512-pWAtTz5a2KQvTsezH/K+6sCxk7O/pOmGUq61I0m65FRRQW5Ahszo+OZHyKfIrEz3blm/WGQLCgpmWme5liCMLw==
-
-"@opentelemetry/core@1.17.1":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/core/-/core-1.17.1.tgz#10c5e09c63aeb1836b34d80baf7113760fb19d96"
-  integrity sha512-I6LrZvl1FF97FQXPR0iieWQmKnGxYtMbWA1GrAXnLUR+B1Hn2m8KqQNEIlZAucyv00GBgpWkpllmULmZfG8P3g==
-  dependencies:
-    "@opentelemetry/semantic-conventions" "1.17.1"
+"@opentelemetry/context-async-hooks@1.22.0":
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/context-async-hooks/-/context-async-hooks-1.22.0.tgz#80c8037b0dc4ab0b0e9c27e8cc13aa563c35699f"
+  integrity sha512-Nfdxyg8YtWqVWkyrCukkundAjPhUXi93JtVQmqDT1mZRVKqA7e2r7eJCrI+F651XUBMp0hsOJSGiFk3QSpaIJw==
 
 "@opentelemetry/core@1.18.0", "@opentelemetry/core@^1.0.0", "@opentelemetry/core@^1.1.0", "@opentelemetry/core@^1.8.0":
   version "1.18.0"
@@ -3717,593 +3660,468 @@
   dependencies:
     "@opentelemetry/semantic-conventions" "1.18.0"
 
-"@opentelemetry/core@1.18.1":
-  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/core/-/core-1.18.1.tgz#d2e45f6bd6be4f00d20d18d4f1b230ec33805ae9"
-  integrity sha512-kvnUqezHMhsQvdsnhnqTNfAJs3ox/isB0SVrM1dhVFw7SsB7TstuVa6fgWnN2GdPyilIFLUvvbTZoVRmx6eiRg==
-  dependencies:
-    "@opentelemetry/semantic-conventions" "1.18.1"
-
-"@opentelemetry/exporter-jaeger@1.17.1":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-jaeger/-/exporter-jaeger-1.17.1.tgz#efc44284b22b0ed0c4a5ba646c13902b980e52ee"
-  integrity sha512-NW4qm04q4bSmhU6es1AXBWt3itJ2gkrXbKLfwDleC+ZMp3bVV47stByDqhuJzic2f47Im+C733N9RMeBkyqKMQ==
-  dependencies:
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/sdk-trace-base" "1.17.1"
-    "@opentelemetry/semantic-conventions" "1.17.1"
-    jaeger-client "^3.15.0"
-
-"@opentelemetry/exporter-metrics-otlp-http@0.45.1":
-  version "0.45.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-metrics-otlp-http/-/exporter-metrics-otlp-http-0.45.1.tgz#322b66a7c17657e1d2c69b42535063bfcc2d992d"
-  integrity sha512-DvyXkjHIrnQ9ESj8tDrGFzRtVIGOzZpmi80YZdTlwr6TMQzvg4UgHQcGo6wj7ZGzdwAJ7057OgAcDUd+/O/Erg==
-  dependencies:
-    "@opentelemetry/core" "1.18.1"
-    "@opentelemetry/otlp-exporter-base" "0.45.1"
-    "@opentelemetry/otlp-transformer" "0.45.1"
-    "@opentelemetry/resources" "1.18.1"
-    "@opentelemetry/sdk-metrics" "1.18.1"
-
-"@opentelemetry/exporter-metrics-otlp-proto@^0.45.1":
-  version "0.45.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-metrics-otlp-proto/-/exporter-metrics-otlp-proto-0.45.1.tgz#7093926ba8ee41f8d9ed1debf55f12dd1ff05ee8"
-  integrity sha512-JLB8hwzc1dK/NpvyivgCAK0CKq1Q+71RmMCGWxa09zekateM1wCulf1jnXwSmdB6hrh4E9foRLOWrcjtFH7B8w==
-  dependencies:
-    "@opentelemetry/core" "1.18.1"
-    "@opentelemetry/exporter-metrics-otlp-http" "0.45.1"
-    "@opentelemetry/otlp-exporter-base" "0.45.1"
-    "@opentelemetry/otlp-proto-exporter-base" "0.45.1"
-    "@opentelemetry/otlp-transformer" "0.45.1"
-    "@opentelemetry/resources" "1.18.1"
-    "@opentelemetry/sdk-metrics" "1.18.1"
-
-"@opentelemetry/exporter-trace-otlp-grpc@0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-trace-otlp-grpc/-/exporter-trace-otlp-grpc-0.44.0.tgz#67a2ea03ddfe1ef70384780eea1479bec0ee5e18"
-  integrity sha512-S1kT/9tVlgZDRYyVfCLYyWZoQTplPD9WcyX+qUPbhJTETORxzJVW9HN8mHwQsXaN7ngqwRLy5GW/nXHL8aqA0w==
-  dependencies:
-    "@grpc/grpc-js" "^1.7.1"
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/otlp-grpc-exporter-base" "0.44.0"
-    "@opentelemetry/otlp-transformer" "0.44.0"
-    "@opentelemetry/resources" "1.17.1"
-    "@opentelemetry/sdk-trace-base" "1.17.1"
-
-"@opentelemetry/exporter-trace-otlp-grpc@0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-trace-otlp-grpc/-/exporter-trace-otlp-grpc-0.45.0.tgz#af48172eb5956ba58309fb82586c89c123fd5294"
-  integrity sha512-LHtu6lDSDTlYWZC0bVRQAK8HlZgjS0G3ZJEjgr6cJvTeSiGqygGEo3N60X/h3FxbqTz4yOTLg+mSZ9UbGCNVmw==
+"@opentelemetry/core@1.22.0":
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/core/-/core-1.22.0.tgz#a9f33689acd4703ac780c6595497374e2113c7e5"
+  integrity sha512-0VoAlT6x+Xzik1v9goJ3pZ2ppi6+xd3aUfg4brfrLkDBHRIVjMP0eBHrKrhB+NKcDyMAg8fAbGL3Npg/F6AwWA==
+  dependencies:
+    "@opentelemetry/semantic-conventions" "1.22.0"
+
+"@opentelemetry/core@1.26.0":
+  version "1.26.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/core/-/core-1.26.0.tgz#7d84265aaa850ed0ca5813f97d831155be42b328"
+  integrity sha512-1iKxXXE8415Cdv0yjG3G6hQnB5eVEsJce3QaawX8SjDn0mAS0ZM8fAbZZJD4ajvhC15cePvosSCut404KrIIvQ==
+  dependencies:
+    "@opentelemetry/semantic-conventions" "1.27.0"
+
+"@opentelemetry/exporter-metrics-otlp-http@0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-metrics-otlp-http/-/exporter-metrics-otlp-http-0.49.1.tgz#e38a84f771468a13850d22bcb9a1cee09a95e835"
+  integrity sha512-t/sWYqfcwn81SvYHIyYJDlJD2CjFz3/h2t4j+XCtdoHAfu+WVJQmwLsGYJPlCDp3UXQfFpMJMWvLlvtD2SL+rg==
+  dependencies:
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/otlp-exporter-base" "0.49.1"
+    "@opentelemetry/otlp-transformer" "0.49.1"
+    "@opentelemetry/resources" "1.22.0"
+    "@opentelemetry/sdk-metrics" "1.22.0"
+
+"@opentelemetry/exporter-metrics-otlp-proto@0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-metrics-otlp-proto/-/exporter-metrics-otlp-proto-0.49.1.tgz#18713e35a38dfc03f365b125c4f2b813eb9a748d"
+  integrity sha512-xKI6aCRY+STxbF7PA+6YNNYWFf6IS065rZZeqlqvqQsp0HaFUqpPEzMJn0OmQMGuy40o7wWtmZ9/bSu4jlhfYw==
+  dependencies:
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/exporter-metrics-otlp-http" "0.49.1"
+    "@opentelemetry/otlp-exporter-base" "0.49.1"
+    "@opentelemetry/otlp-proto-exporter-base" "0.49.1"
+    "@opentelemetry/otlp-transformer" "0.49.1"
+    "@opentelemetry/resources" "1.22.0"
+    "@opentelemetry/sdk-metrics" "1.22.0"
+
+"@opentelemetry/exporter-trace-otlp-grpc@0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-trace-otlp-grpc/-/exporter-trace-otlp-grpc-0.49.1.tgz#97f9c14d5eaa01e8e18f5d7bfc9a0f5a409b5471"
+  integrity sha512-Zbd7f3zF7fI2587MVhBizaW21cO/SordyrZGtMtvhoxU6n4Qb02Gx71X4+PzXH620e0+JX+Pcr9bYb1HTeVyJA==
   dependencies:
     "@grpc/grpc-js" "^1.7.1"
-    "@opentelemetry/core" "1.18.0"
-    "@opentelemetry/otlp-grpc-exporter-base" "0.45.0"
-    "@opentelemetry/otlp-transformer" "0.45.0"
-    "@opentelemetry/resources" "1.18.0"
-    "@opentelemetry/sdk-trace-base" "1.18.0"
-
-"@opentelemetry/exporter-trace-otlp-http@0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-trace-otlp-http/-/exporter-trace-otlp-http-0.44.0.tgz#1dfe24b87fa3e1f5edd2109da28d489029f90171"
-  integrity sha512-RkorGE6wf6PF5OjMUGBnbUDyaVgmN+vL7OgClJJUTxqbE7WqgbW8dkU04O+1mcB1znXZ1Aej1uDm0pS+eW/upA==
-  dependencies:
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/otlp-exporter-base" "0.44.0"
-    "@opentelemetry/otlp-transformer" "0.44.0"
-    "@opentelemetry/resources" "1.17.1"
-    "@opentelemetry/sdk-trace-base" "1.17.1"
-
-"@opentelemetry/exporter-trace-otlp-http@0.45.0", "@opentelemetry/exporter-trace-otlp-http@^0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-trace-otlp-http/-/exporter-trace-otlp-http-0.45.0.tgz#f783aa24b7ed9c5c1bb1b3091d43ec6394784b7e"
-  integrity sha512-wmnuyKZAMoJdNpdiUYuLLa8kUMVRTl4BQJ6zEb9HUkiusSQ8+h2q0s7rVtY2urvg2HxDjMrDdUgjFnRPmoyBkg==
-  dependencies:
-    "@opentelemetry/core" "1.18.0"
-    "@opentelemetry/otlp-exporter-base" "0.45.0"
-    "@opentelemetry/otlp-transformer" "0.45.0"
-    "@opentelemetry/resources" "1.18.0"
-    "@opentelemetry/sdk-trace-base" "1.18.0"
-
-"@opentelemetry/exporter-trace-otlp-proto@0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-trace-otlp-proto/-/exporter-trace-otlp-proto-0.44.0.tgz#5726749e76def507475ec47cfb67a2099d3a2ae7"
-  integrity sha512-yVW0FXxiLaQOyE3MGr6BtK7ml0DaJH4Qx3yvQYUd/hsJUSZBhYYw2TRaMsaW7XMpe1AvU81qt0l8uLYmcmcLJA==
-  dependencies:
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/otlp-exporter-base" "0.44.0"
-    "@opentelemetry/otlp-proto-exporter-base" "0.44.0"
-    "@opentelemetry/otlp-transformer" "0.44.0"
-    "@opentelemetry/resources" "1.17.1"
-    "@opentelemetry/sdk-trace-base" "1.17.1"
-
-"@opentelemetry/exporter-trace-otlp-proto@0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-trace-otlp-proto/-/exporter-trace-otlp-proto-0.45.0.tgz#035d627628573e28d0d9210cbb79523a2c91af68"
-  integrity sha512-t66KZrgoUwBCzAA9v0wJ3GJN8xSZ4TlhetFGhh2fVRwLcIWmp1FGCzm5KKgjgRyAZQIJjWUJ2tBNFyDVFShvcw==
-  dependencies:
-    "@opentelemetry/core" "1.18.0"
-    "@opentelemetry/otlp-exporter-base" "0.45.0"
-    "@opentelemetry/otlp-proto-exporter-base" "0.45.0"
-    "@opentelemetry/otlp-transformer" "0.45.0"
-    "@opentelemetry/resources" "1.18.0"
-    "@opentelemetry/sdk-trace-base" "1.18.0"
-
-"@opentelemetry/exporter-zipkin@1.17.1":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-zipkin/-/exporter-zipkin-1.17.1.tgz#6d7537c0bc40ece73f8661420ef0c7322c0945cd"
-  integrity sha512-FaLZlIhdpxlZiKu/G8OvA+so4xoCL1hCo/JgNdeSxzI4GnJrmFFbZT6DXgUzXJO7F9Qw3KDE1cBFUHawLVz58g==
-  dependencies:
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/resources" "1.17.1"
-    "@opentelemetry/sdk-trace-base" "1.17.1"
-    "@opentelemetry/semantic-conventions" "1.17.1"
-
-"@opentelemetry/exporter-zipkin@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-zipkin/-/exporter-zipkin-1.18.0.tgz#314053941d866454e51312798a25eea2a228b8b0"
-  integrity sha512-YEyaRnl0HQHkJZEoFJMqiTEw/QpXjgv5w/+k7O7UOBoZ6vmOEFxgjtg6oAsIVTQhMzxh7eILtoKC97s49YR7lg==
-  dependencies:
-    "@opentelemetry/core" "1.18.0"
-    "@opentelemetry/resources" "1.18.0"
-    "@opentelemetry/sdk-trace-base" "1.18.0"
-    "@opentelemetry/semantic-conventions" "1.18.0"
-
-"@opentelemetry/instrumentation-amqplib@^0.33.2":
-  version "0.33.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-amqplib/-/instrumentation-amqplib-0.33.2.tgz#427ad7f417bb3f89d1b051a945c442387d1c6469"
-  integrity sha512-qAc9DMkyStlc45LgM+krSckYL4O5zi3uu1rk1QQL7Nn6q3LNNZV2c+fUPMf7hDf2OuK6VyVF0rqWYDSu/JDJ6Q==
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/otlp-grpc-exporter-base" "0.49.1"
+    "@opentelemetry/otlp-transformer" "0.49.1"
+    "@opentelemetry/resources" "1.22.0"
+    "@opentelemetry/sdk-trace-base" "1.22.0"
+
+"@opentelemetry/exporter-trace-otlp-http@0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-trace-otlp-http/-/exporter-trace-otlp-http-0.49.1.tgz#032967960815d46bed32e5b231efe5114ab2a73b"
+  integrity sha512-KOLtZfZvIrpGZLVvblKsiVQT7gQUZNKcUUH24Zz6Xbi7LJb9Vt6xtUZFYdR5IIjvt47PIqBKDWUQlU0o1wAsRw==
+  dependencies:
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/otlp-exporter-base" "0.49.1"
+    "@opentelemetry/otlp-transformer" "0.49.1"
+    "@opentelemetry/resources" "1.22.0"
+    "@opentelemetry/sdk-trace-base" "1.22.0"
+
+"@opentelemetry/exporter-trace-otlp-proto@0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-trace-otlp-proto/-/exporter-trace-otlp-proto-0.49.1.tgz#4d262423eb47a9877aca88e8f90cf49dbfeb6733"
+  integrity sha512-n8ON/c9pdMyYAfSFWKkgsPwjYoxnki+6Olzo+klKfW7KqLWoyEkryNkbcMIYnGGNXwdkMIrjoaP0VxXB26Oxcg==
+  dependencies:
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/otlp-exporter-base" "0.49.1"
+    "@opentelemetry/otlp-proto-exporter-base" "0.49.1"
+    "@opentelemetry/otlp-transformer" "0.49.1"
+    "@opentelemetry/resources" "1.22.0"
+    "@opentelemetry/sdk-trace-base" "1.22.0"
+
+"@opentelemetry/exporter-zipkin@1.22.0":
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/exporter-zipkin/-/exporter-zipkin-1.22.0.tgz#dd81ca82a8933d106a3a980623d2f6e34494e77c"
+  integrity sha512-XcFs6rGvcTz0qW5uY7JZDYD0yNEXdekXAb6sFtnZgY/cHY6BQ09HMzOjv9SX+iaXplRDcHr1Gta7VQKM1XXM6g==
+  dependencies:
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/resources" "1.22.0"
+    "@opentelemetry/sdk-trace-base" "1.22.0"
+    "@opentelemetry/semantic-conventions" "1.22.0"
+
+"@opentelemetry/instrumentation-amqplib@^0.35.0":
+  version "0.35.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-amqplib/-/instrumentation-amqplib-0.35.0.tgz#d99486e1d292d9bd851719d198f62dbcc370db42"
+  integrity sha512-rb3hIWA7f0HXpXpfElnGC6CukRxy58/OJ6XYlTzpZJtNJPao7BuobZjkQEscaRYhUzgi7X7R1aKkIUOTV5JFrg==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-aws-lambda@^0.37.1":
-  version "0.37.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-aws-lambda/-/instrumentation-aws-lambda-0.37.1.tgz#991b747259536f1486c6f9367a0d2577192e77d1"
-  integrity sha512-tIz6SnvKXEjRId0yXcYNJL8CX5uY4Ou3yIkBeb1WSADLjNCp0NW1VaUM2pm8ksW3Nr3/0PY9S5T2yUBVr3yBIg==
+"@opentelemetry/instrumentation-aws-lambda@^0.39.0":
+  version "0.39.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-aws-lambda/-/instrumentation-aws-lambda-0.39.0.tgz#d022e29272c43f8e58e044e8286c553836a8af86"
+  integrity sha512-D+oG/hIBDdwCNq7Y6BEuddjcwDVD0C8NhBE7A85mRZ9RLG0bKoWrhIdVvbpqEoa0U5AWe9Y98RX4itNg7WTy4w==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/propagator-aws-xray" "^1.3.1"
     "@opentelemetry/resources" "^1.8.0"
     "@opentelemetry/semantic-conventions" "^1.0.0"
     "@types/aws-lambda" "8.10.122"
 
-"@opentelemetry/instrumentation-aws-sdk@^0.36.1":
-  version "0.36.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-aws-sdk/-/instrumentation-aws-sdk-0.36.1.tgz#e29dc3b8f00182cf200b8d787662d67969a21128"
-  integrity sha512-OpWI7erB1f3ncaLqyqhXrrR4bF2rK4la0z63WvX4SRlFBxOpLnVKj0RLdEbxnp7i+0zfEeC+Z4Sqt99MkKcDJA==
+"@opentelemetry/instrumentation-aws-sdk@^0.39.1":
+  version "0.39.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-aws-sdk/-/instrumentation-aws-sdk-0.39.1.tgz#fb65f7e5db18343ef9c850fa5c6a65267af557b6"
+  integrity sha512-QnvIMVpzRYqQHSXydGUksbhBjPbMyHSUBwi6ocN7gEXoI711+tIY3R1cfRutl0u3M67A/fAvPI3IgACfJaFORg==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.44.0"
-    "@opentelemetry/propagation-utils" "^0.30.2"
+    "@opentelemetry/instrumentation" "^0.49.1"
+    "@opentelemetry/propagation-utils" "^0.30.7"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-bunyan@^0.32.2":
-  version "0.32.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-bunyan/-/instrumentation-bunyan-0.32.2.tgz#24d2b1e574f71182a8a2286fb15cbf89bcca03cf"
-  integrity sha512-/sLChixYxFas7c5SbLLGUq2yKmU8c58IPlYNNqRSiT0epouqeBjxNUwQeizXl6Ba5+T/Yq7cwCVjh72CRb3tlA==
+"@opentelemetry/instrumentation-bunyan@^0.36.0":
+  version "0.36.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-bunyan/-/instrumentation-bunyan-0.36.0.tgz#89364e94b56351ed5f7ed5d77bcd21bfc863abcd"
+  integrity sha512-sHD5BSiqSrgWow7VmugEFzV8vGdsz5m+w1v9tK6YwRzuAD7vbo57chluq+UBzIqStoCH+0yOzRzSALH7hrfffg==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/api-logs" "^0.49.1"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@types/bunyan" "1.8.9"
 
-"@opentelemetry/instrumentation-cassandra-driver@^0.33.2":
-  version "0.33.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-cassandra-driver/-/instrumentation-cassandra-driver-0.33.2.tgz#848566fe2c6602408a733ed254d62f272499babb"
-  integrity sha512-0tgIdRJk6tw8PIuRKM/pSQRwF1YGEaG+KxfT09Fxw0DBaxyoTgxgNzOHiYLx8zmoCzGTaLd79tHlrYWZRfXEGQ==
+"@opentelemetry/instrumentation-cassandra-driver@^0.36.0":
+  version "0.36.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-cassandra-driver/-/instrumentation-cassandra-driver-0.36.0.tgz#fc6bf191e4c54457c585a090e0f4f6922fc286df"
+  integrity sha512-gMfxzryOIP/mvSLXBJp/QxSr2NvS+cC1dkIXn+aSOzYoU1U3apeF3nAyuikmY9dRCQDV7wHPslqbi+pCmd4pAQ==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-connect@^0.32.2":
-  version "0.32.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-connect/-/instrumentation-connect-0.32.2.tgz#c81cacba090bca62c841b6536a7c05bb37b340a7"
-  integrity sha512-wNbExeTGoDTvMfraByTy7GaX+6Dc5DmQ49lZoWO5EBmrpsKBaL8l9XYCPNKOa3dEp28d9oJWyx+ixHQ2OhDLcA==
+"@opentelemetry/instrumentation-connect@^0.34.0":
+  version "0.34.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-connect/-/instrumentation-connect-0.34.0.tgz#2bee8a1105924ec94dd2b050f0d381705393edcb"
+  integrity sha512-PJO99nfyUp3JSoBMhwZsOQDm/XKfkb/QQ8YTsNX4ZJ28phoRcNLqe36mqIMp80DKmKAX4xkxCAyrSYtW8QqZxA==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
     "@types/connect" "3.4.36"
 
-"@opentelemetry/instrumentation-cucumber@^0.1.1":
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-cucumber/-/instrumentation-cucumber-0.1.1.tgz#4e16c7fc7b5bb5f9c2dd1290c1a19cc91b309c37"
-  integrity sha512-0yAymTJ84BlhMmE1tBs/PmA6MWpVMtjui+OwYxrYgF5rTTLu5QRcYe91KDDsSBDzaZ6MWtD/+Sgq5JWJysNfZQ==
+"@opentelemetry/instrumentation-cucumber@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-cucumber/-/instrumentation-cucumber-0.4.0.tgz#6cf7e131c173d20e637347320ae636a25984d607"
+  integrity sha512-n53QvozzgMS9imEclow2nBYJ/jtZlZqiKIqDUi2/g0nDi08F555JhDS03d/Z+4NJxbu7bDLAg12giCV9KZN/Jw==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-dataloader@^0.5.2":
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-dataloader/-/instrumentation-dataloader-0.5.2.tgz#c6807afd7115e6e038cc6e54aac225934d9236b6"
-  integrity sha512-OYzh714M8szDayFP21eSGUZqQQjgLr7d1skjtbhzT4TIBYe2X7EpPM+4Rmkef+eZsBkCmUk/ecfwAQC+nfAJGg==
+"@opentelemetry/instrumentation-dataloader@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-dataloader/-/instrumentation-dataloader-0.7.0.tgz#8461132ed57231d87f5174753a774bf93727759a"
+  integrity sha512-sIaevxATJV5YaZzBTTcTaDEnI+/1vxYs+lVk1honnvrEAaP0FA9C/cFrQEN0kP2BDHkHRE/t6y5lGUqusi/h3A==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
 
-"@opentelemetry/instrumentation-dns@^0.32.3":
-  version "0.32.3"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-dns/-/instrumentation-dns-0.32.3.tgz#62a31fa0201fbe83d5e3277e72bae6c7247d56ee"
-  integrity sha512-bBZW58MhfoIVCxKSeJexkbt1iclf0mgReJzKtldbU+pvD4OwSNLYmQ20OE+3YUKEX442CrjXI92Yg6ZF+EqKJQ==
+"@opentelemetry/instrumentation-dns@^0.34.0":
+  version "0.34.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-dns/-/instrumentation-dns-0.34.0.tgz#242992b76976a7287cfef2039c3b6360a05e7e87"
+  integrity sha512-3tmXdvrzHQ7S3v82Cm36PTYLtgg2+hVm00K1xB3uzP08GEo9w/F8DW4me9z6rDroVGiLIg621RZ6dzjBcmmFCg==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
     semver "^7.5.4"
 
-"@opentelemetry/instrumentation-express@^0.33.2":
-  version "0.33.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-express/-/instrumentation-express-0.33.2.tgz#e5bd14be5814e24b257cd093220d32d5e9261c5a"
-  integrity sha512-FR05iNosZL42haYang6vpmcuLfXLngJs/0gAgqXk8vwqGGwilOFak1PjoRdO4PAoso0FI+3zhV3Tz7jyDOmSyA==
+"@opentelemetry/instrumentation-express@^0.36.1":
+  version "0.36.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-express/-/instrumentation-express-0.36.1.tgz#1a5a3b976e0a3283649cedcbd8ad94f8da20206d"
+  integrity sha512-ltIE4kIMa+83QjW/p7oe7XCESF29w3FQ9/T1VgShdX7fzm56K2a0xfEX1vF8lnHRGERYxIWX9D086C6gJOjVGA==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
-    "@types/express" "4.17.18"
 
-"@opentelemetry/instrumentation-fastify@^0.32.3":
-  version "0.32.3"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-fastify/-/instrumentation-fastify-0.32.3.tgz#2c0640c986018d1a41dfff3d9c3bfe3b5b1cf62d"
-  integrity sha512-vRFVoEJXcu6nNpJ61H5syDb84PirOd4b3u8yl8Bcorrr6firGYBQH4pEIVB4PkQWlmi3sLOifqS3VAO2VRloEQ==
+"@opentelemetry/instrumentation-fastify@^0.34.0":
+  version "0.34.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-fastify/-/instrumentation-fastify-0.34.0.tgz#d008ce1e2b8d58acdfc5e9586a111df41db57ed9"
+  integrity sha512-2Qu66XBkfJ8tr6H+RHBTyw/EX73N9U7pvNa49aonDnT9/mK58k7AKOscpRnKXOvHqc2YIdEPRcBIWxhksPFZVA==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-fs@^0.8.2":
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-fs/-/instrumentation-fs-0.8.2.tgz#32ce79fc1afd415131318730b4ea3710ad56c9cf"
-  integrity sha512-LTIBkttNoycbo9EVgegnSCXU0V7mu3X7EzJNmceiaibMqcxZ6G3/ZE5uRIUVkqY+FTWOTXY5a7dJ9OTsSrMjag==
+"@opentelemetry/instrumentation-fs@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-fs/-/instrumentation-fs-0.10.0.tgz#1b9d04aa4b09c0f178baa9ad183a466e606492bc"
+  integrity sha512-XtMoNINVsIQTQHjtxe7A0Lng96wxA5DSD5CYVVvpquG6HJRdZ4xNe9DTU03YtoEFqlN9qTfvGb/6ILzhKhiG8g==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-generic-pool@^0.32.3":
-  version "0.32.3"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-generic-pool/-/instrumentation-generic-pool-0.32.3.tgz#4a5055927d1fac776eccf4204218086e4c070458"
-  integrity sha512-pJmmyKQzeROBtl0W+Gv1BHeVXixq8xdXtPy2IokEj33/sr++RfElixWMXRkar7suBkj9/c09a4fOj3fUrJJaYQ==
+"@opentelemetry/instrumentation-generic-pool@^0.34.0":
+  version "0.34.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-generic-pool/-/instrumentation-generic-pool-0.34.0.tgz#8d671c8d3a4b0987ab71367b15e07b45985c8edb"
+  integrity sha512-jdI7tfVVwZJuTu4j2kAvJtx4wlEQKIXSZnZG4RdqRHc56KqQQDuVTBLvUgmDXvnSVclH9ayf4oaAV08R9fICtw==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-graphql@^0.35.2":
-  version "0.35.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-graphql/-/instrumentation-graphql-0.35.2.tgz#67b0c173cff1191cfa66aa26f67c6752c365edf2"
-  integrity sha512-lJv7BbHFK0ExwogdQMtVHfnWhCBMDQEz8KYvhShXfRPiSStU5aVwa3TmT0O00KiJFpATSKJNZMv1iZNHbF6z1g==
+"@opentelemetry/instrumentation-graphql@^0.38.1":
+  version "0.38.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-graphql/-/instrumentation-graphql-0.38.1.tgz#4c1c68de36fb5b5356c32d0ad509858348bd41f0"
+  integrity sha512-mSt4ztn3EVlLtZJ+tDEqq5GUEYdY8cbTT9SeVJFmXSfdSQkPZn0ovo/dRe6dUcplM60gg4w+llw8SZuQN0iZfQ==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
 
-"@opentelemetry/instrumentation-grpc@^0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-grpc/-/instrumentation-grpc-0.44.0.tgz#5305f015cfb58a413476620ebc9a189691dc6355"
-  integrity sha512-ddj0cmC9mdyOTF2dieslRWsXvCeamGM3KGpYyFwdXBKwPnVCD5Y8zSCSplqIgqIU7B8avPHaHlPU9Li2OxMQjw==
+"@opentelemetry/instrumentation-grpc@^0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-grpc/-/instrumentation-grpc-0.49.1.tgz#0e84daec5eeec54e2baf9b65df4b6072415e7d02"
+  integrity sha512-f8mQjFi5/PiP4SK3VDU1/3sUUgs6exMtBgcnNycgCKgN40htiPT+MuDRwdRnRMNI/4vNQ7p1/5r4Q5oN0GuRBw==
   dependencies:
-    "@opentelemetry/instrumentation" "0.44.0"
-    "@opentelemetry/semantic-conventions" "1.17.1"
+    "@opentelemetry/instrumentation" "0.49.1"
+    "@opentelemetry/semantic-conventions" "1.22.0"
 
-"@opentelemetry/instrumentation-hapi@^0.33.1":
-  version "0.33.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-hapi/-/instrumentation-hapi-0.33.1.tgz#9327f15a0d075153f61d338400b3db618dd3902e"
-  integrity sha512-8gwPrIgppbj/prCTK31mGmcBvYESE5J2El6badbCvcUHg6ZSA/i8zo80NrJ6812imtD06Dvm6kfnK5UzlC+smQ==
+"@opentelemetry/instrumentation-hapi@^0.35.0":
+  version "0.35.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-hapi/-/instrumentation-hapi-0.35.0.tgz#b3e8a634082db1e5fd1916676e82488644c43b24"
+  integrity sha512-j7q99aTLHfjNKW94qJnEaDatgz+q2psTKs7lxZO4QHRnoDltDk39a44/+AkI1qBJNw5xyLjrApqkglfbWJ2abg==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
     "@types/hapi__hapi" "20.0.13"
 
-"@opentelemetry/instrumentation-http@^0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-http/-/instrumentation-http-0.44.0.tgz#5a3e4b91073f737f054fe42ef591c39c5b3e6394"
-  integrity sha512-Nlvj3Y2n9q6uIcQq9f33HbcB4Dr62erSwYA37+vkorYnzI2j9PhxKitocRTZnbYsrymYmQJW9mdq/IAfbtVnNg==
+"@opentelemetry/instrumentation-http@^0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-http/-/instrumentation-http-0.49.1.tgz#0dad96347299742d85d32f26d5dccc0d4ae8c416"
+  integrity sha512-Yib5zrW2s0V8wTeUK/B3ZtpyP4ldgXj9L3Ws/axXrW1dW0/mEFKifK50MxMQK9g5NNJQS9dWH7rvcEGZdWdQDA==
   dependencies:
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/instrumentation" "0.44.0"
-    "@opentelemetry/semantic-conventions" "1.17.1"
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/instrumentation" "0.49.1"
+    "@opentelemetry/semantic-conventions" "1.22.0"
     semver "^7.5.2"
 
-"@opentelemetry/instrumentation-ioredis@^0.35.2":
-  version "0.35.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-ioredis/-/instrumentation-ioredis-0.35.2.tgz#4873f2e69fa337d9ce010a03548d21f6d210c258"
-  integrity sha512-D+KODK3ZzS9Be6zAzcoOyVd4Taf87CQ34jAX+FgrjtRlCxTuY6+p1eFhWNHWYS0EOcmdOcFcXxhszwp3/K1B4A==
+"@opentelemetry/instrumentation-ioredis@^0.38.0":
+  version "0.38.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-ioredis/-/instrumentation-ioredis-0.38.0.tgz#0b48a478c7f6a7c2c663a1dd27d481ae800b8bfa"
+  integrity sha512-c9nQFhRjFAtpInTks7z5v9CiOCiR8U9GbIhIv0TLEJ/r0wqdKNLfLZzCrr9XQ9WasxeOmziLlPFhpRBAd9Q4oA==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/redis-common" "^0.36.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
     "@types/ioredis4" "npm:@types/ioredis@^4.28.10"
 
-"@opentelemetry/instrumentation-knex@^0.32.2":
-  version "0.32.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-knex/-/instrumentation-knex-0.32.2.tgz#f85aea7dc077c2453bd30d2c7baf9422e63fb001"
-  integrity sha512-mEapkK4efIsCIGyuLcPpzA+dfPfw7w/kzS0zpm0Zm+tw1zjEGYoVubE0HzjmmexE4TOL6PzBSvF5FXOUXYH9XQ==
+"@opentelemetry/instrumentation-knex@^0.34.0":
+  version "0.34.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-knex/-/instrumentation-knex-0.34.0.tgz#4c733e3c5b65f96b9958f874c9cf5c591a42da86"
+  integrity sha512-6kZOEvNJOylTQunU5zSSi4iTuCkwIL9nwFnZg7719p61u3d6Qj3X4xi9su46VE3M0dH7vEoxUW+nb/0ilm+aZg==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-koa@^0.36.1":
-  version "0.36.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-koa/-/instrumentation-koa-0.36.1.tgz#08186ac7759bcccf13e789445b6f16646c9a2e3f"
-  integrity sha512-wMbDk8qdU9MuOdz5GkHxxNCKPpiAu3RAU6Gf7Gj2ZmnDhxn1mCinaDm3Y2XyniRDzQu4+lFQszYTEdg84XcFYg==
+"@opentelemetry/instrumentation-koa@^0.38.0":
+  version "0.38.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-koa/-/instrumentation-koa-0.38.0.tgz#d639614d0fca073e7ea427820a047d39f14be59f"
+  integrity sha512-lQujF4I3wdcrOF14miCV2pC72H+OJKb2LrrmTvTDAhELQDN/95v0doWgT9aHybUGkaAeB3QG4d09sved548TlA==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
-    "@types/koa" "2.13.9"
-    "@types/koa__router" "12.0.1"
+    "@types/koa" "2.14.0"
+    "@types/koa__router" "12.0.3"
 
-"@opentelemetry/instrumentation-lru-memoizer@^0.33.2":
-  version "0.33.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-lru-memoizer/-/instrumentation-lru-memoizer-0.33.2.tgz#355bd161aa37a0aafb98f9abc1d998017c7c98e7"
-  integrity sha512-+IUW0QaB1mHrhXSMJfGgRVal0RgqW6CJ+J9uZJHhcQc2bCNnM2V2N4/pyDL2F7/6gb8bS0ku7dc8PF6LGlGCng==
+"@opentelemetry/instrumentation-lru-memoizer@^0.35.0":
+  version "0.35.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-lru-memoizer/-/instrumentation-lru-memoizer-0.35.0.tgz#aed567cbfebee843c4d24e712373cbde080d2c5e"
+  integrity sha512-wCXe+iCF7JweMgY3blLM2Y1G0GSwLEeSA61z/y1UwzvBLEEXt7vL6qOl2mkNcUL9ZbLDS+EABatBH+vFO6DV5Q==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
 
-"@opentelemetry/instrumentation-memcached@^0.32.2":
-  version "0.32.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-memcached/-/instrumentation-memcached-0.32.2.tgz#c90b0436f8c109e097255e2bc334e30f0661f1b9"
-  integrity sha512-g3BsNXvxQr1Vz4ZqIboJK2QOow+t9bNdn8NXyaqI1uZFxVhaIYQJmK0Wt76ueHJ48SVzC1gbqNsGFIak5KhQEg==
+"@opentelemetry/instrumentation-memcached@^0.34.0":
+  version "0.34.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-memcached/-/instrumentation-memcached-0.34.0.tgz#2c02d277b2a322ad972698f2aadb9f0e34a05eee"
+  integrity sha512-RleFfaag3Evg4pTzHwDBwo1KiFgnCtiT4V6MQRRHadytNGdpcL+Ynz32ydDdiOXeadt7xpRI7HSvBy0quGTXSw==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
     "@types/memcached" "^2.2.6"
 
-"@opentelemetry/instrumentation-mongodb@^0.37.1":
-  version "0.37.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-mongodb/-/instrumentation-mongodb-0.37.1.tgz#5957565a74a4fe39fb72ab29f3b72a20223ef3df"
-  integrity sha512-UE+5B/MDfB5MUlJfjj8uo/fMnJPpqeUesJZ/loAWuCLCTDDyEJM7wnAvtH+2c4QoukkkIT1lDe5q9aiXwLEr5g==
+"@opentelemetry/instrumentation-mongodb@^0.41.0":
+  version "0.41.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-mongodb/-/instrumentation-mongodb-0.41.0.tgz#71a7328d6609c34e936f6b468a5ac8237e8db170"
+  integrity sha512-DlSH0oyEuTW5gprCUppb0Qe3pK3cpUUFW5eTmayWNyICI1LFunwtcrULTNv6UiThD/V5ykAf/GGGEa7KFAmkog==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/sdk-metrics" "^1.9.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-mongoose@^0.33.2":
-  version "0.33.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-mongoose/-/instrumentation-mongoose-0.33.2.tgz#99f235df66009e0b73953a58f3f6b9f28e6a31b1"
-  integrity sha512-JXhhn8vkGKbev6aBPkQ6dL5rDImQfucrub8mU7dknPPpCL850fSQ2qt2qLvyDXfawF5my6KWW0fkKJCeRA+ECw==
+"@opentelemetry/instrumentation-mongoose@^0.36.0":
+  version "0.36.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-mongoose/-/instrumentation-mongoose-0.36.0.tgz#ecc7b9c04fb35f9855274311dc2dd5415a6527d3"
+  integrity sha512-UelQ8dLQRLTdck3tPJdZ17b+Hk9usLf1cY2ou5THAaZpulUdpg62Q9Hx2RHRU71Rp2/YMDk25og7GJhuWScfEA==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-mysql2@^0.34.2":
-  version "0.34.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-mysql2/-/instrumentation-mysql2-0.34.2.tgz#f59f03c3135a8b50bad9cb3d5b55403008a8d0ba"
-  integrity sha512-Ac/KAHHtTz087P7I6JapBs+ofNOM+RPTDGwSe1ddnTj0xTAO0F6ITmRC1firnMdzDidI/wI+vmgnWclCB81xKQ==
+"@opentelemetry/instrumentation-mysql2@^0.36.0":
+  version "0.36.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-mysql2/-/instrumentation-mysql2-0.36.0.tgz#74919a905f309f60b0aa35df62fe869bf692313b"
+  integrity sha512-F63lKcl/R+if2j5Vz66c2/SLXQEtLlFkWTmYb8NQSgmcCaEKjML4RRRjZISIT4IBwdpanJ2qmNuXVM6MYqhBXw==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
     "@opentelemetry/sql-common" "^0.40.0"
 
-"@opentelemetry/instrumentation-mysql@^0.34.2":
-  version "0.34.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-mysql/-/instrumentation-mysql-0.34.2.tgz#3372dc11010dce2f357a89a1e3f32359c4d34079"
-  integrity sha512-3OEhW1CB7b93PHIbQ5t8Aoj/dCqNWQBDBbyUXGy2zFbhEcJBVcLeBpy3w8VEjzNTfRC6cVwASuHRP0aLBIPNjQ==
+"@opentelemetry/instrumentation-mysql@^0.36.0":
+  version "0.36.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-mysql/-/instrumentation-mysql-0.36.0.tgz#35c47f4bebafe42994899929b34c8fb8e1e00cf3"
+  integrity sha512-2mt/032SLkiuddzMrq3YwM0bHksXRep69EzGRnBfF+bCbwYvKLpqmSFqJZ9T3yY/mBWj+tvdvc1+klXGrh2QnQ==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
     "@types/mysql" "2.15.22"
 
-"@opentelemetry/instrumentation-nestjs-core@^0.33.2":
-  version "0.33.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-nestjs-core/-/instrumentation-nestjs-core-0.33.2.tgz#fb87031097a96c761db0823c2eff8deba452abbf"
-  integrity sha512-jrX/355K+myc5V/EQFouqQzBfy5qj+SyVMHIKqVymOx/zWFCvz1p9ChNiPOKzl2il3o/P/aOqBUN/qnRaGowlw==
+"@opentelemetry/instrumentation-nestjs-core@^0.35.0":
+  version "0.35.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-nestjs-core/-/instrumentation-nestjs-core-0.35.0.tgz#c6a1136bae38a2a3fabfe65008d53b62f096a4a8"
+  integrity sha512-INKA7CIOteTSRVxP7SQaFby11AYU3uezI93xDaDRGY4TloXNVoyw5n6UmcVJU4yDn6xY2r7zZ2SVHvblUc21/g==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-net@^0.32.2":
-  version "0.32.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-net/-/instrumentation-net-0.32.2.tgz#bfc5d99d7e6805675079347d811e484d5e45eb83"
-  integrity sha512-dkm5tZ2NP4Pn3LLs8IfizEQfFBJ7qrqvwoHQA20Z4ZjjjfrPd1aHANCYGs0axh/VBT0IACdX6IZZq/0Lb3Ocfw==
+"@opentelemetry/instrumentation-net@^0.34.0":
+  version "0.34.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-net/-/instrumentation-net-0.34.0.tgz#3df4d30bbb473357b8dfd5ea92074151658ededf"
+  integrity sha512-gjybNOQQqbXmD1qVHNO2qBJI4V6p3QQ7xKg3pnC/x7wRdxn+siLQj7QIVxW85C3mymngoJJdRs6BwI3qPUfsPQ==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-pg@^0.36.2":
-  version "0.36.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-pg/-/instrumentation-pg-0.36.2.tgz#45947d19bbafabf5b350a76350ef4523deac13a5"
-  integrity sha512-KUjI8OGi7kicml2Sd/PR/M8otZoZEdPArMfhznS6OQKit+RxFo0p5x6RVeka/cLQlmoc3eeGBizDeZetssbHgw==
+"@opentelemetry/instrumentation-pg@^0.39.1":
+  version "0.39.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-pg/-/instrumentation-pg-0.39.1.tgz#77d7c2a1035290444155f8ccab28ad2d5bf76504"
+  integrity sha512-pX5ujDOyGpPcrZlzaD3LJzmyaSMMMKAP+ffTHJp9vasvZJr+LifCk53TMPVUafcXKV/xX/IIkvADO+67M1Z25g==
   dependencies:
-    "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
     "@opentelemetry/sql-common" "^0.40.0"
     "@types/pg" "8.6.1"
     "@types/pg-pool" "2.0.4"
 
-"@opentelemetry/instrumentation-pino@^0.34.2":
-  version "0.34.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-pino/-/instrumentation-pino-0.34.2.tgz#f0cd996935430e4750c8aa83d23d8f56523e0edd"
-  integrity sha512-gGGeM2sRSulAtV2nAPMrRBm+nenyrKO3kyrORN+q2V4S8hx+6yze35+QQkU5uWk6N5/s5Y9bxqPcaNUt3jwprw==
+"@opentelemetry/instrumentation-pino@^0.36.0":
+  version "0.36.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-pino/-/instrumentation-pino-0.36.0.tgz#70c7e30b5e9dac004cb62635bf677ae59fba1818"
+  integrity sha512-oEz+BJEYRBMAUu7MVJFJhhlsBuwLaUGjbJciKZRIeGX+fUtgcbQGV+a2Ris9jR3yFzWZrYg0aNBSCbGqvPCtMQ==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
 
-"@opentelemetry/instrumentation-redis-4@^0.35.3":
-  version "0.35.3"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-redis-4/-/instrumentation-redis-4-0.35.3.tgz#6862cb3542c22b151b38d259d13225e3f442bc26"
-  integrity sha512-fWMqJpEGLcE1Z76CTwhZPaFU7EGBZ/pNFKCLdHALddvud/9AxKbxLIn73QGh7sLU8MwhCBkTbuipj5UAy8g8TA==
+"@opentelemetry/instrumentation-redis-4@^0.37.0":
+  version "0.37.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-redis-4/-/instrumentation-redis-4-0.37.0.tgz#46d48f854323bf347002c30484bfd49bbe380252"
+  integrity sha512-WNO+HALvPPvjbh7UEEIuay0Z0d2mIfSCkBZbPRwZttDGX6LYGc2WnRgJh3TnYqjp7/y9IryWIbajAFIebj1OBA==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/redis-common" "^0.36.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-redis@^0.35.2":
-  version "0.35.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-redis/-/instrumentation-redis-0.35.2.tgz#1630f48ab90dc22c8bfd1ec3a7050bc9fea24b5b"
-  integrity sha512-KBwVMsoiMc2kAffnmG64rJDMEbmK3VT991s7kedipJsBT9jrcx4tXT/fdIwFk+helawXHbiI0ILlxzA8dVYz3g==
+"@opentelemetry/instrumentation-redis@^0.37.0":
+  version "0.37.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-redis/-/instrumentation-redis-0.37.0.tgz#f962d33e31d58106837ba6f1b17d6ff8033cbf5f"
+  integrity sha512-9G0T74kheu37k+UvyBnAcieB5iowxska3z2rhUcSTL8Cl0y/CvMn7sZ7txkUbXt0rdX6qeEUdMLmbsY2fPUM7Q==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/redis-common" "^0.36.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-restify@^0.34.1":
-  version "0.34.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-restify/-/instrumentation-restify-0.34.1.tgz#a9fe79f714a9f26801ceb06a9b6745e24ce91719"
-  integrity sha512-lQwEieqPAnpKcNtINzsApmtj9Odvhu6bW5fZvSldSF2pzLOUb5Z9ZDjPnYlZyoWpwqlL8FLc9/LJ1BD4lSaGdA==
+"@opentelemetry/instrumentation-restify@^0.36.0":
+  version "0.36.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-restify/-/instrumentation-restify-0.36.0.tgz#0b5d21bfaae048484073ad68c34857129f52c775"
+  integrity sha512-QbOh8HpnnRn4xxFXX77Gdww6M78yx7dRiIKR6+H3j5LH5u6sYckTXw3TGPSsXsaM4DQHy0fOw15sAcJoWkC+aQ==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-router@^0.33.2":
-  version "0.33.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-router/-/instrumentation-router-0.33.2.tgz#4914808c5baf1e47bc655649921de1e79ab1ab58"
-  integrity sha512-GNQMLkz24vc0ND/Su3/ytyAfVPtBYnbLbM2dscj8h3VHebUZPWcOGk/M6wsqDCpEbP5xUA56afEkWsbGzWtMxA==
+"@opentelemetry/instrumentation-router@^0.35.0":
+  version "0.35.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-router/-/instrumentation-router-0.35.0.tgz#7d4b252042c76a006687135d8bbaef3e3d0219f9"
+  integrity sha512-MdxGJuNTIy/2qDI8yow6cRBQ87m6O//VuHIlawe8v0x1NsTOSwS72xm+BzTuY9D0iMqiJUiTlE3dBs8DA91MTw==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-socket.io@^0.34.2":
-  version "0.34.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-socket.io/-/instrumentation-socket.io-0.34.2.tgz#a7f65a008fbd0af275c5934289238ef0955002b4"
-  integrity sha512-uway54Mx/MtZajA5jsq8TPhRpMK9QBTzjhyIdMGS2XV+gykL/JTFbeis6ewmRnLUAcBrmPcaxQnavEAkJ787AA==
+"@opentelemetry/instrumentation-socket.io@^0.37.0":
+  version "0.37.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-socket.io/-/instrumentation-socket.io-0.37.0.tgz#8b6c0fb51e57b966309900b346c06efb693adcca"
+  integrity sha512-aIztxmx/yis/goEndnoITrZvDDr1GdCtlsWo9ex7MhUIjqq5nJbTuyigf3GmU86XFFhSThxfQuJ9DpJyPxfBfA==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
 
-"@opentelemetry/instrumentation-tedious@^0.6.2":
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-tedious/-/instrumentation-tedious-0.6.2.tgz#fe08c0a2e3966bc9c2a47d6c24b53dc596592698"
-  integrity sha512-8/WwifQNuB/1bRWyqSCJPow/Gd6EubFpKbZJgOEIL1jk0Lk/ikpjI5zxqWbLIT2pUOi0Ihwvu5sTqgdY4oPz9Q==
+"@opentelemetry/instrumentation-tedious@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-tedious/-/instrumentation-tedious-0.8.0.tgz#dfd881d0ad5ac97d760fd62a41e7dfa5e1a87b42"
+  integrity sha512-BBRW8+Qm2PLNkVMynr3Q7L4xCAOCOs0J9BJIJ8ZGoatW42b2H4qhMhq35jfPDvEL5u5azxHDapmUVYrDJDjAfA==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
+    "@opentelemetry/instrumentation" "^0.49.1"
     "@opentelemetry/semantic-conventions" "^1.0.0"
     "@types/tedious" "^4.0.10"
 
-"@opentelemetry/instrumentation-winston@^0.32.2":
-  version "0.32.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-winston/-/instrumentation-winston-0.32.2.tgz#3e10fabbf7ab5496fec3fc8bcfc0227a5ba0a5ca"
-  integrity sha512-6+BMhSWaGxgezwOUuMH389V16fMgwFNmXAwh8zk0mjYHmWpyLzoJ+QV8AQ9WZFBQQnkpbbxfiFdiyO+NCvwBCg==
-  dependencies:
-    "@opentelemetry/instrumentation" "^0.44.0"
-
-"@opentelemetry/instrumentation@0.44.0", "@opentelemetry/instrumentation@^0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation/-/instrumentation-0.44.0.tgz#194f16fc96671575b6bd73d3fadffb5aa4497e67"
-  integrity sha512-B6OxJTRRCceAhhnPDBshyQO7K07/ltX3quOLu0icEvPK9QZ7r9P1y0RQX8O5DxB4vTv4URRkxkg+aFU/plNtQw==
+"@opentelemetry/instrumentation-winston@^0.35.0":
+  version "0.35.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-winston/-/instrumentation-winston-0.35.0.tgz#db8b20f6ef54c85b4eb891911573c5051192ea4a"
+  integrity sha512-ymcuA3S2flnLmH1GS0105H91iDLap8cizOCaLMCp7Xz7r4L+wFf1zfix9M+iSkxcPFshHRt8LFA/ELXw51nk0g==
   dependencies:
-    "@types/shimmer" "^1.0.2"
-    import-in-the-middle "1.4.2"
-    require-in-the-middle "^7.1.1"
-    semver "^7.5.2"
-    shimmer "^1.2.1"
+    "@opentelemetry/instrumentation" "^0.49.1"
 
-"@opentelemetry/instrumentation@0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation/-/instrumentation-0.45.0.tgz#ad9c47b64b54c6e624409eb9fc2987873c28898f"
-  integrity sha512-U+69WBjG4olh6oyB6ZRdX6qwWeUul+Ulw9OwCA54Ph5yPTMYUUkB3O9OACEbN/Ls1suwpLjAN2DkLPrwkDy1Ww==
+"@opentelemetry/instrumentation@0.49.1", "@opentelemetry/instrumentation@^0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation/-/instrumentation-0.49.1.tgz#1b95e5f9448a96e7af97e03846772829439a9a91"
+  integrity sha512-0DLtWtaIppuNNRRllSD4bjU8ZIiLp1cDXvJEbp752/Zf+y3gaLNaoGRGIlX4UHhcsrmtL+P2qxi3Hodi8VuKiQ==
   dependencies:
+    "@opentelemetry/api-logs" "0.49.1"
     "@types/shimmer" "^1.0.2"
-    import-in-the-middle "1.4.2"
+    import-in-the-middle "1.7.1"
     require-in-the-middle "^7.1.1"
     semver "^7.5.2"
     shimmer "^1.2.1"
 
-"@opentelemetry/otlp-exporter-base@0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-exporter-base/-/otlp-exporter-base-0.44.0.tgz#10563cbe3ed89d7c8d422b513b819026f00ba038"
-  integrity sha512-DKQqRrfVMe96aSLZiCgIesLcMLfnWH8d4bTpLB1JbU+SAQJ7nVCAfS9U36mjFCVhvNDD7gwfCNrxqFMCHq6FUw==
-  dependencies:
-    "@opentelemetry/core" "1.17.1"
-
-"@opentelemetry/otlp-exporter-base@0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-exporter-base/-/otlp-exporter-base-0.45.0.tgz#7cd0c88d5b2253dd91c6f1a5e2cbfd778de83d2f"
-  integrity sha512-K+zr7juzDCyokUfneI2ufr7HAUL+YaF1bQ5at+SkCIt9LGnIGMDJSAq/LBbd/DBl4Rlfi2dwcjzP7/+ycN5a9Q==
-  dependencies:
-    "@opentelemetry/core" "1.18.0"
-
-"@opentelemetry/otlp-exporter-base@0.45.1":
-  version "0.45.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-exporter-base/-/otlp-exporter-base-0.45.1.tgz#7170ec200152f89d74b2cf82fcf21fd32deebf03"
-  integrity sha512-Jvd6x8EwWGKEPWF4tkP4LpTPXiIkkafMNMvMJUfJd5DyNAftL1vAz+48jmi3URL2LMPkGryrvWPz8Tdu917gQw==
-  dependencies:
-    "@opentelemetry/core" "1.18.1"
-
-"@opentelemetry/otlp-grpc-exporter-base@0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-grpc-exporter-base/-/otlp-grpc-exporter-base-0.44.0.tgz#bbdd2bce685a2ac27234a76dd795e051dcd11d02"
-  integrity sha512-RsYW2+ikNDDXM9rY4gCA3lJOu53o4CzCsUJ9DV6r78k/Y0ckWw2GM7R4I6yOmMe4jilxEaHorI3oTJFLD8KYug==
+"@opentelemetry/otlp-exporter-base@0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-exporter-base/-/otlp-exporter-base-0.49.1.tgz#a99d527e5fd7f02f3cb50f27a97a0ba6d72af2e9"
+  integrity sha512-z6sHliPqDgJU45kQatAettY9/eVF58qVPaTuejw9YWfSRqid9pXPYeegDCSdyS47KAUgAtm+nC28K3pfF27HWg==
   dependencies:
-    "@grpc/grpc-js" "^1.7.1"
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/otlp-exporter-base" "0.44.0"
-    protobufjs "^7.2.3"
+    "@opentelemetry/core" "1.22.0"
 
-"@opentelemetry/otlp-grpc-exporter-base@0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-grpc-exporter-base/-/otlp-grpc-exporter-base-0.45.0.tgz#014bfb2db3026909a30b9faf01587fda717780c9"
-  integrity sha512-RuOdGafot3s4nLbkT8iLuPiiZ+CrdvCJDh6gstgGlFYUVbxWSyG+7bb55UB7itLm8reQ96lzy4GL51qu9lOM/A==
+"@opentelemetry/otlp-grpc-exporter-base@0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-grpc-exporter-base/-/otlp-grpc-exporter-base-0.49.1.tgz#57361ce173bcab701a8c85237acdde2fa9fce6c1"
+  integrity sha512-DNDNUWmOqtKTFJAyOyHHKotVox0NQ/09ETX8fUOeEtyNVHoGekAVtBbvIA3AtK+JflP7LC0PTjlLfruPM3Wy6w==
   dependencies:
     "@grpc/grpc-js" "^1.7.1"
-    "@opentelemetry/core" "1.18.0"
-    "@opentelemetry/otlp-exporter-base" "0.45.0"
-    protobufjs "^7.2.3"
-
-"@opentelemetry/otlp-proto-exporter-base@0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-proto-exporter-base/-/otlp-proto-exporter-base-0.44.0.tgz#10caa329223a0b1f19c29d950bce6576aa84fe5c"
-  integrity sha512-vgQvWEkXNk8X4BW93+j054TZBVs1ryguXQjeoLeHV/dzopdGuAypI0xC5OtSr+eRftuyPqPl2DVp4tjRq4z4dw==
-  dependencies:
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/otlp-exporter-base" "0.44.0"
-    protobufjs "^7.2.3"
-
-"@opentelemetry/otlp-proto-exporter-base@0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-proto-exporter-base/-/otlp-proto-exporter-base-0.45.0.tgz#bf268f411a7800489d240a31dfeb6a03674c3900"
-  integrity sha512-rHcQvhRHYGnappZ/m277PPvjYINfQQcd/JCfgC/oPOjA/c9MIn2J0TIBqovPHYTIoQeWUnnv046prT6/KKJDaA==
-  dependencies:
-    "@opentelemetry/core" "1.18.0"
-    "@opentelemetry/otlp-exporter-base" "0.45.0"
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/otlp-exporter-base" "0.49.1"
     protobufjs "^7.2.3"
 
-"@opentelemetry/otlp-proto-exporter-base@0.45.1":
-  version "0.45.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-proto-exporter-base/-/otlp-proto-exporter-base-0.45.1.tgz#791129f256f6c3ae298e0cd96020eaa65d7a0689"
-  integrity sha512-jtDkly6EW8TZHpbPpwJV9YT5PgbtL5B2UU8zcyGDiLT1wkIAYjFJZ1AqWmROIpydu8ohMq0dRwe4u0izNMdHpA==
+"@opentelemetry/otlp-proto-exporter-base@0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-proto-exporter-base/-/otlp-proto-exporter-base-0.49.1.tgz#ad1f979f94c5a2d114a72dd4813dfc6635b9f4b1"
+  integrity sha512-x1qB4EUC7KikUl2iNuxCkV8yRzrSXSyj4itfpIO674H7dhI7Zv37SFaOJTDN+8Z/F50gF2ISFH9CWQ4KCtGm2A==
   dependencies:
-    "@opentelemetry/core" "1.18.1"
-    "@opentelemetry/otlp-exporter-base" "0.45.1"
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/otlp-exporter-base" "0.49.1"
     protobufjs "^7.2.3"
 
-"@opentelemetry/otlp-transformer@0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-transformer/-/otlp-transformer-0.44.0.tgz#4f7eb2f6e4624b2110dfb3a5dda8cfebbd80225a"
-  integrity sha512-1/KC+aHM1oGEsXyNy7QoxpvErxGdzt26bg9VHyNb4TDILkUFdwrnywnxPc6lXZ6h/8T8Mt718UWOKjNHC514kQ==
+"@opentelemetry/otlp-transformer@0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-transformer/-/otlp-transformer-0.49.1.tgz#ede99939c85ae246f211ca0051cdac802cdcdb3a"
+  integrity sha512-Z+koA4wp9L9e3jkFacyXTGphSWTbOKjwwXMpb0CxNb0kjTHGUxhYRN8GnkLFsFo5NbZPjP07hwAqeEG/uCratQ==
   dependencies:
-    "@opentelemetry/api-logs" "0.44.0"
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/resources" "1.17.1"
-    "@opentelemetry/sdk-logs" "0.44.0"
-    "@opentelemetry/sdk-metrics" "1.17.1"
-    "@opentelemetry/sdk-trace-base" "1.17.1"
+    "@opentelemetry/api-logs" "0.49.1"
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/resources" "1.22.0"
+    "@opentelemetry/sdk-logs" "0.49.1"
+    "@opentelemetry/sdk-metrics" "1.22.0"
+    "@opentelemetry/sdk-trace-base" "1.22.0"
 
-"@opentelemetry/otlp-transformer@0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-transformer/-/otlp-transformer-0.45.0.tgz#8c0563eaf15a7390d4f3349d067ee29cc31bd25f"
-  integrity sha512-8nlKKDWB2Sp6GI+wZLlDhMl8leSJho1T59zFddyH3H9Mvqg3dycQnSrIzUVY7X0IiZaxAtZG2VJxMmuXwo49eg==
-  dependencies:
-    "@opentelemetry/api-logs" "0.45.0"
-    "@opentelemetry/core" "1.18.0"
-    "@opentelemetry/resources" "1.18.0"
-    "@opentelemetry/sdk-logs" "0.45.0"
-    "@opentelemetry/sdk-metrics" "1.18.0"
-    "@opentelemetry/sdk-trace-base" "1.18.0"
-
-"@opentelemetry/otlp-transformer@0.45.1":
-  version "0.45.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/otlp-transformer/-/otlp-transformer-0.45.1.tgz#8f6590b93f177510983bea3055e5a3f3d30faad2"
-  integrity sha512-FhIHgfC0b0XtoBrS5ISfva939yWffNl47ypXR8I7Ru+dunlySpmf2TLocKHYLHGcWiuoeSNO5O4dZCmSKOtpXw==
-  dependencies:
-    "@opentelemetry/api-logs" "0.45.1"
-    "@opentelemetry/core" "1.18.1"
-    "@opentelemetry/resources" "1.18.1"
-    "@opentelemetry/sdk-logs" "0.45.1"
-    "@opentelemetry/sdk-metrics" "1.18.1"
-    "@opentelemetry/sdk-trace-base" "1.18.1"
-
-"@opentelemetry/propagation-utils@^0.30.2":
-  version "0.30.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/propagation-utils/-/propagation-utils-0.30.2.tgz#9a1d2491af3251d6dcd75ee6e90a510142af1f12"
-  integrity sha512-HMn33DQbehFvPW7PBzIajkRuoCGaSaa/vb8IyaXtRsX4aY8K9XqOiRwunN4bPo7rnh+KnRdKx0tO0In1zvdQ4w==
+"@opentelemetry/propagation-utils@^0.30.7":
+  version "0.30.11"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/propagation-utils/-/propagation-utils-0.30.11.tgz#0a1c51cb4a2724fa41c41be07024bbb6f0aade46"
+  integrity sha512-rY4L/2LWNk5p/22zdunpqVmgz6uN419DsRTw5KFMa6u21tWhXS8devlMy4h8m8nnS20wM7r6yYweCNNKjgLYJw==
 
 "@opentelemetry/propagator-aws-xray@^1.3.1":
   version "1.3.1"
@@ -4312,83 +4130,61 @@
   dependencies:
     "@opentelemetry/core" "^1.0.0"
 
-"@opentelemetry/propagator-b3@1.17.1":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/propagator-b3/-/propagator-b3-1.17.1.tgz#65dbddf3763db82632ddd7ad1735e597ab7b2dc4"
-  integrity sha512-XEbXYb81AM3ayJLlbJqITPIgKBQCuby45ZHiB9mchnmQOffh6ZJOmXONdtZAV7TWzmzwvAd28vGSUk57Aw/5ZA==
+"@opentelemetry/propagator-b3@1.22.0":
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/propagator-b3/-/propagator-b3-1.22.0.tgz#f249ce985556b9229680a2e17558ab5714325f7b"
+  integrity sha512-qBItJm9ygg/jCB5rmivyGz1qmKZPsL/sX715JqPMFgq++Idm0x+N9sLQvWFHFt2+ZINnCSojw7FVBgFW6izcXA==
   dependencies:
-    "@opentelemetry/core" "1.17.1"
+    "@opentelemetry/core" "1.22.0"
 
-"@opentelemetry/propagator-b3@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/propagator-b3/-/propagator-b3-1.18.0.tgz#20939e675c05b08539c5fcb09844dfbc1c42f66c"
-  integrity sha512-Ebja96k7n0ll4XJZ51oEYPMqLf1pvJwfeEpUEpMcEwKt0F/tx/JfHBpisNke5/fCpTYgWWN22jviI53HJ4HyDg==
-  dependencies:
-    "@opentelemetry/core" "1.18.0"
-
-"@opentelemetry/propagator-jaeger@1.17.1":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/propagator-jaeger/-/propagator-jaeger-1.17.1.tgz#31cc43045a059d1ed3651b9f21d0fd6db817b02f"
-  integrity sha512-p+P4lf2pbqd3YMfZO15QCGsDwR2m1ke2q5+dq6YBLa/q0qiC2eq4cD/qhYBBed5/X4PtdamaVGHGsp+u3GXHDA==
+"@opentelemetry/propagator-jaeger@1.22.0":
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/propagator-jaeger/-/propagator-jaeger-1.22.0.tgz#a8b34e97e1563e289887ba0071b4123121d22a31"
+  integrity sha512-pMLgst3QIwrUfepraH5WG7xfpJ8J3CrPKrtINK0t7kBkuu96rn+HDYQ8kt3+0FXvrZI8YJE77MCQwnJWXIrgpA==
   dependencies:
-    "@opentelemetry/core" "1.17.1"
-
-"@opentelemetry/propagator-jaeger@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/propagator-jaeger/-/propagator-jaeger-1.18.0.tgz#283187ebd011110bf6e5ee1691b17992397ff02a"
-  integrity sha512-9Zsx9KSNH/D07RgI9H/drr96r2+w6rdAejSPh7ZOjL7qNsMfoYuchqLL6avBk2aSuwKCfKOithsbA05aZRR2xQ==
-  dependencies:
-    "@opentelemetry/core" "1.18.0"
+    "@opentelemetry/core" "1.22.0"
 
 "@opentelemetry/redis-common@^0.36.1":
   version "0.36.1"
   resolved "https://registry.yarnpkg.com/@opentelemetry/redis-common/-/redis-common-0.36.1.tgz#79bca902603dd27862223a751be0f4bb0be54c2b"
   integrity sha512-YjfNEr7DK1Ymc5H0bzhmqVvMcCs+PUEUerzrpTFdHfZxj3HpnnjZTIFKx/gxiL/sajQ8dxycjlreoYTVYKBXlw==
 
-"@opentelemetry/resource-detector-alibaba-cloud@^0.28.2":
-  version "0.28.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/resource-detector-alibaba-cloud/-/resource-detector-alibaba-cloud-0.28.2.tgz#108a92ccef9220a11d4fe921b1039847913cd0e9"
-  integrity sha512-huG07F7Nu2gPTAkb4tSuA/KrNrJ8TfjmyOIPOL/CqXwZh5QD2876YvqM1tqh7gAhSPTSSpfH0ozxcQNmzzeo7g==
+"@opentelemetry/resource-detector-alibaba-cloud@^0.28.7":
+  version "0.28.10"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/resource-detector-alibaba-cloud/-/resource-detector-alibaba-cloud-0.28.10.tgz#6d4f262a5d91c7aa0b1bbf6da342b3330d1ed47d"
+  integrity sha512-TZv/1Y2QCL6sJ+X9SsPPBXe4786bc/Qsw0hQXFsNTbJzDTGGUmOAlSZ2qPiuqAd4ZheUYfD+QA20IvAjUz9Hhg==
   dependencies:
     "@opentelemetry/resources" "^1.0.0"
-    "@opentelemetry/semantic-conventions" "^1.0.0"
+    "@opentelemetry/semantic-conventions" "^1.22.0"
 
-"@opentelemetry/resource-detector-aws@^1.3.2":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/resource-detector-aws/-/resource-detector-aws-1.3.2.tgz#0e1cf985cf75e2325e93eb4ce4b708995766c73b"
-  integrity sha512-RaBOD3mV69ukI43FZwrnOywAJe7M4405/dqdFRHv65rDLmYMBEUOLdrhqDk8uKJwaHAob2jyDBDCv48RnTZi5g==
+"@opentelemetry/resource-detector-aws@^1.4.0":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/resource-detector-aws/-/resource-detector-aws-1.6.1.tgz#980e896c7b438e9dca7dc6c93af395127304d7b8"
+  integrity sha512-A/3lqx9xoew7sFi+AVUUVr6VgB7UJ5qqddkKR3gQk9hWLm1R7HUXVJG09cLcZ7DMNpX13DohPRGmHE/vp1vafw==
   dependencies:
     "@opentelemetry/core" "^1.0.0"
-    "@opentelemetry/resources" "^1.0.0"
-    "@opentelemetry/semantic-conventions" "^1.0.0"
+    "@opentelemetry/resources" "^1.10.0"
+    "@opentelemetry/semantic-conventions" "^1.27.0"
 
-"@opentelemetry/resource-detector-container@^0.3.2":
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/resource-detector-container/-/resource-detector-container-0.3.2.tgz#3d3121b83a1974c246ee940645e39465e57269b5"
-  integrity sha512-pJXm9RXtQSq6PzXpLFC44sG2VhB/BDd7CRxGLS4ytdweBfdl6h2pIDL4CDQQSBc278JXmfslEFQ9K/fT/piXZw==
+"@opentelemetry/resource-detector-container@^0.3.7":
+  version "0.3.11"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/resource-detector-container/-/resource-detector-container-0.3.11.tgz#c1038af850063e9bf1418d73b7024912da03fe5b"
+  integrity sha512-22ndMDakxX+nuhAYwqsciexV8/w26JozRUV0FN9kJiqSWtA1b5dCVtlp3J6JivG5t8kDN9UF5efatNnVbqRT9Q==
   dependencies:
     "@opentelemetry/resources" "^1.0.0"
-    "@opentelemetry/semantic-conventions" "^1.0.0"
+    "@opentelemetry/semantic-conventions" "^1.22.0"
 
-"@opentelemetry/resource-detector-gcp@^0.29.2":
-  version "0.29.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/resource-detector-gcp/-/resource-detector-gcp-0.29.2.tgz#f2c24e788ebae2f41e9acee0630674352f72798a"
-  integrity sha512-BdboAJA3RMRMs6wdGXMvyTCS/72S72Xs+QtdEqMeHViOoMgHidjQIkbj4cFlteUh5GrWM7aQeWgahd9vGZx3Pw==
+"@opentelemetry/resource-detector-gcp@^0.29.7":
+  version "0.29.11"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/resource-detector-gcp/-/resource-detector-gcp-0.29.11.tgz#2f8e1bc0c760742aad1a7ccc7c03fce021cdc4ea"
+  integrity sha512-07wJx4nyxD/c2z3n70OQOg8fmoO/baTsq8uU+f7tZaehRNQx76MPkRbV2L902N40Z21SPIG8biUZ30OXE9tOIg==
   dependencies:
     "@opentelemetry/core" "^1.0.0"
     "@opentelemetry/resources" "^1.0.0"
-    "@opentelemetry/semantic-conventions" "^1.0.0"
-    gcp-metadata "^5.0.0"
-
-"@opentelemetry/resources@1.17.1":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/resources/-/resources-1.17.1.tgz#932f70f58c0e03fb1d38f0cba12672fd70804d99"
-  integrity sha512-M2e5emqg5I7qRKqlzKx0ROkcPyF8PbcSaWEdsm72od9txP7Z/Pl8PDYOyu80xWvbHAWk5mDxOF6v3vNdifzclA==
-  dependencies:
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/semantic-conventions" "1.17.1"
+    "@opentelemetry/semantic-conventions" "^1.27.0"
+    gcp-metadata "^6.0.0"
 
-"@opentelemetry/resources@1.18.0", "@opentelemetry/resources@^1.0.0", "@opentelemetry/resources@^1.12.0", "@opentelemetry/resources@^1.18.0", "@opentelemetry/resources@^1.8.0":
+"@opentelemetry/resources@1.18.0", "@opentelemetry/resources@^1.0.0", "@opentelemetry/resources@^1.12.0", "@opentelemetry/resources@^1.8.0":
   version "1.18.0"
   resolved "https://registry.yarnpkg.com/@opentelemetry/resources/-/resources-1.18.0.tgz#49c02edfd3d16524ead448288e5ed3bb8fa11391"
   integrity sha512-QXdqtTQRl3fVAMu5PSxIev73iaukww/7fW4656pF607ZMAXueRHfdxOBIpGrTvfnv9mcKC3ZwGsIb366JZ2LSQ==
@@ -4396,48 +4192,40 @@
     "@opentelemetry/core" "1.18.0"
     "@opentelemetry/semantic-conventions" "1.18.0"
 
-"@opentelemetry/resources@1.18.1":
-  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/resources/-/resources-1.18.1.tgz#e27bdc4715bccc8cd4a72d4aca3995ad0a496fe7"
-  integrity sha512-JjbcQLYMttXcIabflLRuaw5oof5gToYV9fuXbcsoOeQ0BlbwUn6DAZi++PNsSz2jjPeASfDls10iaO/8BRIPRA==
-  dependencies:
-    "@opentelemetry/core" "1.18.1"
-    "@opentelemetry/semantic-conventions" "1.18.1"
-
-"@opentelemetry/sdk-logs@0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-logs/-/sdk-logs-0.44.0.tgz#a46e0a013432f266fb7ef16d703c968898ae89c5"
-  integrity sha512-UN3ofh9Jj54gIgrSXNRWAoaH6iPvrrjed5YAtqO9cW65U+5QPzk1Rv95vjAcY9VTrmMWvuqgEK1CYObG6Hu4OQ==
+"@opentelemetry/resources@1.22.0":
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/resources/-/resources-1.22.0.tgz#5b597cdf9fb6e1cd22d7891bd8e72e487929a813"
+  integrity sha512-+vNeIFPH2hfcNL0AJk/ykJXoUCtR1YaDUZM+p3wZNU4Hq98gzq+7b43xbkXjadD9VhWIUQqEwXyY64q6msPj6A==
   dependencies:
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/resources" "1.17.1"
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/semantic-conventions" "1.22.0"
 
-"@opentelemetry/sdk-logs@0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-logs/-/sdk-logs-0.45.0.tgz#9b4505199917eaf88b5c0fcaff9d046abe839162"
-  integrity sha512-t9RA1hEa4NxYrL2VWL+f3EU8Gvdkv1aqPNmk27/vVHVfVFt2ym8hu4lqTf2hynWbzxmV1+bSMDq8Ar3LTrt0pA==
+"@opentelemetry/resources@^1.10.0":
+  version "1.26.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/resources/-/resources-1.26.0.tgz#da4c7366018bd8add1f3aa9c91c6ac59fd503cef"
+  integrity sha512-CPNYchBE7MBecCSVy0HKpUISEeJOniWqcHaAHpmasZ3j9o6V3AyBzhRc90jdmemq0HOxDr6ylhUbDhBqqPpeNw==
   dependencies:
-    "@opentelemetry/core" "1.18.0"
-    "@opentelemetry/resources" "1.18.0"
+    "@opentelemetry/core" "1.26.0"
+    "@opentelemetry/semantic-conventions" "1.27.0"
 
-"@opentelemetry/sdk-logs@0.45.1":
-  version "0.45.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-logs/-/sdk-logs-0.45.1.tgz#d59a99147ab15eb36757932517dfc9a10e1645e9"
-  integrity sha512-z0RRgW4LeKEKnhXS4F/HnqB6+7gsy63YK47F4XAJYHs4s1KKg8XnQ2RkbuL31i/a9nXkylttYtvsT50CGr487g==
+"@opentelemetry/sdk-logs@0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-logs/-/sdk-logs-0.49.1.tgz#dd30d1b05951a0d6bc017d99aaa0965792b357f9"
+  integrity sha512-gCzYWsJE0h+3cuh3/cK+9UwlVFyHvj3PReIOCDOmdeXOp90ZjKRoDOJBc3mvk1LL6wyl1RWIivR8Rg9OToyesw==
   dependencies:
-    "@opentelemetry/core" "1.18.1"
-    "@opentelemetry/resources" "1.18.1"
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/resources" "1.22.0"
 
-"@opentelemetry/sdk-metrics@1.17.1":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-metrics/-/sdk-metrics-1.17.1.tgz#9c4d13d845bcc82be8684050d9db7cce10f61580"
-  integrity sha512-eHdpsMCKhKhwznxvEfls8Wv3y4ZBWkkXlD3m7vtHIiWBqsMHspWSfie1s07mM45i/bBCf6YBMgz17FUxIXwmZA==
+"@opentelemetry/sdk-metrics@1.22.0":
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-metrics/-/sdk-metrics-1.22.0.tgz#b94c62403013e4c72b96dc747d71d786073efafc"
+  integrity sha512-k6iIx6H3TZ+BVMr2z8M16ri2OxWaljg5h8ihGJxi/KQWcjign6FEaEzuigXt5bK9wVEhqAcWLCfarSftaNWkkg==
   dependencies:
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/resources" "1.17.1"
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/resources" "1.22.0"
     lodash.merge "^4.6.2"
 
-"@opentelemetry/sdk-metrics@1.18.0", "@opentelemetry/sdk-metrics@^1.9.1":
+"@opentelemetry/sdk-metrics@^1.9.1":
   version "1.18.0"
   resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-metrics/-/sdk-metrics-1.18.0.tgz#f84fffcabdb0e9504e3b219635c1099aabc9e207"
   integrity sha512-wK5zdNCo5cJvZog/lsqXCg9/Dt9UeNXQsskgqX8Yz+40t13Kb5CKFFkAMU8tNUxkvidHnD6G6sT6xeVCHQYe4A==
@@ -4446,119 +4234,60 @@
     "@opentelemetry/resources" "1.18.0"
     lodash.merge "^4.6.2"
 
-"@opentelemetry/sdk-metrics@1.18.1":
-  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-metrics/-/sdk-metrics-1.18.1.tgz#1dd334744a1e5d2eec27e9e9765c73cd2f43aef3"
-  integrity sha512-TEFgeNFhdULBYiCoHbz31Y4PDsfjjxRp8Wmdp6ybLQZPqMNEb+dRq+XN8Xw3ivIgTaf9gYsomgV5ensX99RuEQ==
-  dependencies:
-    "@opentelemetry/core" "1.18.1"
-    "@opentelemetry/resources" "1.18.1"
-    lodash.merge "^4.6.2"
-
-"@opentelemetry/sdk-node@^0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-node/-/sdk-node-0.44.0.tgz#a256c9a0658969273aaf25ab2b8daab149e4954f"
-  integrity sha512-MkMJcUcqjNV/A5/y6quedSO3CIDXY17jM8sxQa0Hwmx77+/QiXJkSe4Zv0ysf37mV5+8QEt4rsq7adKg+LtaEg==
-  dependencies:
-    "@opentelemetry/api-logs" "0.44.0"
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/exporter-jaeger" "1.17.1"
-    "@opentelemetry/exporter-trace-otlp-grpc" "0.44.0"
-    "@opentelemetry/exporter-trace-otlp-http" "0.44.0"
-    "@opentelemetry/exporter-trace-otlp-proto" "0.44.0"
-    "@opentelemetry/exporter-zipkin" "1.17.1"
-    "@opentelemetry/instrumentation" "0.44.0"
-    "@opentelemetry/resources" "1.17.1"
-    "@opentelemetry/sdk-logs" "0.44.0"
-    "@opentelemetry/sdk-metrics" "1.17.1"
-    "@opentelemetry/sdk-trace-base" "1.17.1"
-    "@opentelemetry/sdk-trace-node" "1.17.1"
-    "@opentelemetry/semantic-conventions" "1.17.1"
-
-"@opentelemetry/sdk-node@^0.45.0":
-  version "0.45.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-node/-/sdk-node-0.45.0.tgz#50dd15a80a4ada8a6d202082fc7ae1d20a7d1cec"
-  integrity sha512-azlORyAoFQc/fwU1zyCmsg9Bvz+xvwIlewdl51Rd3QlAtw2cXtFOVPkKTrdkYi73zB9qaqzKyyByddBBaJDj/A==
-  dependencies:
-    "@opentelemetry/api-logs" "0.45.0"
-    "@opentelemetry/core" "1.18.0"
-    "@opentelemetry/exporter-trace-otlp-grpc" "0.45.0"
-    "@opentelemetry/exporter-trace-otlp-http" "0.45.0"
-    "@opentelemetry/exporter-trace-otlp-proto" "0.45.0"
-    "@opentelemetry/exporter-zipkin" "1.18.0"
-    "@opentelemetry/instrumentation" "0.45.0"
-    "@opentelemetry/resources" "1.18.0"
-    "@opentelemetry/sdk-logs" "0.45.0"
-    "@opentelemetry/sdk-metrics" "1.18.0"
-    "@opentelemetry/sdk-trace-base" "1.18.0"
-    "@opentelemetry/sdk-trace-node" "1.18.0"
-    "@opentelemetry/semantic-conventions" "1.18.0"
-
-"@opentelemetry/sdk-trace-base@1.17.1":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-trace-base/-/sdk-trace-base-1.17.1.tgz#8ede213df8b0c957028a869c66964e535193a4fd"
-  integrity sha512-pfSJJSjZj5jkCJUQZicSpzN8Iz9UKMryPWikZRGObPnJo6cUSoKkjZh6BM3j+D47G4olMBN+YZKYqkFM1L6zNA==
-  dependencies:
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/resources" "1.17.1"
-    "@opentelemetry/semantic-conventions" "1.17.1"
-
-"@opentelemetry/sdk-trace-base@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-trace-base/-/sdk-trace-base-1.18.0.tgz#09e420d24465aaee8e21a8a9a3c4fa2e6f0fd08e"
-  integrity sha512-OThpwn8JeU4q7exo0e8kQqs5BZGKQ9NNkes66RCs7yhUKShHEKQIYl/A3+xnGzMrbrtgogcf84brH8XD4ahjMg==
-  dependencies:
-    "@opentelemetry/core" "1.18.0"
-    "@opentelemetry/resources" "1.18.0"
-    "@opentelemetry/semantic-conventions" "1.18.0"
-
-"@opentelemetry/sdk-trace-base@1.18.1":
-  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-trace-base/-/sdk-trace-base-1.18.1.tgz#256605d90b202002d5672305c66dbcf377132379"
-  integrity sha512-tRHfDxN5dO+nop78EWJpzZwHsN1ewrZRVVwo03VJa3JQZxToRDH29/+MB24+yoa+IArerdr7INFJiX/iN4gjqg==
-  dependencies:
-    "@opentelemetry/core" "1.18.1"
-    "@opentelemetry/resources" "1.18.1"
-    "@opentelemetry/semantic-conventions" "1.18.1"
-
-"@opentelemetry/sdk-trace-node@1.17.1":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-trace-node/-/sdk-trace-node-1.17.1.tgz#746c197ad54a8e0cdb24a4b257d33dc3a04493c1"
-  integrity sha512-J56DaG4cusjw5crpI7x9rv4bxDF27DtKYGxXJF56KIvopbNKpdck5ZWXBttEyqgAVPDwHMAXWDL1KchHzF0a3A==
-  dependencies:
-    "@opentelemetry/context-async-hooks" "1.17.1"
-    "@opentelemetry/core" "1.17.1"
-    "@opentelemetry/propagator-b3" "1.17.1"
-    "@opentelemetry/propagator-jaeger" "1.17.1"
-    "@opentelemetry/sdk-trace-base" "1.17.1"
-    semver "^7.5.2"
-
-"@opentelemetry/sdk-trace-node@1.18.0", "@opentelemetry/sdk-trace-node@^1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-trace-node/-/sdk-trace-node-1.18.0.tgz#f78ed78543190fd291a4806c2c7b3dc352bfc9fb"
-  integrity sha512-ekjeNAALNQrtcg25AhjKirhY+5SYywmybJlmLIz9PS7O68x2XqQS4yIMEM2V4d+Flz44KRMupcnB5GAHR3m9Ig==
-  dependencies:
-    "@opentelemetry/context-async-hooks" "1.18.0"
-    "@opentelemetry/core" "1.18.0"
-    "@opentelemetry/propagator-b3" "1.18.0"
-    "@opentelemetry/propagator-jaeger" "1.18.0"
-    "@opentelemetry/sdk-trace-base" "1.18.0"
+"@opentelemetry/sdk-node@0.49.1", "@opentelemetry/sdk-node@^0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-node/-/sdk-node-0.49.1.tgz#40e618f22ba645e73c5a66eccec18a621734ccc3"
+  integrity sha512-feBIT85ndiSHXsQ2gfGpXC/sNeX4GCHLksC4A9s/bfpUbbgbCSl0RvzZlmEpCHarNrkZMwFRi4H0xFfgvJEjrg==
+  dependencies:
+    "@opentelemetry/api-logs" "0.49.1"
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/exporter-trace-otlp-grpc" "0.49.1"
+    "@opentelemetry/exporter-trace-otlp-http" "0.49.1"
+    "@opentelemetry/exporter-trace-otlp-proto" "0.49.1"
+    "@opentelemetry/exporter-zipkin" "1.22.0"
+    "@opentelemetry/instrumentation" "0.49.1"
+    "@opentelemetry/resources" "1.22.0"
+    "@opentelemetry/sdk-logs" "0.49.1"
+    "@opentelemetry/sdk-metrics" "1.22.0"
+    "@opentelemetry/sdk-trace-base" "1.22.0"
+    "@opentelemetry/sdk-trace-node" "1.22.0"
+    "@opentelemetry/semantic-conventions" "1.22.0"
+
+"@opentelemetry/sdk-trace-base@1.22.0":
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-trace-base/-/sdk-trace-base-1.22.0.tgz#7833bf2493a7b49461915ca32aa2884c87afd78c"
+  integrity sha512-pfTuSIpCKONC6vkTpv6VmACxD+P1woZf4q0K46nSUvXFvOFqjBYKFaAMkKD3M1mlKUUh0Oajwj35qNjMl80m1Q==
+  dependencies:
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/resources" "1.22.0"
+    "@opentelemetry/semantic-conventions" "1.22.0"
+
+"@opentelemetry/sdk-trace-node@1.22.0":
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-trace-node/-/sdk-trace-node-1.22.0.tgz#fa9b2063cc39aabc4efe342495c80ed522b4d5cb"
+  integrity sha512-gTGquNz7ue8uMeiWPwp3CU321OstQ84r7PCDtOaCicjbJxzvO8RZMlEC4geOipTeiF88kss5n6w+//A0MhP1lQ==
+  dependencies:
+    "@opentelemetry/context-async-hooks" "1.22.0"
+    "@opentelemetry/core" "1.22.0"
+    "@opentelemetry/propagator-b3" "1.22.0"
+    "@opentelemetry/propagator-jaeger" "1.22.0"
+    "@opentelemetry/sdk-trace-base" "1.22.0"
     semver "^7.5.2"
 
-"@opentelemetry/semantic-conventions@1.17.1":
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/semantic-conventions/-/semantic-conventions-1.17.1.tgz#93d219935e967fbb9aa0592cc96b2c0ec817a56f"
-  integrity sha512-xbR2U+2YjauIuo42qmE8XyJK6dYeRMLJuOlUP5SO4auET4VtOHOzgkRVOq+Ik18N+Xf3YPcqJs9dZMiDddz1eQ==
-
-"@opentelemetry/semantic-conventions@1.18.0", "@opentelemetry/semantic-conventions@^1.0.0", "@opentelemetry/semantic-conventions@^1.18.0":
+"@opentelemetry/semantic-conventions@1.18.0", "@opentelemetry/semantic-conventions@^1.0.0":
   version "1.18.0"
   resolved "https://registry.yarnpkg.com/@opentelemetry/semantic-conventions/-/semantic-conventions-1.18.0.tgz#f38f457922f6e112569561c4515797a70eb5f9dd"
   integrity sha512-Bxtd+h2+rBv3XBHZaoXq133/hzgAQvbl2Kg5a9cG4ozfiUJHC9Xkblt7PrLc9CbzwWQpSxUxWoZJHXT3lUlkOw==
 
-"@opentelemetry/semantic-conventions@1.18.1":
-  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/semantic-conventions/-/semantic-conventions-1.18.1.tgz#8e47caf57a84b1dcc1722b2025693348cdf443b4"
-  integrity sha512-+NLGHr6VZwcgE/2lw8zDIufOCGnzsA5CbQIMleXZTrgkBd0TanCX+MiDYJ1TOS4KL/Tqk0nFRxawnaYr6pkZkA==
+"@opentelemetry/semantic-conventions@1.22.0":
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/semantic-conventions/-/semantic-conventions-1.22.0.tgz#d7502533a7c96e25baab86bac965468e0703a8b4"
+  integrity sha512-CAOgFOKLybd02uj/GhCdEeeBjOS0yeoDeo/CA7ASBSmenpZHAKGB3iDm/rv3BQLcabb/OprDEsSQ1y0P8A7Siw==
+
+"@opentelemetry/semantic-conventions@1.27.0", "@opentelemetry/semantic-conventions@^1.22.0", "@opentelemetry/semantic-conventions@^1.27.0":
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/@opentelemetry/semantic-conventions/-/semantic-conventions-1.27.0.tgz#1a857dcc95a5ab30122e04417148211e6f945e6c"
+  integrity sha512-sAay1RrB+ONOem0OZanAR1ZI/k7yDpnOQSQmTMuGImUQb2y8EbSaCJ94FQluM74xoU03vlb2d2U90hZluL6nQg==
 
 "@opentelemetry/sql-common@^0.40.0":
   version "0.40.0"
@@ -4700,10 +4429,10 @@
   dependencies:
     playwright "1.41.1"
 
-"@polka/url@^1.0.0-next.20":
-  version "1.0.0-next.23"
-  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.23.tgz#498e41218ab3b6a1419c735e5c6ae2c5ed609b6c"
-  integrity sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==
+"@polka/url@^1.0.0-next.24":
+  version "1.0.0-next.25"
+  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.25.tgz#f077fdc0b5d0078d30893396ff4827a13f99e817"
+  integrity sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==
 
 "@popperjs/core@^2.9.0":
   version "2.11.8"
@@ -4920,13 +4649,6 @@
     prop-types "^15.7.2"
     tslib "^2.3.0"
 
-"@react-native-async-storage/async-storage@^1.17.11":
-  version "1.22.3"
-  resolved "https://registry.yarnpkg.com/@react-native-async-storage/async-storage/-/async-storage-1.22.3.tgz#ad490236a9eda8ac68cffc12c738f20b1815464e"
-  integrity sha512-Ov3wjuqxHd62tLYfgTjxj77YRYWra3A4Fi8uICIPcePgNO2WkS5B0ADXt9e/JLzSCNqVlXCq4Fir/gHmZTU9ww==
-  dependencies:
-    merge-options "^3.0.4"
-
 "@rollup/pluginutils@^5.0.0":
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.2.tgz#012b8f53c71e4f6f9cb317e311df1404f56e7a33"
@@ -4937,25 +4659,25 @@
     picomatch "^2.3.1"
 
 "@rushstack/eslint-patch@^1.1.3":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz#8be36a1f66f3265389e90b5f9c9962146758f728"
-  integrity sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.2.tgz#053f1540703faa81dea2966b768ee5581c66aeda"
+  integrity sha512-hw437iINopmQuxWPSUEvqE56NCPsiU8N4AYtfHmJFckclktzK9YQJieD3XkDCDH4OjL+C7zgPUh73R/nrcHrqw==
 
-"@safe-global/safe-apps-provider@0.18.1":
-  version "0.18.1"
-  resolved "https://registry.yarnpkg.com/@safe-global/safe-apps-provider/-/safe-apps-provider-0.18.1.tgz#287b5a1e2ef3be630dacde54279409df3ced8202"
-  integrity sha512-V4a05A3EgJcriqtDoJklDz1BOinWhC6P0hjUSxshA4KOZM7rGPCTto/usXs09zr1vvL28evl/NldSTv97j2bmg==
+"@safe-global/safe-apps-provider@0.18.3":
+  version "0.18.3"
+  resolved "https://registry.yarnpkg.com/@safe-global/safe-apps-provider/-/safe-apps-provider-0.18.3.tgz#805a42e24f5dde803cb96dac251a3c9e256de45b"
+  integrity sha512-f/0cNv3S4v7p8rowAjj0hDCg8Q8P/wBjp5twkNWeBdvd0RDr7BuRBPPk74LCqmjQ82P+1ltLlkmVFSmxTIT7XQ==
   dependencies:
-    "@safe-global/safe-apps-sdk" "^8.1.0"
+    "@safe-global/safe-apps-sdk" "^9.1.0"
     events "^3.3.0"
 
-"@safe-global/safe-apps-sdk@8.1.0", "@safe-global/safe-apps-sdk@^8.1.0":
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/@safe-global/safe-apps-sdk/-/safe-apps-sdk-8.1.0.tgz#d1d0c69cd2bf4eef8a79c5d677d16971926aa64a"
-  integrity sha512-XJbEPuaVc7b9n23MqlF6c+ToYIS3f7P2Sel8f3cSBQ9WORE4xrSuvhMpK9fDSFqJ7by/brc+rmJR/5HViRr0/w==
+"@safe-global/safe-apps-sdk@9.1.0", "@safe-global/safe-apps-sdk@^9.1.0":
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/@safe-global/safe-apps-sdk/-/safe-apps-sdk-9.1.0.tgz#0e65913e0f202e529ed3c846e0f5a98c2d35aa98"
+  integrity sha512-N5p/ulfnnA2Pi2M3YeWjULeWbjo7ei22JwU/IXnhoHzKq3pYCN6ynL9mJBOlvDVv892EgLPCWCOwQk/uBT2v0Q==
   dependencies:
     "@safe-global/safe-gateway-typescript-sdk" "^3.5.3"
-    viem "^1.0.0"
+    viem "^2.1.1"
 
 "@safe-global/safe-gateway-typescript-sdk@^3.5.3":
   version "3.7.3"
@@ -4974,14 +4696,10 @@
   resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.1.tgz#ebb651ee52ff84f420097055f4bf46cfba403938"
   integrity sha512-ZxOhsSyxYwLJj3pLZCefNitxsj093tb2vq90mp2txoYeBqbcjDjqFhyM8eUjq/uFm6zJ+mUuqxlS2FkuSY1MTA==
 
-"@scure/bip32@1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@scure/bip32/-/bip32-1.3.0.tgz#6c8d980ef3f290987736acd0ee2e0f0d50068d87"
-  integrity sha512-bcKpo1oj54hGholplGLpqPHRbIsnbixFtc06nwuNM5/dwSXOq/AAYoIBRsBmnZJSdfeNW5rnff7NTAz3ZCqR9Q==
-  dependencies:
-    "@noble/curves" "~1.0.0"
-    "@noble/hashes" "~1.3.0"
-    "@scure/base" "~1.1.0"
+"@scure/base@~1.1.6", "@scure/base@~1.1.8":
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.8.tgz#8f23646c352f020c83bca750a82789e246d42b50"
+  integrity sha512-6CyAclxj3Nb0XT7GHK6K4zK6k2xJm6E4Ft0Ohjt4WgegiFUHEtFb2CGzmPmGBwoIhrLsqNLYfLr04Y1GePrzZg==
 
 "@scure/bip32@1.3.1":
   version "1.3.1"
@@ -5001,13 +4719,14 @@
     "@noble/hashes" "~1.3.2"
     "@scure/base" "~1.1.2"
 
-"@scure/bip39@1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@scure/bip39/-/bip39-1.2.0.tgz#a207e2ef96de354de7d0002292ba1503538fc77b"
-  integrity sha512-SX/uKq52cuxm4YFXWFaVByaSHJh2w3BnokVSeUJVCv6K7WulT9u2BuNRBhuFl8vAuYnzx9bEu9WgpcNYTrYieg==
+"@scure/bip32@1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@scure/bip32/-/bip32-1.4.0.tgz#4e1f1e196abedcef395b33b9674a042524e20d67"
+  integrity sha512-sVUpc0Vq3tXCkDGYVWGIZTRfnvu8LoTDaev7vbwh0omSvVORONr960MQWdKqJDCReIEmTj3PAr73O3aoxz7OPg==
   dependencies:
-    "@noble/hashes" "~1.3.0"
-    "@scure/base" "~1.1.0"
+    "@noble/curves" "~1.4.0"
+    "@noble/hashes" "~1.4.0"
+    "@scure/base" "~1.1.6"
 
 "@scure/bip39@1.2.1":
   version "1.2.1"
@@ -5017,6 +4736,14 @@
     "@noble/hashes" "~1.3.0"
     "@scure/base" "~1.1.0"
 
+"@scure/bip39@1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@scure/bip39/-/bip39-1.4.0.tgz#664d4f851564e2e1d4bffa0339f9546ea55960a6"
+  integrity sha512-BEEm6p8IueV/ZTfQLp/0vhw4NPnT9oWf5+28nvmeUICjP99f4vr2d+qc7AVGDDtwRep6ifR43Yed9ERVmiITzw==
+  dependencies:
+    "@noble/hashes" "~1.5.0"
+    "@scure/base" "~1.1.8"
+
 "@sentry/browser@7.24.0":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.24.0.tgz#3e657f8032322d07f98486f44e048fcdbc3aaff7"
@@ -5223,7 +4950,7 @@
     "@stablelib/constant-time" "^1.0.1"
     "@stablelib/wipe" "^1.0.1"
 
-"@stablelib/random@^1.0.1", "@stablelib/random@^1.0.2":
+"@stablelib/random@1.0.2", "@stablelib/random@^1.0.1", "@stablelib/random@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@stablelib/random/-/random-1.0.2.tgz#2dece393636489bf7e19c51229dd7900eddf742c"
   integrity sha512-rIsE83Xpb7clHPVRlBj8qNe5L8ISQOzjghYQm/dZ7VaM2KHYwMW5adjQjrzTZCchFnNCNhkwtnOBa9HTMJCI8w==
@@ -5254,7 +4981,7 @@
   resolved "https://registry.yarnpkg.com/@stablelib/wipe/-/wipe-1.0.1.tgz#d21401f1d59ade56a62e139462a97f104ed19a36"
   integrity sha512-WfqfX/eXGiAd3RJe4VU2snh/ZPwtSjLG4ynQ/vYzvghTh7dHFcI1wl+nrkWG6lGhukOxOsUHfv8dUXr58D0ayg==
 
-"@stablelib/x25519@^1.0.3":
+"@stablelib/x25519@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@stablelib/x25519/-/x25519-1.0.3.tgz#13c8174f774ea9f3e5e42213cbf9fc68a3c7b7fd"
   integrity sha512-KnTbKmUhPhHavzobclVJQG5kuivH+qDLpe84iRqX3CLrKp881cF160JvXJ+hjn1aMyCwYOKeIZefIH/P5cJoRw==
@@ -5683,11 +5410,17 @@
     "@swagger-api/apidom-parser-adapter-openapi-yaml-3-1" "^0.77.0"
     "@swagger-api/apidom-parser-adapter-yaml-1-2" "^0.77.0"
 
-"@swc/helpers@0.5.2":
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.2.tgz#85ea0c76450b61ad7d10a37050289eded783c27d"
-  integrity sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==
+"@swc/counter@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@swc/counter/-/counter-0.1.3.tgz#cc7463bd02949611c6329596fccd2b0ec782b0e9"
+  integrity sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==
+
+"@swc/helpers@0.5.5":
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.5.tgz#12689df71bfc9b21c4f4ca00ae55f2f16c8b77c0"
+  integrity sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==
   dependencies:
+    "@swc/counter" "^0.1.3"
     tslib "^2.4.0"
 
 "@tanstack/eslint-plugin-query@^5.0.5":
@@ -5697,29 +5430,29 @@
   dependencies:
     "@typescript-eslint/utils" "^5.54.0"
 
-"@tanstack/query-core@5.25.0":
-  version "5.25.0"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.25.0.tgz#e08ed0a9fad34c8005d1a282e57280031ac50cdc"
-  integrity sha512-vlobHP64HTuSE68lWF1mEhwSRC5Q7gaT+a/m9S+ItuN+ruSOxe1rFnR9j0ACWQ314BPhBEVKfBQ6mHL0OWfdbQ==
+"@tanstack/query-core@5.55.4":
+  version "5.55.4"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.55.4.tgz#21ef6c6505bf108570f1c18f5f3b90efc8b1c2d6"
+  integrity sha512-uoRqNnRfzOH4OMIoxj8E2+Us89UIGXfau981qYJWsNMkFS1GXR4UIyzUTVGq4N7SDLHgFPpo6IOazqUV5gkMZA==
 
-"@tanstack/query-devtools@5.4.2":
-  version "5.4.2"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.4.2.tgz#1687645ba1b9ffc76c55ac7759461d331d0776bf"
-  integrity sha512-EXdaMXi8CxZuMp97J5mq6wy1RduOfoWFv5vtA1U+hyqb8Wst6M8kkkjDSdFvGZIRpYY4K8mKLlEFHNUZDG5dtw==
+"@tanstack/query-devtools@5.55.1":
+  version "5.55.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.55.1.tgz#fa83c40e77d21f894ca447a62424cf62a6d75706"
+  integrity sha512-2g0TWQGlkyHs9maHIU5A7lRunG4Rj3Y5lOEenE+fydE4zk7GqRs7rKJBp7F74iqRo/cA9V6t1YYQWqd6YRBmcQ==
 
-"@tanstack/react-query-devtools@^5.4.3":
-  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.4.3.tgz#7df56de0454104c229f25393cf57a957f6245186"
-  integrity sha512-J9EB50vpK5yvQ5W+AOp9jIQa+1mld+Wwc2GF3VLr2SEDhOyiTiHOjrFGKKL1Cal5Wg8UuS3vexf8trElrtg05A==
+"@tanstack/react-query-devtools@5.55.4":
+  version "5.55.4"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.55.4.tgz#4db46ac41e095180d75e33332ca34517f29e373c"
+  integrity sha512-4uXcG95JV6TrlefF6n0NDckgY9QVwNPKVcn81a+MmJyKkZ704otBjtuSgXNznx5zNFnGrWlgH1luoD+bZPASuQ==
   dependencies:
-    "@tanstack/query-devtools" "5.4.2"
+    "@tanstack/query-devtools" "5.55.1"
 
-"@tanstack/react-query@^5.4.3":
-  version "5.25.0"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.25.0.tgz#f4dac794cf10dd956aa56dbbdf67049a5ba2669d"
-  integrity sha512-u+n5R7mLO7RmeiIonpaCRVXNRWtZEef/aVZ/XGWRPa7trBIvGtzlfo0Ah7ZtnTYfrKEVwnZ/tzRCBcoiqJ/tFw==
+"@tanstack/react-query@5.55.4":
+  version "5.55.4"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.55.4.tgz#4c8f54a05704e9f9a9ffc77a6dfa79b5a33f9905"
+  integrity sha512-e3uX5XkLD9oTV66/VsVpkYz3Ds/ps/Yk+V5d89xthAbtNIKKBEm4FdNb9yISFzGEGezUzVO68qmfmiSrtScvsg==
   dependencies:
-    "@tanstack/query-core" "5.25.0"
+    "@tanstack/query-core" "5.55.4"
 
 "@testing-library/dom@^9.0.0":
   version "9.3.0"
@@ -6143,16 +5876,6 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
-"@types/express@4.17.18":
-  version "4.17.18"
-  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.18.tgz#efabf5c4495c1880df1bdffee604b143b29c4a95"
-  integrity sha512-Sxv8BSLLgsBYmcnGdGjjEjqET2U+AKAdCRODmMiq02FgjwuV75Ut85DRpvFjyw/Mk0vgUOliGRU0UUmuuZHByQ==
-  dependencies:
-    "@types/body-parser" "*"
-    "@types/express-serve-static-core" "^4.17.33"
-    "@types/qs" "*"
-    "@types/serve-static" "*"
-
 "@types/filesystem@*":
   version "0.0.32"
   resolved "https://registry.yarnpkg.com/@types/filesystem/-/filesystem-0.0.32.tgz#307df7cc084a2293c3c1a31151b178063e0a8edf"
@@ -6324,10 +6047,10 @@
     "@types/koa-compose" "*"
     "@types/node" "*"
 
-"@types/koa@2.13.9":
-  version "2.13.9"
-  resolved "https://registry.yarnpkg.com/@types/koa/-/koa-2.13.9.tgz#8d989ac17d7f033475fbe34c4f906c9287c2041a"
-  integrity sha512-tPX3cN1dGrMn+sjCDEiQqXH2AqlPoPd594S/8zxwUm/ZbPsQXKqHPUypr2gjCPhHUc+nDJLduhh5lXI/1olnGQ==
+"@types/koa@2.14.0":
+  version "2.14.0"
+  resolved "https://registry.yarnpkg.com/@types/koa/-/koa-2.14.0.tgz#8939e8c3b695defc12f2ef9f38064509e564be18"
+  integrity sha512-DTDUyznHGNHAl+wd1n0z1jxNajduyTh8R53xoewuerdBzGo6Ogj6F2299BFtrexJw4NtgjsI5SMPCmV9gZwGXA==
   dependencies:
     "@types/accepts" "*"
     "@types/content-disposition" "*"
@@ -6338,10 +6061,10 @@
     "@types/koa-compose" "*"
     "@types/node" "*"
 
-"@types/koa__router@12.0.1":
-  version "12.0.1"
-  resolved "https://registry.yarnpkg.com/@types/koa__router/-/koa__router-12.0.1.tgz#e77b0c4081b1c56b004baf92afdd31766d5701f3"
-  integrity sha512-uqV+v6pCsfLZwK+Ar6XavKSZ6Cbsgw12bCEX9L0IKHj81LTWXcrayxJWkLtez5vOMQlq+ax+lZcuCyh9CgxYGw==
+"@types/koa__router@12.0.3":
+  version "12.0.3"
+  resolved "https://registry.yarnpkg.com/@types/koa__router/-/koa__router-12.0.3.tgz#3fb74ea1991cadd6c6712b6106657aa6e64afca4"
+  integrity sha512-5YUJVv6NwM1z7m6FuYpKfNLTZ932Z6EF6xy2BbtpJSyn13DKNQEkXVffFVSnJHxvwwWh2SAeumpjAYUELqgjyw==
   dependencies:
     "@types/koa" "*"
 
@@ -6408,13 +6131,18 @@
   dependencies:
     undici-types "~5.26.4"
 
-"@types/node@>=12.12.47", "@types/node@>=13.7.0":
+"@types/node@>=13.7.0":
   version "20.9.0"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.9.0.tgz#bfcdc230583aeb891cf51e73cfdaacdd8deae298"
   integrity sha512-nekiGu2NDb1BcVofVcEKMIwzlx4NjHlcjhoxxKBNLtz15Y1z7MYf549DFvkHSId02Ax6kGwWntIBPC3l/JZcmw==
   dependencies:
     undici-types "~5.26.4"
 
+"@types/node@>=8.0.0 <15":
+  version "14.18.63"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.63.tgz#1788fa8da838dbb5f9ea994b834278205db6ca2b"
+  integrity sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==
+
 "@types/papaparse@^5.3.5":
   version "5.3.5"
   resolved "https://registry.yarnpkg.com/@types/papaparse/-/papaparse-5.3.5.tgz#e5ad94b1fe98e2a8ea0b03284b83d2cb252bbf39"
@@ -6622,6 +6350,11 @@
   resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
   integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
 
+"@types/uuid@^10.0.0":
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-10.0.0.tgz#e9c07fe50da0f53dc24970cca94d619ff03f6f6d"
+  integrity sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==
+
 "@types/ws@^8.5.3":
   version "8.5.3"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"
@@ -6642,29 +6375,29 @@
     "@types/yargs-parser" "*"
 
 "@typescript-eslint/eslint-plugin@^5.60.0":
-  version "5.60.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.60.1.tgz#81382d6ecb92b8dda70e91f9035611cb2fecd1c3"
-  integrity sha512-KSWsVvsJsLJv3c4e73y/Bzt7OpqMCADUO846bHcuWYSYM19bldbAeDv7dYyV0jwkbMfJ2XdlzwjhXtuD7OY6bw==
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz#aeef0328d172b9e37d9bab6dbc13b87ed88977db"
+  integrity sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==
   dependencies:
     "@eslint-community/regexpp" "^4.4.0"
-    "@typescript-eslint/scope-manager" "5.60.1"
-    "@typescript-eslint/type-utils" "5.60.1"
-    "@typescript-eslint/utils" "5.60.1"
+    "@typescript-eslint/scope-manager" "5.62.0"
+    "@typescript-eslint/type-utils" "5.62.0"
+    "@typescript-eslint/utils" "5.62.0"
     debug "^4.3.4"
-    grapheme-splitter "^1.0.4"
+    graphemer "^1.4.0"
     ignore "^5.2.0"
     natural-compare-lite "^1.4.0"
     semver "^7.3.7"
     tsutils "^3.21.0"
 
 "@typescript-eslint/parser@^5.42.0":
-  version "5.59.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.59.0.tgz#0ad7cd019346cc5d150363f64869eca10ca9977c"
-  integrity sha512-qK9TZ70eJtjojSUMrrEwA9ZDQ4N0e/AuoOIgXuNBorXYcBDk397D2r5MIe1B3cok/oCtdNC5j+lUUpVB+Dpb+w==
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.62.0.tgz#1b63d082d849a2fcae8a569248fbe2ee1b8a56c7"
+  integrity sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.59.0"
-    "@typescript-eslint/types" "5.59.0"
-    "@typescript-eslint/typescript-estree" "5.59.0"
+    "@typescript-eslint/scope-manager" "5.62.0"
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/typescript-estree" "5.62.0"
     debug "^4.3.4"
 
 "@typescript-eslint/scope-manager@5.45.0":
@@ -6675,22 +6408,6 @@
     "@typescript-eslint/types" "5.45.0"
     "@typescript-eslint/visitor-keys" "5.45.0"
 
-"@typescript-eslint/scope-manager@5.59.0":
-  version "5.59.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.59.0.tgz#86501d7a17885710b6716a23be2e93fc54a4fe8c"
-  integrity sha512-tsoldKaMh7izN6BvkK6zRMINj4Z2d6gGhO2UsI8zGZY3XhLq1DndP3Ycjhi1JwdwPRwtLMW4EFPgpuKhbCGOvQ==
-  dependencies:
-    "@typescript-eslint/types" "5.59.0"
-    "@typescript-eslint/visitor-keys" "5.59.0"
-
-"@typescript-eslint/scope-manager@5.60.1":
-  version "5.60.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.60.1.tgz#35abdb47f500c68c08f2f2b4f22c7c79472854bb"
-  integrity sha512-Dn/LnN7fEoRD+KspEOV0xDMynEmR3iSHdgNsarlXNLGGtcUok8L4N71dxUgt3YvlO8si7E+BJ5Fe3wb5yUw7DQ==
-  dependencies:
-    "@typescript-eslint/types" "5.60.1"
-    "@typescript-eslint/visitor-keys" "5.60.1"
-
 "@typescript-eslint/scope-manager@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz#d9457ccc6a0b8d6b37d0eb252a23022478c5460c"
@@ -6699,13 +6416,13 @@
     "@typescript-eslint/types" "5.62.0"
     "@typescript-eslint/visitor-keys" "5.62.0"
 
-"@typescript-eslint/type-utils@5.60.1":
-  version "5.60.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.60.1.tgz#17770540e98d65ab4730c7aac618003f702893f4"
-  integrity sha512-vN6UztYqIu05nu7JqwQGzQKUJctzs3/Hg7E2Yx8rz9J+4LgtIDFWjjl1gm3pycH0P3mHAcEUBd23LVgfrsTR8A==
+"@typescript-eslint/type-utils@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz#286f0389c41681376cdad96b309cedd17d70346a"
+  integrity sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==
   dependencies:
-    "@typescript-eslint/typescript-estree" "5.60.1"
-    "@typescript-eslint/utils" "5.60.1"
+    "@typescript-eslint/typescript-estree" "5.62.0"
+    "@typescript-eslint/utils" "5.62.0"
     debug "^4.3.4"
     tsutils "^3.21.0"
 
@@ -6714,16 +6431,6 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.45.0.tgz#794760b9037ee4154c09549ef5a96599621109c5"
   integrity sha512-QQij+u/vgskA66azc9dCmx+rev79PzX8uDHpsqSjEFtfF2gBUTRCpvYMh2gw2ghkJabNkPlSUCimsyBEQZd1DA==
 
-"@typescript-eslint/types@5.59.0":
-  version "5.59.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.59.0.tgz#3fcdac7dbf923ec5251545acdd9f1d42d7c4fe32"
-  integrity sha512-yR2h1NotF23xFFYKHZs17QJnB51J/s+ud4PYU4MqdZbzeNxpgUr05+dNeCN/bb6raslHvGdd6BFCkVhpPk/ZeA==
-
-"@typescript-eslint/types@5.60.1":
-  version "5.60.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.60.1.tgz#a17473910f6b8d388ea83c9d7051af89c4eb7561"
-  integrity sha512-zDcDx5fccU8BA0IDZc71bAtYIcG9PowaOwaD8rjYbqwK7dpe/UMQl3inJ4UtUK42nOCT41jTSCwg76E62JpMcg==
-
 "@typescript-eslint/types@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
@@ -6742,32 +6449,6 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/typescript-estree@5.59.0":
-  version "5.59.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.0.tgz#8869156ee1dcfc5a95be3ed0e2809969ea28e965"
-  integrity sha512-sUNnktjmI8DyGzPdZ8dRwW741zopGxltGs/SAPgGL/AAgDpiLsCFLcMNSpbfXfmnNeHmK9h3wGmCkGRGAoUZAg==
-  dependencies:
-    "@typescript-eslint/types" "5.59.0"
-    "@typescript-eslint/visitor-keys" "5.59.0"
-    debug "^4.3.4"
-    globby "^11.1.0"
-    is-glob "^4.0.3"
-    semver "^7.3.7"
-    tsutils "^3.21.0"
-
-"@typescript-eslint/typescript-estree@5.60.1":
-  version "5.60.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.60.1.tgz#8c71824b7165b64d5ebd7aa42968899525959834"
-  integrity sha512-hkX70J9+2M2ZT6fhti5Q2FoU9zb+GeZK2SLP1WZlvUDqdMbEKhexZODD1WodNRyO8eS+4nScvT0dts8IdaBzfw==
-  dependencies:
-    "@typescript-eslint/types" "5.60.1"
-    "@typescript-eslint/visitor-keys" "5.60.1"
-    debug "^4.3.4"
-    globby "^11.1.0"
-    is-glob "^4.0.3"
-    semver "^7.3.7"
-    tsutils "^3.21.0"
-
 "@typescript-eslint/typescript-estree@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b"
@@ -6781,17 +6462,17 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/utils@5.60.1":
-  version "5.60.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.60.1.tgz#6861ebedbefba1ac85482d2bdef6f2ff1eb65b80"
-  integrity sha512-tiJ7FFdFQOWssFa3gqb94Ilexyw0JVxj6vBzaSpfN/8IhoKkDuSAenUKvsSHw2A/TMpJb26izIszTXaqygkvpQ==
+"@typescript-eslint/utils@5.62.0", "@typescript-eslint/utils@^5.54.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86"
+  integrity sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
     "@types/json-schema" "^7.0.9"
     "@types/semver" "^7.3.12"
-    "@typescript-eslint/scope-manager" "5.60.1"
-    "@typescript-eslint/types" "5.60.1"
-    "@typescript-eslint/typescript-estree" "5.60.1"
+    "@typescript-eslint/scope-manager" "5.62.0"
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/typescript-estree" "5.62.0"
     eslint-scope "^5.1.1"
     semver "^7.3.7"
 
@@ -6809,20 +6490,6 @@
     eslint-utils "^3.0.0"
     semver "^7.3.7"
 
-"@typescript-eslint/utils@^5.54.0":
-  version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86"
-  integrity sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==
-  dependencies:
-    "@eslint-community/eslint-utils" "^4.2.0"
-    "@types/json-schema" "^7.0.9"
-    "@types/semver" "^7.3.12"
-    "@typescript-eslint/scope-manager" "5.62.0"
-    "@typescript-eslint/types" "5.62.0"
-    "@typescript-eslint/typescript-estree" "5.62.0"
-    eslint-scope "^5.1.1"
-    semver "^7.3.7"
-
 "@typescript-eslint/visitor-keys@5.45.0":
   version "5.45.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.45.0.tgz#e0d160e9e7fdb7f8da697a5b78e7a14a22a70528"
@@ -6831,22 +6498,6 @@
     "@typescript-eslint/types" "5.45.0"
     eslint-visitor-keys "^3.3.0"
 
-"@typescript-eslint/visitor-keys@5.59.0":
-  version "5.59.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.0.tgz#a59913f2bf0baeb61b5cfcb6135d3926c3854365"
-  integrity sha512-qZ3iXxQhanchCeaExlKPV3gDQFxMUmU35xfd5eCXB6+kUw1TUAbIy2n7QIrwz9s98DQLzNWyHp61fY0da4ZcbA==
-  dependencies:
-    "@typescript-eslint/types" "5.59.0"
-    eslint-visitor-keys "^3.3.0"
-
-"@typescript-eslint/visitor-keys@5.60.1":
-  version "5.60.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.60.1.tgz#19a877358bf96318ec35d90bfe6bd1445cce9434"
-  integrity sha512-xEYIxKcultP6E/RMKqube11pGjXH1DCo60mQoWhVYyKfLkwbIVVjYxmOenNMxILx0TjCujPTjjnTIVzm09TXIw==
-  dependencies:
-    "@typescript-eslint/types" "5.60.1"
-    eslint-visitor-keys "^3.3.0"
-
 "@typescript-eslint/visitor-keys@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz#2174011917ce582875954ffe2f6912d5931e353e"
@@ -6855,6 +6506,11 @@
     "@typescript-eslint/types" "5.62.0"
     eslint-visitor-keys "^3.3.0"
 
+"@ungap/structured-clone@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
+  integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
+
 "@vitejs/plugin-react@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-4.0.0.tgz#46d1c37c507447d10467be1c111595174555ef28"
@@ -6865,144 +6521,49 @@
     "@babel/plugin-transform-react-jsx-source" "^7.19.6"
     react-refresh "^0.14.0"
 
-"@vue/compiler-core@3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.3.11.tgz#9fa26f8c81b9b34365f94ce1ed4d0e6e6f94a2ac"
-  integrity sha512-h97/TGWBilnLuRaj58sxNrsUU66fwdRKLOLQ9N/5iNDfp+DZhYH9Obhe0bXxhedl8fjAgpRANpiZfbgWyruQ0w==
+"@wagmi/connectors@5.1.10":
+  version "5.1.10"
+  resolved "https://registry.yarnpkg.com/@wagmi/connectors/-/connectors-5.1.10.tgz#316dcdbb3924c546c177b0fc287e0f591225c63f"
+  integrity sha512-ybgKV09PIhgUgQ4atXTs2KOy4Hevd6f972SXfx6HTgsnFXlzxzN6o0aWjhavZOYjvx5tjuL3+8Mgqo0R7uP5Cg==
   dependencies:
-    "@babel/parser" "^7.23.5"
-    "@vue/shared" "3.3.11"
-    estree-walker "^2.0.2"
-    source-map-js "^1.0.2"
-
-"@vue/compiler-dom@3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.3.11.tgz#36a76ea3a296d41bad133a6912cb0a847d969e4f"
-  integrity sha512-zoAiUIqSKqAJ81WhfPXYmFGwDRuO+loqLxvXmfUdR5fOitPoUiIeFI9cTTyv9MU5O1+ZZglJVTusWzy+wfk5hw==
-  dependencies:
-    "@vue/compiler-core" "3.3.11"
-    "@vue/shared" "3.3.11"
-
-"@vue/compiler-sfc@3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.3.11.tgz#acfae240c875d067e0e2c9a4e2d910074408c73b"
-  integrity sha512-U4iqPlHO0KQeK1mrsxCN0vZzw43/lL8POxgpzcJweopmqtoYy9nljJzWDIQS3EfjiYhfdtdk9Gtgz7MRXnz3GA==
-  dependencies:
-    "@babel/parser" "^7.23.5"
-    "@vue/compiler-core" "3.3.11"
-    "@vue/compiler-dom" "3.3.11"
-    "@vue/compiler-ssr" "3.3.11"
-    "@vue/reactivity-transform" "3.3.11"
-    "@vue/shared" "3.3.11"
-    estree-walker "^2.0.2"
-    magic-string "^0.30.5"
-    postcss "^8.4.32"
-    source-map-js "^1.0.2"
-
-"@vue/compiler-ssr@3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.3.11.tgz#598942a73b64f2bd3f95908b104a7fbb55fc41a2"
-  integrity sha512-Zd66ZwMvndxRTgVPdo+muV4Rv9n9DwQ4SSgWWKWkPFebHQfVYRrVjeygmmDmPewsHyznCNvJ2P2d6iOOhdv8Qg==
-  dependencies:
-    "@vue/compiler-dom" "3.3.11"
-    "@vue/shared" "3.3.11"
-
-"@vue/reactivity-transform@3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.3.11.tgz#2bd486f4eff60c8724309925618891e722fcfadc"
-  integrity sha512-fPGjH0wqJo68A0wQ1k158utDq/cRyZNlFoxGwNScE28aUFOKFEnCBsvyD8jHn+0kd0UKVpuGuaZEQ6r9FJRqCg==
-  dependencies:
-    "@babel/parser" "^7.23.5"
-    "@vue/compiler-core" "3.3.11"
-    "@vue/shared" "3.3.11"
-    estree-walker "^2.0.2"
-    magic-string "^0.30.5"
-
-"@vue/reactivity@3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.3.11.tgz#91f8e6c9ac60a595a5278c836b197628fd947a0d"
-  integrity sha512-D5tcw091f0nuu+hXq5XANofD0OXnBmaRqMYl5B3fCR+mX+cXJIGNw/VNawBqkjLNWETrFW0i+xH9NvDbTPVh7g==
-  dependencies:
-    "@vue/shared" "3.3.11"
-
-"@vue/runtime-core@3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.3.11.tgz#63defba57bc54c1dac68a95b56c2633b1419193d"
-  integrity sha512-g9ztHGwEbS5RyWaOpXuyIVFTschclnwhqEbdy5AwGhYOgc7m/q3NFwr50MirZwTTzX55JY8pSkeib9BX04NIpw==
-  dependencies:
-    "@vue/reactivity" "3.3.11"
-    "@vue/shared" "3.3.11"
-
-"@vue/runtime-dom@3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.3.11.tgz#1146d8d280b0fec4d2e18c4a4c8f8121d0cecc09"
-  integrity sha512-OlhtV1PVpbgk+I2zl+Y5rQtDNcCDs12rsRg71XwaA2/Rbllw6mBLMi57VOn8G0AjOJ4Mdb4k56V37+g8ukShpQ==
-  dependencies:
-    "@vue/runtime-core" "3.3.11"
-    "@vue/shared" "3.3.11"
-    csstype "^3.1.2"
-
-"@vue/server-renderer@3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.3.11.tgz#409aed8031a125791e2143552975ecd1958ad601"
-  integrity sha512-AIWk0VwwxCAm4wqtJyxBylRTXSy1wCLOKbWxHaHiu14wjsNYtiRCSgVuqEPVuDpErOlRdNnuRgipQfXRLjLN5A==
-  dependencies:
-    "@vue/compiler-ssr" "3.3.11"
-    "@vue/shared" "3.3.11"
-
-"@vue/shared@3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.3.11.tgz#f6a038e15237edefcc90dbfe7edb806dd355c7bd"
-  integrity sha512-u2G8ZQ9IhMWTMXaWqZycnK4UthG1fA238CD+DP4Dm4WJi5hdUKKLg0RMRaRpDPNMdkTwIDkp7WtD0Rd9BH9fLw==
-
-"@wagmi/chains@1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@wagmi/chains/-/chains-1.2.0.tgz#d59eaa70ec51a5fdcd113975926992acfb17ab12"
-  integrity sha512-dmDRipsE54JfyudOBkuhEexqQWcrZqxn/qiujG8SBzMh/az/AH5xlJSA+j1CPWTx9+QofSMF3B7A4gb6XRmSaQ==
-
-"@wagmi/connectors@4.1.22":
-  version "4.1.22"
-  resolved "https://registry.yarnpkg.com/@wagmi/connectors/-/connectors-4.1.22.tgz#6e2b253a5e08ff8a145cfc2beb943a375a073414"
-  integrity sha512-9t14G28awyeWTjGS/OfEd/DhdeX5t4Pio3SJHw4M4aTexIfN5DHGmmtfUtSu6DP1r+LD2vSI4ShT7vH0dgtZwA==
-  dependencies:
-    "@coinbase/wallet-sdk" "3.9.1"
-    "@metamask/sdk" "0.14.3"
-    "@safe-global/safe-apps-provider" "0.18.1"
-    "@safe-global/safe-apps-sdk" "8.1.0"
-    "@walletconnect/ethereum-provider" "2.11.2"
+    "@coinbase/wallet-sdk" "4.0.4"
+    "@metamask/sdk" "0.28.2"
+    "@safe-global/safe-apps-provider" "0.18.3"
+    "@safe-global/safe-apps-sdk" "9.1.0"
+    "@walletconnect/ethereum-provider" "2.16.1"
     "@walletconnect/modal" "2.6.2"
+    cbw-sdk "npm:@coinbase/wallet-sdk@3.9.3"
 
-"@wagmi/core@2.6.13":
-  version "2.6.13"
-  resolved "https://registry.yarnpkg.com/@wagmi/core/-/core-2.6.13.tgz#eaca669b6b4283ec69412a206e66182a11d926c6"
-  integrity sha512-RZQ0mBXMH5oe7uvFkNh0e/gPWWLsbkDv/6/SeTY2H7fsH4I/T62ID6eNYUtyOoz7FgQTdAyPdSEt9lst1ZXxkQ==
+"@wagmi/core@2.13.5":
+  version "2.13.5"
+  resolved "https://registry.yarnpkg.com/@wagmi/core/-/core-2.13.5.tgz#20764d88d36c31c4557511309eef7d23fa60c98e"
+  integrity sha512-lvX/hApJTSA/H2kOklokjIYiUpnT8CpBH80GeOiKxU0CGK1wNHTu20GRTCy0GF1t7jkNwPSG3m0SmnXmgYMmHw==
   dependencies:
     eventemitter3 "5.0.1"
-    mipd "0.0.5"
+    mipd "0.0.7"
     zustand "4.4.1"
 
-"@walletconnect/core@2.11.2":
-  version "2.11.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/core/-/core-2.11.2.tgz#35286be92c645fa461fecc0dfe25de9f076fca8f"
-  integrity sha512-bB4SiXX8hX3/hyBfVPC5gwZCXCl+OPj+/EDVM71iAO3TDsh78KPbrVAbDnnsbHzZVHlsMohtXX3j5XVsheN3+g==
+"@walletconnect/core@2.16.1":
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/@walletconnect/core/-/core-2.16.1.tgz#019b181387792e0d284e75074b961b48193d9b6a"
+  integrity sha512-UlsnEMT5wwFvmxEjX8s4oju7R3zadxNbZgsFeHEsjh7uknY2zgmUe1Lfc5XU6zyPb1Jx7Nqpdx1KN485ee8ogw==
   dependencies:
-    "@walletconnect/heartbeat" "1.2.1"
-    "@walletconnect/jsonrpc-provider" "1.0.13"
-    "@walletconnect/jsonrpc-types" "1.0.3"
+    "@walletconnect/heartbeat" "1.2.2"
+    "@walletconnect/jsonrpc-provider" "1.0.14"
+    "@walletconnect/jsonrpc-types" "1.0.4"
     "@walletconnect/jsonrpc-utils" "1.0.8"
     "@walletconnect/jsonrpc-ws-connection" "1.0.14"
-    "@walletconnect/keyvaluestorage" "^1.1.1"
-    "@walletconnect/logger" "^2.0.1"
-    "@walletconnect/relay-api" "^1.0.9"
-    "@walletconnect/relay-auth" "^1.0.4"
-    "@walletconnect/safe-json" "^1.0.2"
-    "@walletconnect/time" "^1.0.2"
-    "@walletconnect/types" "2.11.2"
-    "@walletconnect/utils" "2.11.2"
-    events "^3.3.0"
-    isomorphic-unfetch "3.1.0"
+    "@walletconnect/keyvaluestorage" "1.1.1"
+    "@walletconnect/logger" "2.1.2"
+    "@walletconnect/relay-api" "1.0.11"
+    "@walletconnect/relay-auth" "1.0.4"
+    "@walletconnect/safe-json" "1.0.2"
+    "@walletconnect/time" "1.0.2"
+    "@walletconnect/types" "2.16.1"
+    "@walletconnect/utils" "2.16.1"
+    events "3.3.0"
     lodash.isequal "4.5.0"
-    uint8arrays "^3.1.0"
+    uint8arrays "3.1.0"
 
 "@walletconnect/environment@^1.0.1":
   version "1.0.1"
@@ -7011,23 +6572,23 @@
   dependencies:
     tslib "1.14.1"
 
-"@walletconnect/ethereum-provider@2.11.2":
-  version "2.11.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/ethereum-provider/-/ethereum-provider-2.11.2.tgz#914f773e37a879bc00cf367437c4e98a826247b1"
-  integrity sha512-BUDqee0Uy2rCZVkW5Ao3q6Ado/3fePYnFdryVF+YL6bPhj+xQZ5OfKodl+uvs7Rwq++O5wTX2RqOTzpW7+v+Mg==
+"@walletconnect/ethereum-provider@2.16.1":
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/@walletconnect/ethereum-provider/-/ethereum-provider-2.16.1.tgz#4fb8a1df39104ad3fbd02579233e796f432f6d35"
+  integrity sha512-oD7DNCssUX3plS5gGUZ9JQ63muQB/vxO68X6RzD2wd8gBsYtSPw4BqYFc7KTO6dUizD6gfPirw32yW2pTvy92w==
   dependencies:
-    "@walletconnect/jsonrpc-http-connection" "^1.0.7"
-    "@walletconnect/jsonrpc-provider" "^1.0.13"
-    "@walletconnect/jsonrpc-types" "^1.0.3"
-    "@walletconnect/jsonrpc-utils" "^1.0.8"
-    "@walletconnect/modal" "^2.6.2"
-    "@walletconnect/sign-client" "2.11.2"
-    "@walletconnect/types" "2.11.2"
-    "@walletconnect/universal-provider" "2.11.2"
-    "@walletconnect/utils" "2.11.2"
-    events "^3.3.0"
+    "@walletconnect/jsonrpc-http-connection" "1.0.8"
+    "@walletconnect/jsonrpc-provider" "1.0.14"
+    "@walletconnect/jsonrpc-types" "1.0.4"
+    "@walletconnect/jsonrpc-utils" "1.0.8"
+    "@walletconnect/modal" "2.6.2"
+    "@walletconnect/sign-client" "2.16.1"
+    "@walletconnect/types" "2.16.1"
+    "@walletconnect/universal-provider" "2.16.1"
+    "@walletconnect/utils" "2.16.1"
+    events "3.3.0"
 
-"@walletconnect/events@^1.0.1":
+"@walletconnect/events@1.0.1", "@walletconnect/events@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@walletconnect/events/-/events-1.0.1.tgz#2b5f9c7202019e229d7ccae1369a9e86bda7816c"
   integrity sha512-NPTqaoi0oPBVNuLv7qPaJazmGHs5JGyO8eEAk5VGKmJzDR7AHzD4k6ilox5kxk1iwiOnFopBOOMLs86Oa76HpQ==
@@ -7035,41 +6596,41 @@
     keyvaluestorage-interface "^1.0.0"
     tslib "1.14.1"
 
-"@walletconnect/heartbeat@1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@walletconnect/heartbeat/-/heartbeat-1.2.1.tgz#afaa3a53232ae182d7c9cff41c1084472d8f32e9"
-  integrity sha512-yVzws616xsDLJxuG/28FqtZ5rzrTA4gUjdEMTbWB5Y8V1XHRmqq4efAxCw5ie7WjbXFSUyBHaWlMR+2/CpQC5Q==
+"@walletconnect/heartbeat@1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/heartbeat/-/heartbeat-1.2.2.tgz#e8dc5179db7769950c6f9cf59b23516d9b95227d"
+  integrity sha512-uASiRmC5MwhuRuf05vq4AT48Pq8RMi876zV8rr8cV969uTOzWdB/k+Lj5yI2PBtB1bGQisGen7MM1GcZlQTBXw==
   dependencies:
     "@walletconnect/events" "^1.0.1"
     "@walletconnect/time" "^1.0.2"
-    tslib "1.14.1"
+    events "^3.3.0"
 
-"@walletconnect/jsonrpc-http-connection@^1.0.7":
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-http-connection/-/jsonrpc-http-connection-1.0.7.tgz#a6973569b8854c22da707a759d241e4f5c2d5a98"
-  integrity sha512-qlfh8fCfu8LOM9JRR9KE0s0wxP6ZG9/Jom8M0qsoIQeKF3Ni0FyV4V1qy/cc7nfI46SLQLSl4tgWSfLiE1swyQ==
+"@walletconnect/jsonrpc-http-connection@1.0.8":
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-http-connection/-/jsonrpc-http-connection-1.0.8.tgz#2f4c3948f074960a3edd07909560f3be13e2c7ae"
+  integrity sha512-+B7cRuaxijLeFDJUq5hAzNyef3e3tBDIxyaCNmFtjwnod5AGis3RToNqzFU33vpVcxFhofkpE7Cx+5MYejbMGw==
   dependencies:
     "@walletconnect/jsonrpc-utils" "^1.0.6"
     "@walletconnect/safe-json" "^1.0.1"
     cross-fetch "^3.1.4"
-    tslib "1.14.1"
+    events "^3.3.0"
 
-"@walletconnect/jsonrpc-provider@1.0.13", "@walletconnect/jsonrpc-provider@^1.0.13":
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-provider/-/jsonrpc-provider-1.0.13.tgz#9a74da648d015e1fffc745f0c7d629457f53648b"
-  integrity sha512-K73EpThqHnSR26gOyNEL+acEex3P7VWZe6KE12ZwKzAt2H4e5gldZHbjsu2QR9cLeJ8AXuO7kEMOIcRv1QEc7g==
+"@walletconnect/jsonrpc-provider@1.0.14":
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-provider/-/jsonrpc-provider-1.0.14.tgz#696f3e3b6d728b361f2e8b853cfc6afbdf2e4e3e"
+  integrity sha512-rtsNY1XqHvWj0EtITNeuf8PHMvlCLiS3EjQL+WOkxEOA4KPxsohFnBDeyPYiNm4ZvkQdLnece36opYidmtbmow==
   dependencies:
     "@walletconnect/jsonrpc-utils" "^1.0.8"
     "@walletconnect/safe-json" "^1.0.2"
-    tslib "1.14.1"
+    events "^3.3.0"
 
-"@walletconnect/jsonrpc-types@1.0.3", "@walletconnect/jsonrpc-types@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-types/-/jsonrpc-types-1.0.3.tgz#65e3b77046f1a7fa8347ae02bc1b841abe6f290c"
-  integrity sha512-iIQ8hboBl3o5ufmJ8cuduGad0CQm3ZlsHtujv9Eu16xq89q+BG7Nh5VLxxUgmtpnrePgFkTwXirCTkwJH1v+Yw==
+"@walletconnect/jsonrpc-types@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-types/-/jsonrpc-types-1.0.4.tgz#ce1a667d79eadf2a2d9d002c152ceb68739c230c"
+  integrity sha512-P6679fG/M+wuWg9TY8mh6xFSdYnFyFjwFelxyISxMDrlbXokorEVXYOxiqEbrU3x1BmBoCAJJ+vtEaEoMlpCBQ==
   dependencies:
+    events "^3.3.0"
     keyvaluestorage-interface "^1.0.0"
-    tslib "1.14.1"
 
 "@walletconnect/jsonrpc-types@^1.0.2":
   version "1.0.2"
@@ -7079,7 +6640,15 @@
     keyvaluestorage-interface "^1.0.0"
     tslib "1.14.1"
 
-"@walletconnect/jsonrpc-utils@1.0.8", "@walletconnect/jsonrpc-utils@^1.0.6", "@walletconnect/jsonrpc-utils@^1.0.7", "@walletconnect/jsonrpc-utils@^1.0.8":
+"@walletconnect/jsonrpc-types@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-types/-/jsonrpc-types-1.0.3.tgz#65e3b77046f1a7fa8347ae02bc1b841abe6f290c"
+  integrity sha512-iIQ8hboBl3o5ufmJ8cuduGad0CQm3ZlsHtujv9Eu16xq89q+BG7Nh5VLxxUgmtpnrePgFkTwXirCTkwJH1v+Yw==
+  dependencies:
+    keyvaluestorage-interface "^1.0.0"
+    tslib "1.14.1"
+
+"@walletconnect/jsonrpc-utils@1.0.8", "@walletconnect/jsonrpc-utils@^1.0.6", "@walletconnect/jsonrpc-utils@^1.0.8":
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-utils/-/jsonrpc-utils-1.0.8.tgz#82d0cc6a5d6ff0ecc277cb35f71402c91ad48d72"
   integrity sha512-vdeb03bD8VzJUL6ZtzRYsFMq1eZQcM3EAzT0a3st59dyLfJ0wq+tKMpmGH7HlB7waD858UWgfIcudbPFsbzVdw==
@@ -7098,7 +6667,7 @@
     events "^3.3.0"
     ws "^7.5.1"
 
-"@walletconnect/keyvaluestorage@^1.1.1":
+"@walletconnect/keyvaluestorage@1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@walletconnect/keyvaluestorage/-/keyvaluestorage-1.1.1.tgz#dd2caddabfbaf80f6b8993a0704d8b83115a1842"
   integrity sha512-V7ZQq2+mSxAq7MrRqDxanTzu2RcElfK1PfNYiaVnJgJ7Q7G7hTVwF8voIBx92qsRyGHZihrwNPHuZd1aKkd0rA==
@@ -7107,13 +6676,13 @@
     idb-keyval "^6.2.1"
     unstorage "^1.9.0"
 
-"@walletconnect/logger@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@walletconnect/logger/-/logger-2.0.1.tgz#7f489b96e9a1ff6bf3e58f0fbd6d69718bf844a8"
-  integrity sha512-SsTKdsgWm+oDTBeNE/zHxxr5eJfZmE9/5yp/Ku+zJtcTAjELb3DXueWkDXmE9h8uHIbJzIb5wj5lPdzyrjT6hQ==
+"@walletconnect/logger@2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/logger/-/logger-2.1.2.tgz#813c9af61b96323a99f16c10089bfeb525e2a272"
+  integrity sha512-aAb28I3S6pYXZHQm5ESB+V6rDqIYfsnHaQyzFbwUUBFY4H0OXx/YtTl8lvhUNhMMfb9UxbwEBS253TlXUYJWSw==
   dependencies:
+    "@walletconnect/safe-json" "^1.0.2"
     pino "7.11.0"
-    tslib "1.14.1"
 
 "@walletconnect/modal-core@2.6.2":
   version "2.6.2"
@@ -7132,7 +6701,7 @@
     motion "10.16.2"
     qrcode "1.5.3"
 
-"@walletconnect/modal@2.6.2", "@walletconnect/modal@^2.6.2":
+"@walletconnect/modal@2.6.2":
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/@walletconnect/modal/-/modal-2.6.2.tgz#4b534a836f5039eeb3268b80be7217a94dd12651"
   integrity sha512-eFopgKi8AjKf/0U4SemvcYw9zlLpx9njVN8sf6DAkowC2Md0gPU/UNEbH1Wwj407pEKnEds98pKWib1NN1ACoA==
@@ -7140,15 +6709,14 @@
     "@walletconnect/modal-core" "2.6.2"
     "@walletconnect/modal-ui" "2.6.2"
 
-"@walletconnect/relay-api@^1.0.9":
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/@walletconnect/relay-api/-/relay-api-1.0.9.tgz#f8c2c3993dddaa9f33ed42197fc9bfebd790ecaf"
-  integrity sha512-Q3+rylJOqRkO1D9Su0DPE3mmznbAalYapJ9qmzDgK28mYF9alcP3UwG/og5V7l7CFOqzCLi7B8BvcBUrpDj0Rg==
+"@walletconnect/relay-api@1.0.11":
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@walletconnect/relay-api/-/relay-api-1.0.11.tgz#80ab7ef2e83c6c173be1a59756f95e515fb63224"
+  integrity sha512-tLPErkze/HmC9aCmdZOhtVmYZq1wKfWTJtygQHoWtgg722Jd4homo54Cs4ak2RUFUZIGO2RsOpIcWipaua5D5Q==
   dependencies:
     "@walletconnect/jsonrpc-types" "^1.0.2"
-    tslib "1.14.1"
 
-"@walletconnect/relay-auth@^1.0.4":
+"@walletconnect/relay-auth@1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@walletconnect/relay-auth/-/relay-auth-1.0.4.tgz#0b5c55c9aa3b0ef61f526ce679f3ff8a5c4c2c7c"
   integrity sha512-kKJcS6+WxYq5kshpPaxGHdwf5y98ZwbfuS4EE/NkQzqrDFm5Cj+dP8LofzWvjrrLkZq7Afy7WrQMXdLy8Sx7HQ==
@@ -7160,6 +6728,13 @@
     tslib "1.14.1"
     uint8arrays "^3.0.0"
 
+"@walletconnect/safe-json@1.0.2", "@walletconnect/safe-json@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/safe-json/-/safe-json-1.0.2.tgz#7237e5ca48046e4476154e503c6d3c914126fa77"
+  integrity sha512-Ogb7I27kZ3LPC3ibn8ldyUr5544t3/STow9+lzz7Sfo808YD7SBWk7SAsdBFlYgP2zDRy2hS3sKRcuSRM0OTmA==
+  dependencies:
+    tslib "1.14.1"
+
 "@walletconnect/safe-json@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@walletconnect/safe-json/-/safe-json-1.0.1.tgz#9813fa0a7a544b16468730c2d7bed046ed160957"
@@ -7167,90 +6742,85 @@
   dependencies:
     tslib "1.14.1"
 
-"@walletconnect/safe-json@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/safe-json/-/safe-json-1.0.2.tgz#7237e5ca48046e4476154e503c6d3c914126fa77"
-  integrity sha512-Ogb7I27kZ3LPC3ibn8ldyUr5544t3/STow9+lzz7Sfo808YD7SBWk7SAsdBFlYgP2zDRy2hS3sKRcuSRM0OTmA==
+"@walletconnect/sign-client@2.16.1":
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/@walletconnect/sign-client/-/sign-client-2.16.1.tgz#94a2f630ba741bd180f540c53576c5ceaace4857"
+  integrity sha512-s2Tx2n2duxt+sHtuWXrN9yZVaHaYqcEcjwlTD+55/vs5NUPlISf+fFmZLwSeX1kUlrSBrAuxPUcqQuRTKcjLOA==
   dependencies:
-    tslib "1.14.1"
-
-"@walletconnect/sign-client@2.11.2":
-  version "2.11.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/sign-client/-/sign-client-2.11.2.tgz#855609653855f0d23b0502cdbdcf43402e34c459"
-  integrity sha512-MfBcuSz2GmMH+P7MrCP46mVE5qhP0ZyWA0FyIH6/WuxQ6G+MgKsGfaITqakpRPsykWOJq8tXMs3XvUPDU413OQ==
-  dependencies:
-    "@walletconnect/core" "2.11.2"
-    "@walletconnect/events" "^1.0.1"
-    "@walletconnect/heartbeat" "1.2.1"
+    "@walletconnect/core" "2.16.1"
+    "@walletconnect/events" "1.0.1"
+    "@walletconnect/heartbeat" "1.2.2"
     "@walletconnect/jsonrpc-utils" "1.0.8"
-    "@walletconnect/logger" "^2.0.1"
-    "@walletconnect/time" "^1.0.2"
-    "@walletconnect/types" "2.11.2"
-    "@walletconnect/utils" "2.11.2"
-    events "^3.3.0"
+    "@walletconnect/logger" "2.1.2"
+    "@walletconnect/time" "1.0.2"
+    "@walletconnect/types" "2.16.1"
+    "@walletconnect/utils" "2.16.1"
+    events "3.3.0"
 
-"@walletconnect/time@^1.0.2":
+"@walletconnect/time@1.0.2", "@walletconnect/time@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@walletconnect/time/-/time-1.0.2.tgz#6c5888b835750ecb4299d28eecc5e72c6d336523"
   integrity sha512-uzdd9woDcJ1AaBZRhqy5rNC9laqWGErfc4dxA9a87mPdKOgWMD85mcFo9dIYIts/Jwocfwn07EC6EzclKubk/g==
   dependencies:
     tslib "1.14.1"
 
-"@walletconnect/types@2.11.2":
-  version "2.11.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-2.11.2.tgz#d0359dd4106fcaa1634241a00428d3ea08d0d3c7"
-  integrity sha512-p632MFB+lJbip2cvtXPBQslpUdiw1sDtQ5y855bOlAGquay+6fZ4h1DcDePeKQDQM3P77ax2a9aNPZxV6y/h1Q==
-  dependencies:
-    "@walletconnect/events" "^1.0.1"
-    "@walletconnect/heartbeat" "1.2.1"
-    "@walletconnect/jsonrpc-types" "1.0.3"
-    "@walletconnect/keyvaluestorage" "^1.1.1"
-    "@walletconnect/logger" "^2.0.1"
-    events "^3.3.0"
-
-"@walletconnect/universal-provider@2.11.2":
-  version "2.11.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/universal-provider/-/universal-provider-2.11.2.tgz#bec3038f51445d707bbec75f0cb8af0a1f1e04db"
-  integrity sha512-cNtIn5AVoDxKAJ4PmB8m5adnf5mYQMUamEUPKMVvOPscfGtIMQEh9peKsh2AN5xcRVDbgluC01Id545evFyymw==
-  dependencies:
-    "@walletconnect/jsonrpc-http-connection" "^1.0.7"
-    "@walletconnect/jsonrpc-provider" "1.0.13"
-    "@walletconnect/jsonrpc-types" "^1.0.2"
-    "@walletconnect/jsonrpc-utils" "^1.0.7"
-    "@walletconnect/logger" "^2.0.1"
-    "@walletconnect/sign-client" "2.11.2"
-    "@walletconnect/types" "2.11.2"
-    "@walletconnect/utils" "2.11.2"
-    events "^3.3.0"
+"@walletconnect/types@2.16.1":
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-2.16.1.tgz#6583d458d3f7b1919d482ba516ccb7878ec8c91f"
+  integrity sha512-9P4RG4VoDEF+yBF/n2TF12gsvT/aTaeZTVDb/AOayafqiPnmrQZMKmNCJJjq1sfdsDcHXFcZWMGsuCeSJCmrXA==
+  dependencies:
+    "@walletconnect/events" "1.0.1"
+    "@walletconnect/heartbeat" "1.2.2"
+    "@walletconnect/jsonrpc-types" "1.0.4"
+    "@walletconnect/keyvaluestorage" "1.1.1"
+    "@walletconnect/logger" "2.1.2"
+    events "3.3.0"
+
+"@walletconnect/universal-provider@2.16.1":
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/@walletconnect/universal-provider/-/universal-provider-2.16.1.tgz#6d52c41c7388e01f89007956a1117748ab9a11e4"
+  integrity sha512-q/tyWUVNenizuClEiaekx9FZj/STU1F3wpDK4PUIh3xh+OmUI5fw2dY3MaNDjyb5AyrS0M8BuQDeuoSuOR/Q7w==
+  dependencies:
+    "@walletconnect/jsonrpc-http-connection" "1.0.8"
+    "@walletconnect/jsonrpc-provider" "1.0.14"
+    "@walletconnect/jsonrpc-types" "1.0.4"
+    "@walletconnect/jsonrpc-utils" "1.0.8"
+    "@walletconnect/logger" "2.1.2"
+    "@walletconnect/sign-client" "2.16.1"
+    "@walletconnect/types" "2.16.1"
+    "@walletconnect/utils" "2.16.1"
+    events "3.3.0"
 
-"@walletconnect/utils@2.11.2":
-  version "2.11.2"
-  resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-2.11.2.tgz#dee0f19adf5e38543612cbe9fa4de7ed28eb7e85"
-  integrity sha512-LyfdmrnZY6dWqlF4eDrx5jpUwsB2bEPjoqR5Z6rXPiHJKUOdJt7az+mNOn5KTSOlRpd1DmozrBrWr+G9fFLYVw==
+"@walletconnect/utils@2.16.1":
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-2.16.1.tgz#2099cc2bd16b0edc32022f64aa2c2c323b45d1d4"
+  integrity sha512-aoQirVoDoiiEtYeYDtNtQxFzwO/oCrz9zqeEEXYJaAwXlGVTS34KFe7W3/Rxd/pldTYKFOZsku2EzpISfH8Wsw==
   dependencies:
     "@stablelib/chacha20poly1305" "1.0.1"
     "@stablelib/hkdf" "1.0.1"
-    "@stablelib/random" "^1.0.2"
+    "@stablelib/random" "1.0.2"
     "@stablelib/sha256" "1.0.1"
-    "@stablelib/x25519" "^1.0.3"
-    "@walletconnect/relay-api" "^1.0.9"
-    "@walletconnect/safe-json" "^1.0.2"
-    "@walletconnect/time" "^1.0.2"
-    "@walletconnect/types" "2.11.2"
-    "@walletconnect/window-getters" "^1.0.1"
-    "@walletconnect/window-metadata" "^1.0.1"
+    "@stablelib/x25519" "1.0.3"
+    "@walletconnect/relay-api" "1.0.11"
+    "@walletconnect/relay-auth" "1.0.4"
+    "@walletconnect/safe-json" "1.0.2"
+    "@walletconnect/time" "1.0.2"
+    "@walletconnect/types" "2.16.1"
+    "@walletconnect/window-getters" "1.0.1"
+    "@walletconnect/window-metadata" "1.0.1"
     detect-browser "5.3.0"
+    elliptic "^6.5.7"
     query-string "7.1.3"
-    uint8arrays "^3.1.0"
+    uint8arrays "3.1.0"
 
-"@walletconnect/window-getters@^1.0.1":
+"@walletconnect/window-getters@1.0.1", "@walletconnect/window-getters@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@walletconnect/window-getters/-/window-getters-1.0.1.tgz#f36d1c72558a7f6b87ecc4451fc8bd44f63cbbdc"
   integrity sha512-vHp+HqzGxORPAN8gY03qnbTMnhqIwjeRJNOMOAzePRg4xVEEE2WvYsI9G2NMjOknA8hnuYbU3/hwLcKbjhc8+Q==
   dependencies:
     tslib "1.14.1"
 
-"@walletconnect/window-metadata@^1.0.1":
+"@walletconnect/window-metadata@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@walletconnect/window-metadata/-/window-metadata-1.0.1.tgz#2124f75447b7e989e4e4e1581d55d25bc75f7be5"
   integrity sha512-9koTqyGrM2cqFRW517BPY/iEtUDx2r1+Pwwu5m7sJ7ka79wi3EyqhqcICk/yDmv6jAS1rjKgTKXlEhanYjijcA==
@@ -7258,103 +6828,116 @@
     "@walletconnect/window-getters" "^1.0.1"
     tslib "1.14.1"
 
-"@web3modal/common@4.1.3":
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/@web3modal/common/-/common-4.1.3.tgz#b31a60dbfb2b02708ddef7b896bd2992534ede09"
-  integrity sha512-xxNS0+J88TQHNKxHk57uEIb1J03OI9n9CulaOexHv7oPp2x6D+vb5FYdJj/Oxskq6osYKg+LVupCSEaJEr6bQw==
+"@web3modal/base@5.1.7":
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/@web3modal/base/-/base-5.1.7.tgz#f47511bc557b5da3d9bb9f0bcd94ac9272fab019"
+  integrity sha512-vPhfvm25b6GKh0kXYgR1PpUUbBaRdTqC5WuyQtCjlAovvVF7e4ouf4zeqVPM7+PTR/Tcbk3yuYzzcrlIgyyxmQ==
+  dependencies:
+    "@walletconnect/utils" "2.16.1"
+    "@web3modal/common" "5.1.7"
+    "@web3modal/core" "5.1.7"
+    "@web3modal/polyfills" "5.1.7"
+    "@web3modal/scaffold-ui" "5.1.7"
+    "@web3modal/scaffold-utils" "5.1.7"
+    "@web3modal/siwe" "5.1.7"
+    "@web3modal/ui" "5.1.7"
+    "@web3modal/wallet" "5.1.7"
+  optionalDependencies:
+    borsh "0.7.0"
+    bs58 "5.0.0"
+
+"@web3modal/common@5.1.7":
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/@web3modal/common/-/common-5.1.7.tgz#bc24764e7eea978f06c47f846d8240517d5643e3"
+  integrity sha512-LQGHCwO9ltsui3rHrxdkm3zFkE1Q8CyOjpaMw/0s8fNCZOO+pPn2XwkGXuh0vUbEx/P0dlM4JbVm1Fky/JndAA==
   dependencies:
+    bignumber.js "9.1.2"
     dayjs "1.11.10"
 
-"@web3modal/core@4.1.3":
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/@web3modal/core/-/core-4.1.3.tgz#92a1a2a7c00b4f9d8221c20adce3a1ce908fb662"
-  integrity sha512-T8J9vfxiDrnRQxuqRQtfE1siBSf7WQxgyfvgPfUmAtnzAYVpQ5eAL4JEUTp6KrOyB070ujT5fmfBjz8di8agQg==
+"@web3modal/core@5.1.7":
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/@web3modal/core/-/core-5.1.7.tgz#fd557a5f9201ab25cd0f4daa737137c5866325b5"
+  integrity sha512-PM0U/mgky1K62DU0jZO4v0Njj4yADs8xjtP8vY3cl+f//0CdNOMuzbnKEGfutni39JNKCRPOqiA43j8koaJGOQ==
   dependencies:
-    "@web3modal/common" "4.1.3"
-    "@web3modal/wallet" "4.1.3"
+    "@web3modal/common" "5.1.7"
+    "@web3modal/wallet" "5.1.7"
     valtio "1.11.2"
 
-"@web3modal/polyfills@4.1.3":
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/@web3modal/polyfills/-/polyfills-4.1.3.tgz#444fd1d7a942ba91592533d34cee6dcf16f19ef9"
-  integrity sha512-CTT1A0B43Ae4uSm8GW4F6Qamhx3tcIC0/yyOSW40BaRvd10K2Imm50K3I8jLFS8HG1ZzqZe+pOV2P/OyOwPU4g==
+"@web3modal/polyfills@5.1.7":
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/@web3modal/polyfills/-/polyfills-5.1.7.tgz#1167f81ec94f7373ec61134dfd501a6e27370372"
+  integrity sha512-LZZRBjG5VldIxdyhYfWvt6TOULMxFK+ufYd6G73B3VZMRT4mDtZwF/qRhzdRnvzVE11Ou9JTPW5vsSV/8Ge6rA==
   dependencies:
     buffer "6.0.3"
 
-"@web3modal/scaffold-react@4.1.3":
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/@web3modal/scaffold-react/-/scaffold-react-4.1.3.tgz#72b82927f1c6756bf83daa456187da090b549d65"
-  integrity sha512-zx/jVqY6MFjOZWj/X9RUpSaTZ5Kz+dmH6wuOGSdlyUSYvUV5hJgUGEKGjCr5AVBk67n67lHKFUy1nxS9GXvVdg==
-  dependencies:
-    "@web3modal/scaffold" "4.1.3"
+"@web3modal/scaffold-ui@5.1.7":
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/@web3modal/scaffold-ui/-/scaffold-ui-5.1.7.tgz#febd2461ba064b8f0dc9d7fb4e6e8770acb636ee"
+  integrity sha512-9PYLJQT5DFzj4/6jSI2oajHp7EksQDg7YVpDWoxghmYaJITrEtdYTKz4JF6b3TJTkNGG1qFJATy23Ayu0qQWzA==
+  dependencies:
+    "@web3modal/common" "5.1.7"
+    "@web3modal/core" "5.1.7"
+    "@web3modal/scaffold-utils" "5.1.7"
+    "@web3modal/siwe" "5.1.7"
+    "@web3modal/ui" "5.1.7"
+    "@web3modal/wallet" "5.1.7"
+    lit "3.1.0"
 
-"@web3modal/scaffold-utils@4.1.3":
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/@web3modal/scaffold-utils/-/scaffold-utils-4.1.3.tgz#c751ce47babfef98d53d1c46aaae5b50a0d28537"
-  integrity sha512-1rNZkTjhpvVRPXm8RKz51E/T9Ujhjh8DPxT3oQFnTNlws98yU+RLDJYrR8rQoqJfmDK3E5dViLmxjIbrLKh/dw==
+"@web3modal/scaffold-utils@5.1.7":
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/@web3modal/scaffold-utils/-/scaffold-utils-5.1.7.tgz#cb9ce5735eec2a6940bde768aeb79ef33b8515f3"
+  integrity sha512-bS4k2x2Ddfae+YXzn0e5iTm60Pb+4d8t64bRDpBQqQhbbA1ppSudZpfrUHQ8NeBti7sg8cpOd+ofDGuIFQzYlA==
   dependencies:
-    "@web3modal/core" "4.1.3"
-    "@web3modal/polyfills" "4.1.3"
+    "@web3modal/common" "5.1.7"
+    "@web3modal/core" "5.1.7"
+    "@web3modal/polyfills" "5.1.7"
+    "@web3modal/wallet" "5.1.7"
     valtio "1.11.2"
 
-"@web3modal/scaffold-vue@4.1.3":
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/@web3modal/scaffold-vue/-/scaffold-vue-4.1.3.tgz#d8e827c8431526a86cc6fbb7430e3fb7d560b9b0"
-  integrity sha512-xHySyt2A01VYGtQ3qHKEyv5n+JGOnZ41/ZM8glK6yfe4nDNS0c9X/psPoeVwWvLhOYPKWCikkgGvB1TmoyjNiQ==
-  dependencies:
-    "@web3modal/scaffold" "4.1.3"
-
-"@web3modal/scaffold@4.1.3":
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/@web3modal/scaffold/-/scaffold-4.1.3.tgz#2a51ad18d6522233af71b3c4e8994ac3d9905a14"
-  integrity sha512-daOCaa8h4AT9BGqbsBAAU0CQL/hFWt9Bs6CK9zjesvhwxK2qQZ2O/t8tU2c68Gsj6VRDim7CcWCKjNYAqtGNyQ==
-  dependencies:
-    "@web3modal/common" "4.1.3"
-    "@web3modal/core" "4.1.3"
-    "@web3modal/ui" "4.1.3"
-    lit "3.1.0"
-  optionalDependencies:
-    "@web3modal/siwe" "4.1.3"
-
-"@web3modal/siwe@4.1.3":
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/@web3modal/siwe/-/siwe-4.1.3.tgz#e00438a688617cf4a65f6ec62437b4e7178b7ec8"
-  integrity sha512-YjCFvoUyjjkTmRLyaDuhCaWpz9/gqQNZRIXwkDg/0AZY92WeVq0jJQJIWmFv6Ag16nakqo73vtHjUGfPC4bbFQ==
-  dependencies:
-    "@web3modal/core" "4.1.3"
-    "@web3modal/scaffold-utils" "4.1.3"
+"@web3modal/siwe@5.1.7":
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/@web3modal/siwe/-/siwe-5.1.7.tgz#ef3b609e4227d21ed793130d74f36545316c520c"
+  integrity sha512-j1pIHh7XkVdcjav8DzQV7ZKdcyr5qUjbXFY3/KGUWWcwNE8m5Az1GdSqGkt4luWLLjTNpZ2mOcL/dmFD6tg8Gg==
+  dependencies:
+    "@walletconnect/utils" "2.16.1"
+    "@web3modal/common" "5.1.7"
+    "@web3modal/core" "5.1.7"
+    "@web3modal/scaffold-utils" "5.1.7"
+    "@web3modal/ui" "5.1.7"
+    "@web3modal/wallet" "5.1.7"
     lit "3.1.0"
     valtio "1.11.2"
 
-"@web3modal/ui@4.1.3":
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/@web3modal/ui/-/ui-4.1.3.tgz#b7ca4a28afc8e8b2910e47d2501eafe92a5a1173"
-  integrity sha512-gZBkpq186iPC05jYBi58MXYH4b3qxo+LIYBdXz++qvaZRiSV894hvHpVLTjJgJivUiP0Lzt/I+u63/G4dkwSgA==
+"@web3modal/ui@5.1.7":
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/@web3modal/ui/-/ui-5.1.7.tgz#83b5cb5c63e2ff82d09713aaf6181f74ef35e5cb"
+  integrity sha512-f1qwO+28cR7o6OELdsGaE4Juvk22MC7Ro2gOnN+8VCQ0V8v33Z9jPtKdgFI/+2qg2fYKuR9pQX029vPPIqvg4A==
   dependencies:
     lit "3.1.0"
     qrcode "1.5.3"
 
-"@web3modal/wagmi@4.1.3":
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/@web3modal/wagmi/-/wagmi-4.1.3.tgz#fe3f7dacdf2057ef33ee0272452c533edbcf2567"
-  integrity sha512-YFYYFmp2HoXIo7mfL/eWc//F9cqIyHdKgUZmSYArDWxNze/MOuCrShnZWarXa1fVl7kY3Cq+bZpExM8TcttQCw==
-  dependencies:
-    "@web3modal/polyfills" "4.1.3"
-    "@web3modal/scaffold" "4.1.3"
-    "@web3modal/scaffold-react" "4.1.3"
-    "@web3modal/scaffold-utils" "4.1.3"
-    "@web3modal/scaffold-vue" "4.1.3"
-  optionalDependencies:
-    "@web3modal/siwe" "4.1.3"
-    react ">=17"
-    react-dom ">=17"
-    vue ">=3"
-
-"@web3modal/wallet@4.1.3":
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/@web3modal/wallet/-/wallet-4.1.3.tgz#b38a1e96ff3f87b555075a2581154152de7ac41f"
-  integrity sha512-wcfljBc2c+0VF5d1hfVWRDrnRdlNGGTPz0iky6tjQW57sam9Yg5IKAbrEqyDZZs0zrAz8K03yHgKnP1BbQHc5A==
-  dependencies:
+"@web3modal/wagmi@5.1.7":
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/@web3modal/wagmi/-/wagmi-5.1.7.tgz#50455377541de0d22698f7afa2f6dd5a18523aeb"
+  integrity sha512-6S0ilGAoPwupyOpgG7B1dSuWXOhiHI5AfKk9XTARcwcBHXV053CwA3cSjo6D1Q/KFGCKoFOTKpkm56BFXJA6NA==
+  dependencies:
+    "@walletconnect/ethereum-provider" "2.16.1"
+    "@walletconnect/utils" "2.16.1"
+    "@web3modal/base" "5.1.7"
+    "@web3modal/common" "5.1.7"
+    "@web3modal/polyfills" "5.1.7"
+    "@web3modal/scaffold-utils" "5.1.7"
+    "@web3modal/siwe" "5.1.7"
+    "@web3modal/wallet" "5.1.7"
+
+"@web3modal/wallet@5.1.7":
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/@web3modal/wallet/-/wallet-5.1.7.tgz#ab8a4f95f2bd6c78e9632107b13d14d10df8deaf"
+  integrity sha512-RQW1GOlp+DLmtq/Qx6vzofcleYHMkU6feocfbNzutG3AYxxmOsD9DbPSKB84ZYwROzsP+VVpOr9L+qEkMnGkzg==
+  dependencies:
+    "@walletconnect/logger" "2.1.2"
+    "@web3modal/common" "5.1.7"
+    "@web3modal/polyfills" "5.1.7"
     zod "3.22.4"
 
 "@xstate/fsm@1.4.0":
@@ -7382,20 +6965,15 @@ abab@^2.0.6:
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
   integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
 
-abitype@0.8.11:
-  version "0.8.11"
-  resolved "https://registry.yarnpkg.com/abitype/-/abitype-0.8.11.tgz#66e1cf2cbf46f48d0e57132d7c1c392447536cc1"
-  integrity sha512-bM4v2dKvX08sZ9IU38IN5BKmN+ZkOSd2oI4a9f0ejHYZQYV6cDr7j+d95ga0z2XHG36Y4jzoG5Z7qDqxp7fi/A==
-
 abitype@0.9.8:
   version "0.9.8"
   resolved "https://registry.yarnpkg.com/abitype/-/abitype-0.9.8.tgz#1f120b6b717459deafd213dfbf3a3dd1bf10ae8c"
   integrity sha512-puLifILdm+8sjyss4S+fsUN09obiT1g2YW6CtcQF+QDzxR0euzgEB29MZujC6zMk2a6SVmtttq1fc6+YFA7WYQ==
 
-abitype@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/abitype/-/abitype-1.0.0.tgz#237176dace81d90d018bebf3a45cb42f2a2d9e97"
-  integrity sha512-NMeMah//6bJ56H5XRj8QCV4AwuW6hB6zqz2LnhhLdcWVQOsXki6/Pn3APeqxCma62nXIcmZWdu1DlHWS74umVQ==
+abitype@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/abitype/-/abitype-1.0.5.tgz#29d0daa3eea867ca90f7e4123144c1d1270774b6"
+  integrity sha512-YzDhti7cjlfaBhHutMaboYB21Ha3rXR9QTkNJFzYC4kC8YclaiwPBBBJY8ejFdu2wnJeZCVZSMlQJ7fi8S6hsw==
 
 abort-controller@^3.0.0:
   version "3.0.0"
@@ -7404,6 +6982,11 @@ abort-controller@^3.0.0:
   dependencies:
     event-target-shim "^5.0.0"
 
+abortcontroller-polyfill@^1.4.0:
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.5.tgz#6738495f4e901fbb57b6c0611d0c75f76c485bed"
+  integrity sha512-JMJ5soJWP18htbbxJjG7bG6yuI6pRhgJ0scHHTfkUjf6wjP912xZWvM+A4sJK3gqd9E8fcPbDnOefbA9Th/FIQ==
+
 acorn-globals@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-7.0.1.tgz#0dbf05c44fa7c94332914c02066d5beff62c40c3"
@@ -7447,6 +7030,11 @@ acorn@^8.8.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
   integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
 
+acorn@^8.9.0:
+  version "8.11.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a"
+  integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
+
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -7454,6 +7042,13 @@ agent-base@6:
   dependencies:
     debug "4"
 
+agent-base@^7.0.2:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-7.1.1.tgz#bdbded7dfb096b751a2a087eeeb9664725b2e317"
+  integrity sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==
+  dependencies:
+    debug "^4.3.4"
+
 aggregate-error@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a"
@@ -7462,7 +7057,18 @@ aggregate-error@^3.0.0:
     clean-stack "^2.0.0"
     indent-string "^4.0.0"
 
-ajv@^6.10.0, ajv@^6.12.4:
+airtable@^0.12.2:
+  version "0.12.2"
+  resolved "https://registry.yarnpkg.com/airtable/-/airtable-0.12.2.tgz#e53e66db86744f9bc684faa58881d6c9c12f0e6f"
+  integrity sha512-HS3VytUBTKj8A0vPl7DDr5p/w3IOGv6RXL0fv7eczOWAtj9Xe8ri4TAiZRXoOyo+Z/COADCj+oARFenbxhmkIg==
+  dependencies:
+    "@types/node" ">=8.0.0 <15"
+    abort-controller "^3.0.0"
+    abortcontroller-polyfill "^1.4.0"
+    lodash "^4.17.21"
+    node-fetch "^2.6.7"
+
+ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -7492,11 +7098,6 @@ algoliasearch@^4.20.0:
     "@algolia/requester-node-http" "4.22.1"
     "@algolia/transporter" "4.22.1"
 
-ansi-color@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-color/-/ansi-color-0.2.1.tgz#3e75c037475217544ed763a8db5709fa9ae5bf9a"
-  integrity sha512-bF6xLaZBLpOQzgYUtYEhJx090nPSZk1BQ/q2oyBK9aMMcJHzx9uXGCjI2Y+LebsN4Jwoykr0V9whbPiogdyHoQ==
-
 ansi-escapes@^4.2.1, ansi-escapes@^4.3.0:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
@@ -7593,14 +7194,6 @@ aria-hidden@^1.2.2:
   dependencies:
     tslib "^2.0.0"
 
-aria-query@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
-  integrity sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==
-  dependencies:
-    "@babel/runtime" "^7.10.2"
-    "@babel/runtime-corejs3" "^7.10.2"
-
 aria-query@^5.0.0:
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
@@ -7608,7 +7201,22 @@ aria-query@^5.0.0:
   dependencies:
     deep-equal "^2.0.5"
 
-array-includes@^3.1.4, array-includes@^3.1.5:
+aria-query@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
+  integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
+  dependencies:
+    dequal "^2.0.3"
+
+array-buffer-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz#1e5583ec16763540a27ae52eed99ff899223568f"
+  integrity sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==
+  dependencies:
+    call-bind "^1.0.5"
+    is-array-buffer "^3.0.4"
+
+array-includes@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.5.tgz#2c320010db8d31031fd2a5f6b3bbd4b1aad31bdb"
   integrity sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==
@@ -7630,29 +7238,55 @@ array-includes@^3.1.6:
     get-intrinsic "^1.1.3"
     is-string "^1.0.7"
 
+array-includes@^3.1.7:
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.8.tgz#5e370cbe172fdd5dd6530c1d4aadda25281ba97d"
+  integrity sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.4"
+    is-string "^1.0.7"
+
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
-array.prototype.flat@^1.2.5:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz#0b0c1567bf57b38b56b4c97b8aa72ab45e4adc7b"
-  integrity sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==
+array.prototype.findlast@^1.2.4:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz#3e4fbcb30a15a7f5bf64cf2faae22d139c2e4904"
+  integrity sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.2"
-    es-shim-unscopables "^1.0.0"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-shim-unscopables "^1.0.2"
 
-array.prototype.flatmap@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz#a7e8ed4225f4788a70cd910abcf0791e76a5534f"
-  integrity sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==
+array.prototype.findlastindex@^1.2.3:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz#8c35a755c72908719453f87145ca011e39334d0d"
+  integrity sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-shim-unscopables "^1.0.2"
+
+array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz#1476217df8cff17d72ee8f3ba06738db5b387d18"
+  integrity sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==
   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"
 
 array.prototype.flatmap@^1.3.1:
@@ -7665,6 +7299,26 @@ array.prototype.flatmap@^1.3.1:
     es-abstract "^1.20.4"
     es-shim-unscopables "^1.0.0"
 
+array.prototype.flatmap@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz#c9a7c6831db8e719d6ce639190146c24bbd3e527"
+  integrity sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    es-shim-unscopables "^1.0.0"
+
+array.prototype.toreversed@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.toreversed/-/array.prototype.toreversed-1.1.2.tgz#b989a6bf35c4c5051e1dc0325151bf8088954eba"
+  integrity sha512-wwDCoT4Ck4Cz7sLtgUmzR5UV3YF5mFHUlbChCzZBQZ+0m2cl/DH3tKgvphv1nKgFsJ48oCSg6p91q2Vm0I/ZMA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    es-shim-unscopables "^1.0.0"
+
 array.prototype.tosorted@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.1.tgz#ccf44738aa2b5ac56578ffda97c03fd3e23dd532"
@@ -7676,10 +7330,35 @@ array.prototype.tosorted@^1.1.1:
     es-shim-unscopables "^1.0.0"
     get-intrinsic "^1.1.3"
 
-ast-types-flow@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
-  integrity sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==
+array.prototype.tosorted@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.3.tgz#c8c89348337e51b8a3c48a9227f9ce93ceedcba8"
+  integrity sha512-/DdH4TiTmOKzyQbp/eadcCVexiCb36xJg7HshYOYJnNZFDj33GEv0P7GxsynpShhq4OLYJzbGcBDkLsDt7MnNg==
+  dependencies:
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    es-abstract "^1.22.3"
+    es-errors "^1.1.0"
+    es-shim-unscopables "^1.0.2"
+
+arraybuffer.prototype.slice@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz#097972f4255e41bc3425e37dc3f6421cf9aefde6"
+  integrity sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    es-abstract "^1.22.3"
+    es-errors "^1.2.1"
+    get-intrinsic "^1.2.3"
+    is-array-buffer "^3.0.4"
+    is-shared-array-buffer "^1.0.2"
+
+ast-types-flow@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.8.tgz#0a85e1c92695769ac13a428bb653e7538bea27d6"
+  integrity sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==
 
 astral-regex@^2.0.0:
   version "2.0.0"
@@ -7720,33 +7399,33 @@ available-typed-arrays@^1.0.5:
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
   integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
 
-axe-core@^4.4.3:
-  version "4.4.3"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.3.tgz#11c74d23d5013c0fa5d183796729bc3482bd2f6f"
-  integrity sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w==
-
-axios@^1.4.0:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.2.tgz#de67d42c755b571d3e698df1b6504cde9b0ee9f2"
-  integrity sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==
+available-typed-arrays@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
+  integrity sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==
   dependencies:
-    follow-redirects "^1.15.0"
-    form-data "^4.0.0"
-    proxy-from-env "^1.1.0"
+    possible-typed-array-names "^1.0.0"
+
+axe-core@=4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.0.tgz#34ba5a48a8b564f67e103f0aa5768d76e15bbbbf"
+  integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==
 
-axios@^1.6.2:
-  version "1.6.7"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.7.tgz#7b48c2e27c96f9c68a2f8f31e2ab19f59b06b0a7"
-  integrity sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==
+axios@^1.4.0, axios@^1.6.2:
+  version "1.7.7"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.7.tgz#2f554296f9892a72ac8d8e4c5b79c14a91d0a47f"
+  integrity sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==
   dependencies:
-    follow-redirects "^1.15.4"
+    follow-redirects "^1.15.6"
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
-axobject-query@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
-  integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
+axobject-query@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.2.1.tgz#39c378a6e3b06ca679f29138151e45b2b32da62a"
+  integrity sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==
+  dependencies:
+    dequal "^2.0.3"
 
 babel-jest@^29.3.1:
   version "29.3.1"
@@ -7846,12 +7525,24 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+base-x@^3.0.2:
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/base-x/-/base-x-3.0.10.tgz#62de58653f8762b5d6f8d9fe30fa75f7b2585a75"
+  integrity sha512-7d0s06rR9rYaIWHkpfLIFICM/tkSVdoPC9qYAQRpxn9DdKNWNsKC0uk++akckyLq16Tx2WIinnZ6WRriAt6njQ==
+  dependencies:
+    safe-buffer "^5.0.1"
+
+base-x@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/base-x/-/base-x-4.0.0.tgz#d0e3b7753450c73f8ad2389b5c018a4af7b2224a"
+  integrity sha512-FuwxlW4H5kh37X/oW59pwTzzTKRzfrrQwhmyspRM7swOEZcHtDZSCt45U6oKgtuFE+WYPblePMVIPR4RZrh/hw==
+
 base64-js@^1.3.1, base64-js@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
-bignumber.js@^9.0.0:
+bignumber.js@9.1.2, bignumber.js@^9.0.0:
   version "9.1.2"
   resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.1.2.tgz#b7c4242259c008903b13707983b5f4bbd31eda0c"
   integrity sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug==
@@ -7866,6 +7557,11 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
+bintrees@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bintrees/-/bintrees-1.0.2.tgz#49f896d6e858a4a499df85c38fb399b9aff840f8"
+  integrity sha512-VOMgTMwjAaUG580SXn3LacVgjurrbMme7ZZNYGSSV7mmtY6QQRh0Eg3pwIcntQ77DErK1L0NxkbetjcoXzVwKw==
+
 bl@^4.0.3:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
@@ -7885,7 +7581,7 @@ bn.js@^4.11.9:
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
   integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
 
-bn.js@^5.2.1:
+bn.js@^5.2.0, bn.js@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
   integrity sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==
@@ -7895,6 +7591,15 @@ boolbase@^1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
+borsh@0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/borsh/-/borsh-0.7.0.tgz#6e9560d719d86d90dc589bca60ffc8a6c51fec2a"
+  integrity sha512-CLCsZGIBCFnPtkNnieW/a8wmreDmfUtjU2m9yHrzPXIlNbqVs0AQrSatSG6vdNYUqdc83tkQi2eHfF98ubzQLA==
+  dependencies:
+    bn.js "^5.2.0"
+    bs58 "^4.0.0"
+    text-encoding-utf-8 "^1.0.2"
+
 bowser@^2.9.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f"
@@ -7915,12 +7620,12 @@ brace-expansion@^2.0.1:
   dependencies:
     balanced-match "^1.0.0"
 
-braces@^3.0.2, braces@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
-  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+braces@^3.0.3, braces@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
   dependencies:
-    fill-range "^7.0.1"
+    fill-range "^7.1.1"
 
 brorand@^1.1.0:
   version "1.1.0"
@@ -7944,6 +7649,20 @@ bs-logger@0.x:
   dependencies:
     fast-json-stable-stringify "2.x"
 
+bs58@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/bs58/-/bs58-5.0.0.tgz#865575b4d13c09ea2a84622df6c8cbeb54ffc279"
+  integrity sha512-r+ihvQJvahgYT50JD05dyJNKlmmSlMoOGwn1lCcEzanPglg7TxYjioQUYehQ9mAR/+hOSd2jRc/Z2y5UxBymvQ==
+  dependencies:
+    base-x "^4.0.0"
+
+bs58@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a"
+  integrity sha512-Ok3Wdf5vOIlBrgCvTq96gBkJw+JUEzdBgyaza5HLtPm7yTHkjRy8+JzNyHF7BHa0bNWOQIp3m5YF0nnFcOIKLw==
+  dependencies:
+    base-x "^3.0.2"
+
 bser@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
@@ -7979,16 +7698,6 @@ bufferutil@^4.0.8:
   dependencies:
     node-gyp-build "^4.3.0"
 
-bufrw@^1.2.1:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/bufrw/-/bufrw-1.4.0.tgz#58a294ca0bd9ebc880be83001d749706fc996499"
-  integrity sha512-sWm8iPbqvL9+5SiYxXH73UOkyEbGQg7kyHQmReF89WJHQJw2eV4P/yZ0E+b71cczJ4pPobVhXxgQcmfSTgGHxQ==
-  dependencies:
-    ansi-color "^0.2.1"
-    error "^7.0.0"
-    hexer "^1.5.0"
-    xtend "^4.0.0"
-
 busboy@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893"
@@ -8004,6 +7713,17 @@ call-bind@^1.0.0, call-bind@^1.0.2:
     function-bind "^1.1.1"
     get-intrinsic "^1.0.2"
 
+call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
+  integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.1"
+
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -8024,10 +7744,25 @@ caniuse-lite@^1.0.30001400:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001418.tgz#5f459215192a024c99e3e3a53aac310fc7cf24e6"
   integrity sha512-oIs7+JL3K9JRQ3jPZjlH6qyYDp+nBTCais7hjh0s+fuBwufc7uZ7hPYMXrDOJhV360KGMTcczMRObk0/iMqZRg==
 
-caniuse-lite@^1.0.30001406:
-  version "1.0.30001480"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz#9bbd35ee44c2480a1e3a3b9f4496f5066817164a"
-  integrity sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==
+caniuse-lite@^1.0.30001579:
+  version "1.0.30001663"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001663.tgz#1529a723505e429fdfd49532e9fc42273ba7fed7"
+  integrity sha512-o9C3X27GLKbLeTYZ6HBOLU1tsAcBZsLis28wrVzddShCS16RujjHp9GDHKZqrB3meE0YjhawvMFsGb/igqiPzA==
+
+"cbw-sdk@npm:@coinbase/wallet-sdk@3.9.3":
+  version "3.9.3"
+  resolved "https://registry.yarnpkg.com/@coinbase/wallet-sdk/-/wallet-sdk-3.9.3.tgz#daf10cb0c85d0363315b7270cb3f02bedc408aab"
+  integrity sha512-N/A2DRIf0Y3PHc1XAMvbBUu4zisna6qAdqABMZwBMNEfWrXpAwx16pZGkYCLGE+Rvv1edbcB2LYDRnACNcmCiw==
+  dependencies:
+    bn.js "^5.2.1"
+    buffer "^6.0.3"
+    clsx "^1.2.1"
+    eth-block-tracker "^7.1.0"
+    eth-json-rpc-filters "^6.0.0"
+    eventemitter3 "^5.0.1"
+    keccak "^3.0.3"
+    preact "^10.16.0"
+    sha.js "^2.4.11"
 
 chakra-react-select@^4.4.3:
   version "4.4.3"
@@ -8546,11 +8281,6 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
-csstype@^3.1.2:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
-  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
-
 "d3-array@2 - 3", "d3-array@2.10.0 - 3", "d3-array@2.5.0 - 3", d3-array@3, d3-array@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.0.tgz#15bf96cd9b7333e02eb8de8053d78962eafcff14"
@@ -8800,10 +8530,10 @@ damerau-levenshtein@^1.0.8:
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
   integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
 
-dappscout-iframe@0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/dappscout-iframe/-/dappscout-iframe-0.2.1.tgz#b4718515ee4f00022af3912fac6ca1a321c156f9"
-  integrity sha512-EsiAAEk2I6hN+/E8o45WUn4BFd7aN8UvBwsIcOH79WOly0GOOHkPEO/puPkBCV0EcdxBsZIfssx3X0fSWVz5Bw==
+dappscout-iframe@0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/dappscout-iframe/-/dappscout-iframe-0.2.2.tgz#de3df6abccad68a27c9304300b92d86ec0ab1c59"
+  integrity sha512-ASOimgBRG61pSYQLdYGWePdiO3IsfTEgWZ6CHpZ4XQjJRmj1+WiWF56vFTeLIo5aucp+2+6oRCJ8KgKHGVDj0A==
   dependencies:
     react "^18.2.0"
     react-dom "^18.2.0"
@@ -8819,9 +8549,36 @@ data-urls@^3.0.2:
   resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-3.0.2.tgz#9cf24a477ae22bcef5cd5f6f0bfbc1d2d3be9143"
   integrity sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==
   dependencies:
-    abab "^2.0.6"
-    whatwg-mimetype "^3.0.0"
-    whatwg-url "^11.0.0"
+    abab "^2.0.6"
+    whatwg-mimetype "^3.0.0"
+    whatwg-url "^11.0.0"
+
+data-view-buffer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.1.tgz#8ea6326efec17a2e42620696e671d7d5a8bc66b2"
+  integrity sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+data-view-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz#90721ca95ff280677eb793749fce1011347669e2"
+  integrity sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+data-view-byte-offset@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz#5e0bbfb4828ed2d1b9b400cd8a7d119bca0ff18a"
+  integrity sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
 
 date-fns@^2.29.3:
   version "2.30.0"
@@ -8845,6 +8602,11 @@ dayjs@^1.11.5:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.5.tgz#00e8cc627f231f9499c19b38af49f56dc0ac5e93"
   integrity sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA==
 
+debounce@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
+  integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
+
 debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
@@ -8852,13 +8614,6 @@ debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, d
   dependencies:
     ms "2.1.2"
 
-debug@^2.6.9:
-  version "2.6.9"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
-  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
-  dependencies:
-    ms "2.0.0"
-
 debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
@@ -8934,6 +8689,15 @@ deepmerge@~4.3.0:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
 
+define-data-property@^1.0.1, define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
 define-lazy-prop@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
@@ -8947,6 +8711,15 @@ define-properties@^1.1.3, define-properties@^1.1.4:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+define-properties@^1.2.0, define-properties@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
+  integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
+  dependencies:
+    define-data-property "^1.0.1"
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
 defu@^6.1.2, defu@^6.1.3:
   version "6.1.3"
   resolved "https://registry.yarnpkg.com/defu/-/defu-6.1.3.tgz#6d7f56bc61668e844f9f593ace66fd67ef1205fd"
@@ -8969,6 +8742,11 @@ denque@^2.1.0:
   resolved "https://registry.yarnpkg.com/denque/-/denque-2.1.0.tgz#e93e1a6569fb5e66f16a3c2a2964617d349d6ab1"
   integrity sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==
 
+dequal@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
 destr@^2.0.1, destr@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/destr/-/destr-2.0.2.tgz#8d3c0ee4ec0a76df54bc8b819bca215592a8c218"
@@ -9170,7 +8948,7 @@ eastasianwidth@^0.2.0:
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
-eciesjs@^0.3.15, eciesjs@^0.3.16:
+eciesjs@^0.3.15:
   version "0.3.18"
   resolved "https://registry.yarnpkg.com/eciesjs/-/eciesjs-0.3.18.tgz#67b5d73a8466e40a45bbc2f2a3177e71e9c0643d"
   integrity sha512-RQhegEtLSyIiGJmFTZfvCTHER/fymipXFVx6OwSRYD6hOuy+6Kjpk0dGvIfP9kxn/smBpxQy71uxpGO406ITCw==
@@ -9197,6 +8975,19 @@ elliptic@^6.5.4:
     minimalistic-assert "^1.0.1"
     minimalistic-crypto-utils "^1.0.1"
 
+elliptic@^6.5.7:
+  version "6.5.7"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.7.tgz#8ec4da2cb2939926a1b9a73619d768207e647c8b"
+  integrity sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q==
+  dependencies:
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.1"
+    inherits "^2.0.4"
+    minimalistic-assert "^1.0.1"
+    minimalistic-crypto-utils "^1.0.1"
+
 emittery@^0.13.1:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
@@ -9275,22 +9066,7 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-error@7.0.2:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/error/-/error-7.0.2.tgz#a5f75fff4d9926126ddac0ea5dc38e689153cb02"
-  integrity sha512-UtVv4l5MhijsYUxPJo4390gzfZvAnTHreNnDjnTZaKIiZ/SemXxAhBkYSKtWa5RtBXbLP8tMgn/n0RUa/H7jXw==
-  dependencies:
-    string-template "~0.2.1"
-    xtend "~4.0.0"
-
-error@^7.0.0:
-  version "7.2.1"
-  resolved "https://registry.yarnpkg.com/error/-/error-7.2.1.tgz#eab21a4689b5f684fc83da84a0e390de82d94894"
-  integrity sha512-fo9HBvWnx3NGUKMvMwB/CBCMMrfEJgbDTVDEkPygA3Bdd3lM1OyCd+rbQ8BwnpF6GdVeOLDNmyL4N5Bg80ZvdA==
-  dependencies:
-    string-template "~0.2.1"
-
-es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.2, es-abstract@^1.19.5:
+es-abstract@^1.19.0, es-abstract@^1.19.5:
   version "1.20.4"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.20.4.tgz#1d103f9f8d78d4cf0713edcd6d0ed1a46eed5861"
   integrity sha512-0UtvRN79eMe2L+UNEF1BwRe364sj/DXhQ/k5FmivgoSdpM90b8Jc0mDzKMGo7QS0BVbOP/bTwBKNnDc9rNzaPA==
@@ -9359,6 +9135,70 @@ es-abstract@^1.20.4:
     unbox-primitive "^1.0.2"
     which-typed-array "^1.1.9"
 
+es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.0, es-abstract@^1.23.1, es-abstract@^1.23.2, es-abstract@^1.23.3:
+  version "1.23.3"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.3.tgz#8f0c5a35cd215312573c5a27c87dfd6c881a0aa0"
+  integrity sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    arraybuffer.prototype.slice "^1.0.3"
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    data-view-buffer "^1.0.1"
+    data-view-byte-length "^1.0.1"
+    data-view-byte-offset "^1.0.0"
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-set-tostringtag "^2.0.3"
+    es-to-primitive "^1.2.1"
+    function.prototype.name "^1.1.6"
+    get-intrinsic "^1.2.4"
+    get-symbol-description "^1.0.2"
+    globalthis "^1.0.3"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.0.3"
+    has-symbols "^1.0.3"
+    hasown "^2.0.2"
+    internal-slot "^1.0.7"
+    is-array-buffer "^3.0.4"
+    is-callable "^1.2.7"
+    is-data-view "^1.0.1"
+    is-negative-zero "^2.0.3"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.3"
+    is-string "^1.0.7"
+    is-typed-array "^1.1.13"
+    is-weakref "^1.0.2"
+    object-inspect "^1.13.1"
+    object-keys "^1.1.1"
+    object.assign "^4.1.5"
+    regexp.prototype.flags "^1.5.2"
+    safe-array-concat "^1.1.2"
+    safe-regex-test "^1.0.3"
+    string.prototype.trim "^1.2.9"
+    string.prototype.trimend "^1.0.8"
+    string.prototype.trimstart "^1.0.8"
+    typed-array-buffer "^1.0.2"
+    typed-array-byte-length "^1.0.1"
+    typed-array-byte-offset "^1.0.2"
+    typed-array-length "^1.0.6"
+    unbox-primitive "^1.0.2"
+    which-typed-array "^1.1.15"
+
+es-define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
+  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+
+es-errors@^1.1.0, es-errors@^1.2.1, es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
 es-get-iterator@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.2.tgz#9234c54aba713486d7ebde0220864af5e2b283f7"
@@ -9373,6 +9213,33 @@ es-get-iterator@^1.1.2:
     is-string "^1.0.5"
     isarray "^2.0.5"
 
+es-iterator-helpers@^1.0.15, es-iterator-helpers@^1.0.17:
+  version "1.0.19"
+  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz#117003d0e5fec237b4b5c08aded722e0c6d50ca8"
+  integrity sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.3"
+    es-errors "^1.3.0"
+    es-set-tostringtag "^2.0.3"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    globalthis "^1.0.3"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.0.3"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.7"
+    iterator.prototype "^1.1.2"
+    safe-array-concat "^1.1.2"
+
+es-object-atoms@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.0.0.tgz#ddb55cd47ac2e240701260bc2a8e31ecb643d941"
+  integrity sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==
+  dependencies:
+    es-errors "^1.3.0"
+
 es-set-tostringtag@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz#338d502f6f674301d710b80c8592de8a15f09cd8"
@@ -9382,6 +9249,15 @@ es-set-tostringtag@^2.0.1:
     has "^1.0.3"
     has-tostringtag "^1.0.0"
 
+es-set-tostringtag@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz#8bb60f0a440c2e4281962428438d58545af39777"
+  integrity sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.1"
+
 es-shim-unscopables@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz#702e632193201e3edf8713635d083d378e510241"
@@ -9389,6 +9265,13 @@ es-shim-unscopables@^1.0.0:
   dependencies:
     has "^1.0.3"
 
+es-shim-unscopables@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz#1f6942e71ecc7835ed1c8a83006d8771a63a3763"
+  integrity sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==
+  dependencies:
+    hasown "^2.0.0"
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -9481,6 +9364,15 @@ eslint-import-resolver-node@^0.3.6:
     debug "^3.2.7"
     resolve "^1.20.0"
 
+eslint-import-resolver-node@^0.3.9:
+  version "0.3.9"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
+  integrity sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==
+  dependencies:
+    debug "^3.2.7"
+    is-core-module "^2.13.0"
+    resolve "^1.22.4"
+
 eslint-import-resolver-typescript@^3.5.2:
   version "3.5.5"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.5.5.tgz#0a9034ae7ed94b254a360fbea89187b60ea7456d"
@@ -9495,13 +9387,6 @@ eslint-import-resolver-typescript@^3.5.2:
     is-glob "^4.0.3"
     synckit "^0.8.5"
 
-eslint-module-utils@^2.7.3:
-  version "2.7.4"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz#4f3e41116aaf13a20792261e61d3a2e7e0583974"
-  integrity sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==
-  dependencies:
-    debug "^3.2.7"
-
 eslint-module-utils@^2.7.4:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz#e439fee65fc33f6bba630ff621efc38ec0375c49"
@@ -9509,6 +9394,13 @@ eslint-module-utils@^2.7.4:
   dependencies:
     debug "^3.2.7"
 
+eslint-module-utils@^2.8.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.8.1.tgz#52f2404300c3bd33deece9d7372fb337cc1d7c34"
+  integrity sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==
+  dependencies:
+    debug "^3.2.7"
+
 eslint-plugin-es5@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-es5/-/eslint-plugin-es5-1.5.0.tgz#aab19af3d4798f7924bba309bc4f87087280fbba"
@@ -9520,23 +9412,27 @@ eslint-plugin-import-helpers@^1.2.1:
   integrity sha512-BSqLlCnyX4tWGlvPUTpBgUoaFiWxXSztpk9SozZVW4TZU1ygZuF0Lrfn9CO5xx1XT+PVAR9yroP9JPRyB4rAjQ==
 
 eslint-plugin-import@^2.26.0:
-  version "2.26.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz#f812dc47be4f2b72b478a021605a59fc6fe8b88b"
-  integrity sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==
-  dependencies:
-    array-includes "^3.1.4"
-    array.prototype.flat "^1.2.5"
-    debug "^2.6.9"
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz#d45b37b5ef5901d639c15270d74d46d161150643"
+  integrity sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==
+  dependencies:
+    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"
 
 eslint-plugin-jest@^27.1.6:
   version "27.1.6"
@@ -9546,23 +9442,26 @@ eslint-plugin-jest@^27.1.6:
     "@typescript-eslint/utils" "^5.10.0"
 
 eslint-plugin-jsx-a11y@^6.5.1:
-  version "6.6.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.6.1.tgz#93736fc91b83fdc38cc8d115deedfc3091aef1ff"
-  integrity sha512-sXgFVNHiWffBq23uiS/JaP6eVR622DqwB4yTzKvGZGcPq6/yZ3WmOZfuBks/vHWo9GaFOqC2ZK4i6+C35knx7Q==
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.8.0.tgz#2fa9c701d44fcd722b7c771ec322432857fcbad2"
+  integrity sha512-Hdh937BS3KdwwbBaKd5+PLCOmYY6U4f2h9Z2ktwtNKvIdIEu137rjYbcb9ApSbVJfWxANNuiKTD/9tOKjK9qOA==
   dependencies:
-    "@babel/runtime" "^7.18.9"
-    aria-query "^4.2.2"
-    array-includes "^3.1.5"
-    ast-types-flow "^0.0.7"
-    axe-core "^4.4.3"
-    axobject-query "^2.2.0"
+    "@babel/runtime" "^7.23.2"
+    aria-query "^5.3.0"
+    array-includes "^3.1.7"
+    array.prototype.flatmap "^1.3.2"
+    ast-types-flow "^0.0.8"
+    axe-core "=4.7.0"
+    axobject-query "^3.2.1"
     damerau-levenshtein "^1.0.8"
     emoji-regex "^9.2.2"
-    has "^1.0.3"
-    jsx-ast-utils "^3.3.2"
-    language-tags "^1.0.5"
+    es-iterator-helpers "^1.0.15"
+    hasown "^2.0.0"
+    jsx-ast-utils "^3.3.5"
+    language-tags "^1.0.9"
     minimatch "^3.1.2"
-    semver "^6.3.0"
+    object.entries "^1.1.7"
+    object.fromentries "^2.0.7"
 
 eslint-plugin-no-cyrillic-string@^1.0.5:
   version "1.0.5"
@@ -9577,9 +9476,9 @@ eslint-plugin-playwright@^0.11.2:
   integrity sha512-uRLRLk7uTzc8NE6t4wBU8dijQwHvC66R/h7xwdM779jsJjMUtSmeaB8ayRkkpfwi+UU5BEfwvDANwmE+ccMVDw==
 
 eslint-plugin-react-hooks@^4.5.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
-  integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz#c829eb06c0e6f484b3fbb85a97e57784f328c596"
+  integrity sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==
 
 eslint-plugin-react@^7.21.0:
   version "7.32.2"
@@ -9603,24 +9502,28 @@ eslint-plugin-react@^7.21.0:
     string.prototype.matchall "^4.0.8"
 
 eslint-plugin-react@^7.31.7:
-  version "7.31.10"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.31.10.tgz#6782c2c7fe91c09e715d536067644bbb9491419a"
-  integrity sha512-e4N/nc6AAlg4UKW/mXeYWd3R++qUano5/o+t+wnWxIf+bLsOaH3a4q74kX3nDjYym3VBN4HyO9nEn1GcAqgQOA==
-  dependencies:
-    array-includes "^3.1.5"
-    array.prototype.flatmap "^1.3.0"
+  version "7.34.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.34.1.tgz#6806b70c97796f5bbfb235a5d3379ece5f4da997"
+  integrity sha512-N97CxlouPT1AHt8Jn0mhhN2RrADlUAsk1/atcT2KyA/l9Q/E6ll7OIGwNumFmWfZ9skV3XXccYS19h80rHtgkw==
+  dependencies:
+    array-includes "^3.1.7"
+    array.prototype.findlast "^1.2.4"
+    array.prototype.flatmap "^1.3.2"
+    array.prototype.toreversed "^1.1.2"
+    array.prototype.tosorted "^1.1.3"
     doctrine "^2.1.0"
+    es-iterator-helpers "^1.0.17"
     estraverse "^5.3.0"
     jsx-ast-utils "^2.4.1 || ^3.0.0"
     minimatch "^3.1.2"
-    object.entries "^1.1.5"
-    object.fromentries "^2.0.5"
-    object.hasown "^1.1.1"
-    object.values "^1.1.5"
+    object.entries "^1.1.7"
+    object.fromentries "^2.0.7"
+    object.hasown "^1.1.3"
+    object.values "^1.1.7"
     prop-types "^15.8.1"
-    resolve "^2.0.0-next.3"
-    semver "^6.3.0"
-    string.prototype.matchall "^4.0.7"
+    resolve "^2.0.0-next.5"
+    semver "^6.3.1"
+    string.prototype.matchall "^4.0.10"
 
 eslint-plugin-regexp@^1.7.0:
   version "1.9.0"
@@ -9644,10 +9547,10 @@ eslint-scope@^5.1.1:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
-eslint-scope@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.1.1.tgz#fff34894c2f65e5226d3041ac480b4513a163642"
-  integrity sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==
+eslint-scope@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
+  integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
   dependencies:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
@@ -9669,69 +9572,73 @@ eslint-visitor-keys@^3.3.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
   integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
 
+eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
 eslint@^8.32.0:
-  version "8.32.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.32.0.tgz#d9690056bb6f1a302bd991e7090f5b68fbaea861"
-  integrity sha512-nETVXpnthqKPFyuY2FNjz/bEd6nbosRgKbkgS/y1C7LJop96gYHWpiguLecMHQ2XCPxn77DS0P+68WzG6vkZSQ==
+  version "8.57.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.0.tgz#c786a6fd0e0b68941aaf624596fb987089195668"
+  integrity sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==
   dependencies:
-    "@eslint/eslintrc" "^1.4.1"
-    "@humanwhocodes/config-array" "^0.11.8"
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.6.1"
+    "@eslint/eslintrc" "^2.1.4"
+    "@eslint/js" "8.57.0"
+    "@humanwhocodes/config-array" "^0.11.14"
     "@humanwhocodes/module-importer" "^1.0.1"
     "@nodelib/fs.walk" "^1.2.8"
-    ajv "^6.10.0"
+    "@ungap/structured-clone" "^1.2.0"
+    ajv "^6.12.4"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
     debug "^4.3.2"
     doctrine "^3.0.0"
     escape-string-regexp "^4.0.0"
-    eslint-scope "^7.1.1"
-    eslint-utils "^3.0.0"
-    eslint-visitor-keys "^3.3.0"
-    espree "^9.4.0"
-    esquery "^1.4.0"
+    eslint-scope "^7.2.2"
+    eslint-visitor-keys "^3.4.3"
+    espree "^9.6.1"
+    esquery "^1.4.2"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
     file-entry-cache "^6.0.1"
     find-up "^5.0.0"
     glob-parent "^6.0.2"
     globals "^13.19.0"
-    grapheme-splitter "^1.0.4"
+    graphemer "^1.4.0"
     ignore "^5.2.0"
-    import-fresh "^3.0.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
     is-path-inside "^3.0.3"
-    js-sdsl "^4.1.4"
     js-yaml "^4.1.0"
     json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.4.1"
     lodash.merge "^4.6.2"
     minimatch "^3.1.2"
     natural-compare "^1.4.0"
-    optionator "^0.9.1"
-    regexpp "^3.2.0"
+    optionator "^0.9.3"
     strip-ansi "^6.0.1"
-    strip-json-comments "^3.1.0"
     text-table "^0.2.0"
 
-espree@^9.4.0:
-  version "9.4.0"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-9.4.0.tgz#cd4bc3d6e9336c433265fc0aa016fc1aaf182f8a"
-  integrity sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==
+espree@^9.6.0, espree@^9.6.1:
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
+  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
   dependencies:
-    acorn "^8.8.0"
+    acorn "^8.9.0"
     acorn-jsx "^5.3.2"
-    eslint-visitor-keys "^3.3.0"
+    eslint-visitor-keys "^3.4.1"
 
 esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
-  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
+esquery@^1.4.2:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
+  integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
   dependencies:
     estraverse "^5.1.0"
 
@@ -9821,7 +9728,7 @@ event-target-shim@^5.0.0:
   resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
   integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
 
-eventemitter2@^6.4.5, eventemitter2@^6.4.7:
+eventemitter2@^6.4.7:
   version "6.4.9"
   resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.9.tgz#41f2750781b4230ed58827bc119d293471ecb125"
   integrity sha512-JEPTiaOt9f04oa6NOkc4aH+nVp5I3wEjpHbIPqfgCdD5v5bUzy7xQqwcVO2aDQgOWhI28da57HksMrzK9HlRxg==
@@ -9831,7 +9738,7 @@ eventemitter3@5.0.1, eventemitter3@^5.0.1:
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4"
   integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==
 
-events@^3.3.0:
+events@3.3.0, events@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
@@ -9899,6 +9806,14 @@ extension-port-stream@^2.0.1:
   dependencies:
     webextension-polyfill-ts "^0.22.0"
 
+extension-port-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/extension-port-stream/-/extension-port-stream-3.0.0.tgz#00a7185fe2322708a36ed24843c81bd754925fef"
+  integrity sha512-an2S5quJMiy5bnZKEf6AkfH/7r8CzHvhchU40gxN+OM6HPhe7Z9T1FUychcf2M9PpPOO0Hf7BAEfJkw2TDIBDw==
+  dependencies:
+    readable-stream "^3.6.2 || ^4.4.2"
+    webextension-polyfill ">=0.10.0 <1.0"
+
 fast-copy@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/fast-copy/-/fast-copy-3.0.0.tgz#875ebf33b13948ae012b6e51d33da5e6e7571ab8"
@@ -9993,10 +9908,10 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
-fill-range@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
-  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
   dependencies:
     to-regex-range "^5.0.1"
 
@@ -10034,17 +9949,18 @@ find-yarn-workspace-root@^2.0.0:
     micromatch "^4.0.2"
 
 flat-cache@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
-  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.2.0.tgz#2c0c2d5040c99b1632771a9d105725c0115363ee"
+  integrity sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==
   dependencies:
-    flatted "^3.1.0"
+    flatted "^3.2.9"
+    keyv "^4.5.3"
     rimraf "^3.0.2"
 
-flatted@^3.1.0:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
-  integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
+flatted@^3.2.9:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
+  integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
 
 focus-lock@^0.11.6:
   version "0.11.6"
@@ -10058,15 +9974,10 @@ focus-visible@^5.2.0:
   resolved "https://registry.yarnpkg.com/focus-visible/-/focus-visible-5.2.0.tgz#3a9e41fccf587bd25dcc2ef045508284f0a4d6b3"
   integrity sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ==
 
-follow-redirects@^1.15.0:
-  version "1.15.2"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
-  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
-
-follow-redirects@^1.15.4:
-  version "1.15.5"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.5.tgz#54d4d6d062c0fa7d9d17feb008461550e3ba8020"
-  integrity sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==
+follow-redirects@^1.15.6:
+  version "1.15.9"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
+  integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
 
 fontfaceobserver@2.1.0:
   version "2.1.0"
@@ -10182,7 +10093,17 @@ function.prototype.name@^1.1.5:
     es-abstract "^1.19.0"
     functions-have-names "^1.2.2"
 
-functions-have-names@^1.2.2:
+function.prototype.name@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz#cdf315b7d90ee77a4c6ee216c3c3362da07533fd"
+  integrity sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    functions-have-names "^1.2.3"
+
+functions-have-names@^1.2.2, functions-have-names@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
@@ -10192,22 +10113,23 @@ futoin-hkdf@^1.5.3:
   resolved "https://registry.yarnpkg.com/futoin-hkdf/-/futoin-hkdf-1.5.3.tgz#6c8024f2e1429da086d4e18289ef2239ad33ee35"
   integrity sha512-SewY5KdMpaoCeh7jachEWFsh1nNlaDjNHZXWqL5IGwtpEYHTgkr2+AMCgNwKWkcc0wpSYrZfR7he4WdmHFtDxQ==
 
-gaxios@^5.0.0:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/gaxios/-/gaxios-5.1.3.tgz#f7fa92da0fe197c846441e5ead2573d4979e9013"
-  integrity sha512-95hVgBRgEIRQQQHIbnxBXeHbW4TqFk4ZDJW7wmVtvYar72FdhRIo1UGOLS2eRAKCPEdPBWu+M7+A33D9CdX9rA==
+gaxios@^6.0.0:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/gaxios/-/gaxios-6.7.1.tgz#ebd9f7093ede3ba502685e73390248bb5b7f71fb"
+  integrity sha512-LDODD4TMYx7XXdpwxAVRAIAuB0bzv0s+ywFonY46k126qzQHT9ygyoa9tncmOiQmmDrik65UYsEkv3lbfqQ3yQ==
   dependencies:
     extend "^3.0.2"
-    https-proxy-agent "^5.0.0"
+    https-proxy-agent "^7.0.1"
     is-stream "^2.0.0"
     node-fetch "^2.6.9"
+    uuid "^9.0.1"
 
-gcp-metadata@^5.0.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/gcp-metadata/-/gcp-metadata-5.3.0.tgz#6f45eb473d0cb47d15001476b48b663744d25408"
-  integrity sha512-FNTkdNEnBdlqF2oatizolQqNANMrcqJt6AAYt99B3y1aLLC8Hc5IOBb+ZnnzllodEEf6xMBp6wRcBbc16fa65w==
+gcp-metadata@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/gcp-metadata/-/gcp-metadata-6.1.0.tgz#9b0dd2b2445258e7597f2024332d20611cbd6b8c"
+  integrity sha512-Jh/AIwwgaxan+7ZUUmRLCjtchyDiqh4KjBJ5tW3plBZb5iL/BPcso8A5DlzeD9qlw0duCamnNdpFjxwaT0KyKg==
   dependencies:
-    gaxios "^5.0.0"
+    gaxios "^6.0.0"
     json-bigint "^1.0.0"
 
 generic-names@^4.0.0:
@@ -10245,6 +10167,17 @@ get-intrinsic@^1.1.0, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3:
     has "^1.0.3"
     has-symbols "^1.0.3"
 
+get-intrinsic@^1.2.1, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
+  integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    hasown "^2.0.0"
+
 get-nonce@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
@@ -10273,6 +10206,15 @@ get-symbol-description@^1.0.0:
     call-bind "^1.0.2"
     get-intrinsic "^1.1.1"
 
+get-symbol-description@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.2.tgz#533744d5aa20aca4e079c8e5daf7fd44202821f5"
+  integrity sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==
+  dependencies:
+    call-bind "^1.0.5"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+
 get-tsconfig@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.5.0.tgz#6d52d1c7b299bd3ee9cd7638561653399ac77b0f"
@@ -10311,11 +10253,6 @@ glob-regex@^0.3.0:
   resolved "https://registry.yarnpkg.com/glob-regex/-/glob-regex-0.3.2.tgz#27348f2f60648ec32a4a53137090b9fb934f3425"
   integrity sha512-m5blUd3/OqDTWwzBBtWBPrGlAzatRywHameHeekAZyZrskYouOGdNB8T/q6JucucvJXtOuyHIn0/Yia7iDasDw==
 
-glob-to-regexp@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
-  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
-
 glob@7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
@@ -10380,9 +10317,9 @@ globals@^11.1.0:
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
 globals@^13.19.0:
-  version "13.19.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.19.0.tgz#7a42de8e6ad4f7242fbcca27ea5b23aca367b5c8"
-  integrity sha512-dkQ957uSRWHw7CFXLUtUHQI3g3aWApYhfNR2O6jn/907riyTYKVBmxYVROkBcY614FSSeSJh7Xm7SrUWCxvJMQ==
+  version "13.24.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
+  integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
   dependencies:
     type-fest "^0.20.2"
 
@@ -10433,7 +10370,7 @@ gopd@^1.0.1:
   dependencies:
     get-intrinsic "^1.1.3"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+graceful-fs@^4.1.11, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.11:
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -10443,10 +10380,9 @@ graceful-fs@^4.2.4, graceful-fs@^4.2.9:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
-gradient-avatar@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/gradient-avatar/-/gradient-avatar-1.0.2.tgz#42bb408e402b1f21aafba3878858721055515224"
-  integrity sha512-Od9KI2YImV60wnsvU/u6GEyBm2fiHUUHgiLySE243GYl/T/tiJMJ5QYey8o7tepugmlnUGQRaCItHv19UnUjUg==
+"gradient-avatar@git+https://github.com/blockscout/gradient-avatar.git":
+  version "1.0.3"
+  resolved "git+https://github.com/blockscout/gradient-avatar.git#86810368c2581d2dc3aca089dc648336c8e17045"
   dependencies:
     hsl-rgb "^1.0.0"
     hsl-triad "^1.0.0"
@@ -10457,6 +10393,11 @@ grapheme-splitter@^1.0.4:
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
   integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
 
+graphemer@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
+  integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
+
 graphiql@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/graphiql/-/graphiql-2.2.0.tgz#406b9b28bca130ae9ece892826c1d60958c1ac13"
@@ -10529,11 +10470,23 @@ has-property-descriptors@^1.0.0:
   dependencies:
     get-intrinsic "^1.1.1"
 
+has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
+
 has-proto@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.1.tgz#1885c1305538958aff469fef37937c22795408e0"
   integrity sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==
 
+has-proto@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd"
+  integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
+
 has-symbols@^1.0.1, has-symbols@^1.0.2, has-symbols@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
@@ -10546,6 +10499,13 @@ has-tostringtag@^1.0.0:
   dependencies:
     has-symbols "^1.0.2"
 
+has-tostringtag@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
+  integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
+  dependencies:
+    has-symbols "^1.0.3"
+
 has@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
@@ -10568,6 +10528,13 @@ hasown@^2.0.0:
   dependencies:
     function-bind "^1.1.2"
 
+hasown@^2.0.1, hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
 hast-util-parse-selector@^2.0.0:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz#d57c23f4da16ae3c63b3b6ca4616683313499c3a"
@@ -10597,16 +10564,6 @@ help-me@^4.0.1:
     glob "^8.0.0"
     readable-stream "^3.6.0"
 
-hexer@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/hexer/-/hexer-1.5.0.tgz#b86ce808598e8a9d1892c571f3cedd86fc9f0653"
-  integrity sha512-dyrPC8KzBzUJ19QTIo1gXNqIISRXQ0NwteW6OeQHRN4ZuZeHkdODfj0zHBdOlHbRY8GqbqK57C9oWSvQZizFsg==
-  dependencies:
-    ansi-color "^0.2.1"
-    minimist "^1.1.0"
-    process "^0.10.0"
-    xtend "^4.0.0"
-
 hey-listen@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
@@ -10650,18 +10607,11 @@ html-encoding-sniffer@^3.0.0:
   dependencies:
     whatwg-encoding "^2.0.0"
 
-html-escaper@^2.0.0:
+html-escaper@^2.0.0, html-escaper@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
-html-parse-stringify@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2"
-  integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==
-  dependencies:
-    void-elements "3.1.0"
-
 http-proxy-agent@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz#5129800203520d434f142bc78ff3c170800f2b43"
@@ -10684,6 +10634,14 @@ https-proxy-agent@^5.0.0, https-proxy-agent@^5.0.1:
     agent-base "6"
     debug "4"
 
+https-proxy-agent@^7.0.1:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz#9e8b5013873299e11fab6fd548405da2d6c602b2"
+  integrity sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==
+  dependencies:
+    agent-base "^7.0.2"
+    debug "4"
+
 human-signals@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
@@ -10699,19 +10657,19 @@ husky@^8.0.0:
   resolved "https://registry.yarnpkg.com/husky/-/husky-8.0.1.tgz#511cb3e57de3e3190514ae49ed50f6bc3f50b3e9"
   integrity sha512-xs7/chUH/CKdOCs7Zy0Aev9e/dKOMZf3K1Az1nar3tzlv0jfqnYtu235bstsWTmXOR0EfINrPa97yy4Lz6RiKw==
 
-i18next-browser-languagedetector@^7.1.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.2.0.tgz#de0321cba6881be37d82e20e4d6f05aa75f6e37f"
-  integrity sha512-U00DbDtFIYD3wkWsr2aVGfXGAj2TgnELzOX9qv8bT0aJtvPV9CRO77h+vgmHFBMe7LAxdwvT/7VkCWGya6L3tA==
+i18next-browser-languagedetector@7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.1.0.tgz#01876fac51f86b78975e79b48ccb62e2313a2d7d"
+  integrity sha512-cr2k7u1XJJ4HTOjM9GyOMtbOA47RtUoWRAtt52z43r3AoMs2StYKyjS3URPhzHaf+mn10hY9dZWamga5WPQjhA==
   dependencies:
-    "@babel/runtime" "^7.23.2"
+    "@babel/runtime" "^7.19.4"
 
-i18next@22.5.1:
-  version "22.5.1"
-  resolved "https://registry.yarnpkg.com/i18next/-/i18next-22.5.1.tgz#99df0b318741a506000c243429a7352e5f44d424"
-  integrity sha512-8TGPgM3pAD+VRsMtUMNknRz3kzqwp/gPALrWMsDnmC1mKqJwpWyooQRLMcbTwq8z8YwSmuj+ZYvc+xCuEpkssA==
+i18next@23.11.5:
+  version "23.11.5"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.11.5.tgz#d71eb717a7e65498d87d0594f2664237f9e361ef"
+  integrity sha512-41pvpVbW9rhZPk5xjCX2TPJi2861LEig/YRhUkY+1FQ2IQPS0bKUDYnEqY8XPPbB48h1uIwLnP9iiEfuSl20CA==
   dependencies:
-    "@babel/runtime" "^7.20.6"
+    "@babel/runtime" "^7.23.2"
 
 iconv-lite@0.6, iconv-lite@0.6.3:
   version "0.6.3"
@@ -10750,7 +10708,7 @@ immutable@^3.x.x:
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
   integrity sha512-15gZoQ38eYjEjxkorfbcgBKBL6R7T459OuK+CpcWt7O3KF4uPCx2tD0uFETlUDIyo+1789crbMhTvQBSR5yBMg==
 
-import-fresh@^3.0.0, import-fresh@^3.2.1:
+import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
@@ -10758,10 +10716,10 @@ import-fresh@^3.0.0, import-fresh@^3.2.1:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
-import-in-the-middle@1.4.2:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/import-in-the-middle/-/import-in-the-middle-1.4.2.tgz#2a266676e3495e72c04bbaa5ec14756ba168391b"
-  integrity sha512-9WOz1Yh/cvO/p69sxRmhyQwrIGGSp7EIdcb+fFNVi7CzQGQB8U1/1XrKVSbEd/GNOAeM0peJtmi7+qphe7NvAw==
+import-in-the-middle@1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/import-in-the-middle/-/import-in-the-middle-1.7.1.tgz#3e111ff79c639d0bde459bd7ba29dd9fdf357364"
+  integrity sha512-1LrZPDtW+atAxH42S6288qyDFNQ2YCty+2mxEPRtfazH6Z5QwkaBSTS2ods7hnVJioF6rkRfNoA6A/MstpFXLg==
   dependencies:
     acorn "^8.8.2"
     acorn-import-assertions "^1.9.0"
@@ -10822,6 +10780,15 @@ internal-slot@^1.0.4:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+internal-slot@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802"
+  integrity sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==
+  dependencies:
+    es-errors "^1.3.0"
+    hasown "^2.0.0"
+    side-channel "^1.0.4"
+
 "internmap@1 - 2":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
@@ -10884,11 +10851,26 @@ is-array-buffer@^3.0.1:
     get-intrinsic "^1.1.3"
     is-typed-array "^1.1.10"
 
+is-array-buffer@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.4.tgz#7a1f92b3d61edd2bc65d24f130530ea93d7fae98"
+  integrity sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.2.1"
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
 
+is-async-function@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.0.0.tgz#8e4418efd3e5d3a6ebb0164c05ef5afb69aa9646"
+  integrity sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
 is-bigint@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
@@ -10923,20 +10905,27 @@ is-core-module@^2.11.0:
   dependencies:
     has "^1.0.3"
 
-is-core-module@^2.13.0:
+is-core-module@^2.13.0, is-core-module@^2.13.1:
   version "2.13.1"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
   integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==
   dependencies:
     hasown "^2.0.0"
 
-is-core-module@^2.8.1, is-core-module@^2.9.0:
+is-core-module@^2.9.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.10.0.tgz#9012ede0a91c69587e647514e1d5277019e728ed"
   integrity sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==
   dependencies:
     has "^1.0.3"
 
+is-data-view@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-data-view/-/is-data-view-1.0.1.tgz#4b4d3a511b70f3dc26d42c03ca9ca515d847759f"
+  integrity sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==
+  dependencies:
+    is-typed-array "^1.1.13"
+
 is-date-object@^1.0.1, is-date-object@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
@@ -10959,6 +10948,13 @@ is-extglob@^2.1.1:
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
 
+is-finalizationregistry@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz#c8749b65f17c133313e661b1289b95ad3dbd62e6"
+  integrity sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==
+  dependencies:
+    call-bind "^1.0.2"
+
 is-fullwidth-code-point@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
@@ -10974,7 +10970,7 @@ is-generator-fn@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
   integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
 
-is-generator-function@^1.0.7:
+is-generator-function@^1.0.10, is-generator-function@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.10.tgz#f1558baf1ac17e0deea7c0415c438351ff2b3c72"
   integrity sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==
@@ -11003,6 +10999,11 @@ is-negative-zero@^2.0.2:
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
   integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
 
+is-negative-zero@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.3.tgz#ced903a027aca6381b777a5743069d7376a49747"
+  integrity sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==
+
 is-number-object@^1.0.4:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.7.tgz#59d50ada4c45251784e9904f5246c742f07a42fc"
@@ -11020,11 +11021,6 @@ is-path-inside@^3.0.3:
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
-is-plain-obj@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
-  integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
-
 is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@@ -11067,6 +11063,13 @@ is-shared-array-buffer@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-shared-array-buffer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz#1237f1cba059cdb62431d378dcc37d9680181688"
+  integrity sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==
+  dependencies:
+    call-bind "^1.0.7"
+
 is-stream@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
@@ -11102,6 +11105,13 @@ is-typed-array@^1.1.10, is-typed-array@^1.1.3, is-typed-array@^1.1.9:
     gopd "^1.0.1"
     has-tostringtag "^1.0.0"
 
+is-typed-array@^1.1.13:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.13.tgz#d6c5ca56df62334959322d7d7dd1cca50debe229"
+  integrity sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==
+  dependencies:
+    which-typed-array "^1.1.14"
+
 is-weakmap@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
@@ -11149,24 +11159,16 @@ isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
 
-isomorphic-unfetch@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/isomorphic-unfetch/-/isomorphic-unfetch-3.1.0.tgz#87341d5f4f7b63843d468438128cb087b7c3e98f"
-  integrity sha512-geDJjpoZ8N0kWexiwkX8F9NkTsXhetLPVbZFQ+JTW239QNOwvB0gniuR1Wc6f0AMTn7/mFGyXvHTifrCp/GH8Q==
-  dependencies:
-    node-fetch "^2.6.1"
-    unfetch "^4.2.0"
-
-isomorphic-ws@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz#e5529148912ecb9b451b46ed44d53dae1ce04bbf"
-  integrity sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==
-
 isows@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/isows/-/isows-1.0.3.tgz#93c1cf0575daf56e7120bab5c8c448b0809d0d74"
   integrity sha512-2cKei4vlmg2cxEjm3wVSqn8pcoRF/LX/wpifuuNquFO4SQmPwarClT+SUCA2lt+l581tTeZIPIZuIDo2jWN1fg==
 
+isows@1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/isows/-/isows-1.0.4.tgz#810cd0d90cc4995c26395d2aa4cfa4037ebdf061"
+  integrity sha512-hEzjY+x9u9hPmBom9IIAqdJCwNLax+xrPb51vEPpERoFlIxgmZcHzsT5jKG06nvInKOBGvReAVz80Umed5CczQ==
+
 istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz#189e7909d0a39fa5a3dfad5b03f71947770191d3"
@@ -11209,6 +11211,17 @@ istanbul-reports@^3.1.3:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
+iterator.prototype@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.2.tgz#5e29c8924f01916cb9335f1ff80619dcff22b0c0"
+  integrity sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==
+  dependencies:
+    define-properties "^1.2.1"
+    get-intrinsic "^1.2.1"
+    has-symbols "^1.0.3"
+    reflect.getprototypeof "^1.0.4"
+    set-function-name "^2.0.1"
+
 jackspeak@^2.3.5:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.3.6.tgz#647ecc472238aee4b06ac0e461acc21a8c505ca8"
@@ -11218,17 +11231,6 @@ jackspeak@^2.3.5:
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
-jaeger-client@^3.15.0:
-  version "3.19.0"
-  resolved "https://registry.yarnpkg.com/jaeger-client/-/jaeger-client-3.19.0.tgz#9b5bd818ebd24e818616ee0f5cffe1722a53ae6e"
-  integrity sha512-M0c7cKHmdyEUtjemnJyx/y9uX16XHocL46yQvyqDlPdvAcwPDbHrIbKjQdBqtiE4apQ/9dmr+ZLJYYPGnurgpw==
-  dependencies:
-    node-int64 "^0.4.0"
-    opentracing "^0.14.4"
-    thriftrw "^3.5.0"
-    uuid "^8.3.2"
-    xorshift "^1.1.1"
-
 jest-changed-files@^29.2.0:
   version "29.2.0"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-29.2.0.tgz#b6598daa9803ea6a4dce7968e20ab380ddbee289"
@@ -11654,11 +11656,6 @@ js-file-download@^0.4.12:
   resolved "https://registry.yarnpkg.com/js-file-download/-/js-file-download-0.4.12.tgz#10c70ef362559a5b23cdbdc3bd6f399c3d91d821"
   integrity sha512-rML+NkoD08p5Dllpjo0ffy4jRHeY6Zsapvr/W86N7E0yuzAO6qa5X9+xog6zQNlH102J7IXljNY2FtS6Lj3ucg==
 
-js-sdsl@^4.1.4:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.2.0.tgz#278e98b7bea589b8baaf048c20aeb19eb7ad09d0"
-  integrity sha512-dyBIzQBDkCqCu+0upx25Y2jGdbTGxE9fshMsCdK0ViOongpV+n5tXRcZY9v7CaVQ79AGS9KA1KHtojxiM7aXSQ==
-
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -11733,6 +11730,11 @@ json-bigint@^1.0.0:
   dependencies:
     bignumber.js "^9.0.0"
 
+json-buffer@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
+  integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
+
 json-parse-even-better-errors@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
@@ -11776,7 +11778,7 @@ json-stable-stringify@^1.0.2:
   dependencies:
     jsonify "^0.0.1"
 
-json5@^1.0.1:
+json5@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
   integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
@@ -11812,7 +11814,7 @@ jsonify@^0.0.1:
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.1.tgz#2aa3111dae3d34a0f151c63f3a45d995d9420978"
   integrity sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==
 
-"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.2:
+"jsx-ast-utils@^2.4.1 || ^3.0.0":
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz#76b3e6e6cece5c69d49a5792c3d01bd1a0cdc7ea"
   integrity sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==
@@ -11820,6 +11822,16 @@ jsonify@^0.0.1:
     array-includes "^3.1.5"
     object.assign "^4.1.3"
 
+jsx-ast-utils@^3.3.5:
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a"
+  integrity sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==
+  dependencies:
+    array-includes "^3.1.6"
+    array.prototype.flat "^1.3.1"
+    object.assign "^4.1.4"
+    object.values "^1.1.6"
+
 keccak@^3.0.3:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/keccak/-/keccak-3.0.4.tgz#edc09b89e633c0549da444432ecf062ffadee86d"
@@ -11829,6 +11841,13 @@ keccak@^3.0.3:
     node-gyp-build "^4.2.0"
     readable-stream "^3.6.0"
 
+keyv@^4.5.3:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
+  integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
+  dependencies:
+    json-buffer "3.0.1"
+
 keyvaluestorage-interface@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/keyvaluestorage-interface/-/keyvaluestorage-interface-1.0.0.tgz#13ebdf71f5284ad54be94bd1ad9ed79adad515ff"
@@ -11846,17 +11865,17 @@ kleur@^3.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
-language-subtag-registry@~0.3.2:
+language-subtag-registry@^0.3.20:
   version "0.3.22"
   resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz#2e1500861b2e457eba7e7ae86877cbd08fa1fd1d"
   integrity sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==
 
-language-tags@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.5.tgz#d321dbc4da30ba8bf3024e040fa5c14661f9193a"
-  integrity sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==
+language-tags@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.9.tgz#1ffdcd0ec0fafb4b1be7f8b11f306ad0f9c08777"
+  integrity sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==
   dependencies:
-    language-subtag-registry "~0.3.2"
+    language-subtag-registry "^0.3.20"
 
 leven@^3.1.0:
   version "3.1.0"
@@ -12078,7 +12097,7 @@ lodash.throttle@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
   integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
 
-lodash@^4.0.0, lodash@^4.15.0, lodash@^4.17.20, lodash@^4.17.21:
+lodash@^4.0.0, lodash@^4.15.0, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -12093,11 +12112,6 @@ log-update@^4.0.0:
     slice-ansi "^4.0.0"
     wrap-ansi "^6.2.0"
 
-long@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/long/-/long-2.4.0.tgz#9fa180bb1d9500cdc29c4156766a1995e1f4524f"
-  integrity sha512-ijUtjmO/n2A5PaosNG9ZGDsQ3vxJg7ZW8vsY8Kp0f2yIZWhSJvjmegV7t+9RPQKxKrvj8yKGehhS+po14hPLGQ==
-
 long@^5.0.0:
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/long/-/long-5.2.3.tgz#a3ba97f3877cf1d778eccbcb048525ebb77499e1"
@@ -12147,13 +12161,6 @@ magic-bytes.js@1.8.0:
   resolved "https://registry.yarnpkg.com/magic-bytes.js/-/magic-bytes.js-1.8.0.tgz#8362793c60cd77c2dd77db6420be727192df68e2"
   integrity sha512-lyWpfvNGVb5lu8YUAbER0+UMBTdR63w2mcSUlhhBTyVbxJvjgqwyAf3AZD6MprgK0uHuBoWXSDAMWLupX83o3Q==
 
-magic-string@^0.30.5:
-  version "0.30.5"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.5.tgz#1994d980bd1c8835dc6e78db7cbd4ae4f24746f9"
-  integrity sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==
-  dependencies:
-    "@jridgewell/sourcemap-codec" "^1.4.15"
-
 make-dir@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
@@ -12209,13 +12216,6 @@ memoize-one@^6.0.0:
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
   integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
 
-merge-options@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/merge-options/-/merge-options-3.0.4.tgz#84709c2aa2a4b24c1981f66c179fe5565cc6dbb7"
-  integrity sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==
-  dependencies:
-    is-plain-obj "^2.1.0"
-
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -12242,11 +12242,11 @@ micro-ftch@^0.3.1:
   integrity sha512-/0LLxhzP0tfiR5hcQebtudP56gUurs2CLkGarnCiB/OqEyUFQ6U3paQi/tgLv0hBJYt2rnr9MNpxz4fiiugstg==
 
 micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
-  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
   dependencies:
-    braces "^3.0.2"
+    braces "^3.0.3"
     picomatch "^2.3.1"
 
 mime-db@1.52.0:
@@ -12326,27 +12326,25 @@ minimatch@^9.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
-minimist@^1.1.0, minimist@^1.2.3, minimist@^1.2.6:
-  version "1.2.8"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
-  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
-
 minimist@^1.2.0, minimist@^1.2.5:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
   integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
 
+minimist@^1.2.3, minimist@^1.2.6:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
 "minipass@^5.0.0 || ^6.0.2 || ^7.0.0":
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.0.4.tgz#dbce03740f50a4786ba994c1fb908844d27b038c"
   integrity sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==
 
-mipd@0.0.5:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/mipd/-/mipd-0.0.5.tgz#367ee796531c23f0631f129038700b1406663aec"
-  integrity sha512-gbKA784D2WKb5H/GtqEv+Ofd1S9Zj+Z/PGDIl1u1QAbswkxD28BQ5bSXQxkeBzPBABg1iDSbiwGG1XqlOxRspA==
-  dependencies:
-    viem "^1.1.4"
+mipd@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/mipd/-/mipd-0.0.7.tgz#bb5559e21fa18dc3d9fe1c08902ef14b7ce32fd9"
+  integrity sha512-aAPZPNDQ3uMTdKbuO2YmAw2TxLHO0moa4YKAyETM/DTj5FloZo+a+8tU+iv4GmW+sOxKLSRwcSFuczk+Cpt6fg==
 
 mixpanel-browser@^2.47.0:
   version "2.47.0"
@@ -12400,15 +12398,10 @@ mri@^1.2.0:
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
   integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
 
-mrmime@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.1.tgz#5f90c825fad4bdd41dc914eff5d1a8cfdaf24f27"
-  integrity sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==
-
-ms@2.0.0:
+mrmime@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
-  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
+  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-2.0.0.tgz#151082a6e06e59a9a39b46b3e14d5cfe92b3abb4"
+  integrity sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==
 
 ms@2.1.2:
   version "2.1.2"
@@ -12439,12 +12432,7 @@ nan@^2.14.0, nan@^2.14.1, nan@^2.17.0:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.17.0.tgz#c0150a2368a182f033e9aa5195ec76ea41a199cb"
   integrity sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==
 
-nanoid@^3.3.6:
-  version "3.3.6"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
-  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
-
-nanoid@^3.3.7:
+nanoid@^3.3.6, nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
@@ -12469,28 +12457,28 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-next@13.5.4:
-  version "13.5.4"
-  resolved "https://registry.yarnpkg.com/next/-/next-13.5.4.tgz#7e6a93c9c2b9a2c78bf6906a6c5cc73ae02d5b4d"
-  integrity sha512-+93un5S779gho8y9ASQhb/bTkQF17FNQOtXLKAj3lsNgltEcF0C5PMLLncDmH+8X1EnJH1kbqAERa29nRXqhjA==
+next@14.2.13:
+  version "14.2.13"
+  resolved "https://registry.yarnpkg.com/next/-/next-14.2.13.tgz#32da2ee0afbe729e2d4a467c3570def90e1c974d"
+  integrity sha512-BseY9YNw8QJSwLYD7hlZzl6QVDoSFHL/URN5K64kVEVpCsSOWeyjbIGK+dZUaRViHTaMQX8aqmnn0PHBbGZezg==
   dependencies:
-    "@next/env" "13.5.4"
-    "@swc/helpers" "0.5.2"
+    "@next/env" "14.2.13"
+    "@swc/helpers" "0.5.5"
     busboy "1.6.0"
-    caniuse-lite "^1.0.30001406"
+    caniuse-lite "^1.0.30001579"
+    graceful-fs "^4.2.11"
     postcss "8.4.31"
     styled-jsx "5.1.1"
-    watchpack "2.4.0"
   optionalDependencies:
-    "@next/swc-darwin-arm64" "13.5.4"
-    "@next/swc-darwin-x64" "13.5.4"
-    "@next/swc-linux-arm64-gnu" "13.5.4"
-    "@next/swc-linux-arm64-musl" "13.5.4"
-    "@next/swc-linux-x64-gnu" "13.5.4"
-    "@next/swc-linux-x64-musl" "13.5.4"
-    "@next/swc-win32-arm64-msvc" "13.5.4"
-    "@next/swc-win32-ia32-msvc" "13.5.4"
-    "@next/swc-win32-x64-msvc" "13.5.4"
+    "@next/swc-darwin-arm64" "14.2.13"
+    "@next/swc-darwin-x64" "14.2.13"
+    "@next/swc-linux-arm64-gnu" "14.2.13"
+    "@next/swc-linux-arm64-musl" "14.2.13"
+    "@next/swc-linux-x64-gnu" "14.2.13"
+    "@next/swc-linux-x64-musl" "14.2.13"
+    "@next/swc-win32-arm64-msvc" "14.2.13"
+    "@next/swc-win32-ia32-msvc" "14.2.13"
+    "@next/swc-win32-x64-msvc" "14.2.13"
 
 nextjs-routes@^1.0.8:
   version "1.0.8"
@@ -12543,18 +12531,11 @@ node-fetch-native@^1.4.0, node-fetch-native@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/node-fetch-native/-/node-fetch-native-1.4.1.tgz#5a336e55b4e1b1e72b9927da09fecd2b374c9be5"
   integrity sha512-NsXBU0UgBxo2rQLOeWNZqS3fvflWePMECr8CoSWoSTqCqGbVVsvl9vZu1HfQicYN0g5piV9Gh8RTEvo/uP752w==
-
-node-fetch@2.6.7:
-  version "2.6.7"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
-  integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
-  dependencies:
-    whatwg-url "^5.0.0"
-
-node-fetch@^2.6.1, node-fetch@^2.6.12, node-fetch@^2.6.7, node-fetch@^2.6.9:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
-  integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
+
+node-fetch@2.6.7:
+  version "2.6.7"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
+  integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
   dependencies:
     whatwg-url "^5.0.0"
 
@@ -12565,6 +12546,13 @@ node-fetch@^2.6.11:
   dependencies:
     whatwg-url "^5.0.0"
 
+node-fetch@^2.6.12, node-fetch@^2.6.7, node-fetch@^2.6.9:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
+  integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
+  dependencies:
+    whatwg-url "^5.0.0"
+
 node-fetch@^3.2.9:
   version "3.2.10"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.2.10.tgz#e8347f94b54ae18b57c9c049ef641cef398a85c8"
@@ -12657,6 +12645,11 @@ object-inspect@^1.12.2:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
   integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
 
+object-inspect@^1.13.1:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.1.tgz#b96c6109324ccfef6b12216a956ca4dc2ff94bc2"
+  integrity sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==
+
 object-inspect@^1.9.0:
   version "1.12.3"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
@@ -12685,14 +12678,15 @@ object.assign@^4.1.3, object.assign@^4.1.4:
     has-symbols "^1.0.3"
     object-keys "^1.1.1"
 
-object.entries@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.5.tgz#e1acdd17c4de2cd96d5a08487cfb9db84d881861"
-  integrity sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==
+object.assign@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.5.tgz#3a833f9ab7fdb80fc9e8d2300c803d216d8fdbb0"
+  integrity sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    has-symbols "^1.0.3"
+    object-keys "^1.1.1"
 
 object.entries@^1.1.6:
   version "1.1.6"
@@ -12703,14 +12697,14 @@ object.entries@^1.1.6:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
-object.fromentries@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.5.tgz#7b37b205109c21e741e605727fe8b0ad5fa08251"
-  integrity sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==
+object.entries@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.8.tgz#bffe6f282e01f4d17807204a24f8edd823599c41"
+  integrity sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
 
 object.fromentries@^2.0.6:
   version "2.0.6"
@@ -12721,13 +12715,24 @@ object.fromentries@^2.0.6:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
-object.hasown@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.1.tgz#ad1eecc60d03f49460600430d97f23882cf592a3"
-  integrity sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==
+object.fromentries@^2.0.7:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.8.tgz#f7195d8a9b97bd95cbc1999ea939ecd1a2b00c65"
+  integrity sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==
   dependencies:
-    define-properties "^1.1.4"
-    es-abstract "^1.19.5"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+
+object.groupby@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.3.tgz#9b125c36238129f6f7b61954a1e7176148d5002e"
+  integrity sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
 
 object.hasown@^1.1.2:
   version "1.1.2"
@@ -12737,14 +12742,14 @@ object.hasown@^1.1.2:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
-object.values@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.5.tgz#959f63e3ce9ef108720333082131e4a459b716ac"
-  integrity sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==
+object.hasown@^1.1.3:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.4.tgz#e270ae377e4c120cdcb7656ce66884a6218283dc"
+  integrity sha512-FZ9LZt9/RHzGySlBARE3VF+gE26TxR38SdmqOqliuTnl9wrKulaQs+4dee1V+Io8VfxqzAfHu6YuRgUy8OHoTg==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
 
 object.values@^1.1.6:
   version "1.1.6"
@@ -12755,6 +12760,15 @@ object.values@^1.1.6:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
+object.values@^1.1.7:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.2.0.tgz#65405a9d92cee68ac2d303002e0b8470a4d9ab1b"
+  integrity sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
 obuf@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
@@ -12822,11 +12836,6 @@ opener@^1.5.2:
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
   integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
 
-opentracing@^0.14.4:
-  version "0.14.7"
-  resolved "https://registry.yarnpkg.com/opentracing/-/opentracing-0.14.7.tgz#25d472bd0296dc0b64d7b94cbc995219031428f5"
-  integrity sha512-vz9iS7MJ5+Bp1URw8Khvdyw1H/hGvzHWlKQ7eRrQojSCDL1/SrWfrY9QebLw97n2deyRtzHRC3MkQfVNUCo91Q==
-
 optionator@^0.8.1:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
@@ -12839,17 +12848,17 @@ optionator@^0.8.1:
     type-check "~0.3.2"
     word-wrap "~1.2.3"
 
-optionator@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
-  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+optionator@^0.9.3:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734"
+  integrity sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==
   dependencies:
     deep-is "^0.1.3"
     fast-levenshtein "^2.0.6"
     levn "^0.4.1"
     prelude-ls "^1.2.1"
     type-check "^0.4.0"
-    word-wrap "^1.2.3"
+    word-wrap "^1.2.5"
 
 os-tmpdir@~1.0.2:
   version "1.0.2"
@@ -12991,10 +13000,10 @@ path-scurry@^1.10.1:
     lru-cache "^9.1.1 || ^10.0.0"
     minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
 
-path-to-regexp@^6.2.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-6.2.1.tgz#d54934d6798eb9e5ef14e7af7962c945906918e5"
-  integrity sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==
+path-to-regexp@8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-8.1.0.tgz#4d687606ed0be8ed512ba802eb94d620cb1a86f0"
+  integrity sha512-Bqn3vc8CMHty6zuD+tG23s6v2kwxslHEhTj4eYaVKGIEB+YX/2wd0/rgXLFD9G9id9KCtbVy/3ZgmvZjpa0UdQ==
 
 path-type@^4.0.0:
   version "4.0.0"
@@ -13051,9 +13060,9 @@ phoenix@^1.6.15:
   integrity sha512-O6AG5jTkZOOkdd/GOSCsM4v3bzBoyRnC5bEi57KhX/Daba6FvnBRzt0nhEeRRiVQGLSxDlyb0dUe9CkYWMZd8g==
 
 picocolors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
-  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.0.tgz#5358b76a78cde483ba5cef6a9dc9671440b27d59"
+  integrity sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==
 
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1:
   version "2.3.1"
@@ -13226,6 +13235,11 @@ popmotion@11.0.3:
     style-value-types "5.0.0"
     tslib "^2.1.0"
 
+possible-typed-array-names@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
+  integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
+
 postcss-load-config@4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.1.tgz#152383f481c2758274404e4962743191d73875bd"
@@ -13298,7 +13312,7 @@ postcss@8.4.31:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.4.19, postcss@^8.4.27, postcss@^8.4.32:
+postcss@^8.4.19, postcss@^8.4.27:
   version "8.4.32"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.32.tgz#1dac6ac51ab19adb21b8b34fd2d93a86440ef6c9"
   integrity sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==
@@ -13417,11 +13431,6 @@ prismjs@~1.27.0:
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057"
   integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==
 
-process-nextick-args@~1.0.6:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
-  integrity sha512-yN0WQmuCX63LP/TMvAg31nvT6m4vDqJEiiv2CAZqWOGNWutc9DfDk1NPYYmKUFmaVM2UwDowH4u5AHWYP/jxKw==
-
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -13437,11 +13446,6 @@ process-warning@^2.0.0:
   resolved "https://registry.yarnpkg.com/process-warning/-/process-warning-2.0.0.tgz#341dbeaac985b90a04ebcd844d50097c7737b2ee"
   integrity sha512-+MmoAXoUX+VTHAlwns0h+kFUWFs/3FZy+ZuchkgjyOu3oioLAo2LB5aCfKPh2+P9O18i3m43tUEv3YqttSy0Ww==
 
-process@^0.10.0:
-  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/process/-/process-0.10.1.tgz#842457cc51cfed72dc775afeeafb8c6034372725"
-  integrity sha512-dyIett8dgGIZ/TXKUzeYExt7WA6ldDzys9vTDU/cCA9L17Ypme+KzS+NjQCjpn9xsvi/shbMC+yP/BcFMBz0NA==
-
 process@^0.11.10:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
@@ -13452,6 +13456,14 @@ progress@^2.0.3:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
+prom-client@15.1.1:
+  version "15.1.1"
+  resolved "https://registry.yarnpkg.com/prom-client/-/prom-client-15.1.1.tgz#71ba84371241acd173181b04a436782c246f3652"
+  integrity sha512-GVA2H96QCg2q71rjc3VYvSrVG7OpnJxyryC7dMzvfJfpJJHzQVwF3TJLfHzKORcwJpElWs1TwXLthlJAFJxq2A==
+  dependencies:
+    "@opentelemetry/api" "^1.4.0"
+    tdigest "^0.1.1"
+
 promise-polyfill@^8.1.3:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.3.0.tgz#9284810268138d103807b11f4e23d5e945a4db63"
@@ -13481,7 +13493,7 @@ property-information@^5.0.0:
   dependencies:
     xtend "^4.0.0"
 
-protobufjs@^7.2.3, protobufjs@^7.2.4:
+protobufjs@^7.2.3:
   version "7.2.5"
   resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-7.2.5.tgz#45d5c57387a6d29a17aab6846dcc283f9b8e7f2d"
   integrity sha512-gGXRSXvxQ7UiPgfw8gevrfRWcTlSbOFg+p/N+JVJEK5VhueL2miT6qTymqAmjr1Q5WbOCyJbyrk6JfWKwlFn6A==
@@ -13499,6 +13511,24 @@ protobufjs@^7.2.3, protobufjs@^7.2.4:
     "@types/node" ">=13.7.0"
     long "^5.0.0"
 
+protobufjs@^7.2.5:
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-7.3.2.tgz#60f3b7624968868f6f739430cfbc8c9370e26df4"
+  integrity sha512-RXyHaACeqXeqAKGLDl68rQKbmObRsTIn4TYVUUug1KfS47YWCo5MacGITEryugIgZqORCvJWEk4l449POg5Txg==
+  dependencies:
+    "@protobufjs/aspromise" "^1.1.2"
+    "@protobufjs/base64" "^1.1.2"
+    "@protobufjs/codegen" "^2.0.4"
+    "@protobufjs/eventemitter" "^1.1.0"
+    "@protobufjs/fetch" "^1.1.0"
+    "@protobufjs/float" "^1.0.2"
+    "@protobufjs/inquire" "^1.1.0"
+    "@protobufjs/path" "^1.1.2"
+    "@protobufjs/pool" "^1.1.0"
+    "@protobufjs/utf8" "^1.1.0"
+    "@types/node" ">=13.7.0"
+    long "^5.0.0"
+
 proxy-compare@2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/proxy-compare/-/proxy-compare-2.5.1.tgz#17818e33d1653fbac8c2ec31406bce8a2966f600"
@@ -13646,7 +13676,7 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-async-script@^1.1.1:
+react-async-script@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/react-async-script/-/react-async-script-1.2.0.tgz#ab9412a26f0b83f5e2e00de1d2befc9400834b21"
   integrity sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==
@@ -13684,7 +13714,7 @@ react-device-detect@^2.2.3:
   dependencies:
     ua-parser-js "^1.0.33"
 
-react-dom@18.2.0, react-dom@>=17, react-dom@^18.2.0:
+react-dom@18.2.0, react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -13709,27 +13739,19 @@ react-focus-lock@^2.5.2, react-focus-lock@^2.9.4:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
-react-google-recaptcha@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/react-google-recaptcha/-/react-google-recaptcha-2.1.0.tgz#9f6f4954ce49c1dedabc2c532347321d892d0a16"
-  integrity sha512-K9jr7e0CWFigi8KxC3WPvNqZZ47df2RrMAta6KmRoE4RUi7Ys6NmNjytpXpg4HI/svmQJLKR+PncEPaNJ98DqQ==
+react-google-recaptcha@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz#44aaab834495d922b9d93d7d7a7fb2326315b4ab"
+  integrity sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==
   dependencies:
     prop-types "^15.5.0"
-    react-async-script "^1.1.1"
+    react-async-script "^1.2.0"
 
 react-hook-form@^7.33.1:
   version "7.37.0"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.37.0.tgz#4d1738f092d3d8a3ade34ee892d97350b1032b19"
   integrity sha512-6NFTxsnw+EXSpNNvLr5nFMjPdYKRryQcelTHg7zwBB6vAzfPIcZq4AExP4heVlwdzntepQgwiOQW4z7Mr99Lsg==
 
-react-i18next@^13.2.2:
-  version "13.5.0"
-  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-13.5.0.tgz#44198f747628267a115c565f0c736a50a76b1ab0"
-  integrity sha512-CFJ5NDGJ2MUyBohEHxljOq/39NQ972rh1ajnadG9BjTk+UXbHLq4z5DKEbEQBDoIhUmmbuS/fIMJKo6VOax1HA==
-  dependencies:
-    "@babel/runtime" "^7.22.5"
-    html-parse-stringify "^3.0.1"
-
 react-identicons@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/react-identicons/-/react-identicons-1.2.5.tgz#3502249e49d88f4e3500092694410a984bb102fa"
@@ -13896,27 +13918,14 @@ react@17.0.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-react@18.2.0, react@>=17, react@^18.2.0:
+react@18.2.0, react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
     loose-envify "^1.1.0"
 
-readable-stream@2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
-  integrity sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~1.0.6"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.0.3"
-    util-deprecate "~1.0.1"
-
-readable-stream@3.6.2, readable-stream@^3.4.0:
+readable-stream@3.6.2, readable-stream@^3.4.0, readable-stream@^3.6.2:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
   integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
@@ -13938,19 +13947,6 @@ readable-stream@^2.3.3:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-readable-stream@^2.3.7:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
-  integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~2.0.0"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.1.1"
-    util-deprecate "~1.0.1"
-
 readable-stream@^3.1.1, readable-stream@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
@@ -13960,6 +13956,17 @@ readable-stream@^3.1.1, readable-stream@^3.6.0:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
+"readable-stream@^3.6.2 || ^4.4.2":
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-4.5.2.tgz#9e7fc4c45099baeed934bff6eb97ba6cf2729e09"
+  integrity sha512-yjavECdqeZ3GLXNgRXgeQEdz9fvDDkNKyHnbHRFtOr7/LcfgBcmct7t/ET+HaCTqfh06OzoAxrkN/IfjJBVe+g==
+  dependencies:
+    abort-controller "^3.0.0"
+    buffer "^6.0.3"
+    events "^3.3.0"
+    process "^0.11.10"
+    string_decoder "^1.3.0"
+
 readable-stream@^4.0.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-4.2.0.tgz#a7ef523d3b39e4962b0db1a1af22777b10eeca46"
@@ -14029,6 +14036,19 @@ refa@^0.9.0:
   dependencies:
     regexpp "^3.2.0"
 
+reflect.getprototypeof@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz#3ab04c32a8390b770712b7a8633972702d278859"
+  integrity sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.1"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+    globalthis "^1.0.3"
+    which-builtin-type "^1.1.3"
+
 refractor@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.6.0.tgz#ac318f5a0715ead790fcfb0c71f4dd83d977935a"
@@ -14093,7 +14113,7 @@ regexp-ast-analysis@^0.5.1:
     refa "^0.9.0"
     regexpp "^3.2.0"
 
-regexp.prototype.flags@^1.4.1, regexp.prototype.flags@^1.4.3:
+regexp.prototype.flags@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz#87cab30f80f66660181a3bb7bf5981a872b367ac"
   integrity sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==
@@ -14102,6 +14122,16 @@ regexp.prototype.flags@^1.4.1, regexp.prototype.flags@^1.4.3:
     define-properties "^1.1.3"
     functions-have-names "^1.2.2"
 
+regexp.prototype.flags@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz#138f644a3350f981a858c44f6bb1a61ff59be334"
+  integrity sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==
+  dependencies:
+    call-bind "^1.0.6"
+    define-properties "^1.2.1"
+    es-errors "^1.3.0"
+    set-function-name "^2.0.1"
+
 regexpp@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
@@ -14195,7 +14225,7 @@ resolve.exports@^1.1.0:
   resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.0.tgz#5ce842b94b05146c0e03076985d1d0e7e48c90c9"
   integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==
 
-resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0:
+resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0:
   version "1.22.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
   integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
@@ -14204,7 +14234,7 @@ resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^1.22.1:
+resolve@^1.22.1, resolve@^1.22.4:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -14213,7 +14243,7 @@ resolve@^1.22.1:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^2.0.0-next.3, resolve@^2.0.0-next.4:
+resolve@^2.0.0-next.4:
   version "2.0.0-next.4"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"
   integrity sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==
@@ -14222,6 +14252,15 @@ resolve@^2.0.0-next.3, resolve@^2.0.0-next.4:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^2.0.0-next.5:
+  version "2.0.0-next.5"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.5.tgz#6b0ec3107e671e52b68cd068ef327173b90dc03c"
+  integrity sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 restore-cursor@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
@@ -14300,6 +14339,16 @@ rxjs@^7.5.5:
   dependencies:
     tslib "^2.1.0"
 
+safe-array-concat@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.2.tgz#81d77ee0c4e8b863635227c721278dd524c20edb"
+  integrity sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==
+  dependencies:
+    call-bind "^1.0.7"
+    get-intrinsic "^1.2.4"
+    has-symbols "^1.0.3"
+    isarray "^2.0.5"
+
 safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
@@ -14319,6 +14368,15 @@ safe-regex-test@^1.0.0:
     get-intrinsic "^1.1.3"
     is-regex "^1.1.4"
 
+safe-regex-test@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.3.tgz#a5b4c0f06e0ab50ea2c395c14d8371232924c377"
+  integrity sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-regex "^1.1.4"
+
 safe-stable-stringify@^2.1.0:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/safe-stable-stringify/-/safe-stable-stringify-2.4.2.tgz#ec7b037768098bf65310d1d64370de0dc02353aa"
@@ -14378,7 +14436,7 @@ semver@7.x, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@^7.5.2, semver@^
   dependencies:
     lru-cache "^6.0.0"
 
-semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
+semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0, semver@^6.3.1:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
@@ -14395,6 +14453,28 @@ set-blocking@^2.0.0:
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
 
+set-function-length@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
+set-function-name@^2.0.1, set-function-name@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.2.tgz#16a705c5a0dc2f5e638ca96d8a8cd4e1c2b90985"
+  integrity sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    functions-have-names "^1.2.3"
+    has-property-descriptors "^1.0.2"
+
 set-value@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/set-value/-/set-value-4.1.0.tgz#aa433662d87081b75ad88a4743bd450f044e7d09"
@@ -14442,6 +14522,16 @@ side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
+side-channel@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
+  integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+    object-inspect "^1.13.1"
+
 signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
@@ -14466,14 +14556,14 @@ simple-get@^4.0.0:
     once "^1.3.1"
     simple-concat "^1.0.0"
 
-sirv@^1.0.7:
-  version "1.0.19"
-  resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.19.tgz#1d73979b38c7fe91fcba49c85280daa9c2363b49"
-  integrity sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==
+sirv@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-2.0.4.tgz#5dd9a725c578e34e449f332703eb2a74e46a29b0"
+  integrity sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==
   dependencies:
-    "@polka/url" "^1.0.0-next.20"
-    mrmime "^1.0.0"
-    totalist "^1.0.0"
+    "@polka/url" "^1.0.0-next.24"
+    mrmime "^2.0.0"
+    totalist "^3.0.0"
 
 sisteransi@^1.0.5:
   version "1.0.5"
@@ -14553,11 +14643,16 @@ sonic-boom@^3.0.0, sonic-boom@^3.1.0:
   dependencies:
     atomic-sleep "^1.0.0"
 
-source-map-js@^1.0.1, source-map-js@^1.0.2:
+source-map-js@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
+source-map-js@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
 source-map-support@0.5.13:
   version "0.5.13"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"
@@ -14666,12 +14761,16 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-string-template@~0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"
-  integrity sha512-Yptehjogou2xm4UJbxJ4CxgZx12HBfeystp0y3x7s4Dj32ltVVG1Gg8YhKjHZkHicuKpZX/ffilA8505VbUbpw==
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -14689,19 +14788,23 @@ string-width@^5.0.0, string-width@^5.0.1, string-width@^5.1.2:
     emoji-regex "^9.2.2"
     strip-ansi "^7.0.1"
 
-string.prototype.matchall@^4.0.7:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz#8e6ecb0d8a1fb1fda470d81acecb2dba057a481d"
-  integrity sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
-    get-intrinsic "^1.1.1"
+string.prototype.matchall@^4.0.10:
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz#1092a72c59268d2abaad76582dccc687c0297e0a"
+  integrity sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
     has-symbols "^1.0.3"
-    internal-slot "^1.0.3"
-    regexp.prototype.flags "^1.4.1"
-    side-channel "^1.0.4"
+    internal-slot "^1.0.7"
+    regexp.prototype.flags "^1.5.2"
+    set-function-name "^2.0.2"
+    side-channel "^1.0.6"
 
 string.prototype.matchall@^4.0.8:
   version "4.0.8"
@@ -14717,6 +14820,16 @@ string.prototype.matchall@^4.0.8:
     regexp.prototype.flags "^1.4.3"
     side-channel "^1.0.4"
 
+string.prototype.trim@^1.2.9:
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz#b6fa326d72d2c78b6df02f7759c73f8f6274faa4"
+  integrity sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.0"
+    es-object-atoms "^1.0.0"
+
 string.prototype.trimend@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz#914a65baaab25fbdd4ee291ca7dde57e869cb8d0"
@@ -14735,6 +14848,15 @@ string.prototype.trimend@^1.0.6:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
+string.prototype.trimend@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz#3651b8513719e8a9f48de7f2f77640b26652b229"
+  integrity sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
 string.prototype.trimstart@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz#5466d93ba58cfa2134839f81d7f42437e8c01fef"
@@ -14753,20 +14875,22 @@ string.prototype.trimstart@^1.0.6:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
-string_decoder@^1.1.1:
+string.prototype.trimstart@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
+  integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+string_decoder@^1.1.1, string_decoder@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
   integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
   dependencies:
     safe-buffer "~5.2.0"
 
-string_decoder@~1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
-  integrity sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==
-  dependencies:
-    safe-buffer "~5.1.0"
-
 string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
@@ -14774,7 +14898,14 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -14808,7 +14939,7 @@ strip-final-newline@^3.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-3.0.0.tgz#52894c313fbff318835280aed60ff71ebf12b8fd"
   integrity sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==
 
-strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
@@ -14848,11 +14979,6 @@ stylis@4.1.3:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7"
   integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
 
-stylis@4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
-  integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
-
 sucrase@^3.20.3:
   version "3.29.0"
   resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.29.0.tgz#3207c5bc1b980fdae1e539df3f8a8a518236da7d"
@@ -15065,6 +15191,13 @@ tar-stream@^2.1.4:
     inherits "^2.0.3"
     readable-stream "^3.1.1"
 
+tdigest@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/tdigest/-/tdigest-0.1.2.tgz#96c64bac4ff10746b910b0e23b515794e12faced"
+  integrity sha512-+G0LLgjjo9BZX2MfdvPfH+MKLCrxlXSYec5DaPYP1fe6Iyhf0/fSmJ0bFiZ1F8BT6cGXl2LpltQptzjXKWEkKA==
+  dependencies:
+    bintrees "1.0.2"
+
 test-exclude@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"
@@ -15074,6 +15207,11 @@ test-exclude@^6.0.0:
     glob "^7.1.4"
     minimatch "^3.0.4"
 
+text-encoding-utf-8@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/text-encoding-utf-8/-/text-encoding-utf-8-1.0.2.tgz#585b62197b0ae437e3c7b5d0af27ac1021e10d13"
+  integrity sha512-8bw4MY9WjdsD2aMtO0OzOCY3pXGYNx2d2FfHRVUKkiCPDWjKuOlhLVASS+pD7VkLTVjW268LYJHwsnPFlBpbAg==
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@@ -15107,15 +15245,6 @@ thread-stream@^2.0.0:
   dependencies:
     real-require "^0.2.0"
 
-thriftrw@^3.5.0:
-  version "3.11.4"
-  resolved "https://registry.yarnpkg.com/thriftrw/-/thriftrw-3.11.4.tgz#84c990ee89e926631c0b475909ada44ee9249870"
-  integrity sha512-UcuBd3eanB3T10nXWRRMwfwoaC6VMk7qe3/5YIWP2Jtw+EbHqJ0p1/K3x8ixiR5dozKSSfcg1W+0e33G1Di3XA==
-  dependencies:
-    bufrw "^1.2.1"
-    error "7.0.2"
-    long "^2.4.0"
-
 through@^2.3.8:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
@@ -15180,10 +15309,10 @@ toggle-selection@^1.0.6:
   resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
   integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
 
-totalist@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
-  integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==
+totalist@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/totalist/-/totalist-3.0.1.tgz#ba3a3d600c915b1a97872348f79c127475f6acf8"
+  integrity sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==
 
 tough-cookie@^4.1.2:
   version "4.1.3"
@@ -15277,13 +15406,13 @@ ts-toolbelt@^9.6.0:
   resolved "https://registry.yarnpkg.com/ts-toolbelt/-/ts-toolbelt-9.6.0.tgz#50a25426cfed500d4a09bd1b3afb6f28879edfd5"
   integrity sha512-nsZd8ZeNUzukXPlJmTBwUAuABDe/9qtVDelJeT/qW0ow3ZS3BsQJtNkan1802aM9Uf68/Y8ljw86Hu0h5IUW3w==
 
-tsconfig-paths@^3.14.1:
-  version "3.14.1"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"
-  integrity sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==
+tsconfig-paths@^3.15.0:
+  version "3.15.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
+  integrity sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==
   dependencies:
     "@types/json5" "^0.0.29"
-    json5 "^1.0.1"
+    json5 "^1.0.2"
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
@@ -15301,7 +15430,7 @@ tslib@1.14.1, tslib@^1.8.1, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@2.4.0, tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.1, tslib@^2.4.0:
+tslib@2.4.0, tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.1:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
@@ -15311,6 +15440,11 @@ tslib@^2.3.0, tslib@^2.5.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
   integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
 
+tslib@^2.4.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.7.0.tgz#d9b40c5c40ab59e8738f297df3087bf1a2690c01"
+  integrity sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==
+
 tslib@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
@@ -15359,6 +15493,38 @@ type-fest@^0.21.3:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
   integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
 
+typed-array-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz#1867c5d83b20fcb5ccf32649e5e2fc7424474ff3"
+  integrity sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    is-typed-array "^1.1.13"
+
+typed-array-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz#d92972d3cff99a3fa2e765a28fcdc0f1d89dec67"
+  integrity sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+
+typed-array-byte-offset@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz#f9ec1acb9259f395093e4567eb3c28a580d02063"
+  integrity sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+
 typed-array-length@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.4.tgz#89d83785e5c4098bec72e08b319651f0eac9c1bb"
@@ -15368,6 +15534,18 @@ typed-array-length@^1.0.4:
     for-each "^0.3.3"
     is-typed-array "^1.1.9"
 
+typed-array-length@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.6.tgz#57155207c76e64a3457482dfdc1c9d1d3c4c73a3"
+  integrity sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+    possible-typed-array-names "^1.0.0"
+
 types-ramda@^0.29.5:
   version "0.29.5"
   resolved "https://registry.yarnpkg.com/types-ramda/-/types-ramda-0.29.5.tgz#1cb0488d39eb72723a8f95af9b6dfe483e4f34a7"
@@ -15400,7 +15578,14 @@ ufo@^1.3.0, ufo@^1.3.1, ufo@^1.3.2:
   resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.3.2.tgz#c7d719d0628a1c80c006d2240e0d169f6e3c0496"
   integrity sha512-o+ORpgGwaYQXgqGDwd+hkS4PuZ3QnmqMMxRuajK/a38L6fTpcE5GPIfrf+L/KemFzfUpeUQc1rRS1iDBozvnFA==
 
-uint8arrays@^3.0.0, uint8arrays@^3.1.0:
+uint8arrays@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/uint8arrays/-/uint8arrays-3.1.0.tgz#8186b8eafce68f28bd29bd29d683a311778901e2"
+  integrity sha512-ei5rfKtoRO8OyOIor2Rz5fhzjThwIHJZ3uyDPnDHTXbP0aMQ1RN/6AI5B5d9dBxJOU+BvOAk7ZQ1xphsX8Lrog==
+  dependencies:
+    multiformats "^9.4.2"
+
+uint8arrays@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/uint8arrays/-/uint8arrays-3.1.1.tgz#2d8762acce159ccd9936057572dade9459f65ae0"
   integrity sha512-+QJa8QRnbdXVpHYjLoTpJIdCTiw9Ir62nocClWuXIq2JIh4Uta0cQsTSpFL678p2CN8B+XSApwcU+pQEqVpKWg==
@@ -15428,9 +15613,9 @@ undici-types@~5.26.4:
   integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
 
 undici@^5.24.0:
-  version "5.26.3"
-  resolved "https://registry.yarnpkg.com/undici/-/undici-5.26.3.tgz#ab3527b3d5bb25b12f898dfd22165d472dd71b79"
-  integrity sha512-H7n2zmKEWgOllKkIUkLvFmsJQj062lSm3uA4EYApG8gLuiOM0/go9bIoC3HVaSnfg4xunowDE2i9p8drkXuvDw==
+  version "5.28.4"
+  resolved "https://registry.yarnpkg.com/undici/-/undici-5.28.4.tgz#6b280408edb6a1a604a9b20340f45b422e373068"
+  integrity sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==
   dependencies:
     "@fastify/busboy" "^2.0.0"
 
@@ -15445,11 +15630,6 @@ unenv@^1.7.4:
     node-fetch-native "^1.4.1"
     pathe "^1.1.1"
 
-unfetch@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.2.0.tgz#7e21b0ef7d363d8d9af0fb929a5555f6ef97a3be"
-  integrity sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==
-
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
@@ -15575,10 +15755,10 @@ use-sync-external-store@1.2.0, use-sync-external-store@^1.0.0:
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
 
-utf-8-validate@^6.0.3:
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/utf-8-validate/-/utf-8-validate-6.0.3.tgz#7d8c936d854e86b24d1d655f138ee27d2636d777"
-  integrity sha512-uIuGf9TWQ/y+0Lp+KGZCMuJWc3N9BHA+l/UmHd/oUHwJJDeysyTRxNQVkbzsIWfGFbRe3OcgML/i0mvVRPOyDA==
+utf-8-validate@^5.0.2:
+  version "5.0.10"
+  resolved "https://registry.yarnpkg.com/utf-8-validate/-/utf-8-validate-5.0.10.tgz#d7d10ea39318171ca982718b6b96a8d2442571a2"
+  integrity sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==
   dependencies:
     node-gyp-build "^4.3.0"
 
@@ -15603,6 +15783,11 @@ uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+uuid@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
+  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
+
 v8-compile-cache-lib@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
@@ -15617,6 +15802,11 @@ v8-to-istanbul@^9.0.1:
     "@types/istanbul-lib-coverage" "^2.0.1"
     convert-source-map "^1.6.0"
 
+valibot@0.38.0:
+  version "0.38.0"
+  resolved "https://registry.yarnpkg.com/valibot/-/valibot-0.38.0.tgz#2d035d2a5bd36e8ea8b48b56d44552ace1a7616f"
+  integrity sha512-RCJa0fetnzp+h+KN9BdgYOgtsMAG9bfoJ9JSjIhFHobKWVWyzM3jjaeNTdpFK9tQtf3q1sguXeERJ/LcmdFE7w==
+
 valtio@1.11.2:
   version "1.11.2"
   resolved "https://registry.yarnpkg.com/valtio/-/valtio-1.11.2.tgz#b8049c02dfe65620635d23ebae9121a741bb6530"
@@ -15625,36 +15815,22 @@ valtio@1.11.2:
     proxy-compare "2.5.1"
     use-sync-external-store "1.2.0"
 
-viem@2.9.6:
-  version "2.9.6"
-  resolved "https://registry.yarnpkg.com/viem/-/viem-2.9.6.tgz#66819684e878b6ea659ad9c49a0a864512859190"
-  integrity sha512-VVFWjGQei2wnWTvAB/xrIf22m6flCwxeBr8LnwejXMTSSi1EORWEswrw2lfKTmw3TlRPSG4uSiQMa/d0l0DKRg==
+viem@2.21.5, viem@^2.1.1:
+  version "2.21.5"
+  resolved "https://registry.yarnpkg.com/viem/-/viem-2.21.5.tgz#07db65f047f2c24732ccf92bb96933ea8e8048b9"
+  integrity sha512-MFuoeGA8hRJJ0CknSuKYZjVaxSy5hyzu9MCArOANz3Iq5RITBJNIhM+m6TNvO9I2AxCSF3+PZObjbrLVg7cX2w==
   dependencies:
     "@adraffy/ens-normalize" "1.10.0"
-    "@noble/curves" "1.2.0"
-    "@noble/hashes" "1.3.2"
-    "@scure/bip32" "1.3.2"
-    "@scure/bip39" "1.2.1"
-    abitype "1.0.0"
-    isows "1.0.3"
-    ws "8.13.0"
-
-viem@^1.0.0:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/viem/-/viem-1.2.5.tgz#e9f80a57b80d8749624b4b31a98041549a25c5ad"
-  integrity sha512-AeQ1hiyPKXnWb/KTsxRLt7KZUmLgd6NTCe/GyQf+8TZO7ndXmSZf88swE+60v1bLT+FDUWXufKGJ2oNT129wXw==
-  dependencies:
-    "@adraffy/ens-normalize" "1.9.0"
-    "@noble/curves" "1.0.0"
-    "@noble/hashes" "1.3.0"
-    "@scure/bip32" "1.3.0"
-    "@scure/bip39" "1.2.0"
-    "@wagmi/chains" "1.2.0"
-    abitype "0.8.11"
-    isomorphic-ws "5.0.0"
-    ws "8.12.0"
-
-viem@^1.1.4, viem@^1.20.3:
+    "@noble/curves" "1.4.0"
+    "@noble/hashes" "1.4.0"
+    "@scure/bip32" "1.4.0"
+    "@scure/bip39" "1.4.0"
+    abitype "1.0.5"
+    isows "1.0.4"
+    webauthn-p256 "0.0.5"
+    ws "8.17.1"
+
+viem@^1.20.3:
   version "1.21.4"
   resolved "https://registry.yarnpkg.com/viem/-/viem-1.21.4.tgz#883760e9222540a5a7e0339809202b45fe6a842d"
   integrity sha512-BNVYdSaUjeS2zKQgPs+49e5JKocfo60Ib2yiXOWBT6LuVxY1I/6fFX3waEtpXvL1Xn4qu+BVitVtMh9lyThyhQ==
@@ -15687,9 +15863,9 @@ vite-tsconfig-paths@^3.5.2:
     tsconfig-paths "^4.0.0"
 
 vite@^4.4.12:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.2.tgz#d6ea8610e099851dad8c7371599969e0f8b97e82"
-  integrity sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.3.tgz#d88a4529ea58bae97294c7e2e6f0eab39a50fb1a"
+  integrity sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==
   dependencies:
     esbuild "^0.18.10"
     postcss "^8.4.27"
@@ -15697,27 +15873,11 @@ vite@^4.4.12:
   optionalDependencies:
     fsevents "~2.3.2"
 
-void-elements@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
-  integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
-
 vscode-languageserver-types@^3.17.1:
   version "3.17.3"
   resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.17.3.tgz#72d05e47b73be93acb84d6e311b5786390f13f64"
   integrity sha512-SYU4z1dL0PyIMd4Vj8YOqFvHu7Hz/enbWtpfnVbJHU4Nd1YNYx8u0ennumc6h48GQNeOLxmwySmnADouT/AuZA==
 
-vue@>=3:
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.11.tgz#898d97025f73cdb5fc4e3ae3fd07a54615232140"
-  integrity sha512-d4oBctG92CRO1cQfVBZp6WJAs0n8AK4Xf5fNjQCBeKCvMI1efGQ5E3Alt1slFJS9fZuPcFoiAiqFvQlv1X7t/w==
-  dependencies:
-    "@vue/compiler-dom" "3.3.11"
-    "@vue/compiler-sfc" "3.3.11"
-    "@vue/runtime-dom" "3.3.11"
-    "@vue/server-renderer" "3.3.11"
-    "@vue/shared" "3.3.11"
-
 w3c-xmlserializer@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-3.0.0.tgz#06cdc3eefb7e4d0b20a560a5a3aeb0d2d9a65923"
@@ -15725,13 +15885,13 @@ w3c-xmlserializer@^3.0.0:
   dependencies:
     xml-name-validator "^4.0.0"
 
-wagmi@2.5.16:
-  version "2.5.16"
-  resolved "https://registry.yarnpkg.com/wagmi/-/wagmi-2.5.16.tgz#42e4be44dd8e96deda10d953b91d13ee3a512758"
-  integrity sha512-nVSx65kGYcjvELJKoe+l1E78zHqtYwfg0nf2HuZkt1gVvqguo+hIQe534hSf1m+ivdtb0MPlwNCvj6K4QJ7FTw==
+wagmi@2.12.10:
+  version "2.12.10"
+  resolved "https://registry.yarnpkg.com/wagmi/-/wagmi-2.12.10.tgz#e212db1f86bf5522063494244e19676877dc6ccd"
+  integrity sha512-aSG0fW+Kft62syxAWkmSaMku5CZRW6Q2lsu64bLvLLVyZgZMt8+qQRdYk8WcFFdBzivkuDMRMREMxw7dwdImkw==
   dependencies:
-    "@wagmi/connectors" "4.1.22"
-    "@wagmi/core" "2.6.13"
+    "@wagmi/connectors" "5.1.10"
+    "@wagmi/core" "2.13.5"
     use-sync-external-store "1.2.0"
 
 walker@^1.0.8:
@@ -15741,14 +15901,6 @@ walker@^1.0.8:
   dependencies:
     makeerror "1.0.12"
 
-watchpack@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
-  integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==
-  dependencies:
-    glob-to-regexp "^0.4.1"
-    graceful-fs "^4.1.2"
-
 web-streams-polyfill@^3.0.3:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz#71c2718c52b45fd49dbeee88634b3a60ceab42a6"
@@ -15759,6 +15911,14 @@ web-tree-sitter@=0.20.3:
   resolved "https://registry.yarnpkg.com/web-tree-sitter/-/web-tree-sitter-0.20.3.tgz#3dd17b283ad63b1d8c07c5ea814f0fefb2b1f776"
   integrity sha512-zKGJW9r23y3BcJusbgvnOH2OYAW40MXAOi9bi3Gcc7T4Gms9WWgXF8m6adsJWpGJEhgOzCrfiz1IzKowJWrtYw==
 
+webauthn-p256@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/webauthn-p256/-/webauthn-p256-0.0.5.tgz#0baebd2ba8a414b21cc09c0d40f9dd0be96a06bd"
+  integrity sha512-drMGNWKdaixZNobeORVIqq7k5DsRC9FnG201K2QjeOoQLmtSDaSsVZdkg6n5jUALJKcAG++zBPJXmv6hy0nWFg==
+  dependencies:
+    "@noble/curves" "^1.4.0"
+    "@noble/hashes" "^1.4.0"
+
 webextension-polyfill-ts@^0.22.0:
   version "0.22.0"
   resolved "https://registry.yarnpkg.com/webextension-polyfill-ts/-/webextension-polyfill-ts-0.22.0.tgz#86cfd7bab4d9d779d98c8340983f4b691b2343f3"
@@ -15773,6 +15933,16 @@ webextension-polyfill-ts@^0.25.0:
   dependencies:
     webextension-polyfill "^0.7.0"
 
+"webextension-polyfill@>=0.10.0 <1.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/webextension-polyfill/-/webextension-polyfill-0.12.0.tgz#f62c57d2cd42524e9fbdcee494c034cae34a3d69"
+  integrity sha512-97TBmpoWJEE+3nFBQ4VocyCdLKfw54rFaJ6EVQYLBCXqCIpLSZkwGgASpv4oPt9gdKCJ80RJlcmNzNn008Ag6Q==
+
+webextension-polyfill@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/webextension-polyfill/-/webextension-polyfill-0.10.0.tgz#ccb28101c910ba8cf955f7e6a263e662d744dbb8"
+  integrity sha512-c5s35LgVa5tFaHhrZDnr3FpQpjj1BB+RXhLTYUxGqBVN460HkbM8TBtEqdXWbpTKfzwCcjAZVF7zXCYSKtcp9g==
+
 webextension-polyfill@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/webextension-polyfill/-/webextension-polyfill-0.7.0.tgz#0df1120ff0266056319ce1a622b09ad8d4a56505"
@@ -15788,19 +15958,23 @@ webidl-conversions@^7.0.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
   integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
 
-webpack-bundle-analyzer@4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.7.0.tgz#33c1c485a7fcae8627c547b5c3328b46de733c66"
-  integrity sha512-j9b8ynpJS4K+zfO5GGwsAcQX4ZHpWV+yRiHDiL+bE0XHJ8NiPYLTNVQdlFYWxtpg9lfAQNlwJg16J9AJtFSXRg==
+webpack-bundle-analyzer@4.10.1:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.1.tgz#84b7473b630a7b8c21c741f81d8fe4593208b454"
+  integrity sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==
   dependencies:
+    "@discoveryjs/json-ext" "0.5.7"
     acorn "^8.0.4"
     acorn-walk "^8.0.0"
-    chalk "^4.1.0"
     commander "^7.2.0"
+    debounce "^1.2.1"
+    escape-string-regexp "^4.0.0"
     gzip-size "^6.0.0"
-    lodash "^4.17.20"
+    html-escaper "^2.0.2"
+    is-plain-object "^5.0.0"
     opener "^1.5.2"
-    sirv "^1.0.7"
+    picocolors "^1.0.0"
+    sirv "^2.0.3"
     ws "^7.3.1"
 
 whatwg-encoding@^2.0.0:
@@ -15842,6 +16016,24 @@ which-boxed-primitive@^1.0.2:
     is-string "^1.0.5"
     is-symbol "^1.0.3"
 
+which-builtin-type@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.1.3.tgz#b1b8443707cc58b6e9bf98d32110ff0c2cbd029b"
+  integrity sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==
+  dependencies:
+    function.prototype.name "^1.1.5"
+    has-tostringtag "^1.0.0"
+    is-async-function "^2.0.0"
+    is-date-object "^1.0.5"
+    is-finalizationregistry "^1.0.2"
+    is-generator-function "^1.0.10"
+    is-regex "^1.1.4"
+    is-weakref "^1.0.2"
+    isarray "^2.0.5"
+    which-boxed-primitive "^1.0.2"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.9"
+
 which-collection@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
@@ -15857,6 +16049,17 @@ which-module@^2.0.0:
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q==
 
+which-typed-array@^1.1.14, which-typed-array@^1.1.15:
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.15.tgz#264859e9b11a649b388bfaaf4f767df1f779b38d"
+  integrity sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-tostringtag "^1.0.2"
+
 which-typed-array@^1.1.2, which-typed-array@^1.1.8, which-typed-array@^1.1.9:
   version "1.1.9"
   resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.9.tgz#307cf898025848cf995e795e8423c7f337efbde6"
@@ -15876,12 +16079,12 @@ which@^2.0.1, which@^2.0.2:
   dependencies:
     isexe "^2.0.0"
 
-word-wrap@^1.2.3, word-wrap@~1.2.3:
+word-wrap@^1.2.5, word-wrap@~1.2.3:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -15899,6 +16102,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
@@ -15921,22 +16133,27 @@ write-file-atomic@^4.0.1:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.7"
 
-ws@8.12.0:
-  version "8.12.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.12.0.tgz#485074cc392689da78e1828a9ff23585e06cddd8"
-  integrity sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==
-
 ws@8.13.0:
   version "8.13.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"
   integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==
 
+ws@8.17.1:
+  version "8.17.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.1.tgz#9293da530bb548febc95371d90f9c878727d919b"
+  integrity sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==
+
 ws@^7.3.1, ws@^7.5.1:
-  version "7.5.9"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
-  integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
+  version "7.5.10"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.10.tgz#58b5c20dc281633f6c19113f39b349bd8bd558d9"
+  integrity sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==
+
+ws@^8.17.1, ws@^8.9.0:
+  version "8.18.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.0.tgz#0d7505a6eafe2b0e712d232b42279f53bc289bbc"
+  integrity sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==
 
-ws@^8.11.0, ws@^8.9.0, ws@~8.11.0:
+ws@~8.11.0:
   version "8.11.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"
   integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==
@@ -15968,11 +16185,6 @@ xmlhttprequest-ssl@~2.0.0:
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"
   integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
 
-xorshift@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/xorshift/-/xorshift-1.2.0.tgz#30a4cdd8e9f8d09d959ed2a88c42a09c660e8148"
-  integrity sha512-iYgNnGyeeJ4t6U11NpA/QiKy+PXn5Aa3Azg5qkwIFz1tBLllQrjjsk9yzD7IAK0naNU4JxdeDgqW9ov4u/hc4g==
-
 xss@^1.0.14:
   version "1.0.14"
   resolved "https://registry.yarnpkg.com/xss/-/xss-1.0.14.tgz#4f3efbde75ad0d82e9921cc3c95e6590dd336694"
@@ -15981,7 +16193,7 @@ xss@^1.0.14:
     commander "^2.20.3"
     cssfilter "0.0.10"
 
-xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.0:
+xtend@^4.0.0, xtend@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==