diff --git a/configs/app/apis.ts b/configs/app/apis.ts
index 071bb22bf8..ea919451ea 100644
--- a/configs/app/apis.ts
+++ b/configs/app/apis.ts
@@ -19,6 +19,10 @@ export interface ApiPropsFull extends ApiPropsBase {
 
 const generalApi = (() => {
   const apiHost = getEnvValue('NEXT_PUBLIC_API_HOST');
+  if (!apiHost) {
+    return;
+  }
+
   const apiSchema = getEnvValue('NEXT_PUBLIC_API_PROTOCOL') || 'https';
   const apiPort = getEnvValue('NEXT_PUBLIC_API_PORT');
   const apiEndpoint = [
@@ -101,9 +105,10 @@ const rewardsApi = (() => {
   });
 })();
 
-const multichainApi = (() => {
+const multichainAggregatorApi = (() => {
   const apiHost = getEnvValue('NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_API_HOST');
-  if (!apiHost) {
+  const cluster = getEnvValue('NEXT_PUBLIC_MULTICHAIN_CLUSTER');
+  if (!apiHost || !cluster) {
     return;
   }
 
@@ -113,12 +118,22 @@ const multichainApi = (() => {
     return Object.freeze({
       endpoint: apiHost,
       socketEndpoint: `wss://${ url.host }`,
-      basePath: stripTrailingSlash(getEnvValue('NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_BASE_PATH') || ''),
+      basePath: `/api/v1/clusters/${ cluster }`,
     });
   } catch (error) {
     return;
   }
+})();
 
+const multichainStatsApi = (() => {
+  const apiHost = getEnvValue('NEXT_PUBLIC_MULTICHAIN_STATS_API_HOST');
+  if (!apiHost) {
+    return;
+  }
+
+  return Object.freeze({
+    endpoint: apiHost,
+  });
 })();
 
 const statsApi = (() => {
@@ -197,7 +212,7 @@ const zetachainApi = (() => {
 })();
 
 export type Apis = {
-  general: ApiPropsFull;
+  general: ApiPropsFull | undefined;
 } & Partial<Record<Exclude<ApiName, 'general'>, ApiPropsBase>>;
 
 const apis: Apis = Object.freeze({
@@ -207,7 +222,8 @@ const apis: Apis = Object.freeze({
   clusters: clustersApi,
   contractInfo: contractInfoApi,
   metadata: metadataApi,
-  multichain: multichainApi,
+  multichainAggregator: multichainAggregatorApi,
+  multichainStats: multichainStatsApi,
   rewards: rewardsApi,
   stats: statsApi,
   tac: tacApi,
diff --git a/configs/app/features/opSuperchain.ts b/configs/app/features/opSuperchain.ts
index f46e64d19c..9251ff4bce 100644
--- a/configs/app/features/opSuperchain.ts
+++ b/configs/app/features/opSuperchain.ts
@@ -3,15 +3,22 @@ import type { Feature } from './types';
 import apis from '../apis';
 import { getEnvValue } from '../utils';
 
-const isEnabled = getEnvValue('NEXT_PUBLIC_OP_SUPERCHAIN_ENABLED') === 'true';
+const isEnabled = getEnvValue('NEXT_PUBLIC_MULTICHAIN_ENABLED') === 'true';
+const cluster = getEnvValue('NEXT_PUBLIC_MULTICHAIN_CLUSTER');
 
+// The feature was initially implemented for OP Superchain interop cluster
+// but later the project was abandoned by Optimism team.
+// Now it serves mainly for demo purposes of multichain explorer possible functionalities.
+// So for now I have kept all naming in the code as it was initially done
+// and later it could be changed when specific multichain cluster will be implemented.
 const title = 'OP Superchain interop explorer';
 
-const config: Feature<{ }> = (() => {
-  if (apis.multichain && isEnabled) {
+const config: Feature<{ cluster: string }> = (() => {
+  if (apis.multichainAggregator && apis.multichainStats && isEnabled && cluster) {
     return Object.freeze({
       title,
       isEnabled: true,
+      cluster,
     });
   }
 
diff --git a/configs/app/features/stats.ts b/configs/app/features/stats.ts
index 58809dd83a..0254a8dfdd 100644
--- a/configs/app/features/stats.ts
+++ b/configs/app/features/stats.ts
@@ -1,11 +1,12 @@
 import type { Feature } from './types';
 
 import apis from '../apis';
+import opSuperchain from './opSuperchain';
 
 const title = 'Blockchain statistics';
 
 const config: Feature<{}> = (() => {
-  if (apis.stats) {
+  if (apis.stats || opSuperchain.isEnabled) {
     return Object.freeze({
       title,
       isEnabled: true,
diff --git a/configs/envs/.env.optimism_superchain b/configs/envs/.env.optimism_superchain
index 805ebb5619..7c7ac7642a 100644
--- a/configs/envs/.env.optimism_superchain
+++ b/configs/envs/.env.optimism_superchain
@@ -8,24 +8,16 @@ NEXT_PUBLIC_APP_HOST=localhost
 NEXT_PUBLIC_APP_PORT=3000
 NEXT_PUBLIC_APP_ENV=development
 
-# Instance ENVs
-# TODO @tom2drum make these envs optional for multichain (adjust docs)
-NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
-NEXT_PUBLIC_API_BASE_PATH=/
-NEXT_PUBLIC_API_HOST=localhost
-NEXT_PUBLIC_API_PORT=3001
-NEXT_PUBLIC_API_PROTOCOL=http
-NEXT_PUBLIC_NETWORK_ID=10
-
-# TODO @tom2drum New ENVs (add to docs)
 NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_API_HOST=https://multichain-aggregator.k8s-dev.blockscout.com
-NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_BASE_PATH=/api/v1/clusters/interop
-NEXT_PUBLIC_OP_SUPERCHAIN_ENABLED=true
+NEXT_PUBLIC_MULTICHAIN_STATS_API_HOST=http://multichain-search-stats.k8s-dev.blockscout.com
+NEXT_PUBLIC_MULTICHAIN_ENABLED=true
+NEXT_PUBLIC_MULTICHAIN_CLUSTER=interop
 
-# TODO @tom2drum remove this
-SKIP_ENVS_VALIDATION=true
+SKIP_ENVS_VALIDATION=false
 
-NEXT_PUBLIC_API_SPEC_URL=none
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cap']
+NEXT_PUBLIC_HOMEPAGE_STATS=['total_txs','wallet_addresses']
+NEXT_PUBLIC_API_DOCS_TABS=[]
 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_HOMEPAGE_CHARTS=['daily_txs', 'coin_price', 'market_cap', 'secondary_coin_price']
@@ -38,7 +30,6 @@ NEXT_PUBLIC_NETWORK_NAME=OP Superchain
 NEXT_PUBLIC_NETWORK_SHORT_NAME=OP Superchain
 NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/optimism-mainnet.png
 NEXT_PUBLIC_GAS_TRACKER_ENABLED=false
-NEXT_PUBLIC_NAVIGATION_HIDDEN_LINKS=['eth_rpc_api','rpc_api']
 NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS=true
 NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS=true
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=false
diff --git a/configs/envs/.env.pw b/configs/envs/.env.pw
index 45183175b1..ace1fd3f21 100644
--- a/configs/envs/.env.pw
+++ b/configs/envs/.env.pw
@@ -49,10 +49,12 @@ 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_REWARDS_SERVICE_API_HOST=http://localhost:3009
-NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_API_HOST=http://localhost:3010
 NEXT_PUBLIC_TAC_OPERATION_LIFECYCLE_API_HOST=http://localhost:3100
 NEXT_PUBLIC_USER_OPS_INDEXER_API_HOST=http://localhost:3110
 NEXT_PUBLIC_ZETACHAIN_SERVICE_API_HOST=http://localhost:3111
+NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_API_HOST=http://localhost:3012
+NEXT_PUBLIC_MULTICHAIN_CLUSTER=test
+NEXT_PUBLIC_MULTICHAIN_STATS_API_HOST=http://localhost:3013
 NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=xxx
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=xxx
 NEXT_PUBLIC_VIEWS_ADDRESS_FORMAT=['base16','bech32']
diff --git a/configs/essential-dapps-chains/index.ts b/configs/essential-dapps-chains/index.ts
index 15ef4df768..133c6513d3 100644
--- a/configs/essential-dapps-chains/index.ts
+++ b/configs/essential-dapps-chains/index.ts
@@ -1,11 +1,11 @@
-import type { MultichainConfig } from 'types/multichain';
+import type { EssentialDappsChainConfig } from 'types/client/marketplace';
 
 import config from 'configs/app';
 import { isBrowser } from 'toolkit/utils/isBrowser';
 
 const marketplaceFeature = config.features.marketplace;
 
-const essentialDappsChains: () => MultichainConfig | undefined = () => {
+const essentialDappsChains: () => { chains: Array<EssentialDappsChainConfig> } | undefined = () => {
   if (!marketplaceFeature.isEnabled || !marketplaceFeature.essentialDapps) {
     return;
   }
diff --git a/deploy/tools/envs-validator/index.ts b/deploy/tools/envs-validator/index.ts
index 89d2dae590..7adc69c22f 100644
--- a/deploy/tools/envs-validator/index.ts
+++ b/deploy/tools/envs-validator/index.ts
@@ -5,6 +5,7 @@ import type { ValidationError } from 'yup';
 
 import { buildExternalAssetFilePath } from '../../../configs/app/utils';
 import schema from './schema';
+import schemaMultichain from './schema_multichain';
 
 const silent = process.argv.includes('--silent');
 
@@ -51,7 +52,12 @@ async function validateEnvs(appEnvs: Record<string, string>) {
       }
     }
 
-    await schema.validate(appEnvs, { stripUnknown: false, abortEarly: false });
+    if (appEnvs.NEXT_PUBLIC_MULTICHAIN_ENABLED === 'true') {
+      await schemaMultichain.validate(appEnvs, { stripUnknown: false, abortEarly: false });
+    } else {
+      await schema.validate(appEnvs, { stripUnknown: false, abortEarly: false });
+    }
+
     !silent && console.log('👍 All good!');
   } catch (_error) {
     if (typeof _error === 'object' && _error !== null && 'errors' in _error) {
diff --git a/deploy/tools/envs-validator/schema.ts b/deploy/tools/envs-validator/schema.ts
index 72079127d4..c748fcb18f 100644
--- a/deploy/tools/envs-validator/schema.ts
+++ b/deploy/tools/envs-validator/schema.ts
@@ -9,12 +9,8 @@ declare module 'yup' {
 
 import * as yup from 'yup';
 
-import type { AdButlerConfig } from '../../../types/client/adButlerConfig';
 import type { AddressProfileAPIConfig } from '../../../types/client/addressProfileAPIConfig';
-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 { SMART_CONTRACT_EXTRA_VERIFICATION_METHODS, SMART_CONTRACT_LANGUAGE_FILTERS, 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';
@@ -22,7 +18,6 @@ import type { MarketplaceAppBase, MarketplaceAppSocialInfo, EssentialDappsConfig
 import type { MultichainProviderConfig } from '../../../types/client/multichainProviderConfig';
 import type { ApiDocsTabId } from '../../../types/views/apiDocs';
 import { API_DOCS_TABS } from '../../../types/views/apiDocs';
-import type { NavItemExternal, NavigationLayout, NavigationPromoBannerConfig } 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';
@@ -30,12 +25,7 @@ import { VALIDATORS_CHAIN_TYPE } from '../../../types/client/validators';
 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 { 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 NetworkVerificationTypeEnvs, type NetworkExplorer } from '../../../types/networks';
 import type { AddressFormat, AddressViewId, Address3rdPartyWidget } from '../../../types/views/address';
 import { ADDRESS_FORMATS, ADDRESS_VIEWS_IDS, IDENTICON_TYPES, ADDRESS_3RD_PARTY_WIDGET_PAGES } from '../../../types/views/address';
 import { BLOCK_FIELDS_IDS } from '../../../types/views/block';
@@ -48,38 +38,11 @@ import type { TxExternalTxsConfig } from '../../../types/client/externalTxsConfi
 
 import { replaceQuotes } from '../../../configs/app/utils';
 import * as regexp from '../../../toolkit/utils/regexp';
-import type { IconName } from '../../../ui/shared/IconSvg';
-import type { CrossChainInfo } from '../../../types/client/crossChainInfo';
-
-const protocols = [ 'http', 'https' ];
-
-const urlTest: yup.TestConfig = {
-  name: 'url',
-  test: (value: unknown) => {
-    if (!value) {
-      return true;
-    }
-
-    try {
-      if (typeof value === 'string') {
-        new URL(value);
-        return true;
-      }
-    } catch (error) {}
-
-    return false;
-  },
-  message: '${path} is not a valid URL',
-  exclusive: true,
-};
-
-const getYupValidationErrorMessage = (error: unknown) =>
-  typeof error === 'object' &&
-  error !== null &&
-  'errors' in error &&
-  Array.isArray(error.errors) ?
-    error.errors.join(', ') :
-    '';
+import type { ZetaChainChainsConfigEnv } from '../../../types/client/zetaChain';
+import { urlTest, protocols, getYupValidationErrorMessage } from './utils';
+import * as uiSchemas from './schemas/ui';
+import * as featuresSchemas from './schemas/features';
+import servicesSchemas from './schemas/services';
 
 const marketplaceAppSchema: yup.ObjectSchema<MarketplaceAppBase & MarketplaceAppSocialInfo> = yup
   .object({
@@ -452,20 +415,6 @@ const apiDocsScheme = yup
       .test(urlTest),
   });
 
-const userOpsSchema = yup
-  .object()
-  .shape({
-    NEXT_PUBLIC_HAS_USER_OPS: yup.boolean(),
-    NEXT_PUBLIC_USER_OPS_INDEXER_API_HOST: yup
-      .string()
-      .test(urlTest)
-      .when('NEXT_PUBLIC_HAS_USER_OPS', {
-        is: (value: boolean) => value,
-        then: (schema) => schema,
-        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_USER_OPS_INDEXER_API_HOST can only be used if NEXT_PUBLIC_HAS_USER_OPS is set to \'true\''),
-      }),
-  });
-
 const mixpanelSchema = yup
   .object()
   .shape({
@@ -485,111 +434,12 @@ const mixpanelSchema = yup
       }),
   });
 
-const adButlerConfigSchema = yup
-  .object<AdButlerConfig>()
-  .transform(replaceQuotes)
-  .json()
-  .when('NEXT_PUBLIC_AD_BANNER_PROVIDER', {
-    is: (value: AdBannerProviders) => value === 'adbutler',
-    then: (schema) => schema
-      .shape({
-        id: yup.string().required(),
-        width: yup.number().positive().required(),
-        height: yup.number().positive().required(),
-      })
-      .required(),
-  })
-  .when('NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER', {
-    is: (value: AdBannerProviders) => value === 'adbutler',
-    then: (schema) => schema
-      .shape({
-        id: yup.string().required(),
-        width: yup.number().positive().required(),
-        height: yup.number().positive().required(),
-      })
-      .required(),
-  });
-
-const adsBannerSchema = yup
-  .object()
-  .shape({
-    NEXT_PUBLIC_AD_BANNER_PROVIDER: yup.string<AdBannerProviders>().oneOf(SUPPORTED_AD_BANNER_PROVIDERS),
-    NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER: yup.string<AdBannerAdditionalProviders>().oneOf(SUPPORTED_AD_BANNER_ADDITIONAL_PROVIDERS),
-    NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP: adButlerConfigSchema,
-    NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE: adButlerConfigSchema,
-    NEXT_PUBLIC_AD_BANNER_ENABLE_SPECIFY: yup.boolean(),
-  });
-
 const accountSchema = yup
   .object()
   .shape({
     NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED: yup.boolean(),
   });
 
-const featuredNetworkSchema: yup.ObjectSchema<FeaturedNetwork> = yup
-  .object()
-  .shape({
-    title: yup.string().required(),
-    url: yup.string().test(urlTest).required(),
-    group: yup.string().oneOf(NETWORK_GROUPS).required(),
-    icon: yup.string().test(urlTest),
-    isActive: yup.boolean(),
-    invertIconInDarkMode: yup.boolean(),
-  });
-
-const navItemExternalSchema: yup.ObjectSchema<NavItemExternal> = yup
-  .object({
-    text: yup.string().required(),
-    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,
-    }),
-    search: yup.object({
-      border_width: yup.array().max(2).of(yup.string()),
-    }),
-  });
-
-const footerLinkSchema: yup.ObjectSchema<CustomLink> = yup
-  .object({
-    text: yup.string().required(),
-    url: yup.string().test(urlTest).required(),
-    iconUrl: yup.array().of(yup.string().required().test(urlTest)),
-  });
-
-const footerLinkGroupSchema: yup.ObjectSchema<CustomLinksGroup> = yup
-  .object({
-    title: yup.string().required(),
-    links: yup
-      .array()
-      .of(footerLinkSchema)
-      .required(),
-  });
-
 const networkExplorerSchema: yup.ObjectSchema<NetworkExplorer> = yup
   .object({
     title: yup.string().required(),
@@ -675,17 +525,6 @@ const addressMetadataSchema = yup
       }),
   });
 
-const deFiDropdownItemSchema: yup.ObjectSchema<DeFiDropdownItem> = yup
-  .object({
-    text: yup.string().required(),
-    icon: yup.string<IconName>(),
-    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 multichainProviderConfigSchema: yup.ObjectSchema<MultichainProviderConfig> = yup.object({
   name: yup.string().required(),
   url_template: yup.string().required(),
@@ -693,7 +532,7 @@ const multichainProviderConfigSchema: yup.ObjectSchema<MultichainProviderConfig>
   dapp_id: yup.string(),
 });
 
-const zetaChainCCTXConfigSchema: yup.ObjectSchema<CrossChainInfo> = yup.object({
+const zetaChainCCTXConfigSchema: yup.ObjectSchema<ZetaChainChainsConfigEnv> = yup.object({
   chain_id: yup.number().required(),
   chain_name: yup.string().required(),
   chain_logo: yup.string(),
@@ -865,129 +704,6 @@ const schema = yup
     NEXT_PUBLIC_API_BASE_PATH: yup.string(),
     NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL: yup.string().oneOf([ 'ws', 'wss' ]),
 
-    // 4. UI configuration
-    //   a. homepage
-    NEXT_PUBLIC_HOMEPAGE_CHARTS: yup
-      .array()
-      .transform(replaceQuotes)
-      .json()
-      .of(yup.string<ChainIndicatorId>().oneOf(CHAIN_INDICATOR_IDS))
-      .test(
-        'stats-api-required',
-        'NEXT_PUBLIC_STATS_API_HOST is required when daily_operational_txs is enabled in NEXT_PUBLIC_HOMEPAGE_CHARTS',
-        function(value) {
-          // daily_operational_txs is presented only in stats microservice
-          if (value?.includes('daily_operational_txs')) {
-            return Boolean(this.parent.NEXT_PUBLIC_STATS_API_HOST);
-          }
-          return true;
-        }
-      ),
-    NEXT_PUBLIC_HOMEPAGE_STATS: yup
-      .array()
-      .transform(replaceQuotes)
-      .json()
-      .of(yup.string<HomeStatsWidgetId>().oneOf(HOME_STATS_WIDGET_IDS))
-      .test(
-        'stats-api-required',
-        'NEXT_PUBLIC_STATS_API_HOST is required when total_operational_txs is enabled in NEXT_PUBLIC_HOMEPAGE_STATS',
-        function(value) {
-          // total_operational_txs is presented only in stats microservice
-          if (value?.includes('total_operational_txs')) {
-            return Boolean(this.parent.NEXT_PUBLIC_STATS_API_HOST);
-          }
-          return true;
-        }
-      ),
-    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 = getYupValidationErrorMessage(error);
-            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
-      .array()
-      .json()
-      .of(featuredNetworkSchema),
-    NEXT_PUBLIC_FEATURED_NETWORKS_ALL_LINK: yup
-      .string()
-      .when('NEXT_PUBLIC_FEATURED_NETWORKS', {
-        is: (value: Array<unknown> | undefined) => value && value.length > 0,
-        then: (schema) => schema.test(urlTest),
-        otherwise: (schema) => schema.max(-1,  'NEXT_PUBLIC_FEATURED_NETWORKS_ALL_LINK can only be set when NEXT_PUBLIC_FEATURED_NETWORKS is configured'),
-      }),
-      NEXT_PUBLIC_FEATURED_NETWORKS_MODE: yup
-      .string()
-      .when('NEXT_PUBLIC_FEATURED_NETWORKS', {
-        is: (value: Array<unknown> | undefined) => value && value.length > 0,
-        then: (schema) => schema.oneOf([ 'tabs', 'list' ]),
-        otherwise: (schema) => schema.max(-1,  'NEXT_PUBLIC_FEATURED_NETWORKS_MODE can only be set when NEXT_PUBLIC_FEATURED_NETWORKS is configured'),
-      }),
-    NEXT_PUBLIC_OTHER_LINKS: yup
-      .array()
-      .transform(replaceQuotes)
-      .json()
-      .of(navItemExternalSchema),
-    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_NAVIGATION_PROMO_BANNER_CONFIG: yup
-      .mixed()
-      .test('shape', 'Invalid schema were provided for NEXT_PUBLIC_NAVIGATION_PROMO_BANNER_CONFIG, it should be either object with img_url, text, bg_color, text_color, link_url or object with img_url and link_url', (data) => {
-        const isUndefined = data === undefined;
-        const jsonSchema = yup.object<NavigationPromoBannerConfig>().transform(replaceQuotes).json();
-
-        const valueSchema1 = jsonSchema.shape({
-          img_url: yup.string().required(),
-          text: yup.string().required(),
-          bg_color: yup.object().shape({
-            light: yup.string().required(),
-            dark: yup.string().required(),
-          }).required(),
-          text_color: yup.object().shape({
-            light: yup.string().required(),
-            dark: yup.string().required(),
-          }).required(),
-          link_url: yup.string().required(),
-        });
-
-        const valueSchema2 = jsonSchema.shape({
-          img_url: yup.object().shape({
-            small: yup.string().required(),
-            large: yup.string().required(),
-          }).required(),
-          link_url: yup.string().required(),
-        });
-
-        return isUndefined || valueSchema1.isValidSync(data) || valueSchema2.isValidSync(data);
-      }),
-    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),
-    NEXT_PUBLIC_NETWORK_ICON_DARK: yup.string().test(urlTest),
-
-    //     c. footer
-    NEXT_PUBLIC_FOOTER_LINKS: yup
-      .array()
-      .json()
-      .of(footerLinkGroupSchema),
-
     //     d. views
     NEXT_PUBLIC_VIEWS_BLOCK_HIDDEN_FIELDS: yup
       .array()
@@ -1061,7 +777,6 @@ const schema = yup
     NEXT_PUBLIC_VIEWS_TOKEN_SCAM_TOGGLE_ENABLED: yup.boolean(),
     NEXT_PUBLIC_HELIA_VERIFIED_FETCH_ENABLED: yup.boolean(),
 
-    //     e. misc
     NEXT_PUBLIC_NETWORK_EXPLORERS: yup
       .array()
       .transform(replaceQuotes)
@@ -1073,25 +788,6 @@ const schema = yup
       .json()
       .of(contractCodeIdeSchema),
     NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS: yup.boolean(),
-    NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS: yup.boolean(),
-    NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS: yup.boolean(),
-    NEXT_PUBLIC_HIDE_NATIVE_COIN_PRICE: yup.boolean(),
-    NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE: yup.string(),
-    NEXT_PUBLIC_COLOR_THEME_DEFAULT: yup.string().oneOf(COLOR_THEME_IDS),
-    NEXT_PUBLIC_COLOR_THEME_OVERRIDES: yup.object().transform(replaceQuotes).json(),
-    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_STATS_API_HOST: yup.string().test(urlTest),
@@ -1117,7 +813,6 @@ const schema = yup
       }),
     NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET: yup.boolean(),
     NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER: yup.string().oneOf(TX_INTERPRETATION_PROVIDERS),
-    NEXT_PUBLIC_AD_TEXT_PROVIDER: yup.string<AdTextProviders>().oneOf(SUPPORTED_AD_TEXT_PROVIDERS),
     NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE: yup.boolean(),
     NEXT_PUBLIC_OG_DESCRIPTION: yup.string(),
     NEXT_PUBLIC_OG_IMAGE_URL: yup.string().test(urlTest),
@@ -1149,11 +844,6 @@ const schema = yup
     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_ADVANCED_FILTER_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',
@@ -1227,19 +917,18 @@ const schema = yup
         return isUndefined || valueSchema.isValidSync(data);
       }),
 
-    // 6. External services envs
-    NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: yup.string(),
-    NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY: yup.string(),
-    NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID: yup.string(),
-    NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY: yup.string(),
-    NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN: yup.string(),
-
-
     // Misc
     NEXT_PUBLIC_USE_NEXT_JS_PROXY: yup.boolean(),
   })
+  .concat(uiSchemas.homepageSchema)
+  .concat(uiSchemas.navigationSchema)
+  .concat(uiSchemas.footerSchema)
+  .concat(uiSchemas.miscSchema)
+  .concat(featuresSchemas.adsSchema)
+  .concat(featuresSchemas.userOpsSchema)
+  .concat(featuresSchemas.defiDropdownSchema)
+  .concat(servicesSchemas)
   .concat(accountSchema)
-  .concat(adsBannerSchema)
   .concat(marketplaceSchema)
   .concat(rollupSchema)
   .concat(celoSchema)
@@ -1251,7 +940,6 @@ const schema = yup
   .concat(megaEthSchema)
   .concat(address3rdPartyWidgetsConfigSchema)
   .concat(addressMetadataSchema)
-  .concat(userOpsSchema)
   .concat(flashblocksSchema)
   .concat(zetaChainSchema);
 
diff --git a/deploy/tools/envs-validator/schema_multichain.ts b/deploy/tools/envs-validator/schema_multichain.ts
new file mode 100644
index 0000000000..193a4333a3
--- /dev/null
+++ b/deploy/tools/envs-validator/schema_multichain.ts
@@ -0,0 +1,70 @@
+declare module 'yup' {
+    interface StringSchema {
+      // Yup's URL validator is not perfect so we made our own
+      // https://github.com/jquense/yup/pull/1859
+      url(): never;
+    }
+  }
+  
+import * as yup from 'yup';
+import { urlTest, protocols } from './utils';
+import * as uiSchemas from './schemas/ui';
+import * as featuresSchemas from './schemas/features';
+import servicesSchemas from './schemas/services';
+import { replaceQuotes } from '../../../configs/app/utils';
+
+const schema = yup
+  .object()
+  .noUnknown(true, (params) => {
+    return `Unknown ENV variables were provided: ${ params.unknown }`;
+  })
+  .shape({
+    // I. Build-time ENVs
+    // -----------------
+    NEXT_PUBLIC_GIT_TAG: yup.string(),
+    NEXT_PUBLIC_GIT_COMMIT_SHA: yup.string(),
+
+    // II. Run-time ENVs
+    // -----------------
+    // 1. App configuration
+    NEXT_PUBLIC_APP_HOST: yup.string().required(),
+    NEXT_PUBLIC_APP_PROTOCOL: yup.string().oneOf(protocols),
+    NEXT_PUBLIC_APP_PORT: yup.number().positive().integer(),
+    NEXT_PUBLIC_APP_ENV: yup.string(),
+    NEXT_PUBLIC_APP_INSTANCE: yup.string(),
+
+    // 2. Blockchain parameters
+    NEXT_PUBLIC_NETWORK_NAME: yup.string().required(),
+    NEXT_PUBLIC_NETWORK_SHORT_NAME: yup.string(),
+    NEXT_PUBLIC_IS_TESTNET: yup.boolean(),
+
+    // 5. Features configuration
+    // NOTE!: Not all features are supported in multichain mode, and some of them not relevant or enabled per chain basis
+    // Below listed supported features and the features that are enabled by default, so we have to turn them off
+    NEXT_PUBLIC_OG_DESCRIPTION: yup.string(),
+    NEXT_PUBLIC_OG_IMAGE_URL: yup.string().test(urlTest),
+
+    NEXT_PUBLIC_GAS_TRACKER_ENABLED: yup.boolean().equals([false]),
+    NEXT_PUBLIC_ADVANCED_FILTER_ENABLED: yup.boolean().equals([false]),
+    NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED: yup.boolean().equals([false]),
+    NEXT_PUBLIC_API_DOCS_TABS: yup.array().transform(replaceQuotes).json().max(0),
+
+    // 6. Multichain configuration
+    NEXT_PUBLIC_MULTICHAIN_ENABLED: yup.boolean(),
+    NEXT_PUBLIC_MULTICHAIN_CLUSTER: yup.string(),
+    NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_API_HOST: yup.string().test(urlTest),
+    NEXT_PUBLIC_MULTICHAIN_STATS_API_HOST: yup.string().test(urlTest),
+
+    // Misc
+    NEXT_PUBLIC_USE_NEXT_JS_PROXY: yup.boolean(),
+  })
+  .concat(uiSchemas.homepageSchema)
+  .concat(uiSchemas.navigationSchema)
+  .concat(uiSchemas.footerSchema)
+  .concat(uiSchemas.miscSchema)
+  .concat(featuresSchemas.adsSchema)
+  .concat(featuresSchemas.userOpsSchema)
+  .concat(featuresSchemas.defiDropdownSchema)
+  .concat(servicesSchemas);
+
+export default schema;
diff --git a/deploy/tools/envs-validator/schemas/features.ts b/deploy/tools/envs-validator/schemas/features.ts
new file mode 100644
index 0000000000..fc338985bf
--- /dev/null
+++ b/deploy/tools/envs-validator/schemas/features.ts
@@ -0,0 +1,75 @@
+import * as yup from 'yup';
+import { replaceQuotes } from '../../../../configs/app/utils';
+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 { AdButlerConfig } from '../../../../types/client/adButlerConfig';
+import { urlTest } from '../utils';
+import { IconName } from '../../../../ui/shared/IconSvg';
+import { DeFiDropdownItem } from '../../../../types/client/deFiDropdown';
+
+const adButlerConfigSchema = yup
+  .object<AdButlerConfig>()
+  .transform(replaceQuotes)
+  .json()
+  .when('NEXT_PUBLIC_AD_BANNER_PROVIDER', {
+    is: (value: AdBannerProviders) => value === 'adbutler',
+    then: (schema) => schema
+      .shape({
+        id: yup.string().required(),
+        width: yup.number().positive().required(),
+        height: yup.number().positive().required(),
+      })
+      .required(),
+  })
+  .when('NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER', {
+    is: (value: AdBannerProviders) => value === 'adbutler',
+    then: (schema) => schema
+      .shape({
+        id: yup.string().required(),
+        width: yup.number().positive().required(),
+        height: yup.number().positive().required(),
+      })
+      .required(),
+  });
+
+export const adsSchema = yup.object({
+    NEXT_PUBLIC_AD_TEXT_PROVIDER: yup.string<AdTextProviders>().oneOf(SUPPORTED_AD_TEXT_PROVIDERS),
+    NEXT_PUBLIC_AD_BANNER_PROVIDER: yup.string<AdBannerProviders>().oneOf(SUPPORTED_AD_BANNER_PROVIDERS),
+    NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER: yup.string<AdBannerAdditionalProviders>().oneOf(SUPPORTED_AD_BANNER_ADDITIONAL_PROVIDERS),
+    NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP: adButlerConfigSchema,
+    NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE: adButlerConfigSchema,
+    NEXT_PUBLIC_AD_BANNER_ENABLE_SPECIFY: yup.boolean(),
+});
+
+export const userOpsSchema = yup
+  .object()
+  .shape({
+    NEXT_PUBLIC_HAS_USER_OPS: yup.boolean(),
+    NEXT_PUBLIC_USER_OPS_INDEXER_API_HOST: yup
+      .string()
+      .test(urlTest)
+      .when('NEXT_PUBLIC_HAS_USER_OPS', {
+        is: (value: boolean) => value,
+        then: (schema) => schema,
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_USER_OPS_INDEXER_API_HOST can only be used if NEXT_PUBLIC_HAS_USER_OPS is set to \'true\''),
+      }),
+  });
+
+const deFiDropdownItemSchema: yup.ObjectSchema<DeFiDropdownItem> = yup
+  .object({
+    text: yup.string().required(),
+    icon: yup.string<IconName>(),
+    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>;
+
+export const defiDropdownSchema = yup.object({
+    NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS: yup
+    .array()
+    .transform(replaceQuotes)
+    .json()
+    .of(deFiDropdownItemSchema),
+});
\ No newline at end of file
diff --git a/deploy/tools/envs-validator/schemas/services.ts b/deploy/tools/envs-validator/schemas/services.ts
new file mode 100644
index 0000000000..29102a9c26
--- /dev/null
+++ b/deploy/tools/envs-validator/schemas/services.ts
@@ -0,0 +1,10 @@
+import * as yup from 'yup';
+
+// External services envs
+export default yup.object({
+    NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: yup.string(),
+    NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY: yup.string(),
+    NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID: yup.string(),
+    NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY: yup.string(),
+    NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN: yup.string(),
+});
\ No newline at end of file
diff --git a/deploy/tools/envs-validator/schemas/ui.ts b/deploy/tools/envs-validator/schemas/ui.ts
new file mode 100644
index 0000000000..4f8dfa5324
--- /dev/null
+++ b/deploy/tools/envs-validator/schemas/ui.ts
@@ -0,0 +1,220 @@
+import * as yup from 'yup';
+import { CHAIN_INDICATOR_IDS, ChainIndicatorId, HeroBannerConfig, HeroBannerButtonState, HOME_STATS_WIDGET_IDS, HomeStatsWidgetId } from '../../../../types/homepage';
+import { replaceQuotes } from '../../../../configs/app/utils';
+import { getYupValidationErrorMessage, urlTest } from '../utils';
+import { NavigationLayout, NavigationPromoBannerConfig, NavItemExternal } from '../../../../types/client/navigation';
+import { FeaturedNetwork, NETWORK_GROUPS } from '../../../../types/networks';
+import { CustomLink, CustomLinksGroup } from '../../../../types/footerLinks';
+import { COLOR_THEME_IDS } from '../../../../types/settings';
+import { FontFamily } from '../../../../types/ui';
+
+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,
+      }),
+      search: yup.object({
+        border_width: yup.array().max(2).of(yup.string()),
+      }),
+    });
+
+export const homepageSchema = yup.object({
+    NEXT_PUBLIC_HOMEPAGE_CHARTS: yup
+      .array()
+      .transform(replaceQuotes)
+      .json()
+      .of(yup.string<ChainIndicatorId>().oneOf(CHAIN_INDICATOR_IDS))
+      .test(
+        'stats-api-required',
+        'NEXT_PUBLIC_STATS_API_HOST is required when daily_operational_txs is enabled in NEXT_PUBLIC_HOMEPAGE_CHARTS',
+        function(value) {
+          // daily_operational_txs is presented only in stats microservice
+          if (value?.includes('daily_operational_txs')) {
+            return Boolean(this.parent.NEXT_PUBLIC_STATS_API_HOST);
+          }
+          return true;
+        }
+      ),
+    NEXT_PUBLIC_HOMEPAGE_STATS: yup
+      .array()
+      .transform(replaceQuotes)
+      .json()
+      .of(yup.string<HomeStatsWidgetId>().oneOf(HOME_STATS_WIDGET_IDS))
+      .test(
+        'stats-api-required',
+        'NEXT_PUBLIC_STATS_API_HOST is required when total_operational_txs is enabled in NEXT_PUBLIC_HOMEPAGE_STATS',
+        function(value) {
+          // total_operational_txs is presented only in stats microservice
+          if (value?.includes('total_operational_txs')) {
+            return Boolean(this.parent.NEXT_PUBLIC_STATS_API_HOST);
+          }
+          return true;
+        }
+      ),
+    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 = getYupValidationErrorMessage(error);
+            return 'Invalid schema were provided for NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG' + (message ? `: ${ message }` : '');
+          }
+        },
+        (data) => {
+          const isUndefined = data === undefined;
+          return isUndefined || heroBannerSchema.isValidSync(data);
+        }),
+});
+
+const featuredNetworkSchema: yup.ObjectSchema<FeaturedNetwork> = yup
+  .object()
+  .shape({
+    title: yup.string().required(),
+    url: yup.string().test(urlTest).required(),
+    group: yup.string().oneOf(NETWORK_GROUPS).required(),
+    icon: yup.string().test(urlTest),
+    isActive: yup.boolean(),
+    invertIconInDarkMode: yup.boolean(),
+  });
+
+const navItemExternalSchema: yup.ObjectSchema<NavItemExternal> = yup
+  .object({
+    text: yup.string().required(),
+    url: yup.string().test(urlTest).required(),
+  });
+
+export const navigationSchema = yup.object({
+    NEXT_PUBLIC_FEATURED_NETWORKS: yup
+      .array()
+      .json()
+      .of(featuredNetworkSchema),
+    NEXT_PUBLIC_FEATURED_NETWORKS_ALL_LINK: yup
+      .string()
+      .when('NEXT_PUBLIC_FEATURED_NETWORKS', {
+        is: (value: Array<unknown> | undefined) => value && value.length > 0,
+        then: (schema) => schema.test(urlTest),
+        otherwise: (schema) => schema.max(-1,  'NEXT_PUBLIC_FEATURED_NETWORKS_ALL_LINK can only be set when NEXT_PUBLIC_FEATURED_NETWORKS is configured'),
+      }),
+    NEXT_PUBLIC_FEATURED_NETWORKS_MODE: yup
+      .string()
+      .when('NEXT_PUBLIC_FEATURED_NETWORKS', {
+        is: (value: Array<unknown> | undefined) => value && value.length > 0,
+        then: (schema) => schema.oneOf([ 'tabs', 'list' ]),
+        otherwise: (schema) => schema.max(-1,  'NEXT_PUBLIC_FEATURED_NETWORKS_MODE can only be set when NEXT_PUBLIC_FEATURED_NETWORKS is configured'),
+      }),
+    NEXT_PUBLIC_OTHER_LINKS: yup
+      .array()
+      .transform(replaceQuotes)
+      .json()
+      .of(navItemExternalSchema),
+    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_NAVIGATION_PROMO_BANNER_CONFIG: yup
+      .mixed()
+      .test('shape', 'Invalid schema were provided for NEXT_PUBLIC_NAVIGATION_PROMO_BANNER_CONFIG, it should be either object with img_url, text, bg_color, text_color, link_url or object with img_url and link_url', (data) => {
+        const isUndefined = data === undefined;
+        const jsonSchema = yup.object<NavigationPromoBannerConfig>().transform(replaceQuotes).json();
+
+        const valueSchema1 = jsonSchema.shape({
+          img_url: yup.string().required(),
+          text: yup.string().required(),
+          bg_color: yup.object().shape({
+            light: yup.string().required(),
+            dark: yup.string().required(),
+          }).required(),
+          text_color: yup.object().shape({
+            light: yup.string().required(),
+            dark: yup.string().required(),
+          }).required(),
+          link_url: yup.string().required(),
+        });
+
+        const valueSchema2 = jsonSchema.shape({
+          img_url: yup.object().shape({
+            small: yup.string().required(),
+            large: yup.string().required(),
+          }).required(),
+          link_url: yup.string().required(),
+        });
+
+        return isUndefined || valueSchema1.isValidSync(data) || valueSchema2.isValidSync(data);
+      }),
+    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),
+    NEXT_PUBLIC_NETWORK_ICON_DARK: yup.string().test(urlTest),
+});
+
+const footerLinkSchema: yup.ObjectSchema<CustomLink> = yup
+  .object({
+    text: yup.string().required(),
+    url: yup.string().test(urlTest).required(),
+    iconUrl: yup.array().of(yup.string().required().test(urlTest)),
+  });
+
+const footerLinkGroupSchema: yup.ObjectSchema<CustomLinksGroup> = yup
+  .object({
+    title: yup.string().required(),
+    links: yup
+      .array()
+      .of(footerLinkSchema)
+      .required(),
+  });
+
+export const footerSchema = yup.object({
+    NEXT_PUBLIC_FOOTER_LINKS: yup
+      .array()
+      .json()
+      .of(footerLinkGroupSchema),
+});
+
+const fontFamilySchema: yup.ObjectSchema<FontFamily> = yup
+  .object()
+  .transform(replaceQuotes)
+  .json()
+  .shape({
+    name: yup.string().required(),
+    url: yup.string().test(urlTest).required(),
+  });
+
+export const miscSchema = yup.object({
+    NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS: yup.boolean(),
+    NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS: yup.boolean(),
+    NEXT_PUBLIC_HIDE_NATIVE_COIN_PRICE: yup.boolean(),
+    NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE: yup.string(),
+    NEXT_PUBLIC_COLOR_THEME_DEFAULT: yup.string().oneOf(COLOR_THEME_IDS),
+    NEXT_PUBLIC_COLOR_THEME_OVERRIDES: yup.object().transform(replaceQuotes).json(),
+    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(),
+});
diff --git a/deploy/tools/envs-validator/test.sh b/deploy/tools/envs-validator/test.sh
index 46d3ea3fca..668219d84a 100755
--- a/deploy/tools/envs-validator/test.sh
+++ b/deploy/tools/envs-validator/test.sh
@@ -17,14 +17,16 @@ yarn build
 
 validate_file() {
     local test_file="$1"
+    local with_common="$2"
 
     echo
     echo "🧿 Validating file '$test_file'..."
 
-    dotenv \
-        -e $test_file \
-        -e $common_file \
-            yarn run validate -- --silent
+    if [ "$with_common" = "true" ]; then
+        dotenv -e "$test_file" -e "$common_file" yarn run validate -- --silent
+    else
+        dotenv -e "$test_file" yarn run validate -- --silent
+    fi
 
     if [ $? -eq 0 ]; then
         echo "👍 All good!"
@@ -39,7 +41,12 @@ validate_file() {
 test_files=($(find "$test_folder" -maxdepth 1 -type f | grep -vE '\/\.env\.common$'))
 
 for file in "${test_files[@]}"; do
-    validate_file "$file"
+    if [[ "$file" == *".env.multichain" ]]; then
+        validate_file "$file" false
+    else
+        validate_file "$file" true
+    fi
+    
     if [ $? -eq 1 ]; then
         exit 1
     fi
diff --git a/deploy/tools/envs-validator/test/.env.multichain b/deploy/tools/envs-validator/test/.env.multichain
new file mode 100644
index 0000000000..e7882269ed
--- /dev/null
+++ b/deploy/tools/envs-validator/test/.env.multichain
@@ -0,0 +1,28 @@
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_NETWORK_NAME=Testnet
+NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_API_HOST=https://example.com
+NEXT_PUBLIC_MULTICHAIN_STATS_API_HOST=http://example.com
+NEXT_PUBLIC_MULTICHAIN_ENABLED=true
+NEXT_PUBLIC_MULTICHAIN_CLUSTER=test
+
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cap']
+NEXT_PUBLIC_HOMEPAGE_STATS=['total_txs','wallet_addresses']
+NEXT_PUBLIC_API_DOCS_TABS=[]
+NEXT_PUBLIC_FEATURED_NETWORKS=http://example.com
+NEXT_PUBLIC_FOOTER_LINKS=http://example.com
+NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG={'background':['linear-gradient(90deg, rgb(232, 52, 53) 0%, rgb(139, 28, 232) 100%)'],'text_color':['rgb(255, 255, 255)']}
+NEXT_PUBLIC_NETWORK_ICON=http://example.com
+NEXT_PUBLIC_NETWORK_ICON_DARK=http://example.com
+NEXT_PUBLIC_NETWORK_LOGO=http://example.com
+NEXT_PUBLIC_NETWORK_LOGO_DARK=http://example.com
+NEXT_PUBLIC_NETWORK_NAME=OP Superchain
+NEXT_PUBLIC_NETWORK_SHORT_NAME=OP Superchain
+NEXT_PUBLIC_OG_IMAGE_URL=http://example.com
+NEXT_PUBLIC_GAS_TRACKER_ENABLED=false
+NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS=true
+NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS=true
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=false
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_USE_NEXT_JS_PROXY=true
+NEXT_PUBLIC_HAS_USER_OPS=true
+NEXT_PUBLIC_ADVANCED_FILTER_ENABLED=false
\ No newline at end of file
diff --git a/deploy/tools/envs-validator/utils.ts b/deploy/tools/envs-validator/utils.ts
new file mode 100644
index 0000000000..7e5e73a7b3
--- /dev/null
+++ b/deploy/tools/envs-validator/utils.ts
@@ -0,0 +1,31 @@
+import * as yup from 'yup';
+
+export const protocols = [ 'http', 'https' ];
+
+export const urlTest: yup.TestConfig = {
+  name: 'url',
+  test: (value: unknown) => {
+    if (!value) {
+      return true;
+    }
+
+    try {
+      if (typeof value === 'string') {
+        new URL(value);
+        return true;
+      }
+    } catch (error) {}
+
+    return false;
+  },
+  message: '${path} is not a valid URL',
+  exclusive: true,
+};
+
+export const getYupValidationErrorMessage = (error: unknown) =>
+  typeof error === 'object' &&
+  error !== null &&
+  'errors' in error &&
+  Array.isArray(error.errors) ?
+    error.errors.join(', ') :
+    '';
\ No newline at end of file
diff --git a/deploy/tools/essential-dapps-chains-config-generator/index.ts b/deploy/tools/essential-dapps-chains-config-generator/index.ts
index dc775cb59d..7dcc74fe43 100644
--- a/deploy/tools/essential-dapps-chains-config-generator/index.ts
+++ b/deploy/tools/essential-dapps-chains-config-generator/index.ts
@@ -7,10 +7,11 @@ import * as viemChains from 'viem/chains';
 import { pick } from 'es-toolkit';
 
 import { EssentialDappsConfig } from 'types/client/marketplace';
-import { ChainConfig } from 'types/multichain';
 import { getEnvValue, parseEnvJson } from 'configs/app/utils';
-import {uniq } from 'es-toolkit';
+import { uniq } from 'es-toolkit';
 import currentChainConfig from 'configs/app';
+import appConfig from 'configs/app';
+import { EssentialDappsChainConfig } from 'types/client/marketplace';
 
 const currentFilePath = fileURLToPath(import.meta.url);
 const currentDir = dirname(currentFilePath);
@@ -36,21 +37,10 @@ async function getChainscoutInfo(externalChainIds: Array<string>, currentChainId
   }
 }
 
-function getSlug(chainName: string) {
-  return chainName.toLowerCase().replace(/ /g, '-').replace(/[^a-z0-9-]/g, '');
-}
-
-function trimChainConfig(config: ChainConfig['config'], logoUrl: string | undefined) {
+function trimChainConfig(config: typeof appConfig, logoUrl: string | undefined) {
   return {
     ...pick(config, [ 'app', 'chain' ]),
     apis: pick(config.apis || {}, [ 'general' ]),
-    UI: {
-      navigation: {
-        icon: {
-          'default': logoUrl,
-        }
-      },
-    }
   };
 }
 
@@ -110,17 +100,22 @@ async function run() {
     const explorerUrls = chainscoutInfo.externals.map(({ explorerUrl }) => explorerUrl).filter(Boolean);
     console.log(`ℹ️  For ${ explorerUrls.length } chains explorer url was found in static config. Fetching parameters for each chain...`);
 
-    const chainConfigs = await Promise.all(explorerUrls.map(computeChainConfig)) as Array<ChainConfig['config']>;
+    const chainConfigs = await Promise.all(explorerUrls.map(computeChainConfig)) as Array<typeof appConfig>;
 
     const result = {
-      chains: [ currentChainConfig, ...chainConfigs ].map((config, index) => {
+      chains: [ currentChainConfig, ...chainConfigs ].map((config) => {
+        const chainId = config.chain.id;
+        const chainInfo = [...chainscoutInfo.externals, chainscoutInfo.current].find((chain) => chain?.id === chainId);
         const logoUrl = [...chainscoutInfo.externals, chainscoutInfo.current].find((chain) => chain?.id === config.chain.id)?.logoUrl;
-        const chainName = (config as { chain: { name: string } })?.chain?.name ?? `Chain ${ index + 1 }`;
+        const chainName = (config as { chain: { name: string } })?.chain?.name ?? `Chain ${ chainId }`;
         return {
-          slug: getSlug(chainName),
-          config: trimChainConfig(config, logoUrl),
+          id: chainId || '',
+          name: chainName,
+          logo: chainInfo?.logoUrl,
+          explorer_url: chainInfo?.explorerUrl || '',
+          app_config: trimChainConfig(config, logoUrl),
           contracts: Object.values(viemChains).find(({ id }) => id === Number(config.chain.id))?.contracts
-        };
+        } satisfies EssentialDappsChainConfig;
       }),
     };
 
diff --git a/deploy/tools/llms-txt-generator/index.ts b/deploy/tools/llms-txt-generator/index.ts
index b76dde75f3..2c7c200b64 100644
--- a/deploy/tools/llms-txt-generator/index.ts
+++ b/deploy/tools/llms-txt-generator/index.ts
@@ -15,7 +15,7 @@ function run() {
             
         const chainName = config.chain.name ?? '';
         const chainId = config.chain.id ?? '';
-        const generalApiUrl = config.apis.general.endpoint + config.apis.general.basePath;
+        const generalApiUrl = config.apis.general? config.apis.general.endpoint + config.apis.general.basePath : '';
         const statsApiUrl = config.apis.stats ? config.apis.stats.endpoint + config.apis.stats.basePath : undefined;
 
         const rollupFeature = config.features.rollup;
diff --git a/deploy/tools/multichain-config-generator/index.ts b/deploy/tools/multichain-config-generator/index.ts
index 9e7eee0e92..1fbe0d4600 100644
--- a/deploy/tools/multichain-config-generator/index.ts
+++ b/deploy/tools/multichain-config-generator/index.ts
@@ -3,6 +3,8 @@ import { dirname, resolve as resolvePath } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { Worker } from 'node:worker_threads';
 
+import { ClusterChainConfig } from 'types/multichain';
+
 const currentFilePath = fileURLToPath(import.meta.url);
 const currentDir = dirname(currentFilePath);
 
@@ -21,6 +23,19 @@ function getSlug(chainName: string) {
   return chainName.toLowerCase().replace(/ /g, '-').replace(/[^a-z0-9-]/g, '');
 }
 
+async function getChainscoutInfo(chainIds: Array<string>) {
+  const response = await fetch('https://chains.blockscout.com/api/chains');
+  if (!response.ok) {
+    throw new Error(`Failed to fetch chains info from Chainscout API`);
+  }
+  const chainsInfo = await response.json() as Record<string, { explorers: [ { url: string } ], logo: string }>;
+
+  return chainIds.map((chainId) => ({
+    id: chainId,
+    logoUrl: chainsInfo[chainId]?.logo,
+  }))
+}
+
 async function computeChainConfig(url: string): Promise<unknown> {
   return new Promise((resolve, reject) => {
     const workerPath = resolvePath(currentDir, 'worker.js');
@@ -48,8 +63,9 @@ async function computeChainConfig(url: string): Promise<unknown> {
 }
 
 async function getExplorerUrls() {
+  // return EXPLORER_URLS;
   try {
-    const basePath = (process.env.NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_BASE_PATH ?? '') + '/chains';
+    const basePath = `/api/v1/clusters/${ process.env.NEXT_PUBLIC_MULTICHAIN_CLUSTER }/chains`;
     const url = new URL(basePath, process.env.NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_API_HOST);
 
     const response = await fetch(url.toString());
@@ -79,14 +95,20 @@ async function run() {
     }
 
     const configs = await Promise.all(explorerUrls.map(computeChainConfig));
+    const chainscoutInfo = await getChainscoutInfo(configs.map((config) => config.chain.id));
 
     const config = {
       chains: configs.map((config, index) => {
-        const chainName = (config as { chain: { name: string } })?.chain?.name ?? `Chain ${ index + 1 }`;
+        const chainId = config.chain.id;
+        const chainName = (config as { chain: { name: string } })?.chain?.name ?? `Chain ${ chainId }`;
         return {
+          id: chainId,
+          name: chainName,
+          logo: chainscoutInfo.find((chain) => chain.id === chainId)?.logoUrl,
+          explorer_url: explorerUrls[index],
           slug: getSlug(chainName),
-          config,
-        };
+          app_config: config,
+        } satisfies ClusterChainConfig;
       }),
     };
 
diff --git a/deploy/tools/sitemap-generator/next-sitemap.config.js b/deploy/tools/sitemap-generator/next-sitemap.config.js
index 2ea15c6323..90fe3579cf 100644
--- a/deploy/tools/sitemap-generator/next-sitemap.config.js
+++ b/deploy/tools/sitemap-generator/next-sitemap.config.js
@@ -137,7 +137,7 @@ module.exports = {
         }
         break;
       case '/api-docs':
-        if (process.env.NEXT_PUBLIC_API_SPEC_URL === 'none') {
+        if (process.env.NEXT_PUBLIC_API_DOCS_TABS === '[]') {
           return null;
         }
         break;
@@ -161,6 +161,34 @@ module.exports = {
           return null;
         }
         break;
+      case '/epochs':
+        if (process.env.NEXT_PUBLIC_CELO_ENABLED !== 'true') {
+          return null;
+        }
+        break;
+      case '/operations':
+        if (!process.env.NEXT_PUBLIC_TAC_OPERATION_LIFECYCLE_API_HOST) {
+          return null;
+        }
+        break;
+      case '/public-tags/submit':
+        if (!process.env.NEXT_PUBLIC_ADMIN_SERVICE_API_HOST || !process.env.NEXT_PUBLIC_METADATA_SERVICE_API_HOST) {
+          return null;
+        }
+        break;
+      case '/txn-withdrawals':
+        if (!process.env.NEXT_PUBLIC_ROLLUP_TYPE || process.env.NEXT_PUBLIC_ROLLUP_TYPE !== 'arbitrum') {
+          return null;
+        }
+        break;
+      // disabled routes for multichain
+      case '/block/countdown':
+      case '/contract-verification':
+      case '/visualize/sol2uml':
+        if (process.env.NEXT_PUBLIC_MULTICHAIN_ENABLED === 'true') {
+          return null;
+        }
+        break;
     }
 
     return {
@@ -172,7 +200,7 @@ module.exports = {
     };
   },
   additionalPaths: async(config) => {
-    if(process.env.NEXT_PUBLIC_OP_SUPERCHAIN_ENABLED === 'true'){
+    if(process.env.NEXT_PUBLIC_MULTICHAIN_ENABLED === 'true'){
       return;
     }
 
diff --git a/deploy/values/review-l2/values.yaml.gotmpl b/deploy/values/review-l2/values.yaml.gotmpl
index 69331a90fd..1a3dc3bf90 100644
--- a/deploy/values/review-l2/values.yaml.gotmpl
+++ b/deploy/values/review-l2/values.yaml.gotmpl
@@ -54,3 +54,4 @@ frontend:
   envFromSecret:
     NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: ref+vault://deployment-values/blockscout/dev/review-l2?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/eth-sepolia/testnet?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/RE_CAPTCHA_CLIENT_KEY
+    NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN
diff --git a/docs/ENVS.md b/docs/ENVS.md
index 48ced32d09..10c2c6023a 100644
--- a/docs/ENVS.md
+++ b/docs/ENVS.md
@@ -79,7 +79,8 @@ All json-like values should be single-quoted. If it contains a hash (`#`) or a d
   - [DEX pools](#dex-pools)
   - [Flashblocks](#flashblocks)
   - [Address 3rd party widgets](#address-3rd-party-widgets)
-  - [ZetaChain](#zetachain)
+  - [ZetaChain](#zetachain-cross-chain-transactions)
+  - [Multichain explorer](#multichain-explorer)
 - [3rd party services configuration](#external-services-configuration)
 
 &nbsp;
@@ -105,7 +106,7 @@ All json-like values should be single-quoted. If it contains a hash (`#`) or a d
 | --- | --- | --- | --- | --- | --- | --- |
 | 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_ID | `number` | Chain id, see [https://chainlist.org](https://chainlist.org) for the reference | Required (except for multichain) | -  | `99` | v1.0.x+ |
 | NEXT_PUBLIC_NETWORK_RPC_URL | `string \| Array<string>` | Chain public RPC server url, see [https://chainlist.org](https://chainlist.org) for the reference. Can contain a single string value, or an array of urls. | - | - | `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 the smallest unit of the native currency (e.g., 'wei' for Ethereum, where 1 ETH = 10^18 wei). Used for displaying gas prices and transaction fees in the smallest denomination. | - | `wei` | `duck` | v1.23.0+ |
@@ -125,7 +126,7 @@ All json-like values should be single-quoted. If it contains a hash (`#`) or a d
 | 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_HOST | `string` | Main API host | Required (except for multichain) | - | `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+ |
@@ -1023,6 +1024,19 @@ This feature enables cross-chain transactions pages and views on ZetaChain insta
 | tx_url_template | `string` | Transaction url template on external explorer. `{hash}` will be replaced with the transaction hash | - | - | `'https://external.explorer.com/tx/{hash}'` |
 
 
+&nbsp;
+
+### Multichain explorer
+
+This feature enables the application to act as an explorer of multiple blockchains united in one cluster. Please note that this feature is currently in demo mode, and a major part of the cross-chain views is not implemented and serves as a placeholder. These will be developed in the future.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_MULTICHAIN_ENABLED | `boolean` | The flag that enables the feature | Required | - | `true` | upcoming |
+| NEXT_PUBLIC_MULTICHAIN_CLUSTER | `string` | Chain's cluster name; used to construct the full URL for requests to the aggregator API service | Required | - | `interop` | upcoming |
+| NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_API_HOST | `string` | Multichain aggregator API service host | Required | - | `https://multichain-aggregator.k8s-dev.blockscout.com` | upcoming |
+| NEXT_PUBLIC_MULTICHAIN_STATS_API_HOST | `string` | Multichain statistics API service host | Required | - | `http://multichain-search-stats.k8s-dev.blockscout.com` | upcoming |
+
 &nbsp;
 
 ### Badge claim link
@@ -1031,6 +1045,7 @@ This feature enables cross-chain transactions pages and views on ZetaChain insta
 | --- | --- | --- | --- | --- | --- | --- |
 | NEXT_PUBLIC_GAME_BADGE_CLAIM_LINK | `string` | Provide to enable the easter egg badge feature | - | - | `https://example.com` | v1.37.0+ |
 
+&nbsp;
 
 ### Puzzle game badge claim link
 
diff --git a/global.d.ts b/global.d.ts
index 56efb06936..6ca74db006 100644
--- a/global.d.ts
+++ b/global.d.ts
@@ -1,3 +1,4 @@
+import type { EssentialDappsChainConfig } from 'types/client/marketplace';
 import type { MultichainConfig } from 'types/multichain';
 import type { WalletProvider } from 'types/web3';
 
@@ -21,7 +22,7 @@ declare global {
     abkw: string;
     __envs: Record<string, string>;
     __multichainConfig: MultichainConfig;
-    __essentialDappsChains: MultichainConfig;
+    __essentialDappsChains: { chains: Array<EssentialDappsChainConfig> };
   }
 
   namespace NodeJS {
diff --git a/lib/address/useAddressMetadataInfoQuery.ts b/lib/address/useAddressMetadataInfoQuery.ts
index 3ef23aaab4..8e77b82f7a 100644
--- a/lib/address/useAddressMetadataInfoQuery.ts
+++ b/lib/address/useAddressMetadataInfoQuery.ts
@@ -11,8 +11,8 @@ export default function useAddressMetadataInfoQuery(addresses: Array<string>, is
   const resource = 'metadata:info';
 
   const multichainContext = useMultichainContext();
-  const feature = multichainContext?.chain?.config.features.addressMetadata || config.features.addressMetadata;
-  const chainId = multichainContext?.chain?.config.chain.id || config.chain.id;
+  const feature = multichainContext?.chain?.app_config.features.addressMetadata || config.features.addressMetadata;
+  const chainId = multichainContext?.chain?.app_config.chain.id || config.chain.id;
 
   return useApiQuery<typeof resource, unknown, AddressMetadataInfoFormatted>(resource, {
     queryParams: {
diff --git a/lib/api/buildUrl.ts b/lib/api/buildUrl.ts
index 9199519a17..3f0ee2066d 100644
--- a/lib/api/buildUrl.ts
+++ b/lib/api/buildUrl.ts
@@ -1,6 +1,6 @@
 import { compile } from 'path-to-regexp';
 
-import type { ChainConfig } from 'types/multichain';
+import type { ExternalChainExtended } from 'types/externalChains';
 
 import config from 'configs/app';
 
@@ -13,7 +13,7 @@ export default function buildUrl<R extends ResourceName>(
   pathParams?: ResourcePathParams<R>,
   queryParams?: Record<string, string | Array<string> | number | boolean | null | undefined>,
   noProxy?: boolean,
-  chain?: ChainConfig,
+  chain?: ExternalChainExtended,
 ): string {
   const { api, resource } = getResourceParams(resourceFullName, chain);
   const baseUrl = !noProxy && isNeedProxy() ? config.app.baseUrl : api.endpoint;
diff --git a/lib/api/getResourceParams.ts b/lib/api/getResourceParams.ts
index 4bfbcfb1cb..d2d179bf1a 100644
--- a/lib/api/getResourceParams.ts
+++ b/lib/api/getResourceParams.ts
@@ -1,17 +1,17 @@
 import type { ApiName, ApiResource } from './types';
-import type { ChainConfig } from 'types/multichain';
+import type { ExternalChainExtended } from 'types/externalChains';
 
 import config from 'configs/app';
 
 import type { ResourceName } from './resources';
 import { RESOURCES } from './resources';
 
-export default function getResourceParams(resourceFullName: ResourceName, chain?: ChainConfig) {
+export default function getResourceParams(resourceFullName: ResourceName, chain?: ExternalChainExtended) {
   const [ apiName, resourceName ] = resourceFullName.split(':') as [ ApiName, string ];
 
   const apiConfig = (() => {
-    if (chain) {
-      return chain.config.apis[apiName];
+    if (chain?.app_config?.apis) {
+      return chain.app_config.apis[apiName as keyof typeof chain.app_config.apis];
     }
 
     return config.apis[apiName];
diff --git a/lib/api/getSocketUrl.ts b/lib/api/getSocketUrl.ts
index 676bfa0c9b..5475e4c6a7 100644
--- a/lib/api/getSocketUrl.ts
+++ b/lib/api/getSocketUrl.ts
@@ -1,5 +1,5 @@
 import appConfig from 'configs/app';
 
 export default function getSocketUrl(config: typeof appConfig = appConfig) {
-  return `${ config.apis.general.socketEndpoint }${ config.apis.general.basePath ?? '' }/socket/v2`;
+  return config.apis.general ? `${ config.apis.general.socketEndpoint }${ config.apis.general.basePath ?? '' }/socket/v2` : undefined;
 }
diff --git a/lib/api/resources.ts b/lib/api/resources.ts
index dddd07d58b..5ee0dce5bf 100644
--- a/lib/api/resources.ts
+++ b/lib/api/resources.ts
@@ -12,8 +12,14 @@ import { GENERAL_API_RESOURCES } from './services/general';
 import type { GeneralApiResourceName, GeneralApiResourcePayload, GeneralApiPaginationFilters, GeneralApiPaginationSorting } from './services/general';
 import type { MetadataApiResourceName, MetadataApiResourcePayload } from './services/metadata';
 import { METADATA_API_RESOURCES } from './services/metadata';
-import type { MultichainApiPaginationFilters, MultichainApiResourceName, MultichainApiResourcePayload } from './services/multichain';
-import { MULTICHAIN_API_RESOURCES } from './services/multichain';
+import type {
+  MultichainAggregatorApiPaginationFilters,
+  MultichainAggregatorApiResourceName,
+  MultichainAggregatorApiResourcePayload,
+} from './services/multichainAggregator';
+import { MULTICHAIN_AGGREGATOR_API_RESOURCES } from './services/multichainAggregator';
+import type { MultichainStatsApiResourcePayload, MultichainStatsApiResourceName } from './services/multichainStats';
+import { MULTICHAIN_STATS_API_RESOURCES } from './services/multichainStats';
 import type { RewardsApiResourceName, RewardsApiResourcePayload } from './services/rewards';
 import { REWARDS_API_RESOURCES } from './services/rewards';
 import type { StatsApiResourceName, StatsApiResourcePayload } from './services/stats';
@@ -38,7 +44,8 @@ export const RESOURCES = {
   contractInfo: CONTRACT_INFO_API_RESOURCES,
   general: GENERAL_API_RESOURCES,
   metadata: METADATA_API_RESOURCES,
-  multichain: MULTICHAIN_API_RESOURCES,
+  multichainAggregator: MULTICHAIN_AGGREGATOR_API_RESOURCES,
+  multichainStats: MULTICHAIN_STATS_API_RESOURCES,
   rewards: REWARDS_API_RESOURCES,
   stats: STATS_API_RESOURCES,
   tac: TAC_OPERATION_LIFECYCLE_API_RESOURCES,
@@ -73,7 +80,8 @@ R extends ClustersApiResourceName ? ClustersApiResourcePayload<R> :
 R extends ContractInfoApiResourceName ? ContractInfoApiResourcePayload<R> :
 R extends GeneralApiResourceName ? GeneralApiResourcePayload<R> :
 R extends MetadataApiResourceName ? MetadataApiResourcePayload<R> :
-R extends MultichainApiResourceName ? MultichainApiResourcePayload<R> :
+R extends MultichainAggregatorApiResourceName ? MultichainAggregatorApiResourcePayload<R> :
+R extends MultichainStatsApiResourceName ? MultichainStatsApiResourcePayload<R> :
 R extends RewardsApiResourceName ? RewardsApiResourcePayload<R> :
 R extends StatsApiResourceName ? StatsApiResourcePayload<R> :
 R extends TacOperationLifecycleApiResourceName ? TacOperationLifecycleApiResourcePayload<R> :
@@ -110,7 +118,7 @@ R extends BensApiResourceName ? BensApiPaginationFilters<R> :
 R extends ClustersApiResourceName ? ClustersApiPaginationFilters :
 R extends GeneralApiResourceName ? GeneralApiPaginationFilters<R> :
 R extends ContractInfoApiResourceName ? ContractInfoApiPaginationFilters<R> :
-R extends MultichainApiResourceName ? MultichainApiPaginationFilters<R> :
+R extends MultichainAggregatorApiResourceName ? MultichainAggregatorApiPaginationFilters<R> :
 R extends TacOperationLifecycleApiResourceName ? TacOperationLifecycleApiPaginationFilters<R> :
 R extends ZetaChainApiResourceName ? ZetaChainApiPaginationFilters<R> :
 never;
diff --git a/lib/api/services/multichain.ts b/lib/api/services/multichain.ts
deleted file mode 100644
index 30749a7e9a..0000000000
--- a/lib/api/services/multichain.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { ApiResource } from '../types';
-import type * as multichain from '@blockscout/multichain-aggregator-types';
-
-export const MULTICHAIN_API_RESOURCES = {
-  interop_messages: {
-    path: '/messages',
-    filterFields: [ 'address' as const ],
-    paginated: true,
-  },
-  interop_messages_count: {
-    path: '/messages/count',
-    filterFields: [ 'address' as const ],
-  },
-} satisfies Record<string, ApiResource>;
-
-export type MultichainApiResourceName = `multichain:${ keyof typeof MULTICHAIN_API_RESOURCES }`;
-
-/* eslint-disable @stylistic/indent */
-export type MultichainApiResourcePayload<R extends MultichainApiResourceName> =
-R extends 'multichain:interop_messages' ? multichain.ListInteropMessagesResponse :
-R extends 'multichain:interop_messages_count' ? multichain.CountInteropMessagesResponse :
-never;
-/* eslint-enable @stylistic/indent */
-
-/* eslint-disable @stylistic/indent */
-export type MultichainApiPaginationFilters<R extends MultichainApiResourceName> =
-R extends 'multichain:interop_messages' ? Partial<multichain.ListInteropMessagesRequest> :
-R extends 'multichain:interop_messages_count' ? Partial<multichain.CountInteropMessagesRequest> :
-never;
-/* eslint-enable @stylistic/indent */
diff --git a/lib/api/services/multichainAggregator.ts b/lib/api/services/multichainAggregator.ts
new file mode 100644
index 0000000000..2006f9dd2d
--- /dev/null
+++ b/lib/api/services/multichainAggregator.ts
@@ -0,0 +1,85 @@
+import type { ApiResource } from '../types';
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+import type { AddressTokensResponse, TokensResponse } from 'types/client/multichain-aggregator';
+
+export const MULTICHAIN_AGGREGATOR_API_RESOURCES = {
+  address: {
+    path: '/addresses/:hash',
+    pathParams: [ 'hash' as const ],
+  },
+  address_tokens: {
+    path: '/addresses/:hash/tokens',
+    pathParams: [ 'hash' as const ],
+    paginated: true,
+    filterFields: [ 'chain_id' as const, 'type' as const ],
+  },
+  tokens: {
+    path: '/tokens',
+    filterFields: [ 'chain_id' as const, 'type' as const, 'query' as const ],
+    paginated: true,
+  },
+  quick_search: {
+    path: '/search\\:quick',
+    filterFields: [ 'q' as const ],
+  },
+  search_addresses: {
+    path: '/search/addresses',
+    filterFields: [ 'q' as const, 'chain_id' as const ],
+    paginated: true,
+  },
+  search_blocks: {
+    path: '/search/blocks',
+    filterFields: [ 'q' as const, 'chain_id' as const ],
+    paginated: true,
+  },
+  search_block_numbers: {
+    path: '/search/block-numbers',
+    filterFields: [ 'q' as const, 'chain_id' as const ],
+    paginated: true,
+  },
+  search_transactions: {
+    path: '/search/transactions',
+    filterFields: [ 'q' as const, 'chain_id' as const ],
+    paginated: true,
+  },
+  search_tokens: {
+    path: '/search/tokens',
+    filterFields: [ 'q' as const, 'chain_id' as const ],
+    paginated: true,
+  },
+  search_nfts: {
+    path: '/search/nfts',
+    filterFields: [ 'q' as const, 'chain_id' as const ],
+    paginated: true,
+  },
+  search_domains: {
+    path: '/search/domains',
+    filterFields: [ 'q' as const, 'chain_id' as const ],
+    paginated: true,
+  },
+} satisfies Record<string, ApiResource>;
+
+export type MultichainAggregatorApiResourceName = `multichainAggregator:${ keyof typeof MULTICHAIN_AGGREGATOR_API_RESOURCES }`;
+
+/* eslint-disable @stylistic/indent */
+export type MultichainAggregatorApiResourcePayload<R extends MultichainAggregatorApiResourceName> =
+R extends 'multichainAggregator:address' ? multichain.GetAddressResponse :
+R extends 'multichainAggregator:address_tokens' ? AddressTokensResponse :
+R extends 'multichainAggregator:tokens' ? TokensResponse :
+R extends 'multichainAggregator:quick_search' ? multichain.ClusterQuickSearchResponse :
+R extends 'multichainAggregator:search_addresses' ? multichain.SearchAddressesResponse :
+R extends 'multichainAggregator:search_blocks' ? multichain.SearchBlocksResponse :
+R extends 'multichainAggregator:search_block_numbers' ? multichain.SearchBlockNumbersResponse :
+R extends 'multichainAggregator:search_transactions' ? multichain.SearchTransactionsResponse :
+R extends 'multichainAggregator:search_tokens' ? multichain.SearchTokensResponse :
+R extends 'multichainAggregator:search_nfts' ? multichain.SearchNftsResponse :
+R extends 'multichainAggregator:search_domains' ? multichain.SearchDomainsResponse :
+never;
+/* eslint-enable @stylistic/indent */
+
+/* eslint-disable @stylistic/indent */
+export type MultichainAggregatorApiPaginationFilters<R extends MultichainAggregatorApiResourceName> =
+R extends 'multichainAggregator:address_tokens' ? Partial<multichain.ListAddressTokensRequest> :
+R extends 'multichainAggregator:tokens' ? Partial<multichain.ListClusterTokensRequest> :
+never;
+/* eslint-enable @stylistic/indent */
diff --git a/lib/api/services/multichainStats.ts b/lib/api/services/multichainStats.ts
new file mode 100644
index 0000000000..b0e7657ba8
--- /dev/null
+++ b/lib/api/services/multichainStats.ts
@@ -0,0 +1,16 @@
+import type { ApiResource } from '../types';
+import type * as stats from '@blockscout/stats-types';
+
+export const MULTICHAIN_STATS_API_RESOURCES = {
+  pages_main: {
+    path: '/api/v1/pages/multichain/main',
+  },
+} satisfies Record<string, ApiResource>;
+
+export type MultichainStatsApiResourceName = `multichainStats:${ keyof typeof MULTICHAIN_STATS_API_RESOURCES }`;
+
+/* eslint-disable @stylistic/indent */
+export type MultichainStatsApiResourcePayload<R extends MultichainStatsApiResourceName> =
+R extends 'multichainStats:pages_main' ? stats.MainPageMultichainStats :
+never;
+/* eslint-enable @stylistic/indent */
diff --git a/lib/api/types.ts b/lib/api/types.ts
index 91199d8add..458068c362 100644
--- a/lib/api/types.ts
+++ b/lib/api/types.ts
@@ -1,6 +1,6 @@
 export type ApiName =
 'general' | 'admin' | 'bens' | 'contractInfo' | 'clusters' | 'external' |
-'metadata' | 'multichain' | 'rewards' | 'stats' | 'tac' |
+'metadata' | 'multichainAggregator' | 'multichainStats' | 'rewards' | 'stats' | 'tac' |
 'userOps' | 'visualize' | 'zetachain';
 
 export interface ApiResource {
diff --git a/lib/api/useApiFetch.tsx b/lib/api/useApiFetch.tsx
index acf6515c56..afd614c714 100644
--- a/lib/api/useApiFetch.tsx
+++ b/lib/api/useApiFetch.tsx
@@ -3,7 +3,7 @@ import { omit, pickBy } from 'es-toolkit';
 import React from 'react';
 
 import type { CsrfData } from 'types/client/account';
-import type { ChainConfig } from 'types/multichain';
+import type { ExternalChainExtended } from 'types/externalChains';
 
 import isBodyAllowed from 'lib/api/isBodyAllowed';
 import isNeedProxy from 'lib/api/isNeedProxy';
@@ -21,7 +21,7 @@ export interface Params<R extends ResourceName> {
   queryParams?: Record<string, string | Array<string> | number | boolean | undefined | null>;
   fetchParams?: Pick<FetchParams, 'body' | 'method' | 'signal' | 'headers'>;
   logError?: boolean;
-  chain?: ChainConfig;
+  chain?: ExternalChainExtended;
 }
 
 export default function useApiFetch() {
diff --git a/lib/api/useApiInfiniteQuery.tsx b/lib/api/useApiInfiniteQuery.tsx
index 9f44b27145..e52bd65a78 100644
--- a/lib/api/useApiInfiniteQuery.tsx
+++ b/lib/api/useApiInfiniteQuery.tsx
@@ -15,22 +15,24 @@ export interface Params<R extends PaginatedResourceName> {
   // 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'];
+  queryParams?: Record<string, string | Array<string> | number | boolean | undefined | null>;
 }
 
-type ReturnType<Resource extends PaginatedResourceName> = UseInfiniteQueryResult<InfiniteData<ResourcePayload<Resource>>, ResourceError<unknown>>;
+export type ReturnType<Resource extends PaginatedResourceName> = UseInfiniteQueryResult<InfiniteData<ResourcePayload<Resource>>, ResourceError<unknown>>;
 
 export default function useApiInfiniteQuery<R extends PaginatedResourceName>({
   resourceName,
   queryOptions,
   pathParams,
+  queryParams,
 }: Params<R>): ReturnType<R> {
   const apiFetch = useApiFetch();
 
   return useInfiniteQuery<TQueryData<R>, TError, InfiniteData<TQueryData<R>>, QueryKey, TPageParam<R>>({
-    queryKey: getResourceKey(resourceName, { pathParams }),
+    queryKey: getResourceKey(resourceName, { pathParams, queryParams }),
     queryFn: (context) => {
-      const queryParams = 'pageParam' in context ? (context.pageParam || undefined) : undefined;
-      return apiFetch(resourceName, { pathParams, queryParams }) as Promise<TQueryData<R>>;
+      const nextQueryParams = 'pageParam' in context ? (context.pageParam || undefined) : undefined;
+      return apiFetch(resourceName, { pathParams, queryParams: { ...queryParams, ...nextQueryParams } }) as Promise<TQueryData<R>>;
     },
     initialPageParam: null,
     getNextPageParam: (lastPage) => {
diff --git a/lib/api/useApiQuery.tsx b/lib/api/useApiQuery.tsx
index 51e47c992b..e3cbba398b 100644
--- a/lib/api/useApiQuery.tsx
+++ b/lib/api/useApiQuery.tsx
@@ -1,9 +1,8 @@
 import type { UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 
-import type { ChainConfig } from 'types/multichain';
+import type { ExternalChainExtended } from 'types/externalChains';
 
-import multichainConfig from 'configs/multichain';
 import { useMultichainContext } from 'lib/contexts/multichain';
 import type { Params as FetchParams } from 'lib/hooks/useFetch';
 
@@ -12,37 +11,36 @@ import useApiFetch from './useApiFetch';
 
 export interface Params<R extends ResourceName, E = unknown, D = ResourcePayload<R>> {
   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' | 'headers'>;
   queryOptions?: Partial<Omit<UseQueryOptions<ResourcePayload<R>, ResourceError<E>, D>, 'queryFn'>>;
   logError?: boolean;
-  chainSlug?: string;
-  chain?: ChainConfig;
+  chain?: ExternalChainExtended;
 }
 
 export interface GetResourceKeyParams<R extends ResourceName, E = unknown, D = ResourcePayload<R>>
   extends Pick<Params<R, E, D>, 'pathParams' | 'queryParams'> {
-  chainSlug?: string;
+  chainId?: string;
 }
 
-export function getResourceKey<R extends ResourceName>(resource: R, { pathParams, queryParams, chainSlug }: GetResourceKeyParams<R> = {}) {
+export function getResourceKey<R extends ResourceName>(resource: R, { pathParams, queryParams, chainId }: GetResourceKeyParams<R> = {}) {
   if (pathParams || queryParams) {
-    return [ resource, chainSlug, { ...pathParams, ...queryParams } ].filter(Boolean);
+    return [ resource, chainId, { ...pathParams, ...queryParams } ].filter(Boolean);
   }
 
-  return [ resource, chainSlug ].filter(Boolean);
+  return [ resource, chainId ].filter(Boolean);
 }
 
 export default function useApiQuery<R extends ResourceName, E = unknown, D = ResourcePayload<R>>(
   resource: R,
-  { queryOptions, pathParams, queryParams, fetchParams, logError, chainSlug, chain: chainProp }: Params<R, E, D> = {},
+  { queryOptions, pathParams, queryParams, fetchParams, logError, chain: chainProp }: Params<R, E, D> = {},
 ) {
   const apiFetch = useApiFetch();
-  const { chain } = useMultichainContext() || (chainProp && { chain: chainProp }) ||
-    { chain: chainSlug ? multichainConfig()?.chains.find((chain) => chain.slug === chainSlug) : undefined };
+  const multichainContext = useMultichainContext();
+  const chain = chainProp || multichainContext?.chain;
 
   return useQuery<ResourcePayload<R>, ResourceError<E>, D>({
-    queryKey: queryOptions?.queryKey || getResourceKey(resource, { pathParams, queryParams, chainSlug: chain?.slug }),
+    queryKey: queryOptions?.queryKey || getResourceKey(resource, { pathParams, queryParams, chainId: chain?.id }),
     queryFn: async({ signal }) => {
       // all errors and error typing is handled by react-query
       // so error response will never go to the data
diff --git a/lib/contexts/multichain.tsx b/lib/contexts/multichain.tsx
index de3b1f721d..009debf3dc 100644
--- a/lib/contexts/multichain.tsx
+++ b/lib/contexts/multichain.tsx
@@ -1,42 +1,39 @@
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import multichainConfig from 'configs/multichain';
+import getChainIdFromSlug from 'lib/multichain/getChainIdFromSlug';
 import getQueryParamString from 'lib/router/getQueryParamString';
 
-export type ContextLevel = 'page' | 'tab';
-
 interface MultichainProviderProps {
   children: React.ReactNode;
-  chainSlug?: string;
-  level?: ContextLevel;
+  chainId?: string;
 }
 
 export interface TMultichainContext {
-  chain: ChainConfig;
-  level?: ContextLevel;
+  chain: ClusterChainConfig;
 }
 
 export const MultichainContext = React.createContext<TMultichainContext | null>(null);
 
-export function MultichainProvider({ children, chainSlug: chainSlugProp, level: levelProp }: MultichainProviderProps) {
+export function MultichainProvider({ children, chainId: chainIdProp }: MultichainProviderProps) {
   const router = useRouter();
-  const chainSlugQueryParam = router.pathname.includes('chain-slug') ? getQueryParamString(router.query['chain-slug']) : undefined;
+  const chainSlugQueryParam = router.pathname.includes('chain_slug') ? getQueryParamString(router.query.chain_slug) : undefined;
+  const chainIdQueryParam = router.query.chain_id ? getQueryParamString(router.query.chain_id) : undefined;
 
-  const [ chainSlug, setChainSlug ] = React.useState<string | undefined>(chainSlugProp ?? chainSlugQueryParam);
-  const [ level, setLevel ] = React.useState<ContextLevel | undefined>(levelProp);
+  const [ chainId, setChainId ] = React.useState<string | undefined>(
+    chainIdProp ??
+    chainIdQueryParam ??
+    (chainSlugQueryParam ? getChainIdFromSlug(chainSlugQueryParam) : undefined),
+  );
 
   React.useEffect(() => {
-    if (chainSlugProp) {
-      setChainSlug(chainSlugProp);
+    if (chainIdProp) {
+      setChainId(chainIdProp);
     }
-  }, [ chainSlugProp ]);
-
-  React.useEffect(() => {
-    setLevel(levelProp);
-  }, [ levelProp ]);
+  }, [ chainIdProp ]);
 
   const chain = React.useMemo(() => {
     const config = multichainConfig();
@@ -44,12 +41,12 @@ export function MultichainProvider({ children, chainSlug: chainSlugProp, level:
       return;
     }
 
-    if (!chainSlug) {
+    if (!chainId) {
       return;
     }
 
-    return config.chains.find((chain) => chain.slug === chainSlug);
-  }, [ chainSlug ]);
+    return config.chains.find((chain) => chain.id === chainId);
+  }, [ chainId ]);
 
   const value = React.useMemo(() => {
     if (!chain) {
@@ -58,9 +55,8 @@ export function MultichainProvider({ children, chainSlug: chainSlugProp, level:
 
     return {
       chain,
-      level,
     };
-  }, [ chain, level ]);
+  }, [ chain ]);
 
   return (
     <MultichainContext.Provider value={ value }>
diff --git a/lib/hooks/useNavItems.tsx b/lib/hooks/useNavItems.tsx
index 1ee38a5fb3..96b3f58bbb 100644
--- a/lib/hooks/useNavItems.tsx
+++ b/lib/hooks/useNavItems.tsx
@@ -40,7 +40,7 @@ export default function useNavItems(): ReturnType {
       text: 'Blocks',
       nextRoute: { pathname: '/blocks' as const },
       icon: 'block',
-      isActive: pathname === '/blocks' || pathname === '/block/[height_or_hash]' || pathname === '/chain/[chain-slug]/block/[height_or_hash]',
+      isActive: pathname === '/blocks' || pathname === '/block/[height_or_hash]' || pathname === '/chain/[chain_slug]/block/[height_or_hash]',
     };
     const txs: NavItem | null = {
       text: 'Transactions',
@@ -50,7 +50,7 @@ export default function useNavItems(): ReturnType {
         // sorry, but this is how it was designed
         (pathname === '/txs' && (!config.features.zetachain.isEnabled || !tab || !tab.includes('cctx'))) ||
         pathname === '/tx/[hash]' ||
-        pathname === '/chain/[chain-slug]/tx/[hash]',
+        pathname === '/chain/[chain_slug]/tx/[hash]',
     };
     const cctxs: NavItem | null = config.features.zetachain.isEnabled ? {
       text: 'Cross-chain transactions',
@@ -74,7 +74,7 @@ export default function useNavItems(): ReturnType {
       text: 'User operations',
       nextRoute: { pathname: '/ops' as const },
       icon: 'user_op',
-      isActive: pathname === '/ops' || pathname === '/op/[hash]' || pathname === '/chain/[chain-slug]/op/[hash]',
+      isActive: pathname === '/ops' || pathname === '/op/[hash]' || pathname === '/chain/[chain_slug]/op/[hash]',
     } : null;
 
     const verifiedContracts: NavItem | null =
@@ -310,7 +310,6 @@ export default function useNavItems(): ReturnType {
     const otherNavItems: Array<NavItem> | Array<Array<NavItem>> = [
       config.features.opSuperchain.isEnabled ? {
         text: 'Verify contract',
-        // TODO @tom2drum adjust URL to Vera
         url: 'https://vera.blockscout.com',
       } : {
         text: 'Verify contract',
diff --git a/lib/metadata/getPageOgType.ts b/lib/metadata/getPageOgType.ts
index de7482a600..30495eb4d9 100644
--- a/lib/metadata/getPageOgType.ts
+++ b/lib/metadata/getPageOgType.ts
@@ -70,16 +70,17 @@ const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
   '/cc/tx/[hash]': 'Regular page',
 
   // multichain routes
-  '/chain/[chain-slug]/accounts/label/[slug]': 'Root page',
-  '/chain/[chain-slug]/advanced-filter': 'Regular page',
-  '/chain/[chain-slug]/block/[height_or_hash]': 'Regular page',
-  '/chain/[chain-slug]/block/countdown': 'Regular page',
-  '/chain/[chain-slug]/block/countdown/[height]': 'Regular page',
-  '/chain/[chain-slug]/csv-export': 'Regular page',
-  '/chain/[chain-slug]/op/[hash]': 'Regular page',
-  '/chain/[chain-slug]/token/[hash]': 'Regular page',
-  '/chain/[chain-slug]/token/[hash]/instance/[id]': 'Regular page',
-  '/chain/[chain-slug]/tx/[hash]': 'Regular page',
+  '/chain/[chain_slug]/accounts/label/[slug]': 'Root page',
+  '/chain/[chain_slug]/advanced-filter': 'Regular page',
+  '/chain/[chain_slug]/block/[height_or_hash]': 'Regular page',
+  '/chain/[chain_slug]/block/countdown': 'Regular page',
+  '/chain/[chain_slug]/block/countdown/[height]': 'Regular page',
+  '/chain/[chain_slug]/csv-export': 'Regular page',
+  '/chain/[chain_slug]/op/[hash]': 'Regular page',
+  '/chain/[chain_slug]/token/[hash]': 'Regular page',
+  '/chain/[chain_slug]/token/[hash]/instance/[id]': 'Regular page',
+  '/chain/[chain_slug]/tx/[hash]': 'Regular page',
+  '/chain/[chain_slug]/visualize/sol2uml': 'Regular page',
 
   // service routes, added only to make typescript happy
   '/login': 'Regular page',
diff --git a/lib/metadata/templates/description.ts b/lib/metadata/templates/description.ts
index bbb52227a9..164741a2e1 100644
--- a/lib/metadata/templates/description.ts
+++ b/lib/metadata/templates/description.ts
@@ -73,16 +73,17 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/cc/tx/[hash]': DEFAULT_TEMPLATE,
 
   // multichain routes
-  '/chain/[chain-slug]/accounts/label/[slug]': DEFAULT_TEMPLATE,
-  '/chain/[chain-slug]/advanced-filter': DEFAULT_TEMPLATE,
-  '/chain/[chain-slug]/block/[height_or_hash]': DEFAULT_TEMPLATE,
-  '/chain/[chain-slug]/block/countdown': DEFAULT_TEMPLATE,
-  '/chain/[chain-slug]/block/countdown/[height]': DEFAULT_TEMPLATE,
-  '/chain/[chain-slug]/csv-export': DEFAULT_TEMPLATE,
-  '/chain/[chain-slug]/op/[hash]': DEFAULT_TEMPLATE,
-  '/chain/[chain-slug]/token/[hash]': DEFAULT_TEMPLATE,
-  '/chain/[chain-slug]/token/[hash]/instance/[id]': DEFAULT_TEMPLATE,
-  '/chain/[chain-slug]/tx/[hash]': DEFAULT_TEMPLATE,
+  '/chain/[chain_slug]/accounts/label/[slug]': DEFAULT_TEMPLATE,
+  '/chain/[chain_slug]/advanced-filter': DEFAULT_TEMPLATE,
+  '/chain/[chain_slug]/block/[height_or_hash]': DEFAULT_TEMPLATE,
+  '/chain/[chain_slug]/block/countdown': DEFAULT_TEMPLATE,
+  '/chain/[chain_slug]/block/countdown/[height]': DEFAULT_TEMPLATE,
+  '/chain/[chain_slug]/csv-export': DEFAULT_TEMPLATE,
+  '/chain/[chain_slug]/op/[hash]': DEFAULT_TEMPLATE,
+  '/chain/[chain_slug]/token/[hash]': DEFAULT_TEMPLATE,
+  '/chain/[chain_slug]/token/[hash]/instance/[id]': DEFAULT_TEMPLATE,
+  '/chain/[chain_slug]/tx/[hash]': DEFAULT_TEMPLATE,
+  '/chain/[chain_slug]/visualize/sol2uml': DEFAULT_TEMPLATE,
 
   // service routes, added only to make typescript happy
   '/login': DEFAULT_TEMPLATE,
diff --git a/lib/metadata/templates/title.ts b/lib/metadata/templates/title.ts
index f47f45e21a..65abde5d5e 100644
--- a/lib/metadata/templates/title.ts
+++ b/lib/metadata/templates/title.ts
@@ -74,16 +74,17 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/cc/tx/[hash]': '%network_name% cross-chain transaction %hash% details',
 
   // multichain routes
-  '/chain/[chain-slug]/accounts/label/[slug]': '%network_name% addresses search by label',
-  '/chain/[chain-slug]/advanced-filter': '%network_name% advanced filter',
-  '/chain/[chain-slug]/block/[height_or_hash]': '%network_name% block %height_or_hash% details',
-  '/chain/[chain-slug]/block/countdown': '%network_name% block countdown index',
-  '/chain/[chain-slug]/block/countdown/[height]': '%network_name% block %height% countdown',
-  '/chain/[chain-slug]/csv-export': '%network_name% export data to CSV',
-  '/chain/[chain-slug]/op/[hash]': '%network_name% user operation %hash% details',
-  '/chain/[chain-slug]/token/[hash]': '%network_name% token details',
-  '/chain/[chain-slug]/token/[hash]/instance/[id]': '%network_name% token NFT instance',
-  '/chain/[chain-slug]/tx/[hash]': '%network_name% transaction %hash% details',
+  '/chain/[chain_slug]/accounts/label/[slug]': '%network_name% addresses search by label',
+  '/chain/[chain_slug]/advanced-filter': '%network_name% advanced filter',
+  '/chain/[chain_slug]/block/[height_or_hash]': '%network_name% block %height_or_hash% details',
+  '/chain/[chain_slug]/block/countdown': '%network_name% block countdown index',
+  '/chain/[chain_slug]/block/countdown/[height]': '%network_name% block %height% countdown',
+  '/chain/[chain_slug]/csv-export': '%network_name% export data to CSV',
+  '/chain/[chain_slug]/op/[hash]': '%network_name% user operation %hash% details',
+  '/chain/[chain_slug]/token/[hash]': '%network_name% token details',
+  '/chain/[chain_slug]/token/[hash]/instance/[id]': '%network_name% token NFT instance',
+  '/chain/[chain_slug]/tx/[hash]': '%network_name% transaction %hash% details',
+  '/chain/[chain_slug]/visualize/sol2uml': '%network_name% Solidity UML diagram',
 
   // service routes, added only to make typescript happy
   '/login': '%network_name% login',
diff --git a/lib/mixpanel/getPageType.ts b/lib/mixpanel/getPageType.ts
index ff9b4ce3e0..c2e1491edd 100644
--- a/lib/mixpanel/getPageType.ts
+++ b/lib/mixpanel/getPageType.ts
@@ -68,16 +68,17 @@ export const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/cc/tx/[hash]': 'Cross-chain transaction details',
 
   // multichain routes
-  '/chain/[chain-slug]/accounts/label/[slug]': 'Chain addresses search by label',
-  '/chain/[chain-slug]/advanced-filter': 'Chain advanced filter',
-  '/chain/[chain-slug]/block/[height_or_hash]': 'Chain block details',
-  '/chain/[chain-slug]/block/countdown': 'Chain block countdown index',
-  '/chain/[chain-slug]/block/countdown/[height]': 'Chain block countdown',
-  '/chain/[chain-slug]/csv-export': 'Chain export data to CSV',
-  '/chain/[chain-slug]/op/[hash]': 'Chain user operation details',
-  '/chain/[chain-slug]/token/[hash]': 'Chain token details',
-  '/chain/[chain-slug]/token/[hash]/instance/[id]': 'Chain token NFT instance',
-  '/chain/[chain-slug]/tx/[hash]': 'Chain transaction details',
+  '/chain/[chain_slug]/accounts/label/[slug]': 'Chain addresses search by label',
+  '/chain/[chain_slug]/advanced-filter': 'Chain advanced filter',
+  '/chain/[chain_slug]/block/[height_or_hash]': 'Chain block details',
+  '/chain/[chain_slug]/block/countdown': 'Chain block countdown index',
+  '/chain/[chain_slug]/block/countdown/[height]': 'Chain block countdown',
+  '/chain/[chain_slug]/csv-export': 'Chain export data to CSV',
+  '/chain/[chain_slug]/op/[hash]': 'Chain user operation details',
+  '/chain/[chain_slug]/token/[hash]': 'Chain token details',
+  '/chain/[chain_slug]/token/[hash]/instance/[id]': 'Chain token NFT instance',
+  '/chain/[chain_slug]/tx/[hash]': 'Chain transaction details',
+  '/chain/[chain_slug]/visualize/sol2uml': 'Chain Solidity UML diagram',
 
   // service routes, added only to make typescript happy
   '/login': 'Login',
diff --git a/lib/mixpanel/useInit.tsx b/lib/mixpanel/useInit.tsx
index ccb6675cc4..da2f849b48 100644
--- a/lib/mixpanel/useInit.tsx
+++ b/lib/mixpanel/useInit.tsx
@@ -12,6 +12,8 @@ import getQueryParamString from 'lib/router/getQueryParamString';
 
 import * as userProfile from './userProfile';
 
+const opSuperchainFeature = config.features.opSuperchain;
+
 export default function useMixpanelInit() {
   const [ isInited, setIsInited ] = React.useState(false);
   const router = useRouter();
@@ -44,6 +46,7 @@ export default function useMixpanelInit() {
       Language: window.navigator.language,
       'Device type': capitalize(deviceType),
       'User id': uuid,
+      ...(opSuperchainFeature.isEnabled ? { 'Cluster name': opSuperchainFeature.cluster } : {}),
     });
     mixpanel.identify(uuid);
     userProfile.set({
diff --git a/lib/multichain/contract.ts b/lib/multichain/contract.ts
new file mode 100644
index 0000000000..ea75f3576b
--- /dev/null
+++ b/lib/multichain/contract.ts
@@ -0,0 +1,38 @@
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+
+export function getName(data: { chain_infos: Record<string, multichain.GetAddressResponse_ChainInfo> }) {
+  const chainInfos = Object.values(data.chain_infos ?? {});
+  const isContractChains = chainInfos.filter((chainInfo) => chainInfo.is_contract);
+  const names = isContractChains.map((chainInfo) => chainInfo.contract_name);
+
+  if (names.some((name) => !name)) {
+    return;
+  }
+
+  const uniqueNames = [ ...new Set(names) ];
+
+  if (uniqueNames.length === 1) {
+    return uniqueNames[0];
+  }
+}
+
+export function isContract(data: { chain_infos: Record<string, multichain.GetAddressResponse_ChainInfo> } | undefined) {
+  if (!data) {
+    return false;
+  }
+
+  const chainInfos = Object.values(data.chain_infos ?? {});
+  const isContractChains = chainInfos.filter((chainInfo) => chainInfo.is_contract);
+  return isContractChains.length > chainInfos.length / 2;
+}
+
+export function isVerified(data: { chain_infos: Record<string, multichain.GetAddressResponse_ChainInfo> } | undefined) {
+  if (!data) {
+    return false;
+  }
+
+  const chainInfos = Object.values(data.chain_infos ?? {});
+  const isContractChains = chainInfos.filter((chainInfo) => chainInfo.is_contract);
+  const isVerifiedChains = chainInfos.filter((chainInfo) => chainInfo.is_verified);
+  return isVerifiedChains.length > 0 && isVerifiedChains.length === isContractChains.length;
+}
diff --git a/lib/multichain/getChainDataForList.ts b/lib/multichain/getChainDataForList.ts
deleted file mode 100644
index 96ef82af5c..0000000000
--- a/lib/multichain/getChainDataForList.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { TMultichainContext } from 'lib/contexts/multichain';
-
-export function getChainDataForList(multichainContext: TMultichainContext | null) {
-  // for now we only show chain icon in the list with chain selector (not in the entire local pages)
-  return multichainContext?.chain && multichainContext.level !== 'page' ? multichainContext.chain : undefined;
-}
diff --git a/lib/multichain/getChainIdFromSlug.ts b/lib/multichain/getChainIdFromSlug.ts
new file mode 100644
index 0000000000..b9cff67092
--- /dev/null
+++ b/lib/multichain/getChainIdFromSlug.ts
@@ -0,0 +1,10 @@
+import multichainConfig from 'configs/multichain';
+
+export default function getChainIdFromSlug(slug: string) {
+  const config = multichainConfig();
+  if (!config) {
+    return undefined;
+  }
+
+  return config.chains.find((chain) => chain.slug === slug)?.id;
+}
diff --git a/lib/multichain/getChainTooltipText.ts b/lib/multichain/getChainTooltipText.ts
deleted file mode 100644
index 5c32a1e6ab..0000000000
--- a/lib/multichain/getChainTooltipText.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { ChainConfig } from 'types/multichain';
-
-export default function getChainTooltipText(chain: ChainConfig, prefix: string = '') {
-  return `${ prefix }${ chain.config.chain.name } (Chain ID ${ chain.config.chain.id })`;
-}
diff --git a/lib/multichain/getChainValueFromQuery.ts b/lib/multichain/getChainValueFromQuery.ts
index f85e591302..74d05646ed 100644
--- a/lib/multichain/getChainValueFromQuery.ts
+++ b/lib/multichain/getChainValueFromQuery.ts
@@ -3,12 +3,35 @@ import type { Router } from 'next/router';
 import multichainConfig from 'configs/multichain';
 import getQueryParamString from 'lib/router/getQueryParamString';
 
-export default function getChainValueFromQuery(query: Router['query']) {
+export default function getChainValueFromQuery(
+  query: Router['query'],
+  chainIds?: Array<string>,
+  withAllOption?: boolean,
+) {
   const config = multichainConfig();
   if (!config) {
     return undefined;
   }
 
-  const queryParam = getQueryParamString(query['chain-slug']);
-  return queryParam || config.chains[0].slug;
+  const chainId = getQueryParamString(query.chain_id);
+  const chainSlug = getQueryParamString(query.chain_slug);
+
+  if (chainId) {
+    if (config.chains.some((chain) => chain.id === chainId)) {
+      return chainId;
+    }
+  }
+
+  if (chainSlug) {
+    const chain = config.chains.find((chain) => chain.slug === chainSlug);
+    if (chain) {
+      return chain.id;
+    }
+  }
+
+  if (withAllOption) {
+    return 'all';
+  }
+
+  return config.chains.filter((chain) => !chainIds || (chain.id && chainIds.includes(chain.id)))?.[0]?.id;
 }
diff --git a/lib/multichain/getCurrencySymbol.ts b/lib/multichain/getCurrencySymbol.ts
index 1606d9d6ac..9822a8cca9 100644
--- a/lib/multichain/getCurrencySymbol.ts
+++ b/lib/multichain/getCurrencySymbol.ts
@@ -1,6 +1,6 @@
 import multichainConfig from 'configs/multichain';
 
 export default function getCurrencySymbol() {
-  const nativeCurrency = multichainConfig()?.chains[0]?.config.chain.currency;
+  const nativeCurrency = multichainConfig()?.chains[0]?.app_config.chain.currency;
   return nativeCurrency?.symbol;
 }
diff --git a/lib/multichain/getIconUrl.ts b/lib/multichain/getIconUrl.ts
deleted file mode 100644
index 19a8749e95..0000000000
--- a/lib/multichain/getIconUrl.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { ChainConfig } from 'types/multichain';
-
-export default function getIconUrl(config: ChainConfig) {
-  if (!config.config?.UI?.navigation?.icon || !config.config.app) {
-    return;
-  }
-
-  const iconPath = config.config.UI.navigation.icon.default;
-
-  if (iconPath?.startsWith('http')) {
-    return iconPath;
-  }
-
-  const appUrl = config.config.app.baseUrl;
-  return `${ appUrl }${ iconPath }`;
-}
diff --git a/lib/multichain/useRoutedChainSelect.ts b/lib/multichain/useRoutedChainSelect.ts
index e12b068a8f..284d623501 100644
--- a/lib/multichain/useRoutedChainSelect.ts
+++ b/lib/multichain/useRoutedChainSelect.ts
@@ -1,3 +1,4 @@
+import { pickBy } from 'es-toolkit';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -5,27 +6,40 @@ import getChainValueFromQuery from './getChainValueFromQuery';
 
 interface Props {
   persistedParams?: Array<string>;
+  isLoading?: boolean;
+  chainIds?: Array<string>;
+  withAllOption?: boolean;
 }
 
 export default function useRoutedChainSelect(props?: Props) {
   const router = useRouter();
 
   const [ value, setValue ] = React.useState<Array<string> | undefined>(
-    [ getChainValueFromQuery(router.query) ].filter(Boolean),
+    props?.isLoading ? undefined : [ getChainValueFromQuery(router.query, props?.chainIds, props?.withAllOption) ].filter(Boolean),
   );
 
+  React.useEffect(() => {
+    if (!props?.isLoading) {
+      setValue([ getChainValueFromQuery(router.query, props?.chainIds, props?.withAllOption) ].filter(Boolean));
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ props?.isLoading, props?.chainIds ]);
+
   const onValueChange = React.useCallback(({ value }: { value: Array<string> }) => {
     setValue(value);
 
-    const nextQuery = props?.persistedParams ? props.persistedParams.reduce((acc, param) => ({ ...acc, [param]: router.query[param] }), {}) : router.query;
+    const nextQuery = props?.persistedParams ?
+      props.persistedParams.reduce((acc, param) => ({ ...acc, [param]: router.query[param] || undefined }), {}) :
+      router.query;
 
     router.push({
       pathname: router.pathname,
-      query: {
+      query: pickBy({
         ...nextQuery,
-        'chain-slug': value[0],
-      },
+        chain_id: value[0],
+      }, (value) => value !== undefined),
     });
+
   }, [ props?.persistedParams, router ]);
 
   return React.useMemo(() => ({
diff --git a/lib/web3/chains.ts b/lib/web3/chains.ts
index 3622d69d58..9d5b0647f6 100644
--- a/lib/web3/chains.ts
+++ b/lib/web3/chains.ts
@@ -4,7 +4,11 @@ import appConfig from 'configs/app';
 import essentialDappsChainsConfig from 'configs/essential-dapps-chains';
 import multichainConfig from 'configs/multichain';
 
-const getChainInfo = (config: typeof appConfig = appConfig, contracts?: Chain['contracts']): Chain => {
+const getChainInfo = (config: Partial<typeof appConfig> = appConfig, contracts?: Chain['contracts']): Chain | undefined => {
+  if (!config.chain || !config.app) {
+    return;
+  }
+
   return {
     id: Number(config.chain.id),
     name: config.chain.name ?? '',
@@ -70,7 +74,7 @@ export const clusterChains: Array<Chain> | undefined = (() => {
     return;
   }
 
-  return config.chains.map(({ config, contracts }) => getChainInfo(config, contracts)).filter(Boolean);
+  return config.chains.map(({ app_config: config }) => getChainInfo(config)).filter(Boolean);
 })();
 
 export const essentialDappsChains: Array<Chain> | undefined = (() => {
@@ -80,7 +84,7 @@ export const essentialDappsChains: Array<Chain> | undefined = (() => {
     return;
   }
 
-  return config.chains.map(({ config, contracts }) => getChainInfo(config, contracts)).filter(Boolean);
+  return config.chains.map(({ app_config: config, contracts }) => getChainInfo(config, contracts)).filter(Boolean);
 })();
 
 export const chains = (() => {
diff --git a/lib/web3/client.ts b/lib/web3/client.ts
index 08f00966d4..1e849e01de 100644
--- a/lib/web3/client.ts
+++ b/lib/web3/client.ts
@@ -3,7 +3,6 @@ import { createPublicClient, http } from 'viem';
 import { currentChain } from './chains';
 
 export const publicClient = (() => {
-  // TODO @tom2drum public clients for multichain (currently used only in degradation views)
   if (currentChain?.rpcUrls.default.http.filter(Boolean).length === 0) {
     return;
   }
diff --git a/lib/web3/useAddChain.tsx b/lib/web3/useAddChain.tsx
index 4864dbbfb1..610e0841c8 100644
--- a/lib/web3/useAddChain.tsx
+++ b/lib/web3/useAddChain.tsx
@@ -32,7 +32,7 @@ export default function useAddChain() {
   const { trackUsage } = useRewardsActivity();
   const multichainContext = useMultichainContext();
 
-  const chainConfig = multichainContext?.chain.config ?? config;
+  const chainConfig = multichainContext?.chain.app_config || config;
 
   return React.useCallback(async() => {
     if (!wallet || !provider) {
diff --git a/lib/web3/useProvider.tsx b/lib/web3/useProvider.tsx
index 0ca4502d80..ac95440b78 100644
--- a/lib/web3/useProvider.tsx
+++ b/lib/web3/useProvider.tsx
@@ -10,7 +10,7 @@ import useDetectWalletEip6963 from './useDetectWalletEip6963';
 
 export default function useProvider() {
   const multichainContext = useMultichainContext();
-  const feature = (multichainContext?.chain.config ?? config).features.web3Wallet;
+  const feature = (multichainContext?.chain.app_config ?? config).features.web3Wallet;
   const wallets = getFeaturePayload(feature)?.wallets;
 
   const { detect: detectWalletEip6963 } = useDetectWalletEip6963();
diff --git a/lib/web3/useSwitchChain.tsx b/lib/web3/useSwitchChain.tsx
index 7d3153671c..0a8c61ac63 100644
--- a/lib/web3/useSwitchChain.tsx
+++ b/lib/web3/useSwitchChain.tsx
@@ -18,7 +18,7 @@ export default function useSwitchChain() {
   const { data: { wallet, provider } = {} } = useProvider();
   const multichainContext = useMultichainContext();
 
-  const chainConfig = multichainContext?.chain.config ?? config;
+  const chainConfig = multichainContext?.chain.app_config ?? config;
 
   return React.useCallback(() => {
     if (!wallet || !provider) {
diff --git a/lib/web3/wagmiConfig.ts b/lib/web3/wagmiConfig.ts
index adb8a2b7b3..6bf6716b37 100644
--- a/lib/web3/wagmiConfig.ts
+++ b/lib/web3/wagmiConfig.ts
@@ -11,15 +11,15 @@ import { chains, parentChain } from 'lib/web3/chains';
 
 const feature = appConfig.features.blockchainInteraction;
 
-const getChainTransportFromConfig = (config: typeof appConfig, readOnly?: boolean): Record<string, Transport> => {
-  if (!config.chain.id) {
+const getChainTransportFromConfig = (config: Partial<typeof appConfig> | undefined, readOnly?: boolean): Record<string, Transport> => {
+  if (!config?.chain?.id) {
     return {};
   }
 
   return {
     [config.chain.id]: fallback(
       config.chain.rpcUrls
-        .concat(readOnly ? `${ config.apis.general.endpoint }/api/eth-rpc` : '')
+        .concat(readOnly && config.apis?.general ? `${ config.apis.general.endpoint }/api/eth-rpc` : '')
         .filter(Boolean)
         .map((url) => http(url, { batch: { wait: 100, batchSize: 5 } })),
     ),
@@ -36,7 +36,7 @@ const reduceExternalChainsToTransportConfig = (readOnly: boolean): Record<string
   }
 
   return chains
-    .map(({ config }) => getChainTransportFromConfig(config, readOnly))
+    .map(({ app_config: config }) => getChainTransportFromConfig(config, readOnly))
     .reduce((result, item) => {
       Object.entries(item).map(([ id, transport ]) => {
         result[id] = transport;
diff --git a/mocks/multichain/opSuperchain.ts b/mocks/multichain/opSuperchain.ts
index 0573485d96..143547fa04 100644
--- a/mocks/multichain/opSuperchain.ts
+++ b/mocks/multichain/opSuperchain.ts
@@ -1,14 +1,18 @@
-import type { ChainConfig } from 'types/multichain';
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+import type { AddressTokenItem } from 'types/client/multichain-aggregator';
+import type { ClusterChainConfig } from 'types/multichain';
 
 export const chainDataA = {
   slug: 'op-mainnet',
-  config: {
+  name: 'OP Mainnet',
+  id: '420',
+  logo: 'https://example.com/logo_s.png',
+  explorer_url: 'https://op-mainnet.com',
+  app_config: {
     app: {
       baseUrl: 'https://op-mainnet.com',
     },
     chain: {
-      name: 'OP Mainnet',
-      id: '420',
       currency: {
         name: 'Ether',
         symbol: 'ETH',
@@ -18,13 +22,6 @@ export const chainDataA = {
         'https://rpc.op-mainnet.com',
       ],
     },
-    UI: {
-      navigation: {
-        icon: {
-          'default': '/logo.png',
-        },
-      },
-    },
     apis: {
       general: {
         host: 'localhost',
@@ -44,4 +41,166 @@ export const chainDataA = {
       },
     },
   },
-} as ChainConfig;
+} as ClusterChainConfig;
+
+export const chainDataB = {
+  ...chainDataA,
+  id: '421',
+  name: 'OP Testnet',
+  logo: 'https://example.com/logo_md.png',
+  slug: 'op-testnet',
+  explorer_url: 'https://op-testnet.com',
+  app_config: {
+    ...chainDataA.app_config,
+    app: {
+      baseUrl: 'https://op-testnet.com',
+    },
+    apis: {
+      general: {
+        ...chainDataA.app_config?.apis?.general,
+        port: '4004',
+        endpoint: 'http://localhost:4004',
+      },
+    },
+  },
+} as ClusterChainConfig;
+
+export const chainDataC = {
+  ...chainDataA,
+  id: '422',
+  name: 'OP Devnet',
+  slug: 'op-devnet',
+  explorer_url: 'https://op-devnet.com',
+  logo: undefined,
+  app_config: {
+    ...chainDataA.app_config,
+    app: {
+      baseUrl: 'https://op-devnet.com',
+    },
+    apis: {
+      general: {
+        ...chainDataA.app_config?.apis?.general,
+        port: '4005',
+        endpoint: 'http://localhost:4005',
+      },
+    },
+  },
+} as ClusterChainConfig;
+
+export const addressA: multichain.GetAddressResponse = {
+  hash: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045',
+  chain_infos: {
+    '420': {
+      coin_balance: '33298149965862412288',
+      is_contract: false,
+      is_verified: false,
+      contract_name: undefined,
+    },
+    '421': {
+      coin_balance: '1836931848855642237',
+      is_contract: true,
+      is_verified: false,
+      contract_name: undefined,
+    },
+    '422': {
+      coin_balance: '0',
+      is_contract: true,
+      is_verified: true,
+      contract_name: 'Test Contract',
+    },
+  },
+  has_tokens: true,
+  has_interop_message_transfers: false,
+  coin_balance: '35135081814718054525',
+  exchange_rate: '123.455',
+};
+
+export const tokenA: AddressTokenItem = {
+  token: {
+    address_hash: '0xaA8E23Fb1079EA71e0a56F48a2aA51851D8433D0',
+    circulating_market_cap: '10.01',
+    decimals: '6',
+    holders_count: '1250',
+    icon_url: null,
+    name: 'USDT',
+    symbol: 'USDT',
+    total_supply: '284529257047384793',
+    type: 'ERC-20',
+    exchange_rate: '123.456',
+    chain_infos: {
+      '420': {
+        holders_count: '1250',
+        total_supply: '184529257047384791',
+        is_verified: true,
+        contract_name: 'TestnetERC20',
+      },
+      '421': {
+        holders_count: '1250',
+        total_supply: '100000000000000002',
+        is_verified: true,
+        contract_name: 'TestnetERC20',
+      },
+    },
+    reputation: null,
+  },
+  token_instance: null,
+  token_id: null,
+  value: '9038000000',
+  chain_values: {
+    '420': '1038000000',
+    '421': '8000000000',
+  },
+};
+
+export const searchAddressesA: multichain.GetAddressResponse = {
+  hash: '0x0000000002C5fE54822a1eD058AE2F937Fd42769',
+  chain_infos: {
+    '420': {
+      coin_balance: '0',
+      is_contract: false,
+      is_verified: false,
+      contract_name: undefined,
+    },
+  },
+  has_tokens: false,
+  has_interop_message_transfers: false,
+  coin_balance: '0',
+  exchange_rate: '123.456',
+};
+
+export const searchAddressesB: multichain.GetAddressResponse = {
+  hash: '0x00883b68A6EcF2ea3D47BD735E5125a0B7625B53',
+  chain_infos: {
+    '420': {
+      coin_balance: '0',
+      is_contract: true,
+      is_verified: true,
+      contract_name: 'USDT',
+    },
+  },
+  has_tokens: false,
+  has_interop_message_transfers: false,
+  coin_balance: '0',
+  exchange_rate: '123.456',
+};
+
+export const searchTokenA: multichain.AggregatedTokenInfo = {
+  address_hash: '0x94b008aA00579c1307B0EF2c499aD98a8ce58e58',
+  circulating_market_cap: '162513452583.22',
+  decimals: '6',
+  holders_count: '1148927',
+  icon_url: undefined,
+  name: 'Tether USD',
+  symbol: 'USDT',
+  total_supply: '1000000',
+  type: 'ERC-20' as multichain.TokenType,
+  exchange_rate: '1.00',
+  chain_infos: {
+    '420': {
+      holders_count: '1148927',
+      total_supply: '1000000',
+      is_verified: false,
+      contract_name: undefined,
+    },
+  },
+};
diff --git a/nextjs/csp/policies/marketplace.ts b/nextjs/csp/policies/marketplace.ts
index cb0afc2876..9df5bf7b99 100644
--- a/nextjs/csp/policies/marketplace.ts
+++ b/nextjs/csp/policies/marketplace.ts
@@ -11,8 +11,8 @@ export function marketplace(): CspDev.DirectiveDescriptor {
   }
 
   const chainsConfig = feature.essentialDapps && essentialDappsChains.getValue();
-  const externalApiEndpoints = chainsConfig?.chains.map((chain) => chain.config.apis.general?.endpoint).filter(Boolean);
-  const defaultRpcUrls = chainsConfig?.chains.map((chain) => chain.config.chain.rpcUrls).flat();
+  const externalApiEndpoints = chainsConfig?.chains.map((chain) => chain.app_config?.apis?.general?.endpoint).filter(Boolean);
+  const defaultRpcUrls = chainsConfig?.chains.map((chain) => chain.app_config?.chain?.rpcUrls).flat().filter(Boolean);
 
   const liFiHost = feature.essentialDapps?.swap ? 'li.quest' : '';
   const multisenderHost = feature.essentialDapps?.multisend ? '*.multisender.app' : '';
diff --git a/nextjs/csp/policies/multichain.ts b/nextjs/csp/policies/multichain.ts
index 6924a629cb..b82d69511a 100644
--- a/nextjs/csp/policies/multichain.ts
+++ b/nextjs/csp/policies/multichain.ts
@@ -9,18 +9,20 @@ export function multichain(): CspDev.DirectiveDescriptor {
   }
 
   const apiEndpoints = value.chains.map((chain) => {
-    return [
-      ...Object.values(chain.config.apis).filter(Boolean).map((api) => api.endpoint),
-      ...Object.values(chain.config.apis).filter(Boolean).map((api) => api.socketEndpoint),
-    ].filter(Boolean);
+    return chain.app_config?.apis ? [
+      ...Object.values(chain.app_config.apis).filter(Boolean).map((api) => api.endpoint),
+      ...Object.values(chain.app_config.apis).filter(Boolean).map((api) => api.socketEndpoint),
+    ].filter(Boolean) : [];
   }).flat();
 
-  const rpcEndpoints = value.chains.map(({ config }) => config.chain.rpcUrls).flat();
+  const rpcEndpoints = value.chains.map(({ app_config: config }) => config?.chain?.rpcUrls).flat().filter(Boolean);
 
   return {
     'connect-src': [
       ...apiEndpoints,
       ...rpcEndpoints,
+      // please see comment in the useFetchParentChainApi.tsx file
+      'https://eth.blockscout.com',
     ],
   };
 }
diff --git a/nextjs/getServerSideProps/main.ts b/nextjs/getServerSideProps/main.ts
index 91006ecb06..d0e16c6e2d 100644
--- a/nextjs/getServerSideProps/main.ts
+++ b/nextjs/getServerSideProps/main.ts
@@ -3,6 +3,8 @@ import { factory } from './utils';
 
 export const base = factory([ ]);
 export const block = factory([ guards.notOpSuperchain ]);
+export const tx = factory([ guards.notOpSuperchain ]);
+export const token = factory([ guards.notOpSuperchain ]);
 export const account = factory([ guards.account ]);
 export const verifiedAddresses = factory([ guards.account, guards.verifiedAddresses ]);
 export const userOps = factory([ guards.userOps ]);
diff --git a/nextjs/getServerSideProps/utils.ts b/nextjs/getServerSideProps/utils.ts
index ae73347d1f..a632febf8a 100644
--- a/nextjs/getServerSideProps/utils.ts
+++ b/nextjs/getServerSideProps/utils.ts
@@ -35,15 +35,15 @@ export const factory = (guards: Array<Guard | Array<Guard>>, chainConfig = confi
 
 export const factoryMultichain = (guards: Array<Guard>) => {
   return async(context: GetServerSidePropsContext) => {
-    const chainSlug = context.params?.['chain-slug'];
+    const chainSlug = context.params?.chain_slug;
     const chain = multichainConfig()?.chains.find((chain) => chain.slug === chainSlug);
 
-    if (!chain?.config) {
+    if (!chain?.app_config) {
       return {
         notFound: true,
       };
     }
 
-    return factory(guards, chain.config)(context);
+    return factory(guards, chain.app_config)(context);
   };
 };
diff --git a/nextjs/nextjs-routes.d.ts b/nextjs/nextjs-routes.d.ts
index 5186af57da..cd7d01380d 100644
--- a/nextjs/nextjs-routes.d.ts
+++ b/nextjs/nextjs-routes.d.ts
@@ -39,16 +39,17 @@ declare module "nextjs-routes" {
     | StaticRoute<"/block/countdown">
     | StaticRoute<"/blocks">
     | DynamicRoute<"/cc/tx/[hash]", { "hash": string }>
-    | DynamicRoute<"/chain/[chain-slug]/accounts/label/[slug]", { "chain-slug": string; "slug": string }>
-    | DynamicRoute<"/chain/[chain-slug]/advanced-filter", { "chain-slug": string }>
-    | DynamicRoute<"/chain/[chain-slug]/block/[height_or_hash]", { "chain-slug": string; "height_or_hash": string }>
-    | DynamicRoute<"/chain/[chain-slug]/block/countdown/[height]", { "chain-slug": string; "height": string }>
-    | DynamicRoute<"/chain/[chain-slug]/block/countdown", { "chain-slug": string }>
-    | DynamicRoute<"/chain/[chain-slug]/csv-export", { "chain-slug": string }>
-    | DynamicRoute<"/chain/[chain-slug]/op/[hash]", { "chain-slug": string; "hash": string }>
-    | DynamicRoute<"/chain/[chain-slug]/token/[hash]", { "chain-slug": string; "hash": string }>
-    | DynamicRoute<"/chain/[chain-slug]/token/[hash]/instance/[id]", { "chain-slug": string; "hash": string; "id": string }>
-    | DynamicRoute<"/chain/[chain-slug]/tx/[hash]", { "chain-slug": string; "hash": string }>
+    | DynamicRoute<"/chain/[chain_slug]/accounts/label/[slug]", { "chain_slug": string; "slug": string }>
+    | DynamicRoute<"/chain/[chain_slug]/advanced-filter", { "chain_slug": string }>
+    | DynamicRoute<"/chain/[chain_slug]/block/[height_or_hash]", { "chain_slug": string; "height_or_hash": string }>
+    | DynamicRoute<"/chain/[chain_slug]/block/countdown/[height]", { "chain_slug": string; "height": string }>
+    | DynamicRoute<"/chain/[chain_slug]/block/countdown", { "chain_slug": string }>
+    | DynamicRoute<"/chain/[chain_slug]/csv-export", { "chain_slug": string }>
+    | DynamicRoute<"/chain/[chain_slug]/op/[hash]", { "chain_slug": string; "hash": string }>
+    | DynamicRoute<"/chain/[chain_slug]/token/[hash]", { "chain_slug": string; "hash": string }>
+    | DynamicRoute<"/chain/[chain_slug]/token/[hash]/instance/[id]", { "chain_slug": string; "hash": string; "id": string }>
+    | DynamicRoute<"/chain/[chain_slug]/tx/[hash]", { "chain_slug": string; "hash": string }>
+    | DynamicRoute<"/chain/[chain_slug]/visualize/sol2uml", { "chain_slug": string }>
     | StaticRoute<"/chakra">
     | StaticRoute<"/contract-verification">
     | StaticRoute<"/csv-export">
diff --git a/nextjs/routes.ts b/nextjs/routes.ts
index c63a083cc7..9efb692743 100644
--- a/nextjs/routes.ts
+++ b/nextjs/routes.ts
@@ -1,16 +1,29 @@
+import type { ExternalChain } from 'types/externalChains';
+
 import type { Route } from 'nextjs-routes';
 import { route as nextjsRoute } from 'nextjs-routes';
 
-import type { TMultichainContext } from 'lib/contexts/multichain';
+import { stripTrailingSlash } from 'toolkit/utils/url';
+
+export interface RouteParams {
+  external?: boolean;
+  chain?: ExternalChain & { slug?: string };
+}
+
+export const route = (route: Route, params?: RouteParams | null) => {
+  const generatedRoute = nextjsRoute(routeParams(route, params));
+
+  if (params && params.chain && params.external) {
+    return stripTrailingSlash(params.chain.explorer_url) + generatedRoute;
+  }
 
-export const route = (route: Route, multichainContext?: TMultichainContext | null) => {
-  return nextjsRoute(routeParams(route, multichainContext));
+  return generatedRoute;
 };
 
-export const routeParams = (route: Route, multichainContext?: TMultichainContext | null): Route => {
-  if (multichainContext) {
-    const pathname = '/chain/[chain-slug]' + route.pathname;
-    return { ...route, pathname, query: { ...route.query, 'chain-slug': multichainContext.chain.slug } } as Route;
+export const routeParams = (route: Route, params?: RouteParams | null): Route => {
+  if (!params?.external && params?.chain?.slug) {
+    const pathname = '/chain/[chain_slug]' + route.pathname;
+    return { ...route, pathname, query: { ...route.query, chain_slug: params.chain.slug } } as Route;
   }
   return route;
 };
diff --git a/package.json b/package.json
index 1ffa5e2e79..1621a5e521 100644
--- a/package.json
+++ b/package.json
@@ -44,9 +44,9 @@
   "dependencies": {
     "@bigmi/react": "0.5.2",
     "@blockscout/bens-types": "1.4.1",
-    "@blockscout/multichain-aggregator-types": "1.6.0-alpha.2",
+    "@blockscout/multichain-aggregator-types": "1.6.3-alpha.3",
     "@blockscout/points-types": "1.4.0-alpha.1",
-    "@blockscout/stats-types": "2.10.0-alpha",
+    "@blockscout/stats-types": "2.11.1",
     "@blockscout/tac-operation-lifecycle-types": "0.0.1-alpha.6",
     "@blockscout/visualizer-types": "0.2.0",
     "@blockscout/zetachain-cctx-types": "^1.0.0-rc.6",
diff --git a/pages/api/proxy.ts b/pages/api/proxy.ts
index 4eef749bc4..fad2ee22d3 100644
--- a/pages/api/proxy.ts
+++ b/pages/api/proxy.ts
@@ -13,7 +13,7 @@ const handler = async(nextReq: NextApiRequest, nextRes: NextApiResponse) => {
 
   const url = new URL(
     nextReq.url.replace(/^\/node-api\/proxy/, ''),
-    nextReq.headers['x-endpoint']?.toString() || appConfig.apis.general.endpoint,
+    nextReq.headers['x-endpoint']?.toString() || appConfig.apis.general?.endpoint,
   );
   const apiRes = await fetchFactory(nextReq)(
     url.toString(),
diff --git a/pages/chain/[chain-slug]/accounts/label/[slug].tsx b/pages/chain/[chain_slug]/accounts/label/[slug].tsx
similarity index 84%
rename from pages/chain/[chain-slug]/accounts/label/[slug].tsx
rename to pages/chain/[chain_slug]/accounts/label/[slug].tsx
index 60ca9b53f0..6b0e14244a 100644
--- a/pages/chain/[chain-slug]/accounts/label/[slug].tsx
+++ b/pages/chain/[chain_slug]/accounts/label/[slug].tsx
@@ -10,8 +10,8 @@ const AccountsLabelSearch = dynamic(() => import('ui/pages/AccountsLabelSearch')
 
 const Page: NextPage = () => {
   return (
-    <PageNextJs pathname="/chain/[chain-slug]/accounts/label/[slug]">
-      <MultichainProvider level="page">
+    <PageNextJs pathname="/chain/[chain_slug]/accounts/label/[slug]">
+      <MultichainProvider>
         <AccountsLabelSearch/>
       </MultichainProvider>
     </PageNextJs>
diff --git a/pages/chain/[chain-slug]/advanced-filter/index.tsx b/pages/chain/[chain_slug]/advanced-filter/index.tsx
similarity index 81%
rename from pages/chain/[chain-slug]/advanced-filter/index.tsx
rename to pages/chain/[chain_slug]/advanced-filter/index.tsx
index 24aecc4a98..4f95f5dff3 100644
--- a/pages/chain/[chain-slug]/advanced-filter/index.tsx
+++ b/pages/chain/[chain_slug]/advanced-filter/index.tsx
@@ -8,8 +8,8 @@ import AdvancedFilter from 'ui/pages/AdvancedFilter';
 
 const Page: NextPage = () => {
   return (
-    <PageNextJs pathname="/chain/[chain-slug]/advanced-filter">
-      <MultichainProvider level="page">
+    <PageNextJs pathname="/chain/[chain_slug]/advanced-filter">
+      <MultichainProvider>
         <AdvancedFilter/>
       </MultichainProvider>
     </PageNextJs>
diff --git a/pages/chain/[chain-slug]/block/[height_or_hash].tsx b/pages/chain/[chain_slug]/block/[height_or_hash].tsx
similarity index 60%
rename from pages/chain/[chain-slug]/block/[height_or_hash].tsx
rename to pages/chain/[chain_slug]/block/[height_or_hash].tsx
index 5096635de8..821519243b 100644
--- a/pages/chain/[chain-slug]/block/[height_or_hash].tsx
+++ b/pages/chain/[chain_slug]/block/[height_or_hash].tsx
@@ -5,16 +5,12 @@ import React from 'react';
 import type { Props } from 'nextjs/getServerSideProps/handlers';
 import PageNextJs from 'nextjs/PageNextJs';
 
-import { MultichainProvider } from 'lib/contexts/multichain';
-
-const Block = dynamic(() => import('ui/pages/Block'), { ssr: false });
+const OpSuperchainBlock = dynamic(() => import('ui/optimismSuperchain/block/OpSuperchainBlock'), { ssr: false });
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/chain/[chain-slug]/block/[height_or_hash]" query={ props.query }>
-      <MultichainProvider level="page">
-        <Block/>
-      </MultichainProvider>
+    <PageNextJs pathname="/chain/[chain_slug]/block/[height_or_hash]" query={ props.query }>
+      <OpSuperchainBlock/>
     </PageNextJs>
   );
 };
diff --git a/pages/chain/[chain-slug]/block/countdown/[height].tsx b/pages/chain/[chain_slug]/block/countdown/[height].tsx
similarity index 86%
rename from pages/chain/[chain-slug]/block/countdown/[height].tsx
rename to pages/chain/[chain_slug]/block/countdown/[height].tsx
index d848bc6188..bffdedd5d6 100644
--- a/pages/chain/[chain-slug]/block/countdown/[height].tsx
+++ b/pages/chain/[chain_slug]/block/countdown/[height].tsx
@@ -11,8 +11,8 @@ const BlockCountdown = dynamic(() => import('ui/pages/BlockCountdown'), { ssr: f
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/chain/[chain-slug]/block/countdown/[height]" query={ props.query }>
-      <MultichainProvider level="page">
+    <PageNextJs pathname="/chain/[chain_slug]/block/countdown/[height]" query={ props.query }>
+      <MultichainProvider>
         <BlockCountdown/>
       </MultichainProvider>
     </PageNextJs>
diff --git a/pages/chain/[chain-slug]/block/countdown/index.tsx b/pages/chain/[chain_slug]/block/countdown/index.tsx
similarity index 86%
rename from pages/chain/[chain-slug]/block/countdown/index.tsx
rename to pages/chain/[chain_slug]/block/countdown/index.tsx
index 2ddb56d7b8..1a7714a103 100644
--- a/pages/chain/[chain-slug]/block/countdown/index.tsx
+++ b/pages/chain/[chain_slug]/block/countdown/index.tsx
@@ -11,8 +11,8 @@ const BlockCountdownIndex = dynamic(() => import('ui/pages/BlockCountdownIndex')
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/chain/[chain-slug]/block/countdown" query={ props.query }>
-      <MultichainProvider level="page">
+    <PageNextJs pathname="/chain/[chain_slug]/block/countdown" query={ props.query }>
+      <MultichainProvider>
         <BlockCountdownIndex/>
       </MultichainProvider>
     </PageNextJs>
diff --git a/pages/chain/[chain-slug]/csv-export/index.tsx b/pages/chain/[chain_slug]/csv-export/index.tsx
similarity index 81%
rename from pages/chain/[chain-slug]/csv-export/index.tsx
rename to pages/chain/[chain_slug]/csv-export/index.tsx
index 3e6d5a557c..c3fd451e03 100644
--- a/pages/chain/[chain-slug]/csv-export/index.tsx
+++ b/pages/chain/[chain_slug]/csv-export/index.tsx
@@ -8,8 +8,8 @@ import CsvExport from 'ui/pages/CsvExport';
 
 const Page: NextPage = () => {
   return (
-    <PageNextJs pathname="/chain/[chain-slug]/csv-export">
-      <MultichainProvider level="page">
+    <PageNextJs pathname="/chain/[chain_slug]/csv-export">
+      <MultichainProvider>
         <CsvExport/>
       </MultichainProvider>
     </PageNextJs>
diff --git a/pages/chain/[chain-slug]/op/[hash].tsx b/pages/chain/[chain_slug]/op/[hash].tsx
similarity index 85%
rename from pages/chain/[chain-slug]/op/[hash].tsx
rename to pages/chain/[chain_slug]/op/[hash].tsx
index 60aa7f2b9c..89e806bcc3 100644
--- a/pages/chain/[chain-slug]/op/[hash].tsx
+++ b/pages/chain/[chain_slug]/op/[hash].tsx
@@ -11,8 +11,8 @@ const UserOp = dynamic(() => import('ui/pages/UserOp'), { ssr: false });
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/chain/[chain-slug]/op/[hash]" query={ props.query }>
-      <MultichainProvider level="page">
+    <PageNextJs pathname="/chain/[chain_slug]/op/[hash]" query={ props.query }>
+      <MultichainProvider>
         <UserOp/>
       </MultichainProvider>
     </PageNextJs>
diff --git a/pages/chain/[chain-slug]/token/[hash]/index.tsx b/pages/chain/[chain_slug]/token/[hash]/index.tsx
similarity index 50%
rename from pages/chain/[chain-slug]/token/[hash]/index.tsx
rename to pages/chain/[chain_slug]/token/[hash]/index.tsx
index d13cb70e72..73b9586849 100644
--- a/pages/chain/[chain-slug]/token/[hash]/index.tsx
+++ b/pages/chain/[chain_slug]/token/[hash]/index.tsx
@@ -1,29 +1,19 @@
 import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
 import React from 'react';
 
 import type { Route } from 'nextjs-routes';
 import type { Props } from 'nextjs/getServerSideProps/handlers';
 import PageNextJs from 'nextjs/PageNextJs';
 
-import multichainConfig from 'configs/multichain';
-import getSocketUrl from 'lib/api/getSocketUrl';
-import { MultichainProvider } from 'lib/contexts/multichain';
-import { SocketProvider } from 'lib/socket/context';
-import Token from 'ui/pages/Token';
+const OpSuperchainToken = dynamic(() => import('ui/optimismSuperchain/token/OpSuperchainToken'), { ssr: false });
 
 const pathname: Route['pathname'] = '/token/[hash]';
 
 const Page: NextPage<Props<typeof pathname>> = (props: Props<typeof pathname>) => {
-  const chainSlug = props.query?.['chain-slug'];
-  const chainData = multichainConfig()?.chains.find(chain => chain.slug === chainSlug);
-
   return (
     <PageNextJs pathname={ pathname } query={ props.query } apiData={ props.apiData }>
-      <SocketProvider url={ getSocketUrl(chainData?.config) }>
-        <MultichainProvider level="page">
-          <Token/>
-        </MultichainProvider>
-      </SocketProvider>
+      <OpSuperchainToken/>
     </PageNextJs>
   );
 };
diff --git a/pages/chain/[chain-slug]/token/[hash]/instance/[id].tsx b/pages/chain/[chain_slug]/token/[hash]/instance/[id].tsx
similarity index 50%
rename from pages/chain/[chain-slug]/token/[hash]/instance/[id].tsx
rename to pages/chain/[chain_slug]/token/[hash]/instance/[id].tsx
index 57c2bde93b..d73aa7c31f 100644
--- a/pages/chain/[chain-slug]/token/[hash]/instance/[id].tsx
+++ b/pages/chain/[chain_slug]/token/[hash]/instance/[id].tsx
@@ -1,29 +1,19 @@
 import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
 import React from 'react';
 
 import type { Route } from 'nextjs-routes';
 import type { Props } from 'nextjs/getServerSideProps/handlers';
 import PageNextJs from 'nextjs/PageNextJs';
 
-import multichainConfig from 'configs/multichain';
-import getSocketUrl from 'lib/api/getSocketUrl';
-import { MultichainProvider } from 'lib/contexts/multichain';
-import { SocketProvider } from 'lib/socket/context';
-import TokenInstance from 'ui/pages/TokenInstance';
+const OpSuperchainTokenInstance = dynamic(() => import('ui/optimismSuperchain/tokenInstance/OpSuperchainTokenInstance'), { ssr: false });
 
 const pathname: Route['pathname'] = '/token/[hash]/instance/[id]';
 
 const Page: NextPage<Props<typeof pathname>> = (props: Props<typeof pathname>) => {
-  const chainSlug = props.query?.['chain-slug'];
-  const chainData = multichainConfig()?.chains.find(chain => chain.slug === chainSlug);
-
   return (
     <PageNextJs pathname={ pathname } query={ props.query } apiData={ props.apiData }>
-      <SocketProvider url={ getSocketUrl(chainData?.config) }>
-        <MultichainProvider level="page">
-          <TokenInstance/>
-        </MultichainProvider>
-      </SocketProvider>
+      <OpSuperchainTokenInstance/>
     </PageNextJs>
   );
 };
diff --git a/pages/chain/[chain-slug]/tx/[hash]/index.tsx b/pages/chain/[chain_slug]/tx/[hash]/index.tsx
similarity index 58%
rename from pages/chain/[chain-slug]/tx/[hash]/index.tsx
rename to pages/chain/[chain_slug]/tx/[hash]/index.tsx
index 7ba3c9ab40..fa706556e3 100644
--- a/pages/chain/[chain-slug]/tx/[hash]/index.tsx
+++ b/pages/chain/[chain_slug]/tx/[hash]/index.tsx
@@ -5,16 +5,12 @@ import React from 'react';
 import type { Props } from 'nextjs/getServerSideProps/handlers';
 import PageNextJs from 'nextjs/PageNextJs';
 
-import { MultichainProvider } from 'lib/contexts/multichain';
-
-const Transaction = dynamic(() => import('ui/pages/Transaction'), { ssr: false });
+const OpSuperchainTx = dynamic(() => import('ui/optimismSuperchain/tx/OpSuperchainTx'), { ssr: false });
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/chain/[chain-slug]/tx/[hash]" query={ props.query }>
-      <MultichainProvider level="page">
-        <Transaction/>
-      </MultichainProvider>
+    <PageNextJs pathname="/chain/[chain_slug]/tx/[hash]" query={ props.query }>
+      <OpSuperchainTx/>
     </PageNextJs>
   );
 };
diff --git a/pages/chain/[chain_slug]/visualize/sol2uml.tsx b/pages/chain/[chain_slug]/visualize/sol2uml.tsx
new file mode 100644
index 0000000000..43c489009b
--- /dev/null
+++ b/pages/chain/[chain_slug]/visualize/sol2uml.tsx
@@ -0,0 +1,21 @@
+import type { NextPage } from 'next';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+import { MultichainProvider } from 'lib/contexts/multichain';
+import Sol2Uml from 'ui/pages/Sol2Uml';
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/visualize/sol2uml">
+      <MultichainProvider>
+        <Sol2Uml/>
+      </MultichainProvider>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { base as getServerSideProps } from 'nextjs/getServerSideProps/multichain';
diff --git a/pages/search-results.tsx b/pages/search-results.tsx
index 1e209e30b0..50d070561a 100644
--- a/pages/search-results.tsx
+++ b/pages/search-results.tsx
@@ -6,9 +6,16 @@ import type { NextPageWithLayout } from 'nextjs/types';
 import type { Props } from 'nextjs/getServerSideProps/handlers';
 import PageNextJs from 'nextjs/PageNextJs';
 
+import config from 'configs/app';
 import LayoutSearchResults from 'ui/shared/layout/LayoutSearchResults';
 
-const SearchResults = dynamic(() => import('ui/pages/SearchResults'), { ssr: false });
+const SearchResults = dynamic(() => {
+  if (config.features.opSuperchain.isEnabled) {
+    return import('ui/optimismSuperchain/searchResults/SearchResults');
+  }
+
+  return import('ui/pages/SearchResults');
+}, { ssr: false });
 
 const Page: NextPageWithLayout<Props> = (props: Props) => {
   return (
diff --git a/pages/stats/[id].tsx b/pages/stats/[id].tsx
index 964da55849..abfb131616 100644
--- a/pages/stats/[id].tsx
+++ b/pages/stats/[id].tsx
@@ -10,6 +10,7 @@ import detectBotRequest from 'nextjs/utils/detectBotRequest';
 import fetchApi from 'nextjs/utils/fetchApi';
 
 import config from 'configs/app';
+import { MultichainProvider } from 'lib/contexts/multichain';
 import dayjs from 'lib/date/dayjs';
 import getQueryParamString from 'lib/router/getQueryParamString';
 
@@ -20,7 +21,13 @@ const pathname: Route['pathname'] = '/stats/[id]';
 const Page: NextPage<Props<typeof pathname>> = (props: Props<typeof pathname>) => {
   return (
     <PageNextJs pathname={ pathname } query={ props.query } apiData={ props.apiData }>
-      <Chart/>
+      { config.features.opSuperchain.isEnabled ? (
+        <MultichainProvider chainId={ getQueryParamString(props.query?.chain_id) }>
+          <Chart/>
+        </MultichainProvider>
+      ) : (
+        <Chart/>
+      ) }
     </PageNextJs>
   );
 };
diff --git a/pages/stats/index.tsx b/pages/stats/index.tsx
index 42f912b020..cd464aab02 100644
--- a/pages/stats/index.tsx
+++ b/pages/stats/index.tsx
@@ -3,12 +3,14 @@ import React from 'react';
 
 import PageNextJs from 'nextjs/PageNextJs';
 
+import config from 'configs/app';
+import OpSuperchainStats from 'ui/optimismSuperchain/stats/OpSuperchainStats';
 import Stats from 'ui/pages/Stats';
 
 const Page: NextPage = () => {
   return (
     <PageNextJs pathname="/stats">
-      <Stats/>
+      { config.features.opSuperchain.isEnabled ? <OpSuperchainStats/> : <Stats/> }
     </PageNextJs>
   );
 };
diff --git a/pages/token/[hash]/index.tsx b/pages/token/[hash]/index.tsx
index 98ab1a91fb..ca28c5da26 100644
--- a/pages/token/[hash]/index.tsx
+++ b/pages/token/[hash]/index.tsx
@@ -10,7 +10,6 @@ import fetchApi from 'nextjs/utils/fetchApi';
 
 import config from 'configs/app';
 import getQueryParamString from 'lib/router/getQueryParamString';
-import OpSuperchainToken from 'ui/optimismSuperchain/token/OpSuperchainToken';
 import Token from 'ui/pages/Token';
 
 const pathname: Route['pathname'] = '/token/[hash]';
@@ -18,7 +17,7 @@ const pathname: Route['pathname'] = '/token/[hash]';
 const Page: NextPage<Props<typeof pathname>> = (props: Props<typeof pathname>) => {
   return (
     <PageNextJs pathname={ pathname } query={ props.query } apiData={ props.apiData }>
-      { config.features.opSuperchain.isEnabled ? <OpSuperchainToken/> : <Token/> }
+      <Token/>
     </PageNextJs>
   );
 };
@@ -26,7 +25,7 @@ const Page: NextPage<Props<typeof pathname>> = (props: Props<typeof pathname>) =
 export default Page;
 
 export const getServerSideProps: GetServerSideProps<Props<typeof pathname>> = async(ctx) => {
-  const baseResponse = await gSSP.base<typeof pathname>(ctx);
+  const baseResponse = await gSSP.token<typeof pathname>(ctx);
 
   if ('props' in baseResponse && !config.features.opSuperchain.isEnabled) {
     if (
diff --git a/pages/token/[hash]/instance/[id].tsx b/pages/token/[hash]/instance/[id].tsx
index 66259c3925..5d88d2ab3d 100644
--- a/pages/token/[hash]/instance/[id].tsx
+++ b/pages/token/[hash]/instance/[id].tsx
@@ -25,7 +25,7 @@ const Page: NextPage<Props<typeof pathname>> = (props: Props<typeof pathname>) =
 export default Page;
 
 export const getServerSideProps: GetServerSideProps<Props<typeof pathname>> = async(ctx) => {
-  const baseResponse = await gSSP.base<typeof pathname>(ctx);
+  const baseResponse = await gSSP.token<typeof pathname>(ctx);
 
   if (config.meta.og.enhancedDataEnabled && 'props' in baseResponse) {
     const botInfo = detectBotRequest(ctx.req);
diff --git a/pages/tx/[hash].tsx b/pages/tx/[hash].tsx
index e62415a502..2c1eed9a1c 100644
--- a/pages/tx/[hash].tsx
+++ b/pages/tx/[hash].tsx
@@ -5,13 +5,7 @@ import React from 'react';
 import type { Props } from 'nextjs/getServerSideProps/handlers';
 import PageNextJs from 'nextjs/PageNextJs';
 
-import config from 'configs/app';
-
 const Transaction = dynamic(() => {
-  if (config.features.opSuperchain.isEnabled) {
-    return import('ui/optimismSuperchain/tx/OpSuperchainTx');
-  }
-
   return import('ui/pages/Transaction');
 }, { ssr: false });
 
@@ -25,4 +19,4 @@ const Page: NextPage<Props> = (props: Props) => {
 
 export default Page;
 
-export { base as getServerSideProps } from 'nextjs/getServerSideProps/main';
+export { tx as getServerSideProps } from 'nextjs/getServerSideProps/main';
diff --git a/playwright/fixtures/mockEnvs.ts b/playwright/fixtures/mockEnvs.ts
index 51547fa402..b0697d0df9 100644
--- a/playwright/fixtures/mockEnvs.ts
+++ b/playwright/fixtures/mockEnvs.ts
@@ -114,7 +114,10 @@ export const ENVS_MAP: Record<string, Array<[string, string]>> = {
     [ 'NEXT_PUBLIC_CELO_ENABLED', 'true' ],
   ],
   opSuperchain: [
-    [ 'NEXT_PUBLIC_OP_SUPERCHAIN_ENABLED', 'true' ],
+    [ 'NEXT_PUBLIC_MULTICHAIN_ENABLED', 'true' ],
+    [ 'NEXT_PUBLIC_MULTICHAIN_CLUSTER', 'test' ],
+    [ 'NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_API_HOST', 'http://localhost:3012' ],
+    [ 'NEXT_PUBLIC_MULTICHAIN_STATS_API_HOST', 'http://localhost:3013' ],
   ],
   clusters: [
     [ 'NEXT_PUBLIC_CLUSTERS_API_HOST', 'https://api.clusters.xyz' ],
diff --git a/playwright/fixtures/mockMultichainConfig.ts b/playwright/fixtures/mockMultichainConfig.ts
index a13aea800f..690675fea0 100644
--- a/playwright/fixtures/mockMultichainConfig.ts
+++ b/playwright/fixtures/mockMultichainConfig.ts
@@ -10,6 +10,8 @@ const fixture: TestFixture<MockMultichainConfigFixture, { page: Page }> = async(
       window.__multichainConfig = {
         chains: [
           opSuperchainMock.chainDataA,
+          opSuperchainMock.chainDataB,
+          opSuperchainMock.chainDataC,
         ],
       };
     }, [ opSuperchainMock ]);
diff --git a/public/static/coming-soon.svg b/public/static/coming-soon.svg
new file mode 100644
index 0000000000..e596c10074
--- /dev/null
+++ b/public/static/coming-soon.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 260 200">
+  <g clip-path="url(#a)">
+    <path fill="url(#b)" d="M130 163.385c11.598 0 21 9.402 21 21s-9.402 21-21 21-21-9.402-21-21 9.402-21 21-21Zm0 3c-9.941 0-18 8.059-18 18s8.059 18 18 18 18-8.059 18-18-8.059-18-18-18Zm-56-31c11.598 0 21 9.402 21 21s-9.402 21-21 21-21-9.402-21-21 9.402-21 21-21Zm112 0c11.598 0 21 9.402 21 21s-9.402 21-21 21-21-9.402-21-21 9.402-21 21-21Zm-112 3c-9.941 0-18 8.059-18 18s8.059 18 18 18 18-8.059 18-18-8.059-18-18-18Zm112 0c-9.941 0-18 8.059-18 18s8.059 18 18 18 18-8.059 18-18-8.059-18-18-18Zm-167-31c11.598 0 21 9.402 21 21s-9.402 21-21 21-21-9.402-21-21 9.402-21 21-21Zm128.234 33c-3.795 5.44-10.098 9-17.234 9-7.136 0-13.439-3.56-17.234-9h3.819c3.296 3.682 8.084 6 13.415 6a17.953 17.953 0 0 0 13.415-6h3.819Zm94.766-33c11.598 0 21 9.402 21 21s-9.402 21-21 21-21-9.402-21-21 9.402-21 21-21Zm-223 3c-9.941 0-18 8.059-18 18s8.059 18 18 18 18-8.059 18-18-8.059-18-18-18Zm223 0c-9.941 0-18 8.059-18 18s8.059 18 18 18 18-8.059 18-18-8.059-18-18-18Zm-168-31c.338 0 .674.008 1.008.024L74 80.385v2c-9.941 0-18 8.059-18 18s8.059 18 18 18v2l1.11.97c-.368.02-.738.03-1.11.03-11.598 0-21-9.402-21-21s9.402-21 21-21Zm113.876.084c10.719.949 19.124 9.95 19.124 20.916 0 11.171-8.723 20.303-19.729 20.96l1.729-.96v-2.251c8.513-1.429 15-8.83 15-17.749 0-8.92-6.487-16.322-15-17.75v-2.25l-1.124-.916ZM19 50.385c11.598 0 21 9.402 21 21s-9.402 21-21 21-21-9.402-21-21 9.402-21 21-21Zm223 0c11.598 0 21 9.402 21 21s-9.402 21-21 21-21-9.402-21-21 9.402-21 21-21Zm-223 3c-9.941 0-18 8.059-18 18 0 9.94 8.059 18 18 18s18-8.06 18-18c0-9.941-8.059-18-18-18Zm223 0c-9.941 0-18 8.059-18 18 0 9.94 8.059 18 18 18s18-8.06 18-18c0-9.941-8.059-18-18-18Zm-168-31c11.598 0 21 9.402 21 21s-9.402 21-21 21-21-9.402-21-21 9.402-21 21-21Zm112 0c11.598 0 21 9.402 21 21s-9.402 21-21 21-21-9.402-21-21 9.402-21 21-21Zm-112 3c-9.941 0-18 8.059-18 18 0 9.94 8.059 18 18 18s18-8.06 18-18c0-9.941-8.059-18-18-18Zm112 0c-9.941 0-18 8.059-18 18 0 9.94 8.059 18 18 18s18-8.06 18-18c0-9.941-8.059-18-18-18Zm-56 25c7.564 0 14.194 4 17.891 10h-3.643c-3.292-4.258-8.45-7-14.248-7s-10.956 2.742-14.248 7h-3.643c3.697-6 10.327-10 17.891-10Zm0-55c11.598 0 21 9.402 21 21s-9.402 21-21 21-21-9.402-21-21 9.402-21 21-21Zm0 3c-9.941 0-18 8.059-18 18 0 9.94 8.059 18 18 18s18-8.06 18-18c0-9.941-8.059-18-18-18Z"/>
+    <path fill="#E2E8F0" d="M103.588 76.385a24.004 24.004 0 0 1 19.661 10.238l16.056 22.936v.001a16.006 16.006 0 0 0 13.107 6.825h3.932l-5.172-5.172a4 4 0 1 1 5.656-5.656l11.98 11.979c.145.144.28.298.403.463.025.033.048.068.071.102.014.02.029.039.042.059l.065.1.042.068.042.072.062.112c.01.017.017.036.027.053.019.038.038.075.056.114l.034.076a1.71 1.71 0 0 1 .078.188l.039.102.014.043c.037.108.07.217.098.329l.014.06a4 4 0 0 1 .002 1.803c-.005.023-.009.047-.015.07a3.964 3.964 0 0 1-.095.322l-.018.051-.039.101c-.011.03-.022.061-.035.091l-.034.08a2.688 2.688 0 0 1-.099.207l-.028.055-.053.095a3.97 3.97 0 0 1-.157.255c-.013.021-.028.04-.042.06-.023.034-.046.068-.071.102a4.053 4.053 0 0 1-.383.444l-12 12a4 4 0 1 1-5.656-5.656l5.172-5.172h-3.932a24.016 24.016 0 0 1-11.084-2.713 24.01 24.01 0 0 1-8.154-6.94l-.423-.586-16.056-22.935v-.001a16.003 16.003 0 0 0-12.626-6.818l-.481-.007H94a4 4 0 0 1 0-8h9.588Zm13.814 32.163a4.001 4.001 0 0 1 6.556 4.586l-.708 1.012h-.001a24 24 0 0 1-19.661 10.239H94a4 4 0 0 1 0-8h9.588l.481-.007a16.003 16.003 0 0 0 12.625-6.818l.708-1.012Zm33.77-42.991a3.999 3.999 0 0 1 5.656 0l11.98 11.98c.145.143.28.297.403.462.025.033.048.068.071.102.014.02.029.039.042.06a3.959 3.959 0 0 1 .21.35l.028.054.056.114.034.076c.015.032.03.065.043.098a27.47 27.47 0 0 1 .074.192l.014.043c.037.108.07.217.098.329l.014.06a4.004 4.004 0 0 1-.111 2.201l-.015.045-.039.101c-.011.03-.022.061-.035.091-.013.033-.028.065-.043.098l-.034.076-.056.113-.028.055a3.77 3.77 0 0 1-.21.35l-.042.06c-.023.034-.046.068-.071.102a4.066 4.066 0 0 1-.383.444l-12 12a4 4 0 0 1-5.656-5.656l5.172-5.172h-3.932a16.003 16.003 0 0 0-13.103 6.818l.001.001-.708 1.016a4.001 4.001 0 0 1-6.564-4.575l.708-1.015.005-.007a24.004 24.004 0 0 1 19.661-10.238h3.932l-5.172-5.172a4 4 0 0 1 0-5.656Z"/>
+  </g>
+  <defs>
+    <radialGradient id="b" cx="0" cy="0" r="1" gradientTransform="scale(132.5 105) rotate(90 .014 .97)" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#CBD5E0" stop-opacity=".8"/>
+      <stop offset="1" stop-color="#CBD5E0" stop-opacity="0"/>
+    </radialGradient>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h260v200H0z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/stubs/optimismSuperchain.ts b/stubs/optimismSuperchain.ts
index 7f1490fbdf..a307c12e3d 100644
--- a/stubs/optimismSuperchain.ts
+++ b/stubs/optimismSuperchain.ts
@@ -1,23 +1,73 @@
-import * as multichain from '@blockscout/multichain-aggregator-types';
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+import type * as stats from '@blockscout/stats-types';
+import type { AddressTokenItem } from 'types/client/multichain-aggregator';
 
 import { ADDRESS_HASH } from './addressParams';
-import { TX_HASH } from './tx';
 
-export const INTEROP_MESSAGE: multichain.InteropMessage = {
-  sender: {
-    hash: ADDRESS_HASH,
+export const ADDRESS: multichain.GetAddressResponse = {
+  hash: ADDRESS_HASH,
+  chain_infos: {
+    '420120000': {
+      coin_balance: '1000000000000000000000000',
+      is_contract: true,
+      is_verified: true,
+    },
   },
-  target: {
-    hash: ADDRESS_HASH,
+  has_tokens: true,
+  has_interop_message_transfers: false,
+  coin_balance: '1000000000000000000000000',
+  exchange_rate: '123.456',
+};
+
+export const TOKEN: AddressTokenItem = {
+  token: {
+    address_hash: ADDRESS_HASH,
+    circulating_market_cap: '10.01',
+    decimals: '6',
+    holders_count: '141268',
+    icon_url: null,
+    name: 'SR2USD',
+    symbol: 'sR2USD',
+    total_supply: '943969542711126',
+    type: 'ERC-20' as const,
+    exchange_rate: '123.456',
+    reputation: null,
+    chain_infos: {
+      '11155111': {
+        holders_count: '141268',
+        total_supply: '943969542711126',
+        is_verified: true,
+      },
+    },
+  },
+  token_id: null,
+  token_instance: null,
+  value: '2860471393',
+  chain_values: {
+    '11155111': '2860471393',
+  },
+};
+
+export const HOMEPAGE_STATS: stats.MainPageMultichainStats = {
+  total_multichain_txns: {
+    id: 'totalMultichainTxns',
+    value: '741682908',
+    title: 'Total transactions',
+    units: undefined,
+    description: 'Number of transactions across all chains in the cluster',
+  },
+  total_multichain_addresses: {
+    id: 'totalMultichainAddresses',
+    value: '153519638',
+    title: 'Total addresses',
+    units: undefined,
+    description: 'Number of addresses across all chains in the cluster',
+  },
+  yesterday_txns_multichain: {
+    id: 'yesterdayTxnsMultichain',
+    value: '1026175',
+    title: 'Yesterday txns',
+    units: undefined,
+    description: 'Number of transactions yesterday (0:00 - 23:59 UTC) across all chains in the cluste',
   },
-  nonce: 4261,
-  init_chain_id: '420120000',
-  init_transaction_hash: TX_HASH,
-  timestamp: '2025-06-03T10:43:58.000Z',
-  relay_chain_id: '420120001',
-  relay_transaction_hash: TX_HASH,
-  payload: '0x4f0edcc90000000000000000000000004',
-  message_type: 'coin_transfer',
-  method: 'sendERC20',
-  status: multichain.InteropMessage_Status.PENDING,
 };
diff --git a/toolkit/chakra/collapsible.tsx b/toolkit/chakra/collapsible.tsx
index cc9c82e7c0..2ffb9529b3 100644
--- a/toolkit/chakra/collapsible.tsx
+++ b/toolkit/chakra/collapsible.tsx
@@ -65,12 +65,13 @@ interface CollapsibleListProps<T> extends FlexProps {
   renderItem: (item: T, index: number) => React.ReactNode;
   triggerProps?: LinkProps;
   cutLength?: number;
+  text?: [string, string];
 }
 
 export const CollapsibleList = <T,>(props: CollapsibleListProps<T>) => {
   const CUT_LENGTH = 3;
 
-  const { items, renderItem, triggerProps, cutLength = CUT_LENGTH, ...rest } = props;
+  const { items, renderItem, triggerProps, cutLength = CUT_LENGTH, text: textProp, ...rest } = props;
 
   const [ isExpanded, setIsExpanded ] = React.useState(false);
 
@@ -78,6 +79,8 @@ export const CollapsibleList = <T,>(props: CollapsibleListProps<T>) => {
     setIsExpanded((flag) => !flag);
   }, []);
 
+  const text = isExpanded ? (textProp?.[1] ?? 'Hide') : (textProp?.[0] ?? 'Show all');
+
   return (
     <Flex flexDir="column" w="100%" { ...rest }>
       { items.slice(0, isExpanded ? undefined : cutLength).map(renderItem) }
@@ -91,7 +94,7 @@ export const CollapsibleList = <T,>(props: CollapsibleListProps<T>) => {
           onClick={ handleToggle }
           { ...triggerProps }
         >
-          { isExpanded ? 'Hide' : 'Show all' }
+          { text }
         </Link>
       ) }
     </Flex>
diff --git a/toolkit/chakra/select.tsx b/toolkit/chakra/select.tsx
index 4212bbd19a..ef930310da 100644
--- a/toolkit/chakra/select.tsx
+++ b/toolkit/chakra/select.tsx
@@ -101,11 +101,11 @@ export const SelectItem = React.forwardRef<
 >(function SelectItem(props, ref) {
   const { item, children, ...rest } = props;
 
-  const startElement = item.icon;
+  const { icon, ...itemProps } = item;
 
   return (
-    <ChakraSelect.Item key={ item.value } item={ item } { ...rest } ref={ ref }>
-      { startElement }
+    <ChakraSelect.Item key={ itemProps.value } item={ itemProps } { ...rest } ref={ ref }>
+      { icon }
       { children }
       <ChakraSelect.ItemIndicator asChild>
         <Icon boxSize={ 5 } flexShrink={ 0 } ml="auto"><CheckIcon/></Icon>
diff --git a/toolkit/components/AdaptiveTabs/AdaptiveTabsList.tsx b/toolkit/components/AdaptiveTabs/AdaptiveTabsList.tsx
index f330ac76a7..f4658611f6 100644
--- a/toolkit/components/AdaptiveTabs/AdaptiveTabsList.tsx
+++ b/toolkit/components/AdaptiveTabs/AdaptiveTabsList.tsx
@@ -96,7 +96,7 @@ const AdaptiveTabsList = (props: Props) => {
       flexWrap="nowrap"
       alignItems="center"
       whiteSpace="nowrap"
-      bgColor={{ _light: 'white', _dark: 'black' }}
+      bgColor="bg.primary"
       marginBottom={ 6 }
       mx={{ base: '-12px', lg: 'unset' }}
       px={{ base: '12px', lg: 'unset' }}
diff --git a/toolkit/components/RoutedTabs/RoutedTabs.tsx b/toolkit/components/RoutedTabs/RoutedTabs.tsx
index 1b022d607d..fb4d234a0d 100644
--- a/toolkit/components/RoutedTabs/RoutedTabs.tsx
+++ b/toolkit/components/RoutedTabs/RoutedTabs.tsx
@@ -13,10 +13,10 @@ interface Props extends AdaptiveTabsProps {
 }
 
 const RoutedTabs = (props: Props) => {
-  const { tabs, onValueChange, preservedParams, ...rest } = props;
+  const { tabs, defaultTabId, onValueChange, preservedParams, ...rest } = props;
 
   const router = useRouter();
-  const activeTab = useActiveTabFromQuery(props.tabs, props.defaultTabId);
+  const activeTab = useActiveTabFromQuery(tabs, defaultTabId);
   const tabsRef = React.useRef<HTMLDivElement>(null);
 
   const handleValueChange = React.useCallback(({ value }: { value: string }) => {
diff --git a/toolkit/components/charts/Chart.tsx b/toolkit/components/charts/Chart.tsx
index 08fe42acbf..cf37d14e17 100644
--- a/toolkit/components/charts/Chart.tsx
+++ b/toolkit/components/charts/Chart.tsx
@@ -18,7 +18,6 @@ import { useTimeChartController } from './utils/useTimeChartController';
 
 export interface ChartProps {
   charts: TimeChartData;
-  title: string;
   zoomRange?: [ Date, Date ];
   onZoom: (range: [ Date, Date ]) => void;
   margin?: ChartMargin;
diff --git a/toolkit/components/charts/ChartFullscreenDialog.tsx b/toolkit/components/charts/ChartFullscreenDialog.tsx
index 2c44be1b40..8a2444ad2c 100644
--- a/toolkit/components/charts/ChartFullscreenDialog.tsx
+++ b/toolkit/components/charts/ChartFullscreenDialog.tsx
@@ -78,7 +78,6 @@ const FullscreenChartModal = ({
             charts={ charts }
             handleZoom={ handleZoom }
             zoomRange={ zoomRange }
-            title={ title }
             resolution={ resolution }
           />
         </DialogBody>
diff --git a/toolkit/components/charts/ChartWidget.tsx b/toolkit/components/charts/ChartWidget.tsx
index 6f8e7019e8..b4f4500418 100644
--- a/toolkit/components/charts/ChartWidget.tsx
+++ b/toolkit/components/charts/ChartWidget.tsx
@@ -94,7 +94,6 @@ export const ChartWidget = React.memo(({
       charts={ displayedCharts }
       isError={ isError }
       isLoading={ isLoading }
-      title={ title }
       empty={ !hasNonEmptyCharts }
       emptyText={ emptyText }
       handleZoom={ handleZoom }
diff --git a/toolkit/components/charts/ChartWidgetContent.tsx b/toolkit/components/charts/ChartWidgetContent.tsx
index 3caf4404eb..7ca08e32cf 100644
--- a/toolkit/components/charts/ChartWidgetContent.tsx
+++ b/toolkit/components/charts/ChartWidgetContent.tsx
@@ -11,7 +11,6 @@ import { ChartWatermark } from './parts/ChartWatermark';
 
 export interface ChartWidgetContentProps {
   charts: TimeChartData;
-  title: string;
   isLoading?: boolean;
   isError?: boolean;
   empty?: boolean;
@@ -27,7 +26,6 @@ export interface ChartWidgetContentProps {
 
 export const ChartWidgetContent = React.memo(({
   charts,
-  title,
   isLoading,
   isError,
   empty,
@@ -78,7 +76,6 @@ export const ChartWidgetContent = React.memo(({
         charts={ charts }
         zoomRange={ zoomRange }
         onZoom={ handleZoom }
-        title={ title }
         isEnlarged={ isEnlarged }
         noAnimation={ noAnimation }
         resolution={ resolution }
diff --git a/toolkit/components/charts/parts/ChartMenu.tsx b/toolkit/components/charts/parts/ChartMenu.tsx
index f0ab9e3f97..a6c04b0dd0 100644
--- a/toolkit/components/charts/parts/ChartMenu.tsx
+++ b/toolkit/components/charts/parts/ChartMenu.tsx
@@ -12,6 +12,7 @@ import CsvIcon from 'icons/files/csv.svg';
 import ImageIcon from 'icons/files/image.svg';
 import ScopeIcon from 'icons/scope.svg';
 import ShareIcon from 'icons/share.svg';
+import { useMultichainContext } from 'lib/contexts/multichain';
 
 import { useColorModeValue } from '../../../chakra/color-mode';
 import { IconButton } from '../../../chakra/icon-button';
@@ -66,6 +67,12 @@ const ChartMenu = ({
 
   const isInBrowser = isBrowser();
 
+  const multichainContext = useMultichainContext();
+
+  const chainPostfix = React.useMemo(() => {
+    return multichainContext?.chain.name ? ` on ${ multichainContext.chain.name }` : '';
+  }, [ multichainContext?.chain.name ]);
+
   const showChartFullscreen = React.useCallback(() => {
     fullscreenDialog.onOpenChange({ open: true });
   }, [ fullscreenDialog ]);
@@ -89,14 +96,14 @@ const ChartMenu = ({
           })
           .then((dataUrl) => {
             const link = document.createElement('a');
-            link.download = `${ title } (Blockscout chart).png`;
+            link.download = `${ title }${ chainPostfix } (Blockscout chart).png`;
             link.href = dataUrl;
             link.click();
             link.remove();
           });
       }
     }, 100);
-  }, [ pngBackgroundColor, title, chartRef ]);
+  }, [ pngBackgroundColor, title, chainPostfix, chartRef ]);
 
   const handleSVGSavingClick = React.useCallback(() => {
     const headerRows = [
@@ -106,8 +113,8 @@ const ChartMenu = ({
       item.dateLabel ?? dayjs(item.date).format('YYYY-MM-DD'),
       ...charts.map((chart) => String(chart.items[index].value)),
     ]);
-    saveAsCsv(headerRows, dataRows, `${ title } (Blockscout stats)`);
-  }, [ charts, title ]);
+    saveAsCsv(headerRows, dataRows, `${ title }${ chainPostfix } (Blockscout stats)`);
+  }, [ charts, title, chainPostfix ]);
 
   // TS thinks window.navigator.share can't be undefined, but it can
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/tools/scripts/dev.preset.sh b/tools/scripts/dev.preset.sh
index b460b47d31..b4c7a8983e 100755
--- a/tools/scripts/dev.preset.sh
+++ b/tools/scripts/dev.preset.sh
@@ -29,13 +29,13 @@ dotenv \
 if [[ "$preset_name" == "optimism_superchain" ]]; then
   dotenv \
     -e $config_file \
-    -- bash -c 'cd deploy/tools/multichain-config-generator && yarn install --silent && yarn build && yarn generate'
+    -- bash -c 'cd deploy/tools/multichain-config-generator && yarn install --silent && yarn build && yarn generate' || exit 1
 fi
 
 # generate essential dapps chains config if marketplace essential dapps enabled
 dotenv \
   -e $config_file \
-  -- bash -c 'cd deploy/tools/essential-dapps-chains-config-generator && yarn install --silent && yarn build && yarn generate'
+  -- bash -c 'cd deploy/tools/essential-dapps-chains-config-generator && yarn install --silent && yarn build && yarn generate' || exit 1
 
 source ./deploy/scripts/build_sprite.sh
 echo ""
diff --git a/types/client/crossChainInfo.ts b/types/client/crossChainInfo.ts
deleted file mode 100644
index 3f08abdd33..0000000000
--- a/types/client/crossChainInfo.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// chain info for external chains (not in the config)
-// eg. zetachain cctx, interop txs, etc.
-export type CrossChainInfo = {
-  chain_id: number;
-  chain_name: string | null;
-  chain_logo?: string | null;
-  instance_url?: string;
-  address_url_template?: string;
-  tx_url_template?: string;
-};
diff --git a/types/client/marketplace.ts b/types/client/marketplace.ts
index a18658621c..01467be05f 100644
--- a/types/client/marketplace.ts
+++ b/types/client/marketplace.ts
@@ -1,3 +1,9 @@
+import type { Chain } from 'viem';
+
+import type { ExternalChain } from 'types/externalChains';
+
+import type config from 'configs/app';
+
 export type MarketplaceAppBase = {
   id: string;
   author: string;
@@ -34,6 +40,13 @@ export enum MarketplaceCategory {
   FAVORITES = 'Favorites',
 }
 
+export interface EssentialDappsChainConfig extends ExternalChain {
+  app_config?: Pick<typeof config, 'app' | 'chain'> & {
+    apis: Pick<typeof config['apis'], 'general'>;
+  };
+  contracts?: Chain['contracts'];
+}
+
 export type EssentialDappsConfig = {
   swap?: {
     chains: Array<string>;
diff --git a/types/client/multichain-aggregator.ts b/types/client/multichain-aggregator.ts
new file mode 100644
index 0000000000..0ea4e860d7
--- /dev/null
+++ b/types/client/multichain-aggregator.ts
@@ -0,0 +1,90 @@
+import type * as bens from '@blockscout/bens-types';
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+import type { TokenType } from 'types/api/token';
+
+// ts-proto generates the wrong token types for AggregatedTokenInfo
+// moreover, the default values of the fields (= undefined) cannot be stripped off from the generated types
+// so we need to manually re-define the type to match it with core API token info type
+export interface AggregatedTokenInfo extends Pick<multichain.AggregatedTokenInfo, 'chain_infos' | 'address_hash'> {
+  type: TokenType;
+  circulating_market_cap: string | null;
+  decimals: string | null;
+  holders_count: string | null;
+  name: string | null;
+  symbol: string | null;
+  total_supply: string | null;
+  exchange_rate: string | null;
+  icon_url: string | null;
+  reputation: null;
+}
+
+export interface AddressTokenItem extends Omit<multichain.ListAddressTokensResponse_AggregatedTokenBalanceInfo, 'token' | 'token_id'> {
+  token: AggregatedTokenInfo;
+  token_id: string | null;
+  token_instance: null;
+}
+
+export interface AddressTokensResponse extends Omit<multichain.ListAddressTokensResponse, 'items'> {
+  items: Array<AddressTokenItem>;
+}
+
+export interface TokensResponse extends Omit<multichain.ListClusterTokensResponse, 'items'> {
+  items: Array<AggregatedTokenInfo>;
+}
+
+// types for quick search results
+export type QuickSearchResultBlock = {
+  type: 'block';
+  block_number: string;
+  block_hash: undefined;
+  chain_id: string;
+} | {
+  type: 'block';
+  block_number: undefined;
+  block_hash: string;
+  chain_id: string;
+};
+
+export interface QuickSearchResultTransaction {
+  type: 'transaction';
+  transaction_hash: string;
+  chain_id: string;
+}
+
+export interface QuickSearchResultAddress {
+  type: 'address';
+  address_hash: string;
+  chain_infos: Record<string, multichain.GetAddressResponse_ChainInfo>;
+}
+
+export interface QuickSearchResultToken {
+  type: 'token';
+  token_type: 'ERC-20' | 'ERC-721' | 'ERC-1155';
+  name: string;
+  symbol: string;
+  address_hash: string;
+  icon_url: string | null;
+  is_smart_contract_verified: boolean;
+  chain_id: string;
+  reputation: null;
+  total_supply: string | null;
+  exchange_rate: string | null;
+  chain_infos: Record<string, multichain.AggregatedTokenInfo_ChainInfo>;
+}
+
+export interface QuickSearchResultDomain {
+  type: 'ens_domain';
+  ens_info: {
+    address_hash: string;
+    expiry_date?: string;
+    name: string;
+    protocol?: bens.ProtocolInfo;
+  };
+  address_hash: string;
+}
+
+export type QuickSearchResultItem = QuickSearchResultBlock |
+QuickSearchResultTransaction |
+QuickSearchResultAddress |
+QuickSearchResultToken |
+QuickSearchResultDomain;
diff --git a/types/client/search.ts b/types/client/search.ts
index 940c9d72ce..ef63c2d885 100644
--- a/types/client/search.ts
+++ b/types/client/search.ts
@@ -1,5 +1,6 @@
 import type { CctxListItem } from '@blockscout/zetachain-cctx-types';
 import type * as api from 'types/api/search';
+import type * as multichain from 'types/client/multichain-aggregator';
 
 export interface SearchResultFutureBlock {
   type: 'block';
@@ -18,3 +19,5 @@ export interface SearchResultZetaChainCCTX {
 }
 
 export type SearchResultItem = api.SearchResultItem | SearchResultBlock | SearchResultZetaChainCCTX;
+
+export type QuickSearchResultItem = multichain.QuickSearchResultItem | SearchResultItem;
diff --git a/types/client/zetaChain.ts b/types/client/zetaChain.ts
index f3bf583512..07c07280d5 100644
--- a/types/client/zetaChain.ts
+++ b/types/client/zetaChain.ts
@@ -1,5 +1,7 @@
 import type { AdvancedFilterAge } from 'types/api/advancedFilter';
 
+import type { ExternalChain } from '../externalChains';
+
 export const ZETA_CHAIN_CCTX_STATUS_REDUCED_FILTERS = [ 'Success', 'Pending', 'Failed' ] as const;
 export type StatusReducedFilters = typeof ZETA_CHAIN_CCTX_STATUS_REDUCED_FILTERS[number];
 
@@ -19,3 +21,20 @@ export type ZetaChainCCTXFilterParams = {
   coin_type?: Array<CoinTypeFilter> | CoinTypeFilter;
   hash?: string;
 };
+
+export interface ZetaChainChainsConfigEnv {
+  chain_id: number;
+  chain_name: string | null;
+  chain_logo?: string | null;
+  instance_url?: string;
+  address_url_template?: string;
+  tx_url_template?: string;
+}
+
+export type ZetaChainExternalChainConfig = ExternalChain | {
+  id: string;
+  name: string;
+  logo: string | undefined;
+  address_url_template?: string;
+  tx_url_template?: string;
+};
diff --git a/types/externalChains.ts b/types/externalChains.ts
new file mode 100644
index 0000000000..0a7f5e1f0f
--- /dev/null
+++ b/types/externalChains.ts
@@ -0,0 +1,12 @@
+import type { EssentialDappsChainConfig } from 'types/client/marketplace';
+import type { ClusterChainConfig } from 'types/multichain';
+
+// minimal set of fields for external chains
+export interface ExternalChain {
+  id: string;
+  name: string;
+  logo: string | undefined;
+  explorer_url: string;
+}
+
+export type ExternalChainExtended = ClusterChainConfig | EssentialDappsChainConfig;
diff --git a/types/multichain.ts b/types/multichain.ts
index b3cf4cb2ce..af94ad9bb3 100644
--- a/types/multichain.ts
+++ b/types/multichain.ts
@@ -1,16 +1,12 @@
-import type { Chain } from 'viem';
+import type { ExternalChain } from 'types/externalChains';
 
 import type config from 'configs/app';
 
-export interface ChainConfig {
-  // TODO @tom2drum make optional
+export interface ClusterChainConfig extends ExternalChain {
   slug: string;
-  // TODO @tom2drum make partial
-  // TODO @tom2drum make chain id primary key
-  config: typeof config;
-  contracts?: Chain['contracts'];
+  app_config: typeof config;
 }
 
 export interface MultichainConfig {
-  chains: Array<ChainConfig>;
+  chains: Array<ClusterChainConfig>;
 }
diff --git a/ui/address/AddressAdvancedFilterLink.tsx b/ui/address/AddressAdvancedFilterLink.tsx
index e0c35afc97..21acd11c15 100644
--- a/ui/address/AddressAdvancedFilterLink.tsx
+++ b/ui/address/AddressAdvancedFilterLink.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import type { AddressFromToFilter } from 'types/api/address';
 import { ADVANCED_FILTER_TYPES } from 'types/api/advancedFilter';
 import type { TokenType } from 'types/api/token';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import config from 'configs/app';
 import { useMultichainContext } from 'lib/contexts/multichain';
@@ -16,16 +16,16 @@ interface Props {
   address: string;
   typeFilter: Array<TokenType>;
   directionFilter: AddressFromToFilter;
-  chainData?: ChainConfig;
+  chainData?: ClusterChainConfig;
 }
 
 const AddressAdvancedFilterLink = ({ isLoading, address, typeFilter, directionFilter, chainData }: Props) => {
   const isInitialLoading = useIsInitialLoading(isLoading);
   const multichainContext = useMultichainContext();
 
-  const chainConfig = chainData?.config || multichainContext?.chain.config || config;
+  const chainConfig = chainData?.app_config || multichainContext?.chain.app_config || config;
 
-  if (!chainConfig.features.advancedFilter.isEnabled) {
+  if (!chainConfig?.features?.advancedFilter.isEnabled) {
     return null;
   }
 
@@ -35,12 +35,12 @@ const AddressAdvancedFilterLink = ({ isLoading, address, typeFilter, directionFi
     transaction_types: typeFilter.length > 0 ? typeFilter : ADVANCED_FILTER_TYPES.filter((type) => type !== 'coin_transfer'),
   }, (value) => value !== undefined);
 
-  const linkContext = (chainData ? { chain: chainData } : undefined) ?? multichainContext;
+  const routeParams = (chainData ? { chain: chainData } : undefined) ?? multichainContext;
 
   return (
     <AdvancedFilterLink
       query={ queryParams }
-      linkContext={ linkContext }
+      routeParams={ routeParams || undefined }
       loading={ isInitialLoading }
     />
   );
diff --git a/ui/address/AddressContract.tsx b/ui/address/AddressContract.tsx
index 8b98f80f01..12b585e1c5 100644
--- a/ui/address/AddressContract.tsx
+++ b/ui/address/AddressContract.tsx
@@ -11,6 +11,7 @@ import useIsMobile from 'lib/hooks/useIsMobile';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
+import type { Props as RoutedTabsProps } from 'toolkit/components/AdaptiveTabs/AdaptiveTabs';
 import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
 import { SECOND } from 'toolkit/utils/consts';
 
@@ -19,13 +20,13 @@ import ContractAutoVerificationStatus from './contract/ContractAutoVerificationS
 import useContractTabs from './contract/useContractTabs';
 import { CONTRACT_TAB_IDS } from './contract/utils';
 
-interface Props {
+interface Props extends Pick<RoutedTabsProps, 'leftSlot' | 'leftSlotProps'> {
   addressData: Address | undefined;
   isLoading?: boolean;
   hasMudTab?: boolean;
 }
 
-const AddressContract = ({ addressData, isLoading = false, hasMudTab }: Props) => {
+const AddressContract = ({ addressData, isLoading = false, hasMudTab, ...rest }: Props) => {
   const [ isQueryEnabled, setIsQueryEnabled ] = React.useState(false);
   const [ autoVerificationStatus, setAutoVerificationStatus ] = React.useState<TContractAutoVerificationStatus | null>(null);
 
@@ -97,6 +98,7 @@ const AddressContract = ({ addressData, isLoading = false, hasMudTab }: Props) =
       isLoading={ contractTabs.isLoading }
       rightSlot={ rightSlot }
       rightSlotProps={{ ml: contractTabs.tabs.length > 1 ? { base: 'auto', md: 6 } : 0 }}
+      { ...rest }
     />
   );
 };
diff --git a/ui/address/AddressCsvExportLink.tsx b/ui/address/AddressCsvExportLink.tsx
index 46bb2aa22c..1cc6994602 100644
--- a/ui/address/AddressCsvExportLink.tsx
+++ b/ui/address/AddressCsvExportLink.tsx
@@ -2,7 +2,7 @@ import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { CsvExportParams } from 'types/client/address';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import { route } from 'nextjs/routes';
 
@@ -19,7 +19,7 @@ interface Props {
   params: CsvExportParams;
   className?: string;
   isLoading?: boolean;
-  chainData?: ChainConfig;
+  chainData?: ClusterChainConfig;
 }
 
 const AddressCsvExportLink = ({ className, address, params, isLoading, chainData }: Props) => {
@@ -27,20 +27,18 @@ const AddressCsvExportLink = ({ className, address, params, isLoading, chainData
   const isInitialLoading = useIsInitialLoading(isLoading);
   const multichainContext = useMultichainContext();
 
-  const chainConfig = chainData?.config || multichainContext?.chain.config || config;
+  const chainConfig = chainData?.app_config || multichainContext?.chain.app_config || config;
 
   if (!chainConfig.features.csvExport.isEnabled) {
     return null;
   }
 
-  const linkContext = (chainData ? { chain: chainData } : undefined) ?? multichainContext;
-
   return (
     <Tooltip disabled={ !isMobile } content="Download CSV">
       <Link
         className={ className }
         whiteSpace="nowrap"
-        href={ route({ pathname: '/csv-export', query: { ...params, address } }, linkContext) }
+        href={ route({ pathname: '/csv-export', query: { ...params, address } }, { chain: chainData ?? multichainContext?.chain }) }
         flexShrink={ 0 }
         loading={ isInitialLoading }
         minW={ 8 }
diff --git a/ui/address/AddressTokens.tsx b/ui/address/AddressTokens.tsx
index a9e224607d..4ec0d1d61d 100644
--- a/ui/address/AddressTokens.tsx
+++ b/ui/address/AddressTokens.tsx
@@ -72,7 +72,18 @@ const AddressTokens = ({ shouldRender = true, isQueryEnabled = true }: Props) =>
   const hasActiveFilters = Boolean(nftTokenTypes?.length);
 
   const tabs = [
-    { id: 'tokens_erc20', title: `${ config.chain.tokenStandard }-20`, component: <ERC20Tokens tokensQuery={ erc20Query }/> },
+    {
+      id: 'tokens_erc20',
+      title: `${ config.chain.tokenStandard }-20`,
+      component: (
+        <ERC20Tokens
+          items={ erc20Query.data?.items }
+          isLoading={ erc20Query.isPlaceholderData }
+          pagination={ erc20Query.pagination }
+          isError={ erc20Query.isError }
+        />
+      ),
+    },
     {
       id: 'tokens_nfts',
       title: 'NFTs',
diff --git a/ui/address/coinBalance/AddressCoinBalanceHistory.tsx b/ui/address/coinBalance/AddressCoinBalanceHistory.tsx
index 58686ea40d..a74e32ffc7 100644
--- a/ui/address/coinBalance/AddressCoinBalanceHistory.tsx
+++ b/ui/address/coinBalance/AddressCoinBalanceHistory.tsx
@@ -7,7 +7,6 @@ import type { PaginationParams } from 'ui/shared/pagination/types';
 
 import type { ResourceError } from 'lib/api/resources';
 import { useMultichainContext } from 'lib/contexts/multichain';
-import { getChainDataForList } from 'lib/multichain/getChainDataForList';
 import { currencyUnits } from 'lib/units';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
@@ -26,7 +25,7 @@ interface Props {
 
 const AddressCoinBalanceHistory = ({ query }: Props) => {
   const multichainContext = useMultichainContext();
-  const chainData = getChainDataForList(multichainContext);
+  const chainData = multichainContext?.chain;
 
   const content = query.data?.items ? (
     <>
diff --git a/ui/address/coinBalance/AddressCoinBalanceListItem.tsx b/ui/address/coinBalance/AddressCoinBalanceListItem.tsx
index 726d652351..c478b50968 100644
--- a/ui/address/coinBalance/AddressCoinBalanceListItem.tsx
+++ b/ui/address/coinBalance/AddressCoinBalanceListItem.tsx
@@ -3,7 +3,7 @@ import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { AddressCoinBalanceHistoryItem } from 'types/api/address';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import { currencyUnits } from 'lib/units';
 import { Skeleton } from 'toolkit/chakra/skeleton';
@@ -16,7 +16,7 @@ import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 type Props = AddressCoinBalanceHistoryItem & {
   page: number;
   isLoading: boolean;
-  chainData?: ChainConfig;
+  chainData?: ClusterChainConfig;
 };
 
 const AddressCoinBalanceListItem = (props: Props) => {
diff --git a/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx b/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx
index 912d2bfaf0..f5fda8956c 100644
--- a/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx
+++ b/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx
@@ -3,20 +3,20 @@ import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { AddressCoinBalanceHistoryItem } from 'types/api/address';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { TableCell, TableRow } from 'toolkit/chakra/table';
 import { WEI, ZERO } from 'toolkit/utils/consts';
-import ChainIcon from 'ui/optimismSuperchain/components/ChainIcon';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import ChainIcon from 'ui/shared/externalChains/ChainIcon';
 import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 type Props = AddressCoinBalanceHistoryItem & {
   page: number;
   isLoading: boolean;
-  chainData?: ChainConfig;
+  chainData?: ClusterChainConfig;
 };
 
 const AddressCoinBalanceTableItem = (props: Props) => {
diff --git a/ui/address/contract/ContractDetailsVerificationButton.tsx b/ui/address/contract/ContractDetailsVerificationButton.tsx
index 111633fa9f..e69303c3a6 100644
--- a/ui/address/contract/ContractDetailsVerificationButton.tsx
+++ b/ui/address/contract/ContractDetailsVerificationButton.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
+import { useMultichainContext } from 'lib/contexts/multichain';
 import { Button } from 'toolkit/chakra/button';
 import type { LinkProps } from 'toolkit/chakra/link';
 import { Link } from 'toolkit/chakra/link';
@@ -14,10 +15,16 @@ interface Props extends LinkProps {
 
 const ContractDetailsVerificationButton = ({ isLoading, addressHash, ...rest }: Props) => {
 
-  const href = config.features.opSuperchain.isEnabled ?
-  // TODO @tom2drum adjust URL to Vera
-    'https://vera.blockscout.com' :
-    route({ pathname: '/address/[hash]/contract-verification', query: { hash: addressHash } });
+  const multichainContext = useMultichainContext();
+
+  const href = (() => {
+    if (multichainContext) {
+      const searchParams = new URLSearchParams();
+      searchParams.set('contracts', `${ multichainContext.chain.id }:${ addressHash }`);
+      return `https://vera.blockscout.com?${ searchParams.toString() }`;
+    }
+    return route({ pathname: '/address/[hash]/contract-verification', query: { hash: addressHash } });
+  })();
 
   return (
     <Link
diff --git a/ui/address/contract/ContractSourceCode.tsx b/ui/address/contract/ContractSourceCode.tsx
index 0191e32954..d3d033c1a6 100644
--- a/ui/address/contract/ContractSourceCode.tsx
+++ b/ui/address/contract/ContractSourceCode.tsx
@@ -3,8 +3,9 @@ import React from 'react';
 
 import type { SmartContract } from 'types/api/contract';
 
-import { route } from 'nextjs-routes';
+import { route } from 'nextjs/routes';
 
+import { useMultichainContext } from 'lib/contexts/multichain';
 import formatLanguageName from 'lib/contracts/formatLanguageName';
 import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
@@ -52,6 +53,8 @@ interface Props {
 
 export const ContractSourceCode = ({ data, isLoading, sourceAddress }: Props) => {
 
+  const multichainContext = useMultichainContext();
+
   const editorData = React.useMemo(() => {
     return getEditorData(data);
   }, [ data ]);
@@ -71,7 +74,7 @@ export const ContractSourceCode = ({ data, isLoading, sourceAddress }: Props) =>
   const diagramLink = data?.can_be_visualized_via_sol2uml ? (
     <Tooltip content="Visualize contract code using Sol2Uml JS library">
       <Link
-        href={ route({ pathname: '/visualize/sol2uml', query: { address: sourceAddress } }) }
+        href={ route({ pathname: '/visualize/sol2uml', query: { address: sourceAddress } }, multichainContext) }
         ml={{ base: '0', lg: 'auto' }}
         loading={ isLoading }
       >
diff --git a/ui/address/contract/info/ContractDetailsInfo.tsx b/ui/address/contract/info/ContractDetailsInfo.tsx
index 7fe4aa5214..e4c76421a0 100644
--- a/ui/address/contract/info/ContractDetailsInfo.tsx
+++ b/ui/address/contract/info/ContractDetailsInfo.tsx
@@ -10,6 +10,7 @@ import { CONTRACT_LICENSES } from 'lib/contracts/licenses';
 import dayjs from 'lib/date/dayjs';
 import { Link } from 'toolkit/chakra/link';
 import { getGitHubOwnerAndRepo } from 'ui/contractVerification/utils';
+import ContainerWithScrollY from 'ui/shared/ContainerWithScrollY';
 import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
@@ -82,7 +83,7 @@ const ContractDetailsInfo = ({ data, isLoading, addressData }: Props) => {
           { contractNameWithCertifiedIcon }
         </ContractDetailsInfoItem>
       ) }
-      { multichainContext && multichainContext.level !== 'page' && addressData.creator_address_hash && addressData.creation_transaction_hash && (
+      { multichainContext && addressData.creator_address_hash && addressData.creation_transaction_hash && (
         <ContractDetailsInfoItem
           label="Creator"
           isLoading={ isLoading }
@@ -99,6 +100,29 @@ const ContractDetailsInfo = ({ data, isLoading, addressData }: Props) => {
           </Flex>
         </ContractDetailsInfoItem>
       ) }
+      { !isLoading && multichainContext && addressData.implementations && addressData.implementations.length > 0 && (
+        <ContractDetailsInfoItem
+          label={ `${ addressData.proxy_type === 'eip7702' ? 'Delegated to' : `Implementation${ addressData.implementations.length > 1 ? 's' : '' }` }` }
+          isLoading={ isLoading }
+          contentProps={{ maxW: 'calc(100% - 194px)', position: 'relative' }}
+        >
+          <ContainerWithScrollY gradientHeight={ 48 } maxH="200px">
+            { addressData.implementations.map((item) => (
+              <AddressEntity
+                key={ item.address_hash }
+                address={{
+                  hash: item.address_hash,
+                  filecoin: { robust: item.filecoin_robust_address },
+                  name: item.name,
+                  is_contract: true,
+                }}
+                isLoading={ isLoading }
+                noIcon
+              />
+            )) }
+          </ContainerWithScrollY>
+        </ContractDetailsInfoItem>
+      ) }
       { data.compiler_version && (
         <ContractDetailsInfoItem
           label="Compiler version"
diff --git a/ui/address/contract/info/ContractDetailsInfoItem.tsx b/ui/address/contract/info/ContractDetailsInfoItem.tsx
index d43bb3cec8..78ff3c03bc 100644
--- a/ui/address/contract/info/ContractDetailsInfoItem.tsx
+++ b/ui/address/contract/info/ContractDetailsInfoItem.tsx
@@ -1,3 +1,4 @@
+import type { BoxProps } from '@chakra-ui/react';
 import { chakra, Flex, GridItem } from '@chakra-ui/react';
 import React from 'react';
 
@@ -10,18 +11,19 @@ interface Props {
   className?: string;
   isLoading: boolean;
   hint?: string;
+  contentProps?: BoxProps;
 }
 
-const ContractDetailsInfoItem = ({ label, children, className, isLoading, hint }: Props) => {
+const ContractDetailsInfoItem = ({ label, children, className, isLoading, hint, contentProps }: Props) => {
   return (
-    <GridItem display="flex" columnGap={ 6 } wordBreak="break-all" className={ className } alignItems="baseline">
+    <GridItem display="flex" columnGap={ 6 } wordBreak="break-all" className={ className } alignItems="baseline" maxW="100%" overflow="hidden">
       <Skeleton loading={ isLoading } w="170px" flexShrink={ 0 } fontWeight={ 500 }>
         <Flex alignItems="center">
           { label }
           { hint && <Hint label={ hint } ml={ 2 }/> }
         </Flex>
       </Skeleton>
-      <Skeleton loading={ isLoading }>{ children }</Skeleton>
+      <Skeleton loading={ isLoading } { ...contentProps }>{ children }</Skeleton>
     </GridItem>
   );
 };
diff --git a/ui/address/contract/methods/form/ContractMethodFieldInput.tsx b/ui/address/contract/methods/form/ContractMethodFieldInput.tsx
index 2a6a22d1ff..e118313a04 100644
--- a/ui/address/contract/methods/form/ContractMethodFieldInput.tsx
+++ b/ui/address/contract/methods/form/ContractMethodFieldInput.tsx
@@ -47,7 +47,6 @@ const ContractMethodFieldInput = ({ data, hideLabel, path: name, className, isDi
   const { control, setValue, getValues } = useFormContext();
   const { field, fieldState } = useController({ control, name, rules: { validate } });
 
-  const inputBgColor = { _light: 'white', _dark: 'black' };
   const nativeCoinRowBgColor = { _light: 'gray.100', _dark: 'gray.700' };
 
   const hasMultiplyButton = argTypeMatchInt && Number(argTypeMatchInt.power) >= 64;
@@ -172,7 +171,7 @@ const ContractMethodFieldInput = ({ data, hideLabel, path: name, className, isDi
   const inputProps = {
     ...field,
     size: 'sm' as const,
-    bgColor: inputBgColor,
+    bgColor: 'bg.primary',
     onChange: handleChange,
     required: !isOptional,
     placeholder: data.type,
diff --git a/ui/address/contract/methods/useCallMethodPublicClient.ts b/ui/address/contract/methods/useCallMethodPublicClient.ts
index dbbb93f7ae..41bfb6b08f 100644
--- a/ui/address/contract/methods/useCallMethodPublicClient.ts
+++ b/ui/address/contract/methods/useCallMethodPublicClient.ts
@@ -19,7 +19,7 @@ interface Params {
 
 export default function useCallMethodPublicClient(): (params: Params) => Promise<FormSubmitResult> {
   const multichainContext = useMultichainContext();
-  const chainId = Number((multichainContext?.chain.config ?? config).chain.id);
+  const chainId = Number((multichainContext?.chain.app_config ?? config).chain?.id);
   const publicClient = usePublicClient({ chainId });
   const { address: account } = useAccount();
 
diff --git a/ui/address/contract/methods/useCallMethodWalletClient.ts b/ui/address/contract/methods/useCallMethodWalletClient.ts
index b6bb669835..a7c50a0c49 100644
--- a/ui/address/contract/methods/useCallMethodWalletClient.ts
+++ b/ui/address/contract/methods/useCallMethodWalletClient.ts
@@ -18,9 +18,9 @@ interface Params {
 
 export default function useCallMethodWalletClient(): (params: Params) => Promise<FormSubmitResult> {
   const multichainContext = useMultichainContext();
-  const chainConfig = (multichainContext?.chain.config ?? config).chain;
+  const chainConfig = (multichainContext?.chain.app_config ?? config).chain;
 
-  const { data: walletClient } = useWalletClient({ chainId: Number(chainConfig.id) });
+  const { data: walletClient } = useWalletClient({ chainId: Number(chainConfig?.id) });
   const { isConnected, chainId, address: account } = useAccount();
   const { switchChainAsync } = useSwitchChain();
   const { trackTransaction, trackTransactionConfirm } = useRewardsActivity();
@@ -34,8 +34,8 @@ export default function useCallMethodWalletClient(): (params: Params) => Promise
       throw new Error('Wallet Client is not defined');
     }
 
-    if (chainId && String(chainId) !== chainConfig.id) {
-      await switchChainAsync({ chainId: Number(chainConfig.id) });
+    if (chainId && String(chainId) !== chainConfig?.id) {
+      await switchChainAsync({ chainId: Number(chainConfig?.id) });
     }
 
     const address = getAddress(addressHash);
diff --git a/ui/address/contract/useContractTabs.tsx b/ui/address/contract/useContractTabs.tsx
index 550b921304..f6eccaafe0 100644
--- a/ui/address/contract/useContractTabs.tsx
+++ b/ui/address/contract/useContractTabs.tsx
@@ -2,6 +2,7 @@ import type { Channel } from 'phoenix';
 import React from 'react';
 
 import type { Address } from 'types/api/address';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
@@ -34,10 +35,10 @@ interface Props {
   isEnabled: boolean;
   hasMudTab?: boolean;
   channel?: Channel;
-  chainSlug?: string;
+  chain?: ClusterChainConfig;
 }
 
-export default function useContractTabs({ addressData, isEnabled, hasMudTab, channel, chainSlug }: Props): ReturnType {
+export default function useContractTabs({ addressData, isEnabled, hasMudTab, channel, chain }: Props): ReturnType {
   const contractQuery = useApiQuery('general:contract', {
     pathParams: { hash: addressData?.hash },
     queryOptions: {
@@ -45,7 +46,7 @@ export default function useContractTabs({ addressData, isEnabled, hasMudTab, cha
       refetchOnMount: false,
       placeholderData: addressData?.is_verified ? stubs.CONTRACT_CODE_VERIFIED : stubs.CONTRACT_CODE_UNVERIFIED,
     },
-    chainSlug,
+    chain,
   });
 
   const mudSystemsQuery = useApiQuery('general:mud_systems', {
@@ -62,22 +63,6 @@ export default function useContractTabs({ addressData, isEnabled, hasMudTab, cha
   }, [ addressData?.hash, addressData?.implementations ]);
 
   return React.useMemo(() => {
-
-    // TODO @tom2drum remove this condition once the API will return is_contract flag
-    if (isEnabled && !addressData?.is_contract) {
-      return {
-        tabs: [
-          {
-            id: 'contract_code' as const,
-            title: 'Code',
-            component: <div>Not a contract</div>,
-          },
-        ],
-        isLoading: false,
-        isPartiallyVerified: false,
-      };
-    }
-
     return {
       tabs: [
         addressData && {
@@ -120,7 +105,6 @@ export default function useContractTabs({ addressData, isEnabled, hasMudTab, cha
     };
   }, [
     addressData,
-    isEnabled,
     contractQuery,
     channel,
     verifiedImplementations,
diff --git a/ui/address/details/AddressCounterItem.tsx b/ui/address/details/AddressCounterItem.tsx
index e8445dce15..9e6a0d6fb0 100644
--- a/ui/address/details/AddressCounterItem.tsx
+++ b/ui/address/details/AddressCounterItem.tsx
@@ -7,7 +7,6 @@ import type { AddressCounters } from 'types/api/address';
 import { route } from 'nextjs/routes';
 
 import type { ResourceError } from 'lib/api/resources';
-import { useMultichainContext } from 'lib/contexts/multichain';
 import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 
@@ -26,8 +25,6 @@ const PROP_TO_TAB = {
 };
 
 const AddressCounterItem = ({ prop, query, address, isAddressQueryLoading, isDegradedData }: Props) => {
-  const multichainContext = useMultichainContext();
-
   const handleClick = React.useCallback(() => {
     window.scrollTo({ top: 0, behavior: 'smooth' });
   }, []);
@@ -58,7 +55,7 @@ const AddressCounterItem = ({ prop, query, address, isAddressQueryLoading, isDeg
 
       return (
         <Link
-          href={ route({ pathname: '/address/[hash]', query: { hash: address, tab: PROP_TO_TAB[prop] } }, multichainContext) }
+          href={ route({ pathname: '/address/[hash]', query: { hash: address, tab: PROP_TO_TAB[prop] } }) }
           scroll={ false }
           onClick={ handleClick }
         >
diff --git a/ui/address/tokenSelect/TokenSelect.tsx b/ui/address/tokenSelect/TokenSelect.tsx
index 45ea0299cd..a0e318b885 100644
--- a/ui/address/tokenSelect/TokenSelect.tsx
+++ b/ui/address/tokenSelect/TokenSelect.tsx
@@ -30,7 +30,7 @@ const TokenSelect = () => {
   const multichainContext = useMultichainContext();
 
   const addressHash = getQueryParamString(router.query.hash);
-  const addressResourceKey = getResourceKey('general:address', { pathParams: { hash: addressHash }, chainSlug: multichainContext?.chain?.slug });
+  const addressResourceKey = getResourceKey('general:address', { pathParams: { hash: addressHash }, chainId: multichainContext?.chain?.id });
 
   const addressQueryData = queryClient.getQueryData<Address>(addressResourceKey);
 
@@ -38,7 +38,7 @@ const TokenSelect = () => {
   const tokensResourceKey = getResourceKey('general:address_tokens', {
     pathParams: { hash: addressQueryData?.hash },
     queryParams: { type: 'ERC-20' },
-    chainSlug: multichainContext?.chain?.slug,
+    chainId: multichainContext?.chain?.id,
   });
   const tokensIsFetching = useIsFetching({ queryKey: tokensResourceKey });
 
@@ -69,7 +69,7 @@ const TokenSelect = () => {
       }
       <Tooltip content="Show all tokens">
         <Link
-          href={ route({ pathname: '/address/[hash]', query: { hash: addressHash, tab: 'tokens' } }, multichainContext) }
+          href={ route({ pathname: '/address/[hash]', query: { hash: addressHash, tab: 'tokens' } }, { chain: multichainContext?.chain }) }
           asChild
           scroll={ false }
         >
diff --git a/ui/address/tokenSelect/TokenSelectButton.tsx b/ui/address/tokenSelect/TokenSelectButton.tsx
index 15a09846ad..2e1dcf0aa2 100644
--- a/ui/address/tokenSelect/TokenSelectButton.tsx
+++ b/ui/address/tokenSelect/TokenSelectButton.tsx
@@ -13,7 +13,7 @@ import { getTokensTotalInfo } from '../utils/tokenUtils';
 
 interface Props {
   isOpen: boolean;
-  isLoading: boolean;
+  isLoading?: boolean;
   data: FormattedData;
 }
 
@@ -64,7 +64,7 @@ const TokenSelectButton = ({ isOpen, isLoading, data, ...rest }: Props, ref: Rea
           position="absolute"
           top={ 0 }
           left={ 0 }
-          bgColor={{ _light: 'white', _dark: 'black' }}
+          bgColor="bg.primary"
           borderRadius="base"
         />
       ) }
diff --git a/ui/address/tokenSelect/TokenSelectDesktop.tsx b/ui/address/tokenSelect/TokenSelectDesktop.tsx
index 4de14b2b81..bf5ee7f68e 100644
--- a/ui/address/tokenSelect/TokenSelectDesktop.tsx
+++ b/ui/address/tokenSelect/TokenSelectDesktop.tsx
@@ -11,7 +11,7 @@ import useTokenSelect from './useTokenSelect';
 
 interface Props {
   data: FormattedData;
-  isLoading: boolean;
+  isLoading?: boolean;
 }
 
 const TokenSelectDesktop = ({ data, isLoading }: Props) => {
diff --git a/ui/address/tokenSelect/TokenSelectItem.tsx b/ui/address/tokenSelect/TokenSelectItem.tsx
index bae1852cc9..ea292f1a0d 100644
--- a/ui/address/tokenSelect/TokenSelectItem.tsx
+++ b/ui/address/tokenSelect/TokenSelectItem.tsx
@@ -2,9 +2,10 @@ import { chakra, Flex } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
-import { route } from 'nextjs-routes';
+import { route } from 'nextjs/routes';
 
 import config from 'configs/app';
+import multichainConfig from 'configs/multichain';
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { Link } from 'toolkit/chakra/link';
 import NativeTokenTag from 'ui/shared/celo/NativeTokenTag';
@@ -22,6 +23,16 @@ const TokenSelectItem = ({ data }: Props) => {
   const isNativeToken = config.UI.views.address.nativeTokenAddress &&
     data.token.address_hash.toLowerCase() === config.UI.views.address.nativeTokenAddress.toLowerCase();
 
+  const chain = React.useMemo(() => {
+    if (!data.chain_values) {
+      return;
+    }
+
+    const chainId = Object.keys(data.chain_values)[0];
+    const chain = multichainConfig()?.chains.find((chain) => chain.id === chainId);
+    return chain;
+  }, [ data.chain_values ]);
+
   const secondRow = (() => {
     switch (data.token.type) {
       case 'ERC-20': {
@@ -73,7 +84,7 @@ const TokenSelectItem = ({ data }: Props) => {
     }
   })();
 
-  const url = route({ pathname: '/token/[hash]', query: { hash: data.token.address_hash } });
+  const url = route({ pathname: '/token/[hash]', query: { hash: data.token.address_hash } }, { chain });
 
   return (
     <Link
@@ -91,9 +102,10 @@ const TokenSelectItem = ({ data }: Props) => {
       fontSize="sm"
       href={ url }
     >
-      <Flex alignItems="center" w="100%" overflow="hidden">
+      <Flex alignItems="center" w="100%">
         <TokenEntity
           token={ data.token }
+          chain={ chain }
           noSymbol
           noCopy
           noLink
diff --git a/ui/address/tokenSelect/TokenSelectMobile.tsx b/ui/address/tokenSelect/TokenSelectMobile.tsx
index b77c6afdae..58f563681d 100644
--- a/ui/address/tokenSelect/TokenSelectMobile.tsx
+++ b/ui/address/tokenSelect/TokenSelectMobile.tsx
@@ -11,7 +11,7 @@ import useTokenSelect from './useTokenSelect';
 
 interface Props {
   data: FormattedData;
-  isLoading: boolean;
+  isLoading?: boolean;
 }
 
 const TokenSelectMobile = ({ data, isLoading }: Props) => {
diff --git a/ui/address/tokens/AddressCollections.tsx b/ui/address/tokens/AddressCollections.tsx
index 1a62f07df0..f7056969fb 100644
--- a/ui/address/tokens/AddressCollections.tsx
+++ b/ui/address/tokens/AddressCollections.tsx
@@ -52,7 +52,7 @@ const AddressCollections = ({ collectionsQuery, address, tokenTypes, onTokenType
         holder_address_hash: address,
         scroll_to_tabs: 'true',
       },
-    }, multichainContext);
+    }, { chain: multichainContext?.chain });
     const hasOverload = Number(item.amount) > item.token_instances.length;
     return (
       <Box key={ item.token.address_hash + index } mb={ 6 }>
@@ -89,6 +89,7 @@ const AddressCollections = ({ collectionsQuery, address, tokenTypes, onTokenType
                 { ...instance }
                 token={ item.token }
                 isLoading={ isPlaceholderData }
+                chain={ multichainContext?.chain }
               />
             );
           }) }
diff --git a/ui/address/tokens/ERC20Tokens.tsx b/ui/address/tokens/ERC20Tokens.tsx
index fe64c1ef70..fd57335f9a 100644
--- a/ui/address/tokens/ERC20Tokens.tsx
+++ b/ui/address/tokens/ERC20Tokens.tsx
@@ -1,38 +1,42 @@
 import { Box } from '@chakra-ui/react';
 import React from 'react';
 
+import type { AddressTokenBalance } from 'types/api/address';
+import type { PaginationParams } from 'ui/shared/pagination/types';
+
 import useIsMobile from 'lib/hooks/useIsMobile';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
-import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
 
 import ERC20TokensListItem from './ERC20TokensListItem';
 import ERC20TokensTable from './ERC20TokensTable';
 
 type Props = {
-  tokensQuery: QueryWithPagesResult<'general:address_tokens'>;
+  items: Array<Pick<AddressTokenBalance, 'token' | 'value'>> | undefined;
+  isLoading: boolean;
+  pagination: PaginationParams;
+  isError: boolean;
+  top?: number;
 };
 
-const ERC20Tokens = ({ tokensQuery }: Props) => {
+const ERC20Tokens = ({ items, isLoading, pagination, isError, top }: Props) => {
   const isMobile = useIsMobile();
 
-  const { isError, isPlaceholderData, data, pagination } = tokensQuery;
-
   const actionBar = isMobile && pagination.isVisible && (
     <ActionBar mt={ -6 }>
       <Pagination ml="auto" { ...pagination }/>
     </ActionBar>
   );
 
-  const content = data?.items ? (
+  const content = items ? (
     <>
-      <Box hideBelow="lg"><ERC20TokensTable data={ data.items } top={ pagination.isVisible ? 72 : 0 } isLoading={ isPlaceholderData }/></Box>
-      <Box hideFrom="lg">{ data.items.map((item, index) => (
+      <Box hideBelow="lg"><ERC20TokensTable data={ items } top={ top ?? (pagination.isVisible ? 72 : 0) } isLoading={ isLoading }/></Box>
+      <Box hideFrom="lg">{ items.map((item, index) => (
         <ERC20TokensListItem
-          key={ item.token.address_hash + (isPlaceholderData ? index : '') }
+          key={ item.token.address_hash + (isLoading ? index : '') }
           { ...item }
-          isLoading={ isPlaceholderData }
+          isLoading={ isLoading }
         />
       )) }
       </Box>
@@ -42,7 +46,7 @@ const ERC20Tokens = ({ tokensQuery }: Props) => {
   return (
     <DataListDisplay
       isError={ isError }
-      itemsNum={ data?.items.length }
+      itemsNum={ items?.length }
       emptyText="There are no tokens of selected type."
       actionBar={ actionBar }
     >
diff --git a/ui/address/tokens/ERC20TokensListItem.tsx b/ui/address/tokens/ERC20TokensListItem.tsx
index e459376733..096bffa850 100644
--- a/ui/address/tokens/ERC20TokensListItem.tsx
+++ b/ui/address/tokens/ERC20TokensListItem.tsx
@@ -1,9 +1,10 @@
 import { Flex, HStack } from '@chakra-ui/react';
 import React from 'react';
 
-import type { AddressTokenBalance } from 'types/api/address';
+import type { AddressTokensErc20Item } from './types';
 
 import config from 'configs/app';
+import multichainConfig from 'configs/multichain';
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
@@ -12,9 +13,9 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 
-type Props = AddressTokenBalance & { isLoading: boolean };
+type Props = AddressTokensErc20Item & { isLoading: boolean };
 
-const ERC20TokensListItem = ({ token, value, isLoading }: Props) => {
+const ERC20TokensListItem = ({ token, value, isLoading, chain_values: chainValues }: Props) => {
 
   const {
     valueStr: tokenQuantity,
@@ -24,11 +25,22 @@ const ERC20TokensListItem = ({ token, value, isLoading }: Props) => {
   const isNativeToken = config.UI.views.address.nativeTokenAddress &&
     token.address_hash.toLowerCase() === config.UI.views.address.nativeTokenAddress.toLowerCase();
 
+  const chainInfo = React.useMemo(() => {
+    if (!chainValues) {
+      return;
+    }
+
+    const chainId = Object.keys(chainValues)[0];
+    const chain = multichainConfig()?.chains.find((chain) => chain.id === chainId);
+    return chain;
+  }, [ chainValues ]);
+
   return (
     <ListItemMobile rowGap={ 2 }>
       <Flex alignItems="center" width="100%" columnGap={ 2 }>
         <TokenEntity
           token={ token }
+          chain={ chainInfo }
           isLoading={ isLoading }
           noCopy
           jointSymbol
diff --git a/ui/address/tokens/ERC20TokensTable.tsx b/ui/address/tokens/ERC20TokensTable.tsx
index 2accd1b7b3..0dbe5cf468 100644
--- a/ui/address/tokens/ERC20TokensTable.tsx
+++ b/ui/address/tokens/ERC20TokensTable.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 
-import type { AddressTokenBalance } from 'types/api/address';
+import type { AddressTokensErc20Item } from './types';
 
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import ERC20TokensTableItem from './ERC20TokensTableItem';
 
 interface Props {
-  data: Array<AddressTokenBalance>;
+  data: Array<AddressTokensErc20Item>;
   top: number;
   isLoading: boolean;
 }
@@ -26,7 +26,11 @@ const ERC20TokensTable = ({ data, top, isLoading }: Props) => {
       </TableHeaderSticky>
       <TableBody>
         { data.map((item, index) => (
-          <ERC20TokensTableItem key={ item.token.address_hash + (isLoading ? index : '') } { ...item } isLoading={ isLoading }/>
+          <ERC20TokensTableItem
+            key={ item.token.address_hash + (isLoading ? index : '') + (item.chain_values ? Object.keys(item.chain_values).join(',') : '') }
+            { ...item }
+            isLoading={ isLoading }
+          />
         )) }
       </TableBody>
     </TableRoot>
diff --git a/ui/address/tokens/ERC20TokensTableItem.tsx b/ui/address/tokens/ERC20TokensTableItem.tsx
index a3a954dd53..b1eca4666b 100644
--- a/ui/address/tokens/ERC20TokensTableItem.tsx
+++ b/ui/address/tokens/ERC20TokensTableItem.tsx
@@ -1,9 +1,10 @@
 import { Flex, HStack } from '@chakra-ui/react';
 import React from 'react';
 
-import type { AddressTokenBalance } from 'types/api/address';
+import type { AddressTokensErc20Item } from './types';
 
 import config from 'configs/app';
+import multichainConfig from 'configs/multichain';
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { TableCell, TableRow } from 'toolkit/chakra/table';
@@ -12,11 +13,12 @@ import NativeTokenTag from 'ui/shared/celo/NativeTokenTag';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 
-type Props = AddressTokenBalance & { isLoading: boolean };
+type Props = AddressTokensErc20Item & { isLoading: boolean };
 
 const ERC20TokensTableItem = ({
   token,
   value,
+  chain_values: chainValues,
   isLoading,
 }: Props) => {
 
@@ -28,12 +30,23 @@ const ERC20TokensTableItem = ({
   const isNativeToken = config.UI.views.address.nativeTokenAddress &&
     token.address_hash.toLowerCase() === config.UI.views.address.nativeTokenAddress.toLowerCase();
 
+  const chainInfo = React.useMemo(() => {
+    if (!chainValues) {
+      return;
+    }
+
+    const chainId = Object.keys(chainValues)[0];
+    const chain = multichainConfig()?.chains.find((chain) => chain.id === chainId);
+    return chain;
+  }, [ chainValues ]);
+
   return (
     <TableRow role="group" >
       <TableCell verticalAlign="middle">
         <HStack gap={ 2 }>
           <TokenEntity
             token={ token }
+            chain={ chainInfo }
             isLoading={ isLoading }
             noCopy
             jointSymbol
diff --git a/ui/address/tokens/NFTItem.tsx b/ui/address/tokens/NFTItem.tsx
index e8d848dad2..f3071ceb68 100644
--- a/ui/address/tokens/NFTItem.tsx
+++ b/ui/address/tokens/NFTItem.tsx
@@ -2,9 +2,9 @@ import { Flex, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressNFT } from 'types/api/address';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
-import { route } from 'nextjs-routes';
+import { route } from 'nextjs/routes';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { getTokenTypeName } from 'lib/token/tokenTypes';
@@ -17,12 +17,12 @@ import NftMedia from 'ui/shared/nft/NftMedia';
 
 import NFTItemContainer from './NFTItemContainer';
 
-type Props = AddressNFT & { isLoading: boolean; withTokenLink?: boolean; chain?: ChainConfig };
+type Props = AddressNFT & { isLoading: boolean; withTokenLink?: boolean; chain?: ClusterChainConfig };
 
 const NFTItem = ({ token, value, isLoading, withTokenLink, chain, ...tokenInstance }: Props) => {
   const valueResult = token.decimals && value ? getCurrencyValue({ value, decimals: token.decimals, accuracy: 2 }).valueStr : value;
   const tokenInstanceLink = tokenInstance.id ?
-    route({ pathname: '/token/[hash]/instance/[id]', query: { hash: token.address_hash, id: tokenInstance.id } }) :
+    route({ pathname: '/token/[hash]/instance/[id]', query: { hash: token.address_hash, id: tokenInstance.id } }, chain ? { chain } : undefined) :
     undefined;
 
   return (
diff --git a/ui/address/tokens/TokenBalancesItem.tsx b/ui/address/tokens/TokenBalancesItem.tsx
index 69760f6676..65fa2db71b 100644
--- a/ui/address/tokens/TokenBalancesItem.tsx
+++ b/ui/address/tokens/TokenBalancesItem.tsx
@@ -9,9 +9,10 @@ type Props = {
   icon: React.ReactNode;
   valueSecondary?: string;
   isLoading: boolean;
+  contentAfter?: React.ReactNode;
 };
 
-const TokenBalancesItem = ({ name, icon, value, valueSecondary, isLoading }: Props) => {
+const TokenBalancesItem = ({ name, icon, value, valueSecondary, isLoading, contentAfter }: Props) => {
 
   return (
     <Box px="12px" py="10px" bgColor={{ _light: 'theme.stats.bg._light', _dark: 'theme.stats.bg._dark' }} borderRadius="base">
@@ -22,6 +23,7 @@ const TokenBalancesItem = ({ name, icon, value, valueSecondary, isLoading }: Pro
           { value }
           { Boolean(valueSecondary) && <Text color="text.secondary"> ({ valueSecondary })</Text> }
         </Skeleton>
+        { contentAfter }
       </Flex>
     </Box>
   );
diff --git a/ui/address/tokens/types.ts b/ui/address/tokens/types.ts
new file mode 100644
index 0000000000..715a40b3da
--- /dev/null
+++ b/ui/address/tokens/types.ts
@@ -0,0 +1,5 @@
+import type { AddressTokenBalance } from 'types/api/address';
+
+export type AddressTokensErc20Item = Pick<AddressTokenBalance, 'token' | 'value'> & {
+  chain_values?: Record<string, string>;
+};
diff --git a/ui/address/useAddressInternalTxsQuery.ts b/ui/address/useAddressInternalTxsQuery.ts
index 87fdac7095..df1fdc5f12 100644
--- a/ui/address/useAddressInternalTxsQuery.ts
+++ b/ui/address/useAddressInternalTxsQuery.ts
@@ -14,9 +14,10 @@ const getFilterValue = (getFilterValueFromQuery<AddressFromToFilter>).bind(null,
 interface Props {
   enabled: boolean;
   isMultichain?: boolean;
+  chainIds?: Array<string>;
 }
 
-export default function useAddressInternalTxsQuery({ enabled, isMultichain }: Props) {
+export default function useAddressInternalTxsQuery({ enabled, isMultichain, chainIds }: Props) {
   const router = useRouter();
   const hash = getQueryParamString(router.query.hash);
   const [ filterValue, setFilterValue ] = React.useState<AddressFromToFilter>(getFilterValue(router.query.filter));
@@ -41,6 +42,7 @@ export default function useAddressInternalTxsQuery({ enabled, isMultichain }: Pr
       ),
     },
     isMultichain,
+    chainIds,
   });
 
   const onFilterChange = React.useCallback((val: string | Array<string>) => {
diff --git a/ui/address/useAddressTokenTransfersQuery.ts b/ui/address/useAddressTokenTransfersQuery.ts
index 2082282bea..9496cefc9e 100644
--- a/ui/address/useAddressTokenTransfersQuery.ts
+++ b/ui/address/useAddressTokenTransfersQuery.ts
@@ -23,9 +23,10 @@ interface Props {
   currentAddress: string;
   enabled?: boolean;
   isMultichain?: boolean;
+  chainIds?: Array<string>;
 }
 
-export default function useAddressTokenTransfersQuery({ currentAddress, enabled, isMultichain }: Props) {
+export default function useAddressTokenTransfersQuery({ currentAddress, enabled, isMultichain, chainIds }: Props) {
   const router = useRouter();
 
   const [ filters, setFilters ] = React.useState<Filters>(
@@ -48,6 +49,7 @@ export default function useAddressTokenTransfersQuery({ currentAddress, enabled,
       }),
     },
     isMultichain,
+    chainIds,
   });
 
   const onTypeFilterChange = React.useCallback((nextValue: Array<TokenType>) => {
diff --git a/ui/address/useAddressTokenTransfersSocket.ts b/ui/address/useAddressTokenTransfersSocket.ts
index f53422f7a8..4e4213b367 100644
--- a/ui/address/useAddressTokenTransfersSocket.ts
+++ b/ui/address/useAddressTokenTransfersSocket.ts
@@ -83,7 +83,7 @@ export default function useAddressTokenTransfersSocket({ filters, addressHash, d
       const queryKey = getResourceKey('general:address_token_transfers', {
         pathParams: { hash: addressHash },
         queryParams: { ...filters },
-        chainSlug: multichainContext?.chain?.slug,
+        chainId: multichainContext?.chain?.id,
       });
       queryClient.setQueryData(
         queryKey,
@@ -103,7 +103,7 @@ export default function useAddressTokenTransfersSocket({ filters, addressHash, d
       );
     }
 
-  }, [ data?.items, overloadCount, enabled, filters, addressHash, multichainContext?.chain?.slug, queryClient, shouldHideScamTokens ]);
+  }, [ data?.items, overloadCount, enabled, filters, addressHash, multichainContext?.chain?.id, queryClient, shouldHideScamTokens ]);
 
   const handleSocketClose = React.useCallback(() => {
     setShowSocketAlert(true);
diff --git a/ui/address/useAddressTxsQuery.ts b/ui/address/useAddressTxsQuery.ts
index 742335b924..8f23510d78 100644
--- a/ui/address/useAddressTxsQuery.ts
+++ b/ui/address/useAddressTxsQuery.ts
@@ -19,9 +19,10 @@ interface Props {
   addressHash: string;
   enabled: boolean;
   isMultichain?: boolean;
+  chainIds?: Array<string>;
 }
 
-export default function useAddressTxsQuery({ addressHash, enabled, isMultichain }: Props) {
+export default function useAddressTxsQuery({ addressHash, enabled, isMultichain, chainIds }: Props) {
   const router = useRouter();
 
   const [ sort, setSort ] = React.useState<TransactionsSortingValue>(getSortValueFromQuery<TransactionsSortingValue>(router.query, SORT_OPTIONS) || 'default');
@@ -43,6 +44,7 @@ export default function useAddressTxsQuery({ addressHash, enabled, isMultichain
       } }),
     },
     isMultichain,
+    chainIds,
   });
 
   const onFilterChange = React.useCallback((val: string | Array<string>) => {
diff --git a/ui/address/utils/tokenUtils.ts b/ui/address/utils/tokenUtils.ts
index 92758aaea0..e6cb6b1aee 100644
--- a/ui/address/utils/tokenUtils.ts
+++ b/ui/address/utils/tokenUtils.ts
@@ -1,4 +1,5 @@
 import BigNumber from 'bignumber.js';
+import { mapValues } from 'es-toolkit';
 
 import type { AddressTokenBalance } from 'types/api/address';
 import type { TokenType } from 'types/api/token';
@@ -13,6 +14,7 @@ const isNativeToken = (token: TokenEnhancedData) =>
 
 export type TokenEnhancedData = AddressTokenBalance & {
   usd?: BigNumber ;
+  chain_values?: Record<string, string>;
 };
 
 export type Sort = 'desc' | 'asc';
@@ -97,7 +99,13 @@ export const calculateUsdValue = (data: AddressTokenBalance): TokenEnhancedData
   };
 };
 
-export const getTokensTotalInfo = (data: TokenSelectData) => {
+export interface TokensTotalInfo {
+  usd: BigNumber;
+  num: number;
+  isOverflow: boolean;
+}
+
+export const getTokensTotalInfo = (data: TokenSelectData): TokensTotalInfo => {
   const usd = Object.values(data)
     .map(({ items }) => items.filter((item) => !isNativeToken(item)).reduce(usdValueReducer, ZERO))
     .reduce(sumBnReducer, ZERO);
@@ -111,4 +119,17 @@ export const getTokensTotalInfo = (data: TokenSelectData) => {
   return { usd, num, isOverflow };
 };
 
+export const getTokensTotalInfoByChain = (data: TokenSelectData, chainIds: Array<string>) => {
+  return chainIds.reduce((result, chainId) => {
+    const filteredData = mapValues(data, (item) => ({
+      ...item,
+      items: item.items.filter((item) => item.chain_values?.[chainId]),
+    }));
+
+    result[chainId] = getTokensTotalInfo(filteredData);
+
+    return result;
+  }, {} as Record<string, TokensTotalInfo>);
+};
+
 const usdValueReducer = (result: BigNumber, item: TokenEnhancedData) => !item.usd ? result : result.plus(BigNumber(item.usd));
diff --git a/ui/address/utils/useAddressCountersQuery.ts b/ui/address/utils/useAddressCountersQuery.ts
index c62e13c9ba..165b108394 100644
--- a/ui/address/utils/useAddressCountersQuery.ts
+++ b/ui/address/utils/useAddressCountersQuery.ts
@@ -2,6 +2,7 @@ import type { UseQueryResult } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 
 import type { AddressCounters } from 'types/api/address';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import type { ResourceError } from 'lib/api/resources';
 import useApiQuery from 'lib/api/useApiQuery';
@@ -22,10 +23,10 @@ interface Params {
   isEnabled?: boolean;
   isLoading?: boolean;
   isDegradedData?: boolean;
-  chainSlug?: string;
+  chain?: ClusterChainConfig;
 }
 
-export default function useAddressCountersQuery({ hash, isLoading, isDegradedData, isEnabled = true, chainSlug }: Params): AddressCountersQuery {
+export default function useAddressCountersQuery({ hash, isLoading, isDegradedData, isEnabled = true, chain }: Params): AddressCountersQuery {
   const enabled = isEnabled && Boolean(hash) && !isLoading;
 
   const apiQuery = useApiQuery<'general:address_counters', { status: number }>('general:address_counters', {
@@ -35,7 +36,7 @@ export default function useAddressCountersQuery({ hash, isLoading, isDegradedDat
       placeholderData: ADDRESS_COUNTERS,
       refetchOnMount: false,
     },
-    chainSlug,
+    chain,
   });
 
   const rpcQuery = useQuery<RpcResponseType, unknown, AddressCounters | null>({
diff --git a/ui/advancedFilter/ExportCSV.tsx b/ui/advancedFilter/ExportCSV.tsx
index da287c7cca..87734228b1 100644
--- a/ui/advancedFilter/ExportCSV.tsx
+++ b/ui/advancedFilter/ExportCSV.tsx
@@ -4,6 +4,7 @@ import type { AdvancedFilterParams } from 'types/api/advancedFilter';
 
 import config from 'configs/app';
 import buildUrl from 'lib/api/buildUrl';
+import isNeedProxy from 'lib/api/isNeedProxy';
 import { useMultichainContext } from 'lib/contexts/multichain';
 import dayjs from 'lib/date/dayjs';
 import { Button } from 'toolkit/chakra/button';
@@ -33,6 +34,7 @@ const ExportCSV = ({ filters }: Props) => {
       headers: {
         'content-type': 'application/octet-stream',
         ...(recaptchaToken && { 'recaptcha-v2-response': recaptchaToken }),
+        ...(isNeedProxy() && multichainContext?.chain ? { 'x-endpoint': multichainContext.chain.app_config.apis.general?.endpoint } : {}),
       },
     });
 
@@ -55,7 +57,7 @@ const ExportCSV = ({ filters }: Props) => {
 
       const blob = await response.blob();
 
-      const chainText = multichainContext?.chain ? `${ multichainContext.chain.slug.replace(/-/g, '_') }_` : '';
+      const chainText = multichainContext?.chain ? `${ multichainContext.chain.name.replace(' ', '-') }_` : '';
       const fileName = `${ chainText }export-filtered-txs-${ dayjs().format('YYYY-MM-DD-HH-mm-ss') }.csv`;
       downloadBlob(blob, fileName);
 
@@ -69,7 +71,7 @@ const ExportCSV = ({ filters }: Props) => {
     }
   }, [ apiFetchFactory, recaptcha, multichainContext?.chain ]);
 
-  const chainConfig = multichainContext?.chain.config || config;
+  const chainConfig = multichainContext?.chain.app_config || config;
 
   if (!chainConfig.services.reCaptchaV2.siteKey) {
     return null;
diff --git a/ui/apiDocs/utils.ts b/ui/apiDocs/utils.ts
index 830dad45a0..eb9ef7af24 100644
--- a/ui/apiDocs/utils.ts
+++ b/ui/apiDocs/utils.ts
@@ -25,6 +25,10 @@ export const REST_API_SECTIONS = [
     swagger: {
       url: feature.coreApiSwaggerUrl,
       requestInterceptor: (req: SwaggerRequest) => {
+        if (!config.apis.general) {
+          return req;
+        }
+
         const DEFAULT_SERVER = 'blockscout.com/poa/core';
         const DEFAULT_SERVER_NEW = 'eth.blockscout.com';
 
diff --git a/ui/block/BlockDetails.tsx b/ui/block/BlockDetails.tsx
index 031c365fae..2d110d032c 100644
--- a/ui/block/BlockDetails.tsx
+++ b/ui/block/BlockDetails.tsx
@@ -65,7 +65,7 @@ const BlockDetails = ({ query }: Props) => {
     const increment = direction === 'next' ? +1 : -1;
     const nextId = String(data.height + increment);
 
-    router.push(routeParams({ pathname: '/block/[height_or_hash]', query: { height_or_hash: nextId } }, multichainContext), undefined);
+    router.push(routeParams({ pathname: '/block/[height_or_hash]', query: { height_or_hash: nextId } }, { chain: multichainContext?.chain }));
   }, [ data, multichainContext, router ]);
 
   if (!data) {
diff --git a/ui/blockCountdown/createGoogleCalendarLink.ts b/ui/blockCountdown/createGoogleCalendarLink.ts
index 6e10ef93fb..0d91bb8102 100644
--- a/ui/blockCountdown/createGoogleCalendarLink.ts
+++ b/ui/blockCountdown/createGoogleCalendarLink.ts
@@ -14,7 +14,7 @@ const DATE_FORMAT = 'YYYYMMDDTHHmm';
 
 export default function createGoogleCalendarLink({ timeFromNow, blockHeight, multichainContext }: Params): string {
 
-  const chainConfig = multichainContext?.chain.config || config;
+  const chainConfig = multichainContext?.chain.app_config || config;
 
   const date = dayjs().add(timeFromNow, 's');
   const name = `Block #${ blockHeight } reminder | ${ chainConfig.chain.name }`;
diff --git a/ui/blockCountdown/createIcsFileBlob.ts b/ui/blockCountdown/createIcsFileBlob.ts
index e15c03009e..46b95a1573 100644
--- a/ui/blockCountdown/createIcsFileBlob.ts
+++ b/ui/blockCountdown/createIcsFileBlob.ts
@@ -13,7 +13,7 @@ interface Params {
 const DATE_FORMAT = 'YYYYMMDDTHHmmss';
 
 export default function createIcsFileBlob({ date, blockHeight, multichainContext }: Params): Blob {
-  const chainConfig = multichainContext?.chain.config || config;
+  const chainConfig = multichainContext?.chain.app_config || config;
 
   const name = `Block #${ blockHeight } reminder | ${ chainConfig.chain.name }`;
   const description = `#${ blockHeight } block creation time on ${ chainConfig.chain.name } blockchain.`;
diff --git a/ui/blocks/BlocksContent.tsx b/ui/blocks/BlocksContent.tsx
index 90d0a0ba36..fe6029eae4 100644
--- a/ui/blocks/BlocksContent.tsx
+++ b/ui/blocks/BlocksContent.tsx
@@ -10,7 +10,6 @@ import { route } from 'nextjs/routes';
 import { getResourceKey } from 'lib/api/useApiQuery';
 import { useMultichainContext } from 'lib/contexts/multichain';
 import useIsMobile from 'lib/hooks/useIsMobile';
-import { getChainDataForList } from 'lib/multichain/getChainDataForList';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import { Link } from 'toolkit/chakra/link';
@@ -45,7 +44,7 @@ const BlocksContent = ({ type, query, enableSocket = true, top }: Props) => {
   const handleNewBlockMessage: SocketMessage.NewBlock['handler'] = React.useCallback((payload) => {
     const queryKey = getResourceKey('general:blocks', {
       queryParams: { type },
-      chainSlug: multichainContext?.chain?.slug,
+      chainId: multichainContext?.chain?.id,
     });
 
     queryClient.setQueryData(queryKey, (prevData: BlocksResponse | undefined) => {
@@ -70,7 +69,7 @@ const BlocksContent = ({ type, query, enableSocket = true, top }: Props) => {
       const newItems = [ payload.block, ...prevData.items ].sort((b1, b2) => b2.height - b1.height);
       return { ...prevData, items: newItems };
     });
-  }, [ multichainContext?.chain?.slug, queryClient, type ]);
+  }, [ multichainContext?.chain?.id, queryClient, type ]);
 
   const handleSocketClose = React.useCallback(() => {
     setShowSocketAlert(true);
@@ -92,7 +91,7 @@ const BlocksContent = ({ type, query, enableSocket = true, top }: Props) => {
     handler: handleNewBlockMessage,
   });
 
-  const chainData = getChainDataForList(multichainContext);
+  const chainData = multichainContext?.chain;
 
   const content = query.data?.items ? (
     <>
diff --git a/ui/blocks/BlocksList.tsx b/ui/blocks/BlocksList.tsx
index 6cea14f30d..e9bc6b732e 100644
--- a/ui/blocks/BlocksList.tsx
+++ b/ui/blocks/BlocksList.tsx
@@ -2,7 +2,7 @@ import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Block } from 'types/api/block';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import useInitialList from 'lib/hooks/useInitialList';
 import BlocksListItem from 'ui/blocks/BlocksListItem';
@@ -11,7 +11,7 @@ interface Props {
   data: Array<Block>;
   isLoading: boolean;
   page: number;
-  chainData?: ChainConfig;
+  chainData?: ClusterChainConfig;
 }
 
 const BlocksList = ({ data, isLoading, page, chainData }: Props) => {
diff --git a/ui/blocks/BlocksListItem.tsx b/ui/blocks/BlocksListItem.tsx
index 299480a298..0d3456bf2e 100644
--- a/ui/blocks/BlocksListItem.tsx
+++ b/ui/blocks/BlocksListItem.tsx
@@ -4,7 +4,7 @@ import { capitalize } from 'es-toolkit';
 import React from 'react';
 
 import type { Block } from 'types/api/block';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import { route } from 'nextjs-routes';
 
@@ -31,7 +31,7 @@ interface Props {
   isLoading?: boolean;
   enableTimeIncrement?: boolean;
   animation?: string;
-  chainData?: ChainConfig;
+  chainData?: ClusterChainConfig;
 }
 
 const isRollup = config.features.rollup.isEnabled;
diff --git a/ui/blocks/BlocksTable.tsx b/ui/blocks/BlocksTable.tsx
index a92bff0318..3588513e8a 100644
--- a/ui/blocks/BlocksTable.tsx
+++ b/ui/blocks/BlocksTable.tsx
@@ -2,7 +2,7 @@ import { capitalize } from 'es-toolkit';
 import React from 'react';
 
 import type { Block } from 'types/api/block';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import config from 'configs/app';
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
@@ -22,7 +22,7 @@ interface Props {
   socketInfoNum?: number;
   showSocketErrorAlert?: boolean;
   showSocketInfo?: boolean;
-  chainData?: ChainConfig;
+  chainData?: ClusterChainConfig;
 }
 
 const VALIDATOR_COL_WEIGHT = 23;
diff --git a/ui/blocks/BlocksTableItem.tsx b/ui/blocks/BlocksTableItem.tsx
index c778084241..d68ec86950 100644
--- a/ui/blocks/BlocksTableItem.tsx
+++ b/ui/blocks/BlocksTableItem.tsx
@@ -3,7 +3,7 @@ import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { Block } from 'types/api/block';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import { route } from 'nextjs-routes';
 
@@ -14,11 +14,11 @@ import { Skeleton } from 'toolkit/chakra/skeleton';
 import { TableCell, TableRow } from 'toolkit/chakra/table';
 import { Tooltip } from 'toolkit/chakra/tooltip';
 import { WEI } from 'toolkit/utils/consts';
-import ChainIcon from 'ui/optimismSuperchain/components/ChainIcon';
 import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
 import BlockPendingUpdateHint from 'ui/shared/block/BlockPendingUpdateHint';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import ChainIcon from 'ui/shared/externalChains/ChainIcon';
 import IconSvg from 'ui/shared/IconSvg';
 import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 import Utilization from 'ui/shared/Utilization/Utilization';
@@ -30,7 +30,7 @@ interface Props {
   isLoading?: boolean;
   animation?: string;
   enableTimeIncrement?: boolean;
-  chainData?: ChainConfig;
+  chainData?: ClusterChainConfig;
 }
 
 const isRollup = config.features.rollup.isEnabled;
diff --git a/ui/contractVerification/methods/ContractVerificationSolidityFoundry.tsx b/ui/contractVerification/methods/ContractVerificationSolidityFoundry.tsx
index ba8c803844..ac34d5de96 100644
--- a/ui/contractVerification/methods/ContractVerificationSolidityFoundry.tsx
+++ b/ui/contractVerification/methods/ContractVerificationSolidityFoundry.tsx
@@ -16,9 +16,9 @@ const ContractVerificationSolidityFoundry = () => {
   const address = watch('address');
 
   const codeSnippet = `forge verify-contract \\
-  --rpc-url ${ config.chain.rpcUrls[0] || `${ config.apis.general.endpoint }/api/eth-rpc` } \\
+  --rpc-url ${ config.chain.rpcUrls[0] || (config.apis.general ? `${ config.apis.general.endpoint }/api/eth-rpc` : '') } \\
   --verifier blockscout \\
-  --verifier-url '${ config.apis.general.endpoint }/api/' \\
+  --verifier-url '${ config.apis.general ? `${ config.apis.general.endpoint }/api/` : '' }' \\
   ${ address || '<address>' } \\
   [contractFile]:[contractName]`;
 
diff --git a/ui/contractVerification/methods/ContractVerificationSolidityHardhat.tsx b/ui/contractVerification/methods/ContractVerificationSolidityHardhat.tsx
index 3c51e35ce0..a71f240523 100644
--- a/ui/contractVerification/methods/ContractVerificationSolidityHardhat.tsx
+++ b/ui/contractVerification/methods/ContractVerificationSolidityHardhat.tsx
@@ -23,7 +23,7 @@ const ContractVerificationSolidityHardhat = ({ config: formConfig }: { config: S
   solidity: "${ latestSolidityVersion || '0.8.24' }", // replace if necessary
   networks: {
     '${ chainNameSlug }': {
-      url: '${ config.chain.rpcUrls[0] || `${ config.apis.general.endpoint }/api/eth-rpc` }'
+      url: '${ config.chain.rpcUrls[0] || (config.apis.general ? `${ config.apis.general.endpoint }/api/eth-rpc` : '') }'
     },
   },
   etherscan: {
@@ -35,7 +35,7 @@ const ContractVerificationSolidityHardhat = ({ config: formConfig }: { config: S
         network: "${ chainNameSlug }",
         chainId: ${ config.chain.id },
         urls: {
-          apiURL: "${ config.apis.general.endpoint }/api",
+          apiURL: "${ config.apis.general ? `${ config.apis.general.endpoint }/api` : '' }",
           browserURL: "${ config.app.baseUrl }"
         }
       }
diff --git a/ui/csvExport/CsvExportForm.tsx b/ui/csvExport/CsvExportForm.tsx
index caa5acd523..afd67ef2c1 100644
--- a/ui/csvExport/CsvExportForm.tsx
+++ b/ui/csvExport/CsvExportForm.tsx
@@ -8,6 +8,7 @@ import type { CsvExportParams } from 'types/client/address';
 
 import config from 'configs/app';
 import buildUrl from 'lib/api/buildUrl';
+import isNeedProxy from 'lib/api/isNeedProxy';
 import type { ResourceName } from 'lib/api/resources';
 import { useMultichainContext } from 'lib/contexts/multichain';
 import dayjs from 'lib/date/dayjs';
@@ -41,7 +42,7 @@ const CsvExportForm = ({ hash, resource, filterType, filterValue, fileNameTempla
   const recaptcha = useReCaptcha();
   const multichainContext = useMultichainContext();
 
-  const chainConfig = multichainContext?.chain.config || config;
+  const chainConfig = multichainContext?.chain.app_config || config;
 
   const apiFetchFactory = React.useCallback((data: FormFields) => {
     return async(recaptchaToken?: string) => {
@@ -57,6 +58,7 @@ const CsvExportForm = ({ hash, resource, filterType, filterValue, fileNameTempla
         headers: {
           'content-type': 'application/octet-stream',
           ...(recaptchaToken && { 'recaptcha-v2-response': recaptchaToken }),
+          ...(isNeedProxy() && multichainContext?.chain ? { 'x-endpoint': multichainContext.chain.app_config.apis.general?.endpoint } : {}),
         },
       });
 
@@ -75,7 +77,7 @@ const CsvExportForm = ({ hash, resource, filterType, filterValue, fileNameTempla
   const onFormSubmit: SubmitHandler<FormFields> = React.useCallback(async(data) => {
     try {
       const response = await recaptcha.fetchProtectedResource<Response>(apiFetchFactory(data));
-      const chainText = multichainContext?.chain ? `${ multichainContext.chain.slug.replace(/-/g, '_') }_` : '';
+      const chainText = multichainContext?.chain ? `${ multichainContext.chain.name.replace(' ', '-') }_` : '';
 
       const blob = await response.blob();
       const fileName = exportType === 'holders' ?
diff --git a/ui/home/Stats.tsx b/ui/home/Stats.tsx
index 6b22a6d82c..b0cc8c369a 100644
--- a/ui/home/Stats.tsx
+++ b/ui/home/Stats.tsx
@@ -2,8 +2,6 @@ import { Grid } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
-import type { HomeStatsWidgetId } from 'types/homepage';
-
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import { HOMEPAGE_STATS, HOMEPAGE_STATS_MICROSERVICE } from 'stubs/stats';
@@ -11,9 +9,11 @@ import { WEI } from 'toolkit/utils/consts';
 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 type { HomeStatsItem } from './utils';
+import { isHomeStatsItemEnabled, sortHomeStatsItems } from './utils';
+
 const rollupFeature = config.features.rollup;
 const isOptimisticRollup = rollupFeature.isEnabled && rollupFeature.type === 'optimistic';
 const isArbitrumRollup = rollupFeature.isEnabled && rollupFeature.type === 'arbitrum';
@@ -90,14 +90,10 @@ const Stats = () => {
 
   const isLoading = isPlaceholderData || latestBatchQuery?.isPlaceholderData;
 
-  interface Item extends StatsWidgetProps {
-    id: HomeStatsWidgetId;
-  }
-
   const apiData = apiQuery.data;
   const statsData = statsQuery.data;
 
-  const items: Array<Item> = (() => {
+  const items: Array<HomeStatsItem> = (() => {
     if (!statsData && !apiData) {
       return [];
     }
@@ -208,18 +204,8 @@ const Stats = () => {
       },
     ]
       .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;
-      });
+      .filter(isHomeStatsItemEnabled)
+      .sort(sortHomeStatsItems);
   })();
 
   if (items.length === 0) {
diff --git a/ui/home/indicators/ChainIndicatorItem.tsx b/ui/home/indicators/ChainIndicatorItem.tsx
index 1b97dc4333..c0e68eb833 100644
--- a/ui/home/indicators/ChainIndicatorItem.tsx
+++ b/ui/home/indicators/ChainIndicatorItem.tsx
@@ -1,50 +1,45 @@
 import { Text, Flex, Box } from '@chakra-ui/react';
 import React from 'react';
 
+import type { TChainIndicator } from './types';
 import type { ChainIndicatorId } from 'types/homepage';
 
 import { Skeleton } from 'toolkit/chakra/skeleton';
-
 interface Props {
-  id: ChainIndicatorId;
-  title: string;
-  value?: string;
-  valueDiff?: number | null | undefined;
-  icon: React.ReactNode;
+  indicator: TChainIndicator;
   isSelected: boolean;
   onClick: (id: ChainIndicatorId) => void;
   isLoading: boolean;
-  hasData: boolean;
 }
 
-const ChainIndicatorItem = ({ id, title, value, valueDiff, icon, isSelected, onClick, isLoading, hasData }: Props) => {
+const ChainIndicatorItem = ({ indicator, isSelected, onClick, isLoading }: Props) => {
   const handleClick = React.useCallback(() => {
-    onClick(id);
-  }, [ id, onClick ]);
+    onClick(indicator.id);
+  }, [ indicator.id, onClick ]);
 
   const valueContent = (() => {
-    if (!hasData) {
+    if (indicator.value.includes('N/A')) {
       return <Text color="text.secondary" fontWeight={ 400 }>no data</Text>;
     }
 
     return (
       <Skeleton loading={ isLoading } fontWeight={ 600 } minW="30px">
-        { value }
+        { indicator.value }
       </Skeleton>
     );
   })();
 
   const valueDiffContent = (() => {
-    if (valueDiff === undefined || valueDiff === null) {
+    if (indicator.valueDiff === undefined) {
       return null;
     }
 
-    const diffColor = valueDiff >= 0 ? 'green.500' : 'red.500';
+    const diffColor = indicator.valueDiff >= 0 ? 'green.500' : 'red.500';
 
     return (
       <Skeleton loading={ isLoading } ml={ 1 } display="flex" alignItems="center" color={ diffColor }>
-        <span>{ valueDiff >= 0 ? '+' : '-' }</span>
-        <Text color={ diffColor } fontWeight={ 600 }>{ Math.abs(valueDiff) }%</Text>
+        <span>{ indicator.valueDiff >= 0 ? '+' : '-' }</span>
+        <Text color={ diffColor } fontWeight={ 600 }>{ Math.abs(indicator.valueDiff) }%</Text>
       </Skeleton>
     );
   })();
@@ -60,19 +55,19 @@ const ChainIndicatorItem = ({ id, title, value, valueDiff, icon, isSelected, onC
       borderRadius="base"
       cursor="pointer"
       color={ isSelected ? 'text.secondary' : 'link.primary' }
-      bgColor={ isSelected ? { _light: 'white', _dark: 'black' } : undefined }
+      bgColor={ isSelected ? 'bg.primary' : undefined }
       onClick={ handleClick }
       fontSize="xs"
       fontWeight={ 500 }
       _hover={{
-        bgColor: { _light: 'white', _dark: 'black' },
+        bgColor: 'bg.primary',
         color: isSelected ? 'text.secondary' : 'hover',
         zIndex: 1,
       }}
     >
-      { icon }
+      { indicator.icon }
       <Box display={{ base: 'none', lg: 'block' }}>
-        <span>{ title }</span>
+        <span>{ indicator.titleShort || indicator.title }</span>
         <Flex alignItems="center" color="text.primary">
           { valueContent }
           { valueDiffContent }
diff --git a/ui/home/indicators/ChainIndicators.tsx b/ui/home/indicators/ChainIndicators.tsx
index d0f286c389..b0f8c0212c 100644
--- a/ui/home/indicators/ChainIndicators.tsx
+++ b/ui/home/indicators/ChainIndicators.tsx
@@ -1,44 +1,25 @@
-import { Flex, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TChainIndicator } from './types';
-import type { ChainIndicatorId } from 'types/homepage';
 
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import { HOMEPAGE_STATS, HOMEPAGE_STATS_MICROSERVICE } from 'stubs/stats';
-import { Skeleton } from 'toolkit/chakra/skeleton';
-import { Hint } from 'toolkit/components/Hint/Hint';
 import IconSvg from 'ui/shared/IconSvg';
+import NativeTokenIcon from 'ui/shared/NativeTokenIcon';
 
-import ChainIndicatorChartContainer from './ChainIndicatorChartContainer';
-import ChainIndicatorItem from './ChainIndicatorItem';
+import ChainIndicatorsChart from './ChainIndicatorsChart';
+import ChainIndicatorsContainer from './ChainIndicatorsContainer';
+import ChainIndicatorsList from './ChainIndicatorsList';
 import useChartDataQuery from './useChartDataQuery';
-import getIndicatorValues from './utils/getIndicatorValues';
-import INDICATORS from './utils/indicators';
+import { isIndicatorEnabled, sortIndicators } from './utils/indicators';
 
 const isStatsFeatureEnabled = config.features.stats.isEnabled;
-
-const indicators = INDICATORS
-  .filter(({ id }) => config.UI.homepage.charts.includes(id))
-  .sort((a, b) => {
-    if (config.UI.homepage.charts.indexOf(a.id) > config.UI.homepage.charts.indexOf(b.id)) {
-      return 1;
-    }
-
-    if (config.UI.homepage.charts.indexOf(a.id) < config.UI.homepage.charts.indexOf(b.id)) {
-      return -1;
-    }
-
-    return 0;
-  });
+const rollupFeature = config.features.rollup;
+const isOptimisticRollup = rollupFeature.isEnabled && rollupFeature.type === 'optimistic';
+const isArbitrumRollup = rollupFeature.isEnabled && rollupFeature.type === 'arbitrum';
 
 const ChainIndicators = () => {
-  const [ selectedIndicator, selectIndicator ] = React.useState(indicators[0]?.id);
-  const selectedIndicatorData = indicators.find(({ id }) => id === selectedIndicator);
-
-  const queryResult = useChartDataQuery(selectedIndicatorData?.id as ChainIndicatorId);
-
   const statsMicroserviceQueryResult = useApiQuery('stats:pages_main', {
     queryOptions: {
       refetchOnMount: false,
@@ -54,115 +35,151 @@ const ChainIndicators = () => {
     },
   });
 
+  const indicators: Array<TChainIndicator> = React.useMemo(() => {
+    return [
+      {
+        id: 'daily_txs' as const,
+        title: (() => {
+          if (isStatsFeatureEnabled && statsMicroserviceQueryResult?.data?.daily_new_transactions?.info?.title) {
+            return statsMicroserviceQueryResult.data.daily_new_transactions.info.title;
+          }
+          return 'Daily transactions';
+        })(),
+        value: (() => {
+          const STRING_FORMAT = { maximumFractionDigits: 2, notation: 'compact' as const };
+          if (isStatsFeatureEnabled) {
+            if (typeof statsMicroserviceQueryResult?.data?.yesterday_transactions?.value === 'string') {
+              return Number(statsMicroserviceQueryResult.data.yesterday_transactions.value).toLocaleString(undefined, STRING_FORMAT);
+            }
+          } else {
+            if (typeof statsApiQueryResult?.data?.transactions_today === 'string') {
+              return Number(statsApiQueryResult.data.transactions_today).toLocaleString(undefined, STRING_FORMAT);
+            }
+          }
+          return 'N/A';
+        })(),
+        hint: (() => {
+          if (isStatsFeatureEnabled && statsMicroserviceQueryResult?.data?.daily_new_transactions?.info?.description) {
+            return statsMicroserviceQueryResult.data.daily_new_transactions.info.description;
+          }
+          return `Number of transactions yesterday (0:00 - 23:59 UTC). The chart displays daily transactions for the past 30 days.`;
+        })(),
+        icon: <IconSvg name="transactions" boxSize={ 6 } bgColor="#56ACD1" borderRadius="base" color="white"/>,
+      },
+      {
+        id: 'daily_operational_txs' as const,
+        title: (() => {
+          if (isStatsFeatureEnabled) {
+            if (isArbitrumRollup && statsMicroserviceQueryResult?.data?.daily_new_operational_transactions?.info?.title) {
+              return statsMicroserviceQueryResult.data.daily_new_operational_transactions.info.title;
+            }
+            if (isOptimisticRollup && statsMicroserviceQueryResult?.data?.op_stack_daily_new_operational_transactions?.info?.title) {
+              return statsMicroserviceQueryResult.data.op_stack_daily_new_operational_transactions.info.title;
+            }
+          }
+          return 'Daily op txns';
+        })(),
+        titleShort: 'Daily op txns',
+        value: (() => {
+          const STRING_FORMAT = { maximumFractionDigits: 2, notation: 'compact' as const };
+          if (isStatsFeatureEnabled) {
+            if (isArbitrumRollup && typeof statsMicroserviceQueryResult?.data?.yesterday_operational_transactions?.value === 'string') {
+              return Number(statsMicroserviceQueryResult.data.yesterday_operational_transactions.value).toLocaleString(undefined, STRING_FORMAT);
+            }
+            if (isOptimisticRollup && typeof statsMicroserviceQueryResult?.data?.op_stack_yesterday_operational_transactions?.value === 'string') {
+              return Number(statsMicroserviceQueryResult.data.op_stack_yesterday_operational_transactions.value).toLocaleString(undefined, STRING_FORMAT);
+            }
+          }
+          return 'N/A';
+        })(),
+        hint: (() => {
+          if (isStatsFeatureEnabled) {
+            if (isArbitrumRollup && statsMicroserviceQueryResult?.data?.daily_new_operational_transactions?.info?.description) {
+              return statsMicroserviceQueryResult.data.daily_new_operational_transactions.info.description;
+            }
+            if (isOptimisticRollup && statsMicroserviceQueryResult?.data?.op_stack_daily_new_operational_transactions?.info?.description) {
+              return statsMicroserviceQueryResult.data.op_stack_daily_new_operational_transactions.info.description;
+            }
+          }
+          return `Number of operational transactions yesterday (0:00 - 23:59 UTC). The chart displays daily operational transactions for the past 30 days.`;
+        })(),
+        icon: <IconSvg name="transactions" boxSize={ 6 } bgColor="#56ACD1" borderRadius="base" color="white"/>,
+      },
+      {
+        id: 'coin_price' as const,
+        title: `${ config.chain.currency.symbol } price`,
+        value: typeof statsApiQueryResult.data?.coin_price !== 'string' ?
+          '$N/A' :
+          '$' + Number(statsApiQueryResult.data?.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
+        valueDiff: typeof statsApiQueryResult.data?.coin_price_change_percentage === 'number' ?
+          statsApiQueryResult.data.coin_price_change_percentage :
+          undefined,
+        hint: `${ config.chain.currency.symbol } token daily price in USD.`,
+        icon: <NativeTokenIcon boxSize={ 6 }/>,
+      },
+      {
+        id: 'secondary_coin_price' as const,
+        title: `${ config.chain.secondaryCoin.symbol } price`,
+        value: typeof statsApiQueryResult.data?.secondary_coin_price !== 'string' ?
+          '$N/A' :
+          '$' + Number(statsApiQueryResult.data?.secondary_coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
+        hint: `${ config.chain.secondaryCoin.symbol } token daily price in USD.`,
+        icon: <NativeTokenIcon boxSize={ 6 } type="secondary"/>,
+      },
+      {
+        id: 'market_cap' as const,
+        title: 'Market cap',
+        value: typeof statsApiQueryResult.data?.market_cap !== 'string' ?
+          '$N/A' :
+          '$' + Number(statsApiQueryResult.data.market_cap).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
+        // eslint-disable-next-line max-len
+        hint: 'The total market value of a cryptocurrency\'s circulating supply. It is analogous to the free-float capitalization in the stock market. Market Cap = Current Price x Circulating Supply.',
+        icon: <IconSvg name="globe" boxSize={ 6 } bgColor="#6A5DCC" borderRadius="base" color="white"/>,
+      },
+      {
+        id: 'tvl' as const,
+        title: 'Total value locked',
+        value: typeof statsApiQueryResult.data?.tvl !== 'string' ?
+          '$N/A' :
+          '$' + Number(statsApiQueryResult.data.tvl).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
+        hint: 'Total value of digital assets locked or staked in a chain',
+        icon: <IconSvg name="lock" boxSize={ 6 } bgColor="#517FDB" borderRadius="base" color="white"/>,
+      },
+    ]
+      .filter(isIndicatorEnabled)
+      .sort(sortIndicators);
+  }, [ statsApiQueryResult?.data, statsMicroserviceQueryResult?.data ]);
+
+  const [ selectedIndicatorId, selectIndicatorId ] = React.useState(indicators[0]?.id);
+  const selectedIndicator = indicators.find(({ id }) => id === selectedIndicatorId);
+
+  const chartQuery = useChartDataQuery(selectedIndicatorId);
+
   if (indicators.length === 0) {
     return null;
   }
 
-  const isPlaceholderData = (isStatsFeatureEnabled && statsMicroserviceQueryResult.isPlaceholderData) || statsApiQueryResult.isPlaceholderData;
-  const hasData = Boolean(statsApiQueryResult?.data || statsMicroserviceQueryResult?.data);
-
-  const { value: indicatorValue, valueDiff: indicatorValueDiff } =
-    getIndicatorValues(selectedIndicatorData as TChainIndicator, statsMicroserviceQueryResult?.data, statsApiQueryResult?.data);
-
-  const title = (() => {
-    let title: string | undefined;
-    if (isStatsFeatureEnabled && selectedIndicatorData?.titleMicroservice && statsMicroserviceQueryResult?.data) {
-      title = selectedIndicatorData.titleMicroservice(statsMicroserviceQueryResult.data);
-    }
-
-    return title || selectedIndicatorData?.title;
-  })();
-
-  const hint = (() => {
-    let hint: string | undefined;
-    if (isStatsFeatureEnabled && selectedIndicatorData?.hintMicroservice && statsMicroserviceQueryResult?.data) {
-      hint = selectedIndicatorData.hintMicroservice(statsMicroserviceQueryResult.data);
-    }
-
-    return hint || selectedIndicatorData?.hint;
-  })();
-
-  const valueTitle = (() => {
-    if (isPlaceholderData) {
-      return <Skeleton loading h="36px" w="215px"/>;
-    }
-
-    if (!hasData) {
-      return <Text fontSize="xs">There is no data</Text>;
-    }
-
-    return (
-      <Text fontWeight={ 700 } fontSize="30px" lineHeight="36px">
-        { indicatorValue }
-      </Text>
-    );
-  })();
-
-  const valueDiff = (() => {
-    if (indicatorValueDiff === undefined || indicatorValueDiff === null) {
-      return null;
-    }
-
-    const diffColor = indicatorValueDiff >= 0 ? 'green.500' : 'red.500';
-
-    return (
-      <Skeleton loading={ statsApiQueryResult.isPlaceholderData } display="flex" alignItems="center" color={ diffColor } ml={ 2 }>
-        <IconSvg name="arrows/up-head" boxSize={ 5 } mr={ 1 } transform={ indicatorValueDiff < 0 ? 'rotate(180deg)' : 'rotate(0)' }/>
-        <Text color={ diffColor } fontWeight={ 600 }>{ indicatorValueDiff }%</Text>
-      </Skeleton>
-    );
-  })();
+  const isLoading = (isStatsFeatureEnabled && statsMicroserviceQueryResult.isPlaceholderData) || statsApiQueryResult.isPlaceholderData;
 
   return (
-    <Flex
-      px={{ base: 3, lg: 4 }}
-      py={ 3 }
-      borderRadius="base"
-      bgColor={{ _light: 'theme.stats.bg._light', _dark: 'theme.stats.bg._dark' }}
-      columnGap={{ base: 3, lg: 4 }}
-      rowGap={ 0 }
-      flexBasis="50%"
-      flexGrow={ 1 }
-      alignItems="stretch"
-    >
-      <Flex flexGrow={ 1 } flexDir="column">
-        <Skeleton loading={ isPlaceholderData } display="flex" alignItems="center" w="fit-content" columnGap={ 1 }>
-          <Text fontWeight={ 500 }>{ title }</Text>
-          { hint && <Hint label={ hint }/> }
-        </Skeleton>
-        <Flex mb={{ base: 0, lg: 2 }} mt={ 1 } alignItems="end">
-          { valueTitle }
-          { valueDiff }
-        </Flex>
-        <Flex h={{ base: '80px', lg: '110px' }} alignItems="flex-start" flexGrow={ 1 }>
-          <ChainIndicatorChartContainer { ...queryResult }/>
-        </Flex>
-      </Flex>
-      { indicators.length > 1 && (
-        <Flex
-          flexShrink={ 0 }
-          flexDir="column"
-          as="ul"
-          borderRadius="lg"
-          rowGap="6px"
-          m={{ base: 'auto 0', lg: 0 }}
-        >
-          { indicators.map((indicator) => (
-            <ChainIndicatorItem
-              key={ indicator.id }
-              id={ indicator.id }
-              title={ indicator.title }
-              icon={ indicator.icon }
-              isSelected={ selectedIndicator === indicator.id }
-              onClick={ selectIndicator }
-              { ...getIndicatorValues(indicator, statsMicroserviceQueryResult?.data, statsApiQueryResult?.data) }
-              isLoading={ isPlaceholderData }
-              hasData={ hasData }
-            />
-          )) }
-        </Flex>
+    <ChainIndicatorsContainer>
+      { selectedIndicator && (
+        <ChainIndicatorsChart
+          isLoading={ isLoading }
+          title={ selectedIndicator.title }
+          hint={ selectedIndicator.hint }
+          value={ selectedIndicator?.value }
+          valueDiff={ selectedIndicator?.valueDiff }
+          chartQuery={ chartQuery }
+        />
       ) }
-    </Flex>
+      <ChainIndicatorsList
+        indicators={ indicators }
+        isLoading={ isLoading }
+        selectedId={ selectedIndicatorId }
+        onItemClick={ selectIndicatorId }
+      />
+    </ChainIndicatorsContainer>
   );
 };
 
diff --git a/ui/home/indicators/ChainIndicatorsChart.tsx b/ui/home/indicators/ChainIndicatorsChart.tsx
new file mode 100644
index 0000000000..e18d93740a
--- /dev/null
+++ b/ui/home/indicators/ChainIndicatorsChart.tsx
@@ -0,0 +1,69 @@
+import { Flex, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { Hint } from 'toolkit/components/Hint/Hint';
+import IconSvg from 'ui/shared/IconSvg';
+
+import ChainIndicatorChartContainer from './ChainIndicatorChartContainer';
+import type { UseFetchChartDataResult } from './useChartDataQuery';
+
+interface Props {
+  isLoading: boolean;
+  value: string;
+  valueDiff?: number;
+  chartQuery: UseFetchChartDataResult;
+  title: string;
+  hint?: string;
+}
+
+const ChainIndicatorsChart = ({ isLoading, value, valueDiff, chartQuery, title, hint }: Props) => {
+  const valueTitleElement = (() => {
+    if (isLoading) {
+      return <Skeleton loading h="36px" w="200px"/>;
+    }
+
+    if (value.includes('N/A')) {
+      return <Text fontWeight={ 700 } fontSize="30px" lineHeight="36px">N/A</Text>;
+    }
+
+    return (
+      <Text fontWeight={ 700 } fontSize="30px" lineHeight="36px">
+        { value }
+      </Text>
+    );
+  })();
+
+  const valueDiffElement = (() => {
+    if (valueDiff === undefined) {
+      return null;
+    }
+
+    const diffColor = valueDiff >= 0 ? 'green.500' : 'red.500';
+
+    return (
+      <Skeleton loading={ isLoading } display="flex" alignItems="center" color={ diffColor } ml={ 2 }>
+        <IconSvg name="arrows/up-head" boxSize={ 5 } mr={ 1 } transform={ valueDiff < 0 ? 'rotate(180deg)' : 'rotate(0)' }/>
+        <Text color={ diffColor } fontWeight={ 600 }>{ valueDiff }%</Text>
+      </Skeleton>
+    );
+  })();
+
+  return (
+    <Flex flexGrow={ 1 } flexDir="column">
+      <Skeleton loading={ isLoading } display="flex" alignItems="center" w="fit-content" columnGap={ 1 }>
+        <Text fontWeight={ 500 }>{ title }</Text>
+        { hint && <Hint label={ hint }/> }
+      </Skeleton>
+      <Flex mb={{ base: 0, lg: 2 }} mt={ 1 } alignItems="end">
+        { valueTitleElement }
+        { valueDiffElement }
+      </Flex>
+      <Flex h={{ base: '80px', lg: '110px' }} alignItems="flex-start" flexGrow={ 1 }>
+        <ChainIndicatorChartContainer { ...chartQuery } isPending={ chartQuery.isPending || isLoading }/>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default React.memo(ChainIndicatorsChart);
diff --git a/ui/home/indicators/ChainIndicatorsContainer.tsx b/ui/home/indicators/ChainIndicatorsContainer.tsx
new file mode 100644
index 0000000000..bbd8dcba9e
--- /dev/null
+++ b/ui/home/indicators/ChainIndicatorsContainer.tsx
@@ -0,0 +1,26 @@
+import { Flex } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const ChainIndicatorsContainer = ({ children }: Props) => {
+  return (
+    <Flex
+      px={{ base: 3, lg: 4 }}
+      py={ 3 }
+      borderRadius="base"
+      bgColor={{ _light: 'theme.stats.bg._light', _dark: 'theme.stats.bg._dark' }}
+      columnGap={{ base: 3, lg: 4 }}
+      rowGap={ 0 }
+      flexBasis="50%"
+      flexGrow={ 1 }
+      alignItems="stretch"
+    >
+      { children }
+    </Flex>
+  );
+};
+
+export default React.memo(ChainIndicatorsContainer);
diff --git a/ui/home/indicators/ChainIndicatorsList.tsx b/ui/home/indicators/ChainIndicatorsList.tsx
new file mode 100644
index 0000000000..4454c13170
--- /dev/null
+++ b/ui/home/indicators/ChainIndicatorsList.tsx
@@ -0,0 +1,45 @@
+import { Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TChainIndicator } from './types';
+import type { ChainIndicatorId } from 'types/homepage';
+
+import ChainIndicatorItem from './ChainIndicatorItem';
+
+interface Props {
+  indicators: Array<TChainIndicator>;
+  isLoading: boolean;
+  selectedId: ChainIndicatorId;
+  onItemClick: (id: ChainIndicatorId) => void;
+}
+
+const ChainIndicatorsList = ({ indicators, isLoading, selectedId, onItemClick }: Props) => {
+  if (indicators.length < 2) {
+    return null;
+  }
+
+  return (
+    <Flex
+      flexShrink={ 0 }
+      flexDir="column"
+      as="ul"
+      borderRadius="lg"
+      rowGap="6px"
+      m={{ base: 'auto 0', lg: 0 }}
+    >
+      { indicators.map((indicator) => {
+        return (
+          <ChainIndicatorItem
+            key={ indicator.id }
+            indicator={ indicator }
+            isSelected={ selectedId === indicator.id }
+            onClick={ onItemClick }
+            isLoading={ isLoading }
+          />
+        );
+      }) }
+    </Flex>
+  );
+};
+
+export default React.memo(ChainIndicatorsList);
diff --git a/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_default_no-data-1.png b/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_default_no-data-1.png
index 8f11b37821..6b22636e31 100644
Binary files a/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_default_no-data-1.png and b/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_default_no-data-1.png differ
diff --git a/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_default_partial-data-1.png b/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_default_partial-data-1.png
index c517491de5..d0094cb3aa 100644
Binary files a/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_default_partial-data-1.png and b/ui/home/indicators/__screenshots__/ChainIndicators.pw.tsx_default_partial-data-1.png differ
diff --git a/ui/home/indicators/types.ts b/ui/home/indicators/types.ts
index 9bb8ad132c..ccc673e8c8 100644
--- a/ui/home/indicators/types.ts
+++ b/ui/home/indicators/types.ts
@@ -1,17 +1,13 @@
 import type React from 'react';
 
-import type { MainPageStats } from '@blockscout/stats-types';
-import type { HomeStats } from 'types/api/stats';
 import type { ChainIndicatorId } from 'types/homepage';
 
 export interface TChainIndicator {
   id: ChainIndicatorId;
-  titleMicroservice?: (stats: MainPageStats) => string | undefined;
   title: string;
-  value: (stats: HomeStats) => string;
-  valueMicroservice?: (stats: MainPageStats) => string | undefined;
-  valueDiff?: (stats?: HomeStats) => number | null | undefined;
+  titleShort?: string;
+  value: string;
+  valueDiff?: number;
   icon: React.ReactNode;
   hint?: string;
-  hintMicroservice?: (stats: MainPageStats) => string | undefined;
 }
diff --git a/ui/home/indicators/useChartDataQuery.tsx b/ui/home/indicators/useChartDataQuery.tsx
index a0130a7e7b..e31faec892 100644
--- a/ui/home/indicators/useChartDataQuery.tsx
+++ b/ui/home/indicators/useChartDataQuery.tsx
@@ -1,60 +1,23 @@
-import type { TimeChartData, TimeChartDataItem, TimeChartItemRaw } from 'toolkit/components/charts/types';
+import type { TimeChartData } from 'toolkit/components/charts/types';
 import type { ChainIndicatorId } from 'types/homepage';
 
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 
-import prepareChartItems from './utils/prepareChartItems';
+import { getChartData } from './utils/chart';
 
 const rollupFeature = config.features.rollup;
 const isOptimisticRollup = rollupFeature.isEnabled && rollupFeature.type === 'optimistic';
 const isArbitrumRollup = rollupFeature.isEnabled && rollupFeature.type === 'arbitrum';
 
-const CHART_ITEMS: Record<ChainIndicatorId, Pick<TimeChartDataItem, 'name' | 'valueFormatter'>> = {
-  daily_txs: {
-    name: 'Tx/day',
-    valueFormatter: (x: number) => x.toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
-  },
-  daily_operational_txs: {
-    name: 'Tx/day',
-    valueFormatter: (x: number) => x.toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
-  },
-  coin_price: {
-    name: `${ config.chain.currency.symbol } price`,
-    valueFormatter: (x: number) => '$' + x.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
-  },
-  secondary_coin_price: {
-    name: `${ config.chain.currency.symbol } price`,
-    valueFormatter: (x: number) => '$' + x.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
-  },
-  market_cap: {
-    name: 'Market cap',
-    valueFormatter: (x: number) => '$' + x.toLocaleString(undefined, { maximumFractionDigits: 2 }),
-  },
-  tvl: {
-    name: 'TVL',
-    valueFormatter: (x: number) => '$' + x.toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
-  },
-};
-
 const isStatsFeatureEnabled = config.features.stats.isEnabled;
 
-type UseFetchChartDataResult = {
+export type UseFetchChartDataResult = {
   isError: boolean;
   isPending: boolean;
   data: TimeChartData;
 };
 
-function getChartData(indicatorId: ChainIndicatorId, data: Array<TimeChartItemRaw>): TimeChartData {
-  return [ {
-    id: indicatorId,
-    charts: [],
-    items: prepareChartItems(data),
-    name: CHART_ITEMS[indicatorId].name,
-    valueFormatter: CHART_ITEMS[indicatorId].valueFormatter,
-  } ];
-}
-
 export default function useChartDataQuery(indicatorId: ChainIndicatorId): UseFetchChartDataResult {
   const statsDailyTxsQuery = useApiQuery('stats:pages_main', {
     queryOptions: {
diff --git a/ui/home/indicators/utils/chart.ts b/ui/home/indicators/utils/chart.ts
new file mode 100644
index 0000000000..567d8a0b4b
--- /dev/null
+++ b/ui/home/indicators/utils/chart.ts
@@ -0,0 +1,60 @@
+import type { TimeChartData, TimeChartDataItem, TimeChartItemRaw, TimeChartItem } from 'toolkit/components/charts/types';
+import type { ChainIndicatorId } from 'types/homepage';
+
+import config from 'configs/app';
+import getCurrencySymbol from 'lib/multichain/getCurrencySymbol';
+import { sortByDateDesc } from 'ui/shared/chart/utils';
+
+const CHART_ITEMS: Record<ChainIndicatorId, Pick<TimeChartDataItem, 'name' | 'valueFormatter'>> = {
+  daily_txs: {
+    name: 'Tx/day',
+    valueFormatter: (x: number) => x.toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
+  },
+  daily_operational_txs: {
+    name: 'Tx/day',
+    valueFormatter: (x: number) => x.toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
+  },
+  coin_price: {
+    name: `${ getCurrencySymbol() || config.chain.currency.symbol } price`,
+    valueFormatter: (x: number) => '$' + x.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
+  },
+  secondary_coin_price: {
+    name: `${ config.chain.currency.symbol } price`,
+    valueFormatter: (x: number) => '$' + x.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }),
+  },
+  market_cap: {
+    name: 'Market cap',
+    valueFormatter: (x: number) => '$' + x.toLocaleString(undefined, { maximumFractionDigits: 2 }),
+  },
+  tvl: {
+    name: 'TVL',
+    valueFormatter: (x: number) => '$' + x.toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
+  },
+};
+
+const nonNullTailReducer = (result: Array<TimeChartItemRaw>, item: TimeChartItemRaw) => {
+  if (item.value === null && result.length === 0) {
+    return result;
+  }
+  result.unshift(item);
+  return result;
+};
+
+const mapNullToZero: (item: TimeChartItemRaw) => TimeChartItem = (item) => ({ ...item, value: Number(item.value) });
+
+export function prepareChartItems(items: Array<TimeChartItemRaw>) {
+  return items
+    .sort(sortByDateDesc)
+    .reduceRight(nonNullTailReducer, [] as Array<TimeChartItemRaw>)
+    .map(mapNullToZero);
+}
+
+export function getChartData(indicatorId: ChainIndicatorId, data: Array<TimeChartItemRaw>): TimeChartData {
+  return [ {
+    id: indicatorId.replace(' ', '_'),
+    charts: [],
+    items: prepareChartItems(data),
+    name: CHART_ITEMS[indicatorId].name,
+    valueFormatter: CHART_ITEMS[indicatorId].valueFormatter,
+  } ];
+}
diff --git a/ui/home/indicators/utils/getIndicatorValues.ts b/ui/home/indicators/utils/getIndicatorValues.ts
deleted file mode 100644
index 1d3b7a51a2..0000000000
--- a/ui/home/indicators/utils/getIndicatorValues.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { TChainIndicator } from '../types';
-import type * as stats from '@blockscout/stats-types';
-import type { HomeStats } from 'types/api/stats';
-
-import config from 'configs/app';
-
-export default function getIndicatorValues(indicator: TChainIndicator, statsData?: stats.MainPageStats, statsApiData?: HomeStats) {
-  const value = (() => {
-    if (config.features.stats.isEnabled && indicator?.valueMicroservice && statsData) {
-      return indicator.valueMicroservice(statsData);
-    }
-
-    if (statsApiData) {
-      return indicator?.value(statsApiData);
-    }
-
-    return 'N/A';
-  })();
-
-  // we have diffs only for coin and second coin price charts that get data from stats api
-  // so we don't check microservice data here, but may require to add it in the future
-  const valueDiff = indicator?.valueDiff ? indicator.valueDiff(statsApiData) : undefined;
-
-  return {
-    value,
-    valueDiff,
-  };
-}
diff --git a/ui/home/indicators/utils/indicators.ts b/ui/home/indicators/utils/indicators.ts
new file mode 100644
index 0000000000..c0726d20e3
--- /dev/null
+++ b/ui/home/indicators/utils/indicators.ts
@@ -0,0 +1,17 @@
+import type { TChainIndicator } from '../types';
+
+import config from 'configs/app';
+
+export const isIndicatorEnabled = ({ id }: TChainIndicator) => config.UI.homepage.charts.includes(id);
+
+export const sortIndicators = (a: TChainIndicator, b: TChainIndicator) => {
+  if (config.UI.homepage.charts.indexOf(a.id) > config.UI.homepage.charts.indexOf(b.id)) {
+    return 1;
+  }
+
+  if (config.UI.homepage.charts.indexOf(a.id) < config.UI.homepage.charts.indexOf(b.id)) {
+    return -1;
+  }
+
+  return 0;
+};
diff --git a/ui/home/indicators/utils/indicators.tsx b/ui/home/indicators/utils/indicators.tsx
deleted file mode 100644
index 061b3850a6..0000000000
--- a/ui/home/indicators/utils/indicators.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from 'react';
-
-import type { TChainIndicator } from '../types';
-
-import config from 'configs/app';
-import IconSvg from 'ui/shared/IconSvg';
-import NativeTokenIcon from 'ui/shared/NativeTokenIcon';
-
-const rollupFeature = config.features.rollup;
-const isOptimisticRollup = rollupFeature.isEnabled && rollupFeature.type === 'optimistic';
-const isArbitrumRollup = rollupFeature.isEnabled && rollupFeature.type === 'arbitrum';
-
-const INDICATORS: Array<TChainIndicator> = [
-  {
-    id: 'daily_txs',
-    title: 'Daily transactions',
-    titleMicroservice: (stats) => stats.daily_new_transactions?.info?.title,
-    value: (stats) => stats.transactions_today === null ?
-      'N/A' :
-      Number(stats.transactions_today).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
-    valueMicroservice: (stats) => stats.yesterday_transactions?.value === null ?
-      'N/A' :
-      Number(stats.yesterday_transactions?.value).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
-    icon: <IconSvg name="transactions" boxSize={ 6 } bgColor="#56ACD1" borderRadius="base" color="white"/>,
-    hint: `Number of transactions yesterday (0:00 - 23:59 UTC). The chart displays daily transactions for the past 30 days.`,
-    hintMicroservice: (stats) => stats.daily_new_transactions?.info?.description,
-  },
-  {
-    id: 'daily_operational_txs',
-    title: 'Daily op txns',
-    titleMicroservice: (stats) => {
-      if (isArbitrumRollup) {
-        return stats.daily_new_operational_transactions?.info?.title;
-      } else if (isOptimisticRollup) {
-        return stats.op_stack_daily_new_operational_transactions?.info?.title;
-      }
-      return '';
-    },
-    value: () => 'N/A',
-    valueMicroservice: (stats) => {
-      if (isArbitrumRollup) {
-        return stats.yesterday_operational_transactions?.value === null ?
-          'N/A' :
-          Number(stats.yesterday_operational_transactions?.value).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' });
-      } else if (isOptimisticRollup) {
-        return stats.op_stack_yesterday_operational_transactions?.value === null ?
-          'N/A' :
-          Number(stats.op_stack_yesterday_operational_transactions?.value).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' });
-      }
-      return;
-    },
-    icon: <IconSvg name="transactions" boxSize={ 6 } bgColor="#56ACD1" borderRadius="base" color="white"/>,
-    hint: `Number of operational transactions yesterday (0:00 - 23:59 UTC). The chart displays daily operational transactions for the past 30 days.`,
-    hintMicroservice: (stats) => stats.daily_new_operational_transactions?.info?.description,
-  },
-  {
-    id: 'coin_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: <NativeTokenIcon boxSize={ 6 }/>,
-    hint: `${ config.chain.currency.symbol } token daily price in USD.`,
-  },
-  {
-    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.`,
-  },
-  {
-    id: 'market_cap',
-    title: 'Market cap',
-    value: (stats) => stats.market_cap === null ?
-      '$N/A' :
-      '$' + Number(stats.market_cap).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
-    icon: <IconSvg name="globe" boxSize={ 6 } bgColor="#6A5DCC" borderRadius="base" color="white"/>,
-    // eslint-disable-next-line max-len
-    hint: 'The total market value of a cryptocurrency\'s circulating supply. It is analogous to the free-float capitalization in the stock market. Market Cap = Current Price x Circulating Supply.',
-  },
-  {
-    id: 'tvl',
-    title: 'Total value locked',
-    value: (stats) => stats.tvl === null ?
-      '$N/A' :
-      '$' + Number(stats.tvl).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
-    icon: <IconSvg name="lock" boxSize={ 6 } bgColor="#517FDB" borderRadius="base" color="white"/>,
-    hint: 'Total value of digital assets locked or staked in a chain',
-  },
-];
-
-export default INDICATORS;
diff --git a/ui/home/indicators/utils/prepareChartItems.ts b/ui/home/indicators/utils/prepareChartItems.ts
deleted file mode 100644
index 937fca2432..0000000000
--- a/ui/home/indicators/utils/prepareChartItems.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { TimeChartItem, TimeChartItemRaw } from 'toolkit/components/charts/types';
-
-import { sortByDateDesc } from 'ui/shared/chart/utils';
-
-const nonNullTailReducer = (result: Array<TimeChartItemRaw>, item: TimeChartItemRaw) => {
-  if (item.value === null && result.length === 0) {
-    return result;
-  }
-  result.unshift(item);
-  return result;
-};
-
-const mapNullToZero: (item: TimeChartItemRaw) => TimeChartItem = (item) => ({ ...item, value: Number(item.value) });
-
-export default function prepareChartItems(items: Array<TimeChartItemRaw>) {
-  return items
-    .sort(sortByDateDesc)
-    .reduceRight(nonNullTailReducer, [] as Array<TimeChartItemRaw>)
-    .map(mapNullToZero);
-}
diff --git a/ui/home/utils.ts b/ui/home/utils.ts
new file mode 100644
index 0000000000..235bffc86d
--- /dev/null
+++ b/ui/home/utils.ts
@@ -0,0 +1,22 @@
+import type { HomeStatsWidgetId } from 'types/homepage';
+
+import config from 'configs/app';
+import type { Props as StatsWidgetProps } from 'ui/shared/stats/StatsWidget';
+
+export interface HomeStatsItem extends StatsWidgetProps {
+  id: HomeStatsWidgetId;
+}
+
+export const isHomeStatsItemEnabled = (item: HomeStatsItem) => config.UI.homepage.stats.includes(item.id);
+
+export const sortHomeStatsItems = (a: HomeStatsItem, b: HomeStatsItem) => {
+  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;
+};
diff --git a/ui/internalTxs/InternalTxsList.tsx b/ui/internalTxs/InternalTxsList.tsx
index 3021888af2..e367a428b9 100644
--- a/ui/internalTxs/InternalTxsList.tsx
+++ b/ui/internalTxs/InternalTxsList.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import { useMultichainContext } from 'lib/contexts/multichain';
-import { getChainDataForList } from 'lib/multichain/getChainDataForList';
 
 import InternalTxsListItem from './InternalTxsListItem';
 
@@ -17,7 +16,7 @@ type Props = {
 
 const InternalTxsList = ({ data, currentAddress, isLoading, showBlockInfo = true }: Props) => {
   const multichainContext = useMultichainContext();
-  const chainData = getChainDataForList(multichainContext);
+  const chainData = multichainContext?.chain;
 
   return (
     <Box>
diff --git a/ui/internalTxs/InternalTxsListItem.tsx b/ui/internalTxs/InternalTxsListItem.tsx
index b8f65085e0..e43a8276e4 100644
--- a/ui/internalTxs/InternalTxsListItem.tsx
+++ b/ui/internalTxs/InternalTxsListItem.tsx
@@ -3,7 +3,7 @@ import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { InternalTransaction } from 'types/api/internalTransaction';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import config from 'configs/app';
 import { currencyUnits } from 'lib/units';
@@ -17,7 +17,7 @@ import TxStatus from 'ui/shared/statusTag/TxStatus';
 import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
-type Props = InternalTransaction & { currentAddress?: string; isLoading?: boolean; showBlockInfo?: boolean; chainData?: ChainConfig };
+type Props = InternalTransaction & { currentAddress?: string; isLoading?: boolean; showBlockInfo?: boolean; chainData?: ClusterChainConfig };
 
 const InternalTxsListItem = ({
   type,
diff --git a/ui/internalTxs/InternalTxsTable.tsx b/ui/internalTxs/InternalTxsTable.tsx
index 65a90c13d2..7f17603c77 100644
--- a/ui/internalTxs/InternalTxsTable.tsx
+++ b/ui/internalTxs/InternalTxsTable.tsx
@@ -4,7 +4,6 @@ import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
 import { useMultichainContext } from 'lib/contexts/multichain';
-import { getChainDataForList } from 'lib/multichain/getChainDataForList';
 import { currencyUnits } from 'lib/units';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
@@ -21,7 +20,7 @@ interface Props {
 
 const InternalTxsTable = ({ data, currentAddress, isLoading, top, showBlockInfo = true }: Props) => {
   const multichainContext = useMultichainContext();
-  const chainData = getChainDataForList(multichainContext);
+  const chainData = multichainContext?.chain;
 
   return (
     <AddressHighlightProvider>
diff --git a/ui/internalTxs/InternalTxsTableItem.tsx b/ui/internalTxs/InternalTxsTableItem.tsx
index d8b45f8a6c..2f124a8902 100644
--- a/ui/internalTxs/InternalTxsTableItem.tsx
+++ b/ui/internalTxs/InternalTxsTableItem.tsx
@@ -3,21 +3,21 @@ import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { InternalTransaction } from 'types/api/internalTransaction';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import config from 'configs/app';
 import { Badge } from 'toolkit/chakra/badge';
 import { TableCell, TableRow } from 'toolkit/chakra/table';
-import ChainIcon from 'ui/optimismSuperchain/components/ChainIcon';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import ChainIcon from 'ui/shared/externalChains/ChainIcon';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
 import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
-type Props = InternalTransaction & { currentAddress?: string; isLoading?: boolean; showBlockInfo?: boolean; chainData?: ChainConfig };
+type Props = InternalTransaction & { currentAddress?: string; isLoading?: boolean; showBlockInfo?: boolean; chainData?: ClusterChainConfig };
 
 const InternalTxsTableItem = ({
   type,
diff --git a/ui/marketplace/essentialDapps/multisend/Multisend.tsx b/ui/marketplace/essentialDapps/multisend/Multisend.tsx
index b0b565d087..c22faf2f26 100644
--- a/ui/marketplace/essentialDapps/multisend/Multisend.tsx
+++ b/ui/marketplace/essentialDapps/multisend/Multisend.tsx
@@ -497,9 +497,9 @@ const Container = ({ children }: { children: React.ReactNode }) => (
 );
 
 const widgetConfig = Object.fromEntries(dappConfig?.chains.map((chainId) => {
-  const chainConfig = essentialDappsChainsConfig()?.chains.find((chain) => chain.config.chain.id === chainId);
-  const explorerUrl = chainConfig?.config.app.baseUrl;
-  const apiUrl = chainConfig?.config.apis.general?.endpoint;
+  const chainConfig = essentialDappsChainsConfig()?.chains.find((chain) => chain.id === chainId);
+  const explorerUrl = chainConfig?.app_config?.app?.baseUrl;
+  const apiUrl = chainConfig?.app_config?.apis?.general?.endpoint;
   return [
     chainId,
     {
diff --git a/ui/marketplace/essentialDapps/revoke/Revoke.pw.tsx b/ui/marketplace/essentialDapps/revoke/Revoke.pw.tsx
index 480eca606d..52e47fe7e9 100644
--- a/ui/marketplace/essentialDapps/revoke/Revoke.pw.tsx
+++ b/ui/marketplace/essentialDapps/revoke/Revoke.pw.tsx
@@ -7,7 +7,7 @@ import { test, expect } from 'playwright/lib';
 import Revoke from './Revoke';
 
 const ESSENTIAL_DAPPS_CONFIG = JSON.stringify({
-  revoke: { chains: [ opSuperchainMock.chainDataA.config.chain.id ] },
+  revoke: { chains: [ opSuperchainMock.chainDataA.id ] },
 });
 
 test('base view +@dark-mode +@mobile', async({ render, mockEnvs, mockEssentialDappsChainsConfig }: TestFnArgs) => {
diff --git a/ui/marketplace/essentialDapps/revoke/Revoke.tsx b/ui/marketplace/essentialDapps/revoke/Revoke.tsx
index b013d204d3..c4fd80e2c6 100644
--- a/ui/marketplace/essentialDapps/revoke/Revoke.tsx
+++ b/ui/marketplace/essentialDapps/revoke/Revoke.tsx
@@ -46,7 +46,7 @@ const Revoke = () => {
   const [ searchAddress, setSearchAddress ] = useState(addressFromQuery || '');
   const [ searchInputValue, setSearchInputValue ] = useState('');
 
-  const selectedChain = essentialDappsChainsConfig()?.chains.find((chain) => chain.config.chain.id === selectedChainId[0]);
+  const selectedChain = essentialDappsChainsConfig()?.chains.find((chain) => chain.id === selectedChainId[0]);
 
   const approvalsQuery = useApprovalsQuery(selectedChain, searchAddress);
   const coinBalanceQuery = useCoinBalanceQuery(selectedChain, searchAddress);
@@ -209,6 +209,7 @@ const Revoke = () => {
             <ChainSelect
               value={ selectedChainId }
               onValueChange={ handleChainValueChange }
+              mode="default"
             />
           </Flex>
         </Flex>
diff --git a/ui/marketplace/essentialDapps/revoke/components/Approvals.tsx b/ui/marketplace/essentialDapps/revoke/components/Approvals.tsx
index 8f3b45bc20..d12a1bcb3c 100644
--- a/ui/marketplace/essentialDapps/revoke/components/Approvals.tsx
+++ b/ui/marketplace/essentialDapps/revoke/components/Approvals.tsx
@@ -1,7 +1,7 @@
 import { Box, Flex } from '@chakra-ui/react';
 
+import type { EssentialDappsChainConfig } from 'types/client/marketplace';
 import type { AllowanceType } from 'types/client/revoke';
-import type { ChainConfig } from 'types/multichain';
 
 import DataListDisplay from 'ui/shared/DataListDisplay';
 
@@ -9,7 +9,7 @@ import ApprovalsListItem from './ApprovalsListItem';
 import ApprovalsTable from './ApprovalsTable';
 
 type Props = {
-  selectedChain: ChainConfig | undefined;
+  selectedChain: EssentialDappsChainConfig | undefined;
   approvals: Array<AllowanceType>;
   isLoading?: boolean;
   isAddressMatch?: boolean;
diff --git a/ui/marketplace/essentialDapps/revoke/components/ApprovalsListItem.tsx b/ui/marketplace/essentialDapps/revoke/components/ApprovalsListItem.tsx
index f05e3f2c18..1f36bc6722 100644
--- a/ui/marketplace/essentialDapps/revoke/components/ApprovalsListItem.tsx
+++ b/ui/marketplace/essentialDapps/revoke/components/ApprovalsListItem.tsx
@@ -1,10 +1,8 @@
 import { Text } from '@chakra-ui/react';
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 
+import type { EssentialDappsChainConfig } from 'types/client/marketplace';
 import type { AllowanceType } from 'types/client/revoke';
-import type { ChainConfig } from 'types/multichain';
-
-import { route } from 'nextjs/routes';
 
 import dayjs from 'lib/date/dayjs';
 import { Button } from 'toolkit/chakra/button';
@@ -18,7 +16,7 @@ import useRevoke from '../hooks/useRevoke';
 import formatAllowance from '../lib/formatAllowance';
 
 type Props = {
-  selectedChain: ChainConfig | undefined;
+  selectedChain: EssentialDappsChainConfig | undefined;
   approval: AllowanceType;
   isLoading?: boolean;
   isAddressMatch?: boolean;
@@ -39,12 +37,12 @@ export default function ApprovalsListItem({
 
   const handleRevoke = useCallback(async() => {
     setIsPending(true);
-    const success = await revoke(approval, Number(selectedChain?.config.chain.id));
+    const success = await revoke(approval, Number(selectedChain?.id));
     if (success) {
       hideApproval(approval);
     }
     setIsPending(false);
-  }, [ revoke, hideApproval, approval, selectedChain?.config.chain.id ]);
+  }, [ revoke, hideApproval, approval, selectedChain?.id ]);
 
   return (
     <ListItemMobileGrid.Container
@@ -73,7 +71,7 @@ export default function ApprovalsListItem({
           isLoading={ isLoading }
           noCopy
           jointSymbol
-          href={ selectedChain?.config.app.baseUrl + route({ pathname: '/token/[hash]', query: { hash: approval.address } }) }
+          chain={ selectedChain }
           link={{ noIcon: true, external: true }}
         />
         <AddressEntity
@@ -81,7 +79,7 @@ export default function ApprovalsListItem({
           truncation="constant"
           noIcon
           isLoading={ isLoading }
-          href={ selectedChain?.config.app.baseUrl + route({ pathname: '/address/[hash]', query: { hash: approval.address } }) }
+          chain={ selectedChain }
           link={{ noIcon: true, external: true }}
         />
       </ListItemMobileGrid.Value>
@@ -92,7 +90,7 @@ export default function ApprovalsListItem({
           truncation="constant"
           noIcon
           isLoading={ isLoading }
-          href={ selectedChain?.config.app.baseUrl + route({ pathname: '/address/[hash]', query: { hash: approval.spender } }) }
+          chain={ selectedChain }
           link={{ noIcon: true, external: true }}
         />
       </ListItemMobileGrid.Value>
diff --git a/ui/marketplace/essentialDapps/revoke/components/ApprovalsTable.tsx b/ui/marketplace/essentialDapps/revoke/components/ApprovalsTable.tsx
index 0510f4f6d1..562e8322d9 100644
--- a/ui/marketplace/essentialDapps/revoke/components/ApprovalsTable.tsx
+++ b/ui/marketplace/essentialDapps/revoke/components/ApprovalsTable.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
+import type { EssentialDappsChainConfig } from 'types/client/marketplace';
 import type { AllowanceType } from 'types/client/revoke';
-import type { ChainConfig } from 'types/multichain';
 
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
@@ -9,7 +9,7 @@ import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 import ApprovalsTableItem from './ApprovalsTableItem';
 
 type Props = {
-  selectedChain: ChainConfig | undefined;
+  selectedChain: EssentialDappsChainConfig | undefined;
   approvals: Array<AllowanceType>;
   isLoading?: boolean;
   isAddressMatch?: boolean;
diff --git a/ui/marketplace/essentialDapps/revoke/components/ApprovalsTableItem.tsx b/ui/marketplace/essentialDapps/revoke/components/ApprovalsTableItem.tsx
index bb1435118a..42525cdbe9 100644
--- a/ui/marketplace/essentialDapps/revoke/components/ApprovalsTableItem.tsx
+++ b/ui/marketplace/essentialDapps/revoke/components/ApprovalsTableItem.tsx
@@ -1,10 +1,8 @@
 import { Flex } from '@chakra-ui/react';
 import { useCallback, useState } from 'react';
 
+import type { EssentialDappsChainConfig } from 'types/client/marketplace';
 import type { AllowanceType } from 'types/client/revoke';
-import type { ChainConfig } from 'types/multichain';
-
-import { route } from 'nextjs/routes';
 
 import { Button } from 'toolkit/chakra/button';
 import { Skeleton } from 'toolkit/chakra/skeleton';
@@ -18,7 +16,7 @@ import useRevoke from '../hooks/useRevoke';
 import formatAllowance from '../lib/formatAllowance';
 
 type Props = {
-  selectedChain: ChainConfig | undefined;
+  selectedChain: EssentialDappsChainConfig | undefined;
   approval: AllowanceType;
   isLoading?: boolean;
   isAddressMatch?: boolean;
@@ -39,12 +37,12 @@ export default function ApprovalsTableItem({
 
   const handleRevoke = useCallback(async() => {
     setIsPending(true);
-    const success = await revoke(approval, Number(selectedChain?.config.chain.id));
+    const success = await revoke(approval, Number(selectedChain?.id));
     if (success) {
       hideApproval(approval);
     }
     setIsPending(false);
-  }, [ revoke, hideApproval, approval, selectedChain?.config.chain.id ]);
+  }, [ revoke, hideApproval, approval, selectedChain?.id ]);
 
   return (
     <TableRow fontWeight="500">
@@ -64,7 +62,7 @@ export default function ApprovalsTableItem({
             jointSymbol
             textStyle="sm"
             fontWeight="600"
-            href={ selectedChain?.config.app.baseUrl + route({ pathname: '/token/[hash]', query: { hash: approval.address } }) }
+            chain={ selectedChain }
             link={{ noIcon: true, external: true }}
           />
           <AddressEntity
@@ -72,7 +70,7 @@ export default function ApprovalsTableItem({
             truncation="constant"
             noIcon
             isLoading={ isLoading }
-            href={ selectedChain?.config.app.baseUrl + route({ pathname: '/address/[hash]', query: { hash: approval.address } }) }
+            chain={ selectedChain }
             link={{ variant: 'secondary', noIcon: true, external: true }}
           />
         </Flex>
@@ -83,7 +81,7 @@ export default function ApprovalsTableItem({
           truncation="constant"
           noIcon
           isLoading={ isLoading }
-          href={ selectedChain?.config.app.baseUrl + route({ pathname: '/address/[hash]', query: { hash: approval.spender } }) }
+          chain={ selectedChain }
           link={{ noIcon: true, external: true }}
         />
       </TableCell>
diff --git a/ui/marketplace/essentialDapps/revoke/components/ChainSelect.tsx b/ui/marketplace/essentialDapps/revoke/components/ChainSelect.tsx
index de4ea15d3d..e0f30042a9 100644
--- a/ui/marketplace/essentialDapps/revoke/components/ChainSelect.tsx
+++ b/ui/marketplace/essentialDapps/revoke/components/ChainSelect.tsx
@@ -1,38 +1,14 @@
-import { createListCollection } from '@chakra-ui/react';
 import React from 'react';
 
 import essentialDappsChainsConfig from 'configs/essential-dapps-chains';
-import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
-import { Select } from 'toolkit/chakra/select';
-import type { SelectOption, SelectProps, ViewMode } from 'toolkit/chakra/select';
-import ChainIcon from 'ui/optimismSuperchain/components/ChainIcon';
-
-const collection = createListCollection<SelectOption>({
-  items: essentialDappsChainsConfig()?.chains.map((chain) => ({
-    value: chain.config.chain.id as string,
-    label: chain.config.chain.name || chain.slug,
-    icon: <ChainIcon data={ chain } borderRadius="none"/>,
-  })) || [],
-});
-
-interface Props extends Omit<SelectProps, 'collection' | 'placeholder'> {
-  loading?: boolean;
-  mode?: ViewMode;
-}
-
-const ChainSelect = ({ loading, mode, ...props }: Props) => {
-  const isInitialLoading = useIsInitialLoading(loading);
-
-  return (
-    <Select
-      collection={ collection }
-      defaultValue={ [ collection.items[0].value ] }
-      placeholder="Select chain"
-      loading={ isInitialLoading }
-      w="fit-content"
-      { ...props }
-    />
-  );
+import type { Props } from 'ui/shared/externalChains/ChainSelect';
+import ChainSelect from 'ui/shared/externalChains/ChainSelect';
+
+const ChainSelectEssentialDapps = (props: Omit<Props, 'chainsConfig'>) => {
+  const chainsConfig = React.useMemo(() => {
+    return essentialDappsChainsConfig()?.chains || [];
+  }, []);
+  return <ChainSelect chainsConfig={ chainsConfig } { ...props }/>;
 };
 
-export default React.memo(ChainSelect);
+export default React.memo(ChainSelectEssentialDapps);
diff --git a/ui/marketplace/essentialDapps/revoke/components/Content.pw.tsx b/ui/marketplace/essentialDapps/revoke/components/Content.pw.tsx
index 9e92a207c5..5a217aa263 100644
--- a/ui/marketplace/essentialDapps/revoke/components/Content.pw.tsx
+++ b/ui/marketplace/essentialDapps/revoke/components/Content.pw.tsx
@@ -23,6 +23,7 @@ test('base view +@dark-mode +@mobile', async({ render, mockAssetResponse }: Test
   };
 
   await mockAssetResponse(revokeMock.allowances[0].tokenIcon as string, './playwright/mocks/image_s.jpg');
+  await mockAssetResponse(opSuperchainMock.chainDataA.logo as string, './playwright/mocks/image_md.jpg');
 
   const component = await render(<Content { ...props }/>);
 
diff --git a/ui/marketplace/essentialDapps/revoke/components/Content.tsx b/ui/marketplace/essentialDapps/revoke/components/Content.tsx
index b59a74e274..2907a3056c 100644
--- a/ui/marketplace/essentialDapps/revoke/components/Content.tsx
+++ b/ui/marketplace/essentialDapps/revoke/components/Content.tsx
@@ -1,8 +1,8 @@
 import { Flex, Text, Separator } from '@chakra-ui/react';
 import React, { useState, useCallback, useMemo } from 'react';
 
+import type { EssentialDappsChainConfig } from 'types/client/marketplace';
 import type { AllowanceType } from 'types/client/revoke';
-import type { ChainConfig } from 'types/multichain';
 
 import { route } from 'nextjs/routes';
 
@@ -22,7 +22,7 @@ import Approvals from './Approvals';
 
 type Props = {
   searchAddress: string;
-  selectedChain: ChainConfig | undefined;
+  selectedChain: EssentialDappsChainConfig | undefined;
   isAddressMatch: boolean;
   coinBalanceQuery: ReturnType<typeof useCoinBalanceQuery>;
   approvalsQuery: ReturnType<typeof useApprovalsQuery>;
@@ -143,7 +143,7 @@ const Content = ({
               ) }
             </Skeleton>
             <Link
-              href={ selectedChain?.config.app.baseUrl + route({ pathname: '/address/[hash]', query: { hash: searchAddress } }) }
+              href={ route({ pathname: '/address/[hash]', query: { hash: searchAddress } }, { chain: selectedChain, external: true }) }
               external
               textStyle="sm"
               fontWeight="500"
diff --git a/ui/marketplace/essentialDapps/revoke/components/__screenshots__/Content.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png b/ui/marketplace/essentialDapps/revoke/components/__screenshots__/Content.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png
index 70a659c091..3617603d98 100644
Binary files a/ui/marketplace/essentialDapps/revoke/components/__screenshots__/Content.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png and b/ui/marketplace/essentialDapps/revoke/components/__screenshots__/Content.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png differ
diff --git a/ui/marketplace/essentialDapps/revoke/components/__screenshots__/Content.pw.tsx_default_base-view-dark-mode-mobile-1.png b/ui/marketplace/essentialDapps/revoke/components/__screenshots__/Content.pw.tsx_default_base-view-dark-mode-mobile-1.png
index e1fc3beac6..099a5f2507 100644
Binary files a/ui/marketplace/essentialDapps/revoke/components/__screenshots__/Content.pw.tsx_default_base-view-dark-mode-mobile-1.png and b/ui/marketplace/essentialDapps/revoke/components/__screenshots__/Content.pw.tsx_default_base-view-dark-mode-mobile-1.png differ
diff --git a/ui/marketplace/essentialDapps/revoke/components/__screenshots__/Content.pw.tsx_mobile_base-view-dark-mode-mobile-1.png b/ui/marketplace/essentialDapps/revoke/components/__screenshots__/Content.pw.tsx_mobile_base-view-dark-mode-mobile-1.png
index 150603bf71..6a5a2cb6bb 100644
Binary files a/ui/marketplace/essentialDapps/revoke/components/__screenshots__/Content.pw.tsx_mobile_base-view-dark-mode-mobile-1.png and b/ui/marketplace/essentialDapps/revoke/components/__screenshots__/Content.pw.tsx_mobile_base-view-dark-mode-mobile-1.png differ
diff --git a/ui/marketplace/essentialDapps/revoke/hooks/useApprovalsQuery.tsx b/ui/marketplace/essentialDapps/revoke/hooks/useApprovalsQuery.tsx
index 844e65707b..a2efdaa4d3 100644
--- a/ui/marketplace/essentialDapps/revoke/hooks/useApprovalsQuery.tsx
+++ b/ui/marketplace/essentialDapps/revoke/hooks/useApprovalsQuery.tsx
@@ -4,7 +4,7 @@ import { useCallback, useMemo } from 'react';
 import type { GetLogsParameters } from 'viem';
 import { isAddress, getAbiItem } from 'viem';
 
-import type { ChainConfig } from 'types/multichain';
+import type { EssentialDappsChainConfig } from 'types/client/marketplace';
 
 import { ALLOWANCES } from 'stubs/essentialDapps/revoke';
 
@@ -13,13 +13,13 @@ import getLogs from '../lib/getLogs';
 import useSearchErc20Allowances from './useSearchErc20Allowances';
 import useSearchNftAllowances from './useSearchNftAllowances';
 
-export default function useApprovalsQuery(chain: ChainConfig | undefined, userAddress: string) {
+export default function useApprovalsQuery(chain: EssentialDappsChainConfig | undefined, userAddress: string) {
   const searchErc20Allowances = useSearchErc20Allowances();
   const searchNftAllowances = useSearchNftAllowances();
 
   const publicClient = useMemo(
-    () => createPublicClient(chain?.config.chain.id),
-    [ chain?.config.chain.id ],
+    () => createPublicClient(chain?.id),
+    [ chain?.id ],
   );
 
   const searchAllowances = useCallback(async(signal?: AbortSignal) => {
@@ -57,7 +57,7 @@ export default function useApprovalsQuery(chain: ChainConfig | undefined, userAd
   }, [ searchErc20Allowances, searchNftAllowances, publicClient, chain, userAddress ]);
 
   return useQuery({
-    queryKey: [ 'revoke:approvals', chain?.config.chain.id, userAddress ],
+    queryKey: [ 'revoke:approvals', chain?.id, userAddress ],
     queryFn: ({ signal }) => searchAllowances(signal),
     enabled: Boolean(userAddress) && isAddress(userAddress),
     placeholderData: ALLOWANCES,
diff --git a/ui/marketplace/essentialDapps/revoke/hooks/useCoinBalanceQuery.tsx b/ui/marketplace/essentialDapps/revoke/hooks/useCoinBalanceQuery.tsx
index dfee87c451..a03cb64034 100644
--- a/ui/marketplace/essentialDapps/revoke/hooks/useCoinBalanceQuery.tsx
+++ b/ui/marketplace/essentialDapps/revoke/hooks/useCoinBalanceQuery.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { formatUnits } from 'viem';
 
-import type { ChainConfig } from 'types/multichain';
+import type { EssentialDappsChainConfig } from 'types/client/marketplace';
 
 import useApiQuery from 'lib/api/useApiQuery';
 
@@ -12,7 +12,7 @@ const PLACEHOLDER_DATA = {
   coinImage: undefined,
 };
 
-export default function useCoinBalanceQuery(chain: ChainConfig | undefined, userAddress: string) {
+export default function useCoinBalanceQuery(chain: EssentialDappsChainConfig | undefined, userAddress: string) {
   const addressQuery = useApiQuery('general:address', {
     pathParams: { hash: userAddress },
     chain,
@@ -32,7 +32,7 @@ export default function useCoinBalanceQuery(chain: ChainConfig | undefined, user
     let balance = parseFloat(
       formatUnits(
         BigInt(addressQuery.data.coin_balance || '0'),
-        chain?.config.chain.currency.decimals || 18,
+        chain?.app_config?.chain.currency.decimals || 18,
       ),
     );
 
@@ -56,9 +56,9 @@ export default function useCoinBalanceQuery(chain: ChainConfig | undefined, user
       data: {
         balance: balanceString || '0',
         balanceUsd,
-        symbol: chain?.config.chain.currency.symbol,
+        symbol: chain?.app_config?.chain.currency.symbol,
         coinImage,
       },
     };
-  }, [ addressQuery.data, statsQuery.data, chain?.config.chain.currency.decimals, chain?.config.chain.currency.symbol ]);
+  }, [ addressQuery.data, statsQuery.data, chain?.app_config?.chain.currency.decimals, chain?.app_config?.chain.currency.symbol ]);
 }
diff --git a/ui/marketplace/essentialDapps/revoke/hooks/useGetBlockTimestamp.tsx b/ui/marketplace/essentialDapps/revoke/hooks/useGetBlockTimestamp.tsx
index 12477973ff..9f57a69a68 100644
--- a/ui/marketplace/essentialDapps/revoke/hooks/useGetBlockTimestamp.tsx
+++ b/ui/marketplace/essentialDapps/revoke/hooks/useGetBlockTimestamp.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect } from 'react';
 
 import type { Block } from 'types/api/block';
-import type { ChainConfig } from 'types/multichain';
+import type { EssentialDappsChainConfig } from 'types/client/marketplace';
 
 import useApiFetch from 'lib/api/useApiFetch';
 
@@ -24,11 +24,11 @@ export default function useGetBlockTimestamp() {
   }, []);
 
   return useCallback(async(
-    chain: ChainConfig | undefined,
+    chain: EssentialDappsChainConfig | undefined,
     blockNumber: bigint,
     signal?: AbortSignal,
   ): Promise<number> => {
-    const cacheKey = `${ chain?.config.chain.id }:${ blockNumber.toString() }`;
+    const cacheKey = `${ chain?.id }:${ blockNumber.toString() }`;
     const cached = timestampCache.get(cacheKey);
     if (cached) return cached;
 
diff --git a/ui/marketplace/essentialDapps/revoke/hooks/useSearchErc20Allowances.tsx b/ui/marketplace/essentialDapps/revoke/hooks/useSearchErc20Allowances.tsx
index 8a22d22340..c3c3be536b 100644
--- a/ui/marketplace/essentialDapps/revoke/hooks/useSearchErc20Allowances.tsx
+++ b/ui/marketplace/essentialDapps/revoke/hooks/useSearchErc20Allowances.tsx
@@ -6,8 +6,8 @@ import type { PublicClient, Log } from 'viem';
 
 import type { AddressTokenBalancesResponse } from 'types/api/address';
 import type { TokenInfo } from 'types/api/token';
+import type { EssentialDappsChainConfig } from 'types/client/marketplace';
 import type { AllowanceType, ContractAllowanceType } from 'types/client/revoke';
-import type { ChainConfig } from 'types/multichain';
 
 import useApiFetch from 'lib/api/useApiFetch';
 
@@ -80,7 +80,7 @@ const useGetERC20TokenData = () => {
 
   return useCallback(async(
     tokenAddress: `0x${ string }`,
-    chain: ChainConfig | undefined,
+    chain: EssentialDappsChainConfig | undefined,
     signal?: AbortSignal,
   ) => {
     try {
@@ -114,7 +114,7 @@ const useGetERC20Allowances = () => {
   const apiFetch = useApiFetch();
 
   return useCallback(async(
-    chain: ChainConfig | undefined,
+    chain: EssentialDappsChainConfig | undefined,
     tokenAddresses: Array<`0x${ string }`>,
     searchQuery: string,
     approvals: Array<Log>,
@@ -215,7 +215,7 @@ export default function useSearchErc20Allowances() {
   const getERC20Allowances = useGetERC20Allowances();
 
   return useCallback(async(
-    chain: ChainConfig | undefined,
+    chain: EssentialDappsChainConfig | undefined,
     searchQuery: string,
     approvalEvents: Array<Log>,
     publicClient: PublicClient,
diff --git a/ui/marketplace/essentialDapps/revoke/hooks/useSearchNftAllowances.tsx b/ui/marketplace/essentialDapps/revoke/hooks/useSearchNftAllowances.tsx
index 4d32e5de5f..78d9ffce4b 100644
--- a/ui/marketplace/essentialDapps/revoke/hooks/useSearchNftAllowances.tsx
+++ b/ui/marketplace/essentialDapps/revoke/hooks/useSearchNftAllowances.tsx
@@ -4,8 +4,8 @@ import { getAbiItem, getAddress, slice } from 'viem';
 import type { PublicClient, GetLogsParameters, Log } from 'viem';
 
 import type { TokenInfo } from 'types/api/token';
+import type { EssentialDappsChainConfig } from 'types/client/marketplace';
 import type { AllowanceType, ContractAllowanceType } from 'types/client/revoke';
-import type { ChainConfig } from 'types/multichain';
 
 import useApiFetch from 'lib/api/useApiFetch';
 import { ZERO_ADDRESS } from 'toolkit/utils/consts';
@@ -125,7 +125,7 @@ function useGetNftAllowances() {
     approvals: Array<Log>,
     approvalsForAll: Array<Log>,
     publicClient: PublicClient,
-    chain: ChainConfig | undefined,
+    chain: EssentialDappsChainConfig | undefined,
     signal?: AbortSignal,
   ) => {
     const allowances: Array<AllowanceType> = [];
@@ -211,7 +211,7 @@ export default function useSearchNftAllowances() {
   const getNftAllowances = useGetNftAllowances();
 
   return useCallback(async(
-    chain: ChainConfig | undefined,
+    chain: EssentialDappsChainConfig | undefined,
     searchQuery: string,
     approvalEvents: Array<Log>,
     publicClient: PublicClient,
diff --git a/ui/marketplace/essentialDapps/revoke/lib/createPublicClient.ts b/ui/marketplace/essentialDapps/revoke/lib/createPublicClient.ts
index dadcda4936..22265d0a54 100644
--- a/ui/marketplace/essentialDapps/revoke/lib/createPublicClient.ts
+++ b/ui/marketplace/essentialDapps/revoke/lib/createPublicClient.ts
@@ -6,13 +6,13 @@ import { chains } from 'lib/web3/chains';
 
 export default function createPublicClient(chainId: string | undefined): PublicClient | undefined {
   const chain = chains.find((chain) => chain.id === Number(chainId));
-  const chainConfig = essentialDappsChainsConfig()?.chains.find((chain) => chain.config.chain.id === chainId);
+  const chainConfig = essentialDappsChainsConfig()?.chains.find((chain) => chain.id === chainId);
 
   if (!chain || !chainConfig) return undefined;
 
   return createPublicClientDefault({
     chain,
-    transport: http(`${ chainConfig?.config.apis.general?.endpoint }/api/eth-rpc`, { batch: { wait: 100, batchSize: 5 } }),
+    transport: http(`${ chainConfig?.app_config?.apis?.general?.endpoint }/api/eth-rpc`, { batch: { wait: 100, batchSize: 5 } }),
     batch: { multicall: true },
   });
 }
diff --git a/ui/marketplace/essentialDapps/swap/Swap.tsx b/ui/marketplace/essentialDapps/swap/Swap.tsx
index 9cff54ace4..b78f08a789 100644
--- a/ui/marketplace/essentialDapps/swap/Swap.tsx
+++ b/ui/marketplace/essentialDapps/swap/Swap.tsx
@@ -26,8 +26,8 @@ const defaultChainId = Number(
 
 function getUrls(isRpc = false) {
   return Object.fromEntries(dappConfig?.chains.map((chainId) => {
-    const chainConfig = essentialDappsChainsConfig()?.chains.find((chain) => chain.config.chain.id === chainId);
-    const url = isRpc ? `${ chainConfig?.config.apis.general?.endpoint }/api/eth-rpc` : chainConfig?.config.app.baseUrl;
+    const chainConfig = essentialDappsChainsConfig()?.chains.find((chain) => chain.id === chainId);
+    const url = isRpc ? `${ chainConfig?.app_config?.apis?.general?.endpoint }/api/eth-rpc` : chainConfig?.explorer_url;
     return [ Number(chainId), [ url ] ];
   }) || []);
 }
diff --git a/ui/optimismSuperchain/accounts/OpSuperchainAccounts.tsx b/ui/optimismSuperchain/accounts/OpSuperchainAccounts.tsx
index c01e1569de..200e20d56b 100644
--- a/ui/optimismSuperchain/accounts/OpSuperchainAccounts.tsx
+++ b/ui/optimismSuperchain/accounts/OpSuperchainAccounts.tsx
@@ -1,15 +1,92 @@
+import { Box } from '@chakra-ui/react';
+import { BigNumber } from 'bignumber.js';
 import React from 'react';
 
+import { MultichainProvider } from 'lib/contexts/multichain';
+import getItemIndex from 'lib/getItemIndex';
+import { TOP_ADDRESS } from 'stubs/address';
+import { generateListStub } from 'stubs/utils';
+import AddressesListItem from 'ui/addresses/AddressesListItem';
+import AddressesTable from 'ui/addresses/AddressesTable';
+import ChainSelect from 'ui/optimismSuperchain/components/ChainSelect';
+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 OpSuperchainAccounts = () => {
+  const { isError, isPlaceholderData, data, pagination, chainValue, onChainValueChange } = useQueryWithPages({
+    resourceName: 'general:addresses',
+    options: {
+      placeholderData: generateListStub<'general:addresses'>(TOP_ADDRESS, 50, {
+        next_page_params: {
+          fetched_coin_balance: '42',
+          hash: '0x99f0ec06548b086e46cb0019c78d0b9b9f36cd53',
+          items_count: 50,
+        },
+        total_supply: '0',
+      }),
+    },
+    isMultichain: true,
+  });
+
+  const pageStartIndex = getItemIndex(0, pagination.page);
+  const totalSupply = React.useMemo(() => {
+    return BigNumber(data?.total_supply || '0');
+  }, [ data?.total_supply ]);
+
+  const content = data?.items ? (
+    <MultichainProvider chainId={ chainValue?.[0] }>
+      <Box hideBelow="lg">
+        <AddressesTable
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+          items={ data.items }
+          totalSupply={ totalSupply }
+          pageStartIndex={ pageStartIndex }
+          isLoading={ isPlaceholderData }
+        />
+      </Box>
+      <Box hideFrom="lg">
+        { data.items.map((item, index) => (
+          <AddressesListItem
+            key={ item.hash + (isPlaceholderData ? index : '') }
+            item={ item }
+            index={ pageStartIndex + index }
+            totalSupply={ totalSupply }
+            isLoading={ isPlaceholderData }
+          />
+        )) }
+      </Box>
+    </MultichainProvider>
+  ) : null;
+
+  const actionBar = (
+    <ActionBar mt={ -6 }>
+      <ChainSelect
+        value={ chainValue }
+        onValueChange={ onChainValueChange }
+      />
+      <Pagination ml="auto" { ...pagination }/>
+    </ActionBar>
+  );
+
   return (
     <>
       <PageTitle
         title="Top accounts"
         withTextAd
       />
-      <div>Coming soon 🔜</div>
+      <DataListDisplay
+        isError={ isError }
+        itemsNum={ data?.items?.length }
+        emptyText="There are no accounts."
+        actionBar={ actionBar }
+        showActionBarIfError
+        showActionBarIfEmpty
+      >
+        { content }
+      </DataListDisplay>
     </>
   );
 };
diff --git a/ui/optimismSuperchain/address/OpSuperchainAddress.pw.tsx b/ui/optimismSuperchain/address/OpSuperchainAddress.pw.tsx
new file mode 100644
index 0000000000..58fc877f57
--- /dev/null
+++ b/ui/optimismSuperchain/address/OpSuperchainAddress.pw.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+import * as opSuperchainMock from 'mocks/multichain/opSuperchain';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import OpSuperchainAddress from './OpSuperchainAddress';
+
+const CURRENT_ADDRESS = opSuperchainMock.addressA.hash;
+
+const hooksConfig = {
+  router: {
+    query: { hash: CURRENT_ADDRESS },
+  },
+};
+
+test('base view', async({ mockApiResponse, render, page, mockMultichainConfig, mockEnvs, mockAssetResponse, mockTextAd }) => {
+
+  await mockMultichainConfig();
+  await mockEnvs(ENVS_MAP.opSuperchain);
+  await mockTextAd();
+
+  await mockApiResponse('multichainAggregator:address', opSuperchainMock.addressA, { pathParams: { hash: CURRENT_ADDRESS } });
+  await mockApiResponse('multichainAggregator:address_tokens', {
+    items: [ opSuperchainMock.tokenA ],
+    next_page_params: undefined,
+  }, { pathParams: { hash: CURRENT_ADDRESS }, queryParams: { type: 'ERC-20' } });
+  await mockApiResponse('multichainAggregator:address_tokens', {
+    items: [ ],
+    next_page_params: undefined,
+  }, { pathParams: { hash: CURRENT_ADDRESS }, queryParams: { type: 'ERC-721' } });
+  await mockApiResponse('multichainAggregator:address_tokens', {
+    items: [ ],
+    next_page_params: undefined,
+  }, { pathParams: { hash: CURRENT_ADDRESS }, queryParams: { type: 'ERC-1155' } });
+  await mockApiResponse('multichainAggregator:address_tokens', {
+    items: [ ],
+    next_page_params: undefined,
+  }, { pathParams: { hash: CURRENT_ADDRESS }, queryParams: { type: 'ERC-404' } });
+
+  await mockAssetResponse(opSuperchainMock.chainDataA.logo as string, './playwright/mocks/image_s.jpg');
+  await mockAssetResponse(opSuperchainMock.chainDataB.logo as string, './playwright/mocks/image_md.jpg');
+
+  const component = await render(
+    <OpSuperchainAddress/>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot();
+
+  await component.getByText('By chain').nth(0).click();
+  await expect(page.locator('div[data-scope="popover"][data-part="content"]')).toHaveScreenshot();
+
+  await component.getByText('By chain').nth(1).click();
+  await expect(page.locator('div[data-scope="popover"][data-part="content"]')).toHaveScreenshot();
+});
diff --git a/ui/optimismSuperchain/address/OpSuperchainAddress.tsx b/ui/optimismSuperchain/address/OpSuperchainAddress.tsx
index f1bb65c3f2..70cb0511ca 100644
--- a/ui/optimismSuperchain/address/OpSuperchainAddress.tsx
+++ b/ui/optimismSuperchain/address/OpSuperchainAddress.tsx
@@ -3,17 +3,19 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { TabItemRegular } from 'toolkit/components/AdaptiveTabs/types';
-import type { EntityTag } from 'ui/shared/EntityTags/types';
 
 import getCheckedSummedAddress from 'lib/address/getCheckedSummedAddress';
+import useApiQuery from 'lib/api/useApiQuery';
+import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import * as contract from 'lib/multichain/contract';
 import getQueryParamString from 'lib/router/getQueryParamString';
+import { ADDRESS } from 'stubs/optimismSuperchain';
 import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
 import { CONTRACT_TAB_IDS } from 'ui/address/contract/utils';
 import AddressQrCode from 'ui/address/details/AddressQrCode';
 import ClusterChainsPopover from 'ui/optimismSuperchain/components/ClusterChainsPopover';
 import TextAd from 'ui/shared/ad/TextAd';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import EntityTags from 'ui/shared/EntityTags/EntityTags';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
 import OpSuperchainAddressCoinBalanceHistory from './OpSuperchainAddressCoinBalanceHistory';
@@ -25,71 +27,81 @@ import OpSuperchainAddressTokens, { ADDRESS_OP_SUPERCHAIN_TOKENS_TAB_IDS } from
 import OpSuperchainAddressTokenTransfers, { ADDRESS_OP_SUPERCHAIN_TOKEN_TRANSFERS_TAB_IDS } from './OpSuperchainAddressTokenTransfers';
 import OpSuperchainAddressTxs, { ADDRESS_OP_SUPERCHAIN_TXS_TAB_IDS } from './OpSuperchainAddressTxs';
 
-const PREDEFINED_TAG_PRIORITY = 100;
-
 const OpSuperchainAddress = () => {
   const router = useRouter();
 
   const hash = getQueryParamString(router.query.hash);
 
-  const isLoading = false;
-
-  const addressQuery = {
-    data: {
-      hash: undefined,
+  const addressQuery = useApiQuery('multichainAggregator:address', {
+    pathParams: { hash },
+    queryOptions: {
+      placeholderData: ADDRESS,
     },
-  };
+  });
+
+  throwOnResourceLoadError(addressQuery);
 
-  const checkSummedHash = React.useMemo(() => addressQuery.data?.hash ?? getCheckedSummedAddress(hash), [ hash, addressQuery.data?.hash ]);
+  const isLoading = addressQuery.isPlaceholderData;
+  const chainData = Object.values(addressQuery.data?.chain_infos ?? {});
+  const isContractSomewhere = chainData.some((chainInfo) => chainInfo.is_contract);
+  const isContract = contract.isContract(addressQuery.data);
+  const isVerified = contract.isVerified(addressQuery.data);
+
+  const checkSummedHash = React.useMemo(() => {
+    if (isLoading) {
+      return getCheckedSummedAddress(hash);
+    }
+    return addressQuery.data?.hash ?? getCheckedSummedAddress(hash);
+  }, [ hash, addressQuery.data?.hash, isLoading ]);
 
   const tabs: Array<TabItemRegular> = React.useMemo(() => {
     return [
       {
         id: 'index',
         title: 'Details',
-        component: <OpSuperchainAddressDetails addressHash={ checkSummedHash }/>,
+        component: <OpSuperchainAddressDetails addressHash={ checkSummedHash } data={ addressQuery.data } isLoading={ isLoading }/>,
       },
-      {
+      isContractSomewhere && {
         id: 'contract',
         title: 'Contract',
-        component: <OpSuperchainAddressContract addressHash={ checkSummedHash }/>,
+        component: <OpSuperchainAddressContract addressHash={ checkSummedHash } data={ addressQuery.data } isLoading={ isLoading }/>,
         subTabs: CONTRACT_TAB_IDS,
       },
       {
         id: 'txs',
         title: 'Transactions',
-        component: <OpSuperchainAddressTxs/>,
+        component: <OpSuperchainAddressTxs addressData={ addressQuery.data } isLoading={ isLoading }/>,
         subTabs: ADDRESS_OP_SUPERCHAIN_TXS_TAB_IDS,
       },
       {
         id: 'token_transfers',
         title: 'Token transfers',
-        component: <OpSuperchainAddressTokenTransfers/>,
+        component: <OpSuperchainAddressTokenTransfers addressData={ addressQuery.data } isLoading={ isLoading }/>,
         subTabs: ADDRESS_OP_SUPERCHAIN_TOKEN_TRANSFERS_TAB_IDS,
       },
-      {
+      addressQuery.data?.has_tokens && {
         id: 'tokens',
         title: 'Tokens',
-        component: <OpSuperchainAddressTokens/>,
+        component: isLoading ? null : <OpSuperchainAddressTokens addressData={ addressQuery.data }/>,
         subTabs: ADDRESS_OP_SUPERCHAIN_TOKENS_TAB_IDS,
       },
       {
         id: 'internal_txs',
         title: 'Internal txns',
-        component: <OpSuperchainAddressInternalTxs/>,
+        component: <OpSuperchainAddressInternalTxs addressData={ addressQuery.data } isLoading={ isLoading }/>,
       },
       {
         id: 'coin_balance_history',
         title: 'Coin balance history',
-        component: <OpSuperchainAddressCoinBalanceHistory/>,
+        component: <OpSuperchainAddressCoinBalanceHistory addressData={ addressQuery.data } isLoading={ isLoading }/>,
       },
-      {
+      isContractSomewhere && {
         id: 'logs',
         title: 'Logs',
-        component: <OpSuperchainAddressLogs/>,
+        component: <OpSuperchainAddressLogs addressData={ addressQuery.data } isLoading={ isLoading }/>,
       },
-    ];
-  }, [ checkSummedHash ]);
+    ].filter(Boolean);
+  }, [ addressQuery.data, isLoading, isContractSomewhere, checkSummedHash ]);
 
   const titleSecondRow = (
     <Flex alignItems="center" w="100%" columnGap={ 2 } rowGap={ 2 } flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
@@ -100,6 +112,8 @@ const OpSuperchainAddress = () => {
           name: '',
           ens_domain_name: '',
           implementations: null,
+          is_contract: isContract,
+          is_verified: isVerified,
         }}
         isLoading={ isLoading }
         variant="subheading"
@@ -110,32 +124,17 @@ const OpSuperchainAddress = () => {
       />
       <AddressQrCode hash={ checkSummedHash } isLoading={ isLoading }/>
       <Box ml="auto"/>
-      <ClusterChainsPopover addressHash={ checkSummedHash }/>
+      <ClusterChainsPopover addressHash={ checkSummedHash } data={ addressQuery.data } isLoading={ isLoading }/>
     </Flex>
   );
 
-  const tags: Array<EntityTag> = React.useMemo(() => {
-    return [
-      { slug: 'eoa', name: 'EOA', tagType: 'custom' as const, ordinal: PREDEFINED_TAG_PRIORITY },
-    ];
-  }, []);
-
-  const titleContentAfter = (
-    <EntityTags
-      tags={ tags }
-      isLoading={ isLoading }
-      addressHash={ checkSummedHash }
-    />
-  );
-
   return (
     <>
       <TextAd mb={ 6 }/>
       <PageTitle
-        title="Address details"
+        title={ `${ isContract ? 'Contract' : 'Address' } details` }
         isLoading={ isLoading }
         secondRow={ titleSecondRow }
-        contentAfter={ titleContentAfter }
       />
       <RoutedTabs tabs={ tabs } isLoading={ isLoading }/>
     </>
diff --git a/ui/optimismSuperchain/address/OpSuperchainAddressCoinBalanceHistory.tsx b/ui/optimismSuperchain/address/OpSuperchainAddressCoinBalanceHistory.tsx
index a8655ced5b..b7716e4817 100644
--- a/ui/optimismSuperchain/address/OpSuperchainAddressCoinBalanceHistory.tsx
+++ b/ui/optimismSuperchain/address/OpSuperchainAddressCoinBalanceHistory.tsx
@@ -1,31 +1,50 @@
 import React from 'react';
 
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+
 import multichainConfig from 'configs/multichain';
 import getSocketUrl from 'lib/api/getSocketUrl';
 import { MultichainProvider } from 'lib/contexts/multichain';
 import useRoutedChainSelect from 'lib/multichain/useRoutedChainSelect';
 import { SocketProvider } from 'lib/socket/context';
 import AddressCoinBalance from 'ui/address/AddressCoinBalance';
-import ChainSelect from 'ui/shared/multichain/ChainSelect';
+import ChainSelect from 'ui/optimismSuperchain/components/ChainSelect';
+
+import getAvailableChainIds from './getAvailableChainIds';
 
 const QUERY_PRESERVED_PARAMS = [ 'tab', 'hash' ];
 
-const OpSuperchainAddressCoinBalanceHistory = () => {
-  const chainSelect = useRoutedChainSelect({ persistedParams: QUERY_PRESERVED_PARAMS });
-  const chainConfig = multichainConfig()?.chains.find(({ slug }) => slug === chainSelect.value?.[0]);
+interface Props {
+  addressData: multichain.GetAddressResponse | undefined;
+  isLoading: boolean;
+}
+
+const OpSuperchainAddressCoinBalanceHistory = ({ addressData, isLoading }: Props) => {
+  const chainIds = React.useMemo(() => getAvailableChainIds(addressData), [ addressData ]);
+
+  const chainSelect = useRoutedChainSelect({ persistedParams: QUERY_PRESERVED_PARAMS, chainIds, isLoading });
+  const chainConfig = multichainConfig()?.chains.find(({ id }) => id === chainSelect.value?.[0]);
+
+  if (chainIds.length === 0) {
+    return <p>There is no coin balance history.</p>;
+  }
 
   return (
     <>
       <ChainSelect
         value={ chainSelect.value }
         onValueChange={ chainSelect.onValueChange }
+        chainIds={ chainIds }
+        loading={ isLoading }
         mb={ 3 }
       />
-      <MultichainProvider chainSlug={ chainSelect.value?.[0] }>
-        <SocketProvider url={ getSocketUrl(chainConfig?.config) }>
-          <AddressCoinBalance key={ chainSelect.value?.[0] }/>
-        </SocketProvider>
-      </MultichainProvider>
+      { !isLoading && chainSelect.value?.[0] && chainConfig && (
+        <MultichainProvider chainId={ chainSelect.value?.[0] }>
+          <SocketProvider url={ getSocketUrl(chainConfig?.app_config) }>
+            <AddressCoinBalance key={ chainSelect.value?.[0] }/>
+          </SocketProvider>
+        </MultichainProvider>
+      ) }
     </>
   );
 };
diff --git a/ui/optimismSuperchain/address/OpSuperchainAddressContract.tsx b/ui/optimismSuperchain/address/OpSuperchainAddressContract.tsx
index f5c050df52..cb4f17419b 100644
--- a/ui/optimismSuperchain/address/OpSuperchainAddressContract.tsx
+++ b/ui/optimismSuperchain/address/OpSuperchainAddressContract.tsx
@@ -1,12 +1,18 @@
 import React from 'react';
 
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+
+import multichainConfig from 'configs/multichain';
+import getSocketUrl from 'lib/api/getSocketUrl';
 import useApiQuery from 'lib/api/useApiQuery';
 import { MultichainProvider } from 'lib/contexts/multichain';
 import useRoutedChainSelect from 'lib/multichain/useRoutedChainSelect';
+import { SocketProvider } from 'lib/socket/context';
 import { ADDRESS_INFO } from 'stubs/address';
-import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
-import useContractTabs from 'ui/address/contract/useContractTabs';
-import ChainSelect from 'ui/shared/multichain/ChainSelect';
+import AddressContract from 'ui/address/AddressContract';
+import ChainSelect from 'ui/optimismSuperchain/components/ChainSelect';
+
+import getContractChainIds from './getContractChainIds';
 
 const LEFT_SLOT_PROPS = {
   mr: 6,
@@ -15,45 +21,47 @@ const QUERY_PRESERVED_PARAMS = [ 'tab', 'hash' ];
 
 interface Props {
   addressHash: string;
+  isLoading: boolean;
+  data: multichain.GetAddressResponse | undefined;
 }
 
-const OpSuperchainAddressContract = ({ addressHash }: Props) => {
+const OpSuperchainAddressContract = ({ addressHash, isLoading, data }: Props) => {
+  const chainIds = React.useMemo(() => getContractChainIds(data), [ data ]);
+  const chainSelect = useRoutedChainSelect({ persistedParams: QUERY_PRESERVED_PARAMS, isLoading, chainIds });
 
-  const chainSelect = useRoutedChainSelect({ persistedParams: QUERY_PRESERVED_PARAMS });
+  const chain = React.useMemo(() => {
+    return multichainConfig()?.chains.find(({ id }) => id === chainSelect.value?.[0]);
+  }, [ chainSelect.value ]);
 
   const addressQuery = useApiQuery('general:address', {
     pathParams: { hash: addressHash },
     queryOptions: {
-      enabled: Boolean(addressHash),
+      enabled: Boolean(addressHash) && !isLoading,
       placeholderData: ADDRESS_INFO,
     },
-    chainSlug: chainSelect.value?.[0],
-  });
-
-  const contractTabs = useContractTabs({
-    addressData: addressQuery.data,
-    isEnabled: !addressQuery.isPlaceholderData,
-    hasMudTab: false,
-    chainSlug: chainSelect.value?.[0],
+    chain,
   });
 
   const leftSlot = (
     <ChainSelect
       value={ chainSelect.value }
       onValueChange={ chainSelect.onValueChange }
+      loading={ isLoading }
+      chainIds={ chainIds }
     />
   );
 
   return (
-    <MultichainProvider chainSlug={ chainSelect.value?.[0] }>
-      <RoutedTabs
-        tabs={ contractTabs.tabs }
-        variant="secondary"
-        size="sm"
-        isLoading={ contractTabs.isLoading }
-        leftSlot={ leftSlot }
-        leftSlotProps={ LEFT_SLOT_PROPS }
-      />
+    <MultichainProvider chainId={ chainSelect.value?.[0] }>
+      <SocketProvider url={ getSocketUrl(chain?.app_config) }>
+        <AddressContract
+          addressData={ addressQuery.data }
+          isLoading={ isLoading || addressQuery.isPlaceholderData }
+          hasMudTab={ false }
+          leftSlot={ leftSlot }
+          leftSlotProps={ LEFT_SLOT_PROPS }
+        />
+      </SocketProvider>
     </MultichainProvider>
   );
 };
diff --git a/ui/optimismSuperchain/address/OpSuperchainAddressDetails.tsx b/ui/optimismSuperchain/address/OpSuperchainAddressDetails.tsx
index c36fb50073..4fd4834b61 100644
--- a/ui/optimismSuperchain/address/OpSuperchainAddressDetails.tsx
+++ b/ui/optimismSuperchain/address/OpSuperchainAddressDetails.tsx
@@ -1,64 +1,94 @@
 import React from 'react';
 
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+
 import { route } from 'nextjs/routes';
 
 import multichainConfig from 'configs/multichain';
 import getCurrencySymbol from 'lib/multichain/getCurrencySymbol';
 import { Link } from 'toolkit/chakra/link';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
 import DetailedInfoSponsoredItem from 'ui/shared/DetailedInfo/DetailedInfoSponsoredItem';
-import TextSeparator from 'ui/shared/TextSeparator';
+import ChainIcon from 'ui/shared/externalChains/ChainIcon';
 
-import ChainIcon from '../components/ChainIcon';
+import OpSuperchainAddressCoinBalance from './details/OpSuperchainAddressCoinBalance';
+import OpSuperchainAddressContractName from './details/OpSuperchainAddressContractName';
+import OpSuperchainAddressNetWorth from './details/OpSuperchainAddressNetWorth';
+import OpSuperchainTokenSelect from './tokens/OpSuperchainTokenSelect';
+import useFetchTokens from './tokens/useFetchTokens';
 
 interface Props {
+  data: multichain.GetAddressResponse | undefined;
   addressHash: string;
+  isLoading: boolean;
 }
 
-const OpSuperchainAddressDetails = ({ addressHash }: Props) => {
+const OpSuperchainAddressDetails = ({ data, addressHash, isLoading }: Props) => {
   const chains = multichainConfig()?.chains;
+  const activeChainsIds = Object.keys(data?.chain_infos ?? {});
+  const activeChains = chains?.filter((chain) => activeChainsIds.includes(String(chain.id))) ?? [];
 
-  const isLoading = false;
   const currencySymbol = getCurrencySymbol();
 
+  const tokensInfo = useFetchTokens({ hash: addressHash, enabled: data?.has_tokens && !isLoading });
+
+  if (!data && !isLoading) {
+    return null;
+  }
+
+  const isContract = Object.values(data?.chain_infos ?? {}).some((chainInfo) => chainInfo.is_contract);
+
   return (
     <DetailedInfo.Container templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} >
-      { chains && chains.length > 0 && (
+      { (isLoading || activeChains.length > 0) && (
         <>
           <DetailedInfo.ItemLabel
-            hint="Chains"
+            hint="Chains this address has interacted with"
             isLoading={ isLoading }
           >
-            Chain{ chains.length > 1 ? 's' : '' }
+            Chain{ activeChains.length > 1 ? 's' : '' }
           </DetailedInfo.ItemLabel>
-          <DetailedInfo.ItemValue columnGap={ 3 }>
-            { chains.map((chain) => (
+          <DetailedInfo.ItemValue columnGap={ 3 } multiRow>
+            { activeChains.map((chain) => (
               <Link
-                key={ chain.slug }
-                href={ chain.config.app.baseUrl + route({ pathname: '/address/[hash]', query: { hash: addressHash } }) }
+                key={ chain.id }
+                href={ route({
+                  pathname: '/address/[hash]',
+                  query: {
+                    hash: addressHash,
+                    utm_source: 'multichain-explorer',
+                    utm_medium: 'address',
+                  },
+                }, { chain, external: true }) }
                 external
+                loading={ isLoading }
                 display="flex"
                 alignItems="center"
                 color="text.primary"
                 _hover={{ color: 'link.primary.hover' }}
               >
                 <ChainIcon data={ chain } mr={ 2 }/>
-                { chain.config.chain.name }
+                <span>{ chain.name }</span>
               </Link>
             )) }
           </DetailedInfo.ItemValue>
         </>
       ) }
 
-      <DetailedInfo.ItemLabel
-        hint="The name found in the source code of the Contract"
-        isLoading={ isLoading }
-      >
-        Contract name
-      </DetailedInfo.ItemLabel>
-      <DetailedInfo.ItemValue>
-        <Link href={ route({ pathname: '/address/[hash]', query: { hash: addressHash, tab: 'contract' } }) }>View by chain</Link>
-      </DetailedInfo.ItemValue>
+      { isContract && (
+        <>
+          <DetailedInfo.ItemLabel
+            hint="The name found in the source code of the Contract"
+            isLoading={ isLoading }
+          >
+            Contract name
+          </DetailedInfo.ItemLabel>
+          <DetailedInfo.ItemValue>
+            <OpSuperchainAddressContractName data={ data } isLoading={ isLoading }/>
+          </DetailedInfo.ItemValue>
+        </>
+      ) }
 
       <DetailedInfo.ItemLabel
         hint={ `${ currencySymbol } balance` }
@@ -67,17 +97,36 @@ const OpSuperchainAddressDetails = ({ addressHash }: Props) => {
         { currencySymbol } balance
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
-        Coming soon 🔜
+        <OpSuperchainAddressCoinBalance data={ data } isLoading={ isLoading }/>
       </DetailedInfo.ItemValue>
 
+      { data?.has_tokens && (
+        <>
+          <DetailedInfo.ItemLabel
+            hint="All tokens in the account and total value"
+            isLoading={ isLoading }
+          >
+            Tokens
+          </DetailedInfo.ItemLabel>
+          <DetailedInfo.ItemValue>
+            <OpSuperchainTokenSelect isLoading={ isLoading || tokensInfo.isPending } isError={ tokensInfo.isError } data={ tokensInfo.data }/>
+          </DetailedInfo.ItemValue>
+        </>
+      ) }
+
       <DetailedInfo.ItemLabel
-        hint="All tokens in the account and total value"
+        hint="Total net worth in USD of native coin and all tokens for the address"
         isLoading={ isLoading }
       >
-        Tokens
+        Net worth
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
-        Coming soon 🔜
+        <OpSuperchainAddressNetWorth
+          addressData={ data }
+          tokensData={ tokensInfo.data }
+          isLoading={ isLoading || Boolean(tokensInfo.isPending && data?.has_tokens) }
+          isError={ tokensInfo.isError }
+        />
       </DetailedInfo.ItemValue>
 
       <DetailedInfo.ItemLabel
@@ -87,9 +136,9 @@ const OpSuperchainAddressDetails = ({ addressHash }: Props) => {
         Transactions
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue whiteSpace="pre-wrap">
-        Cross-chain <Link href={ route({ pathname: '/address/[hash]', query: { hash: addressHash, tab: 'txs_cross_chain' } }) }>TBD</Link>
-        <TextSeparator color="border.divider"/>
-        Local <Link href={ route({ pathname: '/address/[hash]', query: { hash: addressHash, tab: 'txs_local' } }) }>view by chain</Link>
+        <Skeleton loading={ isLoading }>
+          Local <Link href={ route({ pathname: '/address/[hash]', query: { hash: addressHash, tab: 'txs_local' } }) }>view by chain</Link>
+        </Skeleton>
       </DetailedInfo.ItemValue>
 
       <DetailedInfo.ItemLabel
@@ -99,19 +148,9 @@ const OpSuperchainAddressDetails = ({ addressHash }: Props) => {
         Transfers
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue whiteSpace="pre-wrap">
-        Cross-chain <Link href={ route({ pathname: '/address/[hash]', query: { hash: addressHash, tab: 'token_transfers_cross_chain' } }) }>TBD</Link>
-        <TextSeparator color="border.divider"/>
-        Local <Link href={ route({ pathname: '/address/[hash]', query: { hash: addressHash, tab: 'token_transfers_local' } }) }>view by chain</Link>
-      </DetailedInfo.ItemValue>
-
-      <DetailedInfo.ItemLabel
-        hint="Block number in which the address was updated"
-        isLoading={ isLoading }
-      >
-        Last balance update
-      </DetailedInfo.ItemLabel>
-      <DetailedInfo.ItemValue>
-        Coming soon 🔜
+        <Skeleton loading={ isLoading }>
+          Local <Link href={ route({ pathname: '/address/[hash]', query: { hash: addressHash, tab: 'token_transfers_local' } }) }>view by chain</Link>
+        </Skeleton>
       </DetailedInfo.ItemValue>
 
       <DetailedInfoSponsoredItem isLoading={ isLoading }/>
diff --git a/ui/optimismSuperchain/address/OpSuperchainAddressInternalTxs.tsx b/ui/optimismSuperchain/address/OpSuperchainAddressInternalTxs.tsx
index 1110ed45d2..1c5f81621e 100644
--- a/ui/optimismSuperchain/address/OpSuperchainAddressInternalTxs.tsx
+++ b/ui/optimismSuperchain/address/OpSuperchainAddressInternalTxs.tsx
@@ -1,6 +1,9 @@
 import { Box } from '@chakra-ui/react';
 import React from 'react';
 
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+
+import multichainConfig from 'configs/multichain';
 import { MultichainProvider } from 'lib/contexts/multichain';
 import { apos } from 'toolkit/utils/htmlEntities';
 import AddressCsvExportLink from 'ui/address/AddressCsvExportLink';
@@ -8,17 +11,39 @@ import AddressTxsFilter from 'ui/address/AddressTxsFilter';
 import useAddressInternalTxsQuery from 'ui/address/useAddressInternalTxsQuery';
 import InternalTxsList from 'ui/internalTxs/InternalTxsList';
 import InternalTxsTable from 'ui/internalTxs/InternalTxsTable';
+import ChainSelect from 'ui/optimismSuperchain/components/ChainSelect';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
-import ChainSelect from 'ui/shared/multichain/ChainSelect';
 import Pagination from 'ui/shared/pagination/Pagination';
 
-const OpSuperchainAddressInternalTxs = () => {
-  const { hash, query, filterValue, onFilterChange } = useAddressInternalTxsQuery({ enabled: true, isMultichain: true });
-  const { data, isPlaceholderData, isError, pagination } = query;
+import getAvailableChainIds from './getAvailableChainIds';
+
+interface Props {
+  addressData: multichain.GetAddressResponse | undefined;
+  isLoading: boolean;
+}
+
+const OpSuperchainAddressInternalTxs = ({ addressData, isLoading }: Props) => {
+  const chainIds = React.useMemo(() => getAvailableChainIds(addressData), [ addressData ]);
+
+  const { hash, query, filterValue, onFilterChange } = useAddressInternalTxsQuery({
+    enabled: !isLoading && chainIds.length > 0,
+    isMultichain: true,
+    chainIds,
+  });
+  const { data, isPlaceholderData, isError, pagination, chainValue, onChainValueChange } = query;
+
+  const chainData = React.useMemo(() => {
+    const config = multichainConfig();
+    return config?.chains.find(({ id }) => id === chainValue?.[0]);
+  }, [ chainValue ]);
+
+  if (chainIds.length === 0) {
+    return <p>There are no internal transactions.</p>;
+  }
 
   const content = data?.items ? (
-    <MultichainProvider chainSlug={ query.chainValue?.[0] }>
+    <MultichainProvider chainId={ chainValue?.[0] }>
       <Box hideFrom="lg">
         <InternalTxsList data={ data.items } currentAddress={ hash } isLoading={ isPlaceholderData }/>
       </Box>
@@ -38,8 +63,9 @@ const OpSuperchainAddressInternalTxs = () => {
       />
       <ChainSelect
         loading={ pagination.isLoading }
-        value={ query.chainValue }
-        onValueChange={ query.onChainValueChange }
+        value={ chainValue }
+        onValueChange={ onChainValueChange }
+        chainIds={ chainIds }
         ml={ 2 }
       />
       <AddressCsvExportLink
@@ -47,6 +73,7 @@ const OpSuperchainAddressInternalTxs = () => {
         isLoading={ pagination.isLoading }
         params={{ type: 'internal-transactions', filterType: 'address', filterValue }}
         ml={{ base: 2, lg: 'auto' }}
+        chainData={ chainData }
       />
       <Pagination ml={{ base: 'auto', lg: 8 }} { ...pagination }/>
     </ActionBar>
@@ -57,7 +84,7 @@ const OpSuperchainAddressInternalTxs = () => {
       isError={ isError }
       itemsNum={ data?.items.length }
       filterProps={{ emptyFilteredText: `Couldn${ apos }t find any transaction that matches your query.`, hasActiveFilters: Boolean(filterValue) }}
-      emptyText="There are no internal transactions for this address."
+      emptyText="There are no internal transactions."
       showActionBarIfEmpty
       showActionBarIfError
       actionBar={ actionBar }
diff --git a/ui/optimismSuperchain/address/OpSuperchainAddressLogs.tsx b/ui/optimismSuperchain/address/OpSuperchainAddressLogs.tsx
index d2511fd036..cf0817b5d9 100644
--- a/ui/optimismSuperchain/address/OpSuperchainAddressLogs.tsx
+++ b/ui/optimismSuperchain/address/OpSuperchainAddressLogs.tsx
@@ -1,21 +1,31 @@
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+
 import multichainConfig from 'configs/multichain';
 import { MultichainProvider } from 'lib/contexts/multichain';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { LOG } from 'stubs/log';
 import { generateListStub } from 'stubs/utils';
 import AddressCsvExportLink from 'ui/address/AddressCsvExportLink';
+import ChainSelect from 'ui/optimismSuperchain/components/ChainSelect';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import LogItem from 'ui/shared/logs/LogItem';
-import ChainSelect from 'ui/shared/multichain/ChainSelect';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
-const OpSuperchainAddressLogs = () => {
+import getAvailableChainIds from './getAvailableChainIds';
+
+interface Props {
+  addressData: multichain.GetAddressResponse | undefined;
+  isLoading: boolean;
+}
+
+const OpSuperchainAddressLogs = ({ addressData, isLoading }: Props) => {
   const router = useRouter();
+  const chainIds = React.useMemo(() => getAvailableChainIds(addressData), [ addressData ]);
 
   const hash = getQueryParamString(router.query.hash);
   const { data, isPlaceholderData, isError, pagination, chainValue, onChainValueChange } = useQueryWithPages({
@@ -28,23 +38,31 @@ const OpSuperchainAddressLogs = () => {
         items_count: 50,
         transaction_index: 23,
       } }),
+      enabled: !isLoading,
     },
     isMultichain: true,
+    chainIds,
   });
 
-  const chainData = multichainConfig()?.chains.find(chain => chain.slug === chainValue?.[0]);
+  const chainData = React.useMemo(() => {
+    const config = multichainConfig();
+    return config?.chains.find(({ id }) => id === chainValue?.[0]);
+  }, [ chainValue ]);
 
   const actionBar = (
     <ActionBar mt={ -6 } showShadow>
       <ChainSelect
         value={ chainValue }
         onValueChange={ onChainValueChange }
+        chainIds={ chainIds }
+        loading={ isLoading }
       />
       <AddressCsvExportLink
         address={ hash }
         isLoading={ pagination.isLoading }
         params={{ type: 'logs' }}
         ml={{ base: 2, lg: 'auto' }}
+        chainData={ chainData }
       />
       <Pagination ml={{ base: 'auto', lg: 8 }} { ...pagination }/>
     </ActionBar>
@@ -68,7 +86,7 @@ const OpSuperchainAddressLogs = () => {
       showActionBarIfEmpty
       actionBar={ actionBar }
     >
-      <MultichainProvider chainSlug={ chainValue?.[0] }>
+      <MultichainProvider chainId={ chainValue?.[0] }>
         { content }
       </MultichainProvider>
     </DataListDisplay>
diff --git a/ui/optimismSuperchain/address/OpSuperchainAddressTokenTransfers.pw.tsx b/ui/optimismSuperchain/address/OpSuperchainAddressTokenTransfers.pw.tsx
index a2c5579565..8a948fb3d9 100644
--- a/ui/optimismSuperchain/address/OpSuperchainAddressTokenTransfers.pw.tsx
+++ b/ui/optimismSuperchain/address/OpSuperchainAddressTokenTransfers.pw.tsx
@@ -2,7 +2,6 @@ import { Box } from '@chakra-ui/react';
 import type { Locator } from '@playwright/test';
 import React from 'react';
 
-import getIconUrl from 'lib/multichain/getIconUrl';
 import * as countersMock from 'mocks/address/counters';
 import * as opSuperchainMock from 'mocks/multichain/opSuperchain';
 import * as tokenTransferMock from 'mocks/tokens/tokenTransfer';
@@ -37,11 +36,11 @@ test.describe('local transfers', () => {
       countersMock.forAddress,
       { pathParams: { hash: CURRENT_ADDRESS }, chainConfig: opSuperchainMock.chainDataA },
     );
-    await mockAssetResponse(getIconUrl(opSuperchainMock.chainDataA) as string, './playwright/mocks/image_s.jpg');
+    await mockAssetResponse(opSuperchainMock.chainDataA.logo as string, './playwright/mocks/image_s.jpg');
 
     component = await render(
       <Box pt={{ base: '134px', lg: 6 }}>
-        <OpSuperchainAddressTokenTransfers/>
+        <OpSuperchainAddressTokenTransfers addressData={ opSuperchainMock.addressA } isLoading={ false }/>
       </Box>,
       { hooksConfig },
       { withSocket: true },
diff --git a/ui/optimismSuperchain/address/OpSuperchainAddressTokenTransfers.tsx b/ui/optimismSuperchain/address/OpSuperchainAddressTokenTransfers.tsx
index 44821f798e..be89aeae7f 100644
--- a/ui/optimismSuperchain/address/OpSuperchainAddressTokenTransfers.tsx
+++ b/ui/optimismSuperchain/address/OpSuperchainAddressTokenTransfers.tsx
@@ -2,6 +2,7 @@ import { HStack } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import type * as multichain from '@blockscout/multichain-aggregator-types';
 import type { TabItemRegular } from 'toolkit/components/AdaptiveTabs/types';
 
 import multichainConfig from 'configs/multichain';
@@ -15,11 +16,13 @@ import AddressAdvancedFilterLink from 'ui/address/AddressAdvancedFilterLink';
 import AddressCsvExportLink from 'ui/address/AddressCsvExportLink';
 import useAddressTokenTransfersQuery from 'ui/address/useAddressTokenTransfersQuery';
 import useAddressCountersQuery from 'ui/address/utils/useAddressCountersQuery';
-import ChainSelect from 'ui/shared/multichain/ChainSelect';
+import ChainSelect from 'ui/optimismSuperchain/components/ChainSelect';
+import ComingSoon from 'ui/shared/ComingSoon';
 import Pagination from 'ui/shared/pagination/Pagination';
 import TokenTransferFilter from 'ui/shared/TokenTransfer/TokenTransferFilter';
 
 import ListCounterText from '../components/ListCounterText';
+import getAvailableChainIds from './getAvailableChainIds';
 import TokenTransfersLocal from './tokenTransfers/TokenTransfersLocal';
 
 export const ADDRESS_OP_SUPERCHAIN_TOKEN_TRANSFERS_TAB_IDS = [ 'token_transfers_cross_chain' as const, 'token_transfers_local' as const ];
@@ -36,35 +39,43 @@ const TAB_LIST_PROPS = {
   marginTop: -6,
 };
 
-const OpSuperchainAddressTokenTransfers = () => {
+interface Props {
+  addressData: multichain.GetAddressResponse | undefined;
+  isLoading: boolean;
+}
+
+const OpSuperchainAddressTokenTransfers = ({ addressData, isLoading }: Props) => {
   const router = useRouter();
   const isMobile = useIsMobile();
 
   const hash = getQueryParamString(router.query.hash);
-  const tab = getQueryParamString(router.query.tab) as typeof ADDRESS_OP_SUPERCHAIN_TOKEN_TRANSFERS_TAB_IDS[number] | undefined;
-  const isLocalTab = tab === 'token_transfers_local';
+  const tab = getQueryParamString(router.query.tab) as typeof ADDRESS_OP_SUPERCHAIN_TOKEN_TRANSFERS_TAB_IDS[number] | 'token_transfers' | undefined;
+  const isLocalTab = tab === 'token_transfers_local' || tab === 'token_transfers';
+
+  const chainIds = React.useMemo(() => getAvailableChainIds(addressData), [ addressData ]);
 
   const transfersQueryLocal = useAddressTokenTransfersQuery({
     currentAddress: hash,
-    enabled: isLocalTab,
+    enabled: isLocalTab && !isLoading && chainIds.length > 0,
     isMultichain: true,
+    chainIds,
   });
 
-  const chainSlug = transfersQueryLocal.query.chainValue?.[0];
-  const chainData = multichainConfig()?.chains.find(chain => chain.slug === chainSlug);
+  const chainId = transfersQueryLocal.query.chainValue?.[0];
+  const chainData = multichainConfig()?.chains.find(chain => chain.id === chainId);
 
   const countersQueryLocal = useAddressCountersQuery({
     hash,
     isLoading: transfersQueryLocal.query.isPlaceholderData,
-    isEnabled: isLocalTab,
-    chainSlug,
+    isEnabled: isLocalTab && !isLoading && chainIds.length > 0,
+    chain: chainData,
   });
 
   const countersText = (() => {
     if (isLocalTab) {
       return (
         <ListCounterText
-          key={ chainSlug }
+          key={ chainId }
           value={ countersQueryLocal.data?.token_transfers_count }
           isLoading={ countersQueryLocal.isPlaceholderData || transfersQueryLocal.query.isPlaceholderData }
           type="transfer"
@@ -77,11 +88,16 @@ const OpSuperchainAddressTokenTransfers = () => {
 
   const rightSlot = (() => {
     if (isLocalTab) {
+      if (chainIds.length === 0) {
+        return null;
+      }
+
       const chainSelect = (
         <ChainSelect
           loading={ transfersQueryLocal.query.pagination.isLoading }
           value={ transfersQueryLocal.query.chainValue }
           onValueChange={ transfersQueryLocal.query.onChainValueChange }
+          chainIds={ chainIds }
         />
       );
 
@@ -101,11 +117,7 @@ const OpSuperchainAddressTokenTransfers = () => {
               defaultAddressFilter={ transfersQueryLocal.filters.filter }
               isLoading={ transfersQueryLocal.query.isPlaceholderData }
             />
-            <ChainSelect
-              loading={ transfersQueryLocal.query.pagination.isLoading }
-              value={ transfersQueryLocal.query.chainValue }
-              onValueChange={ transfersQueryLocal.query.onChainValueChange }
-            />
+            { chainSelect }
             { countersText }
           </HStack>
           <HStack gap={ 6 }>
@@ -135,14 +147,14 @@ const OpSuperchainAddressTokenTransfers = () => {
     {
       id: 'token_transfers_cross_chain',
       title: 'Cross-chain',
-      component: <div>Coming soon 🔜</div>,
+      component: <ComingSoon/>,
     },
     {
-      id: 'token_transfers_local',
+      id: [ 'token_transfers_local', 'token_transfers' ],
       title: 'Local',
-      component: (
-        <MultichainProvider chainSlug={ transfersQueryLocal.query.chainValue?.[0] }>
-          <SocketProvider url={ getSocketUrl(chainData?.config) }>
+      component: chainIds.length > 0 ? (
+        <MultichainProvider chainId={ transfersQueryLocal.query.chainValue?.[0] }>
+          <SocketProvider url={ getSocketUrl(chainData?.app_config) }>
             { isMobile && countersText }
             <TokenTransfersLocal
               query={ transfersQueryLocal.query }
@@ -153,7 +165,7 @@ const OpSuperchainAddressTokenTransfers = () => {
             />
           </SocketProvider>
         </MultichainProvider>
-      ),
+      ) : <p>There are no token transfers.</p>,
     },
   ];
 
@@ -162,6 +174,8 @@ const OpSuperchainAddressTokenTransfers = () => {
       variant="secondary"
       size="sm"
       tabs={ tabs }
+      isLoading={ isLoading }
+      defaultTabId="token_transfers_local"
       rightSlot={ rightSlot }
       rightSlotProps={ TABS_RIGHT_SLOT_PROPS }
       listProps={ isMobile ? undefined : TAB_LIST_PROPS }
diff --git a/ui/optimismSuperchain/address/OpSuperchainAddressTokens.pw.tsx b/ui/optimismSuperchain/address/OpSuperchainAddressTokens.pw.tsx
index 28865daeff..1bb940ffb1 100644
--- a/ui/optimismSuperchain/address/OpSuperchainAddressTokens.pw.tsx
+++ b/ui/optimismSuperchain/address/OpSuperchainAddressTokens.pw.tsx
@@ -1,8 +1,6 @@
-import { Box } from '@chakra-ui/react';
 import type { Locator } from '@playwright/test';
 import React from 'react';
 
-import getIconUrl from 'lib/multichain/getIconUrl';
 import * as tokensMock from 'mocks/address/tokens';
 import * as opSuperchainMock from 'mocks/multichain/opSuperchain';
 import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
@@ -13,6 +11,68 @@ import OpSuperchainAddressTokens from './OpSuperchainAddressTokens';
 
 const CURRENT_ADDRESS = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859';
 
+test.beforeEach(async({ mockApiResponse, mockMultichainConfig, mockEnvs }) => {
+  await mockApiResponse('multichainAggregator:address', opSuperchainMock.addressA, { pathParams: { hash: CURRENT_ADDRESS } });
+  await mockApiResponse('multichainAggregator:address_tokens', {
+    items: [ opSuperchainMock.tokenA ],
+    next_page_params: undefined,
+  }, { pathParams: { hash: CURRENT_ADDRESS }, queryParams: { type: 'ERC-20' } });
+  await mockApiResponse('multichainAggregator:address_tokens', {
+    items: [ ],
+    next_page_params: undefined,
+  }, { pathParams: { hash: CURRENT_ADDRESS }, queryParams: { type: 'ERC-721' } });
+  await mockApiResponse('multichainAggregator:address_tokens', {
+    items: [ ],
+    next_page_params: undefined,
+  }, { pathParams: { hash: CURRENT_ADDRESS }, queryParams: { type: 'ERC-1155' } });
+  await mockApiResponse('multichainAggregator:address_tokens', {
+    items: [ ],
+    next_page_params: undefined,
+  }, { pathParams: { hash: CURRENT_ADDRESS }, queryParams: { type: 'ERC-404' } });
+  await mockMultichainConfig();
+  await mockEnvs(ENVS_MAP.opSuperchain);
+});
+
+test.describe('tokens', () => {
+  const hooksConfig = {
+    router: {
+      query: { hash: CURRENT_ADDRESS, tab: 'tokens_erc20' },
+    },
+  };
+  let component: Locator;
+
+  test.beforeEach(async({ render, mockAssetResponse }) => {
+    await mockAssetResponse(opSuperchainMock.chainDataA.logo as string, './playwright/mocks/image_s.jpg');
+    await mockAssetResponse(opSuperchainMock.chainDataB.logo as string, './playwright/mocks/image_md.jpg');
+
+    component = await render(
+      <OpSuperchainAddressTokens addressData={ opSuperchainMock.addressA }/>,
+      { hooksConfig },
+    );
+  });
+
+  test('base view', async({ page }) => {
+    await expect(component).toHaveScreenshot();
+
+    await component.getByText('By chain').nth(0).click();
+    await expect(page.locator('div[data-scope="popover"][data-part="content"]')).toHaveScreenshot();
+
+    await component.getByText('By chain').nth(1).click();
+    await expect(page.locator('div[data-scope="popover"][data-part="content"]')).toHaveScreenshot();
+
+    await component.getByText('By chain').nth(2).click();
+    await expect(page.locator('div[data-scope="popover"][data-part="content"]')).toHaveScreenshot();
+  });
+
+  test.describe('mobile', () => {
+    test.use({ viewport: pwConfig.viewport.mobile });
+
+    test('base view', async() => {
+      await expect(component).toHaveScreenshot();
+    });
+  });
+});
+
 test.describe('nfts', () => {
   const hooksConfig = {
     router: {
@@ -21,20 +81,16 @@ test.describe('nfts', () => {
   };
   let component: Locator;
 
-  test.beforeEach(async({ render, mockMultichainConfig, mockEnvs, mockApiResponse, mockAssetResponse }) => {
-    await mockMultichainConfig();
-    await mockEnvs(ENVS_MAP.opSuperchain);
+  test.beforeEach(async({ render, mockApiResponse, mockAssetResponse }) => {
     await mockApiResponse(
       'general:address_collections',
       { ...tokensMock.collections, items: [ tokensMock.collections.items[2] ] },
       { pathParams: { hash: CURRENT_ADDRESS }, queryParams: { type: [] }, chainConfig: opSuperchainMock.chainDataA },
     );
-    await mockAssetResponse(getIconUrl(opSuperchainMock.chainDataA) as string, './playwright/mocks/image_s.jpg');
+    await mockAssetResponse(opSuperchainMock.chainDataA.logo as string, './playwright/mocks/image_s.jpg');
 
     component = await render(
-      <Box pt={{ base: '134px', lg: 6 }}>
-        <OpSuperchainAddressTokens/>
-      </Box>,
+      <OpSuperchainAddressTokens addressData={ opSuperchainMock.addressA }/>,
       { hooksConfig },
     );
   });
diff --git a/ui/optimismSuperchain/address/OpSuperchainAddressTokens.tsx b/ui/optimismSuperchain/address/OpSuperchainAddressTokens.tsx
index 7f7cf2201e..bcdbb4236e 100644
--- a/ui/optimismSuperchain/address/OpSuperchainAddressTokens.tsx
+++ b/ui/optimismSuperchain/address/OpSuperchainAddressTokens.tsx
@@ -2,25 +2,34 @@ import { Box, HStack } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import type * as multichain from '@blockscout/multichain-aggregator-types';
 import type { TabItemRegular } from 'toolkit/components/AdaptiveTabs/types';
 
 import { MultichainProvider } from 'lib/contexts/multichain';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import getQueryParamString from 'lib/router/getQueryParamString';
+import { TOKEN } from 'stubs/optimismSuperchain';
+import { generateListStub } from 'stubs/utils';
 import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
 import AddressCollections from 'ui/address/tokens/AddressCollections';
 import AddressNftDisplayTypeRadio from 'ui/address/tokens/AddressNftDisplayTypeRadio';
 import AddressNFTs from 'ui/address/tokens/AddressNFTs';
 import AddressNftTypeFilter from 'ui/address/tokens/AddressNftTypeFilter';
+import ERC20Tokens from 'ui/address/tokens/ERC20Tokens';
 import useAddressNftQuery from 'ui/address/tokens/useAddressNftQuery';
-import ChainSelect from 'ui/shared/multichain/ChainSelect';
+import ChainSelect from 'ui/optimismSuperchain/components/ChainSelect';
 import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+
+import getAvailableChainIds from './getAvailableChainIds';
+import OpSuperchainTokenBalances from './tokens/OpSuperchainTokenBalances';
+import useChainSelectErc20 from './useChainSelectErc20';
 
 export const ADDRESS_OP_SUPERCHAIN_TOKENS_TAB_IDS = [ 'tokens_erc20' as const, 'tokens_nfts' as const ];
 const TABS_RIGHT_SLOT_PROPS = {
   display: 'flex',
   justifyContent: { base: 'flex-end', lg: 'flex-start' },
-  ml: { base: 0, lg: 8 },
+  ml: { base: 0, lg: 6 },
   widthAllocation: 'available' as const,
 };
 const TAB_LIST_PROPS = {
@@ -30,14 +39,34 @@ const TAB_LIST_PROPS = {
   marginTop: -6,
 };
 
-const OpSuperchainAddressTokens = () => {
+interface Props {
+  addressData: multichain.GetAddressResponse | undefined;
+}
+
+const OpSuperchainAddressTokens = ({ addressData }: Props) => {
+  const chainIds = React.useMemo(() => getAvailableChainIds(addressData), [ addressData ]);
+
   const scrollRef = React.useRef<HTMLDivElement>(null);
 
   const isMobile = useIsMobile();
   const router = useRouter();
 
-  const tab = getQueryParamString(router.query.tab) as typeof ADDRESS_OP_SUPERCHAIN_TOKENS_TAB_IDS[number] | undefined;
+  const tab = getQueryParamString(router.query.tab) as typeof ADDRESS_OP_SUPERCHAIN_TOKENS_TAB_IDS[number] | 'tokens' | undefined;
   const hash = getQueryParamString(router.query.hash);
+  const [ chainSelectErc20Value, setChainSelectErc20Value ] = useChainSelectErc20({ chainIds });
+
+  const chainId = chainSelectErc20Value?.filter(Boolean);
+
+  const erc20Query = useQueryWithPages({
+    resourceName: 'multichainAggregator:address_tokens',
+    pathParams: { hash },
+    filters: chainId?.length ? { type: 'ERC-20', chain_id: chainId.includes('all') ? undefined : chainId.filter(Boolean) } : { type: 'ERC-20' },
+    scrollRef,
+    options: {
+      enabled: (tab === 'tokens' || tab === 'tokens_erc20'),
+      placeholderData: generateListStub<'multichainAggregator:address_tokens'>(TOKEN, 10, { next_page_params: undefined }),
+    },
+  });
 
   const { nftsQuery, collectionsQuery, displayType: nftDisplayType, tokenTypes: nftTokenTypes, onDisplayTypeChange, onTokenTypesChange } = useAddressNftQuery({
     scrollRef,
@@ -46,6 +75,11 @@ const OpSuperchainAddressTokens = () => {
     isMultichain: true,
   });
 
+  const handelChainSelectErc20ValueChange = React.useCallback(({ value }: { value: Array<string> }) => {
+    erc20Query.onFilterChange({ chain_id: value.includes('all') ? undefined : value.filter(Boolean) });
+    setChainSelectErc20Value(value);
+  }, [ setChainSelectErc20Value, erc20Query ]);
+
   const hasActiveFilters = (() => {
     if (tab === 'tokens_nfts') {
       return Boolean(nftTokenTypes?.length);
@@ -84,24 +118,43 @@ const OpSuperchainAddressTokens = () => {
       );
     }
 
-    return null;
+    return (
+      <>
+        <ChainSelect
+          loading={ erc20Query.pagination.isLoading }
+          value={ chainSelectErc20Value }
+          onValueChange={ handelChainSelectErc20ValueChange }
+          chainIds={ chainIds }
+          withAllOption
+        />
+        { erc20Query.pagination.isVisible && !isMobile && <Pagination { ...erc20Query.pagination } ml="auto"/> }
+      </>
+    );
   })();
 
   const tabs: Array<TabItemRegular> = [
     {
       id: 'tokens_erc20',
       title: 'ERC-20',
-      component: <div>Coming soon 🔜</div>,
+      component: (
+        <ERC20Tokens
+          items={ erc20Query.data?.items }
+          isLoading={ erc20Query.isPlaceholderData }
+          pagination={ erc20Query.pagination }
+          isError={ erc20Query.isError }
+          top={ erc20Query.pagination.isVisible ? 68 : 0 }
+        />
+      ),
     },
     {
       id: 'tokens_nfts',
       title: 'NFT',
       component: nftDisplayType === 'list' ? (
-        <MultichainProvider chainSlug={ nftsQuery.chainValue?.[0] }>
+        <MultichainProvider chainId={ nftsQuery.chainValue?.[0] }>
           <AddressNFTs tokensQuery={ nftsQuery } tokenTypes={ nftTokenTypes } onTokenTypesChange={ onTokenTypesChange }/>
         </MultichainProvider>
       ) : (
-        <MultichainProvider chainSlug={ collectionsQuery.chainValue?.[0] }>
+        <MultichainProvider chainId={ collectionsQuery.chainValue?.[0] }>
           <AddressCollections collectionsQuery={ collectionsQuery } address={ hash } tokenTypes={ nftTokenTypes } onTokenTypesChange={ onTokenTypesChange }/>
         </MultichainProvider>
       ),
@@ -110,6 +163,7 @@ const OpSuperchainAddressTokens = () => {
 
   return (
     <>
+      <OpSuperchainTokenBalances/>
       <Box ref={ scrollRef }/>
       <RoutedTabs
         variant="secondary"
diff --git a/ui/optimismSuperchain/address/OpSuperchainAddressTxs.pw.tsx b/ui/optimismSuperchain/address/OpSuperchainAddressTxs.pw.tsx
index 09621d8ca3..2a35665f70 100644
--- a/ui/optimismSuperchain/address/OpSuperchainAddressTxs.pw.tsx
+++ b/ui/optimismSuperchain/address/OpSuperchainAddressTxs.pw.tsx
@@ -2,7 +2,6 @@ import { Box } from '@chakra-ui/react';
 import type { Locator } from '@playwright/test';
 import React from 'react';
 
-import getIconUrl from 'lib/multichain/getIconUrl';
 import * as countersMock from 'mocks/address/counters';
 import * as opSuperchainMock from 'mocks/multichain/opSuperchain';
 import * as txMock from 'mocks/txs/tx';
@@ -37,11 +36,11 @@ test.describe('local txs', () => {
       countersMock.forContract,
       { pathParams: { hash: CURRENT_ADDRESS }, chainConfig: opSuperchainMock.chainDataA },
     );
-    await mockAssetResponse(getIconUrl(opSuperchainMock.chainDataA) as string, './playwright/mocks/image_s.jpg');
+    await mockAssetResponse(opSuperchainMock.chainDataA.logo as string, './playwright/mocks/image_s.jpg');
 
     component = await render(
       <Box pt={{ base: '134px', lg: 6 }}>
-        <OpSuperchainAddressTxs/>
+        <OpSuperchainAddressTxs addressData={ opSuperchainMock.addressA } isLoading={ false }/>
       </Box>,
       { hooksConfig },
       { withSocket: true },
diff --git a/ui/optimismSuperchain/address/OpSuperchainAddressTxs.tsx b/ui/optimismSuperchain/address/OpSuperchainAddressTxs.tsx
index 3078e97346..0380a33f8c 100644
--- a/ui/optimismSuperchain/address/OpSuperchainAddressTxs.tsx
+++ b/ui/optimismSuperchain/address/OpSuperchainAddressTxs.tsx
@@ -2,30 +2,28 @@ import { HStack } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import type * as multichain from '@blockscout/multichain-aggregator-types';
 import type { TabItemRegular } from 'toolkit/components/AdaptiveTabs/types';
 
 import multichainConfig from 'configs/multichain';
 import getSocketUrl from 'lib/api/getSocketUrl';
-import useApiQuery from 'lib/api/useApiQuery';
 import { MultichainProvider } from 'lib/contexts/multichain';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { SocketProvider } from 'lib/socket/context';
-import { INTEROP_MESSAGE } from 'stubs/optimismSuperchain';
-import { generateListStub } from 'stubs/utils';
 import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
 import AddressCsvExportLink from 'ui/address/AddressCsvExportLink';
 import AddressTxsFilter from 'ui/address/AddressTxsFilter';
 import useAddressTxsQuery from 'ui/address/useAddressTxsQuery';
 import useAddressCountersQuery from 'ui/address/utils/useAddressCountersQuery';
+import ChainSelect from 'ui/optimismSuperchain/components/ChainSelect';
 import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
-import ChainSelect from 'ui/shared/multichain/ChainSelect';
+import ComingSoon from 'ui/shared/ComingSoon';
 import Pagination from 'ui/shared/pagination/Pagination';
-import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import TxsWithAPISorting from 'ui/txs/TxsWithAPISorting';
 
 import ListCounterText from '../components/ListCounterText';
-import CrossChainTxs from '../crossChainTxs/CrossChainTxs';
+import getAvailableChainIds from './getAvailableChainIds';
 
 export const ADDRESS_OP_SUPERCHAIN_TXS_TAB_IDS = [ 'txs_cross_chain' as const, 'txs_local' as const ];
 const TAB_LIST_PROPS = {
@@ -41,46 +39,36 @@ const TABS_RIGHT_SLOT_PROPS = {
   widthAllocation: 'available' as const,
 };
 
-const OpSuperchainAddressTxs = () => {
+interface Props {
+  addressData: multichain.GetAddressResponse | undefined;
+  isLoading: boolean;
+}
+
+const OpSuperchainAddressTxs = ({ addressData, isLoading }: Props) => {
   const router = useRouter();
   const isMobile = useIsMobile();
 
   const hash = getQueryParamString(router.query.hash);
   const tab = getQueryParamString(router.query.tab) as typeof ADDRESS_OP_SUPERCHAIN_TXS_TAB_IDS[number] | 'txs' | undefined;
-  const isLocalTab = tab === 'txs_local';
+  const isLocalTab = tab === 'txs_local' || tab === 'txs';
 
-  const txsQueryCrossChain = useQueryWithPages({
-    resourceName: 'multichain:interop_messages',
-    filters: {
-      address: hash,
-    },
-    options: {
-      placeholderData: generateListStub<'multichain:interop_messages'>(INTEROP_MESSAGE, 50, { next_page_params: undefined }),
-      enabled: !isLocalTab,
-    },
-  });
+  const chainIds = React.useMemo(() => getAvailableChainIds(addressData), [ addressData ]);
 
   const txsQueryLocal = useAddressTxsQuery({
     addressHash: hash,
-    enabled: isLocalTab,
+    enabled: !isLoading && isLocalTab && chainIds.length > 0,
     isMultichain: true,
+    chainIds,
   });
 
-  const chainSlug = txsQueryLocal.query.chainValue?.[0];
-  const chainData = multichainConfig()?.chains.find(chain => chain.slug === chainSlug);
-
-  const countersQueryCrossChain = useApiQuery('multichain:interop_messages_count', {
-    queryOptions: {
-      placeholderData: { count: 420 },
-      enabled: !isLocalTab,
-    },
-  });
+  const chainId = txsQueryLocal.query.chainValue?.[0];
+  const chainData = multichainConfig()?.chains.find(chain => chain.id === chainId);
 
   const countersQueryLocal = useAddressCountersQuery({
     hash,
-    isLoading: txsQueryLocal.query.isPlaceholderData,
-    isEnabled: isLocalTab,
-    chainSlug,
+    isLoading: txsQueryLocal.query.isPlaceholderData || isLoading,
+    isEnabled: !isLoading && isLocalTab && chainIds.length > 0,
+    chain: chainData,
   });
 
   const txsLocalFilter = isLocalTab ? (
@@ -96,7 +84,7 @@ const OpSuperchainAddressTxs = () => {
     if (isLocalTab) {
       return (
         <ListCounterText
-          key={ chainSlug }
+          key={ chainId }
           value={ countersQueryLocal.data?.transactions_count }
           isLoading={ countersQueryLocal.isPlaceholderData || txsQueryLocal.query.isPlaceholderData }
           type="transaction"
@@ -104,13 +92,7 @@ const OpSuperchainAddressTxs = () => {
       );
     }
 
-    return (
-      <ListCounterText
-        value={ countersQueryCrossChain.data?.count?.toString() }
-        isLoading={ countersQueryCrossChain.isPlaceholderData }
-        type="transaction"
-      />
-    );
+    return null;
   })();
 
   const chainSelect = (
@@ -118,11 +100,16 @@ const OpSuperchainAddressTxs = () => {
       loading={ txsQueryLocal.query.pagination.isLoading }
       value={ txsQueryLocal.query.chainValue }
       onValueChange={ txsQueryLocal.query.onChainValueChange }
+      chainIds={ chainIds }
     />
   );
 
   const rightSlot = (() => {
     if (isLocalTab) {
+      if (chainIds.length === 0) {
+        return null;
+      }
+
       if (isMobile) {
         return chainSelect;
       }
@@ -147,38 +134,21 @@ const OpSuperchainAddressTxs = () => {
       );
     }
 
-    if (isMobile) {
-      return null;
-    }
-
-    return (
-      <HStack gap={ 2 } w="100%">
-        { countersText }
-        <Pagination { ...txsQueryCrossChain.pagination } ml="auto"/>
-      </HStack>
-    );
+    return null;
   })();
 
   const tabs: Array<TabItemRegular> = [
     {
       id: 'txs_cross_chain',
       title: 'Cross-chain',
-      component: (
-        <CrossChainTxs
-          items={ txsQueryCrossChain.data?.items }
-          isLoading={ txsQueryCrossChain.isPlaceholderData }
-          isError={ txsQueryCrossChain.isError }
-          tableHeaderTop={ ACTION_BAR_HEIGHT_DESKTOP }
-          currentAddress={ hash }
-        />
-      ),
+      component: <ComingSoon/>,
     },
     {
-      id: 'txs_local',
+      id: [ 'txs_local', 'txs' ],
       title: 'Local',
-      component: (
-        <SocketProvider url={ getSocketUrl(chainData?.config) }>
-          <MultichainProvider chainSlug={ txsQueryLocal.query.chainValue?.[0] }>
+      component: chainIds.length > 0 ? (
+        <SocketProvider url={ getSocketUrl(chainData?.app_config) }>
+          <MultichainProvider chainId={ chainId }>
             { isMobile && countersText }
             <TxsWithAPISorting
               filter={ txsLocalFilter }
@@ -193,7 +163,7 @@ const OpSuperchainAddressTxs = () => {
             />
           </MultichainProvider>
         </SocketProvider>
-      ),
+      ) : <p>There are no transactions.</p>,
     },
   ];
 
@@ -202,6 +172,7 @@ const OpSuperchainAddressTxs = () => {
       variant="secondary"
       size="sm"
       tabs={ tabs }
+      defaultTabId="txs_local"
       rightSlot={ rightSlot }
       rightSlotProps={ TABS_RIGHT_SLOT_PROPS }
       listProps={ isMobile ? undefined : TAB_LIST_PROPS }
diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddress.pw.tsx_default_base-view-1.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddress.pw.tsx_default_base-view-1.png
new file mode 100644
index 0000000000..3952cbb714
Binary files /dev/null and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddress.pw.tsx_default_base-view-1.png differ
diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddress.pw.tsx_default_base-view-2.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddress.pw.tsx_default_base-view-2.png
new file mode 100644
index 0000000000..4130924627
Binary files /dev/null and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddress.pw.tsx_default_base-view-2.png differ
diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddress.pw.tsx_default_base-view-3.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddress.pw.tsx_default_base-view-3.png
new file mode 100644
index 0000000000..00324e2af6
Binary files /dev/null and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddress.pw.tsx_default_base-view-3.png differ
diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokenTransfers.pw.tsx_default_local-transfers-base-view-1.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokenTransfers.pw.tsx_default_local-transfers-base-view-1.png
index b9ea62eb5c..32ec515c73 100644
Binary files a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokenTransfers.pw.tsx_default_local-transfers-base-view-1.png and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokenTransfers.pw.tsx_default_local-transfers-base-view-1.png differ
diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokenTransfers.pw.tsx_default_local-transfers-mobile-base-view-1.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokenTransfers.pw.tsx_default_local-transfers-mobile-base-view-1.png
index ed4684c539..73e3a362c7 100644
Binary files a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokenTransfers.pw.tsx_default_local-transfers-mobile-base-view-1.png and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokenTransfers.pw.tsx_default_local-transfers-mobile-base-view-1.png differ
diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_nfts-base-view-1.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_nfts-base-view-1.png
index aba7a2da01..636f81f313 100644
Binary files a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_nfts-base-view-1.png and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_nfts-base-view-1.png differ
diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_nfts-mobile-base-view-1.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_nfts-mobile-base-view-1.png
index a37c5aa83d..cd53d5cfc8 100644
Binary files a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_nfts-mobile-base-view-1.png and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_nfts-mobile-base-view-1.png differ
diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-base-view-1.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-base-view-1.png
new file mode 100644
index 0000000000..330f62ac2a
Binary files /dev/null and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-base-view-1.png differ
diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-base-view-2.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-base-view-2.png
new file mode 100644
index 0000000000..99b507a2cd
Binary files /dev/null and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-base-view-2.png differ
diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-base-view-3.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-base-view-3.png
new file mode 100644
index 0000000000..3d1410b7f7
Binary files /dev/null and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-base-view-3.png differ
diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-base-view-4.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-base-view-4.png
new file mode 100644
index 0000000000..55fd85584d
Binary files /dev/null and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-base-view-4.png differ
diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-mobile-base-view-1.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-mobile-base-view-1.png
new file mode 100644
index 0000000000..a3dc70eb2b
Binary files /dev/null and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTokens.pw.tsx_default_tokens-mobile-base-view-1.png differ
diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTxs.pw.tsx_default_local-txs-base-view-1.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTxs.pw.tsx_default_local-txs-base-view-1.png
index 798eb20def..fd9a94ee38 100644
Binary files a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTxs.pw.tsx_default_local-txs-base-view-1.png and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTxs.pw.tsx_default_local-txs-base-view-1.png differ
diff --git a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTxs.pw.tsx_default_local-txs-mobile-base-view-1.png b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTxs.pw.tsx_default_local-txs-mobile-base-view-1.png
index 551a406669..9510481e99 100644
Binary files a/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTxs.pw.tsx_default_local-txs-mobile-base-view-1.png and b/ui/optimismSuperchain/address/__screenshots__/OpSuperchainAddressTxs.pw.tsx_default_local-txs-mobile-base-view-1.png differ
diff --git a/ui/optimismSuperchain/address/details/OpSuperchainAddressCoinBalance.tsx b/ui/optimismSuperchain/address/details/OpSuperchainAddressCoinBalance.tsx
new file mode 100644
index 0000000000..9716ce4fc1
--- /dev/null
+++ b/ui/optimismSuperchain/address/details/OpSuperchainAddressCoinBalance.tsx
@@ -0,0 +1,57 @@
+import { Flex, HStack } from '@chakra-ui/react';
+import React from 'react';
+
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+
+import multichainConfig from 'configs/multichain';
+import NativeTokenIcon from 'ui/optimismSuperchain/components/NativeTokenIcon';
+import CurrencyValue from 'ui/shared/CurrencyValue';
+
+import OpSuperchainAddressInfoBreakdown from './OpSuperchainAddressInfoBreakdown';
+
+interface Props {
+  data: multichain.GetAddressResponse | undefined;
+  isLoading: boolean;
+}
+
+const OpSuperchainAddressCoinBalance = ({ data, isLoading }: Props) => {
+
+  const chains = multichainConfig()?.chains;
+  const currency = chains?.[0]?.app_config.chain.currency;
+
+  return (
+    <Flex alignItems="center" columnGap={ 3 }>
+      <HStack>
+        <NativeTokenIcon boxSize={ 5 } isLoading={ isLoading }/>
+        <CurrencyValue
+          value={ data?.coin_balance || '0' }
+          exchangeRate={ data?.exchange_rate }
+          decimals={ currency ? String(currency.decimals) : undefined }
+          currency={ currency ? currency.symbol : undefined }
+          accuracyUsd={ 2 }
+          accuracy={ 8 }
+          alignItems="center"
+          isLoading={ isLoading }
+        />
+      </HStack>
+      <OpSuperchainAddressInfoBreakdown data={ data?.chain_infos } loading={ isLoading }>
+        { ([ chain, chainInfo ]) => {
+          return (
+            <CurrencyValue
+              isLoading={ isLoading }
+              value={ chainInfo.coin_balance }
+              exchangeRate={ data?.exchange_rate }
+              decimals={ chain.app_config.chain.currency.decimals.toString() }
+              currency={ chain.app_config.chain.currency.symbol }
+              accuracyUsd={ 2 }
+              accuracy={ 8 }
+              alignItems="center"
+            />
+          );
+        } }
+      </OpSuperchainAddressInfoBreakdown>
+    </Flex>
+  );
+};
+
+export default React.memo(OpSuperchainAddressCoinBalance);
diff --git a/ui/optimismSuperchain/address/details/OpSuperchainAddressContractName.tsx b/ui/optimismSuperchain/address/details/OpSuperchainAddressContractName.tsx
new file mode 100644
index 0000000000..084f989896
--- /dev/null
+++ b/ui/optimismSuperchain/address/details/OpSuperchainAddressContractName.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+
+import { route } from 'nextjs-routes';
+
+import * as contract from 'lib/multichain/contract';
+import shortenString from 'lib/shortenString';
+import { Badge } from 'toolkit/chakra/badge';
+import { Link } from 'toolkit/chakra/link';
+
+import OpSuperchainAddressInfoBreakdown from './OpSuperchainAddressInfoBreakdown';
+
+interface Props {
+  data: multichain.GetAddressResponse | undefined;
+  isLoading: boolean;
+}
+
+const OpSuperchainAddressContractName = ({ data, isLoading }: Props) => {
+  if (!data?.chain_infos) {
+    return null;
+  }
+
+  const contractName = contract.getName(data);
+
+  return (
+    <>
+      { contractName && <Link href={ route({ pathname: '/address/[hash]', query: { hash: data.hash, tab: 'contract' } }) }>{ contractName }</Link> }
+      <OpSuperchainAddressInfoBreakdown data={ data?.chain_infos } loading={ isLoading } ml={ 2 }>
+        { ([ , chainInfo ]) => {
+          const badge = (() => {
+            if (chainInfo.is_verified) {
+              return <Badge colorPalette="green" ml={ 2 }>Verified</Badge>;
+            }
+            return (
+              <Badge colorPalette="gray" ml={ 2 }>
+                { chainInfo.is_contract ? 'Non-verified' : 'Not a contract' }
+              </Badge>
+            );
+          })();
+
+          return (
+            <>
+              { chainInfo.contract_name || shortenString(data.hash) }
+              { badge }
+            </>
+          );
+        } }
+      </OpSuperchainAddressInfoBreakdown>
+    </>
+  );
+};
+
+export default React.memo(OpSuperchainAddressContractName);
diff --git a/ui/optimismSuperchain/address/details/OpSuperchainAddressInfoBreakdown.tsx b/ui/optimismSuperchain/address/details/OpSuperchainAddressInfoBreakdown.tsx
new file mode 100644
index 0000000000..41b6f55e0d
--- /dev/null
+++ b/ui/optimismSuperchain/address/details/OpSuperchainAddressInfoBreakdown.tsx
@@ -0,0 +1,65 @@
+import { Box, HStack, VStack } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ClusterChainConfig } from 'types/multichain';
+
+import multichainConfig from 'configs/multichain';
+import type { LinkProps } from 'toolkit/chakra/link';
+import { Link } from 'toolkit/chakra/link';
+import { PopoverBody, PopoverContent, PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
+import ChainIcon from 'ui/shared/externalChains/ChainIcon';
+
+interface Props<T> extends Omit<LinkProps, 'children'> {
+  data: Record<string, T> | undefined;
+  children: (data: [ ClusterChainConfig, T ]) => React.ReactNode;
+}
+
+const OpSuperchainAddressInfoBreakdown = <T,>({ data, children, ...rest }: Props<T>) => {
+  const chains = multichainConfig()?.chains;
+
+  if (!data || Object.keys(data).length === 0) {
+    return null;
+  }
+
+  return (
+    <PopoverRoot>
+      <PopoverTrigger>
+        <Link
+          variant="secondary"
+          textStyle="sm"
+          textDecorationLine="underline"
+          textDecorationStyle="dashed"
+          { ...rest }
+        >
+          By chain
+        </Link>
+      </PopoverTrigger>
+      <PopoverContent>
+        <PopoverBody display="flex" flexDirection="column" rowGap={ 3 }>
+          { Object.entries(data).map(([ chainId, chainInfo ]) => {
+
+            const chain = chains?.find((chain) => chain.id === chainId);
+
+            if (!chain) {
+              return null;
+            }
+
+            return (
+              <VStack key={ chainId } alignItems="flex-start">
+                <HStack>
+                  <ChainIcon data={ chain }/>
+                  <span>{ chain.name }</span>
+                </HStack>
+                <Box color="text.secondary" ml={ 7 }>
+                  { children([ chain, chainInfo ]) }
+                </Box>
+              </VStack>
+            );
+          }) }
+        </PopoverBody>
+      </PopoverContent>
+    </PopoverRoot>
+  );
+};
+
+export default React.memo(OpSuperchainAddressInfoBreakdown) as typeof OpSuperchainAddressInfoBreakdown;
diff --git a/ui/optimismSuperchain/address/details/OpSuperchainAddressNetWorth.tsx b/ui/optimismSuperchain/address/details/OpSuperchainAddressNetWorth.tsx
new file mode 100644
index 0000000000..84a010c646
--- /dev/null
+++ b/ui/optimismSuperchain/address/details/OpSuperchainAddressNetWorth.tsx
@@ -0,0 +1,82 @@
+import { Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+import type { FormattedData } from 'ui/address/tokenSelect/types';
+
+import multichainConfig from 'configs/multichain';
+import getCurrencyValue from 'lib/getCurrencyValue';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { ZERO } from 'toolkit/utils/consts';
+import { getTokensTotalInfoByChain, type TokensTotalInfo } from 'ui/address/utils/tokenUtils';
+
+import OpSuperchainAddressInfoBreakdown from './OpSuperchainAddressInfoBreakdown';
+
+interface Props {
+  addressData: multichain.GetAddressResponse | undefined;
+  tokensData: FormattedData;
+  isLoading: boolean;
+  isError: boolean;
+}
+
+const OpSuperchainAddressNetWorth = ({ addressData, isLoading, tokensData, isError }: Props) => {
+
+  const chains = multichainConfig()?.chains;
+
+  const { usdBn: nativeUsd } = getCurrencyValue({
+    value: addressData?.coin_balance || '0',
+    accuracy: 8,
+    accuracyUsd: 2,
+    exchangeRate: addressData?.exchange_rate,
+    decimals: String(chains?.[0]?.app_config.chain.currency.decimals),
+  });
+
+  const resultByChain = React.useMemo(() => {
+    return getTokensTotalInfoByChain(tokensData, Object.keys(addressData?.chain_infos || {}));
+  }, [ addressData?.chain_infos, tokensData ]);
+
+  const { usd, isOverflow } = Object.values(resultByChain).reduce((result, item) => {
+    return {
+      usd: result.usd ? result.usd.plus(item.usd) : item.usd,
+      num: result.num ? result.num + item.num : item.num,
+      isOverflow: result.isOverflow || item.isOverflow,
+    };
+  }, {} as TokensTotalInfo);
+
+  const prefix = isOverflow ? '>' : '';
+  const totalUsd = usd ? nativeUsd.plus(usd) : ZERO;
+  const hasUsd = !isError && addressData?.exchange_rate;
+
+  return (
+    <Flex alignItems="center" columnGap={ 3 }>
+      <Skeleton
+        display="flex"
+        alignItems="center"
+        loading={ isLoading }
+      >
+        { hasUsd ? `${ prefix }$${ totalUsd.dp(2).toFormat() }` : 'N/A' }
+      </Skeleton>
+      { hasUsd && (
+        <OpSuperchainAddressInfoBreakdown data={ addressData.chain_infos } loading={ isLoading }>
+          { ([ chain, chainInfo ]) => {
+            const { usdBn: chainNativeUsdBn } = getCurrencyValue({
+              value: chainInfo.coin_balance || '0',
+              accuracy: 8,
+              accuracyUsd: 2,
+              exchangeRate: addressData?.exchange_rate,
+              decimals: String(chain.app_config?.chain?.currency.decimals),
+            });
+
+            if (!chain.id) {
+              return null;
+            }
+
+            return `$${ resultByChain[chain.id].usd.plus(chainNativeUsdBn).dp(2).toFormat() }`;
+          } }
+        </OpSuperchainAddressInfoBreakdown>
+      ) }
+    </Flex>
+  );
+};
+
+export default React.memo(OpSuperchainAddressNetWorth);
diff --git a/ui/optimismSuperchain/address/getAvailableChainIds.ts b/ui/optimismSuperchain/address/getAvailableChainIds.ts
new file mode 100644
index 0000000000..a27c1a0b69
--- /dev/null
+++ b/ui/optimismSuperchain/address/getAvailableChainIds.ts
@@ -0,0 +1,5 @@
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+
+export default function getAvailableChainIds(data: multichain.GetAddressResponse | undefined) {
+  return Object.keys(data?.chain_infos ?? {}).filter((chainId) => data?.chain_infos[chainId]);
+}
diff --git a/ui/optimismSuperchain/address/getContractChainIds.ts b/ui/optimismSuperchain/address/getContractChainIds.ts
new file mode 100644
index 0000000000..1f2e94c58d
--- /dev/null
+++ b/ui/optimismSuperchain/address/getContractChainIds.ts
@@ -0,0 +1,5 @@
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+
+export default function getContractChainIds(data: multichain.GetAddressResponse | undefined) {
+  return Object.keys(data?.chain_infos ?? {}).filter((chainId) => data?.chain_infos[chainId]?.is_contract);
+}
diff --git a/ui/optimismSuperchain/address/tokens/OpSuperchainTokenBalances.tsx b/ui/optimismSuperchain/address/tokens/OpSuperchainTokenBalances.tsx
new file mode 100644
index 0000000000..d306846ddc
--- /dev/null
+++ b/ui/optimismSuperchain/address/tokens/OpSuperchainTokenBalances.tsx
@@ -0,0 +1,158 @@
+import { Flex } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import multichainConfig from 'configs/multichain';
+import useApiQuery from 'lib/api/useApiQuery';
+import getCurrencyValue from 'lib/getCurrencyValue';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { ADDRESS } from 'stubs/optimismSuperchain';
+import { ZERO } from 'toolkit/utils/consts';
+import TokenBalancesItem from 'ui/address/tokens/TokenBalancesItem';
+import type { TokensTotalInfo } from 'ui/address/utils/tokenUtils';
+import { getTokensTotalInfoByChain } from 'ui/address/utils/tokenUtils';
+import NativeTokenIcon from 'ui/optimismSuperchain/components/NativeTokenIcon';
+import CurrencyValue from 'ui/shared/CurrencyValue';
+import IconSvg from 'ui/shared/IconSvg';
+
+import OpSuperchainAddressInfoBreakdown from '../details/OpSuperchainAddressInfoBreakdown';
+import useFetchTokens from './useFetchTokens';
+
+const OpSuperchainTokenBalances = () => {
+  const chains = multichainConfig()?.chains;
+  const currency = chains?.[0]?.app_config.chain.currency;
+
+  const router = useRouter();
+  const hash = getQueryParamString(router.query.hash);
+
+  const addressQuery = useApiQuery('multichainAggregator:address', {
+    pathParams: { hash },
+    queryOptions: {
+      placeholderData: ADDRESS,
+      refetchOnMount: false,
+    },
+  });
+
+  const tokensQuery = useFetchTokens({ hash });
+
+  const isLoading = addressQuery.isPlaceholderData || tokensQuery.isPending;
+  const isError = addressQuery.isError || tokensQuery.isError;
+
+  const { valueStr: nativeValue, usdBn: nativeUsd } = getCurrencyValue({
+    value: addressQuery.data?.coin_balance || '0',
+    accuracy: 8,
+    accuracyUsd: 2,
+    exchangeRate: addressQuery.data?.exchange_rate,
+    decimals: currency ? String(currency.decimals) : undefined,
+  });
+
+  const resultByChain = React.useMemo(() => {
+    return getTokensTotalInfoByChain(tokensQuery.data, Object.keys(addressQuery.data?.chain_infos || {}));
+  }, [ addressQuery.data?.chain_infos, tokensQuery.data ]);
+
+  const tokensInfo = Object.values(resultByChain).reduce((result, item) => {
+    return {
+      usd: result.usd ? result.usd.plus(item.usd) : item.usd,
+      num: result.num ? result.num + item.num : item.num,
+      isOverflow: result.isOverflow || item.isOverflow,
+    };
+  }, {} as TokensTotalInfo);
+
+  const prefix = tokensInfo.isOverflow ? '>' : '';
+  const totalUsd = nativeUsd.plus(tokensInfo.usd);
+  const tokensNumText = tokensInfo.num > 0 ?
+    `${ prefix }${ tokensInfo.num } ${ tokensInfo.num > 1 ? 'tokens' : 'token' }` :
+    '0';
+
+  if (isError) {
+    return null;
+  }
+
+  const totalBreakdown = addressQuery.data?.exchange_rate ? (
+    <OpSuperchainAddressInfoBreakdown data={ addressQuery.data?.chain_infos } loading={ isLoading } ml={ 2 }>
+      { ([ chain, chainInfo ]) => {
+
+        if (!chain.id) {
+          return null;
+        }
+
+        const tokensInfo = resultByChain[chain.id];
+
+        const { usdBn: chainNativeUsdBn } = getCurrencyValue({
+          value: chainInfo.coin_balance || '0',
+          accuracy: 8,
+          accuracyUsd: 2,
+          exchangeRate: addressQuery.data.exchange_rate,
+          decimals: String(chain.app_config.chain.currency.decimals),
+        });
+
+        const prefix = tokensInfo.isOverflow ? '>' : '';
+
+        return `${ prefix }$${ chainNativeUsdBn.plus(tokensInfo.usd).dp(2).toFormat() }`;
+      } }
+    </OpSuperchainAddressInfoBreakdown>
+  ) : null;
+
+  const nativeCoinBreakdown = (
+    <OpSuperchainAddressInfoBreakdown data={ addressQuery.data?.chain_infos } loading={ isLoading } ml={ 2 }>
+      { ([ chain, chainInfo ]) => {
+        return (
+          <CurrencyValue
+            isLoading={ isLoading }
+            value={ chainInfo.coin_balance }
+            exchangeRate={ addressQuery.data?.exchange_rate }
+            decimals={ chain.app_config.chain.currency.decimals.toString() }
+            currency={ chain.app_config.chain.currency.symbol }
+            accuracyUsd={ 2 }
+            accuracy={ 8 }
+            alignItems="center"
+          />
+        );
+      } }
+    </OpSuperchainAddressInfoBreakdown>
+  );
+
+  const tokensBreakdown = (
+    <OpSuperchainAddressInfoBreakdown data={ resultByChain } loading={ isLoading } ml={ 2 }>
+      { ([ , chainInfo ]) => {
+        const prefix = chainInfo.isOverflow ? '>' : '';
+        return (
+          <>
+            <span>{ prefix }{ chainInfo.num }</span>
+            <span> ({ prefix }${ chainInfo.usd.toFormat(2) })</span>
+          </>
+        );
+      } }
+    </OpSuperchainAddressInfoBreakdown>
+  );
+
+  return (
+    <Flex columnGap={ 3 } rowGap={ 3 } mb={ 6 } flexDirection={{ base: 'column', lg: 'row' }}>
+      <TokenBalancesItem
+        name="Net Worth"
+        value={ addressQuery.data?.exchange_rate ? `${ prefix }$${ totalUsd.toFormat(2) }` : 'N/A' }
+        isLoading={ isLoading }
+        icon={ <IconSvg name="wallet" boxSize="20px" flexShrink={ 0 } color="icon.primary"/> }
+        contentAfter={ totalBreakdown }
+      />
+      <TokenBalancesItem
+        name={ `${ currency?.symbol } Balance` }
+        value={ `${ nativeValue } ${ currency?.symbol }` }
+        valueSecondary={ !nativeUsd.eq(ZERO) ? `$${ nativeUsd.toFormat(2) }` : '' }
+        isLoading={ isLoading }
+        icon={ <NativeTokenIcon isLoading={ isLoading } boxSize="20px"/> }
+        contentAfter={ nativeCoinBreakdown }
+      />
+      <TokenBalancesItem
+        name="Tokens"
+        value={ tokensNumText }
+        valueSecondary={ `${ prefix }$${ tokensInfo.usd.toFormat(2) }` }
+        isLoading={ isLoading }
+        icon={ <IconSvg name="tokens" boxSize="20px" flexShrink={ 0 } color="icon.primary"/> }
+        contentAfter={ tokensBreakdown }
+      />
+    </Flex>
+  );
+};
+
+export default React.memo(OpSuperchainTokenBalances);
diff --git a/ui/optimismSuperchain/address/tokens/OpSuperchainTokenSelect.tsx b/ui/optimismSuperchain/address/tokens/OpSuperchainTokenSelect.tsx
new file mode 100644
index 0000000000..d0aa1e3e7a
--- /dev/null
+++ b/ui/optimismSuperchain/address/tokens/OpSuperchainTokenSelect.tsx
@@ -0,0 +1,69 @@
+import { Flex } from '@chakra-ui/react';
+import { sumBy } from 'es-toolkit';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { FormattedData } from 'ui/address/tokenSelect/types';
+
+import { route } from 'nextjs-routes';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import * as mixpanel from 'lib/mixpanel/index';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { IconButton } from 'toolkit/chakra/icon-button';
+import { Link } from 'toolkit/chakra/link';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { Tooltip } from 'toolkit/chakra/tooltip';
+import TokenSelectDesktop from 'ui/address/tokenSelect/TokenSelectDesktop';
+import TokenSelectMobile from 'ui/address/tokenSelect/TokenSelectMobile';
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props {
+  isLoading: boolean;
+  isError: boolean;
+  data: FormattedData;
+}
+
+const OpSuperchainTokenSelect = ({ isLoading, isError, data }: Props) => {
+  const router = useRouter();
+  const hash = getQueryParamString(router.query.hash);
+  const isMobile = useIsMobile();
+
+  const handleIconButtonClick = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Tokens show all (icon)' });
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }, [ ]);
+
+  const hasTokens = sumBy(Object.values(data), ({ items }) => items.length) > 0;
+  if (isError || (!isLoading && !hasTokens)) {
+    return <Skeleton loading={ isLoading }>0</Skeleton>;
+  }
+
+  return (
+    <Flex columnGap={ 3 } mt={{ base: 1, lg: 0 }}>
+      { isMobile ?
+        <TokenSelectMobile data={ data } isLoading={ isLoading }/> :
+        <TokenSelectDesktop data={ data } isLoading={ isLoading }/>
+      }
+      <Tooltip content="Show all tokens">
+        <Link
+          href={ route({ pathname: '/address/[hash]', query: { hash, tab: 'tokens' } }) }
+          asChild
+          scroll={ false }
+        >
+          <IconButton
+            aria-label="Show all tokens"
+            variant="icon_secondary"
+            size="md"
+            onClick={ handleIconButtonClick }
+            loadingSkeleton={ isLoading }
+          >
+            <IconSvg name="wallet"/>
+          </IconButton>
+        </Link>
+      </Tooltip>
+    </Flex>
+  );
+};
+
+export default React.memo(OpSuperchainTokenSelect);
diff --git a/ui/optimismSuperchain/address/tokens/useFetchTokens.ts b/ui/optimismSuperchain/address/tokens/useFetchTokens.ts
new file mode 100644
index 0000000000..216725b826
--- /dev/null
+++ b/ui/optimismSuperchain/address/tokens/useFetchTokens.ts
@@ -0,0 +1,85 @@
+import React from 'react';
+
+import type { FormattedData } from 'ui/address/tokenSelect/types';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { calculateUsdValue } from 'ui/address/utils/tokenUtils';
+
+interface Props {
+  hash?: string;
+  enabled?: boolean;
+}
+
+export interface ReturnType {
+  isPending: boolean;
+  isError: boolean;
+  data: FormattedData;
+}
+
+export default function useFetchTokens({ hash, enabled }: Props): ReturnType {
+  const erc20Query = useApiQuery('multichainAggregator:address_tokens', {
+    pathParams: { hash },
+    queryParams: { type: 'ERC-20' },
+    queryOptions: {
+      enabled: Boolean(hash) && enabled,
+      refetchOnMount: false,
+    },
+  });
+
+  const erc721Query = useApiQuery('multichainAggregator:address_tokens', {
+    pathParams: { hash },
+    queryParams: { type: 'ERC-721' },
+    queryOptions: {
+      enabled: Boolean(hash) && enabled,
+      refetchOnMount: false,
+    },
+  });
+
+  const erc1155Query = useApiQuery('multichainAggregator:address_tokens', {
+    pathParams: { hash },
+    queryParams: { type: 'ERC-1155' },
+    queryOptions: {
+      enabled: Boolean(hash) && enabled,
+      refetchOnMount: false,
+    },
+  });
+
+  const erc404Query = useApiQuery('multichainAggregator:address_tokens', {
+    pathParams: { hash },
+    queryParams: { type: 'ERC-404' },
+    queryOptions: {
+      enabled: Boolean(hash) && enabled,
+      refetchOnMount: false,
+    },
+  });
+
+  const isPending = erc20Query.isPending || erc721Query.isPending || erc1155Query.isPending || erc404Query.isPending;
+  const isError = erc20Query.isError || erc721Query.isError || erc1155Query.isError || erc404Query.isError;
+
+  const data = React.useMemo(() => {
+    return {
+      'ERC-20': {
+        items: erc20Query.data?.items.map(calculateUsdValue) || [],
+        isOverflow: Boolean(erc20Query.data?.next_page_params),
+      },
+      'ERC-721': {
+        items: erc721Query.data?.items.map(calculateUsdValue) || [],
+        isOverflow: Boolean(erc721Query.data?.next_page_params),
+      },
+      'ERC-1155': {
+        items: erc1155Query.data?.items.map(calculateUsdValue) || [],
+        isOverflow: Boolean(erc1155Query.data?.next_page_params),
+      },
+      'ERC-404': {
+        items: erc404Query.data?.items.map(calculateUsdValue) || [],
+        isOverflow: Boolean(erc404Query.data?.next_page_params),
+      },
+    };
+  }, [ erc20Query.data, erc721Query.data, erc1155Query.data, erc404Query.data ]);
+
+  return {
+    isPending,
+    isError,
+    data,
+  };
+}
diff --git a/ui/optimismSuperchain/address/useChainSelectErc20.ts b/ui/optimismSuperchain/address/useChainSelectErc20.ts
new file mode 100644
index 0000000000..2a6adc3da4
--- /dev/null
+++ b/ui/optimismSuperchain/address/useChainSelectErc20.ts
@@ -0,0 +1,16 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import getQueryParamString from 'lib/router/getQueryParamString';
+
+interface Props {
+  chainIds: Array<string>;
+}
+export default function useChainSelectErc20({ chainIds }: Props) {
+  const router = useRouter();
+  const chainId = getQueryParamString(router.query.chain_id);
+
+  return React.useState<Array<string> | undefined>(
+    chainId && chainIds.includes(chainId) ? [ chainId ] : [ 'all' ],
+  );
+}
diff --git a/ui/optimismSuperchain/block/OpSuperchainBlock.tsx b/ui/optimismSuperchain/block/OpSuperchainBlock.tsx
new file mode 100644
index 0000000000..46dec09e84
--- /dev/null
+++ b/ui/optimismSuperchain/block/OpSuperchainBlock.tsx
@@ -0,0 +1,21 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import multichainConfig from 'configs/multichain';
+import { MultichainProvider } from 'lib/contexts/multichain';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import Block from 'ui/pages/Block';
+
+const OpSuperchainBlock = () => {
+  const router = useRouter();
+  const chainSlug = getQueryParamString(router.query.chain_slug);
+  const chainData = multichainConfig()?.chains.find(chain => chain.slug === chainSlug);
+
+  return (
+    <MultichainProvider chainId={ chainData?.id }>
+      <Block/>
+    </MultichainProvider>
+  );
+};
+
+export default React.memo(OpSuperchainBlock);
diff --git a/ui/optimismSuperchain/blocks/OpSuperchainBlocks.tsx b/ui/optimismSuperchain/blocks/OpSuperchainBlocks.tsx
index cf37a86e58..a53253e215 100644
--- a/ui/optimismSuperchain/blocks/OpSuperchainBlocks.tsx
+++ b/ui/optimismSuperchain/blocks/OpSuperchainBlocks.tsx
@@ -13,15 +13,15 @@ import { BLOCK } from 'stubs/block';
 import { generateListStub } from 'stubs/utils';
 import { Link } from 'toolkit/chakra/link';
 import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
+import ChainSelect from 'ui/optimismSuperchain/components/ChainSelect';
 import IconSvg from 'ui/shared/IconSvg';
-import ChainSelect from 'ui/shared/multichain/ChainSelect';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
 import OpSuperchainBlocksContent from './OpSuperchainBlocksContent';
 
-const QUERY_PRESERVED_PARAMS = [ 'chain-slug' ];
+const QUERY_PRESERVED_PARAMS = [ 'chain_id' ];
 const TABS_LEFT_SLOT_PROPS = {
   mr: { base: 'auto', lg: 6 - 2 },
 };
@@ -77,9 +77,9 @@ const OpSuperchainBlocks = () => {
   });
 
   const tabs: Array<TabItemRegular> = [
-    { id: 'blocks', title: 'All', component: <OpSuperchainBlocksContent type="block" query={ blocksQuery } chainSlug={ blocksQuery.chainValue?.[0] }/> },
-    { id: 'reorgs', title: 'Forked', component: <OpSuperchainBlocksContent type="reorg" query={ reorgsQuery } chainSlug={ reorgsQuery.chainValue?.[0] }/> },
-    { id: 'uncles', title: 'Uncles', component: <OpSuperchainBlocksContent type="uncle" query={ unclesQuery } chainSlug={ unclesQuery.chainValue?.[0] }/> },
+    { id: 'blocks', title: 'All', component: <OpSuperchainBlocksContent type="block" query={ blocksQuery } chainId={ blocksQuery.chainValue?.[0] }/> },
+    { id: 'reorgs', title: 'Forked', component: <OpSuperchainBlocksContent type="reorg" query={ reorgsQuery } chainId={ reorgsQuery.chainValue?.[0] }/> },
+    { id: 'uncles', title: 'Uncles', component: <OpSuperchainBlocksContent type="uncle" query={ unclesQuery } chainId={ unclesQuery.chainValue?.[0] }/> },
   ];
 
   const currentQuery = (() => {
@@ -90,7 +90,7 @@ const OpSuperchainBlocks = () => {
     }
   })();
 
-  const currentChainInfo = multichainConfig()?.chains.find(chain => chain.slug === currentQuery.chainValue?.[0]);
+  const currentChainInfo = multichainConfig()?.chains.find(chain => chain.id === currentQuery.chainValue?.[0]);
 
   const leftSlot = (
     <ChainSelect
@@ -101,7 +101,7 @@ const OpSuperchainBlocks = () => {
 
   const rightSlot = (
     <HStack gap={ 8 } hideBelow="lg">
-      <Link href={ route({ pathname: '/block/countdown' }, currentChainInfo ? { chain: currentChainInfo } : undefined) }>
+      <Link href={ route({ pathname: '/block/countdown' }, { chain: currentChainInfo }) }>
         <IconSvg name="hourglass_slim" boxSize={ 5 } mr={ 2 }/>
         <span>Block countdown</span>
       </Link>
diff --git a/ui/optimismSuperchain/blocks/OpSuperchainBlocksContent.tsx b/ui/optimismSuperchain/blocks/OpSuperchainBlocksContent.tsx
index bd72d713be..1bebe6c710 100644
--- a/ui/optimismSuperchain/blocks/OpSuperchainBlocksContent.tsx
+++ b/ui/optimismSuperchain/blocks/OpSuperchainBlocksContent.tsx
@@ -9,15 +9,15 @@ import BlocksContent from 'ui/blocks/BlocksContent';
 import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 
 interface Props extends BlocksContentProps {
-  chainSlug: string | undefined;
+  chainId: string | undefined;
 }
 
-const OpSuperchainBlocksContent = ({ chainSlug, ...rest }: Props) => {
-  const chainConfig = multichainConfig()?.chains.find(chain => chain.slug === chainSlug);
+const OpSuperchainBlocksContent = ({ chainId, ...rest }: Props) => {
+  const chainConfig = multichainConfig()?.chains.find(chain => chain.id === chainId);
 
   return (
-    <MultichainProvider chainSlug={ chainSlug }>
-      <SocketProvider url={ chainConfig ? getSocketUrl(chainConfig.config) : undefined }>
+    <MultichainProvider chainId={ chainId }>
+      <SocketProvider url={ chainConfig ? getSocketUrl(chainConfig.app_config) : undefined }>
         <BlocksContent
           { ...rest }
           top={ ACTION_BAR_HEIGHT_DESKTOP }
diff --git a/ui/optimismSuperchain/components/ChainSelect.tsx b/ui/optimismSuperchain/components/ChainSelect.tsx
new file mode 100644
index 0000000000..8271371b75
--- /dev/null
+++ b/ui/optimismSuperchain/components/ChainSelect.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import multichainConfig from 'configs/multichain';
+import type { Props } from 'ui/shared/externalChains/ChainSelect';
+import ChainSelect from 'ui/shared/externalChains/ChainSelect';
+
+const ChainSelectMultichain = (props: Omit<Props, 'chainsConfig'>) => {
+  const chainsConfig = React.useMemo(() => {
+    return multichainConfig()?.chains || [];
+  }, []);
+  return <ChainSelect chainsConfig={ chainsConfig } { ...props }/>;
+};
+
+export default React.memo(ChainSelectMultichain);
diff --git a/ui/optimismSuperchain/components/ClusterChainsPopover.tsx b/ui/optimismSuperchain/components/ClusterChainsPopover.tsx
index e38315a1ac..cf3c1efc2a 100644
--- a/ui/optimismSuperchain/components/ClusterChainsPopover.tsx
+++ b/ui/optimismSuperchain/components/ClusterChainsPopover.tsx
@@ -1,25 +1,34 @@
 import { Box, chakra, VStack } from '@chakra-ui/react';
 import React from 'react';
 
-import { route } from 'nextjs-routes';
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+
+import { route } from 'nextjs/routes';
 
 import multichainConfig from 'configs/multichain';
 import { Button } from 'toolkit/chakra/button';
 import { Link } from 'toolkit/chakra/link';
 import { PopoverBody, PopoverContent, PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
+import ChainIcon from 'ui/shared/externalChains/ChainIcon';
 import IconSvg from 'ui/shared/IconSvg';
 
-import ChainIcon from './ChainIcon';
-
 interface Props {
   addressHash: string;
+  data: multichain.GetAddressResponse | undefined;
+  isLoading: boolean;
 }
 
-const ClusterChainsPopover = ({ addressHash }: Props) => {
+const ClusterChainsPopover = ({ addressHash, data, isLoading }: Props) => {
+
+  if (!data) {
+    return null;
+  }
 
   const chains = multichainConfig()?.chains;
+  const activeChainsIds = Object.keys(data.chain_infos ?? {});
+  const activeChains = chains?.filter((chain) => activeChainsIds.includes(String(chain.id))) ?? [];
 
-  if (!chains || chains.length === 0) {
+  if (!isLoading && activeChains.length === 0) {
     return null;
   }
 
@@ -30,32 +39,40 @@ const ClusterChainsPopover = ({ addressHash }: Props) => {
           <Button
             size="sm"
             variant="dropdown"
-            aria-label="This address is on cluster chains"
+            aria-label="Chains this address has interacted with"
             px={ 2 }
             fontWeight={ 500 }
             flexShrink={ 0 }
             columnGap={ 1 }
+            loadingSkeleton={ isLoading }
           >
             <IconSvg name="pie_chart" boxSize={ 5 }/>
-            { chains.length } Chain{ chains.length > 1 ? 's' : '' }
+            { activeChains.length } Chain{ activeChains.length > 1 ? 's' : '' }
           </Button>
         </PopoverTrigger>
       </Box>
       <PopoverContent w="auto">
         <PopoverBody >
-          <chakra.span color="text.secondary" textStyle="xs">This address is on cluster chains</chakra.span>
+          <chakra.span color="text.secondary" textStyle="xs">Chains this address has interacted with</chakra.span>
           <VStack gap={ 2 } mt={ 1 } alignItems="flex-start">
-            { chains.map((chain) => (
+            { activeChains.map((chain) => (
               <Link
-                key={ chain.slug }
-                href={ chain.config.app.baseUrl + route({ pathname: '/address/[hash]', query: { hash: addressHash } }) }
+                key={ chain.id }
+                href={ route({
+                  pathname: '/address/[hash]',
+                  query: {
+                    hash: addressHash,
+                    utm_source: 'multichain-explorer',
+                    utm_medium: 'address',
+                  },
+                }, { chain, external: true }) }
                 external
                 display="flex"
                 alignItems="center"
                 py="7px"
               >
                 <ChainIcon data={ chain } mr={ 2 }/>
-                { chain.config.chain.name }
+                { chain.name }
               </Link>
             )) }
           </VStack>
diff --git a/ui/optimismSuperchain/components/NativeTokenIcon.tsx b/ui/optimismSuperchain/components/NativeTokenIcon.tsx
new file mode 100644
index 0000000000..ef756bf930
--- /dev/null
+++ b/ui/optimismSuperchain/components/NativeTokenIcon.tsx
@@ -0,0 +1,41 @@
+import { chakra } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import React from 'react';
+
+import type { HomeStats } from 'types/api/stats';
+
+import { Image } from 'toolkit/chakra/image';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import TokenLogoPlaceholder from 'ui/shared/TokenLogoPlaceholder';
+
+import useFetchParentChainApi from '../home/useFetchParentChainApi';
+
+interface Props {
+  isLoading?: boolean;
+  className?: string;
+};
+
+const NativeTokenIcon = ({ isLoading, className }: Props) => {
+  const parentChainApiFetch = useFetchParentChainApi();
+  const parentChainStatsQuery = useQuery({
+    queryKey: [ 'parent_chain', 'stats' ],
+    queryFn: () => parentChainApiFetch({ path: '/stats' }) as Promise<HomeStats>,
+    refetchOnMount: false,
+  });
+
+  if (isLoading || parentChainStatsQuery.isFetching) {
+    return <Skeleton borderRadius="base" loading className={ className }/>;
+  }
+
+  return (
+    <Image
+      className={ className }
+      borderRadius="base"
+      src={ parentChainStatsQuery.data?.coin_image || undefined }
+      alt="Native token logo"
+      fallback={ <TokenLogoPlaceholder/> }
+    />
+  );
+};
+
+export default chakra(NativeTokenIcon);
diff --git a/ui/optimismSuperchain/crossChainTxs/CrossChainTxs.tsx b/ui/optimismSuperchain/crossChainTxs/CrossChainTxs.tsx
deleted file mode 100644
index 566d561123..0000000000
--- a/ui/optimismSuperchain/crossChainTxs/CrossChainTxs.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Box } from '@chakra-ui/react';
-import React from 'react';
-
-import type * as multichain from '@blockscout/multichain-aggregator-types';
-import type { TxsSocketType } from 'ui/txs/socket/types';
-
-import config from 'configs/app';
-import { SocketProvider } from 'lib/socket/context';
-import DataListDisplay from 'ui/shared/DataListDisplay';
-
-import CrossChainTxsTable from '../crossChainTxs/CrossChainTxsTable';
-
-const socketUrl = config.apis.multichain?.socketEndpoint ? `${ config.apis.multichain.socketEndpoint }/socket` : undefined;
-
-interface Props {
-  items?: Array<multichain.InteropMessage>;
-  isLoading: boolean;
-  isError: boolean;
-  socketType?: TxsSocketType;
-  tableHeaderTop?: number;
-  currentAddress?: string;
-}
-
-const CrossChainTxs = ({ items, isLoading, isError, socketType, tableHeaderTop, currentAddress }: Props) => {
-  const content = items ? (
-    <DataListDisplay
-      itemsNum={ items?.length }
-      isError={ isError }
-      emptyText="There are no cross-chain transactions."
-    >
-      <Box hideFrom="lg">
-        Coming soon 🔜
-      </Box>
-      <Box hideBelow="lg">
-        <CrossChainTxsTable
-          isLoading={ isLoading }
-          items={ items }
-          socketType={ socketType }
-          top={ tableHeaderTop }
-          stickyHeader={ tableHeaderTop !== undefined }
-          currentAddress={ currentAddress }
-        />
-      </Box>
-    </DataListDisplay>
-  ) : null;
-
-  if (socketType) {
-    return (
-      <SocketProvider url={ socketUrl }>
-        { content }
-      </SocketProvider>
-    );
-  }
-
-  return content;
-};
-
-export default React.memo(CrossChainTxs);
diff --git a/ui/optimismSuperchain/crossChainTxs/CrossChainTxsTable.tsx b/ui/optimismSuperchain/crossChainTxs/CrossChainTxsTable.tsx
deleted file mode 100644
index abe6b0e2d9..0000000000
--- a/ui/optimismSuperchain/crossChainTxs/CrossChainTxsTable.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-
-import type * as multichain from '@blockscout/multichain-aggregator-types';
-import type { TxsSocketType } from 'ui/txs/socket/types';
-
-import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
-import getCurrencySymbol from 'lib/multichain/getCurrencySymbol';
-import { TableBody, TableColumnHeader, TableHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
-import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
-import TxsSocketNotice from 'ui/txs/socket/TxsSocketNotice';
-
-import CrossChainTxsTableItem from './CrossChainTxsTableItem';
-
-interface Props {
-  items: Array<multichain.InteropMessage>;
-  isLoading: boolean;
-  socketType?: TxsSocketType;
-  stickyHeader?: boolean;
-  top?: number;
-  currentAddress?: string;
-}
-
-const CrossChainTxsTable = ({ items, isLoading, socketType, stickyHeader = true, top, currentAddress }: Props) => {
-  const TableHeaderComponent = stickyHeader ? TableHeaderSticky : TableHeader;
-
-  const currencySymbol = getCurrencySymbol();
-
-  return (
-    <AddressHighlightProvider>
-      <TableRoot minW="1150px" tableLayout="auto">
-        <TableHeaderComponent top={ stickyHeader ? top : undefined }>
-          <TableRow>
-            <TableColumnHeader minW="180px">
-              Message
-              <TimeFormatToggle/>
-            </TableColumnHeader>
-            <TableColumnHeader>Type</TableColumnHeader>
-            <TableColumnHeader>Method</TableColumnHeader>
-            <TableColumnHeader>Source tx</TableColumnHeader>
-            <TableColumnHeader whiteSpace="nowrap">Destination tx</TableColumnHeader>
-            <TableColumnHeader>Sender / Target</TableColumnHeader>
-            <TableColumnHeader isNumeric>Value</TableColumnHeader>
-          </TableRow>
-        </TableHeaderComponent>
-        <TableBody>
-          { socketType && <TxsSocketNotice type={ socketType } place="table" isLoading={ isLoading }/> }
-          { items.map((item, index) => (
-            <CrossChainTxsTableItem
-              key={ String(item.nonce) + (isLoading ? index : '') }
-              item={ item }
-              isLoading={ isLoading }
-              currencySymbol={ currencySymbol }
-              currentAddress={ currentAddress }
-            />
-          )) }
-        </TableBody>
-      </TableRoot>
-    </AddressHighlightProvider>
-  );
-};
-
-export default React.memo(CrossChainTxsTable);
diff --git a/ui/optimismSuperchain/crossChainTxs/CrossChainTxsTableItem.tsx b/ui/optimismSuperchain/crossChainTxs/CrossChainTxsTableItem.tsx
deleted file mode 100644
index bbfc15ff07..0000000000
--- a/ui/optimismSuperchain/crossChainTxs/CrossChainTxsTableItem.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import { Spinner, VStack } from '@chakra-ui/react';
-import React from 'react';
-
-import type * as multichain from '@blockscout/multichain-aggregator-types';
-import type { TransactionType } from 'types/api/transaction';
-
-import { route } from 'nextjs-routes';
-
-import multichainConfig from 'configs/multichain';
-import getCurrencyValue from 'lib/getCurrencyValue';
-import { Badge } from 'toolkit/chakra/badge';
-import { Link } from 'toolkit/chakra/link';
-import { Skeleton } from 'toolkit/chakra/skeleton';
-import { TableCell, TableRow } from 'toolkit/chakra/table';
-import CrossChainTxStatusTag from 'ui/optimismSuperchain/components/CrossChainTxStatusTag';
-import AddressFromTo from 'ui/shared/address/AddressFromTo';
-import TokenEntity from 'ui/shared/entities/token/TokenEntity';
-import TxEntity from 'ui/shared/entities/tx/TxEntity';
-import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
-import TxType from 'ui/txs/TxType';
-
-interface Props {
-  item: multichain.InteropMessage;
-  isLoading: boolean;
-  animation?: string;
-  currencySymbol?: string;
-  currentAddress?: string;
-}
-
-const CrossChainTxsTableItem = ({ item, isLoading, animation, currencySymbol, currentAddress }: Props) => {
-
-  const sourceChain = React.useMemo(() => {
-    const config = multichainConfig();
-    return config?.chains.find((chain) => chain.config.chain.id === item.init_chain_id);
-  }, [ item ]);
-
-  const targetChain = React.useMemo(() => {
-    const config = multichainConfig();
-    return config?.chains.find((chain) => chain.config.chain.id === item.relay_chain_id);
-  }, [ item ]);
-
-  const value = getCurrencyValue({
-    value: item.transfer?.total?.value ?? '0',
-    decimals: '18',
-  });
-
-  return (
-    <TableRow animation={ animation }>
-      <TableCell>
-        <VStack alignItems="start" gap={ 0 }>
-          <Link fontWeight="700" minH="30px" loading={ isLoading } href={ route({ pathname: '/tx/[hash]', query: { hash: String(item.nonce) } }) }>
-            { item.nonce }
-          </Link>
-          <TimeWithTooltip
-            timestamp={ item.timestamp }
-            isLoading={ isLoading }
-            color="text.secondary"
-            whiteSpace="nowrap"
-            my="5px"
-          />
-        </VStack>
-      </TableCell>
-      <TableCell>
-        <VStack alignItems="start" gap={ 0 }>
-          <TxType types={ [ item.message_type as TransactionType ] } isLoading={ isLoading } my="3px"/>
-          <CrossChainTxStatusTag status={ item.status } loading={ isLoading } my="3px"/>
-        </VStack>
-      </TableCell>
-      <TableCell>
-        <Badge colorPalette="gray" loading={ isLoading } truncated my="3px">{ item.method }</Badge>
-      </TableCell>
-      <TableCell>
-        { item.init_transaction_hash ? (
-          <TxEntity
-            hash={ item.init_transaction_hash }
-            isLoading={ isLoading }
-            truncation="constant"
-            chain={ sourceChain }
-            minH="30px"
-          />
-        ) :
-          <Spinner size="md" my="5px"/>
-        }
-      </TableCell>
-      <TableCell>
-        { item.relay_transaction_hash ? (
-          <TxEntity
-            hash={ item.relay_transaction_hash }
-            isLoading={ isLoading }
-            truncation="constant"
-            chain={ targetChain }
-            minH="30px"
-          />
-        ) :
-          <Spinner size="md" my="5px"/>
-        }
-      </TableCell>
-      <TableCell>
-        <AddressFromTo
-          from={{ hash: item.sender?.hash ?? 'N/A' }}
-          to={{ hash: item.target?.hash ?? 'N/A' }}
-          current={ currentAddress }
-          isLoading={ isLoading }
-          truncation="constant"
-          my="5px"
-        />
-      </TableCell>
-      <TableCell isNumeric>
-        <Skeleton
-          loading={ isLoading }
-          display="inline-flex"
-          alignItems="center"
-          flexWrap="wrap"
-          whiteSpace="pre-wrap"
-          wordBreak="break-word"
-          justifyContent="flex-end"
-          columnGap={ item.transfer?.token ? 2 : 0 }
-          my="5px"
-        >
-          <span>{ value.valueStr }</span>
-          { item.transfer?.token ? (
-            <TokenEntity
-              token={{
-                address_hash: item.transfer.token.address_hash,
-                type: 'ERC-20',
-                icon_url: '',
-                name: '',
-                symbol: 'TBD',
-                reputation: null,
-              }}
-              noCopy
-              onlySymbol
-              justifyContent="flex-end"
-              w="fit-content"
-            />
-          ) : <span> { currencySymbol ?? '' }</span> }
-        </Skeleton>
-      </TableCell>
-    </TableRow>
-  );
-};
-
-export default React.memo(CrossChainTxsTableItem);
diff --git a/ui/optimismSuperchain/home/ChainIndicators.tsx b/ui/optimismSuperchain/home/ChainIndicators.tsx
new file mode 100644
index 0000000000..8697ef62f1
--- /dev/null
+++ b/ui/optimismSuperchain/home/ChainIndicators.tsx
@@ -0,0 +1,120 @@
+import { useQuery } from '@tanstack/react-query';
+import React from 'react';
+
+import type { HomeStats } from 'types/api/stats';
+import type { TChainIndicator } from 'ui/home/indicators/types';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { HOMEPAGE_STATS } from 'stubs/optimismSuperchain';
+import ChainIndicatorsChart from 'ui/home/indicators/ChainIndicatorsChart';
+import ChainIndicatorsContainer from 'ui/home/indicators/ChainIndicatorsContainer';
+import ChainIndicatorsList from 'ui/home/indicators/ChainIndicatorsList';
+import { isIndicatorEnabled, sortIndicators } from 'ui/home/indicators/utils/indicators';
+import IconSvg from 'ui/shared/IconSvg';
+
+import NativeTokenIcon from '../components/NativeTokenIcon';
+import useChartDataQuery from './useChartDataQuery';
+import useFetchParentChainApi from './useFetchParentChainApi';
+
+const ChainIndicators = () => {
+  const statsQuery = useApiQuery('multichainStats:pages_main', {
+    queryOptions: {
+      refetchOnMount: false,
+      placeholderData: HOMEPAGE_STATS,
+    },
+  });
+
+  const parentChainApiFetch = useFetchParentChainApi();
+
+  const parentChainStatsQuery = useQuery({
+    queryKey: [ 'parent_chain', 'stats' ],
+    queryFn: () => parentChainApiFetch({ path: '/stats' }) as Promise<HomeStats>,
+    refetchOnMount: false,
+  });
+
+  const indicators: Array<TChainIndicator> = React.useMemo(() => ([
+    statsQuery.data && {
+      id: 'daily_txs' as const,
+      title: statsQuery.data.new_txns_multichain_window?.info?.title || 'Daily transactions',
+      value: (() => {
+        if (statsQuery.data.yesterday_txns_multichain?.value) {
+          return Number(statsQuery.data.yesterday_txns_multichain.value).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' });
+        }
+        return 'N/A';
+      })(),
+      valueDiff: (() => {
+        if (statsQuery.data.new_txns_multichain_window) {
+          const lastDay = statsQuery.data.new_txns_multichain_window.chart[statsQuery.data.new_txns_multichain_window.chart.length - 1].value;
+          const secondLastDay = statsQuery.data.new_txns_multichain_window.chart[statsQuery.data.new_txns_multichain_window.chart.length - 2].value;
+          return Number(((Number(lastDay) - Number(secondLastDay)) / Number(secondLastDay) * 100).toFixed(2));
+        }
+        return undefined;
+      })(),
+      icon: <IconSvg name="transactions" boxSize={ 6 } bgColor="#56ACD1" borderRadius="base" color="white"/>,
+      hint: (() => {
+        if (statsQuery.data.new_txns_multichain_window?.info) {
+          return statsQuery.data.new_txns_multichain_window.info.description;
+        }
+        return `Number of transactions yesterday (0:00 - 23:59 UTC). The chart displays daily transactions for the past 30 days.`;
+      })(),
+    },
+    parentChainStatsQuery.data && {
+      id: 'coin_price' as const,
+      title: 'ETH price',
+      value: (() => {
+        if (parentChainStatsQuery.data.coin_price) {
+          return '$' + Number(parentChainStatsQuery.data.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 });
+        }
+        return '$N/A';
+      })(),
+      valueDiff: parentChainStatsQuery.data.coin_price_change_percentage ?? undefined,
+      icon: <NativeTokenIcon boxSize={ 6 }/>,
+      hint: 'ETH token daily price in USD.',
+    },
+    parentChainStatsQuery.data && {
+      id: 'market_cap' as const,
+      title: 'Market cap',
+      value: (() => {
+        if (parentChainStatsQuery.data.market_cap) {
+          return '$' + Number(parentChainStatsQuery.data.market_cap).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' });
+        }
+        return '$N/A';
+      })(),
+      icon: <IconSvg name="globe" boxSize={ 6 } bgColor="#6A5DCC" borderRadius="base" color="white"/>,
+      // eslint-disable-next-line max-len
+      hint: 'The total market value of a cryptocurrency\'s circulating supply. It is analogous to the free-float capitalization in the stock market. Market Cap = Current Price x Circulating Supply.',
+    },
+  ]
+    .filter(Boolean)
+    .filter(isIndicatorEnabled)
+    .sort(sortIndicators)
+  ), [ parentChainStatsQuery.data, statsQuery.data ]);
+
+  const [ selectedIndicatorId, selectIndicatorId ] = React.useState(indicators[0]?.id);
+  const selectedIndicator = indicators.find(({ id }) => id === selectedIndicatorId);
+
+  const chartQuery = useChartDataQuery({ indicatorId: selectedIndicatorId });
+
+  return (
+    <ChainIndicatorsContainer>
+      { selectedIndicator && (
+        <ChainIndicatorsChart
+          isLoading={ statsQuery.isPlaceholderData || chartQuery.isPending }
+          title={ selectedIndicator.title }
+          hint={ selectedIndicator.hint }
+          value={ selectedIndicator?.value }
+          valueDiff={ selectedIndicator?.valueDiff }
+          chartQuery={ chartQuery }
+        />
+      ) }
+      <ChainIndicatorsList
+        indicators={ indicators }
+        isLoading={ statsQuery.isPlaceholderData || parentChainStatsQuery.isPending }
+        selectedId={ selectedIndicatorId }
+        onItemClick={ selectIndicatorId }
+      />
+    </ChainIndicatorsContainer>
+  );
+};
+
+export default React.memo(ChainIndicators);
diff --git a/ui/optimismSuperchain/home/ChainLatestBlockInfo.tsx b/ui/optimismSuperchain/home/ChainLatestBlockInfo.tsx
index 21c3df3398..5083f0b355 100644
--- a/ui/optimismSuperchain/home/ChainLatestBlockInfo.tsx
+++ b/ui/optimismSuperchain/home/ChainLatestBlockInfo.tsx
@@ -3,6 +3,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import React from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import { route } from 'nextjs-routes';
 
@@ -14,25 +15,25 @@ import { Link } from 'toolkit/chakra/link';
 import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 interface Props {
-  slug: string;
+  chainData: ClusterChainConfig;
 }
 
-const ChainLatestBlockInfo = ({ slug }: Props) => {
+const ChainLatestBlockInfo = ({ chainData }: Props) => {
   const queryClient = useQueryClient();
 
   const blocksQuery = useApiQuery('general:homepage_blocks', {
-    chainSlug: slug,
+    chain: chainData,
     queryOptions: {
       placeholderData: [ BLOCK ],
     },
   });
 
   const handleNewBlockMessage: SocketMessage.NewBlock['handler'] = React.useCallback((payload) => {
-    const queryKey = getResourceKey('general:homepage_blocks', { chainSlug: slug });
+    const queryKey = getResourceKey('general:homepage_blocks', { chainId: chainData.id });
     queryClient.setQueryData(queryKey, () => {
       return [ payload.block ];
     });
-  }, [ queryClient, slug ]);
+  }, [ queryClient, chainData.id ]);
 
   const channel = useSocketChannel({
     topic: 'blocks:new_block',
@@ -54,9 +55,9 @@ const ChainLatestBlockInfo = ({ slug }: Props) => {
       <Link
         loading={ blocksQuery.isPlaceholderData }
         href={ route({
-          pathname: '/chain/[chain-slug]/block/[height_or_hash]',
+          pathname: '/chain/[chain_slug]/block/[height_or_hash]',
           query: {
-            'chain-slug': slug,
+            chain_slug: chainData.slug,
             height_or_hash: blocksQuery.data[0].height.toString(),
           },
         }) }
diff --git a/ui/optimismSuperchain/home/ChainWidget.tsx b/ui/optimismSuperchain/home/ChainWidget.tsx
index 4cbbb9afcb..f4cc32a2e8 100644
--- a/ui/optimismSuperchain/home/ChainWidget.tsx
+++ b/ui/optimismSuperchain/home/ChainWidget.tsx
@@ -1,7 +1,7 @@
 import { Box, HStack, VStack } from '@chakra-ui/react';
 import React from 'react';
 
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import useAddChainClick from 'lib/web3/useAddChainClick';
@@ -11,20 +11,20 @@ import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { Tooltip } from 'toolkit/chakra/tooltip';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import ChainIcon from 'ui/shared/externalChains/ChainIcon';
 import GasPrice from 'ui/shared/gas/GasPrice';
 import IconSvg from 'ui/shared/IconSvg';
 import RollupStageBadge from 'ui/snippets/navigation/RollupStageBadge';
 
-import ChainIcon from '../components/ChainIcon';
 import ChainLatestBlockInfo from './ChainLatestBlockInfo';
 
 interface Props {
-  data: ChainConfig;
+  data: ClusterChainConfig;
 }
 
 const ChainWidget = ({ data }: Props) => {
   const statsQuery = useApiQuery('general:stats', {
-    chainSlug: data.slug,
+    chain: data,
     queryOptions: {
       placeholderData: HOMEPAGE_STATS,
     },
@@ -39,8 +39,8 @@ const ChainWidget = ({ data }: Props) => {
       borderRadius="xl"
       border="1px solid"
       borderColor={{ _light: 'blackAlpha.200', _dark: 'whiteAlpha.200' }}
-      p={ 4 }
-      flexBasis={{ base: '100%', lg: 'calc((100% - 3 * 12px) / 3)' }}
+      p={ 6 }
+      flexBasis={{ base: '100%', lg: 'calc((100% - 3 * 12px) / 4)' }}
       textStyle="sm"
     >
       <HStack justifyContent="space-between">
@@ -62,7 +62,7 @@ const ChainWidget = ({ data }: Props) => {
           </Tooltip>
           <Tooltip content="Open explorer">
             <Link
-              href={ data.config.app.baseUrl }
+              href={ data.explorer_url }
               external
               noIcon
               color="icon.secondary"
@@ -77,16 +77,16 @@ const ChainWidget = ({ data }: Props) => {
           </Tooltip>
         </HStack>
       </HStack>
-      <Heading my={ 3 } level="3">{ data.config.chain.name }</Heading>
-      <RollupStageBadge chainConfig={ data.config } variant="filled" mb={ 2.5 }/>
+      <Heading my={ 3 } textStyle="heading.md ">{ data.name }</Heading>
+      <RollupStageBadge chainConfig={ data.app_config } variant="filled" mb={ 2.5 }/>
       <VStack gap={ 2 } alignItems="flex-start" fontWeight={ 500 }>
         <HStack gap={ 2 }>
           <Box color="text.secondary">Chain ID</Box>
-          <Box>{ data.config.chain.id }</Box>
-          <CopyToClipboard text={ String(data.config.chain.id) } ml={ 0 }/>
+          <Box>{ data.id }</Box>
+          <CopyToClipboard text={ String(data.id) } ml={ 0 }/>
         </HStack>
-        <ChainLatestBlockInfo slug={ data.slug }/>
-        { statsQuery.data && statsQuery.data.gas_prices && data.config.features.gasTracker.isEnabled && (
+        <ChainLatestBlockInfo chainData={ data }/>
+        { statsQuery.data && statsQuery.data.gas_prices && data.app_config.features.gasTracker.isEnabled && (
           <HStack gap={ 2 }>
             <Box color="text.secondary">Gas price</Box>
             <Skeleton loading={ statsQuery.isPlaceholderData }>
diff --git a/ui/optimismSuperchain/home/LatestTxs.tsx b/ui/optimismSuperchain/home/LatestTxs.tsx
index cd23b5adb5..1ea5a36cd3 100644
--- a/ui/optimismSuperchain/home/LatestTxs.tsx
+++ b/ui/optimismSuperchain/home/LatestTxs.tsx
@@ -2,14 +2,15 @@ import { Box } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import { MultichainProvider } from 'lib/contexts/multichain';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useRoutedChainSelect from 'lib/multichain/useRoutedChainSelect';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { Heading } from 'toolkit/chakra/heading';
 import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
-import ChainSelect from 'ui/shared/multichain/ChainSelect';
+import ChainSelect from 'ui/optimismSuperchain/components/ChainSelect';
+import ComingSoon from 'ui/shared/ComingSoon';
 
-import LatestTxsCrossChain from './LatestTxsCrossChain';
 import LatestTxsLocal from './LatestTxsLocal';
 
 const LatestTxs = () => {
@@ -18,22 +19,28 @@ const LatestTxs = () => {
   const tab = getQueryParamString(router.query.tab);
   const chainSelect = useRoutedChainSelect();
 
+  const isLocalTab = tab === 'txs_local' || !tab;
+
   const tabs = [
     {
       id: 'cross_chain_txs',
       title: 'Cross-chain',
-      component: <LatestTxsCrossChain/>,
+      component: <ComingSoon/>,
     },
     {
       id: 'txs_local',
       title: 'Local',
-      component: chainSelect.value ? <LatestTxsLocal key={ chainSelect.value[0] } chainSlug={ chainSelect.value[0] }/> : null,
+      component: chainSelect.value ? (
+        <MultichainProvider chainId={ chainSelect.value[0] }>
+          <LatestTxsLocal/>
+        </MultichainProvider>
+      ) : null,
     },
   ];
 
   const heading = <Heading level="3" mb={{ base: 3, lg: 0 }}>Latest transactions</Heading>;
 
-  const rightSlot = tab === 'txs_local' ? (
+  const rightSlot = isLocalTab ? (
     <ChainSelect
       loading={ false }
       value={ chainSelect.value }
@@ -46,6 +53,8 @@ const LatestTxs = () => {
       { isMobile && heading }
       <RoutedTabs
         tabs={ tabs }
+        defaultTabId="txs_local"
+        listProps={{ mb: 3 }}
         leftSlot={ !isMobile ? heading : null }
         leftSlotProps={{ mr: 6 }}
         rightSlot={ rightSlot }
diff --git a/ui/optimismSuperchain/home/LatestTxsCrossChain.tsx b/ui/optimismSuperchain/home/LatestTxsCrossChain.tsx
deleted file mode 100644
index afbf1abd67..0000000000
--- a/ui/optimismSuperchain/home/LatestTxsCrossChain.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-
-import { route } from 'nextjs-routes';
-
-import useApiQuery from 'lib/api/useApiQuery';
-import { INTEROP_MESSAGE } from 'stubs/optimismSuperchain';
-import { generateListStub } from 'stubs/utils';
-import { Link } from 'toolkit/chakra/link';
-
-import CrossChainTxs from '../crossChainTxs/CrossChainTxs';
-
-const LatestTxsCrossChain = () => {
-
-  const { data, isError, isPlaceholderData } = useApiQuery('multichain:interop_messages', {
-    queryOptions: {
-      placeholderData: generateListStub<'multichain:interop_messages'>(INTEROP_MESSAGE, 5, { next_page_params: undefined }),
-      select: (data) => ({ ...data, items: data.items.slice(0, 5) }),
-    },
-  });
-
-  return (
-    <>
-      <CrossChainTxs
-        items={ data?.items }
-        isLoading={ isPlaceholderData }
-        isError={ isError }
-        socketType="txs_home_cross_chain"
-      />
-      <Link
-        href={ route({ pathname: '/txs' }) }
-        w="full"
-        justifyContent="center"
-        textStyle="sm"
-        mt={ 3 }
-      >
-        View all transactions
-      </Link>
-    </>
-  );
-};
-
-export default React.memo(LatestTxsCrossChain);
diff --git a/ui/optimismSuperchain/home/LatestTxsLocal.tsx b/ui/optimismSuperchain/home/LatestTxsLocal.tsx
index c2669b2776..39e1c65fca 100644
--- a/ui/optimismSuperchain/home/LatestTxsLocal.tsx
+++ b/ui/optimismSuperchain/home/LatestTxsLocal.tsx
@@ -4,10 +4,9 @@ import type { PaginationParams } from 'ui/shared/pagination/types';
 
 import { route } from 'nextjs/routes';
 
-import multichainConfig from 'configs/multichain';
 import getSocketUrl from 'lib/api/getSocketUrl';
 import useApiQuery from 'lib/api/useApiQuery';
-import { MultichainProvider } from 'lib/contexts/multichain';
+import { useMultichainContext } from 'lib/contexts/multichain';
 import { SocketProvider } from 'lib/socket/context';
 import { TX } from 'stubs/tx';
 import { Link } from 'toolkit/chakra/link';
@@ -25,44 +24,38 @@ const PAGINATION_PARAMS: PaginationParams = {
   resetPage: () => {},
 };
 
-interface Props {
-  chainSlug: string;
-}
+const LatestTxsLocal = () => {
+  const chain = useMultichainContext()?.chain;
 
-const LatestTxsLocal = ({ chainSlug }: Props) => {
   const query = useApiQuery('general:homepage_txs', {
-    chainSlug,
+    chain,
     queryOptions: {
       placeholderData: Array(5).fill(TX),
       select: (data) => data.slice(0, 5),
     },
   });
 
-  const chainData = multichainConfig()?.chains.find(chain => chain.slug === chainSlug);
-
   return (
-    <MultichainProvider chainSlug={ chainSlug }>
-      <SocketProvider url={ getSocketUrl(chainData?.config) }>
-        <TxsContent
-          items={ query.data || [] }
-          isPlaceholderData={ query.isPlaceholderData }
-          isError={ query.isError }
-          pagination={ PAGINATION_PARAMS }
-          sort="default"
-          socketType="txs_home"
-          stickyHeader={ false }
-        />
-        <Link
-          href={ route({ pathname: '/txs', query: { 'chain-slug': chainSlug, tab: 'txs_local' } }) }
-          w="full"
-          justifyContent="center"
-          textStyle="sm"
-          mt={ 3 }
-        >
-          View all transactions
-        </Link>
-      </SocketProvider>
-    </MultichainProvider>
+    <SocketProvider url={ getSocketUrl(chain?.app_config) }>
+      <TxsContent
+        items={ query.data }
+        isPlaceholderData={ query.isPlaceholderData }
+        isError={ query.isError }
+        pagination={ PAGINATION_PARAMS }
+        sort="default"
+        socketType="txs_home"
+        stickyHeader={ false }
+      />
+      <Link
+        href={ route({ pathname: '/txs', query: { chain_id: chain?.id, tab: 'txs_local' } }) }
+        w="full"
+        justifyContent="center"
+        textStyle="sm"
+        mt={ 3 }
+      >
+        View all transactions
+      </Link>
+    </SocketProvider>
   );
 };
 
diff --git a/ui/optimismSuperchain/home/OpSuperchainHome.tsx b/ui/optimismSuperchain/home/OpSuperchainHome.tsx
index b93e97c91d..802c963ca3 100644
--- a/ui/optimismSuperchain/home/OpSuperchainHome.tsx
+++ b/ui/optimismSuperchain/home/OpSuperchainHome.tsx
@@ -1,33 +1,63 @@
-import { Box, HStack } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
+import type { ClusterChainConfig } from 'types/multichain';
+
 import multichainConfig from 'configs/multichain';
 import getSocketUrl from 'lib/api/getSocketUrl';
 import { MultichainProvider } from 'lib/contexts/multichain';
 import { SocketProvider } from 'lib/socket/context';
+import { CollapsibleList } from 'toolkit/chakra/collapsible';
 import HeroBanner from 'ui/home/HeroBanner';
 
 import ChainWidget from './ChainWidget';
 import LatestTxs from './LatestTxs';
 import Stats from './Stats';
 
+const CUT_LENGTH = 4;
+const COLLAPSIBLE_TRIGGER_PROPS = {
+  variant: 'secondary' as const,
+  display: 'block',
+  w: '100%',
+  textAlign: 'center',
+};
+
 const OpSuperchainHome = () => {
+  const chains = multichainConfig()?.chains;
+
+  const renderItem = React.useCallback((chain: ClusterChainConfig) => {
+    return (
+      <MultichainProvider key={ chain.id } chainId={ chain.id }>
+        <SocketProvider url={ getSocketUrl(chain.app_config) }>
+          <ChainWidget data={ chain }/>
+        </SocketProvider>
+      </MultichainProvider>
+    );
+  }, []);
+
+  const text = React.useMemo(() => {
+    const num = (chains?.length ?? 0) - CUT_LENGTH;
+    return [ `+ show ${ num } more chain${ num > 1 ? 's' : '' }`, `- hide ${ num } chain${ num > 1 ? 's' : '' }` ] satisfies [string, string];
+  }, [ chains?.length ]);
+
   return (
     <Box as="main">
       <HeroBanner/>
       <Stats/>
       <LatestTxs/>
-      <HStack mt={ 3 } gap={ 3 } flexWrap="wrap" alignItems="stretch">
-        { multichainConfig()?.chains.map(chain => {
-          return (
-            <MultichainProvider key={ chain.slug } chainSlug={ chain.slug }>
-              <SocketProvider url={ getSocketUrl(chain.config) }>
-                <ChainWidget data={ chain }/>
-              </SocketProvider>
-            </MultichainProvider>
-          );
-        }) }
-      </HStack>
+      { chains && chains.length > 0 && (
+        <CollapsibleList
+          items={ chains }
+          renderItem={ renderItem }
+          cutLength={ CUT_LENGTH }
+          flexDir="row"
+          flexWrap="wrap"
+          alignItems="stretch"
+          gap={ 3 }
+          text={ text }
+          triggerProps={ COLLAPSIBLE_TRIGGER_PROPS }
+        />
+      ) }
     </Box>
   );
 };
diff --git a/ui/optimismSuperchain/home/Stats.tsx b/ui/optimismSuperchain/home/Stats.tsx
index 2e692c0901..e126a5d512 100644
--- a/ui/optimismSuperchain/home/Stats.tsx
+++ b/ui/optimismSuperchain/home/Stats.tsx
@@ -1,26 +1,52 @@
-import { Center, Flex } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
+import useApiQuery from 'lib/api/useApiQuery';
+import { HOMEPAGE_STATS } from 'stubs/optimismSuperchain';
+import type { HomeStatsItem } from 'ui/home/utils';
+import { sortHomeStatsItems, isHomeStatsItemEnabled } from 'ui/home/utils';
 import StatsWidget from 'ui/shared/stats/StatsWidget';
 
+import ChainIndicators from './ChainIndicators';
+
 const Stats = () => {
+  const statsQuery = useApiQuery('multichainStats:pages_main', {
+    queryOptions: {
+      refetchOnMount: false,
+      placeholderData: HOMEPAGE_STATS,
+    },
+  });
+
+  const items: Array<HomeStatsItem> = React.useMemo(() => {
+    return [
+      statsQuery.data?.total_multichain_txns && {
+        id: 'total_txs' as const,
+        label: statsQuery.data.total_multichain_txns.title,
+        value: Number(statsQuery.data.total_multichain_txns.value).toLocaleString(),
+        icon: 'transactions_slim' as const,
+      },
+      statsQuery.data?.total_multichain_addresses && {
+        id: 'wallet_addresses' as const,
+        label: statsQuery.data.total_multichain_addresses.title,
+        value: Number(statsQuery.data.total_multichain_addresses.value).toLocaleString(),
+        icon: 'wallet' as const,
+      },
+    ]
+      .filter(Boolean)
+      .filter(isHomeStatsItemEnabled)
+      .sort(sortHomeStatsItems);
+  }, [ statsQuery.data ]);
+
   return (
     <Flex mt={ 6 } gap={ 2 } flexDirection={{ base: 'column', lg: 'row' }}>
-      <Flex gap={ 2 } flexDirection={{ base: 'row', lg: 'column' }} w={{ base: '100%', lg: '270px' }}>
-        <StatsWidget
-          label="Total transactions"
-          value="TBD"
-          icon="transactions_slim"
-        />
-        <StatsWidget
-          label="Total addresses"
-          value="TBD"
-          icon="wallet"
-        />
-      </Flex>
-      <Center flexGrow={ 1 } minH={{ base: '140px', lg: '180px' }} bgColor={{ _light: 'gray.50', _dark: 'whiteAlpha.100' }} borderRadius="base">
-        Coming soon 🔜
-      </Center>
+      { items.length > 0 && (
+        <Flex gap={ 2 } flexDirection={{ base: 'row', lg: 'column' }} w={{ base: '100%', lg: '270px' }}>
+          { items.map((item) => (
+            <StatsWidget key={ item.id } label={ item.label } value={ item.value } icon={ item.icon } isLoading={ statsQuery.isPlaceholderData }/>
+          )) }
+        </Flex>
+      ) }
+      <ChainIndicators/>
     </Flex>
   );
 };
diff --git a/ui/optimismSuperchain/home/useChartDataQuery.ts b/ui/optimismSuperchain/home/useChartDataQuery.ts
new file mode 100644
index 0000000000..13fcf6312a
--- /dev/null
+++ b/ui/optimismSuperchain/home/useChartDataQuery.ts
@@ -0,0 +1,86 @@
+import { useQuery } from '@tanstack/react-query';
+
+import type { ChartMarketResponse } from 'types/api/charts';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { HOMEPAGE_STATS } from 'stubs/optimismSuperchain';
+import { getChartData } from 'ui/home/indicators/utils/chart';
+
+import useFetchParentChainApi from './useFetchParentChainApi';
+
+interface Props {
+  indicatorId: string;
+}
+
+export default function useChartDataQuery({ indicatorId }: Props) {
+
+  const multichainStatsQuery = useApiQuery('multichainStats:pages_main', {
+    queryOptions: {
+      refetchOnMount: false,
+      placeholderData: HOMEPAGE_STATS,
+      enabled: indicatorId === 'daily_txs',
+      select: (data) => {
+        return data.new_txns_multichain_window?.chart.map((item) => ({ date: new Date(item.date), value: Number(item.value) })) || [];
+      },
+    },
+  });
+
+  const parentChainApiFetch = useFetchParentChainApi();
+
+  const marketCapQuery = useQuery({
+    queryKey: [ 'parent_chain', 'stats', 'charts', 'market' ],
+    queryFn: () => parentChainApiFetch({ path: '/stats/charts/market' }) as Promise<ChartMarketResponse>,
+    refetchOnMount: false,
+    enabled: indicatorId === 'market_cap' || indicatorId === 'coin_price',
+  });
+
+  switch (indicatorId) {
+    case 'daily_txs': {
+      return {
+        data: getChartData(indicatorId, multichainStatsQuery.data || []),
+        isError: multichainStatsQuery.isError,
+        isPending: multichainStatsQuery.isPending,
+      };
+    }
+    case 'coin_price': {
+      return {
+        data: getChartData(indicatorId, marketCapQuery.data?.chart_data.map((item) => ({ date: new Date(item.date), value: item.closing_price })) || []),
+        isError: marketCapQuery.isError,
+        isPending: marketCapQuery.isPending,
+      };
+    }
+    case 'market_cap': {
+      return {
+        data: getChartData(indicatorId, marketCapQuery.data?.chart_data.map((item) => ({
+          date: new Date(item.date),
+          value: (() => {
+            if (item.market_cap !== undefined) {
+              return item.market_cap;
+            }
+
+            if (item.closing_price === null) {
+              return null;
+            }
+
+            return Number(item.closing_price) * Number(marketCapQuery.data?.available_supply ?? 0);
+          })(),
+        })) || []),
+        isError: marketCapQuery.isError,
+        isPending: marketCapQuery.isPending,
+      };
+    }
+
+    default:
+      return {
+        data: [ {
+          id: indicatorId,
+          charts: [],
+          items: [],
+          name: 'Daily transactions',
+        } ],
+        isError: false,
+        isPending: false,
+      };
+  }
+
+}
diff --git a/ui/optimismSuperchain/home/useFetchParentChainApi.tsx b/ui/optimismSuperchain/home/useFetchParentChainApi.tsx
new file mode 100644
index 0000000000..85691fe4bf
--- /dev/null
+++ b/ui/optimismSuperchain/home/useFetchParentChainApi.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import useFetch from 'lib/hooks/useFetch';
+
+interface Params {
+  path: string;
+}
+
+export default function useFetchParentChainApi() {
+  const fetch = useFetch();
+  return React.useCallback(({ path }: Params) => {
+    // For current implementation of the feature we agreed to use the Ethereum mainnet stats data to show it on the homepage
+    // It is very likely this will change once we identify the potential future for the Multichain explorer
+    return fetch(`https://eth.blockscout.com/api/v2${ path }`);
+  }, [ fetch ]);
+}
diff --git a/ui/optimismSuperchain/internalTxs/OpSuperchainInternalTxs.tsx b/ui/optimismSuperchain/internalTxs/OpSuperchainInternalTxs.tsx
index c52fc1247e..f7bf545252 100644
--- a/ui/optimismSuperchain/internalTxs/OpSuperchainInternalTxs.tsx
+++ b/ui/optimismSuperchain/internalTxs/OpSuperchainInternalTxs.tsx
@@ -8,9 +8,9 @@ import { apos } from 'toolkit/utils/htmlEntities';
 import InternalTxsList from 'ui/internalTxs/InternalTxsList';
 import InternalTxsTable from 'ui/internalTxs/InternalTxsTable';
 import useInternalTxsQuery from 'ui/internalTxs/useInternalTxsQuery';
+import ChainSelect from 'ui/optimismSuperchain/components/ChainSelect';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
-import ChainSelect from 'ui/shared/multichain/ChainSelect';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 
@@ -27,6 +27,7 @@ const OpSuperchainInternalTxs = () => {
       onChange={ onSearchTermChange }
       placeholder="Search by transaction hash"
       initialValue={ searchTerm }
+      ml={{ base: 0, lg: 2 }}
     />
   );
 
@@ -34,7 +35,6 @@ const OpSuperchainInternalTxs = () => {
     <ChainSelect
       value={ query.chainValue }
       onValueChange={ query.onChainValueChange }
-      ml={{ base: 0, lg: 2 }}
     />
   );
 
@@ -46,15 +46,15 @@ const OpSuperchainInternalTxs = () => {
         </Box>
       ) }
       <ActionBar mt={ -6 } justifyContent="flex-start">
-        { !isMobile && filterInput }
         { chainSelect }
+        { !isMobile && filterInput }
         <Pagination ml="auto" { ...pagination }/>
       </ActionBar>
     </>
   );
 
   const content = data?.items ? (
-    <MultichainProvider chainSlug={ query.chainValue?.[0] }>
+    <MultichainProvider chainId={ query.chainValue?.[0] }>
       <Box hideBelow="lg">
         <InternalTxsTable data={ data.items } isLoading={ isPlaceholderData }/>
       </Box>
diff --git a/ui/optimismSuperchain/searchResults/SearchResultListItem.tsx b/ui/optimismSuperchain/searchResults/SearchResultListItem.tsx
new file mode 100644
index 0000000000..a3cf5e7f82
--- /dev/null
+++ b/ui/optimismSuperchain/searchResults/SearchResultListItem.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import type { LinkProps } from 'toolkit/chakra/link';
+import { Link } from 'toolkit/chakra/link';
+
+interface Props extends LinkProps {
+  children: React.ReactNode;
+}
+
+const SearchResultListItem = ({ children, ...rest }: Props) => {
+  return (
+    <Link
+      className="group"
+      variant="plain"
+      display="flex"
+      alignItems={{ base: 'flex-start', lg: 'center' }}
+      flexDir={{ base: 'column', lg: 'row' }}
+      rowGap={{ base: 3, lg: 0 }}
+      pl={ 1 }
+      pr={ 4 }
+      py={ 3 }
+      _hover={{
+        color: 'hover',
+      }}
+      borderBottomWidth="1px"
+      borderBottomStyle="solid"
+      borderBottomColor="border.divider"
+      _last={{
+        borderBottomWidth: '0',
+      }}
+      { ...rest }
+    >
+      { children }
+    </Link>
+  );
+};
+
+export default React.memo(SearchResultListItem);
diff --git a/ui/optimismSuperchain/searchResults/SearchResultTabContent.tsx b/ui/optimismSuperchain/searchResults/SearchResultTabContent.tsx
new file mode 100644
index 0000000000..a2717597d3
--- /dev/null
+++ b/ui/optimismSuperchain/searchResults/SearchResultTabContent.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+
+import { ContentLoader } from 'toolkit/components/loaders/ContentLoader';
+import EmptySearchResult from 'ui/shared/EmptySearchResult';
+
+import SearchResultsList from './SearchResultsList';
+import SearchResultsTabAll from './SearchResultsTabAll';
+import type { QueryType, SearchQueries } from './utils';
+
+const EMPTY_SEARCH_NAME_MAP: Record<QueryType, string> = {
+  addresses: 'addresses',
+  tokens: 'tokens',
+  blockNumbers: 'block numbers',
+  blocks: 'blocks',
+  transactions: 'transactions',
+  nfts: 'NFTs',
+  domains: 'names',
+};
+
+interface Props {
+  isLoading: boolean;
+  searchTerm: string;
+  queries: SearchQueries;
+  queryType: QueryType | undefined;
+  beforeContent?: React.ReactNode;
+}
+
+const SearchResultTabContent = ({ isLoading, searchTerm, queries, queryType, beforeContent }: Props) => {
+  const content = (() => {
+    if (isLoading) {
+      return <ContentLoader maxW="240px"/>;
+    }
+
+    if (!searchTerm) {
+      return (
+        <EmptySearchResult
+          title="Looking for something?"
+          text="Try searching by address, smart contract, transaction, block, token or NFT"
+        />
+      );
+    }
+
+    const hasResults = queryType ?
+      queries[queryType]?.data?.pages?.[0]?.items && queries[queryType]?.data?.pages?.[0]?.items?.length > 0 :
+      Object.values(queries).some((query) => query.data?.pages?.[0]?.items?.length > 0);
+
+    if (!hasResults) {
+      return (
+        <EmptySearchResult
+          title={ queryType ? `No ${ EMPTY_SEARCH_NAME_MAP[queryType] } found` : 'No results found' }
+          text="It seems we can't find any results based on your request."
+        />
+      );
+    }
+
+    switch (queryType) {
+      case 'addresses':
+      case 'blocks':
+      case 'blockNumbers':
+      case 'transactions':
+      case 'tokens':
+      case 'nfts':
+      case 'domains':
+        return <SearchResultsList queryType={ queryType } query={ queries[queryType] }/>;
+      default:
+        return <SearchResultsTabAll queries={ queries }/>;
+    }
+  })();
+
+  return (
+    <>
+      { beforeContent }
+      { content }
+    </>
+  );
+};
+
+export default React.memo(SearchResultTabContent);
diff --git a/ui/optimismSuperchain/searchResults/SearchResults.pw.tsx b/ui/optimismSuperchain/searchResults/SearchResults.pw.tsx
new file mode 100644
index 0000000000..58310bacfe
--- /dev/null
+++ b/ui/optimismSuperchain/searchResults/SearchResults.pw.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+
+import type { GetAddressResponse } from '@blockscout/multichain-aggregator-types';
+
+import * as opSuperchainMock from 'mocks/multichain/opSuperchain';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
+
+import SearchResults from './SearchResults';
+
+const SEARCH_TERM = 'usd';
+
+const hooksConfig = {
+  router: {
+    query: { q: SEARCH_TERM },
+  },
+};
+
+test.beforeEach(async({ mockApiResponse, mockMultichainConfig, mockEnvs, mockAssetResponse, mockTextAd }) => {
+
+  await mockMultichainConfig();
+  await mockEnvs(ENVS_MAP.opSuperchain);
+  await mockTextAd();
+
+  await mockApiResponse('multichainAggregator:search_addresses', {
+    items: [
+      opSuperchainMock.searchAddressesA,
+      ...Array(10).fill('').map((_, index) => ({
+        ...opSuperchainMock.searchAddressesB,
+        hash: `0x00883b68A6EcF2ea3D47BD735E5125a0B7625B5${ index }`,
+      })) as Array<GetAddressResponse>,
+    ],
+    next_page_params: undefined,
+  }, { queryParams: { q: SEARCH_TERM } });
+  await mockApiResponse('multichainAggregator:search_tokens', {
+    items: [ opSuperchainMock.searchTokenA ],
+    next_page_params: undefined,
+  }, { queryParams: { q: SEARCH_TERM } });
+  await mockApiResponse('multichainAggregator:search_blocks', { items: [ ], next_page_params: undefined }, { queryParams: { q: SEARCH_TERM } });
+  await mockApiResponse('multichainAggregator:search_block_numbers', { items: [ ], next_page_params: undefined }, { queryParams: { q: SEARCH_TERM } });
+  await mockApiResponse('multichainAggregator:search_transactions', { items: [ ], next_page_params: undefined }, { queryParams: { q: SEARCH_TERM } });
+  await mockApiResponse('multichainAggregator:search_nfts', { items: [ ], next_page_params: undefined }, { queryParams: { q: SEARCH_TERM } });
+  await mockApiResponse('multichainAggregator:search_domains', { items: [ ], next_page_params: undefined }, { queryParams: { q: SEARCH_TERM } });
+
+  await mockAssetResponse(opSuperchainMock.chainDataA.logo as string, './playwright/mocks/image_s.jpg');
+});
+
+test.describe('desktop', () => {
+  test.use({ viewport: pwConfig.viewport.xl });
+
+  test('base view', async({ render }) => {
+    const component = await render(
+      <SearchResults/>,
+      { hooksConfig },
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: pwConfig.viewport.mobile });
+
+  test('base view', async({ render }) => {
+    const component = await render(
+      <SearchResults/>,
+      { hooksConfig },
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+});
diff --git a/ui/optimismSuperchain/searchResults/SearchResults.tsx b/ui/optimismSuperchain/searchResults/SearchResults.tsx
new file mode 100644
index 0000000000..6bfca73d9f
--- /dev/null
+++ b/ui/optimismSuperchain/searchResults/SearchResults.tsx
@@ -0,0 +1,152 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import useRoutedChainSelect from 'lib/multichain/useRoutedChainSelect';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
+import ChainSelect from 'ui/optimismSuperchain/components/ChainSelect';
+import SearchResultsInput from 'ui/searchResults/SearchResultsInput';
+import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
+import * as Layout from 'ui/shared/layout/components';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import HeaderAlert from 'ui/snippets/header/HeaderAlert';
+import HeaderDesktop from 'ui/snippets/header/HeaderDesktop';
+import HeaderMobile from 'ui/snippets/header/HeaderMobile';
+
+import SearchResultTabContent from './SearchResultTabContent';
+import useSearchQuery from './useSearchQuery';
+import type { QueryType } from './utils';
+import { SEARCH_TABS_IDS, SEARCH_TABS_NAMES } from './utils';
+
+const TAB_LIST_PROPS = {
+  marginBottom: 0,
+  pt: 6,
+  pb: 6,
+  marginTop: -6,
+  minW: { base: 'auto', lg: '1080px' },
+};
+const PRESERVED_PARAMS = [ 'q', 'tab', 'chain_id' ];
+
+const SearchResults = () => {
+  const isMobile = useIsMobile();
+
+  const chainSelect = useRoutedChainSelect({
+    withAllOption: true,
+    persistedParams: [ 'q', 'tab' ],
+  });
+  const chainId = chainSelect.value?.[0];
+  const { searchTerm, debouncedSearchTerm, handleSearchTermChange, handleSubmit, queries } = useSearchQuery({
+    chainId: chainId === 'all' ? undefined : chainId,
+  });
+
+  const isLoading = Object.values(queries).some((query) => query.isPending);
+
+  const handleNavigateToResults = React.useCallback((searchTerm: string) => {
+    handleSearchTermChange(searchTerm);
+  }, [ handleSearchTermChange ]);
+
+  const renderSearchBar = React.useCallback(() => {
+    return (
+      <SearchResultsInput
+        searchTerm={ searchTerm }
+        handleSubmit={ handleSubmit }
+        handleSearchTermChange={ handleSearchTermChange }
+      />
+    );
+  }, [ handleSearchTermChange, handleSubmit, searchTerm ]);
+
+  const totalResults = (() => {
+    if (isLoading) {
+      return;
+    }
+
+    const isOverflow = Object.values(queries).some((query) => query.data?.pages?.some((page) => page.next_page_params));
+
+    const num = Object.values(queries).reduce((acc, query) => {
+      return acc + (query.data?.pages[0]?.items.length ?? 0);
+    }, 0);
+
+    return { num, isOverflow };
+  })();
+
+  const chainSelectElement = (
+    <ChainSelect
+      value={ chainSelect.value }
+      onValueChange={ chainSelect.onValueChange }
+      mode="default"
+      withAllOption
+      w={{ base: 'full', lg: 'fit-content' }}
+      mt={{ base: -3, lg: 0 }}
+      mb={{ base: 6, lg: 0 }}
+    />
+  );
+
+  const detailedTabs = Object.entries(SEARCH_TABS_IDS).map(([ key, value ]) => {
+    const queryType = key as QueryType;
+
+    return {
+      id: value,
+      title: SEARCH_TABS_NAMES[queryType],
+      component: (
+        <SearchResultTabContent
+          queries={ queries }
+          queryType={ queryType }
+          isLoading={ isLoading }
+          searchTerm={ debouncedSearchTerm }
+          beforeContent={ isMobile ? chainSelectElement : undefined }
+        />
+      ),
+    };
+  });
+
+  const tabs = [
+    {
+      id: 'all',
+      title: 'All',
+      component: (
+        <SearchResultTabContent
+          queries={ queries }
+          queryType={ undefined }
+          isLoading={ isLoading }
+          searchTerm={ debouncedSearchTerm }
+          beforeContent={ isMobile ? chainSelectElement : undefined }
+        />
+      ),
+    },
+    ...detailedTabs,
+  ];
+
+  return (
+    <>
+      <HeaderMobile onGoToSearchResults={ handleNavigateToResults }/>
+      <Layout.MainArea>
+        <Layout.SideBar/>
+        <Layout.MainColumn>
+          <HeaderAlert/>
+          <HeaderDesktop renderSearchBar={ renderSearchBar }/>
+          <AppErrorBoundary>
+            <Layout.Content>
+              <PageTitle title="Search results"/>
+              <Skeleton loading={ totalResults === undefined } mb={ 6 } w="fit-content">
+                Found <chakra.span fontWeight={ 700 }>{ totalResults?.num }{ totalResults?.isOverflow ? '+' : '' }</chakra.span> matching results
+              </Skeleton>
+              <RoutedTabs
+                tabs={ tabs }
+                variant="secondary"
+                size="sm"
+                preservedParams={ PRESERVED_PARAMS }
+                listProps={ isMobile ? undefined : TAB_LIST_PROPS }
+                rightSlot={ isMobile ? undefined : chainSelectElement }
+                stickyEnabled={ !isMobile }
+              />
+            </Layout.Content>
+          </AppErrorBoundary>
+        </Layout.MainColumn>
+      </Layout.MainArea>
+      <Layout.Footer/>
+    </>
+  );
+};
+
+export default React.memo(SearchResults);
diff --git a/ui/optimismSuperchain/searchResults/SearchResultsList.tsx b/ui/optimismSuperchain/searchResults/SearchResultsList.tsx
new file mode 100644
index 0000000000..648bea02cf
--- /dev/null
+++ b/ui/optimismSuperchain/searchResults/SearchResultsList.tsx
@@ -0,0 +1,99 @@
+import { Box, Flex } from '@chakra-ui/react';
+import React from 'react';
+import { useInView } from 'react-intersection-observer';
+
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+
+import multichainConfig from 'configs/multichain';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import { ContentLoader } from 'toolkit/components/loaders/ContentLoader';
+
+import SearchResultItemAddress from './items/SearchResultItemAddress';
+import SearchResultItemBlock from './items/SearchResultItemBlock';
+import SearchResultItemBlockNumber from './items/SearchResultItemBlockNumber';
+import SearchResultItemDomain from './items/SearchResultItemDomain';
+import SearchResultItemToken from './items/SearchResultItemToken';
+import SearchResultItemTx from './items/SearchResultItemTx';
+import type { QueryType, SearchQueries } from './utils';
+
+interface Props<T extends QueryType> {
+  queryType: T;
+  query: SearchQueries[T];
+  maxItems?: number;
+}
+
+const SearchResultsList = <T extends QueryType>({ queryType, query, maxItems = Infinity }: Props<T>) => {
+  const config = multichainConfig();
+  const isMobile = useIsMobile();
+  const { ref: cutRef } = useInView({
+    triggerOnce: false,
+    skip: maxItems !== Infinity || query.isFetchingNextPage || !query.hasNextPage,
+    onChange: (inView) => {
+      if (inView) {
+        query.fetchNextPage();
+      }
+    },
+  });
+
+  return (
+    <Flex flexDir="column" textStyle="sm">
+      { query.data?.pages?.slice(0, maxItems !== Infinity ? 1 : Infinity).map((page, index) => (
+        <React.Fragment key={ index }>
+          { page.items.slice(0, maxItems).map((item) => {
+
+            const chain = 'chain_id' in item ? config?.chains.find((chain) => chain.id === item.chain_id) : undefined;
+
+            switch (queryType) {
+              case 'tokens':
+              case 'nfts': {
+                const chain = 'chain_infos' in item ? config?.chains.find((chain) => chain.id === Object.keys(item.chain_infos)[0]) : undefined;
+                if (!chain) {
+                  return null;
+                }
+                const token = item as multichain.AggregatedTokenInfo;
+                return <SearchResultItemToken key={ token.address_hash + chain.id } data={ token } chain={ chain } isMobile={ isMobile }/>;
+              }
+              case 'blockNumbers': {
+                if (!chain) {
+                  return null;
+                }
+                const block = item as multichain.ChainBlockNumber;
+                return <SearchResultItemBlockNumber key={ block.block_number + String(chain.id) } data={ block } chain={ chain }/>;
+              }
+              case 'blocks': {
+                if (!chain) {
+                  return null;
+                }
+                const block = item as multichain.Hash;
+                return <SearchResultItemBlock key={ block.hash + chain.id } data={ block } chain={ chain }/>;
+              }
+              case 'transactions': {
+                if (!chain) {
+                  return null;
+                }
+                const block = item as multichain.Hash;
+                return <SearchResultItemTx key={ block.hash + chain.id } data={ block } chain={ chain }/>;
+              }
+              case 'addresses': {
+                const address = item as multichain.GetAddressResponse;
+                return <SearchResultItemAddress key={ address.hash } data={ address } isMobile={ isMobile }/>;
+              }
+              case 'domains': {
+                const domain = item as multichain.Domain;
+                return <SearchResultItemDomain key={ domain.address } data={ domain }/>;
+              }
+              default:
+                return null;
+            }
+          }) }
+        </React.Fragment>
+      )) }
+
+      { query.isFetching && <ContentLoader maxW="240px" mt={ 6 }/> }
+
+      <Box h="0" w="100px" ref={ cutRef }/>
+    </Flex>
+  );
+};
+
+export default SearchResultsList;
diff --git a/ui/optimismSuperchain/searchResults/SearchResultsTabAll.tsx b/ui/optimismSuperchain/searchResults/SearchResultsTabAll.tsx
new file mode 100644
index 0000000000..d771270960
--- /dev/null
+++ b/ui/optimismSuperchain/searchResults/SearchResultsTabAll.tsx
@@ -0,0 +1,54 @@
+import { Box, Flex, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs/routes';
+
+import { Link } from 'toolkit/chakra/link';
+
+import SearchResultsList from './SearchResultsList';
+import type { QueryType, SearchQueries } from './utils';
+import { SEARCH_TABS_NAMES, SEARCH_TABS_IDS } from './utils';
+
+const MAX_ITEMS_IN_GROUP = 5;
+
+interface Props {
+  queries: SearchQueries;
+}
+
+const SearchResultsTabAll = ({ queries }: Props) => {
+  return (
+    <Flex flexDir="column" rowGap={ 8 }>
+      { Object.entries(queries)
+        .filter(([ , query ]) => query.data?.pages?.[0]?.items?.length > 0)
+        .filter(([ queryType ]) => SEARCH_TABS_NAMES[queryType as QueryType])
+        .map((items) => {
+          const queryType = items[0] as QueryType;
+          const query = items[1] as SearchQueries[QueryType];
+
+          const hasMore = Number(query.data?.pages[0].items.length) > MAX_ITEMS_IN_GROUP;
+
+          return (
+            <Box key={ queryType }>
+              <Text color="text.secondary" fontWeight={ 600 } textStyle="sm" mb={ 2 }>{ SEARCH_TABS_NAMES[queryType] }</Text>
+              <SearchResultsList queryType={ queryType } query={ query } maxItems={ MAX_ITEMS_IN_GROUP }/>
+              { hasMore && (
+                <Link
+                  pt={ 2 }
+                  borderTopWidth="1px"
+                  borderTopStyle="solid"
+                  borderTopColor="border.divider"
+                  textStyle="sm"
+                  w="full"
+                  href={ route({ pathname: '/search-results', query: { tab: SEARCH_TABS_IDS[queryType] } }) }
+                >
+                  View all
+                </Link>
+              ) }
+            </Box>
+          );
+        }) }
+    </Flex>
+  );
+};
+
+export default React.memo(SearchResultsTabAll);
diff --git a/ui/optimismSuperchain/searchResults/__screenshots__/SearchResults.pw.tsx_default_desktop-base-view-1.png b/ui/optimismSuperchain/searchResults/__screenshots__/SearchResults.pw.tsx_default_desktop-base-view-1.png
new file mode 100644
index 0000000000..f014a3b2f9
Binary files /dev/null and b/ui/optimismSuperchain/searchResults/__screenshots__/SearchResults.pw.tsx_default_desktop-base-view-1.png differ
diff --git a/ui/optimismSuperchain/searchResults/__screenshots__/SearchResults.pw.tsx_default_mobile-base-view-1.png b/ui/optimismSuperchain/searchResults/__screenshots__/SearchResults.pw.tsx_default_mobile-base-view-1.png
new file mode 100644
index 0000000000..091fbc04e9
Binary files /dev/null and b/ui/optimismSuperchain/searchResults/__screenshots__/SearchResults.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/optimismSuperchain/searchResults/items/SearchResultItemAddress.tsx b/ui/optimismSuperchain/searchResults/items/SearchResultItemAddress.tsx
new file mode 100644
index 0000000000..29cad056ed
--- /dev/null
+++ b/ui/optimismSuperchain/searchResults/items/SearchResultItemAddress.tsx
@@ -0,0 +1,48 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+
+import { route } from 'nextjs/routes';
+
+import * as contract from 'lib/multichain/contract';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+
+import SearchResultListItem from '../SearchResultListItem';
+
+interface Props {
+  data: multichain.GetAddressResponse;
+  isMobile?: boolean;
+}
+
+const SearchResultItemAddress = ({ data, isMobile }: Props) => {
+
+  const contractName = contract.getName(data);
+
+  return (
+    <SearchResultListItem
+      href={ route({ pathname: '/address/[hash]', query: { hash: data.hash } }) }
+    >
+      <Box w={{ base: '100%', lg: '200px' }}>
+        <AddressEntity
+          address={{
+            hash: data.hash,
+            is_contract: contract.isContract(data),
+            is_verified: contract.isVerified(data),
+          }}
+          truncation={ !isMobile ? 'constant' : 'dynamic' }
+          noLink
+          noCopy
+          fontWeight={{ base: '600', lg: '700' }}
+        />
+      </Box>
+      { contractName && (
+        <Box color="text.secondary" _groupHover={{ color: 'inherit' }} fontWeight={{ base: '400', lg: '500' }}>
+          { contractName }
+        </Box>
+      ) }
+    </SearchResultListItem>
+  );
+};
+
+export default React.memo(SearchResultItemAddress);
diff --git a/ui/optimismSuperchain/searchResults/items/SearchResultItemBlock.tsx b/ui/optimismSuperchain/searchResults/items/SearchResultItemBlock.tsx
new file mode 100644
index 0000000000..ce63f58ac4
--- /dev/null
+++ b/ui/optimismSuperchain/searchResults/items/SearchResultItemBlock.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+import type { ClusterChainConfig } from 'types/multichain';
+
+import { route } from 'nextjs/routes';
+
+import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+
+import SearchResultListItem from '../SearchResultListItem';
+
+interface Props {
+  data: multichain.Hash;
+  chain: ClusterChainConfig;
+}
+
+const SearchResultItemBlock = ({ data, chain }: Props) => {
+  return (
+    <SearchResultListItem
+      href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.hash) } }, { chain }) }
+    >
+      <BlockEntity
+        number={ String(data.hash) }
+        chain={ chain }
+        noLink
+        noCopy
+        fontWeight={{ base: '600', lg: '700' }}
+        w="100%"
+      />
+    </SearchResultListItem>
+  );
+};
+
+export default React.memo(SearchResultItemBlock);
diff --git a/ui/optimismSuperchain/searchResults/items/SearchResultItemBlockNumber.tsx b/ui/optimismSuperchain/searchResults/items/SearchResultItemBlockNumber.tsx
new file mode 100644
index 0000000000..9883f5cbe3
--- /dev/null
+++ b/ui/optimismSuperchain/searchResults/items/SearchResultItemBlockNumber.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+import type { ClusterChainConfig } from 'types/multichain';
+
+import { route } from 'nextjs/routes';
+
+import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+
+import SearchResultListItem from '../SearchResultListItem';
+
+interface Props {
+  data: multichain.ChainBlockNumber;
+  chain: ClusterChainConfig;
+}
+
+const SearchResultItemBlockNumber = ({ data, chain }: Props) => {
+  return (
+    <SearchResultListItem
+      href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.block_number) } }, { chain }) }
+    >
+      <BlockEntity
+        number={ data.block_number }
+        chain={ chain }
+        noLink
+        noCopy
+        fontWeight={{ base: '600', lg: '700' }}
+      />
+    </SearchResultListItem>
+  );
+};
+
+export default React.memo(SearchResultItemBlockNumber);
diff --git a/ui/optimismSuperchain/searchResults/items/SearchResultItemDomain.tsx b/ui/optimismSuperchain/searchResults/items/SearchResultItemDomain.tsx
new file mode 100644
index 0000000000..d9351680fd
--- /dev/null
+++ b/ui/optimismSuperchain/searchResults/items/SearchResultItemDomain.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import type * as bens from '@blockscout/bens-types';
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+
+import { route } from 'nextjs/routes';
+
+import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
+
+import SearchResultListItem from '../SearchResultListItem';
+
+interface Props {
+  data: multichain.Domain;
+}
+
+const SearchResultItemDomain = ({ data }: Props) => {
+  return (
+    <SearchResultListItem
+      href={ route({ pathname: '/address/[hash]', query: { hash: String(data.address) } }) }
+    >
+      <EnsEntity
+        domain={ data.name }
+        protocol={ data.protocol as bens.ProtocolInfo }
+        noLink
+        noCopy
+        fontWeight={{ base: '600', lg: '700' }}
+        w="100%"
+      />
+    </SearchResultListItem>
+  );
+};
+
+export default React.memo(SearchResultItemDomain);
diff --git a/ui/optimismSuperchain/searchResults/items/SearchResultItemToken.tsx b/ui/optimismSuperchain/searchResults/items/SearchResultItemToken.tsx
new file mode 100644
index 0000000000..22567e94d5
--- /dev/null
+++ b/ui/optimismSuperchain/searchResults/items/SearchResultItemToken.tsx
@@ -0,0 +1,80 @@
+import { Box, Flex, Text } from '@chakra-ui/react';
+import { mapValues } from 'es-toolkit';
+import React from 'react';
+
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+import type { TokenType } from 'types/api/token';
+import type { ClusterChainConfig } from 'types/multichain';
+
+import { route } from 'nextjs/routes';
+
+import * as contract from 'lib/multichain/contract';
+import shortenString from 'lib/shortenString';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+import IconSvg from 'ui/shared/IconSvg';
+
+import SearchResultListItem from '../SearchResultListItem';
+
+interface Props {
+  data: multichain.AggregatedTokenInfo;
+  chain: ClusterChainConfig;
+  isMobile?: boolean;
+}
+
+const SearchResultItemToken = ({ data, chain, isMobile }: Props) => {
+
+  const isVerified = contract.isVerified({ chain_infos: mapValues(data.chain_infos, (chainInfo) => ({ ...chainInfo, is_contract: true, coin_balance: '0' })) });
+
+  return (
+    <SearchResultListItem
+      href={ route({ pathname: '/token/[hash]', query: { hash: data.address_hash } }, { chain }) }
+    >
+      <Box w={{ base: '100%', lg: '200px' }}>
+        <TokenEntity
+          token={{
+            address_hash: data.address_hash,
+            icon_url: data.icon_url ?? null,
+            name: data.name ?? 'Unnamed token',
+            symbol: data.symbol ?? '',
+            type: data.type as unknown as TokenType,
+            reputation: null,
+          }}
+          chain={ chain }
+          noLink
+          jointSymbol
+          noCopy
+          fontWeight={{ base: '600', lg: '700' }}
+        />
+      </Box>
+      <Flex alignItems="center" w={{ base: '100%', lg: 'auto' }} flexGrow={ 1 }>
+        <Box
+          overflow="hidden"
+          whiteSpace="nowrap"
+          textOverflow="ellipsis"
+          fontWeight={{ base: '400', lg: '500' }}
+          color="text.secondary"
+          _groupHover={{ color: 'inherit' }}
+        >
+          { isMobile ? shortenString(data.address_hash) : (
+            <HashStringShortenDynamic hash={ data.address_hash }/>
+          ) }
+        </Box>
+        { isVerified && <IconSvg name="status/success" boxSize="14px" color="green.500" ml={ 1 } flexShrink={ 0 }/> }
+        <Text
+          overflow="hidden"
+          whiteSpace="nowrap"
+          textOverflow="ellipsis"
+          fontWeight={{ base: '400', lg: '600' }}
+          ml="auto"
+          maxW={{ base: '60%', lg: 'unset' }}
+        >
+          { (data.type as string) === 'ERC-20' && data.exchange_rate && `$${ Number(data.exchange_rate).toLocaleString() }` }
+          { (data.type as string) !== 'ERC-20' && data.total_supply && `Items ${ Number(data.total_supply).toLocaleString() }` }
+        </Text>
+      </Flex>
+    </SearchResultListItem>
+  );
+};
+
+export default React.memo(SearchResultItemToken);
diff --git a/ui/optimismSuperchain/searchResults/items/SearchResultItemTx.tsx b/ui/optimismSuperchain/searchResults/items/SearchResultItemTx.tsx
new file mode 100644
index 0000000000..c8ef08c03e
--- /dev/null
+++ b/ui/optimismSuperchain/searchResults/items/SearchResultItemTx.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import type * as multichain from '@blockscout/multichain-aggregator-types';
+import type { ClusterChainConfig } from 'types/multichain';
+
+import { route } from 'nextjs/routes';
+
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+
+import SearchResultListItem from '../SearchResultListItem';
+
+interface Props {
+  data: multichain.Hash;
+  chain: ClusterChainConfig;
+}
+
+const SearchResultItemTx = ({ data, chain }: Props) => {
+  return (
+    <SearchResultListItem
+      href={ route({ pathname: '/tx/[hash]', query: { hash: String(data.hash) } }, { chain }) }
+    >
+      <TxEntity
+        hash={ data.hash }
+        chain={ chain }
+        noLink
+        noCopy
+        fontWeight="700"
+        w="100%"
+      />
+    </SearchResultListItem>
+  );
+};
+
+export default React.memo(SearchResultItemTx);
diff --git a/ui/optimismSuperchain/searchResults/useSearchQuery.tsx b/ui/optimismSuperchain/searchResults/useSearchQuery.tsx
new file mode 100644
index 0000000000..0ce3d971f0
--- /dev/null
+++ b/ui/optimismSuperchain/searchResults/useSearchQuery.tsx
@@ -0,0 +1,91 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import useApiInfiniteQuery from 'lib/api/useApiInfiniteQuery';
+import useDebounce from 'lib/hooks/useDebounce';
+import getQueryParamString from 'lib/router/getQueryParamString';
+
+interface Props {
+  chainId: string | undefined;
+}
+
+export default function useSearchQuery({ chainId }: Props) {
+  const router = useRouter();
+  const q = React.useRef(getQueryParamString(router.query.q));
+  const initialValue = q.current;
+
+  const [ searchTerm, setSearchTerm ] = React.useState(initialValue);
+
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+
+  const addressesQuery = useApiInfiniteQuery({
+    resourceName: 'multichainAggregator:search_addresses',
+    queryParams: { q: debouncedSearchTerm, chain_id: chainId },
+  });
+
+  const tokensQuery = useApiInfiniteQuery({
+    resourceName: 'multichainAggregator:search_tokens',
+    queryParams: { q: debouncedSearchTerm, chain_id: chainId },
+  });
+
+  const blockNumbersQuery = useApiInfiniteQuery({
+    resourceName: 'multichainAggregator:search_block_numbers',
+    queryParams: { q: debouncedSearchTerm, chain_id: chainId },
+  });
+
+  const blocksQuery = useApiInfiniteQuery({
+    resourceName: 'multichainAggregator:search_blocks',
+    queryParams: { q: debouncedSearchTerm, chain_id: chainId },
+  });
+
+  const nftsQuery = useApiInfiniteQuery({
+    resourceName: 'multichainAggregator:search_nfts',
+    queryParams: { q: debouncedSearchTerm, chain_id: chainId },
+  });
+
+  const transactionsQuery = useApiInfiniteQuery({
+    resourceName: 'multichainAggregator:search_transactions',
+    queryParams: { q: debouncedSearchTerm, chain_id: chainId },
+  });
+
+  const domainsQuery = useApiInfiniteQuery({
+    resourceName: 'multichainAggregator:search_domains',
+    queryParams: { q: debouncedSearchTerm, chain_id: chainId },
+  });
+
+  const handleSearchTermChange = React.useCallback((value: string) => {
+    setSearchTerm(value);
+    router.push({
+      pathname: router.pathname,
+      query: { ...router.query, q: value },
+    });
+  }, [ router ]);
+
+  const handleSubmit = React.useCallback((event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+  }, [ ]);
+
+  const queries = React.useMemo(() => ({
+    addresses: addressesQuery,
+    tokens: tokensQuery,
+    blockNumbers: blockNumbersQuery,
+    blocks: blocksQuery,
+    nfts: nftsQuery,
+    transactions: transactionsQuery,
+    domains: domainsQuery,
+  }), [ addressesQuery, tokensQuery, blockNumbersQuery, blocksQuery, nftsQuery, transactionsQuery, domainsQuery ]);
+
+  return React.useMemo(() => ({
+    searchTerm,
+    debouncedSearchTerm,
+    handleSearchTermChange,
+    handleSubmit,
+    queries,
+  }), [
+    queries,
+    debouncedSearchTerm,
+    handleSearchTermChange,
+    handleSubmit,
+    searchTerm,
+  ]);
+}
diff --git a/ui/optimismSuperchain/searchResults/utils.ts b/ui/optimismSuperchain/searchResults/utils.ts
new file mode 100644
index 0000000000..ea9b2e8c19
--- /dev/null
+++ b/ui/optimismSuperchain/searchResults/utils.ts
@@ -0,0 +1,33 @@
+import type { ReturnType } from 'lib/api/useApiInfiniteQuery';
+
+export interface SearchQueries {
+  addresses: ReturnType<'multichainAggregator:search_addresses'>;
+  tokens: ReturnType<'multichainAggregator:search_tokens'>;
+  blockNumbers: ReturnType<'multichainAggregator:search_block_numbers'>;
+  blocks: ReturnType<'multichainAggregator:search_blocks'>;
+  transactions: ReturnType<'multichainAggregator:search_transactions'>;
+  nfts: ReturnType<'multichainAggregator:search_nfts'>;
+  domains: ReturnType<'multichainAggregator:search_domains'>;
+}
+
+export type QueryType = keyof SearchQueries;
+
+export const SEARCH_TABS_NAMES: Record<QueryType, string> = {
+  tokens: 'Tokens (ERC-20)',
+  nfts: 'NFTs (ERC-721 & 1155)',
+  addresses: 'Addresses',
+  blockNumbers: 'Block numbers',
+  blocks: 'Blocks',
+  transactions: 'Transactions',
+  domains: 'Names',
+};
+
+export const SEARCH_TABS_IDS: Record<QueryType, string> = {
+  addresses: 'addresses',
+  tokens: 'tokens',
+  blockNumbers: 'block_numbers',
+  blocks: 'blocks',
+  transactions: 'transactions',
+  nfts: 'nfts',
+  domains: 'names',
+};
diff --git a/ui/optimismSuperchain/stats/OpSuperchainStats.tsx b/ui/optimismSuperchain/stats/OpSuperchainStats.tsx
new file mode 100644
index 0000000000..916e84b5f5
--- /dev/null
+++ b/ui/optimismSuperchain/stats/OpSuperchainStats.tsx
@@ -0,0 +1,87 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import multichainConfig from 'configs/multichain';
+import { MultichainProvider } from 'lib/contexts/multichain';
+import useRoutedChainSelect from 'lib/multichain/useRoutedChainSelect';
+import useEtherscanRedirects from 'lib/router/useEtherscanRedirects';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import ChartsWidgetsList from 'ui/stats/ChartsWidgetsList';
+import NumberWidgetsList from 'ui/stats/NumberWidgetsList';
+import StatsFilters from 'ui/stats/StatsFilters';
+import useStats from 'ui/stats/useStats';
+
+import ChainSelect from '../components/ChainSelect';
+
+const OpSuperchainStats = () => {
+  useEtherscanRedirects();
+
+  const chainIds = React.useMemo(() => {
+    return multichainConfig()?.chains
+      .filter((chain) => chain.app_config.features.stats.isEnabled)
+      .map((chain) => chain.id);
+  }, []);
+
+  const chainSelect = useRoutedChainSelect({ chainIds });
+
+  const chain = React.useMemo(() => {
+    return multichainConfig()?.chains.find((chain) => chain.id === chainSelect.value?.[0]);
+  }, [ chainSelect.value ]);
+
+  const {
+    isPlaceholderData,
+    isError,
+    sections,
+    currentSection,
+    handleSectionChange,
+    interval,
+    handleIntervalChange,
+    handleFilterChange,
+    displayedCharts,
+    filterQuery,
+    initialFilterQuery,
+  } = useStats({ chain });
+
+  return (
+    <>
+      <PageTitle title="Charts & stats"/>
+      <ChainSelect
+        value={ chainSelect.value }
+        onValueChange={ chainSelect.onValueChange }
+        chainIds={ chainIds }
+        mode="default"
+        mb={ 3 }
+      />
+      <MultichainProvider chainId={ chainSelect.value?.[0] }>
+        <Box mb={{ base: 6, sm: 8 }}>
+          <NumberWidgetsList/>
+        </Box>
+
+        <Box mb={{ base: 6, sm: 8 }}>
+          <StatsFilters
+            isLoading={ isPlaceholderData }
+            initialFilterValue={ initialFilterQuery }
+            sections={ sections }
+            currentSection={ currentSection }
+            onSectionChange={ handleSectionChange }
+            interval={ interval }
+            onIntervalChange={ handleIntervalChange }
+            onFilterInputChange={ handleFilterChange }
+          />
+        </Box>
+
+        <ChartsWidgetsList
+          filterQuery={ filterQuery }
+          initialFilterQuery={ initialFilterQuery }
+          isError={ isError }
+          isPlaceholderData={ isPlaceholderData }
+          charts={ displayedCharts }
+          interval={ interval }
+        />
+      </MultichainProvider>
+
+    </>
+  );
+};
+
+export default OpSuperchainStats;
diff --git a/ui/optimismSuperchain/token/OpSuperchainToken.tsx b/ui/optimismSuperchain/token/OpSuperchainToken.tsx
index cd24cf5952..0562ce9544 100644
--- a/ui/optimismSuperchain/token/OpSuperchainToken.tsx
+++ b/ui/optimismSuperchain/token/OpSuperchainToken.tsx
@@ -1,39 +1,24 @@
-import { Flex } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import multichainConfig from 'configs/multichain';
+import getSocketUrl from 'lib/api/getSocketUrl';
+import { MultichainProvider } from 'lib/contexts/multichain';
 import getQueryParamString from 'lib/router/getQueryParamString';
-import AddressQrCode from 'ui/address/details/AddressQrCode';
-import TextAd from 'ui/shared/ad/TextAd';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import PageTitle from 'ui/shared/Page/PageTitle';
+import { SocketProvider } from 'lib/socket/context';
+import Token from 'ui/pages/Token';
 
 const OpSuperchainToken = () => {
   const router = useRouter();
-
-  const isLoading = false;
-  const hash = getQueryParamString(router.query.hash);
-
-  const secondRow = (
-    <Flex alignItems="center" w="100%" minW={ 0 } columnGap={ 2 } rowGap={ 2 } flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
-      <AddressEntity
-        address={{ hash, is_contract: true, name: '' }}
-        isLoading={ isLoading }
-        variant="subheading"
-      />
-      <AddressQrCode hash={ hash } isLoading={ isLoading }/>
-    </Flex>
-  );
+  const chainSlug = getQueryParamString(router.query.chain_slug);
+  const chainData = multichainConfig()?.chains.find(chain => chain.slug === chainSlug);
 
   return (
-    <>
-      <TextAd mb={ 6 }/>
-      <PageTitle
-        title="Unnamed token"
-        secondRow={ secondRow }
-      />
-      <div>Coming soon 🔜</div>
-    </>
+    <MultichainProvider chainId={ chainData?.id }>
+      <SocketProvider url={ getSocketUrl(chainData?.app_config) }>
+        <Token/>
+      </SocketProvider>
+    </MultichainProvider>
   );
 };
 
diff --git a/ui/optimismSuperchain/tokenInstance/OpSuperchainTokenInstance.tsx b/ui/optimismSuperchain/tokenInstance/OpSuperchainTokenInstance.tsx
new file mode 100644
index 0000000000..aae4bc87e7
--- /dev/null
+++ b/ui/optimismSuperchain/tokenInstance/OpSuperchainTokenInstance.tsx
@@ -0,0 +1,25 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import multichainConfig from 'configs/multichain';
+import getSocketUrl from 'lib/api/getSocketUrl';
+import { MultichainProvider } from 'lib/contexts/multichain';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { SocketProvider } from 'lib/socket/context';
+import TokenInstance from 'ui/pages/TokenInstance';
+
+const OpSuperchainTokenInstance = () => {
+  const router = useRouter();
+  const chainSlug = getQueryParamString(router.query.chain_slug);
+  const chainData = multichainConfig()?.chains.find(chain => chain.slug === chainSlug);
+
+  return (
+    <MultichainProvider chainId={ chainData?.id }>
+      <SocketProvider url={ getSocketUrl(chainData?.app_config) }>
+        <TokenInstance/>
+      </SocketProvider>
+    </MultichainProvider>
+  );
+};
+
+export default React.memo(OpSuperchainTokenInstance);
diff --git a/ui/optimismSuperchain/tokenTransfers/OpSuperchainTokenTransfers.tsx b/ui/optimismSuperchain/tokenTransfers/OpSuperchainTokenTransfers.tsx
index 5b23270171..33fb037538 100644
--- a/ui/optimismSuperchain/tokenTransfers/OpSuperchainTokenTransfers.tsx
+++ b/ui/optimismSuperchain/tokenTransfers/OpSuperchainTokenTransfers.tsx
@@ -8,9 +8,10 @@ import { MultichainProvider } from 'lib/contexts/multichain';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
+import ChainSelect from 'ui/optimismSuperchain/components/ChainSelect';
+import ComingSoon from 'ui/shared/ComingSoon';
 import PopoverFilter from 'ui/shared/filters/PopoverFilter';
 import TokenTypeFilter from 'ui/shared/filters/TokenTypeFilter';
-import ChainSelect from 'ui/shared/multichain/ChainSelect';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useTokenTransfersQuery from 'ui/tokenTransfers/useTokenTransfersQuery';
@@ -35,7 +36,7 @@ const OpSuperchainTokenTransfers = () => {
   const router = useRouter();
   const tab = getQueryParamString(router.query.tab);
 
-  const isLocalTab = tab === 'local';
+  const isLocalTab = tab === 'local' || !tab;
 
   const queryLocal = useTokenTransfersQuery({ enabled: isLocalTab, isMultichain: true });
 
@@ -44,13 +45,13 @@ const OpSuperchainTokenTransfers = () => {
       {
         id: 'index',
         title: 'Cross-chain',
-        component: <div>Coming soon 🔜</div>,
+        component: <ComingSoon/>,
       },
       {
         id: 'local',
         title: 'Local',
         component: (
-          <MultichainProvider chainSlug={ queryLocal.query.chainValue?.[0] }>
+          <MultichainProvider chainId={ queryLocal.query.chainValue?.[0] }>
             <OpSuperchainTokenTransfersLocal
               query={ queryLocal.query }
               typeFilter={ queryLocal.typeFilter }
@@ -88,6 +89,7 @@ const OpSuperchainTokenTransfers = () => {
       />
       <RoutedTabs
         tabs={ tabs }
+        defaultTabId="local"
         listProps={ isMobile ? undefined : TAB_LIST_PROPS }
         rightSlot={ rightSlot }
         rightSlotProps={ rightSlot ? TABS_RIGHT_SLOT_PROPS : undefined }
diff --git a/ui/optimismSuperchain/tokenTransfers/OpSuperchainTokenTransfersLocal.tsx b/ui/optimismSuperchain/tokenTransfers/OpSuperchainTokenTransfersLocal.tsx
index cac85b02f0..1b55691882 100644
--- a/ui/optimismSuperchain/tokenTransfers/OpSuperchainTokenTransfersLocal.tsx
+++ b/ui/optimismSuperchain/tokenTransfers/OpSuperchainTokenTransfersLocal.tsx
@@ -5,7 +5,6 @@ import type { TokenType } from 'types/api/token';
 
 import { useMultichainContext } from 'lib/contexts/multichain';
 import useIsMobile from 'lib/hooks/useIsMobile';
-import { getChainDataForList } from 'lib/multichain/getChainDataForList';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PopoverFilter from 'ui/shared/filters/PopoverFilter';
@@ -27,7 +26,7 @@ const OpSuperchainTokenTransfersLocal = ({ query, typeFilter, onTokenTypesChange
 
   const isMobile = useIsMobile();
   const multichainContext = useMultichainContext();
-  const chainData = getChainDataForList(multichainContext);
+  const chainData = multichainContext?.chain;
 
   const actionBar = isMobile && (
     <ActionBar mt={ -6 }>
diff --git a/ui/optimismSuperchain/tokens/OpSuperchainTokens.tsx b/ui/optimismSuperchain/tokens/OpSuperchainTokens.tsx
index cb029ac09e..7feb3e0ccb 100644
--- a/ui/optimismSuperchain/tokens/OpSuperchainTokens.tsx
+++ b/ui/optimismSuperchain/tokens/OpSuperchainTokens.tsx
@@ -1,12 +1,150 @@
+import { HStack } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
 import React from 'react';
 
+import type { TokenType } from 'types/api/token';
+
+import useDebounce from 'lib/hooks/useDebounce';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { TOKEN } from 'stubs/optimismSuperchain';
+import { generateListStub } from 'stubs/utils';
+import { FilterInput } from 'toolkit/components/filters/FilterInput';
+import ChainSelect from 'ui/optimismSuperchain/components/ChainSelect';
+import ActionBar from 'ui/shared/ActionBar';
+import PopoverFilter from 'ui/shared/filters/PopoverFilter';
+import TokenTypeFilter from 'ui/shared/filters/TokenTypeFilter';
 import PageTitle from 'ui/shared/Page/PageTitle';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import Tokens from 'ui/tokens/Tokens';
+import { getTokenFilterValue } from 'ui/tokens/utils';
+
+const getChainIdFilterValue = (chainIds: Array<string>) => {
+  return chainIds.includes('all') ? undefined : chainIds.filter(Boolean);
+};
 
 const OpSuperchainTokens = () => {
+  const router = useRouter();
+  const isMobile = useIsMobile();
+
+  const q = getQueryParamString(router.query.query);
+  const chainIdParam = getQueryParamString(router.query.chain_id);
+
+  const [ chainIds, setChainIds ] = React.useState<Array<string>>(chainIdParam ? [ chainIdParam ] : [ 'all' ]);
+  const [ searchTerm, setSearchTerm ] = React.useState<string>(q ?? '');
+  const [ tokenTypes, setTokenTypes ] = React.useState<Array<TokenType> | undefined>(getTokenFilterValue(router.query.type));
+
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+
+  const tokensQuery = useQueryWithPages({
+    resourceName: 'multichainAggregator:tokens',
+    filters: {
+      type: tokenTypes?.join(','),
+      chain_id: getChainIdFilterValue(chainIds),
+      query: debouncedSearchTerm,
+    },
+    options: {
+      placeholderData: generateListStub<'multichainAggregator:tokens'>(TOKEN['token'], 50, {
+        next_page_params: {
+          page_size: 50,
+          page_token: 'token',
+        },
+      },
+      ),
+    },
+  });
+
+  const handleTokenTypesChange = React.useCallback((value: Array<TokenType>) => {
+    tokensQuery.onFilterChange({
+      type: value.join(','),
+      chain_id: getChainIdFilterValue(chainIds),
+      query: debouncedSearchTerm,
+    });
+    setTokenTypes(value);
+  }, [ tokensQuery, chainIds, debouncedSearchTerm ]);
+
+  const handleSearchTermChange = React.useCallback((value: string) => {
+    tokensQuery.onFilterChange({
+      type: tokenTypes?.join(','),
+      chain_id: getChainIdFilterValue(chainIds),
+      query: value,
+    });
+    setSearchTerm(value);
+  }, [ tokenTypes, tokensQuery, chainIds ]);
+
+  const handleChainIdsChange = React.useCallback(({ value }: { value: Array<string> }) => {
+    tokensQuery.onFilterChange({
+      chain_id: getChainIdFilterValue(value),
+      type: tokenTypes?.join(','),
+      query: debouncedSearchTerm,
+    });
+    setChainIds(value);
+  }, [ tokensQuery, tokenTypes, debouncedSearchTerm ]);
+
+  const filter = (
+    <PopoverFilter contentProps={{ w: '200px' }} appliedFiltersNum={ tokenTypes?.length }>
+      <TokenTypeFilter<TokenType>
+        onChange={ handleTokenTypesChange }
+        defaultValue={ tokenTypes }
+        nftOnly={ false }
+      />
+    </PopoverFilter>
+  );
+
+  const searchInput = (
+    <FilterInput
+      w={{ base: '100%', lg: '360px' }}
+      size="sm"
+      onChange={ handleSearchTermChange }
+      placeholder="Token name or symbol"
+      initialValue={ searchTerm }
+    />
+  );
+
+  const chainSelect = (
+    <ChainSelect
+      value={ chainIds }
+      onValueChange={ handleChainIdsChange }
+      withAllOption
+    />
+  );
+
+  const actionBar = isMobile ? (
+    <>
+      <HStack gap={ 3 }>
+        { filter }
+        { chainSelect }
+        { searchInput }
+      </HStack>
+      { tokensQuery.pagination.isVisible && (
+        <ActionBar mt={ 0 } justifyContent="flex-end">
+          <Pagination { ...tokensQuery.pagination }/>
+        </ActionBar>
+      ) }
+    </>
+  ) : (
+    <ActionBar
+      mt={ -6 }
+      justifyContent="space-between"
+    >
+      <HStack gap={ 3 }>
+        { filter }
+        { chainSelect }
+        { searchInput }
+      </HStack>
+      <Pagination { ...tokensQuery.pagination }/>
+    </ActionBar>
+  );
+
   return (
     <>
       <PageTitle title="Tokens" withTextAd/>
-      <div>Coming soon 🔜</div>
+      <Tokens
+        query={ tokensQuery }
+        actionBar={ actionBar }
+        hasActiveFilters={ Boolean(searchTerm || tokenTypes || !chainIds.includes('all')) }
+      />
     </>
   );
 };
diff --git a/ui/optimismSuperchain/tx/OpSuperchainTx.tsx b/ui/optimismSuperchain/tx/OpSuperchainTx.tsx
index 72fbf757cf..0cbdeddbbc 100644
--- a/ui/optimismSuperchain/tx/OpSuperchainTx.tsx
+++ b/ui/optimismSuperchain/tx/OpSuperchainTx.tsx
@@ -1,17 +1,20 @@
+import { useRouter } from 'next/router';
 import React from 'react';
 
-import TextAd from 'ui/shared/ad/TextAd';
-import PageTitle from 'ui/shared/Page/PageTitle';
+import multichainConfig from 'configs/multichain';
+import { MultichainProvider } from 'lib/contexts/multichain';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import Transaction from 'ui/pages/Transaction';
 
 const OpSuperchainTx = () => {
+  const router = useRouter();
+  const chainSlug = getQueryParamString(router.query.chain_slug);
+  const chainData = multichainConfig()?.chains.find(chain => chain.slug === chainSlug);
+
   return (
-    <>
-      <TextAd mb={ 6 }/>
-      <PageTitle
-        title="Cross-chain tx details"
-      />
-      <div>Coming soon 🔜</div>
-    </>
+    <MultichainProvider chainId={ chainData?.id }>
+      <Transaction/>
+    </MultichainProvider>
   );
 };
 
diff --git a/ui/optimismSuperchain/txs/OpSuperchainTxs.tsx b/ui/optimismSuperchain/txs/OpSuperchainTxs.tsx
index ffe7fdef40..1f6f9ac438 100644
--- a/ui/optimismSuperchain/txs/OpSuperchainTxs.tsx
+++ b/ui/optimismSuperchain/txs/OpSuperchainTxs.tsx
@@ -7,10 +7,10 @@ import { MultichainProvider } from 'lib/contexts/multichain';
 import useRoutedChainSelect from 'lib/multichain/useRoutedChainSelect';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
-import ChainSelect from 'ui/shared/multichain/ChainSelect';
+import ChainSelect from 'ui/optimismSuperchain/components/ChainSelect';
+import ComingSoon from 'ui/shared/ComingSoon';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
-import OpSuperchainTxsCrossChain from './OpSuperchainTxsCrossChain';
 import OpSuperchainTxsLocal, { OP_SUPERCHAIN_TXS_LOCAL_TAB_IDS } from './OpSuperchainTxsLocal';
 
 const TABS_RIGHT_SLOT_PROPS = {
@@ -23,33 +23,20 @@ const OpSuperchainTxs = () => {
   const chainSelect = useRoutedChainSelect({ persistedParams: QUERY_PRESERVED_PARAMS });
 
   const tab = getQueryParamString(router.query.tab);
-  const isLocalTxs = tab === 'txs_local' || OP_SUPERCHAIN_TXS_LOCAL_TAB_IDS.includes(tab);
-
-  React.useEffect(() => {
-    if (isLocalTxs && chainSelect.value) {
-      const queryParam = getQueryParamString(router.query['chain-slug']);
-      if (queryParam !== chainSelect.value[0]) {
-        router.push({
-          pathname: router.pathname,
-          query: { tab: router.query.tab, 'chain-slug': chainSelect.value[0] },
-        });
-      }
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ isLocalTxs ]);
+  const isLocalTxs = tab === 'txs_local' || OP_SUPERCHAIN_TXS_LOCAL_TAB_IDS.includes(tab) || !tab;
 
   const tabs: Array<TabItemRegular> = React.useMemo(() => {
     return [
       {
-        id: 'index',
+        id: 'txs_cross_chain',
         title: 'Cross-chain',
-        component: <OpSuperchainTxsCrossChain/>,
+        component: <ComingSoon/>,
       },
       {
         id: 'txs_local',
         title: 'Local',
         component: (
-          <MultichainProvider chainSlug={ chainSelect.value?.[0] }>
+          <MultichainProvider chainId={ chainSelect.value?.[0] }>
             <OpSuperchainTxsLocal/>
           </MultichainProvider>
         ),
@@ -73,6 +60,7 @@ const OpSuperchainTxs = () => {
       />
       <RoutedTabs
         tabs={ tabs }
+        defaultTabId="txs_local"
         rightSlot={ rightSlot }
         rightSlotProps={ rightSlot ? TABS_RIGHT_SLOT_PROPS : undefined }
       />
diff --git a/ui/optimismSuperchain/txs/OpSuperchainTxsCrossChain.tsx b/ui/optimismSuperchain/txs/OpSuperchainTxsCrossChain.tsx
deleted file mode 100644
index f2e3439b87..0000000000
--- a/ui/optimismSuperchain/txs/OpSuperchainTxsCrossChain.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-
-import { INTEROP_MESSAGE } from 'stubs/optimismSuperchain';
-import { generateListStub } from 'stubs/utils';
-import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
-
-import CrossChainTxs from '../crossChainTxs/CrossChainTxs';
-
-const OpSuperchainTxsCrossChain = () => {
-  const { data, isError, isPlaceholderData } = useQueryWithPages({
-    resourceName: 'multichain:interop_messages',
-    options: {
-      placeholderData: generateListStub<'multichain:interop_messages'>(INTEROP_MESSAGE, 50, { next_page_params: undefined }),
-    },
-  });
-
-  return (
-    <CrossChainTxs
-      items={ data?.items }
-      isLoading={ isPlaceholderData }
-      isError={ isError }
-      tableHeaderTop={ 0 }
-    />
-  );
-};
-
-export default React.memo(OpSuperchainTxsCrossChain);
diff --git a/ui/optimismSuperchain/txs/OpSuperchainTxsLocal.tsx b/ui/optimismSuperchain/txs/OpSuperchainTxsLocal.tsx
index ba2711d8a9..f59f21c965 100644
--- a/ui/optimismSuperchain/txs/OpSuperchainTxsLocal.tsx
+++ b/ui/optimismSuperchain/txs/OpSuperchainTxsLocal.tsx
@@ -7,6 +7,7 @@ import type { TabItemRegular } from 'toolkit/components/AdaptiveTabs/types';
 
 import getSocketUrl from 'lib/api/getSocketUrl';
 import { useMultichainContext } from 'lib/contexts/multichain';
+import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import getNetworkValidationActionText from 'lib/networks/getNetworkValidationActionText';
 import getQueryParamString from 'lib/router/getQueryParamString';
@@ -27,7 +28,7 @@ const TAB_LIST_PROPS = {
   pt: 6,
   pb: { base: 9, lg: 3 },
 };
-const QUERY_PRESERVED_PARAMS = [ 'chain-slug' ];
+const QUERY_PRESERVED_PARAMS = [ 'chain_id' ];
 
 const OpSuperchainTxsLocal = () => {
   const isMobile = useIsMobile();
@@ -35,13 +36,16 @@ const OpSuperchainTxsLocal = () => {
   const tab = getQueryParamString(router.query.tab);
   const multichainContext = useMultichainContext();
 
-  const chainConfig = multichainContext?.chain.config;
+  const chainConfig = multichainContext?.chain.app_config;
 
   const txsValidatedQuery = useQueryWithPages({
     resourceName: 'general:txs_validated',
     filters: { filter: 'validated' },
     options: {
-      enabled: tab === 'txs_local_validated' || tab === 'txs_local',
+      enabled: tab === 'txs_local_validated' ||
+        tab === 'txs_local' ||
+        !tab ||
+        (!chainConfig?.features.dataAvailability.isEnabled && tab === 'txs_local_blob'),
       placeholderData: generateListStub<'general:txs_validated'>(TX, 50, { next_page_params: {
         block_number: 9005713,
         index: 5,
@@ -115,12 +119,21 @@ const OpSuperchainTxsLocal = () => {
 
   const currentQuery = (() => {
     switch (tab) {
-      case 'txs_local_pending': return txsPendingQuery;
-      case 'txs_local_blob': return txsWithBlobsQuery;
+      case 'txs_local_pending': {
+        return txsPendingQuery;
+      };
+      case 'txs_local_blob': {
+        if (chainConfig?.features.dataAvailability.isEnabled) {
+          return txsWithBlobsQuery;
+        }
+        return txsValidatedQuery;
+      };
       default: return txsValidatedQuery;
     }
   })();
 
+  const isTabsLoading = useIsInitialLoading(currentQuery.isPlaceholderData);
+
   const rightSlot = (() => {
     if (isMobile) {
       return null;
@@ -134,7 +147,7 @@ const OpSuperchainTxsLocal = () => {
 
     return (
       <Flex alignItems="center" gap={ 6 }>
-        { isAdvancedFilterEnabled && <AdvancedFilterLink linkContext={ multichainContext }/> }
+        { isAdvancedFilterEnabled && <AdvancedFilterLink routeParams={{ chain: multichainContext?.chain }}/> }
         { currentQuery.pagination.isVisible && <Pagination { ...currentQuery.pagination }/> }
       </Flex>
     );
@@ -146,7 +159,7 @@ const OpSuperchainTxsLocal = () => {
       <SocketProvider url={ getSocketUrl(chainConfig) }>
         <RoutedTabs
           tabs={ tabs }
-          isLoading={ currentQuery.isPlaceholderData }
+          isLoading={ isTabsLoading }
           variant="secondary"
           size="sm"
           preservedParams={ QUERY_PRESERVED_PARAMS }
diff --git a/ui/optimismSuperchain/userOps/OpSuperchainUserOps.tsx b/ui/optimismSuperchain/userOps/OpSuperchainUserOps.tsx
index da0058eaf9..7686b05649 100644
--- a/ui/optimismSuperchain/userOps/OpSuperchainUserOps.tsx
+++ b/ui/optimismSuperchain/userOps/OpSuperchainUserOps.tsx
@@ -5,9 +5,9 @@ import multichainConfig from 'configs/multichain';
 import { MultichainProvider } from 'lib/contexts/multichain';
 import { USER_OPS_ITEM } from 'stubs/userOps';
 import { generateListStub } from 'stubs/utils';
+import ChainSelect from 'ui/optimismSuperchain/components/ChainSelect';
 import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
-import ChainSelect from 'ui/shared/multichain/ChainSelect';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -16,6 +16,9 @@ import UserOpsTable from 'ui/userOps/UserOpsTable';
 
 const OpSuperchainUserOps = () => {
 
+  const chains = React.useMemo(() => (multichainConfig()?.chains || []).filter(chain => chain.app_config.features.userOps.isEnabled), []);
+  const chainIds = React.useMemo(() => chains.map(chain => chain.id).filter(Boolean), [ chains ]);
+
   const query = useQueryWithPages({
     resourceName: 'general:user_ops',
     options: {
@@ -25,12 +28,13 @@ const OpSuperchainUserOps = () => {
       } }),
     },
     isMultichain: true,
+    chainIds,
   });
 
-  const chainConfig = multichainConfig()?.chains.find(chain => chain.slug === query.chainValue?.[0]);
+  const chainConfig = chains.find(chain => chain.id === query.chainValue?.[0]);
 
   const content = query.data?.items ? (
-    <MultichainProvider chainSlug={ query.chainValue?.[0] }>
+    <MultichainProvider chainId={ query.chainValue?.[0] }>
       <Box hideBelow="lg">
         <UserOpsTable
           items={ query.data.items }
@@ -60,6 +64,7 @@ const OpSuperchainUserOps = () => {
       <ChainSelect
         value={ query.chainValue }
         onValueChange={ query.onChainValueChange }
+        chainIds={ chainIds }
       />
       <Pagination ml="auto" { ...query.pagination }/>
     </ActionBar>
diff --git a/ui/optimismSuperchain/verifiedContracts/OpSuperchainVerifiedContracts.tsx b/ui/optimismSuperchain/verifiedContracts/OpSuperchainVerifiedContracts.tsx
index e8cf02acd8..9f3a76c070 100644
--- a/ui/optimismSuperchain/verifiedContracts/OpSuperchainVerifiedContracts.tsx
+++ b/ui/optimismSuperchain/verifiedContracts/OpSuperchainVerifiedContracts.tsx
@@ -1,13 +1,14 @@
 import { Box, createListCollection, HStack } from '@chakra-ui/react';
 import React from 'react';
 
+import multichainConfig from 'configs/multichain';
 import { MultichainProvider } from 'lib/contexts/multichain';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { FilterInput } from 'toolkit/components/filters/FilterInput';
 import { apos } from 'toolkit/utils/htmlEntities';
+import ChainSelect from 'ui/optimismSuperchain/components/ChainSelect';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
-import ChainSelect from 'ui/shared/multichain/ChainSelect';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import Sort from 'ui/shared/sort/Sort';
@@ -28,11 +29,16 @@ const OpSuperchainVerifiedContracts = () => {
   const { query, type, searchTerm, sort, onSearchTermChange, onTypeChange, onSortChange } = useVerifiedContractsQuery({ isMultichain: true });
   const { isError, isPlaceholderData, data, pagination, chainValue, onChainValueChange } = query;
 
+  const chainConfig = React.useMemo(() => {
+    return multichainConfig()?.chains.find((chain) => chain.id === chainValue?.[0])?.app_config;
+  }, [ chainValue ]);
+
   const typeFilter = (
     <VerifiedContractsFilter
       onChange={ onTypeChange }
       defaultValue={ type }
       hasActiveFilter={ Boolean(type) }
+      chainConfig={ chainConfig }
     />
   );
 
@@ -95,9 +101,10 @@ const OpSuperchainVerifiedContracts = () => {
       <ChainSelect
         value={ chainValue }
         onValueChange={ onChainValueChange }
+        mode="default"
         mb={ 3 }
       />
-      <MultichainProvider chainSlug={ chainValue?.[0] }>
+      <MultichainProvider chainId={ chainValue?.[0] }>
         <VerifiedContractsCounters/>
         <DataListDisplay
           isError={ isError }
diff --git a/ui/pages/AdvancedFilter.tsx b/ui/pages/AdvancedFilter.tsx
index 7e3e2d8985..c15f87865b 100644
--- a/ui/pages/AdvancedFilter.tsx
+++ b/ui/pages/AdvancedFilter.tsx
@@ -34,6 +34,7 @@ import ItemByColumn from 'ui/advancedFilter/ItemByColumn';
 import { getDurationFromAge, getFilterTags } from 'ui/advancedFilter/lib';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
+import ChainIcon from 'ui/shared/externalChains/ChainIcon';
 import IconSvg from 'ui/shared/IconSvg';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
@@ -146,6 +147,7 @@ const AdvancedFilter = () => {
         <TableRoot tableLayout="fixed" minWidth="950px" w="100%">
           <TableHeaderSticky>
             <TableRow>
+              { multichainContext?.chain && <TableColumnHeader width="38px"/> }
               { columnsToShow.map(column => {
                 return (
                   <TableColumnHeader
@@ -178,6 +180,11 @@ const AdvancedFilter = () => {
           <TableBody>
             { data?.items.map((item, index) => (
               <TableRow key={ item.hash + String(index) }>
+                { multichainContext?.chain && (
+                  <TableCell>
+                    <ChainIcon data={ multichainContext.chain } isLoading={ isPlaceholderData }/>
+                  </TableCell>
+                ) }
                 { columnsToShow.map(column => {
                   const textAlign = (() => {
                     if (column.id === 'or_and') {
@@ -239,7 +246,7 @@ const AdvancedFilter = () => {
       <HStack gap={ 2 } flexWrap="wrap" mb={ 6 }>
         { multichainContext?.chain && (
           <Tag variant="filter" label="Chain">
-            { multichainContext.chain.config.chain.name }
+            { multichainContext.chain.app_config.chain.name }
           </Tag>
         ) }
         { filterTags.map(t => (
diff --git a/ui/pages/BlockCountdown.tsx b/ui/pages/BlockCountdown.tsx
index 02a126b413..14289705d2 100644
--- a/ui/pages/BlockCountdown.tsx
+++ b/ui/pages/BlockCountdown.tsx
@@ -18,7 +18,7 @@ import { downloadBlob } from 'toolkit/utils/file';
 import BlockCountdownTimer from 'ui/blockCountdown/BlockCountdownTimer';
 import createGoogleCalendarLink from 'ui/blockCountdown/createGoogleCalendarLink';
 import createIcsFileBlob from 'ui/blockCountdown/createIcsFileBlob';
-import ChainIcon from 'ui/optimismSuperchain/components/ChainIcon';
+import ChainIcon from 'ui/shared/externalChains/ChainIcon';
 import IconSvg from 'ui/shared/IconSvg';
 import StatsWidget from 'ui/shared/stats/StatsWidget';
 import TruncatedValue from 'ui/shared/TruncatedValue';
@@ -126,6 +126,7 @@ const BlockCountdown = ({ hideCapybaraRunner }: Props) => {
                 right={{ base: '45px', lg: '86px' }}
                 boxSize={{ lg: '60px' }}
                 bgColor="bg.primary"
+                borderRadius="full"
               />
             ) }
           </Box>
diff --git a/ui/pages/BlockCountdownIndex.tsx b/ui/pages/BlockCountdownIndex.tsx
index 1180514a51..65ccdf3936 100644
--- a/ui/pages/BlockCountdownIndex.tsx
+++ b/ui/pages/BlockCountdownIndex.tsx
@@ -7,7 +7,7 @@ import { routeParams } from 'nextjs/routes';
 import { useMultichainContext } from 'lib/contexts/multichain';
 import { Heading } from 'toolkit/chakra/heading';
 import { FilterInput } from 'toolkit/components/filters/FilterInput';
-import ChainIcon from 'ui/optimismSuperchain/components/ChainIcon';
+import ChainIcon from 'ui/shared/externalChains/ChainIcon';
 import IconSvg from 'ui/shared/IconSvg';
 
 const BlockCountdownIndex = () => {
@@ -42,6 +42,7 @@ const BlockCountdownIndex = () => {
             left={{ base: '105px', lg: '150px' }}
             boxSize={{ lg: '60px' }}
             bgColor="bg.primary"
+            borderRadius="full"
           />
         ) }
       </Box>
diff --git a/ui/pages/Chart.tsx b/ui/pages/Chart.tsx
index e17809eb94..410cc4ef86 100644
--- a/ui/pages/Chart.tsx
+++ b/ui/pages/Chart.tsx
@@ -8,10 +8,12 @@ import type { StatsIntervalIds } from 'types/client/stats';
 import { StatsIntervalId } from 'types/client/stats';
 
 import config from 'configs/app';
+import { useMultichainContext } from 'lib/contexts/multichain';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import * as metadata from 'lib/metadata';
 import * as mixpanel from 'lib/mixpanel/index';
+import useRoutedChainSelect from 'lib/multichain/useRoutedChainSelect';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { Button } from 'toolkit/chakra/button';
 import type { SelectOption } from 'toolkit/chakra/select';
@@ -20,6 +22,7 @@ import { Skeleton } from 'toolkit/chakra/skeleton';
 import { ChartWidgetContent, useChartZoom } from 'toolkit/components/charts';
 import ChartMenu from 'toolkit/components/charts/parts/ChartMenu';
 import { isBrowser } from 'toolkit/utils/isBrowser';
+import ChainSelect from 'ui/optimismSuperchain/components/ChainSelect';
 import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
 import ChartIntervalSelect from 'ui/shared/chart/ChartIntervalSelect';
 import { useChartsConfig } from 'ui/shared/chart/config';
@@ -83,6 +86,8 @@ const Chart = () => {
   const isMobile = useIsMobile();
   const isInBrowser = isBrowser();
   const chartsConfig = useChartsConfig();
+  const chainSelect = useRoutedChainSelect();
+  const multichainContext = useMultichainContext();
 
   const onIntervalChange = React.useCallback((interval: StatsIntervalIds) => {
     setIntervalState(interval);
@@ -192,6 +197,13 @@ const Chart = () => {
       />
       <Flex alignItems="center" justifyContent="space-between">
         <Flex alignItems="center" gap={{ base: 3, lg: 6 }} maxW="100%">
+          { multichainContext?.chain && (
+            <ChainSelect
+              value={ chainSelect.value }
+              onValueChange={ chainSelect.onValueChange }
+              loading={ isInfoLoading }
+            />
+          ) }
           <Flex alignItems="center" gap={ 3 }>
             { !isMobile && <Text>Period</Text> }
             <ChartIntervalSelect interval={ interval } onIntervalChange={ onIntervalChange }/>
@@ -270,7 +282,6 @@ const Chart = () => {
         <ChartWidgetContent
           isError={ lineQuery.isError }
           charts={ charts }
-          title={ info?.title || '' }
           isEnlarged
           isLoading={ lineQuery.isPlaceholderData }
           zoomRange={ zoomRange }
diff --git a/ui/pages/CsvExport.tsx b/ui/pages/CsvExport.tsx
index 0c247d13b2..70ac5a1d2f 100644
--- a/ui/pages/CsvExport.tsx
+++ b/ui/pages/CsvExport.tsx
@@ -14,9 +14,9 @@ import useIsMobile from 'lib/hooks/useIsMobile';
 import { ContentLoader } from 'toolkit/components/loaders/ContentLoader';
 import { nbsp } from 'toolkit/utils/htmlEntities';
 import CsvExportForm from 'ui/csvExport/CsvExportForm';
-import ChainIcon from 'ui/optimismSuperchain/components/ChainIcon';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import ChainIcon from 'ui/shared/externalChains/ChainIcon';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
 interface ExportTypeEntity {
@@ -150,7 +150,7 @@ const CsvExport = () => {
       <Flex display="inline-flex" alignItems="center" columnGap={ 2 }>
         <span>on</span>
         <ChainIcon data={ multichainContext.chain }/>
-        <span>{ multichainContext.chain.config.chain.name }</span>
+        <span>{ multichainContext.chain.app_config.chain.name }</span>
       </Flex>
     ) : null;
 
diff --git a/ui/pages/SearchResults.tsx b/ui/pages/SearchResults.tsx
index b47efee045..7b79c9c04b 100644
--- a/ui/pages/SearchResults.tsx
+++ b/ui/pages/SearchResults.tsx
@@ -52,6 +52,10 @@ const SearchResultsPageContent = () => {
   const marketplaceApps = useMarketplaceApps(debouncedSearchTerm);
   const settingsContext = useSettingsContext();
 
+  const handleNavigateToResults = React.useCallback((searchTerm: string) => {
+    handleSearchTermChange(searchTerm);
+  }, [ handleSearchTermChange ]);
+
   React.useEffect(() => {
     if (showContent) {
       return;
@@ -277,7 +281,7 @@ const SearchResultsPageContent = () => {
 
   return (
     <>
-      <HeaderMobile hideSearchButton/>
+      <HeaderMobile onGoToSearchResults={ handleNavigateToResults }/>
       <Layout.MainArea>
         <Layout.SideBar/>
         <Layout.MainColumn>
diff --git a/ui/pages/Sol2Uml.tsx b/ui/pages/Sol2Uml.tsx
index 77179562ab..86b59854f6 100644
--- a/ui/pages/Sol2Uml.tsx
+++ b/ui/pages/Sol2Uml.tsx
@@ -2,23 +2,36 @@ import { Flex } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import { useMultichainContext } from 'lib/contexts/multichain';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import ChainIcon from 'ui/shared/externalChains/ChainIcon';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Sol2UmlDiagram from 'ui/sol2uml/Sol2UmlDiagram';
 
 const Sol2Uml = () => {
   const router = useRouter();
+  const multichainContext = useMultichainContext();
 
   const addressHash = router.query.address?.toString() || '';
 
+  const chainInfo = multichainContext?.chain ? (
+    <Flex display="inline-flex" alignItems="center">
+      <span>on</span>
+      <ChainIcon data={ multichainContext.chain } ml={ 1 } mr={ 2 }/>
+      <span>{ multichainContext.chain.app_config.chain.name }</span>
+    </Flex>
+  ) : null;
+
   return (
     <>
       <PageTitle title="Solidity UML diagram"/>
-      <Flex mb={ 10 } flexWrap="wrap" columnGap={ 3 }>
+      <Flex mb={ 10 } flexWrap="wrap" columnGap={ 1 }>
         <span>For contract</span>
         <AddressEntity
           address={{ hash: addressHash, is_contract: true }}
+          noCopy
         />
+        { chainInfo }
       </Flex>
       <Sol2UmlDiagram addressHash={ addressHash }/>
     </>
diff --git a/ui/pages/__screenshots__/NameServices.pw.tsx_default_domains-default-view-1.png b/ui/pages/__screenshots__/NameServices.pw.tsx_default_domains-default-view-1.png
index 022dfb85e2..14c37f5486 100644
Binary files a/ui/pages/__screenshots__/NameServices.pw.tsx_default_domains-default-view-1.png and b/ui/pages/__screenshots__/NameServices.pw.tsx_default_domains-default-view-1.png differ
diff --git a/ui/pages/__screenshots__/NameServices.pw.tsx_default_domains-filters-1.png b/ui/pages/__screenshots__/NameServices.pw.tsx_default_domains-filters-1.png
index 8719171b18..44db1f7422 100644
Binary files a/ui/pages/__screenshots__/NameServices.pw.tsx_default_domains-filters-1.png and b/ui/pages/__screenshots__/NameServices.pw.tsx_default_domains-filters-1.png differ
diff --git a/ui/pages/__screenshots__/NameServices.pw.tsx_default_domains-mobile-default-view-1.png b/ui/pages/__screenshots__/NameServices.pw.tsx_default_domains-mobile-default-view-1.png
index ff9412bd81..12d6f3a228 100644
Binary files a/ui/pages/__screenshots__/NameServices.pw.tsx_default_domains-mobile-default-view-1.png and b/ui/pages/__screenshots__/NameServices.pw.tsx_default_domains-mobile-default-view-1.png differ
diff --git a/ui/pages/__screenshots__/Pool.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Pool.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png
index 229d69b8f5..8f4b870f5d 100644
Binary files a/ui/pages/__screenshots__/Pool.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Pool.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Pool.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Pool.pw.tsx_default_base-view-mobile-dark-mode-1.png
index 3c8cd02942..ce3630ade8 100644
Binary files a/ui/pages/__screenshots__/Pool.pw.tsx_default_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Pool.pw.tsx_default_base-view-mobile-dark-mode-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
index c602503936..09092eed7c 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-domain-name-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-domain-name-mobile-1.png differ
diff --git a/ui/shared/ActionBar.tsx b/ui/shared/ActionBar.tsx
index 3f2b66aee4..1da005f0f4 100644
--- a/ui/shared/ActionBar.tsx
+++ b/ui/shared/ActionBar.tsx
@@ -23,7 +23,7 @@ const ActionBar = ({ children, className, showShadow }: Props) => {
   return (
     <Flex
       className={ className }
-      backgroundColor={{ _light: 'white', _dark: 'black' }}
+      backgroundColor="bg.primary"
       pt={ 6 }
       mt={ -6 }
       pb={{ base: 6, lg: 3 }}
diff --git a/ui/shared/AppError/AppErrorGlobalContainer.tsx b/ui/shared/AppError/AppErrorGlobalContainer.tsx
index 13e403471b..3603added6 100644
--- a/ui/shared/AppError/AppErrorGlobalContainer.tsx
+++ b/ui/shared/AppError/AppErrorGlobalContainer.tsx
@@ -1,16 +1,12 @@
 import { Box } from '@chakra-ui/react';
 import React from 'react';
 
-import { useColorModeValue } from 'toolkit/chakra/color-mode';
-
 interface Props {
   children: React.ReactNode;
 }
 
 const AppErrorGlobalContainer = ({ children }: Props) => {
-  const bgColor = useColorModeValue('white', 'black');
-
-  return <Box bgColor={ bgColor }>{ children }</Box>;
+  return <Box bgColor="bg.primary">{ children }</Box>;
 };
 
 export default React.memo(AppErrorGlobalContainer);
diff --git a/ui/shared/ChainIcon.tsx b/ui/shared/ChainIcon.tsx
deleted file mode 100644
index de17ab6b39..0000000000
--- a/ui/shared/ChainIcon.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Box } from '@chakra-ui/react';
-import React from 'react';
-
-import type { CrossChainInfo } from 'types/client/crossChainInfo';
-
-import { Image } from 'toolkit/chakra/image';
-import { Skeleton } from 'toolkit/chakra/skeleton';
-import { Tooltip } from 'toolkit/chakra/tooltip';
-import IconSvg from 'ui/shared/IconSvg';
-
-type Props = {
-  chain?: CrossChainInfo;
-  boxSize?: number;
-  isLoading?: boolean;
-};
-
-const Placeholder = ({ boxSize }: { boxSize: number }) => {
-  return (
-    <IconSvg
-      name="networks/icon-placeholder"
-      boxSize={ boxSize }
-      color="text.secondary"
-    />
-  );
-};
-
-Placeholder.displayName = 'Placeholder';
-
-const ChainIcon = ({ chain, boxSize = 5, isLoading }: Props) => {
-  if (isLoading) {
-    return <Skeleton boxSize={ boxSize } borderRadius="full" loading={ isLoading }/>;
-  }
-  return (
-    <Tooltip content={ `${ chain?.chain_name || 'Unknown chain' } (chain id: ${ chain?.chain_id || 'Unknown' })` }>
-      <Box>
-        { chain?.chain_logo ?
-          <Image src={ chain.chain_logo } boxSize={ boxSize } fallback={ <Placeholder boxSize={ boxSize }/> }/> :
-          <Placeholder boxSize={ boxSize }/>
-        }
-      </Box>
-    </Tooltip>
-  );
-};
-
-export default ChainIcon;
diff --git a/ui/shared/ComingSoon.tsx b/ui/shared/ComingSoon.tsx
new file mode 100644
index 0000000000..0a844934d4
--- /dev/null
+++ b/ui/shared/ComingSoon.tsx
@@ -0,0 +1,25 @@
+import type { FlexProps } from '@chakra-ui/react';
+import { Text, Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import { Heading } from 'toolkit/chakra/heading';
+import { Image } from 'toolkit/chakra/image';
+
+interface Props extends FlexProps {}
+
+const ComingSoon = (props: Props) => {
+  return (
+    <Flex flexDir="column" alignItems="center" justifyContent="center" my={ 6 } { ...props }>
+      <Image
+        src="/static/coming-soon.svg"
+        alt="Coming soon"
+        w={{ base: '160px', lg: '260px' }}
+        h="auto"
+      />
+      <Heading textStyle="heading.md" mt={{ base: 4, lg: 6 }}>Coming soon</Heading>
+      <Text textStyle={{ base: 'sm', lg: 'mg' }} mt={ 2 }>The information will be available soon. Stay tuned!</Text>
+    </Flex>
+  );
+};
+
+export default React.memo(ComingSoon);
diff --git a/ui/shared/EmptySearchResult.tsx b/ui/shared/EmptySearchResult.tsx
index a157a2a4ee..cf6ebf87bd 100644
--- a/ui/shared/EmptySearchResult.tsx
+++ b/ui/shared/EmptySearchResult.tsx
@@ -1,3 +1,4 @@
+import type { BoxProps } from '@chakra-ui/react';
 import { Box, Icon } from '@chakra-ui/react';
 import React from 'react';
 
@@ -7,11 +8,12 @@ import React from 'react';
 import emptySearchResultIcon from 'icons/empty_search_result.svg';
 import { Heading } from 'toolkit/chakra/heading';
 
-interface Props {
+interface Props extends BoxProps {
+  title?: string;
   text: string | React.JSX.Element;
 }
 
-const EmptySearchResult = ({ text }: Props) => {
+const EmptySearchResult = ({ text, title, ...rest }: Props) => {
   return (
     <Box
       display="flex"
@@ -19,6 +21,7 @@ const EmptySearchResult = ({ text }: Props) => {
       alignItems="center"
       justifyContent="center"
       mt="50px"
+      { ...rest }
     >
       <Icon
         as={ emptySearchResultIcon }
@@ -28,7 +31,7 @@ const EmptySearchResult = ({ text }: Props) => {
       />
 
       <Heading level="3" mb={ 2 }>
-        No results
+        { title || 'No results' }
       </Heading>
 
       <Box fontSize={{ base: 'sm', sm: 'md' }} textAlign="center">
diff --git a/ui/shared/HashStringShortenDynamic.tsx b/ui/shared/HashStringShortenDynamic.tsx
index b6cc8205dd..b707b990f6 100644
--- a/ui/shared/HashStringShortenDynamic.tsx
+++ b/ui/shared/HashStringShortenDynamic.tsx
@@ -8,6 +8,7 @@
 
 // so i did it with js
 
+import type { BoxProps } from '@chakra-ui/react';
 import { chakra } from '@chakra-ui/react';
 import { debounce } from 'es-toolkit';
 import React, { useCallback, useEffect, useRef } from 'react';
@@ -20,7 +21,7 @@ import { BODY_TYPEFACE, HEADING_TYPEFACE } from 'toolkit/theme/foundations/typog
 const TAIL_LENGTH = 4;
 const HEAD_MIN_LENGTH = 4;
 
-interface Props {
+interface Props extends BoxProps {
   hash: string;
   fontWeight?: string | number;
   noTooltip?: boolean;
@@ -29,7 +30,7 @@ interface Props {
   as?: React.ElementType;
 }
 
-const HashStringShortenDynamic = ({ hash, fontWeight = '400', noTooltip, tailLength = TAIL_LENGTH, as = 'span', tooltipInteractive }: Props) => {
+const HashStringShortenDynamic = ({ hash, fontWeight = '400', noTooltip, tailLength = TAIL_LENGTH, as = 'span', tooltipInteractive, ...props }: Props) => {
   const elementRef = useRef<HTMLSpanElement>(null);
   const [ displayedString, setDisplayedString ] = React.useState(hash);
 
@@ -91,7 +92,7 @@ const HashStringShortenDynamic = ({ hash, fontWeight = '400', noTooltip, tailLen
     };
   }, [ calculateString ]);
 
-  const content = <chakra.span ref={ elementRef } as={ as }>{ displayedString }</chakra.span>;
+  const content = <chakra.span ref={ elementRef } as={ as } { ...props }>{ displayedString }</chakra.span>;
   const isTruncated = hash.length !== displayedString.length;
 
   if (isTruncated && !noTooltip) {
diff --git a/ui/shared/TokenTransfer/TokenTransferList.tsx b/ui/shared/TokenTransfer/TokenTransferList.tsx
index 6d050c0888..8f5ea29ec7 100644
--- a/ui/shared/TokenTransfer/TokenTransferList.tsx
+++ b/ui/shared/TokenTransfer/TokenTransferList.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import { useMultichainContext } from 'lib/contexts/multichain';
-import { getChainDataForList } from 'lib/multichain/getChainDataForList';
 import TokenTransferListItem from 'ui/shared/TokenTransfer/TokenTransferListItem';
 
 interface Props {
@@ -17,7 +16,7 @@ interface Props {
 
 const TokenTransferList = ({ data, baseAddress, showTxInfo, enableTimeIncrement, isLoading }: Props) => {
   const multichainContext = useMultichainContext();
-  const chainData = getChainDataForList(multichainContext);
+  const chainData = multichainContext?.chain;
 
   return (
     <Box>
diff --git a/ui/shared/TokenTransfer/TokenTransferListItem.tsx b/ui/shared/TokenTransfer/TokenTransferListItem.tsx
index 42e3338e4a..7399a0ccae 100644
--- a/ui/shared/TokenTransfer/TokenTransferListItem.tsx
+++ b/ui/shared/TokenTransfer/TokenTransferListItem.tsx
@@ -2,7 +2,7 @@ import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenTransfer } from 'types/api/tokenTransfer';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { getTokenTypeName } from 'lib/token/tokenTypes';
@@ -22,7 +22,7 @@ type Props = TokenTransfer & {
   showTxInfo?: boolean;
   enableTimeIncrement?: boolean;
   isLoading?: boolean;
-  chainData?: ChainConfig;
+  chainData?: ClusterChainConfig;
 };
 
 const TokenTransferListItem = ({
diff --git a/ui/shared/TokenTransfer/TokenTransferTable.tsx b/ui/shared/TokenTransfer/TokenTransferTable.tsx
index a0f7ebff00..74006c4cae 100644
--- a/ui/shared/TokenTransfer/TokenTransferTable.tsx
+++ b/ui/shared/TokenTransfer/TokenTransferTable.tsx
@@ -4,7 +4,6 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
 import { useMultichainContext } from 'lib/contexts/multichain';
-import { getChainDataForList } from 'lib/multichain/getChainDataForList';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
@@ -34,7 +33,7 @@ const TokenTransferTable = ({
   isLoading,
 }: Props) => {
   const multichainContext = useMultichainContext();
-  const chainData = getChainDataForList(multichainContext);
+  const chainData = multichainContext?.chain;
 
   return (
     <AddressHighlightProvider>
diff --git a/ui/shared/TokenTransfer/TokenTransferTableItem.tsx b/ui/shared/TokenTransfer/TokenTransferTableItem.tsx
index d19f28937e..23a950319c 100644
--- a/ui/shared/TokenTransfer/TokenTransferTableItem.tsx
+++ b/ui/shared/TokenTransfer/TokenTransferTableItem.tsx
@@ -2,18 +2,18 @@ import { Flex, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenTransfer } from 'types/api/tokenTransfer';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { getTokenTypeName } from 'lib/token/tokenTypes';
 import { Badge } from 'toolkit/chakra/badge';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { TableCell, TableRow } from 'toolkit/chakra/table';
-import ChainIcon from 'ui/optimismSuperchain/components/ChainIcon';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import ChainIcon from 'ui/shared/externalChains/ChainIcon';
 import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
@@ -23,7 +23,7 @@ type Props = TokenTransfer & {
   showTxInfo?: boolean;
   enableTimeIncrement?: boolean;
   isLoading?: boolean;
-  chainData?: ChainConfig;
+  chainData?: ClusterChainConfig;
 };
 
 const TokenTransferTableItem = ({
diff --git a/ui/shared/entities/address/AddressEntity.tsx b/ui/shared/entities/address/AddressEntity.tsx
index 7de9884625..768c0a8967 100644
--- a/ui/shared/entities/address/AddressEntity.tsx
+++ b/ui/shared/entities/address/AddressEntity.tsx
@@ -8,11 +8,11 @@ import { route } from 'nextjs/routes';
 import { toBech32Address } from 'lib/address/bech32';
 import { useAddressHighlightContext } from 'lib/contexts/addressHighlight';
 import { useSettingsContext } from 'lib/contexts/settings';
-import getIconUrl from 'lib/multichain/getIconUrl';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { Tooltip } from 'toolkit/chakra/tooltip';
 import * as EntityBase from 'ui/shared/entities/base/components';
 import { getTagName } from 'ui/shared/EntityTags/utils';
+import getChainTooltipText from 'ui/shared/externalChains/getChainTooltipText';
 import type { IconName } from 'ui/shared/IconSvg';
 
 import { distributeEntityProps, getContentProps, getIconProps } from '../base/utils';
@@ -27,7 +27,10 @@ const getDisplayedAddress = (address: AddressProp, altHash?: string) => {
 };
 
 const Link = chakra((props: LinkProps) => {
-  const defaultHref = route({ pathname: '/address/[hash]', query: { ...props.query, hash: props.address.hash } });
+  const defaultHref = route(
+    { pathname: '/address/[hash]', query: { ...props.query, hash: props.address.hash } },
+    { chain: props.chain, external: props.external },
+  );
 
   return (
     <EntityBase.Link
@@ -46,8 +49,8 @@ const Icon = (props: IconProps) => {
     return null;
   }
 
-  const shield = props.shield ?? (props.chain ? { src: getIconUrl(props.chain) } : undefined);
-  const hintPostfix: string = props.hintPostfix ?? (props.chain ? ` on ${ props.chain.config.chain.name } (Chain ID: ${ props.chain.config.chain.id })` : '');
+  const shield = props.shield ?? (props.chain ? { src: props.chain.logo } : undefined);
+  const hintPostfix: string = props.hintPostfix ?? (props.chain && props.shield !== false ? getChainTooltipText(props.chain, ' on') : '');
 
   const styles = getIconProps(props, Boolean(shield));
 
diff --git a/ui/shared/entities/address/AddressEntityZetaChain.tsx b/ui/shared/entities/address/AddressEntityZetaChain.tsx
index d8341d5635..5fc76570e9 100644
--- a/ui/shared/entities/address/AddressEntityZetaChain.tsx
+++ b/ui/shared/entities/address/AddressEntityZetaChain.tsx
@@ -1,15 +1,17 @@
 import { Box, chakra, Flex } from '@chakra-ui/react';
 import React from 'react';
 
-import { route } from 'nextjs-routes';
+import type { ExternalChain } from 'types/externalChains';
+
+import { route } from 'nextjs/routes';
 
 import config from 'configs/app';
 import { useColorModeValue } from 'toolkit/chakra/color-mode';
 import { Image } from 'toolkit/chakra/image';
 import { SkeletonCircle } from 'toolkit/chakra/skeleton';
 import { Tooltip } from 'toolkit/chakra/tooltip';
-import { stripTrailingSlash } from 'toolkit/utils/url';
 import { unknownAddress } from 'ui/shared/address/utils';
+import getChainTooltipText from 'ui/shared/externalChains/getChainTooltipText';
 import IconSvg from 'ui/shared/IconSvg';
 import useZetaChainConfig from 'ui/zetaChain/useZetaChainConfig';
 
@@ -28,33 +30,26 @@ const AddressEntityZetaChain = ({ chainId, ...props }: Props) => {
   const addressEntityProps = { ...props, address: addressFull };
 
   const partsProps = distributeEntityProps(addressEntityProps);
-  const chain = chainsConfig?.find((chain) => chain.chain_id.toString() === chainId);
+  const chain = chainsConfig?.find((chain) => chain.id.toString() === chainId);
 
   const isCurrentChain = chainId === config.chain.id;
 
   const href = (() => {
-    const blockscoutAddressRoute = route({
+    if (chain && 'address_url_template' in chain && chain.address_url_template) {
+      return chain.address_url_template.replace('{hash}', props.address.hash);
+    }
+    return route({
       pathname: '/address/[hash]',
       query: {
         ...props.query,
         hash: props.address.hash,
       },
-    });
-    if (isCurrentChain) {
-      return blockscoutAddressRoute;
-    }
-    if (chain?.instance_url) {
-      return stripTrailingSlash(chain.instance_url) + blockscoutAddressRoute;
-    }
-    if (chain?.address_url_template) {
-      return chain.address_url_template.replace('{hash}', props.address.hash);
-    }
-    return null;
+    }, { chain: isCurrentChain ? undefined : chain as ExternalChain, external: Boolean(chain) });
   })();
 
   const zetaChainIcon = useColorModeValue(config.UI.navigation.icon.default, config.UI.navigation.icon.dark || config.UI.navigation.icon.default);
-  const chainLogo = isCurrentChain ? zetaChainIcon : chain?.chain_logo;
-  const chainName = isCurrentChain ? config.chain.name : chain?.chain_name;
+  const chainLogo = isCurrentChain ? zetaChainIcon : chain?.logo;
+  const chainName = isCurrentChain ? config.chain.name : chain?.name;
   const iconStyles = getIconProps(partsProps.icon, false);
 
   const addressIcon = (() => {
@@ -108,7 +103,7 @@ const AddressEntityZetaChain = ({ chainId, ...props }: Props) => {
 
   return (
     <AddressEntityBase.Container className={ props.className }>
-      <Tooltip content={ `Address on ${ chainName } (Chain ID ${ chainId })` }>
+      <Tooltip content={ getChainTooltipText(chain ? { ...chain, name: chainName ?? chain.name } : undefined, 'Address on ') }>
         { addressIcon }
       </Tooltip>
       { href ? (
diff --git a/ui/shared/entities/address/AddressIconDelegated.tsx b/ui/shared/entities/address/AddressIconDelegated.tsx
index da54892656..6e06431238 100644
--- a/ui/shared/entities/address/AddressIconDelegated.tsx
+++ b/ui/shared/entities/address/AddressIconDelegated.tsx
@@ -1,14 +1,12 @@
-import { Box } from '@chakra-ui/react';
+import { Box, useToken } from '@chakra-ui/react';
 import React from 'react';
 
-import { useColorModeValue } from 'toolkit/chakra/color-mode';
-
 interface Props {
   isVerified: boolean;
 }
 
 const AddressIconDelegated = ({ isVerified }: Props) => {
-  const bgColor = useColorModeValue('var(--chakra-colors-white)', 'var(--chakra-colors-black)');
+  const bgColor = useToken('colors', 'bg.primary')[0];
 
   return (
     <Box position="absolute" boxSize="14px" top="-2px" right="-2px" color={ isVerified ? 'green.500' : 'icon.primary' }>
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_shield-contract-with-icon-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_shield-contract-with-icon-1.png
index 86f2e56961..39ecc32f8e 100644
Binary files a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_shield-contract-with-icon-1.png and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_shield-contract-with-icon-1.png differ
diff --git a/ui/shared/entities/base/components.tsx b/ui/shared/entities/base/components.tsx
index 8e19c32caa..9a28df9e0c 100644
--- a/ui/shared/entities/base/components.tsx
+++ b/ui/shared/entities/base/components.tsx
@@ -2,7 +2,7 @@ import { Box, chakra, Flex } from '@chakra-ui/react';
 import type { IconProps } from '@chakra-ui/react';
 import React from 'react';
 
-import type { ChainConfig } from 'types/multichain';
+import type { ExternalChain } from 'types/externalChains';
 
 import type { ImageProps } from 'toolkit/chakra/image';
 import { Image } from 'toolkit/chakra/image';
@@ -40,7 +40,7 @@ export interface EntityBaseProps {
   truncation?: Truncation;
   truncationMaxSymbols?: number;
   variant?: Variant;
-  chain?: ChainConfig;
+  chain?: ExternalChain;
 }
 
 export interface ContainerBaseProps extends Pick<EntityBaseProps, 'className'> {
@@ -96,7 +96,7 @@ const Link = chakra(({ isLoading, children, external, onClick, href, noLink, var
 });
 
 type EntityIconProps = (ImageProps | IconSvgProps) & Pick<IconProps, 'color' | 'borderRadius' | 'marginRight' | 'boxSize'> & {
-  shield?: IconShieldProps;
+  shield?: IconShieldProps | false;
   hint?: string;
   hintPostfix?: string;
   tooltipInteractive?: boolean;
@@ -143,25 +143,25 @@ const Icon = (props: IconBaseProps) => {
     );
   })();
 
-  const iconElementWithHint = hint ? (
+  const content = (
+    <Box position="relative" display="inline-flex" alignItems="center" flexShrink={ 0 }>
+      { iconElement }
+      { shield && <IconShield isLoading={ isLoading } variant={ variant } { ...shield }/> }
+    </Box>
+  );
+
+  if (!hint) {
+    return content;
+  }
+
+  return (
     <Tooltip
       content={ hint }
       interactive={ tooltipInteractive }
       positioning={ shield ? { offset: { mainAxis: 8 } } : undefined }
     >
-      { iconElement }
+      { content }
     </Tooltip>
-  ) : iconElement;
-
-  if (!shield) {
-    return iconElementWithHint;
-  }
-
-  return (
-    <Box position="relative" display="inline-flex" alignItems="center" flexShrink={ 0 }>
-      { iconElementWithHint }
-      <IconShield isLoading={ isLoading } variant={ variant } { ...shield }/>
-    </Box>
   );
 };
 
diff --git a/ui/shared/entities/block/BlockEntity.tsx b/ui/shared/entities/block/BlockEntity.tsx
index 049245e1d5..7d50277634 100644
--- a/ui/shared/entities/block/BlockEntity.tsx
+++ b/ui/shared/entities/block/BlockEntity.tsx
@@ -5,9 +5,8 @@ import { route } from 'nextjs/routes';
 
 import config from 'configs/app';
 import { useMultichainContext } from 'lib/contexts/multichain';
-import getChainTooltipText from 'lib/multichain/getChainTooltipText';
-import getIconUrl from 'lib/multichain/getIconUrl';
 import * as EntityBase from 'ui/shared/entities/base/components';
+import getChainTooltipText from 'ui/shared/externalChains/getChainTooltipText';
 
 import { distributeEntityProps } from '../base/utils';
 
@@ -17,7 +16,7 @@ const Link = chakra((props: LinkProps) => {
   const heightOrHash = props.hash ?? String(props.number);
   const defaultHref = route(
     { pathname: '/block/[height_or_hash]', query: { height_or_hash: heightOrHash } },
-    props.chain ? { chain: props.chain } : undefined,
+    { chain: props.chain, external: props.external },
   );
 
   return (
@@ -49,7 +48,7 @@ const Icon = (props: IconProps) => {
       return props.hint;
     }
 
-    if (props.chain) {
+    if (props.chain && props.shield !== false) {
       return getChainTooltipText(props.chain, 'Block on ');
     }
 
@@ -60,7 +59,7 @@ const Icon = (props: IconProps) => {
     <EntityBase.Icon
       { ...props }
       name={ name }
-      shield={ props.shield ?? (props.chain ? { src: getIconUrl(props.chain) } : undefined) }
+      shield={ props.shield ?? (props.chain ? { src: props.chain.logo } : undefined) }
       hint={ hint }
     />
   );
diff --git a/ui/shared/entities/flashblock/FlashblockEntity.tsx b/ui/shared/entities/flashblock/FlashblockEntity.tsx
index f0c7e37432..cd03ec2d4b 100644
--- a/ui/shared/entities/flashblock/FlashblockEntity.tsx
+++ b/ui/shared/entities/flashblock/FlashblockEntity.tsx
@@ -13,7 +13,7 @@ type LinkProps = EntityBase.LinkBaseProps & Partial<Pick<EntityProps, 'number'>>
 const Link = chakra((props: LinkProps) => {
   const defaultHref = route(
     { pathname: '/block/[height_or_hash]', query: { height_or_hash: String(props.number) } },
-    props.chain ? { chain: props.chain } : undefined,
+    { chain: props.chain, external: props.external },
   );
 
   return (
diff --git a/ui/shared/entities/nft/NftEntity.tsx b/ui/shared/entities/nft/NftEntity.tsx
index deb9e05ec5..fd2a64cf86 100644
--- a/ui/shared/entities/nft/NftEntity.tsx
+++ b/ui/shared/entities/nft/NftEntity.tsx
@@ -64,7 +64,7 @@ type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'hash' | 'id'>;
 const Link = chakra((props: LinkProps) => {
   const defaultHref = route(
     { pathname: '/token/[hash]/instance/[id]', query: { hash: props.hash, id: props.id } },
-    props.chain ? { chain: props.chain } : undefined,
+    { chain: props.chain, external: props.external },
   );
 
   return (
diff --git a/ui/shared/entities/pool/PoolEntity.tsx b/ui/shared/entities/pool/PoolEntity.tsx
index 760ca6cdc0..f9f0e5602f 100644
--- a/ui/shared/entities/pool/PoolEntity.tsx
+++ b/ui/shared/entities/pool/PoolEntity.tsx
@@ -31,12 +31,11 @@ const Link = chakra((props: LinkProps) => {
 type IconProps = Pick<EntityProps, 'pool' | 'className'> & EntityBase.IconBaseProps;
 
 const Icon = (props: IconProps) => {
-  const bgColor = { _light: 'white', _dark: 'black' };
   const borderColor = { _light: 'whiteAlpha.800', _dark: 'blackAlpha.800' };
   return (
     <Flex>
       <Flex
-        bgColor={ bgColor }
+        bgColor="bg.primary"
         borderRadius="full"
         border="1px solid"
         borderColor={ borderColor }
@@ -57,7 +56,7 @@ const Icon = (props: IconProps) => {
       </Flex>
       <Flex
         transform="translateX(-8px)"
-        bgColor={ bgColor }
+        bgColor="bg.primary"
         borderRadius="full"
         border="1px solid"
         borderColor={ borderColor }
diff --git a/ui/shared/entities/token/TokenEntity.pw.tsx b/ui/shared/entities/token/TokenEntity.pw.tsx
index f527725e89..8f4e8026dc 100644
--- a/ui/shared/entities/token/TokenEntity.pw.tsx
+++ b/ui/shared/entities/token/TokenEntity.pw.tsx
@@ -1,7 +1,6 @@
 import { Box } from '@chakra-ui/react';
 import React from 'react';
 
-import getIconUrl from 'lib/multichain/getIconUrl';
 import * as opSuperchainMock from 'mocks/multichain/opSuperchain';
 import * as tokenMock from 'mocks/tokens/tokenInfo';
 import { stableHover } from 'playwright/helpers/stableHover';
@@ -28,7 +27,7 @@ test.describe('variant', () => {
 
     test(`${ variant } with chain data`, async({ render, mockAssetResponse }) => {
       const LOGO_URL = 'https://example.com/logo.png';
-      const chainLogoUrl = getIconUrl(opSuperchainMock.chainDataA);
+      const chainLogoUrl = opSuperchainMock.chainDataA.logo;
       await mockAssetResponse(LOGO_URL, './playwright/mocks/image_s.jpg');
       await mockAssetResponse(chainLogoUrl as string, './playwright/mocks/image_svg.svg');
 
@@ -52,7 +51,7 @@ test.describe('variant', () => {
 });
 
 test('icon in heading variant', async({ render, mockAssetResponse }) => {
-  const chainLogoUrl = getIconUrl(opSuperchainMock.chainDataA);
+  const chainLogoUrl = opSuperchainMock.chainDataA.logo;
   await mockAssetResponse(tokenMock.tokenInfo.icon_url as string, './playwright/mocks/image_s.jpg');
   await mockAssetResponse(chainLogoUrl as string, './playwright/mocks/image_svg.svg');
 
diff --git a/ui/shared/entities/token/TokenEntity.tsx b/ui/shared/entities/token/TokenEntity.tsx
index 7d63f17076..d079c1e3f3 100644
--- a/ui/shared/entities/token/TokenEntity.tsx
+++ b/ui/shared/entities/token/TokenEntity.tsx
@@ -8,12 +8,11 @@ import { route } from 'nextjs/routes';
 
 import config from 'configs/app';
 import { useMultichainContext } from 'lib/contexts/multichain';
-import getChainTooltipText from 'lib/multichain/getChainTooltipText';
-import getIconUrl from 'lib/multichain/getIconUrl';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { Tooltip } from 'toolkit/chakra/tooltip';
 import { TruncatedTextTooltip } from 'toolkit/components/truncation/TruncatedTextTooltip';
 import * as EntityBase from 'ui/shared/entities/base/components';
+import getChainTooltipText from 'ui/shared/externalChains/getChainTooltipText';
 import IconSvg from 'ui/shared/IconSvg';
 import TokenLogoPlaceholder from 'ui/shared/TokenLogoPlaceholder';
 
@@ -24,7 +23,7 @@ type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'token'>;
 const Link = chakra((props: LinkProps) => {
   const defaultHref = route(
     { pathname: '/token/[hash]', query: { ...props.query, hash: props.token.address_hash } },
-    props.chain ? { chain: props.chain } : undefined,
+    { chain: props.chain, external: props.external },
   );
 
   return (
@@ -56,8 +55,8 @@ const Icon = (props: IconProps) => {
       src={ props.token.icon_url ?? undefined }
       alt={ `${ props.token.name || 'token' } logo` }
       fallback={ <TokenLogoPlaceholder/> }
-      shield={ props.shield ?? (props.chain ? { src: getIconUrl(props.chain) } : undefined) }
-      hint={ props.chain ? getChainTooltipText(props.chain, 'Token on ') : undefined }
+      shield={ props.shield ?? (props.chain ? { src: props.chain.logo } : undefined) }
+      hint={ props.chain && props.shield !== false ? getChainTooltipText(props.chain, 'Token on ') : undefined }
       { ...props }
     />
   );
diff --git a/ui/shared/entities/tx/TxEntity.tsx b/ui/shared/entities/tx/TxEntity.tsx
index 98c0870a8f..408aa92b88 100644
--- a/ui/shared/entities/tx/TxEntity.tsx
+++ b/ui/shared/entities/tx/TxEntity.tsx
@@ -5,9 +5,8 @@ import { route } from 'nextjs/routes';
 
 import config from 'configs/app';
 import { useMultichainContext } from 'lib/contexts/multichain';
-import getChainTooltipText from 'lib/multichain/getChainTooltipText';
-import getIconUrl from 'lib/multichain/getIconUrl';
 import * as EntityBase from 'ui/shared/entities/base/components';
+import getChainTooltipText from 'ui/shared/externalChains/getChainTooltipText';
 
 import { distributeEntityProps } from '../base/utils';
 
@@ -16,7 +15,7 @@ type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'hash'>;
 const Link = chakra((props: LinkProps) => {
   const defaultHref = route(
     { pathname: '/tx/[hash]', query: { hash: props.hash } },
-    props.chain ? { chain: props.chain } : undefined,
+    { chain: props.chain, external: props.external },
   );
 
   return (
@@ -47,7 +46,7 @@ const Icon = (props: IconProps) => {
       return props.hint;
     }
 
-    if (props.chain) {
+    if (props.chain && props.shield !== false) {
       return getChainTooltipText(props.chain, 'Transaction on ');
     }
 
@@ -60,7 +59,7 @@ const Icon = (props: IconProps) => {
     <EntityBase.Icon
       { ...props }
       name={ name }
-      shield={ props.shield ?? (props.chain ? { src: getIconUrl(props.chain) } : undefined) }
+      shield={ props.shield ?? (props.chain ? { src: props.chain.logo } : undefined) }
       hint={ hint }
     />
   );
diff --git a/ui/shared/entities/tx/TxEntityInterop.tsx b/ui/shared/entities/tx/TxEntityInterop.tsx
index 3492a2ea56..aa2a1016c1 100644
--- a/ui/shared/entities/tx/TxEntityInterop.tsx
+++ b/ui/shared/entities/tx/TxEntityInterop.tsx
@@ -1,7 +1,7 @@
 import { Box, chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import type { CrossChainInfo } from 'types/client/crossChainInfo';
+import type { ChainInfo } from 'types/api/interop';
 
 import { route } from 'nextjs-routes';
 
@@ -15,7 +15,7 @@ import { distributeEntityProps } from '../base/utils';
 import * as TxEntity from './TxEntity';
 
 type Props = {
-  chain?: CrossChainInfo | null;
+  chain?: ChainInfo | null;
   hash?: string | null;
 } & Omit<TxEntity.EntityProps, 'hash' | 'chain'>;
 
diff --git a/ui/shared/entities/tx/TxEntityZetaChainExternal.tsx b/ui/shared/entities/tx/TxEntityZetaChainExternal.tsx
index aac245d998..c085f069db 100644
--- a/ui/shared/entities/tx/TxEntityZetaChainExternal.tsx
+++ b/ui/shared/entities/tx/TxEntityZetaChainExternal.tsx
@@ -1,9 +1,10 @@
 import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import type { ExternalChain } from 'types/externalChains';
+
 import { route } from 'nextjs/routes';
 
-import { stripTrailingSlash } from 'toolkit/utils/url';
 import useZetaChainConfig from 'ui/zetaChain/useZetaChainConfig';
 
 import * as TxEntity from './TxEntity';
@@ -14,16 +15,13 @@ type Props = {
 
 const TxEntityZetaChainExternal = (props: Props) => {
   const { data: chainsConfig } = useZetaChainConfig();
-  const chain = chainsConfig?.find((chain) => chain.chain_id.toString() === props.chainId);
+  const chain = chainsConfig?.find((chain) => chain.id.toString() === props.chainId);
 
   const defaultHref = (() => {
-    if (chain?.instance_url) {
-      return stripTrailingSlash(chain.instance_url) + route({ pathname: '/tx/[hash]', query: { hash: props.hash } });
-    }
-    if (chain?.tx_url_template) {
+    if (chain && 'tx_url_template' in chain && chain.tx_url_template) {
       return chain.tx_url_template.replace('{hash}', props.hash);
     }
-    return;
+    return route({ pathname: '/tx/[hash]', query: { hash: props.hash } }, { chain: chain as ExternalChain, external: true });
   })();
 
   return <TxEntity.default { ...props } href={ props.href ?? defaultHref } link={{ external: true }}/>;
diff --git a/ui/shared/entities/userOp/UserOpEntity.tsx b/ui/shared/entities/userOp/UserOpEntity.tsx
index 7c132dc17d..21cd69ef5b 100644
--- a/ui/shared/entities/userOp/UserOpEntity.tsx
+++ b/ui/shared/entities/userOp/UserOpEntity.tsx
@@ -4,9 +4,8 @@ import React from 'react';
 import { route } from 'nextjs/routes';
 
 import { useMultichainContext } from 'lib/contexts/multichain';
-import getChainTooltipText from 'lib/multichain/getChainTooltipText';
-import getIconUrl from 'lib/multichain/getIconUrl';
 import * as EntityBase from 'ui/shared/entities/base/components';
+import getChainTooltipText from 'ui/shared/externalChains/getChainTooltipText';
 
 import { distributeEntityProps } from '../base/utils';
 
@@ -15,7 +14,7 @@ type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'hash'>;
 const Link = chakra((props: LinkProps) => {
   const defaultHref = route(
     { pathname: '/op/[hash]', query: { hash: props.hash } },
-    props.chain ? { chain: props.chain } : undefined,
+    { chain: props.chain, external: props.external },
   );
 
   return (
@@ -33,8 +32,8 @@ const Icon = (props: EntityBase.IconBaseProps) => {
     <EntityBase.Icon
       { ...props }
       name={ 'name' in props ? props.name : 'user_op_slim' }
-      shield={ props.shield ?? (props.chain ? { src: getIconUrl(props.chain) } : undefined) }
-      hint={ props.chain ? getChainTooltipText(props.chain, 'User operation on ') : undefined }
+      shield={ props.shield ?? (props.chain ? { src: props.chain.logo } : undefined) }
+      hint={ props.chain && props.shield !== false ? getChainTooltipText(props.chain, 'User operation on ') : undefined }
     />
   );
 };
diff --git a/ui/optimismSuperchain/components/ChainIcon.tsx b/ui/shared/externalChains/ChainIcon.tsx
similarity index 60%
rename from ui/optimismSuperchain/components/ChainIcon.tsx
rename to ui/shared/externalChains/ChainIcon.tsx
index 6833f6f8c9..349b3c4844 100644
--- a/ui/optimismSuperchain/components/ChainIcon.tsx
+++ b/ui/shared/externalChains/ChainIcon.tsx
@@ -1,42 +1,39 @@
 import React from 'react';
 
-import type { ChainConfig } from 'types/multichain';
+import type { ExternalChain } from 'types/externalChains';
 
-import getChainTooltipText from 'lib/multichain/getChainTooltipText';
-import getIconUrl from 'lib/multichain/getIconUrl';
 import type { ImageProps } from 'toolkit/chakra/image';
 import { Image } from 'toolkit/chakra/image';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { Tooltip } from 'toolkit/chakra/tooltip';
 import IconSvg from 'ui/shared/IconSvg';
 
+import getChainTooltipText from './getChainTooltipText';
+
 interface Props extends ImageProps {
-  data: ChainConfig;
+  data: Omit<ExternalChain, 'explorer_url'> | undefined;
   isLoading?: boolean;
-  withTooltip?: boolean;
+  noTooltip?: boolean;
 }
 
-const ChainIcon = ({ data, boxSize = 5, borderRadius = 'full', isLoading, withTooltip, ...rest }: Props) => {
-  const placeholder = <IconSvg name="networks/icon-placeholder" boxSize={ boxSize } color="text.secondary"/>;
-
-  const iconUrl = getIconUrl(data);
+const ChainIcon = ({ data, boxSize = 5, borderRadius = 'none', isLoading, noTooltip, ...rest }: Props) => {
+  if (isLoading) {
+    return <Skeleton boxSize={ boxSize } borderRadius={ borderRadius === 'none' ? 'full' : borderRadius } { ...rest } loading/>;
+  }
 
+  const placeholder = <IconSvg name="networks/icon-placeholder" boxSize={ boxSize } color="icon.primary"/>;
   const content = (
     <Image
-      src={ iconUrl }
+      src={ data?.logo }
       boxSize={ boxSize }
       borderRadius={ borderRadius }
       fallback={ placeholder }
-      alt={ `${ data.config.chain.name } chain icon` }
+      alt={ `${ data?.name || 'Unknown' } chain icon` }
       { ...rest }
     />
   );
 
-  if (isLoading) {
-    return <Skeleton boxSize={ boxSize } borderRadius={ borderRadius } { ...rest } loading/>;
-  }
-
-  if (withTooltip) {
+  if (!noTooltip) {
     return (
       <Tooltip content={ getChainTooltipText(data) }>
         { content }
diff --git a/ui/shared/externalChains/ChainSelect.tsx b/ui/shared/externalChains/ChainSelect.tsx
new file mode 100644
index 0000000000..2d63cc6e26
--- /dev/null
+++ b/ui/shared/externalChains/ChainSelect.tsx
@@ -0,0 +1,65 @@
+import { createListCollection } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ExternalChain } from 'types/externalChains';
+
+import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import type { SelectOption, SelectProps, ViewMode } from 'toolkit/chakra/select';
+import { Select } from 'toolkit/chakra/select';
+import IconSvg from 'ui/shared/IconSvg';
+
+import ChainIcon from './ChainIcon';
+
+const ALL_OPTION = {
+  value: 'all',
+  label: 'All chains',
+  icon: <IconSvg name="apps_slim" boxSize={ 5 }/>,
+};
+
+export interface Props extends Omit<SelectProps, 'collection' | 'placeholder'> {
+  loading?: boolean;
+  mode?: ViewMode;
+  chainsConfig: Array<Omit<ExternalChain, 'explorer_url'>>;
+  chainIds?: Array<string>;
+  withAllOption?: boolean;
+}
+
+const ChainSelect = ({ loading, mode, chainsConfig, chainIds, withAllOption, ...props }: Props) => {
+  const isInitialLoading = useIsInitialLoading(loading);
+  const isMobile = useIsMobile();
+
+  const collection = React.useMemo(() => {
+
+    const chainItems = chainsConfig
+      .filter((chain) => !chainIds || chainIds.includes(chain.id))
+      .map((chain) => ({
+        value: chain.id,
+        label: chain.name || `Chain ${ chain.id }`,
+        icon: <ChainIcon data={ chain } alt={ `${ chain.name } logo` } borderRadius="none" noTooltip/>,
+      })) || [];
+
+    const items = [ withAllOption ? ALL_OPTION : undefined, ...chainItems ].filter(Boolean);
+
+    return createListCollection<SelectOption>({ items });
+  }, [ chainIds, chainsConfig, withAllOption ]);
+
+  if (collection.items.length === 0) {
+    return null;
+  }
+
+  return (
+    <Select
+      collection={ collection }
+      defaultValue={ collection.items.length > 0 ? [ collection.items[0].value ] : undefined }
+      placeholder="Select chain"
+      loading={ isInitialLoading }
+      mode={ isMobile && !mode ? 'compact' : mode }
+      w="fit-content"
+      flexShrink={ 0 }
+      { ...props }
+    />
+  );
+};
+
+export default React.memo(ChainSelect);
diff --git a/ui/shared/externalChains/getChainTooltipText.ts b/ui/shared/externalChains/getChainTooltipText.ts
new file mode 100644
index 0000000000..d214786d59
--- /dev/null
+++ b/ui/shared/externalChains/getChainTooltipText.ts
@@ -0,0 +1,8 @@
+import type { ExternalChain } from 'types/externalChains';
+
+export default function getChainTooltipText(chain: Pick<ExternalChain, 'id' | 'name'> | undefined, prefix: string = '') {
+  if (!chain) {
+    return 'Unknown chain';
+  }
+  return `${ prefix }${ chain.name } (Chain ID: ${ chain.id })`;
+}
diff --git a/ui/shared/gas/GasPrice.tsx b/ui/shared/gas/GasPrice.tsx
index 8a9b1cc41f..75e6861785 100644
--- a/ui/shared/gas/GasPrice.tsx
+++ b/ui/shared/gas/GasPrice.tsx
@@ -23,7 +23,7 @@ interface Props {
 
 const GasPrice = ({ data, prefix, className, unitMode = 'primary' }: Props) => {
   const multichainContext = useMultichainContext();
-  const feature = multichainContext?.chain?.config.features.gasTracker || config.features.gasTracker;
+  const feature = multichainContext?.chain?.app_config.features.gasTracker || config.features.gasTracker;
 
   if (!data || !feature.isEnabled) {
     return null;
diff --git a/ui/shared/layout/components/Container.tsx b/ui/shared/layout/components/Container.tsx
index 6c2ea5f5b8..6fd7a73351 100644
--- a/ui/shared/layout/components/Container.tsx
+++ b/ui/shared/layout/components/Container.tsx
@@ -12,7 +12,7 @@ const Container = ({ children, className }: Props) => {
       className={ className }
       minWidth={{ base: '100vw', lg: 'fit-content' }}
       m="0 auto"
-      bgColor={{ _light: 'white', _dark: 'black' }}
+      bgColor="bg.primary"
     >
       { children }
     </Box>
diff --git a/ui/shared/links/AdvancedFilterLink.tsx b/ui/shared/links/AdvancedFilterLink.tsx
index 4c1e9677c6..f973717f76 100644
--- a/ui/shared/links/AdvancedFilterLink.tsx
+++ b/ui/shared/links/AdvancedFilterLink.tsx
@@ -1,23 +1,23 @@
 import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import type { RouteParams } from 'nextjs/routes';
 import { route } from 'nextjs/routes';
 
-import type { TMultichainContext } from 'lib/contexts/multichain';
 import type { LinkProps } from 'toolkit/chakra/link';
 import { Link } from 'toolkit/chakra/link';
 import IconSvg from 'ui/shared/IconSvg';
 
 interface Props extends LinkProps {
   query?: Record<string, string | Array<string> | undefined>;
-  linkContext?: TMultichainContext | null;
+  routeParams?: RouteParams;
   adaptive?: boolean;
 }
 
-const AdvancedFilterLink = ({ query, linkContext, adaptive = true, ...rest }: Props) => {
+const AdvancedFilterLink = ({ query, routeParams, adaptive = true, ...rest }: Props) => {
   return (
     <Link
-      href={ route({ pathname: '/advanced-filter', query }, linkContext) }
+      href={ route({ pathname: '/advanced-filter', query }, routeParams) }
       display="flex"
       alignItems="center"
       gap={ 1 }
diff --git a/ui/shared/logs/LogItem.tsx b/ui/shared/logs/LogItem.tsx
index efaf716d63..54387ee788 100644
--- a/ui/shared/logs/LogItem.tsx
+++ b/ui/shared/logs/LogItem.tsx
@@ -2,7 +2,7 @@ import { Grid, GridItem } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Log } from 'types/api/log';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import { route } from 'nextjs-routes';
 
@@ -24,7 +24,7 @@ type Props = Log & {
   type: 'address' | 'transaction';
   isLoading?: boolean;
   defaultDataType?: DataType;
-  chainData?: ChainConfig;
+  chainData?: ClusterChainConfig;
 };
 
 const RowHeader = ({ children, isLoading }: { children: React.ReactNode; isLoading?: boolean }) => (
diff --git a/ui/shared/multichain/ChainSelect.tsx b/ui/shared/multichain/ChainSelect.tsx
deleted file mode 100644
index f5ff98f31c..0000000000
--- a/ui/shared/multichain/ChainSelect.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { createListCollection } from '@chakra-ui/react';
-import React from 'react';
-
-import multichainConfig from 'configs/multichain';
-import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
-import useIsMobile from 'lib/hooks/useIsMobile';
-import { Select } from 'toolkit/chakra/select';
-import type { SelectOption, SelectProps, ViewMode } from 'toolkit/chakra/select';
-import ChainIcon from 'ui/optimismSuperchain/components/ChainIcon';
-
-const collection = createListCollection<SelectOption>({
-  items: multichainConfig()?.chains.map((chain) => ({
-    value: chain.slug,
-    label: chain.config.chain.name || chain.slug,
-    icon: <ChainIcon data={ chain } alt={ chain.config.chain.name }/>,
-  })) || [],
-});
-
-interface Props extends Omit<SelectProps, 'collection' | 'placeholder'> {
-  loading?: boolean;
-  mode?: ViewMode;
-}
-
-const ChainSelect = ({ loading, mode, ...props }: Props) => {
-  const isInitialLoading = useIsInitialLoading(loading);
-  const isMobile = useIsMobile();
-
-  return (
-    <Select
-      collection={ collection }
-      defaultValue={ [ collection.items[0].value ] }
-      placeholder="Select chain"
-      loading={ isInitialLoading }
-      mode={ isMobile && !mode ? 'compact' : mode }
-      w="fit-content"
-      flexShrink={ 0 }
-      { ...props }
-    />
-  );
-};
-
-export default React.memo(ChainSelect);
diff --git a/ui/shared/pagination/useQueryWithPages.ts b/ui/shared/pagination/useQueryWithPages.ts
index 4c2275d94e..eb39f6567f 100644
--- a/ui/shared/pagination/useQueryWithPages.ts
+++ b/ui/shared/pagination/useQueryWithPages.ts
@@ -9,6 +9,7 @@ import type { PaginationParams } from './types';
 
 import type { Route } from 'nextjs-routes';
 
+import multichainConfig from 'configs/multichain';
 import getResourceParams from 'lib/api/getResourceParams';
 import type { PaginatedResourceName, PaginationFilters, PaginationSorting, ResourceError, ResourcePayload } from 'lib/api/resources';
 import { SORTING_FIELDS } from 'lib/api/resources';
@@ -28,8 +29,9 @@ export interface Params<Resource extends PaginatedResourceName> {
   filters?: PaginationFilters<Resource>;
   sorting?: PaginationSorting<Resource>;
   scrollRef?: React.RefObject<HTMLDivElement | null>;
-  isMultichain?: boolean;
   hasNextPageFn?: (nextPageParams: NextPageParams) => boolean;
+  isMultichain?: boolean;
+  chainIds?: Array<string>;
 }
 
 const INITIAL_PAGE_PARAMS = { '1': {} };
@@ -74,8 +76,9 @@ export default function useQueryWithPages<Resource extends PaginatedResourceName
   pathParams,
   queryParams: queryParamsFromProps,
   scrollRef,
-  isMultichain,
   hasNextPageFn,
+  isMultichain,
+  chainIds,
 }: Params<Resource>): QueryWithPagesResult<Resource> {
   const queryClient = useQueryClient();
   const router = useRouter();
@@ -89,9 +92,24 @@ export default function useQueryWithPages<Resource extends PaginatedResourceName
   });
   const [ hasPages, setHasPages ] = React.useState(page > 1);
   const [ chainValue, setChainValue ] = React.useState<Array<string> | undefined>(
-    hasChainValue ? [ getChainValueFromQuery(router.query) ].filter(Boolean) : undefined,
+    hasChainValue ? [ getChainValueFromQuery(router.query, chainIds) ].filter(Boolean) : undefined,
   );
 
+  const selectedChain = React.useMemo(() => {
+    if (!hasChainValue) {
+      return;
+    }
+
+    if (multichainContext?.chain) {
+      return multichainContext.chain.id === chainValue?.[0] ? multichainContext.chain : undefined;
+    }
+
+    const config = multichainConfig();
+    if (config) {
+      return config.chains.find((chain) => chain.id === chainValue?.[0]);
+    }
+  }, [ chainValue, hasChainValue, multichainContext?.chain ]);
+
   const isMounted = React.useRef(false);
   const queryParams = { ...pageParams[page], ...filters, ...sorting, ...queryParamsFromProps };
 
@@ -106,11 +124,19 @@ export default function useQueryWithPages<Resource extends PaginatedResourceName
       staleTime: page === 1 ? 0 : Infinity,
       ...options,
     },
-    chainSlug: chainValue?.[0],
+    chain: selectedChain,
   });
   const { data } = queryResult;
   const nextPageParams = getNextPageParams(data);
 
+  React.useEffect(() => {
+    if (hasChainValue) {
+      setChainValue([ getChainValueFromQuery(router.query, chainIds) ].filter(Boolean));
+    }
+  // don't trigger the hook on query change
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ chainIds, hasChainValue ]);
+
   const onNextPageClick = useCallback(() => {
     if (!nextPageParams) {
       // we hide next page button if no next_page_params
@@ -157,7 +183,7 @@ export default function useQueryWithPages<Resource extends PaginatedResourceName
     scrollToTop();
     const nextRouterQuery = omit(router.query, [ 'next_page_params', 'page' ]);
     if (chainValue) {
-      nextRouterQuery['chain-slug'] = chainValue[0];
+      nextRouterQuery.chain_id = chainValue[0];
     }
     router.push({ pathname: router.pathname, query: nextRouterQuery }, undefined, { shallow: true }).then(() => {
       queryClient.removeQueries({ queryKey: [ resourceName ] });
@@ -173,7 +199,7 @@ export default function useQueryWithPages<Resource extends PaginatedResourceName
   }, [ queryClient, resourceName, router, scrollToTop ]);
 
   const onFilterChange = useCallback(<R extends PaginatedResourceName = Resource>(newFilters: PaginationFilters<R> | undefined) => {
-    const { resource } = getResourceParams(resourceName);
+    const { resource } = getResourceParams(resourceName, selectedChain);
     const newQuery: typeof router.query = omit(
       router.query,
       [
@@ -203,7 +229,7 @@ export default function useQueryWithPages<Resource extends PaginatedResourceName
       setPage(1);
       setPageParams(INITIAL_PAGE_PARAMS);
     });
-  }, [ router, resourceName, scrollToTop ]);
+  }, [ resourceName, selectedChain, router, scrollToTop ]);
 
   const onSortingChange = useCallback((newSorting: PaginationSorting<Resource> | undefined) => {
     const newQuery: typeof router.query = {
@@ -231,7 +257,7 @@ export default function useQueryWithPages<Resource extends PaginatedResourceName
     } else {
       const nextPageQuery = {
         ...router.query,
-        'chain-slug': value[0],
+        chain_id: value[0],
       };
 
       setChainValue(value);
@@ -275,7 +301,6 @@ export default function useQueryWithPages<Resource extends PaginatedResourceName
   React.useEffect(() => {
     const pageFromQuery = getPageFromQuery(router.query);
     const nextPageParamsFromQuery = getPaginationParamsFromQuery(router.query.next_page_params);
-    const chainValueFromQuery = getChainValueFromQuery(router.query);
 
     setPage(pageFromQuery);
     setPageParams(prev => ({
@@ -283,7 +308,6 @@ export default function useQueryWithPages<Resource extends PaginatedResourceName
       [pageFromQuery]: nextPageParamsFromQuery,
     }));
     setHasPages(pageFromQuery > 1);
-    setChainValue(hasChainValue && chainValueFromQuery ? [ chainValueFromQuery ] : undefined);
   }, [ router.query, hasChainValue ]);
 
   return { ...queryResult, pagination, onFilterChange, onSortingChange, chainValue, onChainValueChange };
diff --git a/ui/shared/reCaptcha/ReCaptcha.tsx b/ui/shared/reCaptcha/ReCaptcha.tsx
index 71c2e15b13..357022236d 100644
--- a/ui/shared/reCaptcha/ReCaptcha.tsx
+++ b/ui/shared/reCaptcha/ReCaptcha.tsx
@@ -17,7 +17,7 @@ const ReCaptchaInvisible = ({ onInitError, hideWarning = false }: Props, ref: Re
   const [ , setIsVisible ] = React.useState(false);
 
   const multichainContext = useMultichainContext();
-  const chainConfig = multichainContext?.chain.config || config;
+  const chainConfig = multichainContext?.chain.app_config || config;
 
   const handleChange = React.useCallback(() => {
     setAttempt(attempt + 1);
diff --git a/ui/shared/search/utils.ts b/ui/shared/search/utils.ts
index e2607e9fb3..bf047e4e92 100644
--- a/ui/shared/search/utils.ts
+++ b/ui/shared/search/utils.ts
@@ -1,7 +1,7 @@
 import type { CctxListItem } from '@blockscout/zetachain-cctx-types';
 import { getFeaturePayload } from 'configs/app/features/types';
 import type { MarketplaceApp } from 'types/client/marketplace';
-import type { SearchResultItem } from 'types/client/search';
+import type { QuickSearchResultItem } from 'types/client/search';
 
 import config from 'configs/app';
 
@@ -24,7 +24,7 @@ export type ApiCategory =
 export type Category = ApiCategory | 'app' | 'zetaChainCCTX';
 
 export type ItemsCategoriesMap =
-Record<ApiCategory, Array<SearchResultItem>> &
+Record<ApiCategory, Array<QuickSearchResultItem>> &
 Record<'app', Array<MarketplaceApp>> &
 Record<'zetaChainCCTX', Array<CctxListItem>>;
 
@@ -56,7 +56,7 @@ if (config.features.marketplace.isEnabled) {
   searchCategories.unshift({ id: 'app', title: `${ dappEntityName }s`, tabTitle: `${ dappEntityName }s` });
 }
 
-if (nameServicesFeature.isEnabled && nameServicesFeature.ens.isEnabled) {
+if ((nameServicesFeature.isEnabled && nameServicesFeature.ens.isEnabled) || config.features.opSuperchain.isEnabled) {
   searchCategories.unshift({ id: 'domain', title: 'Names', tabTitle: 'Names' });
 }
 
@@ -80,7 +80,7 @@ export const searchItemTitles: Record<Category, { itemTitle: string; itemTitleSh
   zetaChainCCTX: { itemTitle: 'CCTX', itemTitleShort: 'CCTX' },
 };
 
-export function getItemCategory(item: SearchResultItem | SearchResultAppItem): Category | undefined {
+export function getItemCategory(item: QuickSearchResultItem | SearchResultAppItem): Category | undefined {
   switch (item.type) {
     case 'address':
     case 'contract':
diff --git a/ui/shared/tx/interpretation/TxInterpretation.tsx b/ui/shared/tx/interpretation/TxInterpretation.tsx
index 890dbf2cbe..c0b92a65af 100644
--- a/ui/shared/tx/interpretation/TxInterpretation.tsx
+++ b/ui/shared/tx/interpretation/TxInterpretation.tsx
@@ -9,14 +9,13 @@ import type {
   TxInterpretationVariable,
   TxInterpretationVariableString,
 } from 'types/api/txInterpretation';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import dayjs from 'lib/date/dayjs';
 import * as mixpanel from 'lib/mixpanel/index';
-import getChainTooltipText from 'lib/multichain/getChainTooltipText';
 import { currencyUnits } from 'lib/units';
 import { Badge } from 'toolkit/chakra/badge';
 import { useColorModeValue } from 'toolkit/chakra/color-mode';
@@ -25,10 +24,11 @@ import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { Tooltip } from 'toolkit/chakra/tooltip';
 import { SECOND } from 'toolkit/utils/consts';
-import ChainIcon from 'ui/optimismSuperchain/components/ChainIcon';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import ChainIcon from 'ui/shared/externalChains/ChainIcon';
+import getChainTooltipText from 'ui/shared/externalChains/getChainTooltipText';
 import IconSvg from 'ui/shared/IconSvg';
 
 import {
@@ -48,7 +48,7 @@ interface Props extends BoxProps {
   addressDataMap?: Record<string, AddressParam>;
   className?: string;
   isNoves?: boolean;
-  chainData?: ChainConfig;
+  chainData?: ClusterChainConfig;
 };
 
 type NonStringTxInterpretationVariable = Exclude<TxInterpretationVariable, TxInterpretationVariableString>;
@@ -224,6 +224,7 @@ const TxInterpretation = ({ summary, isLoading, addressDataMap, className, chain
               borderStyle="solid"
               borderColor="bg.primary"
               backgroundColor="bg.primary"
+              noTooltip
             />
           ) }
         </Box>
diff --git a/ui/snippets/header/HeaderMobile.tsx b/ui/snippets/header/HeaderMobile.tsx
index d72e406f01..2d24ce3a25 100644
--- a/ui/snippets/header/HeaderMobile.tsx
+++ b/ui/snippets/header/HeaderMobile.tsx
@@ -13,17 +13,17 @@ import Burger from './Burger';
 
 type Props = {
   hideSearchButton?: boolean;
-  renderSearchBar?: () => React.ReactNode;
+  onGoToSearchResults?: (searchTerm: string) => void;
 };
 
-const HeaderMobile = ({ hideSearchButton }: Props) => {
+const HeaderMobile = ({ hideSearchButton, onGoToSearchResults }: Props) => {
   const ref = React.useRef<HTMLDivElement>(null);
   const isSticky = useIsSticky(ref, 5);
 
   return (
     <Box
       ref={ ref }
-      bgColor={{ _light: 'white', _dark: 'black' }}
+      bgColor="bg.primary"
       display={{ base: 'block', lg: 'none' }}
       position="sticky"
       top="-1px"
@@ -36,7 +36,7 @@ const HeaderMobile = ({ hideSearchButton }: Props) => {
         as="header"
         paddingX={ 3 }
         paddingY={ 2 }
-        bgColor={{ _light: 'white', _dark: 'black' }}
+        bgColor="bg.primary"
         width="100%"
         alignItems="center"
         transitionProperty="box-shadow"
@@ -46,7 +46,7 @@ const HeaderMobile = ({ hideSearchButton }: Props) => {
         <Burger/>
         <NetworkLogo ml={ 2 } mr="auto"/>
         <Flex columnGap={ 2 }>
-          { !hideSearchButton && <SearchBarMobile/> }
+          { !hideSearchButton && <SearchBarMobile onGoToSearchResults={ onGoToSearchResults }/> }
           { config.features.rewards.isEnabled && <RewardsButton/> }
           { (config.features.account.isEnabled && <UserProfileMobile/>) ||
             (config.features.blockchainInteraction.isEnabled && <UserWalletMobile/>)
diff --git a/ui/snippets/navigation/LightningLabel.tsx b/ui/snippets/navigation/LightningLabel.tsx
index 723bf6d5e0..39e8d8233a 100644
--- a/ui/snippets/navigation/LightningLabel.tsx
+++ b/ui/snippets/navigation/LightningLabel.tsx
@@ -1,7 +1,6 @@
 import { useBreakpointValue, chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import { useColorModeValue } from 'toolkit/chakra/color-mode';
 import IconSvg from 'ui/shared/IconSvg';
 
 export const LIGHTNING_LABEL_CLASS_NAME = 'lightning-label';
@@ -14,16 +13,15 @@ interface Props {
 
 const LightningLabel = ({ className, iconColor, isCollapsed }: Props) => {
   const isLgScreen = useBreakpointValue({ base: false, lg: true, xl: false });
-  const themeBgColor = useColorModeValue('white', 'black');
 
   const isExpanded = isCollapsed === false;
 
   const color = React.useMemo(() => {
     if (isCollapsed || (!isExpanded && isLgScreen)) {
-      return (iconColor && iconColor !== 'transparent') ? iconColor : themeBgColor;
+      return (iconColor && iconColor !== 'transparent') ? iconColor : 'bg.primary';
     }
     return 'transparent';
-  }, [ iconColor, themeBgColor, isCollapsed, isExpanded, isLgScreen ]);
+  }, [ iconColor, isCollapsed, isExpanded, isLgScreen ]);
 
   return (
     <IconSvg
diff --git a/ui/snippets/navigation/vertical/NavigationDesktop.tsx b/ui/snippets/navigation/vertical/NavigationDesktop.tsx
index bf908e9b31..d58650460e 100644
--- a/ui/snippets/navigation/vertical/NavigationDesktop.tsx
+++ b/ui/snippets/navigation/vertical/NavigationDesktop.tsx
@@ -109,7 +109,7 @@ const NavigationDesktop = () => {
         height={ 6 }
         _hover={{ color: 'hover' }}
         borderRadius="base"
-        bgColor={{ base: 'white', _dark: 'black' }}
+        bgColor="bg.primary"
         color={{ base: 'blackAlpha.400', _dark: 'whiteAlpha.400' }}
         borderWidth="1px"
         borderColor="border.divider"
diff --git a/ui/snippets/searchBar/SearchBarDesktop.tsx b/ui/snippets/searchBar/SearchBarDesktop.tsx
index 6cdda373d8..77f3645df6 100644
--- a/ui/snippets/searchBar/SearchBarDesktop.tsx
+++ b/ui/snippets/searchBar/SearchBarDesktop.tsx
@@ -36,8 +36,7 @@ const SearchBarDesktop = ({ isHeroBanner }: Props) => {
 
   const { searchTerm, debouncedSearchTerm, handleSearchTermChange, query, zetaChainCCTXQuery, externalSearchItem } = useSearchWithClusters();
 
-  const handleSubmit = React.useCallback((event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+  const navigateToResults = React.useCallback(() => {
     if (searchTerm) {
       const resultRoute: Route = { pathname: '/search-results', query: { q: searchTerm, redirect: 'true' } };
       const url = route(resultRoute);
@@ -51,6 +50,11 @@ const SearchBarDesktop = ({ isHeroBanner }: Props) => {
     }
   }, [ searchTerm, router ]);
 
+  const handleSubmit = React.useCallback((event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    navigateToResults();
+  }, [ navigateToResults ]);
+
   const handleFocus = React.useCallback(() => {
     onOpen();
   }, [ onOpen ]);
@@ -187,8 +191,8 @@ const SearchBarDesktop = ({ isHeroBanner }: Props) => {
           { showAllResultsLink && (
             <PopoverFooter pt={ 2 } borderTopWidth={ 1 } borderColor="border.divider">
               <Link
-                href={ route({ pathname: '/search-results', query: { q: searchTerm } }) }
                 textStyle="sm"
+                onClick={ navigateToResults }
               >
                 View all results
               </Link>
diff --git a/ui/snippets/searchBar/SearchBarInput.tsx b/ui/snippets/searchBar/SearchBarInput.tsx
index 2c3f01275c..eb606037c9 100644
--- a/ui/snippets/searchBar/SearchBarInput.tsx
+++ b/ui/snippets/searchBar/SearchBarInput.tsx
@@ -117,7 +117,7 @@ const SearchBarInput = (
       onBlur={ onBlur }
       onClick={ onFormClick }
       w="100%"
-      backgroundColor={{ _light: 'white', _dark: 'black' }}
+      backgroundColor="bg.primary"
       borderRadius="base"
       position="relative"
       zIndex={ isSuggestOpen ? 'modal' : 'auto' }
@@ -141,6 +141,7 @@ const SearchBarInput = (
           backgroundColor={{ base: isHeroBanner ? 'input.bg' : 'dialog.bg', lg: 'input.bg' }}
           _hover={{ borderColor: 'input.border.hover' }}
           _focusWithin={{ _placeholder: { color: 'gray.300' }, borderColor: 'input.border.focus', _hover: { borderColor: 'input.border.focus' } }}
+          enterKeyHint="search"
         />
       </InputGroup>
     </chakra.form>
diff --git a/ui/snippets/searchBar/SearchBarMobile.tsx b/ui/snippets/searchBar/SearchBarMobile.tsx
index 53b1041732..25504a3adf 100644
--- a/ui/snippets/searchBar/SearchBarMobile.tsx
+++ b/ui/snippets/searchBar/SearchBarMobile.tsx
@@ -1,7 +1,9 @@
 import { Box } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
+import type { FormEvent } from 'react';
 import React from 'react';
 
+import type { Route } from 'nextjs-routes';
 import { route } from 'nextjs-routes';
 
 import * as mixpanel from 'lib/mixpanel/index';
@@ -28,9 +30,10 @@ import useQuickSearchQuery from './useQuickSearchQuery';
 
 type Props = {
   isHeroBanner?: boolean;
+  onGoToSearchResults?: (searchTerm: string) => void;
 };
 
-const SearchBarMobile = ({ isHeroBanner }: Props) => {
+const SearchBarMobile = ({ isHeroBanner, onGoToSearchResults }: Props) => {
   const inputRef = React.useRef<HTMLFormElement>(null);
   const router = useRouter();
 
@@ -38,6 +41,27 @@ const SearchBarMobile = ({ isHeroBanner }: Props) => {
   const { searchTerm, debouncedSearchTerm, handleSearchTermChange, query, zetaChainCCTXQuery, externalSearchItem } = useQuickSearchQuery();
   const recentSearchKeywords = getRecentSearchKeywords();
 
+  const navigateToResults = React.useCallback(() => {
+    if (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(router.pathname),
+        'Result URL': url,
+      });
+      saveToRecentKeywords(searchTerm);
+      router.push(resultRoute, undefined, { shallow: true });
+      onGoToSearchResults?.(searchTerm);
+      onClose();
+    }
+  }, [ searchTerm, router, onGoToSearchResults, onClose ]);
+
+  const handleSubmit = React.useCallback((event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    navigateToResults();
+  }, [ navigateToResults ]);
+
   const onTriggerClick = React.useCallback((event: React.MouseEvent) => {
     onOpen();
     event.preventDefault();
@@ -117,6 +141,7 @@ const SearchBarMobile = ({ isHeroBanner }: Props) => {
             ref={ inputRef }
             onChange={ handleSearchTermChange }
             onClear={ handleClear }
+            onSubmit={ handleSubmit }
             value={ searchTerm }
             mb={ 5 }
           />
@@ -143,7 +168,7 @@ const SearchBarMobile = ({ isHeroBanner }: Props) => {
             justifyContent="center"
           >
             <Link
-              href={ route({ pathname: '/search-results', query: { q: searchTerm } }) }
+              onClick={ navigateToResults }
               textStyle="sm"
             >
               View all results
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx
index bf9868a22a..e3ad7811fa 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx
@@ -4,9 +4,10 @@ import { debounce } from 'es-toolkit';
 import React from 'react';
 
 import type { ListCctxsResponse } from '@blockscout/zetachain-cctx-types';
-import type { SearchResultItem } from 'types/api/search';
+import type { QuickSearchResultItem } from 'types/client/search';
 
 import config from 'configs/app';
+import multichainConfig from 'configs/multichain';
 import type { ResourceError } from 'lib/api/resources';
 import { useSettingsContext } from 'lib/contexts/settings';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -28,7 +29,7 @@ import SearchBarSuggestZetaChainCCTX from './SearchBarSuggestZetaChainCCTX';
 const TABS_HEIGHT = 72;
 
 interface Props {
-  query: UseQueryResult<Array<SearchResultItem>, ResourceError<unknown>>;
+  query: UseQueryResult<Array<QuickSearchResultItem>, ResourceError<unknown>>;
   zetaChainCCTXQuery: UseQueryResult<ListCctxsResponse, ResourceError<unknown>>;
   externalSearchItem: ExternalSearchItemType;
   searchTerm: string;
@@ -111,7 +112,7 @@ const SearchBarSuggest = ({ query, zetaChainCCTXQuery, externalSearchItem, searc
       map.zetaChainCCTX = zetaChainCCTXQuery.data.items;
     }
 
-    if (Object.keys(map).length > 0 && !map.block && regexp.BLOCK_HEIGHT.test(searchTerm)) {
+    if (Object.keys(map).length > 0 && !map.block && regexp.BLOCK_HEIGHT.test(searchTerm) && !multichainConfig()) {
       map['block'] = [ {
         type: 'block',
         block_type: 'block',
@@ -169,7 +170,7 @@ const SearchBarSuggest = ({ query, zetaChainCCTXQuery, externalSearchItem, searc
 
     if (resultCategories.length === 0 && !externalSearchItem) {
       if (regexp.BLOCK_HEIGHT.test(searchTerm)) {
-        return <SearchBarSuggestBlockCountdown blockHeight={ searchTerm } onClick={ onItemClick }/>;
+        return <SearchBarSuggestBlockCountdown blockHeight={ searchTerm } isMultichain={ Boolean(multichainConfig()) } onClick={ onItemClick }/>;
       }
 
       return <Text>No results found.</Text>;
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx
index 0fbd2f6215..7eae82f87e 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx
@@ -3,36 +3,58 @@ import React from 'react';
 
 import type { ItemsProps } from './types';
 import type { SearchResultAddressOrContract, SearchResultMetadataTag } from 'types/api/search';
+import type * as multichain from 'types/client/multichain-aggregator';
 
 import { toBech32Address } from 'lib/address/bech32';
 import dayjs from 'lib/date/dayjs';
 import highlightText from 'lib/highlightText';
+import * as contract from 'lib/multichain/contract';
 import { ADDRESS_REGEXP } from 'toolkit/utils/regexp';
 import SearchResultEntityTag from 'ui/searchResults/SearchResultEntityTag';
 import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
-type Props = ItemsProps<SearchResultAddressOrContract | SearchResultMetadataTag>;
+type Props = ItemsProps<SearchResultAddressOrContract | SearchResultMetadataTag | multichain.QuickSearchResultAddress>;
 
 const SearchBarSuggestAddress = ({ data, isMobile, searchTerm, addressFormat }: Props) => {
   const shouldHighlightHash = ADDRESS_REGEXP.test(searchTerm);
-  const hash = data.filecoin_robust_address || (addressFormat === 'bech32' ? toBech32Address(data.address_hash) : data.address_hash);
+  const hash = 'filecoin_robust_address' in data ? data.filecoin_robust_address ||
+    (addressFormat === 'bech32' ? toBech32Address(data.address_hash) : data.address_hash) : data.address_hash;
+
+  const isContract = (() => {
+    if ('chain_infos' in data) {
+      return contract.isContract(data);
+    }
+    return data.type === 'contract';
+  })();
+
+  const isVerified = (() => {
+    if ('chain_infos' in data) {
+      return contract.isVerified(data);
+    }
+    return data.is_smart_contract_verified;
+  })();
 
   const icon = (
     <AddressEntity.Icon
       address={{
         hash: data.address_hash,
-        is_contract: data.type === 'contract',
+        is_contract: isContract,
         name: '',
-        is_verified: data.is_smart_contract_verified,
+        is_verified: isVerified,
         ens_domain_name: null,
         implementations: null,
       }}
     />
   );
-  const addressName = data.name || data.ens_info?.name;
-  const expiresText = data.ens_info?.expiry_date ? ` (expires ${ dayjs(data.ens_info.expiry_date).fromNow() })` : '';
+  const addressName = (() => {
+    if ('chain_infos' in data) {
+      return contract.getName(data);
+    }
+    return data.name || data.ens_info?.name;
+  })();
+  const expiresText = 'ens_info' in data && data.ens_info?.expiry_date ? ` (expires ${ dayjs(data.ens_info.expiry_date).fromNow() })` : '';
 
   const nameEl = addressName && (
     <Flex alignItems="center" overflow="hidden">
@@ -43,13 +65,13 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm, addressFormat }:
         textOverflow="ellipsis"
       >
         <chakra.span fontWeight={ 500 } dangerouslySetInnerHTML={{ __html: highlightText(addressName, searchTerm) }}/>
-        { data.ens_info && (
+        { 'ens_info' in data && 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={ 4 } iconSize={ 4 } ml={ 1 } flexShrink={ 0 }/> }
+      { 'certified' in data && data.certified && <ContractCertifiedLabel boxSize={ 4 } iconSize={ 4 } ml={ 1 } flexShrink={ 0 }/> }
     </Flex>
   );
   const tagEl = data.type === 'metadata_tag' ? (
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx
index c8b5909bde..1688ef9536 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx
@@ -1,7 +1,8 @@
-import { Text, Flex, Grid } from '@chakra-ui/react';
+import { Text, Flex, Grid, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ItemsProps } from './types';
+import type * as multichain from 'types/client/multichain-aggregator';
 import type { SearchResultBlock } from 'types/client/search';
 
 import dayjs from 'lib/date/dayjs';
@@ -10,10 +11,30 @@ import { Tag } from 'toolkit/chakra/tag';
 import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
-const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: ItemsProps<SearchResultBlock>) => {
-  const icon = <BlockEntity.Icon/>;
-  const shouldHighlightHash = data.block_hash.toLowerCase() === searchTerm.toLowerCase();
-  const isFutureBlock = data.timestamp === undefined;
+const SearchBarSuggestBlock = ({ data, isMobile, searchTerm, chainInfo }: ItemsProps<SearchResultBlock | multichain.QuickSearchResultBlock>) => {
+  const icon = <BlockEntity.Icon chain={ chainInfo }/>;
+  const shouldHighlightHash = data.block_hash?.toLowerCase() === searchTerm.toLowerCase();
+  const isFutureBlock = 'timestamp' in data && data.timestamp === undefined;
+  const hasOnlyHash = data.block_number === undefined && data.block_hash !== undefined;
+
+  if (hasOnlyHash) {
+    const hash = (
+      <Box
+        overflow="hidden"
+        whiteSpace="nowrap"
+        as="mark"
+        display="block"
+      >
+        <HashStringShortenDynamic hash={ data.block_hash } noTooltip/>
+      </Box>
+    );
+    return (
+      <Flex alignItems="center">
+        { icon }
+        { hash }
+      </Flex>
+    );
+  }
 
   const blockNumber = (
     <Text
@@ -25,7 +46,7 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: ItemsProps<Search
       <span dangerouslySetInnerHTML={{ __html: highlightText(data.block_number.toString(), searchTerm) }}/>
     </Text>
   );
-  const hash = !isFutureBlock ? (
+  const hash = data.block_hash && !isFutureBlock ? (
     <Text
       color="text.secondary"
       overflow="hidden"
@@ -36,8 +57,9 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: ItemsProps<Search
       <HashStringShortenDynamic hash={ data.block_hash } noTooltip/>
     </Text>
   ) : null;
-  const date = !isFutureBlock ? dayjs(data.timestamp).format('llll') : undefined;
+  const date = 'timestamp' in data && data.timestamp && !isFutureBlock ? dayjs(data.timestamp).format('llll') : undefined;
   const futureBlockText = <Text color="text.secondary">Learn estimated time for this block to be created.</Text>;
+  const blockType = 'block_type' in data ? data.block_type : undefined;
 
   if (isMobile) {
     return (
@@ -45,8 +67,8 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: ItemsProps<Search
         <Flex alignItems="center">
           { icon }
           { blockNumber }
-          { data.block_type === 'reorg' && <Tag ml="auto">Reorg</Tag> }
-          { data.block_type === 'uncle' && <Tag ml="auto">Uncle</Tag> }
+          { blockType === 'reorg' && <Tag ml="auto">Reorg</Tag> }
+          { blockType === 'uncle' && <Tag ml="auto">Uncle</Tag> }
         </Flex>
         { hash }
         { isFutureBlock ? futureBlockText : <Text color="text.secondary">{ date }</Text> }
@@ -61,8 +83,8 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: ItemsProps<Search
         { blockNumber }
       </Flex>
       <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> }
+        { blockType === 'reorg' && <Tag flexShrink={ 0 }>Reorg</Tag> }
+        { blockType === 'uncle' && <Tag flexShrink={ 0 }>Uncle</Tag> }
         { isFutureBlock ? futureBlockText : hash }
       </Flex>
       { date && <Text color="text.secondary" textAlign="end">{ date }</Text> }
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlockCountdown.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlockCountdown.tsx
index efbf5d8851..0ab7e29ea6 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlockCountdown.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlockCountdown.tsx
@@ -9,9 +9,19 @@ interface Props {
   blockHeight: string;
   onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
   className?: string;
+  isMultichain?: boolean;
 }
 
-const SearchBarSuggestBlockCountdown = ({ blockHeight, onClick, className }: Props) => {
+const SearchBarSuggestBlockCountdown = ({ blockHeight, onClick, className, isMultichain }: Props) => {
+
+  if (isMultichain) {
+    return (
+      <Box className={ className }>
+        This block hasn’t been created yet. <Link href={ route({ pathname: '/blocks' }) } onClick={ onClick }>View existing blocks</Link>.
+      </Box>
+    );
+  }
+
   return (
     <Box className={ className }>
       <span>Learn </span>
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestDomain.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestDomain.tsx
index 7501e5a633..57e2f8d64d 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestDomain.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestDomain.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import type { ItemsProps } from './types';
 import type { SearchResultDomain } from 'types/api/search';
+import type * as multichain from 'types/client/multichain-aggregator';
 
 import { toBech32Address } from 'lib/address/bech32';
 import dayjs from 'lib/date/dayjs';
@@ -11,9 +12,14 @@ import * as EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import IconSvg from 'ui/shared/IconSvg';
 
-const SearchBarSuggestDomain = ({ data, isMobile, searchTerm, addressFormat }: ItemsProps<SearchResultDomain>) => {
+const SearchBarSuggestDomain = ({ data, isMobile, searchTerm, addressFormat }: ItemsProps<SearchResultDomain | multichain.QuickSearchResultDomain>) => {
   const icon = <EnsEntity.Icon protocol={ data.ens_info.protocol }/>;
-  const hash = data.filecoin_robust_address || (addressFormat === 'bech32' ? toBech32Address(data.address_hash) : data.address_hash);
+  const hash = (() => {
+    if ('filecoin_robust_address' in data && data.filecoin_robust_address) {
+      return data.filecoin_robust_address;
+    }
+    return addressFormat === 'bech32' ? toBech32Address(data.address_hash) : data.address_hash;
+  })();
 
   const name = (
     <Text
@@ -36,13 +42,16 @@ const SearchBarSuggestDomain = ({ data, isMobile, searchTerm, addressFormat }: I
     </Text>
   );
 
-  const isContractVerified = data.is_smart_contract_verified && <IconSvg name="status/success" boxSize="14px" color="green.500" flexShrink={ 0 }/>;
+  const isContractVerified = 'is_smart_contract_verified' in data && data.is_smart_contract_verified &&
+    <IconSvg name="status/success" boxSize="14px" color="green.500" flexShrink={ 0 }/>;
+
+  const namesCount = 'names_count' in data.ens_info ? data.ens_info.names_count : 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 ensNamesCount = namesCount > 39 ? '40+' : `+${ namesCount - 1 }`;
   const additionalInfo = (
     <Text color="text.secondary" textAlign={ isMobile ? 'start' : 'end' }>
-      { data?.ens_info.names_count > 1 ? ensNamesCount : expiresText }
+      { namesCount > 1 ? ensNamesCount : expiresText }
     </Text>
   );
 
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItem.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItem.tsx
index 11031e2533..f277c396b0 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItem.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItem.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 
-import type { SearchResultItem } from 'types/client/search';
+import type { QuickSearchResultItem } from 'types/client/search';
 import type { AddressFormat } from 'types/views/address';
 
-import { route } from 'nextjs-routes';
+import { route } from 'nextjs/routes';
 
+import multichainConfig from 'configs/multichain';
 import { isEvmAddress } from 'lib/address/isEvmAddress';
 
 import SearchBarSuggestAddress from './SearchBarSuggestAddress';
@@ -20,7 +21,7 @@ import SearchBarSuggestTx from './SearchBarSuggestTx';
 import SearchBarSuggestUserOp from './SearchBarSuggestUserOp';
 
 interface Props {
-  data: SearchResultItem;
+  data: QuickSearchResultItem;
   isMobile: boolean | undefined;
   searchTerm: string;
   onClick: (event: React.MouseEvent<HTMLAnchorElement>) => void;
@@ -28,10 +29,20 @@ interface Props {
 }
 
 const SearchBarSuggestItem = ({ data, isMobile, searchTerm, onClick, addressFormat }: Props) => {
+
+  const multichainContext = React.useMemo(() => {
+    const chainInfo = 'chain_id' in data && multichainConfig()?.chains.find((chain) => chain.id === data.chain_id);
+    if (chainInfo) {
+      return {
+        chain: chainInfo,
+      };
+    }
+  }, [ data ]);
+
   const url = (() => {
     switch (data.type) {
       case 'token': {
-        return route({ pathname: '/token/[hash]', query: { hash: data.address_hash } });
+        return route({ pathname: '/token/[hash]', query: { hash: data.address_hash } }, multichainContext);
       }
       case 'contract':
       case 'address':
@@ -40,15 +51,17 @@ const SearchBarSuggestItem = ({ data, isMobile, searchTerm, onClick, addressForm
         return route({ pathname: '/address/[hash]', query: { hash: data.address_hash } });
       }
       case 'transaction': {
-        return route({ pathname: '/tx/[hash]', query: { hash: data.transaction_hash } });
+        return route({ pathname: '/tx/[hash]', query: { hash: data.transaction_hash } }, multichainContext);
       }
       case 'block': {
-        const isFutureBlock = data.timestamp === undefined;
+        const isFutureBlock = 'timestamp' in data && data.timestamp === undefined;
         if (isFutureBlock) {
-          return route({ pathname: '/block/countdown/[height]', query: { height: String(data.block_number) } });
+          return route({ pathname: '/block/countdown/[height]', query: { height: String(data.block_number) } }, multichainContext);
         }
 
-        return route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.block_hash) } });
+        const heightOrHash = data.block_hash || String(data.block_number);
+
+        return route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: heightOrHash } }, multichainContext);
       }
       case 'user_operation': {
         return route({ pathname: '/op/[hash]', query: { hash: data.user_operation_hash } });
@@ -77,6 +90,7 @@ const SearchBarSuggestItem = ({ data, isMobile, searchTerm, onClick, addressForm
             searchTerm={ searchTerm }
             isMobile={ isMobile }
             addressFormat={ addressFormat }
+            chainInfo={ multichainContext?.chain }
           />
         );
       }
@@ -89,6 +103,7 @@ const SearchBarSuggestItem = ({ data, isMobile, searchTerm, onClick, addressForm
             searchTerm={ searchTerm }
             isMobile={ isMobile }
             addressFormat={ addressFormat }
+            chainInfo={ multichainContext?.chain }
           />
         );
       }
@@ -103,10 +118,10 @@ const SearchBarSuggestItem = ({ data, isMobile, searchTerm, onClick, addressForm
         );
       }
       case 'block': {
-        return <SearchBarSuggestBlock data={ data } searchTerm={ searchTerm } isMobile={ isMobile }/>;
+        return <SearchBarSuggestBlock data={ data } searchTerm={ searchTerm } isMobile={ isMobile } chainInfo={ multichainContext?.chain }/>;
       }
       case 'transaction': {
-        return <SearchBarSuggestTx data={ data } searchTerm={ searchTerm } isMobile={ isMobile }/>;
+        return <SearchBarSuggestTx data={ data } searchTerm={ searchTerm } isMobile={ isMobile } chainInfo={ multichainContext?.chain }/>;
       }
       case 'user_operation': {
         return <SearchBarSuggestUserOp data={ data } searchTerm={ searchTerm } isMobile={ isMobile }/>;
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx
index 24c6af6841..20058d6433 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx
@@ -1,21 +1,36 @@
 import { Grid, Text, Flex } from '@chakra-ui/react';
+import { mapValues } from 'es-toolkit';
 import React from 'react';
 
 import type { ItemsProps } from './types';
 import type { SearchResultToken } from 'types/api/search';
+import type * as multichain from 'types/client/multichain-aggregator';
 
 import { toBech32Address } from 'lib/address/bech32';
 import highlightText from 'lib/highlightText';
+import * as contract from 'lib/multichain/contract';
 import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import IconSvg from 'ui/shared/IconSvg';
 
-const SearchBarSuggestToken = ({ data, isMobile, searchTerm, addressFormat }: ItemsProps<SearchResultToken>) => {
-  const icon = <TokenEntity.Icon token={{ ...data, type: data.token_type }}/>;
+const SearchBarSuggestToken = ({ data, isMobile, searchTerm, addressFormat, chainInfo }: ItemsProps<SearchResultToken | multichain.QuickSearchResultToken>) => {
+  const icon = <TokenEntity.Icon token={{ ...data, type: data.token_type }} chain={ chainInfo }/>;
   const verifiedIcon = <IconSvg name="certified" boxSize={ 4 } color="green.500" ml={ 1 } flexShrink={ 0 }/>;
   const certifiedIcon = <ContractCertifiedLabel iconSize={ 4 } boxSize={ 4 } ml={ 1 } flexShrink={ 0 }/>;
-  const hash = data.filecoin_robust_address || (addressFormat === 'bech32' ? toBech32Address(data.address_hash) : data.address_hash);
+  const hash = (() => {
+    if ('filecoin_robust_address' in data && data.filecoin_robust_address) {
+      return data.filecoin_robust_address;
+    }
+    return addressFormat === 'bech32' ? toBech32Address(data.address_hash) : data.address_hash;
+  })();
+
+  const isVerified = (() => {
+    if ('chain_infos' in data) {
+      return contract.isVerified({ chain_infos: mapValues(data.chain_infos, (chainInfo) => ({ ...chainInfo, is_contract: true, coin_balance: '0' })) });
+    }
+    return data.is_smart_contract_verified;
+  })();
 
   const name = (
     <Text
@@ -34,25 +49,26 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm, addressFormat }: It
     </Text>
   );
 
-  const contractVerifiedIcon = data.is_smart_contract_verified && <IconSvg name="status/success" boxSize="14px" color="green.500" ml={ 1 } flexShrink={ 0 }/>;
+  const contractVerifiedIcon = isVerified && <IconSvg name="status/success" boxSize="14px" color="green.500" ml={ 1 } flexShrink={ 0 }/>;
   const additionalInfo = (
     <Text overflow="hidden" whiteSpace="nowrap" fontWeight={ 700 }>
-      { data.token_type === 'ERC-20' && data.exchange_rate && `$${ Number(data.exchange_rate).toLocaleString() }` }
+      { data.token_type === 'ERC-20' && 'exchange_rate' in data && data.exchange_rate && `$${ Number(data.exchange_rate).toLocaleString() }` }
       { data.token_type !== 'ERC-20' && data.total_supply && `Items ${ Number(data.total_supply).toLocaleString() }` }
     </Text>
   );
 
   if (isMobile) {
     const templateCols = `1fr
-    ${ (data.token_type === 'ERC-20' && data.exchange_rate) || (data.token_type !== 'ERC-20' && data.total_supply) ? ' auto' : '' }`;
+    ${ (data.token_type === 'ERC-20' && 'exchange_rate' in data && data.exchange_rate) ||
+      (data.token_type !== 'ERC-20' && 'total_supply' in data && data.total_supply) ? ' auto' : '' }`;
 
     return (
       <>
         <Flex alignItems="center">
           { icon }
           { name }
-          { data.certified && certifiedIcon }
-          { data.is_verified_via_admin_panel && !data.certified && verifiedIcon }
+          { 'certified' in data && data.certified && certifiedIcon }
+          { 'is_verified_via_admin_panel' in data && data.is_verified_via_admin_panel && !data.certified && verifiedIcon }
           { data.reputation && <TokenEntity.Reputation value={ data.reputation }/> }
         </Flex>
         <Grid templateColumns={ templateCols } alignItems="center" gap={ 2 }>
@@ -71,9 +87,9 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm, addressFormat }: It
       <Flex alignItems="center">
         { icon }
         { name }
-        { data.certified && certifiedIcon }
-        { data.is_verified_via_admin_panel && !data.certified && verifiedIcon }
-        { data.reputation && <TokenEntity.Reputation value={ data.reputation }/> }
+        { 'certified' in data && data.certified && certifiedIcon }
+        { 'is_verified_via_admin_panel' in data && data.is_verified_via_admin_panel && !data.certified && verifiedIcon }
+        { 'reputation' in data && data.reputation && <TokenEntity.Reputation value={ data.reputation }/> }
       </Flex>
       <Flex alignItems="center" overflow="hidden">
         { address }
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTx.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTx.tsx
index 7b492f23d8..d39720ec94 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTx.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTx.tsx
@@ -3,19 +3,20 @@ import React from 'react';
 
 import type { ItemsProps } from './types';
 import type { SearchResultTx } from 'types/api/search';
+import type * as multichain from 'types/client/multichain-aggregator';
 
 import dayjs from 'lib/date/dayjs';
 import * as TxEntity from 'ui/shared/entities/tx/TxEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
-const SearchBarSuggestTx = ({ data, isMobile }: ItemsProps<SearchResultTx>) => {
-  const icon = <TxEntity.Icon/>;
+const SearchBarSuggestTx = ({ data, isMobile, chainInfo }: ItemsProps<SearchResultTx | multichain.QuickSearchResultTransaction>) => {
+  const icon = <TxEntity.Icon chain={ chainInfo }/>;
   const hash = (
     <chakra.mark overflow="hidden" whiteSpace="nowrap" fontWeight={ 700 }>
       <HashStringShortenDynamic hash={ data.transaction_hash } noTooltip/>
     </chakra.mark>
   );
-  const date = dayjs(data.timestamp).format('llll');
+  const date = 'timestamp' in data && data.timestamp ? dayjs(data.timestamp).format('llll') : undefined;
 
   if (isMobile) {
     return (
diff --git a/ui/snippets/searchBar/SearchBarSuggest/types.ts b/ui/snippets/searchBar/SearchBarSuggest/types.ts
index f69f857e76..01741d646c 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/types.ts
+++ b/ui/snippets/searchBar/SearchBarSuggest/types.ts
@@ -1,3 +1,4 @@
+import type { ClusterChainConfig } from 'types/multichain';
 import type { AddressFormat } from 'types/views/address';
 
 export interface ItemsProps<Data> {
@@ -5,4 +6,5 @@ export interface ItemsProps<Data> {
   searchTerm: string;
   isMobile?: boolean | undefined;
   addressFormat?: AddressFormat;
+  chainInfo?: ClusterChainConfig;
 }
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_with-apps-default-view-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_with-apps-default-view-1.png
index afce7a19ef..e75fbd4e99 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_with-apps-default-view-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_with-apps-default-view-1.png differ
diff --git a/ui/snippets/searchBar/useQuickSearchQuery.tsx b/ui/snippets/searchBar/useQuickSearchQuery.tsx
index 7e7bbf7c0e..3207e754d1 100644
--- a/ui/snippets/searchBar/useQuickSearchQuery.tsx
+++ b/ui/snippets/searchBar/useQuickSearchQuery.tsx
@@ -1,26 +1,37 @@
 import React from 'react';
 
 import config from 'configs/app';
+import multichainConfig from 'configs/multichain';
 import { isBech32Address, fromBech32Address } from 'lib/address/bech32';
 import useApiQuery from 'lib/api/useApiQuery';
 import useDebounce from 'lib/hooks/useDebounce';
 import { getExternalSearchItem } from 'lib/search/externalSearch';
 
+import useSearchMultichain from './useSearchMultichain';
+
 export default function useQuickSearchQuery() {
   const [ searchTerm, setSearchTerm ] = React.useState('');
 
   const debouncedSearchTerm = useDebounce(searchTerm, 300);
 
-  const query = useApiQuery('general:quick_search', {
+  const isMultichain = React.useMemo(() => {
+    return Boolean(multichainConfig());
+  }, []);
+
+  const mainQuery = useApiQuery('general:quick_search', {
     queryParams: { q: isBech32Address(debouncedSearchTerm) ? fromBech32Address(debouncedSearchTerm) : debouncedSearchTerm },
-    queryOptions: { enabled: debouncedSearchTerm.trim().length > 0 },
+    queryOptions: {
+      enabled: debouncedSearchTerm.trim().length > 0 && !isMultichain,
+    },
   });
 
+  const multichainQuery = useSearchMultichain({ searchTerm: debouncedSearchTerm, enabled: isMultichain });
+
   const redirectCheckQuery = useApiQuery('general:search_check_redirect', {
     // on pages with regular search bar we check redirect on every search term change
     // in order to prepend its result to suggest list since this resource is much faster than regular search
     queryParams: { q: debouncedSearchTerm },
-    queryOptions: { enabled: Boolean(debouncedSearchTerm) },
+    queryOptions: { enabled: Boolean(debouncedSearchTerm) && !isMultichain },
   });
 
   const zetaChainCCTXQuery = useApiQuery('zetachain:transactions', {
@@ -33,6 +44,8 @@ export default function useQuickSearchQuery() {
     queryOptions: { enabled: debouncedSearchTerm.trim().length > 0 && config.features.zetachain.isEnabled },
   });
 
+  const query = isMultichain ? multichainQuery : mainQuery;
+
   return React.useMemo(() => ({
     searchTerm,
     debouncedSearchTerm,
diff --git a/ui/snippets/searchBar/useSearchMultichain.tsx b/ui/snippets/searchBar/useSearchMultichain.tsx
new file mode 100644
index 0000000000..6c92b14bb5
--- /dev/null
+++ b/ui/snippets/searchBar/useSearchMultichain.tsx
@@ -0,0 +1,99 @@
+import type * as bens from '@blockscout/bens-types';
+import type { QuickSearchResultBlock, QuickSearchResultToken } from 'types/client/multichain-aggregator';
+import type { QuickSearchResultItem } from 'types/client/search';
+
+import useApiQuery from 'lib/api/useApiQuery';
+
+interface Props {
+  searchTerm: string;
+  enabled: boolean;
+}
+
+export default function useSearchMultichain({ searchTerm, enabled }: Props) {
+  return useApiQuery<'multichainAggregator:quick_search', unknown, Array<QuickSearchResultItem>>('multichainAggregator:quick_search', {
+    queryParams: { q: searchTerm, unlimited_per_chain: true },
+    queryOptions: {
+      enabled: searchTerm.trim().length > 0 && enabled,
+      select: (data) => {
+        const result: Array<QuickSearchResultItem> = [];
+
+        if (data.block_numbers && data.block_numbers.length > 0) {
+          const items: Array<QuickSearchResultBlock> = data.block_numbers.map((item) => ({
+            type: 'block' as const,
+            block_number: item.block_number.toString(),
+            block_hash: undefined,
+            chain_id: item.chain_id.toString(),
+          }));
+          result.push(...items);
+        }
+
+        if (data.blocks && data.blocks.length > 0) {
+          const items: Array<QuickSearchResultBlock> = data.blocks.map((item) => ({
+            type: 'block' as const,
+            block_number: undefined,
+            block_hash: item.hash,
+            chain_id: item.chain_id.toString(),
+          }));
+          result.push(...items);
+        }
+
+        if (data.transactions && data.transactions.length > 0) {
+          const items: Array<QuickSearchResultItem> = data.transactions.map((item) => ({
+            type: 'transaction' as const,
+            transaction_hash: item.hash,
+            chain_id: item.chain_id,
+          }));
+          result.push(...items);
+        }
+
+        if (data.addresses && data.addresses.length > 0) {
+          const items: Array<QuickSearchResultItem> = data.addresses.map((item) => ({
+            type: 'address' as const,
+            address_hash: item.hash,
+            chain_infos: item.chain_infos,
+          }));
+          result.push(...items);
+        }
+
+        const tokens = data.tokens.concat(data.nfts);
+
+        if (tokens && tokens.length > 0) {
+          const items: Array<QuickSearchResultItem> = tokens.map((item) => ({
+            type: 'token' as const,
+            token_type: item.type as unknown as QuickSearchResultToken['token_type'],
+            address_hash: item.address_hash,
+            name: item.name ?? 'Unnamed token',
+            symbol: item.symbol ?? '',
+            icon_url: item.icon_url ?? null,
+            is_smart_contract_verified: false,
+            // As of now, there can be only one chain in the object
+            chain_id: Object.keys(item.chain_infos)[0],
+            reputation: null,
+            total_supply: item.total_supply ?? null,
+            exchange_rate: item.exchange_rate ?? null,
+            chain_infos: item.chain_infos,
+          }));
+          result.push(...items);
+        }
+
+        if (data.domains && data.domains.length > 0) {
+          const items: Array<QuickSearchResultItem> = data.domains
+            .map((item) => (item.address ? {
+              type: 'ens_domain' as const,
+              ens_info: {
+                address_hash: item.address,
+                expiry_date: item.expiry_date,
+                name: item.name,
+                protocol: item.protocol as bens.ProtocolInfo,
+              },
+              address_hash: item.address,
+            } : undefined))
+            .filter((item) => item !== undefined);
+          result.push(...items);
+        }
+
+        return result;
+      },
+    },
+  });
+}
diff --git a/ui/snippets/topBar/settings/SettingsColorTheme.tsx b/ui/snippets/topBar/settings/SettingsColorTheme.tsx
index c9a2a08c01..d46b99117a 100644
--- a/ui/snippets/topBar/settings/SettingsColorTheme.tsx
+++ b/ui/snippets/topBar/settings/SettingsColorTheme.tsx
@@ -30,7 +30,9 @@ const SettingsColorTheme = ({ onSelect }: Props) => {
     setColorMode(nextTheme.colorMode);
 
     const varName = nextTheme.colorMode === 'light' ? '--chakra-colors-white' : '--chakra-colors-black';
+    const varNameBg = nextTheme.colorMode === 'light' ? '--chakra-colors-theme-bg-primary-_light' : '--chakra-colors-theme-bg-primary-_dark';
     window.document.documentElement.style.setProperty(varName, varValue);
+    window.document.documentElement.style.setProperty(varNameBg, varValue);
 
     cookies.set(cookies.NAMES.COLOR_MODE, nextTheme.colorMode);
     cookies.set(cookies.NAMES.COLOR_THEME, themeId);
diff --git a/ui/stats/ChartsWidgetsList.tsx b/ui/stats/ChartsWidgetsList.tsx
index 2b7efdba8e..2207b6d4e3 100644
--- a/ui/stats/ChartsWidgetsList.tsx
+++ b/ui/stats/ChartsWidgetsList.tsx
@@ -4,7 +4,9 @@ import React, { useCallback, useState } from 'react';
 import type * as stats from '@blockscout/stats-types';
 import type { StatsIntervalIds } from 'types/client/stats';
 
+import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
+import { useMultichainContext } from 'lib/contexts/multichain';
 import { Heading } from 'toolkit/chakra/heading';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { apos } from 'toolkit/utils/htmlEntities';
@@ -38,9 +40,13 @@ const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, in
     }
   }, [ shouldScrollToSection ]);
 
+  const { chain } = useMultichainContext() || {};
+  const isGasTrackerEnabled = config.features.gasTracker.isEnabled;
+
   const homeStatsQuery = useApiQuery('general:stats', {
     queryOptions: {
       refetchOnMount: false,
+      enabled: isGasTrackerEnabled,
     },
   });
 
@@ -76,7 +82,7 @@ const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, in
                 <Heading level="2" id={ section.id }>
                   { section.title }
                 </Heading>
-                { section.id === 'gas' && homeStatsQuery.data && homeStatsQuery.data.gas_prices && (
+                { isGasTrackerEnabled && 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" color="icon.secondary" _hover={{ color: 'hover' }}/>
                   </GasInfoTooltip>
@@ -96,7 +102,7 @@ const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, in
                     interval={ interval }
                     isPlaceholderData={ isPlaceholderData }
                     onLoadingError={ handleChartLoadingError }
-                    href={{ pathname: '/stats/[id]', query: { id: chart.id } }}
+                    href={{ pathname: '/stats/[id]', query: { id: chart.id, ...(chain?.id ? { chain_id: chain.id } : {}) } }}
                   />
                 )) }
               </Grid>
diff --git a/ui/stats/useStats.tsx b/ui/stats/useStats.tsx
index 37d1f88842..ec0bc4a417 100644
--- a/ui/stats/useStats.tsx
+++ b/ui/stats/useStats.tsx
@@ -3,6 +3,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 
 import type * as stats from '@blockscout/stats-types';
 import type { StatsIntervalIds } from 'types/client/stats';
+import type { ExternalChainExtended } from 'types/externalChains';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import getQueryParamString from 'lib/router/getQueryParamString';
@@ -16,13 +17,18 @@ function isChartNameMatches(q: string, chart: stats.LineChartInfo) {
   return chart.title.toLowerCase().includes(q.toLowerCase());
 }
 
-export default function useStats() {
+interface Props {
+  chain?: ExternalChainExtended;
+}
+
+export default function useStats({ chain }: Props = {}) {
   const router = useRouter();
 
   const { data, isPlaceholderData, isError } = useApiQuery('stats:lines', {
     queryOptions: {
       placeholderData: STATS_CHARTS,
     },
+    chain,
   });
 
   const [ currentSection, setCurrentSection ] = useState('all');
diff --git a/ui/token/TokenAdvancedFilterLink.tsx b/ui/token/TokenAdvancedFilterLink.tsx
index 7c29b95deb..2c81d43d42 100644
--- a/ui/token/TokenAdvancedFilterLink.tsx
+++ b/ui/token/TokenAdvancedFilterLink.tsx
@@ -28,7 +28,7 @@ const TokenAdvancedFilterLink = ({ isLoading, token, ...rest }: Props) => {
   return (
     <AdvancedFilterLink
       query={ queryParams }
-      linkContext={ multichainContext }
+      routeParams={{ chain: multichainContext?.chain }}
       loading={ isInitialLoading }
       { ...rest }
     />
diff --git a/ui/token/TokenDetails.tsx b/ui/token/TokenDetails.tsx
index 2822bbf5e7..766c9906d4 100644
--- a/ui/token/TokenDetails.tsx
+++ b/ui/token/TokenDetails.tsx
@@ -10,6 +10,7 @@ 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 { useMultichainContext } from 'lib/contexts/multichain';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
 import getCurrencyValue from 'lib/getCurrencyValue';
 import useIsMounted from 'lib/hooks/useIsMounted';
@@ -35,6 +36,9 @@ const TokenDetails = ({ tokenQuery }: Props) => {
 
   const hash = router.query.hash?.toString();
 
+  const multichainContext = useMultichainContext();
+  const chainSlug = multichainContext?.chain?.slug;
+
   const tokenCountersQuery = useApiQuery('general:token_counters', {
     pathParams: { hash },
     queryOptions: { enabled: Boolean(router.query.hash), placeholderData: TOKEN_COUNTERS },
@@ -43,8 +47,11 @@ const TokenDetails = ({ tokenQuery }: Props) => {
   const appActionData = useAppActionData(hash);
 
   const changeUrlAndScroll = useCallback((tab: TokenTabs) => () => {
+
     router.push(
-      { pathname: '/token/[hash]', query: { hash: hash || '', tab } },
+      chainSlug ?
+        { pathname: '/chain/[chain_slug]/token/[hash]', query: { hash: hash || '', tab, chain_slug: chainSlug } } :
+        { pathname: '/token/[hash]', query: { hash: hash || '', tab } },
       undefined,
       { shallow: true },
     );
@@ -52,7 +59,7 @@ const TokenDetails = ({ tokenQuery }: Props) => {
       duration: 500,
       smooth: true,
     });
-  }, [ hash, router ]);
+  }, [ chainSlug, hash, router ]);
 
   const countersItem = useCallback((item: 'token_holders_count' | 'transfers_count') => {
     const itemValue = tokenCountersQuery.data?.[item];
diff --git a/ui/token/TokenTransfer/TokenTransferList.tsx b/ui/token/TokenTransfer/TokenTransferList.tsx
index 71461b66f6..98c0c56c5c 100644
--- a/ui/token/TokenTransfer/TokenTransferList.tsx
+++ b/ui/token/TokenTransfer/TokenTransferList.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import type { TokenInstance } from 'types/api/token';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
+import { useMultichainContext } from 'lib/contexts/multichain';
 import TokenTransferListItem from 'ui/token/TokenTransfer/TokenTransferListItem';
 
 interface Props {
@@ -14,6 +15,9 @@ interface Props {
 }
 
 const TokenTransferList = ({ data, tokenId, instance, isLoading }: Props) => {
+  const multichainContext = useMultichainContext();
+  const chainData = multichainContext?.chain;
+
   return (
     <Box>
       { data.map((item, index) => (
@@ -23,6 +27,7 @@ const TokenTransferList = ({ data, tokenId, instance, isLoading }: Props) => {
           tokenId={ tokenId }
           instance={ instance }
           isLoading={ isLoading }
+          chainData={ chainData }
         />
       )) }
     </Box>
diff --git a/ui/token/TokenTransfer/TokenTransferListItem.tsx b/ui/token/TokenTransfer/TokenTransferListItem.tsx
index 65503344ad..7ef019f5e5 100644
--- a/ui/token/TokenTransfer/TokenTransferListItem.tsx
+++ b/ui/token/TokenTransfer/TokenTransferListItem.tsx
@@ -1,8 +1,9 @@
-import { Grid, Flex } from '@chakra-ui/react';
+import { Flex, Grid } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenInstance } from 'types/api/token';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
@@ -15,7 +16,7 @@ import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
-type Props = TokenTransfer & { tokenId?: string; isLoading?: boolean; instance?: TokenInstance };
+type Props = TokenTransfer & { tokenId?: string; isLoading?: boolean; instance?: TokenInstance; chainData?: ClusterChainConfig };
 
 const TokenTransferListItem = ({
   token,
@@ -28,6 +29,7 @@ const TokenTransferListItem = ({
   tokenId,
   isLoading,
   instance,
+  chainData,
 }: Props) => {
   const { usd, valueStr } = total && 'value' in total && total.value !== null ? getCurrencyValue({
     value: total.value,
@@ -46,6 +48,7 @@ const TokenTransferListItem = ({
             hash={ txHash }
             truncation="constant_long"
             fontWeight="700"
+            chain={ chainData }
           />
         ) }
         <TimeWithTooltip
diff --git a/ui/token/TokenTransfer/TokenTransferTable.tsx b/ui/token/TokenTransfer/TokenTransferTable.tsx
index 5de885ea6e..621f18017a 100644
--- a/ui/token/TokenTransfer/TokenTransferTable.tsx
+++ b/ui/token/TokenTransfer/TokenTransferTable.tsx
@@ -4,6 +4,7 @@ import type { TokenInfo, TokenInstance } from 'types/api/token';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
+import { useMultichainContext } from 'lib/contexts/multichain';
 import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
@@ -24,7 +25,8 @@ interface Props {
 }
 
 const TokenTransferTable = ({ data, top, showSocketInfo, showSocketErrorAlert, socketInfoNum, tokenId, isLoading, token, instance }: Props) => {
-
+  const multichainContext = useMultichainContext();
+  const chainData = multichainContext?.chain;
   const tokenType = token.type;
 
   return (
@@ -32,6 +34,7 @@ const TokenTransferTable = ({ data, top, showSocketInfo, showSocketErrorAlert, s
       <TableRoot minW="950px">
         <TableHeaderSticky top={ top }>
           <TableRow>
+            { chainData && <TableColumnHeader width="38px"/> }
             <TableColumnHeader width="280px">
               Txn hash
               <TimeFormatToggle/>
@@ -64,6 +67,7 @@ const TokenTransferTable = ({ data, top, showSocketInfo, showSocketErrorAlert, s
               tokenId={ tokenId }
               instance={ instance }
               isLoading={ isLoading }
+              chainData={ chainData }
             />
           )) }
         </TableBody>
diff --git a/ui/token/TokenTransfer/TokenTransferTableItem.tsx b/ui/token/TokenTransfer/TokenTransferTableItem.tsx
index 9b130626c6..4aa8cc69d7 100644
--- a/ui/token/TokenTransfer/TokenTransferTableItem.tsx
+++ b/ui/token/TokenTransfer/TokenTransferTableItem.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import type { TokenInstance } from 'types/api/token';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
@@ -12,9 +13,10 @@ import { TableCell, TableRow } from 'toolkit/chakra/table';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import ChainIcon from 'ui/shared/externalChains/ChainIcon';
 import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
-type Props = TokenTransfer & { tokenId?: string; isLoading?: boolean; instance?: TokenInstance };
+type Props = TokenTransfer & { tokenId?: string; isLoading?: boolean; instance?: TokenInstance; chainData?: ClusterChainConfig };
 
 const TokenTransferTableItem = ({
   token,
@@ -27,6 +29,7 @@ const TokenTransferTableItem = ({
   tokenId,
   isLoading,
   instance,
+  chainData,
 }: Props) => {
   const { usd, valueStr } = total && 'value' in total && total.value !== null ? getCurrencyValue({
     value: total.value,
@@ -38,6 +41,11 @@ const TokenTransferTableItem = ({
 
   return (
     <TableRow alignItems="top">
+      { chainData && (
+        <TableCell>
+          <ChainIcon data={ chainData } isLoading={ isLoading } my="5px"/>
+        </TableCell>
+      ) }
       <TableCell>
         <Flex flexDirection="column" alignItems="flex-start" mt="5px" rowGap={ 3 }>
           { txHash ? (
diff --git a/ui/tokenTransfers/TokenTransfersListItem.tsx b/ui/tokenTransfers/TokenTransfersListItem.tsx
index 26fbfa53aa..0c26266309 100644
--- a/ui/tokenTransfers/TokenTransfersListItem.tsx
+++ b/ui/tokenTransfers/TokenTransfersListItem.tsx
@@ -2,7 +2,7 @@ import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenTransfer } from 'types/api/tokenTransfer';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
@@ -19,7 +19,7 @@ import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 type Props = {
   item: TokenTransfer;
   isLoading: boolean;
-  chainData?: ChainConfig;
+  chainData?: ClusterChainConfig;
 };
 
 const TokenTransfersListItem = ({ item, isLoading, chainData }: Props) => {
diff --git a/ui/tokenTransfers/TokenTransfersTable.tsx b/ui/tokenTransfers/TokenTransfersTable.tsx
index ee6064c93f..f336ad8558 100644
--- a/ui/tokenTransfers/TokenTransfersTable.tsx
+++ b/ui/tokenTransfers/TokenTransfersTable.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type { TokenTransfer } from 'types/api/tokenTransfer';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
@@ -12,7 +12,7 @@ interface Props {
   items?: Array<TokenTransfer>;
   top: number;
   isLoading?: boolean;
-  chainData?: ChainConfig;
+  chainData?: ClusterChainConfig;
 }
 
 const TokenTransferTable = ({ items, top, isLoading, chainData }: Props) => {
diff --git a/ui/tokenTransfers/TokenTransfersTableItem.tsx b/ui/tokenTransfers/TokenTransfersTableItem.tsx
index da7b5bed3a..09ae0c4c41 100644
--- a/ui/tokenTransfers/TokenTransfersTableItem.tsx
+++ b/ui/tokenTransfers/TokenTransfersTableItem.tsx
@@ -2,25 +2,25 @@ import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenTransfer } from 'types/api/tokenTransfer';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
 import { Badge } from 'toolkit/chakra/badge';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { TableCell, TableRow } from 'toolkit/chakra/table';
-import ChainIcon from 'ui/optimismSuperchain/components/ChainIcon';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import ChainIcon from 'ui/shared/externalChains/ChainIcon';
 import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 type Props = {
   item: TokenTransfer;
   isLoading?: boolean;
-  chainData?: ChainConfig;
+  chainData?: ClusterChainConfig;
 };
 
 const TokenTransferTableItem = ({ item, isLoading, chainData }: Props) => {
diff --git a/ui/tokens/Tokens.tsx b/ui/tokens/Tokens.tsx
index 3ed5a49982..a9e6872083 100644
--- a/ui/tokens/Tokens.tsx
+++ b/ui/tokens/Tokens.tsx
@@ -12,9 +12,9 @@ import TokensListItem from './TokensListItem';
 import TokensTable from './TokensTable';
 
 interface Props {
-  query: QueryWithPagesResult<'general:tokens'> | QueryWithPagesResult<'general:tokens_bridged'>;
-  onSortChange: (value: TokensSortingValue) => void;
-  sort: TokensSortingValue;
+  query: QueryWithPagesResult<'general:tokens'> | QueryWithPagesResult<'general:tokens_bridged'> | QueryWithPagesResult<'multichainAggregator:tokens'>;
+  onSortChange?: (value: TokensSortingValue) => void;
+  sort?: TokensSortingValue;
   actionBar?: React.ReactNode;
   hasActiveFilters: boolean;
   description?: React.ReactNode;
diff --git a/ui/tokens/TokensListItem.tsx b/ui/tokens/TokensListItem.tsx
index 8123a330ce..1de6ed3ad1 100644
--- a/ui/tokens/TokensListItem.tsx
+++ b/ui/tokens/TokensListItem.tsx
@@ -3,8 +3,10 @@ import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { TokenInfo } from 'types/api/token';
+import type { AggregatedTokenInfo } from 'types/client/multichain-aggregator';
 
 import config from 'configs/app';
+import multichainConfig from 'configs/multichain';
 import getItemIndex from 'lib/getItemIndex';
 import { getTokenTypeName } from 'lib/token/tokenTypes';
 import { Skeleton } from 'toolkit/chakra/skeleton';
@@ -15,7 +17,7 @@ import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 
 type Props = {
-  token: TokenInfo;
+  token: TokenInfo | AggregatedTokenInfo;
   index: number;
   page: number;
   isLoading?: boolean;
@@ -32,18 +34,31 @@ const TokensListItem = ({
 
   const {
     address_hash: addressHash,
-    filecoin_robust_address: filecoinRobustAddress,
     exchange_rate: exchangeRate,
     type,
     holders_count: holdersCount,
     circulating_market_cap: marketCap,
-    origin_chain_id: originalChainId,
   } = token;
 
+  const originalChainId = 'origin_chain_id' in token ? token.origin_chain_id : undefined;
+  const chainInfos = 'chain_infos' in token ? token.chain_infos : undefined;
+
   const bridgedChainTag = bridgedTokensFeature.isEnabled ?
     bridgedTokensFeature.chains.find(({ id }) => id === originalChainId)?.short_title :
     undefined;
 
+  const filecoinRobustAddress = 'filecoin_robust_address' in token ? token.filecoin_robust_address : undefined;
+
+  const chainInfo = React.useMemo(() => {
+    if (!chainInfos) {
+      return;
+    }
+
+    const chainId = Object.keys(chainInfos)[0];
+    const chain = multichainConfig()?.chains.find((chain) => chain.id === chainId);
+    return chain;
+  }, [ chainInfos ]);
+
   return (
     <ListItemMobile rowGap={ 3 }>
       <Grid
@@ -53,6 +68,7 @@ const TokensListItem = ({
         <GridItem display="flex">
           <TokenEntity
             token={ token }
+            chain={ chainInfo }
             isLoading={ isLoading }
             jointSymbol
             noCopy
diff --git a/ui/tokens/TokensTable.tsx b/ui/tokens/TokensTable.tsx
index a6fce41594..68a2f841d4 100644
--- a/ui/tokens/TokensTable.tsx
+++ b/ui/tokens/TokensTable.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import type { TokenInfo } from 'types/api/token';
 import type { TokensSortingField, TokensSortingValue } from 'types/api/tokens';
+import type { AggregatedTokenInfo } from 'types/client/multichain-aggregator';
 
 import { TableBody, TableColumnHeader, TableColumnHeaderSortable, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
@@ -18,53 +19,76 @@ const SORT_SEQUENCE: Record<TokensSortingField, Array<TokensSortingValue>> = {
 const getNextSortValue = (getNextSortValueShared<TokensSortingField, TokensSortingValue>).bind(undefined, SORT_SEQUENCE);
 
 type Props = {
-  items: Array<TokenInfo>;
+  items: Array<TokenInfo> | Array<AggregatedTokenInfo>;
   page: number;
-  sorting: TokensSortingValue;
-  setSorting: (value: TokensSortingValue) => void;
+  sorting?: TokensSortingValue;
+  setSorting?: (value: TokensSortingValue) => void;
   isLoading?: boolean;
   top?: number;
 };
 
 const TokensTable = ({ items, page, isLoading, sorting, setSorting, top }: Props) => {
 
+  const hasSorting = setSorting && sorting;
+
   const sort = React.useCallback((field: TokensSortingField) => {
+    if (!hasSorting) {
+      return;
+    }
     const value = getNextSortValue(field)(sorting);
     setSorting(value);
-  }, [ sorting, setSorting ]);
+  }, [ sorting, setSorting, hasSorting ]);
 
   return (
     <TableRoot>
       <TableHeaderSticky top={ top ?? ACTION_BAR_HEIGHT_DESKTOP }>
         <TableRow>
           <TableColumnHeader w="50%">Token</TableColumnHeader>
-          <TableColumnHeaderSortable
-            isNumeric
-            w="15%"
-            sortField="fiat_value"
-            sortValue={ sorting }
-            onSortToggle={ sort }
-          >
-            Price
-          </TableColumnHeaderSortable>
-          <TableColumnHeaderSortable
-            isNumeric
-            w="20%"
-            sortField="circulating_market_cap"
-            sortValue={ sorting }
-            onSortToggle={ sort }
-          >
-            On-chain market cap
-          </TableColumnHeaderSortable>
-          <TableColumnHeaderSortable
-            isNumeric
-            w="15%"
-            sortField="holders_count"
-            sortValue={ sorting }
-            onSortToggle={ sort }
-          >
-            Holders
-          </TableColumnHeaderSortable>
+          { hasSorting ? (
+            <TableColumnHeaderSortable
+              isNumeric
+              w="15%"
+              sortField="fiat_value"
+              sortValue={ sorting }
+              onSortToggle={ sort }
+            >
+              Price
+            </TableColumnHeaderSortable>
+          ) : (
+            <TableColumnHeader isNumeric width="15%">
+              Price
+            </TableColumnHeader>
+          ) }
+          { hasSorting ? (
+            <TableColumnHeaderSortable
+              isNumeric
+              w="20%"
+              sortField="circulating_market_cap"
+              sortValue={ sorting }
+              onSortToggle={ sort }
+            >
+              On-chain market cap
+            </TableColumnHeaderSortable>
+          ) : (
+            <TableColumnHeader isNumeric width="20%">
+              On-chain market cap
+            </TableColumnHeader>
+          ) }
+          { hasSorting ? (
+            <TableColumnHeaderSortable
+              isNumeric
+              w="15%"
+              sortField="holders_count"
+              sortValue={ sorting }
+              onSortToggle={ sort }
+            >
+              Holders
+            </TableColumnHeaderSortable>
+          ) : (
+            <TableColumnHeader isNumeric width="15%">
+              Holders
+            </TableColumnHeader>
+          ) }
         </TableRow>
       </TableHeaderSticky>
       <TableBody>
diff --git a/ui/tokens/TokensTableItem.tsx b/ui/tokens/TokensTableItem.tsx
index 73b9408f63..d2749ad457 100644
--- a/ui/tokens/TokensTableItem.tsx
+++ b/ui/tokens/TokensTableItem.tsx
@@ -3,8 +3,10 @@ import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { TokenInfo } from 'types/api/token';
+import type { AggregatedTokenInfo } from 'types/client/multichain-aggregator';
 
 import config from 'configs/app';
+import multichainConfig from 'configs/multichain';
 import getItemIndex from 'lib/getItemIndex';
 import { getTokenTypeName } from 'lib/token/tokenTypes';
 import { Skeleton } from 'toolkit/chakra/skeleton';
@@ -17,7 +19,7 @@ import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
 type Props = {
-  token: TokenInfo;
+  token: TokenInfo | AggregatedTokenInfo;
   index: number;
   page: number;
   isLoading?: boolean;
@@ -34,14 +36,16 @@ const TokensTableItem = ({
 
   const {
     address_hash: addressHash,
-    filecoin_robust_address: filecoinRobustAddress,
     exchange_rate: exchangeRate,
     type,
     holders_count: holdersCount,
     circulating_market_cap: marketCap,
-    origin_chain_id: originalChainId,
   } = token;
 
+  const filecoinRobustAddress = 'filecoin_robust_address' in token ? token.filecoin_robust_address : undefined;
+  const originalChainId = 'origin_chain_id' in token ? token.origin_chain_id : undefined;
+  const chainInfos = 'chain_infos' in token ? token.chain_infos : undefined;
+
   const bridgedChainTag = bridgedTokensFeature.isEnabled ?
     bridgedTokensFeature.chains.find(({ id }) => id === originalChainId)?.short_title :
     undefined;
@@ -58,6 +62,16 @@ const TokensTableItem = ({
     implementations: null,
   };
 
+  const chainInfo = React.useMemo(() => {
+    if (!chainInfos) {
+      return;
+    }
+
+    const chainId = Object.keys(chainInfos)[0];
+    const chain = multichainConfig()?.chains.find((chain) => chain.id === chainId);
+    return chain;
+  }, [ chainInfos ]);
+
   return (
     <TableRow className="group">
       <TableCell>
@@ -74,6 +88,7 @@ const TokensTableItem = ({
           <Flex overflow="hidden" flexDir="column" rowGap={ 2 }>
             <TokenEntity
               token={ token }
+              chain={ chainInfo }
               isLoading={ isLoading }
               jointSymbol
               noCopy
diff --git a/ui/tx/TxSubHeading.tsx b/ui/tx/TxSubHeading.tsx
index e3572b8ec5..163ded983f 100644
--- a/ui/tx/TxSubHeading.tsx
+++ b/ui/tx/TxSubHeading.tsx
@@ -28,7 +28,7 @@ type Props = {
 
 const TxSubHeading = ({ hash, hasTag, txQuery }: Props) => {
   const multichainContext = useMultichainContext();
-  const feature = multichainContext?.chain?.config.features.txInterpretation || config.features.txInterpretation;
+  const feature = multichainContext?.chain?.app_config.features.txInterpretation || config.features.txInterpretation;
 
   const hasInterpretationFeature = feature.isEnabled;
   const isNovesInterpretation = hasInterpretationFeature && feature.provider === 'noves';
diff --git a/ui/txs/TxsList.tsx b/ui/txs/TxsList.tsx
index 32bedf29f5..7d960c91ae 100644
--- a/ui/txs/TxsList.tsx
+++ b/ui/txs/TxsList.tsx
@@ -7,7 +7,6 @@ import type { Transaction } from 'types/api/transaction';
 import { useMultichainContext } from 'lib/contexts/multichain';
 import useInitialList from 'lib/hooks/useInitialList';
 import useLazyRenderedList from 'lib/hooks/useLazyRenderedList';
-import { getChainDataForList } from 'lib/multichain/getChainDataForList';
 
 import TxsSocketNotice from './socket/TxsSocketNotice';
 import TxsListItem from './TxsListItem';
@@ -29,7 +28,7 @@ const TxsList = (props: Props) => {
     enabled: !props.isLoading,
   });
   const multichainContext = useMultichainContext();
-  const chainData = getChainDataForList(multichainContext);
+  const chainData = multichainContext?.chain;
 
   return (
     <Box>
diff --git a/ui/txs/TxsListItem.tsx b/ui/txs/TxsListItem.tsx
index 81904b1ecc..55b8b9f07d 100644
--- a/ui/txs/TxsListItem.tsx
+++ b/ui/txs/TxsListItem.tsx
@@ -5,7 +5,7 @@ import {
 import React from 'react';
 
 import type { Transaction } from 'types/api/transaction';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import config from 'configs/app';
 import getValueWithUnit from 'lib/getValueWithUnit';
@@ -32,7 +32,7 @@ type Props = {
   enableTimeIncrement?: boolean;
   isLoading?: boolean;
   animation?: string;
-  chainData?: ChainConfig;
+  chainData?: ClusterChainConfig;
 };
 
 const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeIncrement, animation, chainData }: Props) => {
diff --git a/ui/txs/TxsStats.tsx b/ui/txs/TxsStats.tsx
index 2653a18b61..c654952f2d 100644
--- a/ui/txs/TxsStats.tsx
+++ b/ui/txs/TxsStats.tsx
@@ -17,7 +17,7 @@ interface Props extends BoxProps {}
 const TxsStats = (props: Props) => {
   const multichainContext = useMultichainContext();
 
-  const chainConfig = multichainContext?.chain.config || config;
+  const chainConfig = multichainContext?.chain.app_config || config;
   const isStatsFeatureEnabled = chainConfig.features.stats.isEnabled;
   const rollupFeature = chainConfig.features.rollup;
   const isOptimisticRollup = rollupFeature.isEnabled && rollupFeature.type === 'optimistic';
@@ -96,7 +96,11 @@ const TxsStats = (props: Props) => {
           value={ Number(txCount24h).toLocaleString() }
           period="24h"
           isLoading={ isLoading }
-          href={ chainConfig.features.stats.isEnabled ? { pathname: '/stats/[id]', query: { id: 'newTxns' } } : undefined }
+          href={
+            chainConfig.features.stats.isEnabled ?
+              { pathname: '/stats/[id]', query: { id: 'newTxns', ...(multichainContext?.chain.id ? { chain_id: multichainContext.chain.id } : {}) } } :
+              undefined
+          }
         />
       ) }
       { operationalTxns24hArbitrum && (
@@ -138,7 +142,11 @@ const TxsStats = (props: Props) => {
           valuePostfix={ thinsp + chainConfig.chain.currency.symbol }
           period="24h"
           isLoading={ isLoading }
-          href={ chainConfig.features.stats.isEnabled ? { pathname: '/stats/[id]', query: { id: 'txnsFee' } } : undefined }
+          href={
+            chainConfig.features.stats.isEnabled ?
+              { pathname: '/stats/[id]', query: { id: 'txnsFee', ...(multichainContext?.chain.id ? { chain_id: multichainContext.chain.id } : {}) } } :
+              undefined
+          }
         />
       ) }
       { txFeeAvg && (
@@ -151,7 +159,11 @@ const TxsStats = (props: Props) => {
           valuePostfix={ txFeeAvg.usd ? undefined : thinsp + chainConfig.chain.currency.symbol }
           period="24h"
           isLoading={ isLoading }
-          href={ chainConfig.features.stats.isEnabled ? { pathname: '/stats/[id]', query: { id: 'averageTxnFee' } } : undefined }
+          href={
+            chainConfig.features.stats.isEnabled ?
+              { pathname: '/stats/[id]', query: { id: 'averageTxnFee', ...(multichainContext?.chain.id ? { chain_id: multichainContext.chain.id } : {}) } } :
+              undefined
+          }
         />
       ) }
     </Box>
diff --git a/ui/txs/TxsTable.tsx b/ui/txs/TxsTable.tsx
index a0d831a7ec..877929772e 100644
--- a/ui/txs/TxsTable.tsx
+++ b/ui/txs/TxsTable.tsx
@@ -8,7 +8,6 @@ import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
 import { useMultichainContext } from 'lib/contexts/multichain';
 import useInitialList from 'lib/hooks/useInitialList';
 import useLazyRenderedList from 'lib/hooks/useLazyRenderedList';
-import { getChainDataForList } from 'lib/multichain/getChainDataForList';
 import { currencyUnits } from 'lib/units';
 import { TableBody, TableColumnHeader, TableColumnHeaderSortable, TableHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
@@ -48,7 +47,7 @@ const TxsTable = ({
     enabled: !isLoading,
   });
   const multichainContext = useMultichainContext();
-  const chainData = getChainDataForList(multichainContext);
+  const chainData = multichainContext?.chain;
 
   const feeCurrency = config.UI.views.tx.hiddenFields?.fee_currency || config.chain.hasMultipleGasCurrencies ?
     '' :
diff --git a/ui/txs/TxsTableItem.tsx b/ui/txs/TxsTableItem.tsx
index 6b3db0bf51..af62bcda22 100644
--- a/ui/txs/TxsTableItem.tsx
+++ b/ui/txs/TxsTableItem.tsx
@@ -2,17 +2,17 @@ import { Flex, VStack } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Transaction } from 'types/api/transaction';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import config from 'configs/app';
 import { Badge } from 'toolkit/chakra/badge';
 import { TableCell, TableRow } from 'toolkit/chakra/table';
-import ChainIcon from 'ui/optimismSuperchain/components/ChainIcon';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import BlockPendingUpdateHint from 'ui/shared/block/BlockPendingUpdateHint';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import ChainIcon from 'ui/shared/externalChains/ChainIcon';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
 import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 import TxFee from 'ui/shared/tx/TxFee';
@@ -29,7 +29,7 @@ type Props = {
   enableTimeIncrement?: boolean;
   isLoading?: boolean;
   animation?: string;
-  chainData?: ChainConfig;
+  chainData?: ClusterChainConfig;
 };
 
 const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement, isLoading, animation, chainData }: Props) => {
diff --git a/ui/txs/socket/TxsSocketNotice.tsx b/ui/txs/socket/TxsSocketNotice.tsx
index b0ca4a530a..ca0ae3ded7 100644
--- a/ui/txs/socket/TxsSocketNotice.tsx
+++ b/ui/txs/socket/TxsSocketNotice.tsx
@@ -22,7 +22,6 @@ const TxsSocketNotice = ({ type, place, isLoading }: Props) => {
 
   switch (type) {
     case 'txs_home':
-    case 'txs_home_cross_chain':
     case 'txs_validated':
     case 'txs_pending': {
       return <TxsSocketNoticeTypeAll type={ type } place={ place } isLoading={ isLoading }/>;
diff --git a/ui/txs/socket/TxsSocketNoticeTypeAll.tsx b/ui/txs/socket/TxsSocketNoticeTypeAll.tsx
index 7ac33d9dda..6f9201b602 100644
--- a/ui/txs/socket/TxsSocketNoticeTypeAll.tsx
+++ b/ui/txs/socket/TxsSocketNoticeTypeAll.tsx
@@ -24,12 +24,8 @@ const TxsSocketNoticeTypeAll = ({ type, place, isLoading }: Props) => {
   }
 
   const url = (() => {
-    if (type === 'txs_home_cross_chain') {
-      return route({ pathname: '/txs' });
-    }
-
     if (type === 'txs_home' && multichainContext) {
-      return route({ pathname: '/txs' }, multichainContext);
+      return route({ pathname: '/txs', query: { tab: 'txs_local', chain_id: multichainContext.chain.id } });
     }
   })();
 
diff --git a/ui/txs/socket/types.ts b/ui/txs/socket/types.ts
index f089b560ac..1e1879eebd 100644
--- a/ui/txs/socket/types.ts
+++ b/ui/txs/socket/types.ts
@@ -1,2 +1,2 @@
-export type TxsSocketType = 'txs_validated' | 'txs_pending' | 'txs_home' | 'address_txs' | 'txs_home_cross_chain';
+export type TxsSocketType = 'txs_validated' | 'txs_pending' | 'txs_home' | 'address_txs';
 export type TxsSocketNoticePlace = 'list' | 'table';
diff --git a/ui/txs/socket/useTxsSocketTypeAddress.tsx b/ui/txs/socket/useTxsSocketTypeAddress.tsx
index b452a288e1..7bdbd201a3 100644
--- a/ui/txs/socket/useTxsSocketTypeAddress.tsx
+++ b/ui/txs/socket/useTxsSocketTypeAddress.tsx
@@ -54,7 +54,7 @@ export default function useTxsSocketTypeAddress({ isLoading }: Params) {
     const queryKey = getResourceKey('general:address_txs', {
       pathParams: { hash: currentAddress },
       queryParams: filterValue ? { filter: filterValue } : undefined,
-      chainSlug: chain?.slug,
+      chainId: chain?.id,
     });
     setShowErrorAlert(false);
 
@@ -97,7 +97,7 @@ export default function useTxsSocketTypeAddress({ isLoading }: Params) {
           ].sort(sortTxsFromSocket(sort)),
         };
       });
-  }, [ currentAddress, filterValue, queryClient, sort, chain?.slug ]);
+  }, [ currentAddress, filterValue, queryClient, sort, chain?.id ]);
 
   const handleSocketClose = React.useCallback(() => {
     setShowErrorAlert(true);
diff --git a/ui/txs/socket/useTxsSocketTypeAll.tsx b/ui/txs/socket/useTxsSocketTypeAll.tsx
index 548f52218f..18d25fb5fd 100644
--- a/ui/txs/socket/useTxsSocketTypeAll.tsx
+++ b/ui/txs/socket/useTxsSocketTypeAll.tsx
@@ -14,9 +14,6 @@ function getSocketParams(type: TxsSocketType, page: string) {
     case 'txs_home': {
       return { topic: 'transactions:new_transaction' as const, event: 'transaction' as const };
     }
-    case 'txs_home_cross_chain': {
-      return { topic: 'interop_messages:new_messages' as const, event: 'new_messages' as const };
-    }
     case 'txs_validated': {
       return !page || page === '1' ? { topic: 'transactions:new_transaction' as const, event: 'transaction' as const } : {};
     }
diff --git a/ui/userOps/UserOpsListItem.tsx b/ui/userOps/UserOpsListItem.tsx
index 124889c23f..7f80ca504a 100644
--- a/ui/userOps/UserOpsListItem.tsx
+++ b/ui/userOps/UserOpsListItem.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type { UserOpsItem } from 'types/api/userOps';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import config from 'configs/app';
 import { useMultichainContext } from 'lib/contexts/multichain';
@@ -19,12 +19,12 @@ type Props = {
   isLoading?: boolean;
   showTx: boolean;
   showSender: boolean;
-  chainData?: ChainConfig;
+  chainData?: ClusterChainConfig;
 };
 
 const UserOpsListItem = ({ item, isLoading, showTx, showSender, chainData }: Props) => {
   const multichainContext = useMultichainContext();
-  const chainConfig = (multichainContext?.chain.config || config);
+  const chainConfig = (multichainContext?.chain.app_config || config);
 
   return (
     <ListItemMobileGrid.Container gridTemplateColumns="100px auto">
diff --git a/ui/userOps/UserOpsTable.tsx b/ui/userOps/UserOpsTable.tsx
index fa8034c74f..d83868bac9 100644
--- a/ui/userOps/UserOpsTable.tsx
+++ b/ui/userOps/UserOpsTable.tsx
@@ -4,7 +4,6 @@ import type { UserOpsItem } from 'types/api/userOps';
 
 import config from 'configs/app';
 import { useMultichainContext } from 'lib/contexts/multichain';
-import { getChainDataForList } from 'lib/multichain/getChainDataForList';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
@@ -20,8 +19,8 @@ type Props = {
 
 const UserOpsTable = ({ items, isLoading, top, showTx, showSender }: Props) => {
   const multichainContext = useMultichainContext();
-  const chainData = getChainDataForList(multichainContext);
-  const chainConfig = (multichainContext?.chain.config || config);
+  const chainData = multichainContext?.chain;
+  const chainConfig = (multichainContext?.chain.app_config || config);
 
   return (
     <TableRoot minW="1000px">
diff --git a/ui/userOps/UserOpsTableItem.tsx b/ui/userOps/UserOpsTableItem.tsx
index 3b5356e324..a21ca9d8c6 100644
--- a/ui/userOps/UserOpsTableItem.tsx
+++ b/ui/userOps/UserOpsTableItem.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 
 import type { UserOpsItem } from 'types/api/userOps';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import config from 'configs/app';
 import { TableCell, TableRow } from 'toolkit/chakra/table';
-import ChainIcon from 'ui/optimismSuperchain/components/ChainIcon';
 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 ChainIcon from 'ui/shared/externalChains/ChainIcon';
 import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 import UserOpStatus from 'ui/shared/userOps/UserOpStatus';
 
@@ -19,7 +19,7 @@ type Props = {
   isLoading?: boolean;
   showTx: boolean;
   showSender: boolean;
-  chainData?: ChainConfig;
+  chainData?: ClusterChainConfig;
 };
 
 const UserOpsTableItem = ({ item, isLoading, showTx, showSender, chainData }: Props) => {
diff --git a/ui/verifiedContracts/VerifiedContractsCounters.tsx b/ui/verifiedContracts/VerifiedContractsCounters.tsx
index b862730458..d360da1db7 100644
--- a/ui/verifiedContracts/VerifiedContractsCounters.tsx
+++ b/ui/verifiedContracts/VerifiedContractsCounters.tsx
@@ -3,12 +3,16 @@ import React from 'react';
 
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
+import { useMultichainContext } from 'lib/contexts/multichain';
 import { VERIFIED_CONTRACTS_COUNTERS, VERIFIED_CONTRACTS_COUNTERS_MICROSERVICE } from 'stubs/contract';
 import StatsWidget from 'ui/shared/stats/StatsWidget';
 
-const isStatsFeatureEnabled = config.features.stats.isEnabled;
-
 const VerifiedContractsCounters = () => {
+  const multichainContext = useMultichainContext();
+
+  const chainConfig = multichainContext?.chain.app_config || config;
+  const isStatsFeatureEnabled = chainConfig.features.stats.isEnabled;
+
   const countersStatsQuery = useApiQuery('stats:pages_contracts', {
     queryOptions: {
       enabled: isStatsFeatureEnabled,
@@ -56,7 +60,14 @@ const VerifiedContractsCounters = () => {
         diff={ newVerifiedContractsCount }
         diffFormatted={ Number(newVerifiedContractsCount).toLocaleString() }
         isLoading={ isLoading }
-        href={ config.features.stats.isEnabled ? { pathname: '/stats/[id]', query: { id: 'verifiedContractsGrowth' } } : undefined }
+        href={
+          chainConfig.features.stats.isEnabled ?
+            {
+              pathname: '/stats/[id]',
+              query: { id: 'verifiedContractsGrowth', ...(multichainContext?.chain.id ? { chain_id: multichainContext.chain.id } : {}) },
+            } :
+            undefined
+        }
       />
     </Box>
   );
diff --git a/ui/verifiedContracts/VerifiedContractsFilter.tsx b/ui/verifiedContracts/VerifiedContractsFilter.tsx
index d39c881ade..4ed3ba9bf3 100644
--- a/ui/verifiedContracts/VerifiedContractsFilter.tsx
+++ b/ui/verifiedContracts/VerifiedContractsFilter.tsx
@@ -7,8 +7,6 @@ import config from 'configs/app';
 import type { SelectOption } from 'toolkit/chakra/select';
 import PopoverFilterRadio from 'ui/shared/filters/PopoverFilterRadio';
 
-type OptionValue = TVerifiedContractsFilter | 'all';
-
 const OPTIONS = [
   { value: 'all', label: 'All' },
   { value: 'solidity', label: 'Solidity' },
@@ -17,19 +15,24 @@ const OPTIONS = [
   { value: 'scilla', label: 'Scilla' },
   { value: 'geas', label: 'Geas' },
   { value: 'stylus_rust', label: 'Stylus Rust' },
-].filter(({ value }) => value === 'all' || config.UI.views.address.languageFilters.includes(value)) as Array<{ value: OptionValue; label: string }>;
-
-const collection = createListCollection<SelectOption>({
-  items: OPTIONS,
-});
+];
 
 interface Props {
   hasActiveFilter: boolean;
   defaultValue: TVerifiedContractsFilter | undefined;
   onChange: (nextValue: string | Array<string>) => void;
+  chainConfig?: typeof config;
 }
 
-const VerifiedContractsFilter = ({ onChange, defaultValue, hasActiveFilter }: Props) => {
+const VerifiedContractsFilter = ({ onChange, defaultValue, hasActiveFilter, chainConfig }: Props) => {
+  const options = React.useMemo(() => {
+    return OPTIONS.filter(({ value }) => value === 'all' || (chainConfig || config).UI.views.address.languageFilters.includes(value));
+  }, [ chainConfig ]);
+
+  const collection = React.useMemo(() => {
+    return createListCollection<SelectOption>({ items: options });
+  }, [ options ]);
+
   return (
     <PopoverFilterRadio
       name="verified_contracts_filter"
diff --git a/ui/verifiedContracts/VerifiedContractsTable.tsx b/ui/verifiedContracts/VerifiedContractsTable.tsx
index 5ff67f275f..ef85771005 100644
--- a/ui/verifiedContracts/VerifiedContractsTable.tsx
+++ b/ui/verifiedContracts/VerifiedContractsTable.tsx
@@ -4,7 +4,6 @@ import type { VerifiedContract } from 'types/api/contracts';
 import type { VerifiedContractsSortingField, VerifiedContractsSortingValue } from 'types/api/verifiedContracts';
 
 import { useMultichainContext } from 'lib/contexts/multichain';
-import { getChainDataForList } from 'lib/multichain/getChainDataForList';
 import { currencyUnits } from 'lib/units';
 import { TableBody, TableColumnHeader, TableColumnHeaderSortable, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
@@ -23,7 +22,7 @@ interface Props {
 
 const VerifiedContractsTable = ({ data, sort, setSorting, isLoading }: Props) => {
   const multichainContext = useMultichainContext();
-  const chainData = getChainDataForList(multichainContext);
+  const chainData = multichainContext?.chain;
 
   const onSortToggle = React.useCallback((field: VerifiedContractsSortingField) => {
     const value = getNextSortValue<VerifiedContractsSortingField, VerifiedContractsSortingValue>(SORT_SEQUENCE, field)(sort);
diff --git a/ui/verifiedContracts/VerifiedContractsTableItem.tsx b/ui/verifiedContracts/VerifiedContractsTableItem.tsx
index 82c90c9758..39ef8d4862 100644
--- a/ui/verifiedContracts/VerifiedContractsTableItem.tsx
+++ b/ui/verifiedContracts/VerifiedContractsTableItem.tsx
@@ -3,7 +3,7 @@ import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { VerifiedContract } from 'types/api/contracts';
-import type { ChainConfig } from 'types/multichain';
+import type { ClusterChainConfig } from 'types/multichain';
 
 import config from 'configs/app';
 import formatLanguageName from 'lib/contracts/formatLanguageName';
@@ -11,9 +11,9 @@ import { CONTRACT_LICENSES } from 'lib/contracts/licenses';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { TableCell, TableRow } from 'toolkit/chakra/table';
 import { Tooltip } from 'toolkit/chakra/tooltip';
-import ChainIcon from 'ui/optimismSuperchain/components/ChainIcon';
 import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import ChainIcon from 'ui/shared/externalChains/ChainIcon';
 import IconSvg from 'ui/shared/IconSvg';
 import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 import TruncatedValue from 'ui/shared/TruncatedValue';
@@ -21,7 +21,7 @@ import TruncatedValue from 'ui/shared/TruncatedValue';
 interface Props {
   data: VerifiedContract;
   isLoading?: boolean;
-  chainData?: ChainConfig;
+  chainData?: ClusterChainConfig;
 }
 
 const VerifiedContractsTableItem = ({ data, isLoading, chainData }: Props) => {
diff --git a/ui/zetaChain/cctxDetails/ZetaChainCCTXDetails.tsx b/ui/zetaChain/cctxDetails/ZetaChainCCTXDetails.tsx
index a0ffa579ea..295db0c6b1 100644
--- a/ui/zetaChain/cctxDetails/ZetaChainCCTXDetails.tsx
+++ b/ui/zetaChain/cctxDetails/ZetaChainCCTXDetails.tsx
@@ -222,7 +222,7 @@ const ZetaChainCCTXDetails = ({ data, isLoading }: Props) => {
         <Grid templateColumns="20px 1fr" rowGap={ 6 } columnGap={ 2 } w="100%">
           { transactionsBefore.length > 0 && (
             <>
-              <IconSvg name="verification-steps/finalized" boxSize={ 5 } bg={{ _light: 'white', _dark: 'black' }} zIndex={ 1 } color="text.secondary"/>
+              <IconSvg name="verification-steps/finalized" boxSize={ 5 } bg="bg.primary" zIndex={ 1 } color="text.secondary"/>
               <VStack gap={ 2 } alignItems="flex-start">
                 { transactionsBefore.map((tx) => (
                   <ZetaChainCCTXDetailsRelatedTx
@@ -257,10 +257,10 @@ const ZetaChainCCTXDetails = ({ data, isLoading }: Props) => {
               <Flex
                 h="100%"
                 w="100%"
-                bg={{ _light: 'white', _dark: 'black' }}
+                bg="bg.primary"
                 zIndex={ 1 }
               >
-                <IconSvg name="interop_slim" boxSize={ 5 } bg={{ _light: 'white', _dark: 'black' }} zIndex={ 1 } color="text.secondary"/>
+                <IconSvg name="interop_slim" boxSize={ 5 } bg="bg.primary" zIndex={ 1 } color="text.secondary"/>
               </Flex>
               <VStack gap={ 2 } alignItems="flex-start">
                 { transactionsAfter.map((tx) => (
diff --git a/ui/zetaChain/cctxDetails/ZetaChainCCTXDetailsLifecycleIn.tsx b/ui/zetaChain/cctxDetails/ZetaChainCCTXDetailsLifecycleIn.tsx
index 22aa72e0c9..f8c916e125 100644
--- a/ui/zetaChain/cctxDetails/ZetaChainCCTXDetailsLifecycleIn.tsx
+++ b/ui/zetaChain/cctxDetails/ZetaChainCCTXDetailsLifecycleIn.tsx
@@ -27,7 +27,7 @@ const ZetaChainCCTXDetailsLifecycleIn = ({ tx, isLoading }: Props) => {
     return null;
   }
   const chainFromId = inboundParams.sender_chain_id.toString();
-  const chainFrom = chainsConfig?.find((chain) => chain.chain_id.toString() === chainFromId);
+  const chainFrom = chainsConfig?.find((chain) => chain.id.toString() === chainFromId);
 
   const isCCTX = tx.related_cctxs.some((cctx) => cctx.index === inboundParams.observed_hash);
   const color = inboundParams.status === InboundStatus.INBOUND_SUCCESS ? 'text.success' : 'text.error';
@@ -37,13 +37,13 @@ const ZetaChainCCTXDetailsLifecycleIn = ({ tx, isLoading }: Props) => {
       <IconSvg
         name="verification-steps/finalized"
         boxSize={ 5 }
-        bg={{ _light: 'white', _dark: 'black' }}
+        bg="bg.primary"
         zIndex={ 1 }
         color={ color }
       />
       <Skeleton loading={ isLoading }>
         <Flex color={ color } maxH="20px" mb={ 2.5 } alignItems="center">
-          { `Sender tx from ${ chainFrom?.chain_name || 'unknown chain' }` }
+          { `Sender tx from ${ chainFrom?.name || 'unknown chain' }` }
         </Flex>
         <Grid
           templateColumns="100px 1fr"
diff --git a/ui/zetaChain/cctxDetails/ZetaChainCCTXDetailsLifecycleOut.tsx b/ui/zetaChain/cctxDetails/ZetaChainCCTXDetailsLifecycleOut.tsx
index a84c3fb3b9..214010e226 100644
--- a/ui/zetaChain/cctxDetails/ZetaChainCCTXDetailsLifecycleOut.tsx
+++ b/ui/zetaChain/cctxDetails/ZetaChainCCTXDetailsLifecycleOut.tsx
@@ -26,7 +26,7 @@ type Props = {
 const ZetaChainCCTXDetailsLifecycleOut = ({ outboundParam, tx, isLoading, isLast, hasTxAfter }: Props) => {
   const { data: chainsConfig } = useZetaChainConfig();
   const chainToId = outboundParam.receiver_chain_id?.toString() || '';
-  const chainTo = chainsConfig?.find((chain) => chain.chain_id.toString() === chainToId);
+  const chainTo = chainsConfig?.find((chain) => chain.id.toString() === chainToId);
 
   const gasDecimals = config.chain.currency.decimals;
 
@@ -94,7 +94,7 @@ const ZetaChainCCTXDetailsLifecycleOut = ({ outboundParam, tx, isLoading, isLast
         </Text>
       </>
     );
-    text = `Sent tx to ${ chainTo?.chain_name || 'Unknown chain' }`;
+    text = `Sent tx to ${ chainTo?.name || 'Unknown chain' }`;
     color = 'text.success';
   } else if (tx.cctx_status?.status === CctxStatus.PENDING_REVERT) {
     if (!isLast) {
@@ -119,7 +119,7 @@ const ZetaChainCCTXDetailsLifecycleOut = ({ outboundParam, tx, isLoading, isLast
           />
         </>
       );
-      text = `Waiting for revert to ${ chainTo?.chain_name || 'Unknown chain' }`;
+      text = `Waiting for revert to ${ chainTo?.name || 'Unknown chain' }`;
       color = 'text.secondary';
     }
   } else if (tx.cctx_status?.status === CctxStatus.PENDING_OUTBOUND) {
@@ -136,7 +136,7 @@ const ZetaChainCCTXDetailsLifecycleOut = ({ outboundParam, tx, isLoading, isLast
         <Text>{ outboundParam.tss_nonce }</Text>
       </>
     );
-    text = `Waiting for outbound tx to ${ chainTo?.chain_name || 'Unknown chain' }`;
+    text = `Waiting for outbound tx to ${ chainTo?.name || 'Unknown chain' }`;
     color = 'text.secondary';
   } else if (tx.cctx_status?.status === CctxStatus.REVERTED) {
     if (!isLast) {
@@ -176,7 +176,7 @@ const ZetaChainCCTXDetailsLifecycleOut = ({ outboundParam, tx, isLoading, isLast
           </Text>
         </>
       );
-      text = `Reverted to ${ chainTo?.chain_name || 'Unknown chain' }`;
+      text = `Reverted to ${ chainTo?.name || 'Unknown chain' }`;
       color = 'text.success';
     }
   } else if (tx.cctx_status?.status === CctxStatus.ABORTED) {
@@ -218,10 +218,10 @@ const ZetaChainCCTXDetailsLifecycleOut = ({ outboundParam, tx, isLoading, isLast
       <Flex
         h="100%"
         w="100%"
-        bg={ (isLast && !hasTxAfter) ? { _light: 'white', _dark: 'black' } : 'transparent' }
+        bg={ (isLast && !hasTxAfter) ? 'bg.primary' : 'transparent' }
         zIndex={ 1 }
       >
-        <IconSvg name="verification-steps/finalized" boxSize={ 5 } bg={{ _light: 'white', _dark: 'black' }} zIndex={ 1 } color={ color }/>
+        <IconSvg name="verification-steps/finalized" boxSize={ 5 } bg="bg.primary" zIndex={ 1 } color={ color }/>
       </Flex>
       <Skeleton loading={ isLoading } w="100%" overflow="hidden">
         <Flex color={ color } maxH="20px" alignItems="center" mb={ 2.5 }>
diff --git a/ui/zetaChain/cctxDetails/ZetaChainCCTXDetailsRelatedTx.tsx b/ui/zetaChain/cctxDetails/ZetaChainCCTXDetailsRelatedTx.tsx
index bb6d997640..361ad378ba 100644
--- a/ui/zetaChain/cctxDetails/ZetaChainCCTXDetailsRelatedTx.tsx
+++ b/ui/zetaChain/cctxDetails/ZetaChainCCTXDetailsRelatedTx.tsx
@@ -4,8 +4,8 @@ import React from 'react';
 import { type RelatedCctx, CctxStatusReduced } from '@blockscout/zetachain-cctx-types';
 
 import { Skeleton } from 'toolkit/chakra/skeleton';
-import ChainIcon from 'ui/shared/ChainIcon';
 import TxEntityZetaChainCC from 'ui/shared/entities/tx/TxEntityZetaChainCC';
+import ChainIcon from 'ui/shared/externalChains/ChainIcon';
 import IconSvg from 'ui/shared/IconSvg';
 import ZetaChainCCTXReducedStatus from 'ui/shared/zetaChain/ZetaChainCCTXReducedStatus';
 import useZetaChainConfig from 'ui/zetaChain/useZetaChainConfig';
@@ -17,9 +17,9 @@ type Props = {
 
 const ZetaChainCCTXDetailsRelatedTx = ({ tx, isLoading }: Props) => {
   const { data: chainsConfig } = useZetaChainConfig();
-  const chainFrom = chainsConfig?.find((chain) => chain.chain_id === tx.source_chain_id);
+  const chainFrom = chainsConfig?.find((chain) => chain.id === tx.source_chain_id.toString());
 
-  const chainsTo = tx.outbound_params.map((p) => chainsConfig?.find((chain) => chain.chain_id === p.chain_id));
+  const chainsTo = tx.outbound_params.map((p) => chainsConfig?.find((chain) => chain.id === p.chain_id.toString()));
 
   const color = (() => {
     if (tx.status_reduced === CctxStatusReduced.SUCCESS) {
@@ -40,9 +40,9 @@ const ZetaChainCCTXDetailsRelatedTx = ({ tx, isLoading }: Props) => {
       color={ color }
       maxH="20px"
     >
-      <ChainIcon chain={ chainFrom }/>
+      <ChainIcon data={ chainFrom }/>
       <IconSvg name="arrows/east" boxSize={ 5 } color="text.secondary"/>
-      { chainsTo.map((chain, index) => <ChainIcon key={ index } chain={ chain }/>) }
+      { chainsTo.map((chain, index) => <ChainIcon key={ index } data={ chain }/>) }
       <Box>CCTX</Box>
       <TxEntityZetaChainCC hash={ tx.index } isLoading={ isLoading } noIcon truncation="constant"/>
       <ZetaChainCCTXReducedStatus status={ tx.status_reduced } isLoading={ isLoading } type="full"/>
diff --git a/ui/zetaChain/filters/ZetaChainAddressFilter.tsx b/ui/zetaChain/filters/ZetaChainAddressFilter.tsx
index ee4c1e5959..68d704e806 100644
--- a/ui/zetaChain/filters/ZetaChainAddressFilter.tsx
+++ b/ui/zetaChain/filters/ZetaChainAddressFilter.tsx
@@ -1,20 +1,17 @@
-import { Flex, VStack, createListCollection } from '@chakra-ui/react';
+import { Flex, VStack } from '@chakra-ui/react';
 import { isEqual } from 'es-toolkit';
 import type { ChangeEvent } from 'react';
 import React from 'react';
 
-import type { CrossChainInfo } from 'types/client/crossChainInfo';
 import type { ZetaChainCCTXFilterParams } from 'types/client/zetaChain';
 
-import { Image } from 'toolkit/chakra/image';
 import { Input } from 'toolkit/chakra/input';
 import { InputGroup } from 'toolkit/chakra/input-group';
-import { Select } from 'toolkit/chakra/select';
-import type { SelectOption } from 'toolkit/chakra/select';
 import AddButton from 'toolkit/components/buttons/AddButton';
 import { ClearButton } from 'toolkit/components/buttons/ClearButton';
+import type { Props as ChainSelectBaseProps } from 'ui/shared/externalChains/ChainSelect';
+import ChainSelectBase from 'ui/shared/externalChains/ChainSelect';
 import TableColumnFilter from 'ui/shared/filters/TableColumnFilter';
-import IconSvg from 'ui/shared/IconSvg';
 import useZetaChainConfig from 'ui/zetaChain/useZetaChainConfig';
 
 type Props = {
@@ -39,13 +36,6 @@ type InputProps = {
   placeholder: string;
 };
 
-type ChainSelectProps = {
-  selectedChains: Array<string>;
-  onChainChange: (chains: Array<string>) => void;
-  chains: Array<CrossChainInfo>;
-  isLoading: boolean;
-};
-
 const AddressFilterInput = ({ address, onChange, onClear, isLast, onAddFieldClick, placeholder }: InputProps) => {
   return (
     <Flex alignItems="center" w="100%">
@@ -65,48 +55,31 @@ const AddressFilterInput = ({ address, onChange, onClear, isLast, onAddFieldClic
   );
 };
 
-const ChainSelect = ({ selectedChains, onChainChange, chains, isLoading }: ChainSelectProps) => {
-  const collection = React.useMemo(() => {
-    const options: Array<SelectOption> = [
-      { value: 'all', label: 'All chains' },
-      ...chains.map(chain => ({
-        value: chain.chain_id.toString(),
-        label: chain.chain_name || `Chain ${ chain.chain_id }`,
-        renderLabel: () => (
-          <Flex alignItems="center" gap={ 2 }>
-            { chain.chain_logo ? (
-              <Image src={ chain.chain_logo } boxSize={ 5 } borderRadius="base" alt={ chain.chain_name || 'chain logo' }/>
-            ) : (
-              <IconSvg name="networks/icon-placeholder" boxSize={ 5 } color="text.secondary"/>
-            ) }
-            <span>{ chain.chain_name || `Chain ${ chain.chain_id }` }</span>
-          </Flex>
-        ),
-      })),
-    ];
-    return createListCollection<SelectOption>({ items: options });
-  }, [ chains ]);
-
-  const handleValueChange = React.useCallback(({ value }: { value: Array<string> }) => {
-    const chainIds = value.filter(v => v !== 'all');
-    onChainChange(chainIds);
-  }, [ onChainChange ]);
+interface ChainSelectProps extends ChainSelectBaseProps {}
 
-  const selectedValues = React.useMemo(() => {
-    if (selectedChains.length === 0) {
+const ChainSelect = ({ chainsConfig, value, onValueChange, ...props }: ChainSelectProps) => {
+  const formattedValue = React.useMemo(() => {
+    if (!value || value.length === 0) {
       return [ 'all' ];
     }
-    return selectedChains.map(id => id.toString());
-  }, [ selectedChains ]);
 
+    return value;
+  }, [ value ]);
+
+  const handleValueChange = React.useCallback(({ value }: { value: Array<string> }) => {
+    const chainIds = value.filter(item => item !== 'all');
+    onValueChange?.({ value: chainIds, items: chainsConfig.filter(chain => chainIds.includes(chain.id)) });
+  }, [ chainsConfig, onValueChange ]);
   return (
-    <Select
-      collection={ collection }
-      placeholder="Select chains"
-      value={ selectedValues }
+    <ChainSelectBase
+      { ...props }
+      chainsConfig={ chainsConfig }
+      withAllOption
+      mode="default"
+      value={ formattedValue }
       onValueChange={ handleValueChange }
-      loading={ isLoading }
       size="sm"
+      w="full"
       positioning={{
         placement: 'bottom-start',
         sameWidth: true,
@@ -156,8 +129,8 @@ const ZetaChainAddressFilter = ({
     setCurrentValue(prev => [ ...prev, { address: '' } ]);
   }, []);
 
-  const handleChainChange = React.useCallback((chains: Array<string>) => {
-    setCurrentChainValue(chains);
+  const handleChainChange = React.useCallback(({ value }: { value: Array<string> }) => {
+    setCurrentChainValue(value);
   }, []);
 
   const onReset = React.useCallback(() => {
@@ -198,10 +171,10 @@ const ZetaChainAddressFilter = ({
     >
       <VStack gap={ 3 } align="stretch">
         <ChainSelect
-          selectedChains={ currentChainValue }
-          onChainChange={ handleChainChange }
-          chains={ chains }
-          isLoading={ isChainsLoading }
+          value={ currentChainValue }
+          onValueChange={ handleChainChange }
+          chainsConfig={ chains }
+          loading={ isChainsLoading }
         />
         <VStack gap={ 2 } align="stretch">
           { currentValue.map((item, index) => (
diff --git a/ui/zetaChain/filters/ZetaChainFilterTags.tsx b/ui/zetaChain/filters/ZetaChainFilterTags.tsx
index c026d3d63c..b74fe17f67 100644
--- a/ui/zetaChain/filters/ZetaChainFilterTags.tsx
+++ b/ui/zetaChain/filters/ZetaChainFilterTags.tsx
@@ -73,8 +73,8 @@ const ZetaChainFilterTags = ({ filters, onClearFilter, onClearAll }: Props) => {
   const sourceChainIds = filters.source_chain_id ? castArray(filters.source_chain_id) : [];
   if (sourceChainIds.length > 0) {
     const chainNames = sourceChainIds.map(chainId => {
-      const chain = chains.find(c => c.chain_id.toString() === chainId);
-      return chain?.chain_name || `Chain ${ chainId }`;
+      const chain = chains.find(c => c.id.toString() === chainId);
+      return chain?.name;
     });
     filterTags.push({
       key: 'source_chain_id',
@@ -97,8 +97,8 @@ const ZetaChainFilterTags = ({ filters, onClearFilter, onClearAll }: Props) => {
   const targetChainIds = filters.target_chain_id ? castArray(filters.target_chain_id) : [];
   if (targetChainIds.length > 0) {
     const chainNames = targetChainIds.map(chainId => {
-      const chain = chains.find(c => c.chain_id.toString() === chainId);
-      return chain?.chain_name || `Chain ${ chainId }`;
+      const chain = chains.find(c => c.id.toString() === chainId);
+      return chain?.name;
     });
     filterTags.push({
       key: 'target_chain_id',
diff --git a/ui/zetaChain/useZetaChainConfig.ts b/ui/zetaChain/useZetaChainConfig.ts
index f3ea4f0f29..ee5c6f761f 100644
--- a/ui/zetaChain/useZetaChainConfig.ts
+++ b/ui/zetaChain/useZetaChainConfig.ts
@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
-import type { CrossChainInfo } from 'types/client/crossChainInfo';
+import type { ZetaChainChainsConfigEnv, ZetaChainExternalChainConfig } from 'types/client/zetaChain';
 
 import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
@@ -12,9 +12,23 @@ const zetachainFeature = config.features.zetachain;
 export default function useZetaChainConfig() {
 
   const fetch = useFetch();
-  const { isPending, data } = useQuery<unknown, ResourceError<unknown>, Array<CrossChainInfo>>({
+  const { isPending, data } = useQuery<Array<ZetaChainChainsConfigEnv>, ResourceError<unknown>, Array<ZetaChainExternalChainConfig>>({
     queryKey: [ 'zetachain-config' ],
-    queryFn: async() => fetch(zetachainFeature.isEnabled ? zetachainFeature.chainsConfigUrl : '', undefined, { resource: 'zetachain-config' }),
+    queryFn: async() => fetch(
+      zetachainFeature.isEnabled ? zetachainFeature.chainsConfigUrl : '',
+      undefined,
+      { resource: 'zetachain-config' },
+    ) as Promise<Array<ZetaChainChainsConfigEnv>>,
+    select: (data) => {
+      return data.map((item) => ({
+        id: item.chain_id.toString(),
+        name: item.chain_name || `Chain ${ item.chain_id }`,
+        logo: item.chain_logo || undefined,
+        explorer_url: item.instance_url,
+        address_url_template: item.address_url_template,
+        tx_url_template: item.tx_url_template,
+      }));
+    },
     enabled: Boolean(zetachainFeature.isEnabled),
     staleTime: Infinity,
   });
diff --git a/yarn.lock b/yarn.lock
index 64fed2cc7f..c670cbcde8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1687,20 +1687,20 @@
   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/multichain-aggregator-types@1.6.0-alpha.2":
-  version "1.6.0-alpha.2"
-  resolved "https://registry.yarnpkg.com/@blockscout/multichain-aggregator-types/-/multichain-aggregator-types-1.6.0-alpha.2.tgz#13f07652029a5d3bdcf4a07207c22599e3a5b08a"
-  integrity sha512-/013NEL+kC+vx3qOWWRTMhVFFifMjFXSRTjUkxnJPYrgdBZbYSNI1kB8vqe7z7nshu6uedkpgNMW2HpiVKUvQw==
+"@blockscout/multichain-aggregator-types@1.6.3-alpha.3":
+  version "1.6.3-alpha.3"
+  resolved "https://registry.yarnpkg.com/@blockscout/multichain-aggregator-types/-/multichain-aggregator-types-1.6.3-alpha.3.tgz#76169e8276552130a1424cc9dc24bfb31bbb7e3d"
+  integrity sha512-i2w0M2BSFAnzwAOwQJwxN6hfqLZP44XiuZtlYGgmJtmRgakp6O0N1/nm+19CnyfQCrbBzUsDaVzKhcVjxBK/xw==
 
 "@blockscout/points-types@1.4.0-alpha.1":
   version "1.4.0-alpha.1"
   resolved "https://registry.yarnpkg.com/@blockscout/points-types/-/points-types-1.4.0-alpha.1.tgz#326885fcdda7c478440e4737efdfe105a29565fb"
   integrity sha512-DaN42ulieCLjoKyDqVc5jCuho/A8g1k7OUpOMnVgc7k8D1esSlCg+LclJ7vrcigdUXsJ5cx2nlCkySKUOfr4mA==
 
-"@blockscout/stats-types@2.10.0-alpha":
-  version "2.10.0-alpha"
-  resolved "https://registry.yarnpkg.com/@blockscout/stats-types/-/stats-types-2.10.0-alpha.tgz#eb0babf59ef01dfd0ff9b7700aebf15905aa4d6e"
-  integrity sha512-DzffwodJrn5k4oENtEAmexKwK9ERqibq9dn17sxfhcEBemcUPEiu9eQJbd+bepSyt+OumWlynUv4hEWxSBaFPA==
+"@blockscout/stats-types@2.11.1":
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/@blockscout/stats-types/-/stats-types-2.11.1.tgz#686e387ee4d8f21db1c800279cc9209ef915e0b5"
+  integrity sha512-Ti9RbekRfLR7dUnOp2dWU0VBu7uRkutnkFqKphvfxvbrY9fiXUJ/tT6Qg+OTNewK3RbuQ0O1ZPxbqMX5eRr0OQ==
 
 "@blockscout/tac-operation-lifecycle-types@0.0.1-alpha.6":
   version "0.0.1-alpha.6"