diff --git a/packages/apps-config/README.md b/packages/apps-config/README.md
index 9df50e9589..466ae0d6c3 100644
--- a/packages/apps-config/README.md
+++ b/packages/apps-config/README.md
@@ -22,4 +22,4 @@ The actual type definitions you should be familiar with, it is exactly the same
 1. Add your chain logo (if available) to either `ui/logos/chains` or `ui/logos/nodes` (the second is generally used)
 2. Run the image build command to generate an inline version via `yarn build:images`
 3. Add your chain to `endpoints/{production, productionRelay, testing, testingRelay*}` as applicable for your deployment
-3. The `uiColor` specifies the chain color, the `uiLogo` (importted from generated), specifies the specific logo
+3. The `ui.color` specifies the chain color, the `ui.logo` (importted from generated), specifies the specific logo
diff --git a/packages/apps-config/src/endpoints/development.ts b/packages/apps-config/src/endpoints/development.ts
index ccd05eb5d6..69363d976c 100644
--- a/packages/apps-config/src/endpoints/development.ts
+++ b/packages/apps-config/src/endpoints/development.ts
@@ -25,12 +25,14 @@ export function createCustom (t: TFunction): LinkOption[] {
         isHeader: true,
         text: t('rpc.dev.custom', 'Custom environment', { ns: 'apps-config' }),
         textBy: '',
+        ui: {},
         value: ''
       },
       {
         info: 'WS_URL',
         text: t('rpc.dev.custom.entry', 'Custom {{WS_URL}}', { ns: 'apps-config', replace: { WS_URL } }),
         textBy: WS_URL,
+        ui: {},
         value: WS_URL
       }
     ]
@@ -51,6 +53,7 @@ export function createOwn (t: TFunction): LinkOption[] {
         info: 'local',
         text: t('rpc.dev.custom.own', 'Custom', { ns: 'apps-config' }),
         textBy,
+        ui: {},
         value: textBy
       }));
     }
@@ -68,6 +71,7 @@ export function createDev (t: TFunction): LinkOption[] {
       info: 'local',
       text: t('rpc.dev.local', 'Local Node', { ns: 'apps-config' }),
       textBy: '127.0.0.1:9944',
+      ui: {},
       value: 'ws://127.0.0.1:9944'
     }
   ];
diff --git a/packages/apps-config/src/endpoints/index.ts b/packages/apps-config/src/endpoints/index.ts
index 230a3fee0d..8fb80c2657 100644
--- a/packages/apps-config/src/endpoints/index.ts
+++ b/packages/apps-config/src/endpoints/index.ts
@@ -23,6 +23,7 @@ export function createWsEndpoints (t: TFunction = defaultT, firstOnly = false, w
       isSpaced: true,
       text: t('rpc.header.polkadot.relay', 'Polkadot & parachains', { ns: 'apps-config' }),
       textBy: '',
+      ui: {},
       value: ''
     },
     ...expandEndpoints(t, [prodRelayPolkadot], firstOnly, withSort),
@@ -31,6 +32,7 @@ export function createWsEndpoints (t: TFunction = defaultT, firstOnly = false, w
       isHeader: true,
       text: t('rpc.header.kusama.relay', 'Kusama & parachains', { ns: 'apps-config' }),
       textBy: '',
+      ui: {},
       value: ''
     },
     ...expandEndpoints(t, [prodRelayKusama], firstOnly, withSort),
@@ -40,6 +42,7 @@ export function createWsEndpoints (t: TFunction = defaultT, firstOnly = false, w
       isSpaced: true,
       text: t('rpc.header.westend.relay', 'Test Westend & parachains', { ns: 'apps-config' }),
       textBy: '',
+      ui: {},
       value: ''
     },
     ...expandEndpoints(t, [testRelayWestend], firstOnly, withSort),
@@ -48,6 +51,7 @@ export function createWsEndpoints (t: TFunction = defaultT, firstOnly = false, w
       isHeader: true,
       text: t('rpc.header.rococo.relay', 'Test Rococo & parachains', { ns: 'apps-config' }),
       textBy: '',
+      ui: {},
       value: ''
     },
     ...expandEndpoints(t, [testRelayRococo], firstOnly, withSort),
@@ -57,6 +61,7 @@ export function createWsEndpoints (t: TFunction = defaultT, firstOnly = false, w
       isSpaced: true,
       text: t('rpc.header.live', 'Live networks', { ns: 'apps-config' }),
       textBy: '',
+      ui: {},
       value: ''
     },
     ...expandEndpoints(t, prodChains, firstOnly, withSort),
@@ -65,6 +70,7 @@ export function createWsEndpoints (t: TFunction = defaultT, firstOnly = false, w
       isHeader: true,
       text: t('rpc.header.test', 'Test networks', { ns: 'apps-config' }),
       textBy: '',
+      ui: {},
       value: ''
     },
     ...expandEndpoints(t, testChains, firstOnly, withSort),
@@ -75,6 +81,7 @@ export function createWsEndpoints (t: TFunction = defaultT, firstOnly = false, w
       isSpaced: true,
       text: t('rpc.header.dev', 'Development', { ns: 'apps-config' }),
       textBy: '',
+      ui: {},
       value: ''
     },
     ...createDev(t),
diff --git a/packages/apps-config/src/endpoints/production.ts b/packages/apps-config/src/endpoints/production.ts
index 70b48191f6..691da8fd8e 100644
--- a/packages/apps-config/src/endpoints/production.ts
+++ b/packages/apps-config/src/endpoints/production.ts
@@ -23,8 +23,10 @@ export const prodChains: EndpointOption[] = [
       '3dpass': 'wss://rpc2.3dpass.org'
     },
     text: '3DPass',
-    uiColor: '#323232',
-    uiLogo: chains3dpassPNG
+    ui: {
+      color: '#323232',
+      logo: chains3dpassPNG
+    }
   },
   {
     info: 'aleph',
@@ -32,8 +34,10 @@ export const prodChains: EndpointOption[] = [
       'Aleph Zero Foundation': 'wss://ws.azero.dev'
     },
     text: 'Aleph Zero',
-    uiColor: '#00CCAB',
-    uiLogo: chainsAlephSVG
+    ui: {
+      color: '#00CCAB',
+      logo: chainsAlephSVG
+    }
   },
   {
     info: 'Ares Odyssey',
@@ -41,8 +45,10 @@ export const prodChains: EndpointOption[] = [
       'Ares Protocol': 'wss://odyssey.aresprotocol.io'
     },
     text: 'Ares Odyssey',
-    uiColor: '#1295F0',
-    uiLogo: nodesAresOdysseySVG
+    ui: {
+      color: '#1295F0',
+      logo: nodesAresOdysseySVG
+    }
   },
   {
     info: 'automata',
@@ -51,8 +57,10 @@ export const prodChains: EndpointOption[] = [
       OnFinality: 'wss://automata.api.onfinality.io/public-ws'
     },
     text: 'Automata',
-    uiColor: '#EC7032',
-    uiLogo: nodesAutomataPNG
+    ui: {
+      color: '#EC7032',
+      logo: nodesAutomataPNG
+    }
   },
   {
     info: 'bittensor',
@@ -60,8 +68,10 @@ export const prodChains: EndpointOption[] = [
       'Opentensor Fdn (Archive)': 'wss://archivelb.nakamoto.opentensor.ai:9943'
     },
     text: 'Bittensor',
-    uiColor: '#252525',
-    uiLogo: chainsBittensorPNG
+    ui: {
+      color: '#252525',
+      logo: chainsBittensorPNG
+    }
   },
   {
     info: 'centrifuge',
@@ -69,8 +79,10 @@ export const prodChains: EndpointOption[] = [
       // Centrifuge: 'wss://fullnode.centrifuge.io' // https://github.com/polkadot-js/apps/issues/8012
     },
     text: 'Centrifuge Standalone [Archived]',
-    uiColor: '#fcc367',
-    uiLogo: nodesCentrifugePNG
+    ui: {
+      color: '#fcc367',
+      logo: nodesCentrifugePNG
+    }
   },
   {
     info: 'chainx',
@@ -78,8 +90,10 @@ export const prodChains: EndpointOption[] = [
       ChainX: 'wss://mainnet.chainx.org/ws'
     },
     text: 'ChainX',
-    uiColor: '#F6C94A',
-    uiLogo: nodesChainxSVG
+    ui: {
+      color: '#F6C94A',
+      logo: nodesChainxSVG
+    }
   },
   {
     info: 'competitors-club',
@@ -87,8 +101,10 @@ export const prodChains: EndpointOption[] = [
       // 'Competitors Club': 'wss://node0.competitors.club/wss' // https://github.com/polkadot-js/apps/issues/8263
     },
     text: 'Competitors Club',
-    uiColor: '#213830',
-    uiLogo: chainsCompetitorsClubPNG
+    ui: {
+      color: '#213830',
+      logo: chainsCompetitorsClubPNG
+    }
   },
   {
     info: 'creditcoin',
@@ -96,8 +112,10 @@ export const prodChains: EndpointOption[] = [
       'Creditcoin Foundation': 'wss://rpc.mainnet.creditcoin.network/ws'
     },
     text: 'Creditcoin',
-    uiColor: '#2D353F',
-    uiLogo: chainsCreditcoinPNG
+    ui: {
+      color: '#2D353F',
+      logo: chainsCreditcoinPNG
+    }
   },
   {
     info: 'crown-sterling',
@@ -105,8 +123,10 @@ export const prodChains: EndpointOption[] = [
       'Crown Sterling': 'wss://blockchain.crownsterling.io'
     },
     text: 'Crown Sterling',
-    uiColor: '#13264b',
-    uiLogo: chainsCrownSterlingPNG
+    ui: {
+      color: '#13264b',
+      logo: chainsCrownSterlingPNG
+    }
   },
   {
     info: 'crust',
@@ -115,8 +135,10 @@ export const prodChains: EndpointOption[] = [
       OnFinality: 'wss://crust.api.onfinality.io/public-ws'
     },
     text: 'Crust Network',
-    uiColor: '#ff8812',
-    uiLogo: nodesCrustSVG
+    ui: {
+      color: '#ff8812',
+      logo: nodesCrustSVG
+    }
   },
   {
     info: 'darwinia',
@@ -125,8 +147,10 @@ export const prodChains: EndpointOption[] = [
       Dwellir: 'wss://darwinia-rpc.dwellir.com'
     },
     text: 'Darwinia',
-    uiColor: '#FF0083',
-    uiLogo: nodesDarwiniaSVG
+    ui: {
+      color: '#FF0083',
+      logo: nodesDarwiniaSVG
+    }
   },
   {
     info: 'crab',
@@ -136,8 +160,10 @@ export const prodChains: EndpointOption[] = [
       OnFinality: 'wss://darwinia-crab.api.onfinality.io/public-ws'
     },
     text: 'Darwinia Crab',
-    uiColor: '#512DBC',
-    uiLogo: nodesCrabSVG
+    ui: {
+      color: '#512DBC',
+      logo: nodesCrabSVG
+    }
   },
   {
     info: 'debio',
@@ -145,8 +171,10 @@ export const prodChains: EndpointOption[] = [
       DeBio: 'wss://ws-rpc.debio.network'
     },
     text: 'DeBio',
-    uiColor: '#FF56E0',
-    uiLogo: chainsDebioSVG
+    ui: {
+      color: '#FF56E0',
+      logo: chainsDebioSVG
+    }
   },
   {
     info: 'dock-pos-mainnet',
@@ -154,7 +182,9 @@ export const prodChains: EndpointOption[] = [
       'Dock Association': 'wss://mainnet-node.dock.io'
     },
     text: 'Dock',
-    uiLogo: nodesDockMainnetPNG
+    ui: {
+      logo: nodesDockMainnetPNG
+    }
   },
   {
     info: 'edgeware',
@@ -164,8 +194,10 @@ export const prodChains: EndpointOption[] = [
       // OnFinality: 'wss://edgeware.api.onfinality.io/public-ws', // https://github.com/polkadot-js/apps/issues/8768
     },
     text: 'Edgeware',
-    uiColor: '#111111',
-    uiLogo: nodesEdgewareWhitePNG
+    ui: {
+      color: '#111111',
+      logo: nodesEdgewareWhitePNG
+    }
   },
   {
     info: 'efinity',
@@ -173,8 +205,10 @@ export const prodChains: EndpointOption[] = [
       // Efinity: 'wss://rpc.efinity.io' // https://github.com/polkadot-js/apps/pull/6761
     },
     text: 'Efinity',
-    uiColor: '#496ddb',
-    uiLogo: chainsEfinitySVG
+    ui: {
+      color: '#496ddb',
+      logo: chainsEfinitySVG
+    }
   },
   {
     info: 'equilibrium',
@@ -182,8 +216,10 @@ export const prodChains: EndpointOption[] = [
       // Equilibrium: 'wss://node.equilibrium.io' // https://github.com/polkadot-js/apps/issues/7219
     },
     text: 'Equilibrium',
-    uiColor: '#1792ff',
-    uiLogo: chainsEquilibriumSVG
+    ui: {
+      color: '#1792ff',
+      logo: chainsEquilibriumSVG
+    }
   },
   {
     info: 'genshiro',
@@ -191,8 +227,10 @@ export const prodChains: EndpointOption[] = [
       Equilibrium: 'wss://node.genshiro.io'
     },
     text: 'Genshiro',
-    uiColor: '#e8662d',
-    uiLogo: chainsGenshiroSVG
+    ui: {
+      color: '#e8662d',
+      logo: chainsGenshiroSVG
+    }
   },
   {
     info: 'hanonycash',
@@ -200,8 +238,10 @@ export const prodChains: EndpointOption[] = [
       // Hanonycash: 'wss://rpc.hanonycash.com' // https://github.com/polkadot-js/apps/runs/2755409009?check_suite_focus=true
     },
     text: 'Hanonycash',
-    uiColor: '#0099CC',
-    uiLogo: nodesHanonycashSVG
+    ui: {
+      color: '#0099CC',
+      logo: nodesHanonycashSVG
+    }
   },
   {
     info: 'joystream',
@@ -209,8 +249,10 @@ export const prodChains: EndpointOption[] = [
       Jsgenesis: 'wss://rpc.joystream.org'
     },
     text: 'Joystream',
-    uiColor: '#4038FF',
-    uiLogo: nodesJoystreamSVG
+    ui: {
+      color: '#4038FF',
+      logo: nodesJoystreamSVG
+    }
   },
   {
     info: 'kulupu',
@@ -218,8 +260,10 @@ export const prodChains: EndpointOption[] = [
       Kulupu: 'wss://rpc.kulupu.corepaper.org/ws'
     },
     text: 'Kulupu',
-    uiColor: '#003366',
-    uiLogo: nodesKulupuSVG
+    ui: {
+      color: '#003366',
+      logo: nodesKulupuSVG
+    }
   },
   {
     info: 'kusari',
@@ -227,8 +271,10 @@ export const prodChains: EndpointOption[] = [
       Swapdex: 'wss://ws.kusari.network'
     },
     text: 'Kusari',
-    uiColor: '#b8860b',
-    uiLogo: nodesKusariSVG
+    ui: {
+      color: '#b8860b',
+      logo: nodesKusariSVG
+    }
   },
   {
     info: 'logion',
@@ -236,8 +282,10 @@ export const prodChains: EndpointOption[] = [
       Logion: 'wss://rpc01.logion.network'
     },
     text: 'logion Standalone',
-    uiColor: 'rgb(21, 38, 101)',
-    uiLogo: chainsLogionPNG
+    ui: {
+      color: 'rgb(21, 38, 101)',
+      logo: chainsLogionPNG
+    }
   },
   {
     info: 'mathchain',
@@ -246,8 +294,10 @@ export const prodChains: EndpointOption[] = [
       // 'MathWallet Backup': 'wss://mathchain-us.maiziqianbao.net/ws' // https://github.com/polkadot-js/apps/issues/8525
     },
     text: 'MathChain',
-    uiColor: '#000000',
-    uiLogo: nodesMathSVG
+    ui: {
+      color: '#000000',
+      logo: nodesMathSVG
+    }
   },
   {
     info: 'minix',
@@ -255,8 +305,10 @@ export const prodChains: EndpointOption[] = [
       // ChainX: 'wss://minichain-mainnet.coming.chat/ws' // https://github.com/polkadot-js/apps/issues/7182
     },
     text: 'MiniX',
-    uiColor: '#5152f7',
-    uiLogo: nodesMinixPNG
+    ui: {
+      color: '#5152f7',
+      logo: nodesMinixPNG
+    }
   },
   {
     info: 'myriad',
@@ -264,15 +316,18 @@ export const prodChains: EndpointOption[] = [
       Myriad: 'wss://ws-rpc.myriad.social'
     },
     text: 'Myriad',
-    uiColor: '#7342CC',
-    uiLogo: chainsMyriadSVG
+    ui: {
+      color: '#7342CC',
+      logo: chainsMyriadSVG
+    }
   },
   {
     info: 'neatcoin',
     providers: {
       Neatcoin: 'wss://rpc.neatcoin.org/ws'
     },
-    text: 'Neatcoin'
+    text: 'Neatcoin',
+    ui: {}
   },
   {
     info: 'nftmart',
@@ -280,7 +335,9 @@ export const prodChains: EndpointOption[] = [
       NFTMart: 'wss://mainnet.nftmart.io/rpc/ws'
     },
     text: 'NFTMart',
-    uiLogo: nodesNftmartPNG
+    ui: {
+      logo: nodesNftmartPNG
+    }
   },
   {
     info: 'nodle',
@@ -289,8 +346,10 @@ export const prodChains: EndpointOption[] = [
       // OnFinality: 'wss://nodle.api.onfinality.io/public-ws' // https://github.com/polkadot-js/apps/issues/8013
     },
     text: 'Nodle',
-    uiColor: '#1ab394',
-    uiLogo: nodesNodleSVG
+    ui: {
+      color: '#1ab394',
+      logo: nodesNodleSVG
+    }
   },
   {
     info: 'polkadex',
@@ -299,8 +358,10 @@ export const prodChains: EndpointOption[] = [
       'Polkadex Team': 'wss://mainnet.polkadex.trade'
     },
     text: 'Polkadex',
-    uiColor: '#7C30DD',
-    uiLogo: nodesPolkadexSVG
+    ui: {
+      color: '#7C30DD',
+      logo: nodesPolkadexSVG
+    }
   },
   {
     info: 'polymesh',
@@ -308,8 +369,10 @@ export const prodChains: EndpointOption[] = [
       Polymath: 'wss://mainnet-rpc.polymesh.network'
     },
     text: 'Polymesh Mainnet',
-    uiColor: '#1348e4',
-    uiLogo: nodesPolymeshSVG
+    ui: {
+      color: '#1348e4',
+      logo: nodesPolymeshSVG
+    }
   },
   {
     info: 'riochain',
@@ -317,8 +380,10 @@ export const prodChains: EndpointOption[] = [
       RioChain: 'wss://node.v1.riochain.io'
     },
     text: 'RioChain',
-    uiColor: 'rgb(77, 135, 246)',
-    uiLogo: nodesRiochainSVG
+    ui: {
+      color: 'rgb(77, 135, 246)',
+      logo: nodesRiochainSVG
+    }
   },
   {
     info: 'robonomics',
@@ -326,8 +391,10 @@ export const prodChains: EndpointOption[] = [
       // Airalab: 'wss://kusama.rpc.robonomics.network/' // https://github.com/polkadot-js/apps/pull/6761
     },
     text: 'Robonomics',
-    uiColor: '#2949d3',
-    uiLogo: nodesRobonomicsSVG
+    ui: {
+      color: '#2949d3',
+      logo: nodesRobonomicsSVG
+    }
   },
   {
     info: 'sherpax',
@@ -335,8 +402,10 @@ export const prodChains: EndpointOption[] = [
       ChainX: 'wss://mainnet.sherpax.io'
     },
     text: 'SherpaX',
-    uiColor: '#6bbee8',
-    uiLogo: nodesSherpaxPNG
+    ui: {
+      color: '#6bbee8',
+      logo: nodesSherpaxPNG
+    }
   },
   {
     info: 'sora-substrate',
@@ -347,8 +416,10 @@ export const prodChains: EndpointOption[] = [
       'SORA Parliament Ministry of Finance #3': 'wss://mof3.sora.org'
     },
     text: 'SORA',
-    uiColor: '#2D2926',
-    uiLogo: nodesSoraSubstrateSVG
+    ui: {
+      color: '#2D2926',
+      logo: nodesSoraSubstrateSVG
+    }
   },
   {
     info: 'spanner',
@@ -356,8 +427,10 @@ export const prodChains: EndpointOption[] = [
       // Spanner: 'wss://wss.spannerprotocol.com' // https://github.com/polkadot-js/apps/issues/6547
     },
     text: 'Spanner',
-    uiColor: '#EC3D3D',
-    uiLogo: chainsSpannerPNG
+    ui: {
+      color: '#EC3D3D',
+      logo: chainsSpannerPNG
+    }
   },
   {
     info: 'stafi',
@@ -366,8 +439,10 @@ export const prodChains: EndpointOption[] = [
       'Stafi Foundation': 'wss://mainnet-rpc.stafi.io'
     },
     text: 'Stafi',
-    uiColor: '#00F3AB',
-    uiLogo: nodesStafiPNG
+    ui: {
+      color: '#00F3AB',
+      logo: nodesStafiPNG
+    }
   },
   {
     info: 'subgame',
@@ -375,8 +450,10 @@ export const prodChains: EndpointOption[] = [
       SubGame: 'wss://mainnet.subgame.org/'
     },
     text: 'SubGame',
-    uiColor: '#EB027D',
-    uiLogo: nodesSubgameSVG
+    ui: {
+      color: '#EB027D',
+      logo: nodesSubgameSVG
+    }
   },
   {
     info: 'subsocial',
@@ -384,8 +461,10 @@ export const prodChains: EndpointOption[] = [
       // DappForce: 'wss://rpc.subsocial.network' // https://github.com/polkadot-js/apps/issues/8046
     },
     text: 'Subsocial',
-    uiColor: '#b9018c',
-    uiLogo: nodesSubsocialSVG
+    ui: {
+      color: '#b9018c',
+      logo: nodesSubsocialSVG
+    }
   },
   {
     info: 'swapdex',
@@ -393,8 +472,10 @@ export const prodChains: EndpointOption[] = [
       Swapdex: 'wss://ws.swapdex.network'
     },
     text: 'Swapdex',
-    uiColor: '#E94082',
-    uiLogo: nodesSwapdexSVG
+    ui: {
+      color: '#E94082',
+      logo: nodesSwapdexSVG
+    }
   },
   {
     info: 'ternoa',
@@ -402,8 +483,10 @@ export const prodChains: EndpointOption[] = [
       CapsuleCorp: 'wss://mainnet.ternoa.network'
     },
     text: 'Ternoa',
-    uiColor: '#d622ff',
-    uiLogo: nodesTernoaSVG
+    ui: {
+      color: '#d622ff',
+      logo: nodesTernoaSVG
+    }
   },
   {
     info: 'thebifrost-mainnet',
@@ -412,8 +495,10 @@ export const prodChains: EndpointOption[] = [
       'Pilab #2': 'wss://public-02.mainnet.thebifrost.io/wss'
     },
     text: 'The Bifrost Mainnet',
-    uiColor: '#5a25f0',
-    uiLogo: nodesBifrostSVG
+    ui: {
+      color: '#5a25f0',
+      logo: nodesBifrostSVG
+    }
   },
   {
     info: 'uniarts',
@@ -421,8 +506,10 @@ export const prodChains: EndpointOption[] = [
       UniArts: 'wss://mainnet.uniarts.vip:9443'
     },
     text: 'UniArts',
-    uiColor: 'linear-gradient(150deg, #333ef7 0%, #55adff 100%)',
-    uiLogo: nodesUniartsPNG
+    ui: {
+      color: 'linear-gradient(150deg, #333ef7 0%, #55adff 100%)',
+      logo: nodesUniartsPNG
+    }
   },
   {
     info: 'unitnetwork',
@@ -430,8 +517,10 @@ export const prodChains: EndpointOption[] = [
       // UnitNetwork: 'wss://www.unitnode3.info:443'
     },
     text: 'UnitNetwork',
-    uiColor: '#a351ef',
-    uiLogo: nodesUnitnetworkPNG
+    ui: {
+      color: '#a351ef',
+      logo: nodesUnitnetworkPNG
+    }
   },
   {
     info: 'westlake',
@@ -439,7 +528,9 @@ export const prodChains: EndpointOption[] = [
       // DataHighway: 'wss://westlake.datahighway.com' // https://github.com/polkadot-js/apps/issues/7293
     },
     text: 'Westlake',
-    uiColor: 'linear-gradient(-90deg, #9400D3 0%, #5A5CA9 50%, #00BFFF 100%)',
-    uiLogo: nodesWestlakePNG
+    ui: {
+      color: 'linear-gradient(-90deg, #9400D3 0%, #5A5CA9 50%, #00BFFF 100%)',
+      logo: nodesWestlakePNG
+    }
   }
 ];
diff --git a/packages/apps-config/src/endpoints/productionRelayKusama.ts b/packages/apps-config/src/endpoints/productionRelayKusama.ts
index d41a0eadd2..a02da3d00e 100644
--- a/packages/apps-config/src/endpoints/productionRelayKusama.ts
+++ b/packages/apps-config/src/endpoints/productionRelayKusama.ts
@@ -24,8 +24,10 @@ export const prodParasKusama: EndpointOption[] = [
       'Aband DAO': 'wss://rpc-parachain.a.band'
     },
     text: 'Aband',
-    uiColor: '#7358ff',
-    uiLogo: chainsAbandPNG
+    ui: {
+      color: '#7358ff',
+      logo: chainsAbandPNG
+    }
   },
   {
     homepage: 'https://centrifuge.io/altair',
@@ -36,8 +38,10 @@ export const prodParasKusama: EndpointOption[] = [
       OnFinality: 'wss://altair.api.onfinality.io/public-ws'
     },
     text: 'Altair',
-    uiColor: '#ffb700',
-    uiLogo: chainsAltairSVG
+    ui: {
+      color: '#ffb700',
+      logo: chainsAltairSVG
+    }
   },
   {
     homepage: 'https://pendulumchain.org/amplitude',
@@ -48,8 +52,10 @@ export const prodParasKusama: EndpointOption[] = [
       PendulumChain: 'wss://rpc-amplitude.pendulumchain.tech'
     },
     text: 'Amplitude',
-    uiColor: '#5DEFA7',
-    uiLogo: chainsAmplitudeSVG
+    ui: {
+      color: '#5DEFA7',
+      logo: chainsAmplitudeSVG
+    }
   },
   {
     homepage: 'https://ajuna.io',
@@ -61,8 +67,10 @@ export const prodParasKusama: EndpointOption[] = [
       OnFinality: 'wss://bajun.api.onfinality.io/public-ws'
     },
     text: 'Bajun Network',
-    uiColor: '#161212',
-    uiLogo: nodesBajunPNG
+    ui: {
+      color: '#161212',
+      logo: nodesBajunPNG
+    }
   },
   {
     homepage: 'https://app.basilisk.cloud',
@@ -73,8 +81,10 @@ export const prodParasKusama: EndpointOption[] = [
       Dwellir: 'wss://basilisk-rpc.dwellir.com'
     },
     text: 'Basilisk',
-    uiColor: '#49E49F',
-    uiLogo: nodesBasiliskPNG
+    ui: {
+      color: '#49E49F',
+      logo: nodesBasiliskPNG
+    }
   },
   {
     homepage: 'https://ksm.vtoken.io/?ref=polkadotjs',
@@ -86,8 +96,10 @@ export const prodParasKusama: EndpointOption[] = [
       OnFinality: 'wss://bifrost-parachain.api.onfinality.io/public-ws'
     },
     text: 'Bifrost',
-    uiColor: '#5a25f0',
-    uiLogo: nodesBifrostSVG
+    ui: {
+      color: '#5a25f0',
+      logo: nodesBifrostSVG
+    }
   },
   {
     homepage: 'https://bit.country/?ref=polkadotjs',
@@ -97,8 +109,10 @@ export const prodParasKusama: EndpointOption[] = [
       OnFinality: 'wss://pioneer.api.onfinality.io/public-ws'
     },
     text: 'Bit.Country Pioneer',
-    uiColor: '#000000',
-    uiLogo: nodesBitcountryPNG
+    ui: {
+      color: '#000000',
+      logo: nodesBitcountryPNG
+    }
   },
   {
     homepage: 'https://www.calamari.network/',
@@ -108,8 +122,10 @@ export const prodParasKusama: EndpointOption[] = [
       'Manta Network': 'wss://ws.calamari.systems/'
     },
     text: 'Calamari',
-    uiColor: '#000000',
-    uiLogo: nodesCalamariPNG
+    ui: {
+      color: '#000000',
+      logo: nodesCalamariPNG
+    }
   },
   {
     homepage: 'https://crust.network/',
@@ -119,7 +135,9 @@ export const prodParasKusama: EndpointOption[] = [
       Crust: 'wss://rpc-shadow.crust.network/'
     },
     text: 'Crust Shadow',
-    uiLogo: nodesShadowSVG
+    ui: {
+      logo: nodesShadowSVG
+    }
   },
   {
     homepage: 'https://crust.network/',
@@ -131,7 +149,9 @@ export const prodParasKusama: EndpointOption[] = [
       // Crust: 'wss://rpc-shadow.crust.network/' // https://github.com/polkadot-js/apps/issues/8355
     },
     text: 'Crust Shadow 2',
-    uiLogo: nodesShadowSVG
+    ui: {
+      logo: nodesShadowSVG
+    }
   },
   {
     homepage: 'https://ipci.io',
@@ -141,7 +161,9 @@ export const prodParasKusama: EndpointOption[] = [
       Airalab: 'wss://kusama.rpc.ipci.io'
     },
     text: 'DAO IPCI',
-    uiLogo: nodesIpciSVG
+    ui: {
+      logo: nodesIpciSVG
+    }
   },
   {
     homepage: 'https://crab.network',
@@ -151,8 +173,10 @@ export const prodParasKusama: EndpointOption[] = [
       'Darwinia Network': 'wss://crab-parachain-rpc.darwinia.network/'
     },
     text: 'Darwinia Crab',
-    uiColor: '#512DBC',
-    uiLogo: nodesCrabSVG
+    ui: {
+      color: '#512DBC',
+      logo: nodesCrabSVG
+    }
   },
   {
     homepage: 'https://dorafactory.org/kusama/',
@@ -162,8 +186,10 @@ export const prodParasKusama: EndpointOption[] = [
       DORA: 'wss://kusama.dorafactory.org'
     },
     text: 'Dora Factory',
-    uiColor: '#FF761C',
-    uiLogo: chainsDorafactoryPNG
+    ui: {
+      color: '#FF761C',
+      logo: chainsDorafactoryPNG
+    }
   },
   {
     homepage: 'https://genshiro.equilibrium.io',
@@ -174,8 +200,10 @@ export const prodParasKusama: EndpointOption[] = [
       Equilibrium: 'wss://node.genshiro.io'
     },
     text: 'Genshiro',
-    uiColor: '#e8662d',
-    uiLogo: chainsGenshiroSVG
+    ui: {
+      color: '#e8662d',
+      logo: chainsGenshiroSVG
+    }
   },
   {
     homepage: 'https://genshiro.equilibrium.io',
@@ -186,8 +214,10 @@ export const prodParasKusama: EndpointOption[] = [
       Equilibrium: 'wss://node.genshiro.io'
     },
     text: 'Genshiro crowdloan 2',
-    uiColor: '#e8662d',
-    uiLogo: chainsGenshiroSVG
+    ui: {
+      color: '#e8662d',
+      logo: chainsGenshiroSVG
+    }
   },
   {
     homepage: 'https://gmordie.com',
@@ -202,8 +232,10 @@ export const prodParasKusama: EndpointOption[] = [
       'light client': 'light://substrate-connect/kusama/gm'
     },
     text: 'GM',
-    uiColor: '#f47b36',
-    uiLogo: chainsGmPNG
+    ui: {
+      color: '#f47b36',
+      logo: chainsGmPNG
+    }
   },
   {
     homepage: 'https://imbue.network',
@@ -213,8 +245,10 @@ export const prodParasKusama: EndpointOption[] = [
       'Imbue Network': 'wss://imbue-kusama.imbue.network'
     },
     text: 'Imbue Network',
-    uiColor: '#baff36',
-    uiLogo: nodesImbuePNG
+    ui: {
+      color: '#baff36',
+      logo: nodesImbuePNG
+    }
   },
   {
     homepage: 'https://integritee.network',
@@ -225,8 +259,10 @@ export const prodParasKusama: EndpointOption[] = [
       OnFinality: 'wss://integritee-kusama.api.onfinality.io/public-ws'
     },
     text: 'Integritee Network',
-    uiColor: '#658ea9',
-    uiLogo: nodesIntegriteeSVG
+    ui: {
+      color: '#658ea9',
+      logo: nodesIntegriteeSVG
+    }
   },
   {
     homepage: 'https://invarch.network/tinkernet',
@@ -238,8 +274,10 @@ export const prodParasKusama: EndpointOption[] = [
       'light client': 'light://substrate-connect/kusama/tinkernet'
     },
     text: 'InvArch Tinkernet',
-    uiColor: '#161616',
-    uiLogo: chainsTinkerPNG
+    ui: {
+      color: '#161616',
+      logo: chainsTinkerPNG
+    }
   },
   {
     homepage: 'https://kabocha.network',
@@ -249,8 +287,10 @@ export const prodParasKusama: EndpointOption[] = [
       JelliedOwl: 'wss://kabocha.jelliedowl.net'
     },
     text: 'Kabocha',
-    uiColor: 'repeating-radial-gradient(black, black 4px, yellow 5px)',
-    uiLogo: chainsKabochaSVG
+    ui: {
+      color: 'repeating-radial-gradient(black, black 4px, yellow 5px)',
+      logo: chainsKabochaSVG
+    }
   },
   {
     homepage: 'https://acala.network/karura/join-karura',
@@ -266,8 +306,10 @@ export const prodParasKusama: EndpointOption[] = [
       'Polkawallet 0': 'wss://karura.polkawallet.io'
     },
     text: 'Karura',
-    uiColor: '#ff4c3b',
-    uiLogo: chainsKaruraSVG
+    ui: {
+      color: '#ff4c3b',
+      logo: chainsKaruraSVG
+    }
   },
   {
     homepage: 'https://phala.network/',
@@ -280,8 +322,10 @@ export const prodParasKusama: EndpointOption[] = [
       Pinknode: 'wss://public-rpc.pinknode.io/khala'
     },
     text: 'Khala Network',
-    uiColor: '#03f3f3',
-    uiLogo: nodesKhalaSVG
+    ui: {
+      color: '#03f3f3',
+      logo: nodesKhalaSVG
+    }
   },
   {
     homepage: 'https://dico.io/',
@@ -292,8 +336,10 @@ export const prodParasKusama: EndpointOption[] = [
       // 'DICO Foundation 2': 'wss://rpc.api.kico.dico.io' // https://github.com/polkadot-js/apps/issues/8203
     },
     text: 'KICO',
-    uiColor: '#29B58D',
-    uiLogo: chainsKicoPNG
+    ui: {
+      color: '#29B58D',
+      logo: chainsKicoPNG
+    }
   },
   {
     homepage: 'https://dico.io/',
@@ -303,8 +349,10 @@ export const prodParasKusama: EndpointOption[] = [
       // 'DICO Foundation': 'wss://rpc.kico2.dico.io' // https://github.com/polkadot-js/apps/issues/8415
     },
     text: 'KICO 2',
-    uiColor: '#29B58D',
-    uiLogo: chainsKicoPNG
+    ui: {
+      color: '#29B58D',
+      logo: chainsKicoPNG
+    }
   },
   {
     homepage: 'https://kintsugi.interlay.io/',
@@ -315,8 +363,10 @@ export const prodParasKusama: EndpointOption[] = [
       OnFinality: 'wss://kintsugi.api.onfinality.io/public-ws'
     },
     text: 'Kintsugi BTC',
-    uiColor: '#1a0a2d',
-    uiLogo: chainsKintsugiPNG
+    ui: {
+      color: '#1a0a2d',
+      logo: chainsKintsugiPNG
+    }
   },
   {
     homepage: 'http://apron.network/',
@@ -327,8 +377,10 @@ export const prodParasKusama: EndpointOption[] = [
       Kpron: 'wss://kusama-kpron-rpc.apron.network/'
     },
     text: 'Kpron',
-    uiColor: 'linear-gradient(45deg, #0099F7 0%, #2E49EB 100%)',
-    uiLogo: nodesApronPNG
+    ui: {
+      color: 'linear-gradient(45deg, #0099F7 0%, #2E49EB 100%)',
+      logo: nodesApronPNG
+    }
   },
   {
     homepage: 'https://listen.io/',
@@ -339,8 +391,10 @@ export const prodParasKusama: EndpointOption[] = [
       'Listen Foundation 2': 'wss://wss.mainnet.listen.io'
     },
     text: 'Listen Network',
-    uiColor: '#FFAD0A',
-    uiLogo: chainsListenPNG
+    ui: {
+      color: '#FFAD0A',
+      logo: chainsListenPNG
+    }
   },
   {
     homepage: 'https://kusama-crowdloan.litentry.com',
@@ -351,8 +405,10 @@ export const prodParasKusama: EndpointOption[] = [
       Litentry: 'wss://rpc.litmus-parachain.litentry.io'
     },
     text: 'Litmus',
-    uiColor: '#6822fb',
-    uiLogo: nodesLitmusPNG
+    ui: {
+      color: '#6822fb',
+      logo: nodesLitmusPNG
+    }
   },
   {
     // https://github.com/polkadot-js/apps/issues/5888
@@ -364,7 +420,9 @@ export const prodParasKusama: EndpointOption[] = [
       LoomNetwork: 'wss://kusama.dappchains.com'
     },
     text: 'Loom Network',
-    uiLogo: nodesLoomNetworkPNG
+    ui: {
+      logo: nodesLoomNetworkPNG
+    }
   },
   {
     homepage: 'https://luhn.network/',
@@ -374,8 +432,10 @@ export const prodParasKusama: EndpointOption[] = [
       'Hashed Systems': 'wss://c1.luhn.network'
     },
     text: 'Luhn Network',
-    uiColor: '#2F8E85',
-    uiLogo: nodesLuhnPNG
+    ui: {
+      color: '#2F8E85',
+      logo: nodesLuhnPNG
+    }
   },
   {
     homepage: 'https://mangata.finance',
@@ -386,8 +446,10 @@ export const prodParasKusama: EndpointOption[] = [
       OnFinality: 'wss://mangata-x.api.onfinality.io/public-ws'
     },
     text: 'Mangata',
-    uiColor: '#030408',
-    uiLogo: chainsMangataPNG
+    ui: {
+      color: '#030408',
+      logo: chainsMangataPNG
+    }
   },
   {
     homepage: 'https://www.aresprotocol.io/mars',
@@ -397,8 +459,10 @@ export const prodParasKusama: EndpointOption[] = [
       // AresProtocol: 'wss://wss.mars.aresprotocol.io' // https://github.com/polkadot-js/apps/issues/8937
     },
     text: 'Mars',
-    uiColor: '#E56239',
-    uiLogo: nodesAresMarsPNG
+    ui: {
+      color: '#E56239',
+      logo: nodesAresMarsPNG
+    }
   },
   {
     homepage: 'https://moonbeam.network/networks/moonriver/',
@@ -411,8 +475,10 @@ export const prodParasKusama: EndpointOption[] = [
       UnitedBloc: 'wss://moonriver.unitedbloc.com:2001'
     },
     text: 'Moonriver',
-    uiColor: '#0E132E',
-    uiLogo: nodesMoonriverSVG
+    ui: {
+      color: '#0E132E',
+      logo: nodesMoonriverSVG
+    }
   },
   {
     homepage: 'https://parallel.fi',
@@ -424,8 +490,10 @@ export const prodParasKusama: EndpointOption[] = [
       Parallel: 'wss://heiko-rpc.parallel.fi'
     },
     text: 'Parallel Heiko',
-    uiColor: '#42d5de',
-    uiLogo: chainsParallelSVG
+    ui: {
+      color: '#42d5de',
+      logo: chainsParallelSVG
+    }
   },
   {
     homepage: 'https://parallel.fi',
@@ -434,8 +502,10 @@ export const prodParasKusama: EndpointOption[] = [
     paraId: 2126,
     providers: {},
     text: 'Parallel Heiko 2',
-    uiColor: '#42d5de',
-    uiLogo: chainsParallelSVG
+    ui: {
+      color: '#42d5de',
+      logo: chainsParallelSVG
+    }
   },
   {
     homepage: 'https://picasso.composable.finance/',
@@ -445,8 +515,10 @@ export const prodParasKusama: EndpointOption[] = [
       Composable: 'wss://rpc.composablenodes.tech'
     },
     text: 'Picasso',
-    uiColor: '#000000',
-    uiLogo: nodesPicassoPNG
+    ui: {
+      color: '#000000',
+      logo: nodesPicassoPNG
+    }
   },
   {
     homepage: 'https://kylin.network/',
@@ -457,8 +529,10 @@ export const prodParasKusama: EndpointOption[] = [
       OnFinality: 'wss://pichiu.api.onfinality.io/public-ws' // https://github.com/polkadot-js/apps/issues/8867, reenabled for PolkadotJS
     },
     text: 'Pichiu',
-    uiColor: '#ed007e',
-    uiLogo: nodesPichiuPNG
+    ui: {
+      color: '#ed007e',
+      logo: nodesPichiuPNG
+    }
   },
   {
     homepage: 'https://polkasmith.polkafoundry.com/',
@@ -468,8 +542,10 @@ export const prodParasKusama: EndpointOption[] = [
       // PolkaSmith: 'wss://wss-polkasmith.polkafoundry.com' // https://github.com/polkadot-js/apps/issues/6595
     },
     text: 'PolkaSmith by PolkaFoundry',
-    uiColor: '#0DDDFB',
-    uiLogo: nodesPolkasmithSVG
+    ui: {
+      color: '#0DDDFB',
+      logo: nodesPolkasmithSVG
+    }
   },
   {
     homepage: 'https://unique.network/',
@@ -482,8 +558,10 @@ export const prodParasKusama: EndpointOption[] = [
       'Unique Europe': 'wss://eu-ws-quartz.unique.network'
     },
     text: 'QUARTZ by UNIQUE',
-    uiColor: '#FF4D6A',
-    uiLogo: nodesQuartzPNG
+    ui: {
+      color: '#FF4D6A',
+      logo: nodesQuartzPNG
+    }
   },
   {
     homepage: 'https://riodefi.com',
@@ -493,8 +571,10 @@ export const prodParasKusama: EndpointOption[] = [
       RioProtocol: 'wss://rio-kusama.riocorenetwork.com'
     },
     text: 'RioDeFi',
-    uiColor: '#4E7AED',
-    uiLogo: chainsRiodefiPNG
+    ui: {
+      color: '#4E7AED',
+      logo: chainsRiodefiPNG
+    }
   },
   {
     homepage: 'http://robonomics.network/',
@@ -507,8 +587,10 @@ export const prodParasKusama: EndpointOption[] = [
       Samsara: 'wss://robonomics.0xsamsara.com'
     },
     text: 'Robonomics',
-    uiColor: '#2949d3',
-    uiLogo: nodesRobonomicsSVG
+    ui: {
+      color: '#2949d3',
+      logo: nodesRobonomicsSVG
+    }
   },
   {
     homepage: 'http://robonomics.network/',
@@ -522,8 +604,10 @@ export const prodParasKusama: EndpointOption[] = [
       Samsara: 'wss://robonomics.0xsamsara.com'
     },
     text: 'Robonomics 2',
-    uiColor: '#2949d3',
-    uiLogo: nodesRobonomicsSVG
+    ui: {
+      color: '#2949d3',
+      logo: nodesRobonomicsSVG
+    }
   },
   {
     homepage: 'https://clover.finance/',
@@ -534,8 +618,10 @@ export const prodParasKusama: EndpointOption[] = [
       Clover: 'wss://api-sakura.clover.finance'
     },
     text: 'Sakura',
-    uiColor: '#ff5995',
-    uiLogo: nodesSakuraSVG
+    ui: {
+      color: '#ff5995',
+      logo: nodesSakuraSVG
+    }
   },
   {
     homepage: 'https://shiden.astar.network/',
@@ -550,8 +636,10 @@ export const prodParasKusama: EndpointOption[] = [
       'light client': 'light://substrate-connect/kusama/shiden'
     },
     text: 'Shiden',
-    uiColor: '#5923B2',
-    uiLogo: chainsShidenPNG
+    ui: {
+      color: '#5923B2',
+      logo: chainsShidenPNG
+    }
   },
   {
     homepage: 'https://shiden.astar.network/',
@@ -562,8 +650,10 @@ export const prodParasKusama: EndpointOption[] = [
       StakeTechnologies: 'wss://rpc.shiden.astar.network'
     },
     text: 'Shiden Crowdloan 2',
-    uiColor: '#5923B2',
-    uiLogo: chainsShidenPNG
+    ui: {
+      color: '#5923B2',
+      logo: chainsShidenPNG
+    }
   },
   {
     homepage: 'https://icenetwork.io/snow',
@@ -574,7 +664,9 @@ export const prodParasKusama: EndpointOption[] = [
       IceNetwork: 'wss://snow-rpc.icenetwork.io'
     },
     text: 'SNOW Network',
-    uiLogo: nodesSnowPNG
+    ui: {
+      logo: nodesSnowPNG
+    }
   },
   {
     homepage: 'https://sora.org/',
@@ -584,8 +676,10 @@ export const prodParasKusama: EndpointOption[] = [
       Soramitsu: 'wss://ws.parachain-collator-1.c1.sora2.soramitsu.co.jp'
     },
     text: 'SORA',
-    uiColor: '#2D2926',
-    uiLogo: nodesSoraSubstrateSVG
+    ui: {
+      color: '#2D2926',
+      logo: nodesSoraSubstrateSVG
+    }
   },
   {
     homepage: 'http://subgame.org/',
@@ -596,8 +690,10 @@ export const prodParasKusama: EndpointOption[] = [
       SubGame: 'wss://gamma.subgame.org/'
     },
     text: 'SubGame Gamma',
-    uiColor: '#EB027D',
-    uiLogo: nodesSubgameSVG
+    ui: {
+      color: '#EB027D',
+      logo: nodesSubgameSVG
+    }
   },
   {
     homepage: 'https://subsocial.network/',
@@ -607,8 +703,10 @@ export const prodParasKusama: EndpointOption[] = [
       'Dappforce 1': 'wss://para.subsocial.network'
     },
     text: 'SubsocialX',
-    uiColor: '#69058C',
-    uiLogo: nodesSubsocialXSVG
+    ui: {
+      color: '#69058C',
+      logo: nodesSubsocialXSVG
+    }
   },
   {
     homepage: 'https://zero.io',
@@ -618,8 +716,10 @@ export const prodParasKusama: EndpointOption[] = [
       ZeroNetwork: 'wss://rpc-1.kusama.node.zero.io'
     },
     text: 'subzero',
-    uiColor: '#000000',
-    uiLogo: nodesZeroSVG
+    ui: {
+      color: '#000000',
+      logo: nodesZeroSVG
+    }
   },
   {
     homepage: 'https://www.datahighway.com/',
@@ -629,8 +729,10 @@ export const prodParasKusama: EndpointOption[] = [
       DataHighway: 'wss://tanganika.datahighway.com'
     },
     text: 'Tanganika',
-    uiColor: 'linear-gradient(-90deg, #9400D3 0%, #5A5CA9 50%, #00BFFF 100%)',
-    uiLogo: chainsTanganikaPNG
+    ui: {
+      color: 'linear-gradient(-90deg, #9400D3 0%, #5A5CA9 50%, #00BFFF 100%)',
+      logo: chainsTanganikaPNG
+    }
   },
   {
     homepage: 'https://trustbase.network/',
@@ -639,8 +741,10 @@ export const prodParasKusama: EndpointOption[] = [
     paraId: 2078,
     providers: {},
     text: 'TrustBase',
-    uiColor: '#ff43aa',
-    uiLogo: nodesTrustbasePNG
+    ui: {
+      color: '#ff43aa',
+      logo: nodesTrustbasePNG
+    }
   },
   {
     homepage: 'https://oak.tech',
@@ -651,8 +755,10 @@ export const prodParasKusama: EndpointOption[] = [
       OAK: 'wss://rpc.turing.oak.tech'
     },
     text: 'Turing Network',
-    uiColor: '#A8278C',
-    uiLogo: chainsTuringPNG
+    ui: {
+      color: '#A8278C',
+      logo: chainsTuringPNG
+    }
   },
   {
     homepage: 'https://standard.tech/',
@@ -662,8 +768,10 @@ export const prodParasKusama: EndpointOption[] = [
       // 'Standard Protocol': 'wss://rpc.kusama.standard.tech' // https://github.com/polkadot-js/apps/issues/8525
     },
     text: 'Unorthodox',
-    uiColor: 'radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(42,244,187,1) 35%, rgba(10,10,10,1) 100%)',
-    uiLogo: chainsUnorthodoxPNG
+    ui: {
+      color: 'radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(42,244,187,1) 35%, rgba(10,10,10,1) 100%)',
+      logo: chainsUnorthodoxPNG
+    }
   },
   {
     homepage: 'https://zeitgeist.pm',
@@ -675,8 +783,10 @@ export const prodParasKusama: EndpointOption[] = [
       OnFinality: 'wss://zeitgeist.api.onfinality.io/public-ws'
     },
     text: 'Zeitgeist',
-    uiColor: 'linear-gradient(180deg, rgba(32,90,172,1) 0%, rgba(26,72,138,1) 50%, rgba(13,36,69,1) 100%)',
-    uiLogo: nodesZeitgeistPNG
+    ui: {
+      color: 'linear-gradient(180deg, rgba(32,90,172,1) 0%, rgba(26,72,138,1) 50%, rgba(13,36,69,1) 100%)',
+      logo: nodesZeitgeistPNG
+    }
   }
 ];
 
@@ -694,8 +804,10 @@ export const prodParasKusamaCommon: EndpointOption[] = [
     },
     teleport: [-1],
     text: 'Statemine',
-    uiColor: '#113911',
-    uiLogo: nodesStatemineSVG
+    ui: {
+      color: '#113911',
+      logo: nodesStatemineSVG
+    }
   },
   {
     homepage: 'https://encointer.org/',
@@ -707,8 +819,10 @@ export const prodParasKusamaCommon: EndpointOption[] = [
     },
     teleport: [-1],
     text: 'Encointer Network',
-    uiColor: '#0000cc',
-    uiLogo: nodesEncointerBlueSVG
+    ui: {
+      color: '#0000cc',
+      logo: nodesEncointerBlueSVG
+    }
   },
   {
     info: 'kusamaBridgeHub',
@@ -717,7 +831,9 @@ export const prodParasKusamaCommon: EndpointOption[] = [
       Parity: 'wss://kusama-bridge-hub-rpc.polkadot.io'
     },
     text: 'BridgeHub',
-    uiLogo: nodesBridgeHubBlackSVG
+    ui: {
+      logo: nodesBridgeHubBlackSVG
+    }
   }
 ];
 
@@ -743,6 +859,8 @@ export const prodRelayKusama: EndpointOption = {
   },
   teleport: getTeleports(prodParasKusamaCommon),
   text: 'Kusama',
-  uiColor: '#000',
-  uiLogo: chainsKusamaSVG
+  ui: {
+    color: '#000',
+    logo: chainsKusamaSVG
+  }
 };
diff --git a/packages/apps-config/src/endpoints/productionRelayPolkadot.ts b/packages/apps-config/src/endpoints/productionRelayPolkadot.ts
index 34b10421c1..c50451645e 100644
--- a/packages/apps-config/src/endpoints/productionRelayPolkadot.ts
+++ b/packages/apps-config/src/endpoints/productionRelayPolkadot.ts
@@ -31,8 +31,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       'Polkawallet 0': 'wss://acala.polkawallet.io'
     },
     text: 'Acala',
-    uiColor: '#645AFF',
-    uiLogo: chainsAcalaSVG
+    ui: {
+      color: '#645AFF',
+      logo: chainsAcalaSVG
+    }
   },
   {
     homepage: 'https://ajuna.io',
@@ -43,8 +45,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       RadiumBlock: 'wss://ajuna.public.curie.radiumblock.co/ws'
     },
     text: 'Ajuna Network',
-    uiColor: '#161212',
-    uiLogo: nodesAjunaPNG
+    ui: {
+      color: '#161212',
+      logo: nodesAjunaPNG
+    }
   },
   {
     homepage: 'https://www.aresprotocol.io/',
@@ -54,8 +58,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       AresProtocol: 'wss://wss.odyssey.aresprotocol.io'
     },
     text: 'Ares Odyssey',
-    uiColor: '#1295F0',
-    uiLogo: nodesAresOdysseySVG
+    ui: {
+      color: '#1295F0',
+      logo: nodesAresOdysseySVG
+    }
   },
   {
     homepage: 'https://astar.network',
@@ -72,8 +78,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       'light client': 'light://substrate-connect/polkadot/astar'
     },
     text: 'Astar',
-    uiColor: '#1b6dc1d9',
-    uiLogo: chainsAstarPNG
+    ui: {
+      color: '#1b6dc1d9',
+      logo: chainsAstarPNG
+    }
   },
   {
     homepage: 'https://www.aventus.io/',
@@ -81,7 +89,9 @@ export const prodParasPolkadot: EndpointOption[] = [
     paraId: 2056,
     providers: {},
     text: 'Aventus',
-    uiLogo: nodesAventusSVG
+    ui: {
+      logo: nodesAventusSVG
+    }
   },
   {
     homepage: 'https://crowdloan.bifrost.app',
@@ -92,8 +102,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       OnFinality: 'wss://bifrost-polkadot.api.onfinality.io/public-ws'
     },
     text: 'Bifrost',
-    uiColor: '#5a25f0',
-    uiLogo: nodesBifrostSVG
+    ui: {
+      color: '#5a25f0',
+      logo: nodesBifrostSVG
+    }
   },
   {
     homepage: 'https://www.bitgreen.org',
@@ -103,8 +115,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       Bitgreen: 'wss://mainnet.bitgreen.org'
     },
     text: 'Bitgreen',
-    uiColor: '#224851',
-    uiLogo: chainsBitgreenPNG
+    ui: {
+      color: '#224851',
+      logo: chainsBitgreenPNG
+    }
   },
   {
     homepage: 'https://centrifuge.io',
@@ -115,8 +129,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       OnFinality: 'wss://centrifuge-parachain.api.onfinality.io/public-ws'
     },
     text: 'Centrifuge',
-    uiColor: '#fcc367',
-    uiLogo: nodesCentrifugePNG
+    ui: {
+      color: '#fcc367',
+      logo: nodesCentrifugePNG
+    }
   },
   {
     homepage: 'https://clover.finance',
@@ -127,8 +143,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       OnFinality: 'wss://clover.api.onfinality.io/public-ws' // https://github.com/polkadot-js/apps/issues/8355, then enabled in https://github.com/polkadot-js/apps/pull/8413, then broken in https://github.com/polkadot-js/apps/issues/8421, renenabled for PolkadotJS
     },
     text: 'Clover',
-    uiColor: 'linear-gradient(to right, #52ad75, #7cc773)',
-    uiLogo: nodesCloverSVG
+    ui: {
+      color: 'linear-gradient(to right, #52ad75, #7cc773)',
+      logo: nodesCloverSVG
+    }
   },
   {
     homepage: 'http://www.coinversation.io/',
@@ -138,8 +156,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       // Coinversation: 'wss://rpc.coinversation.io/' // https://github.com/polkadot-js/apps/issues/6635
     },
     text: 'Coinversation',
-    uiColor: '#e6017a',
-    uiLogo: chainsCoinversationPNG
+    ui: {
+      color: '#e6017a',
+      logo: chainsCoinversationPNG
+    }
   },
   {
     homepage: 'https://composable.finance/',
@@ -150,8 +170,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       OnFinality: 'wss://composable.api.onfinality.io/public-ws'
     },
     text: 'Composable Finance',
-    uiColor: '#C90E8A',
-    uiLogo: chainsComposableFinancePNG
+    ui: {
+      color: '#C90E8A',
+      logo: chainsComposableFinancePNG
+    }
   },
   {
     homepage: 'https://crust.network',
@@ -161,7 +183,9 @@ export const prodParasPolkadot: EndpointOption[] = [
       Crust: 'wss://crust-parachain.crustapps.net'
     },
     text: 'Crust',
-    uiLogo: nodesCrustParachainSVG
+    ui: {
+      logo: nodesCrustParachainSVG
+    }
   },
   {
     homepage: 'https://darwinia.network/',
@@ -171,8 +195,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       'Darwinia Network': 'wss://parachain-rpc.darwinia.network'
     },
     text: 'Darwinia',
-    uiColor: '#FF0083',
-    uiLogo: nodesDarwiniaSVG
+    ui: {
+      color: '#FF0083',
+      logo: nodesDarwiniaSVG
+    }
   },
   {
     homepage: 'https://darwinia.network/',
@@ -182,8 +208,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       // 'Darwinia Network': 'wss://parachain-rpc.darwinia.network' // https://github.com/polkadot-js/apps/issues/6530
     },
     text: 'Darwinia Backup',
-    uiColor: '#FF0083',
-    uiLogo: nodesDarwiniaSVG
+    ui: {
+      color: '#FF0083',
+      logo: nodesDarwiniaSVG
+    }
   },
   {
     homepage: 'https://efinity.io',
@@ -195,8 +223,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       OnFinality: 'wss://efinity.api.onfinality.io/public-ws'
     },
     text: 'Efinity',
-    uiColor: '#496ddb',
-    uiLogo: nodesEfinitySVG
+    ui: {
+      color: '#496ddb',
+      logo: nodesEfinitySVG
+    }
   },
   {
     homepage: 'https://equilibrium.io/',
@@ -207,8 +237,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       Equilibrium: 'wss://node.pol.equilibrium.io/'
     },
     text: 'Equilibrium',
-    uiColor: '#1792ff',
-    uiLogo: chainsEquilibriumSVG
+    ui: {
+      color: '#1792ff',
+      logo: chainsEquilibriumSVG
+    }
   },
   {
     homepage: 'https://frequency.xyz',
@@ -219,8 +251,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       'Frequency 1': 'wss://1.rpc.frequency.xyz'
     },
     text: 'Frequency',
-    uiColor: '#4b64ff',
-    uiLogo: chainsFrequencySVG
+    ui: {
+      color: '#4b64ff',
+      logo: chainsFrequencySVG
+    }
   },
   {
     homepage: 'https://geminis.network/',
@@ -231,7 +265,9 @@ export const prodParasPolkadot: EndpointOption[] = [
       Geminis: 'wss://rpc.geminis.network'
     },
     text: 'Geminis',
-    uiLogo: chainsGeminisPNG
+    ui: {
+      logo: chainsGeminisPNG
+    }
   },
   {
     homepage: 'https://hashed.network/',
@@ -241,8 +277,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       'Hashed Systems': 'wss://c1.hashed.network'
     },
     text: 'Hashed Network',
-    uiColor: '#9199A9',
-    uiLogo: nodesHashedPNG
+    ui: {
+      color: '#9199A9',
+      logo: nodesHashedPNG
+    }
   },
   {
     homepage: 'https://hydradx.io/',
@@ -254,8 +292,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       OnFinality: 'wss://hydradx.api.onfinality.io/public-ws' // https://github.com/polkadot-js/apps/issues/8623, Renabled for PolkadotJS
     },
     text: 'HydraDX',
-    uiColor: '#f653a2',
-    uiLogo: chainsSnakenetSVG
+    ui: {
+      color: '#f653a2',
+      logo: chainsSnakenetSVG
+    }
   },
   {
     homepage: 'https://integritee.network',
@@ -265,8 +305,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       Integritee: 'wss://polkadot.api.integritee.network'
     },
     text: 'Integritee Shell',
-    uiColor: '#658ea9',
-    uiLogo: nodesIntegriteeSVG
+    ui: {
+      color: '#658ea9',
+      logo: nodesIntegriteeSVG
+    }
   },
   {
     homepage: 'https://interlay.io/',
@@ -277,8 +319,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       OnFinality: 'wss://interlay.api.onfinality.io/public-ws'
     },
     text: 'Interlay',
-    uiColor: '#3E96FF',
-    uiLogo: nodesInterlaySVG
+    ui: {
+      color: '#3E96FF',
+      logo: nodesInterlaySVG
+    }
   },
   {
     homepage: 'https://totemaccounting.com/',
@@ -288,8 +332,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       Totem: 'wss://k-ui.kapex.network'
     },
     text: 'Kapex',
-    uiColor: 'linear-gradient(158deg, rgba(226,157,0,1) 0%, rgba(234,55,203,1) 100%)',
-    uiLogo: chainsTotemSVG
+    ui: {
+      color: 'linear-gradient(158deg, rgba(226,157,0,1) 0%, rgba(234,55,203,1) 100%)',
+      logo: chainsTotemSVG
+    }
   },
   {
     homepage: 'https://www.kilt.io/',
@@ -301,8 +347,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       OnFinality: 'wss://spiritnet.api.onfinality.io/public-ws'
     },
     text: 'KILT Spiritnet',
-    uiColor: '#8c145a',
-    uiLogo: nodesKiltPNG
+    ui: {
+      color: '#8c145a',
+      logo: nodesKiltPNG
+    }
   },
   {
     homepage: 'https://kylin.network/',
@@ -312,8 +360,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       'Kylin Network': 'wss://polkadot.kylin-node.co.uk'
     },
     text: 'Kylin',
-    uiColor: '#ed007e',
-    uiLogo: nodesKylinPNG
+    ui: {
+      color: '#ed007e',
+      logo: nodesKylinPNG
+    }
   },
   {
     homepage: 'https://crowdloan.litentry.com',
@@ -324,8 +374,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       Litentry: 'wss://rpc.litentry-parachain.litentry.io'
     },
     text: 'Litentry',
-    uiColor: 'linear-gradient(45deg, #5cc27c 0%, #6de98f 100%)',
-    uiLogo: nodesLitentryPNG
+    ui: {
+      color: 'linear-gradient(45deg, #5cc27c 0%, #6de98f 100%)',
+      logo: nodesLitentryPNG
+    }
   },
   {
     homepage: 'https://manta.network',
@@ -338,8 +390,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       // 'Manta Pectinata': 'wss://pectinata.manta.systems' // https://github.com/polkadot-js/apps/issues/7018
     },
     text: 'Manta',
-    uiColor: '#2070a6',
-    uiLogo: nodesMantaPNG
+    ui: {
+      color: '#2070a6',
+      logo: nodesMantaPNG
+    }
   },
   {
     homepage: 'https://moonbeam.network/networks/moonbeam/',
@@ -353,8 +407,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       UnitedBloc: 'wss://moonbeam.unitedbloc.com:3001'
     },
     text: 'Moonbeam',
-    uiColor: '#53cbc9',
-    uiLogo: nodesMoonbeamPNG
+    ui: {
+      color: '#53cbc9',
+      logo: nodesMoonbeamPNG
+    }
   },
   {
     homepage: 'https://nodle.com',
@@ -366,8 +422,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       Pinknode: 'wss://public-rpc.pinknode.io/nodle'
     },
     text: 'Nodle',
-    uiColor: '#1ab394',
-    uiLogo: nodesNodleSVG
+    ui: {
+      color: '#1ab394',
+      logo: nodesNodleSVG
+    }
   },
   {
     homepage: 'https://oak.tech',
@@ -378,8 +436,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       OAK: 'wss://rpc.oak.tech'
     },
     text: 'OAK Network',
-    uiColor: '#A8278C',
-    uiLogo: chainsOakPNG
+    ui: {
+      color: '#A8278C',
+      logo: chainsOakPNG
+    }
   },
   {
     homepage: 'https://www.omnibtc.finance',
@@ -390,8 +450,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       OmniBTC: 'wss://psc-parachain.coming.chat'
     },
     text: 'OmniBTC',
-    uiColor: '#6759E9',
-    uiLogo: nodesOmnibtcSVG
+    ui: {
+      color: '#6759E9',
+      logo: nodesOmnibtcSVG
+    }
   },
   {
     homepage: 'https://parachain.origintrail.io',
@@ -401,8 +463,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       TraceLabs: 'wss://parachain-rpc.origin-trail.network'
     },
     text: 'OriginTrail',
-    uiColor: '#FB5DEB',
-    uiLogo: chainsOrigintrailPNG
+    ui: {
+      color: '#FB5DEB',
+      logo: chainsOrigintrailPNG
+    }
   },
   {
     homepage: 'https://parallel.fi',
@@ -413,8 +477,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       Parallel: 'wss://rpc.parallel.fi'
     },
     text: 'Parallel',
-    uiColor: '#ef18ac',
-    uiLogo: nodesParallelSVG
+    ui: {
+      color: '#ef18ac',
+      logo: nodesParallelSVG
+    }
   },
   {
     homepage: 'https://pendulumchain.org/',
@@ -425,8 +491,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       PendulumChain: 'wss://rpc.pendulumchain.tech'
     },
     text: 'Pendulum',
-    uiColor: '#49E2FD',
-    uiLogo: chainsPendulumSVG
+    ui: {
+      color: '#49E2FD',
+      logo: chainsPendulumSVG
+    }
   },
   {
     homepage: 'https://phala.network',
@@ -437,8 +505,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       Phala: 'wss://api.phala.network/ws'
     },
     text: 'Phala Network',
-    uiColor: '#c6fa4c',
-    uiLogo: nodesPhalaSVG
+    ui: {
+      color: '#c6fa4c',
+      logo: nodesPhalaSVG
+    }
   },
   {
     // https://github.com/polkadot-js/apps/issues/7620
@@ -451,8 +521,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       // OnFinality: 'wss://polkadex.api.onfinality.io/public-ws' // https://github.com/polkadot-js/apps/issues/7620
     },
     text: 'Polkadex',
-    uiColor: '#7C30DD',
-    uiLogo: nodesPolkadexSVG
+    ui: {
+      color: '#7C30DD',
+      logo: nodesPolkadexSVG
+    }
   },
   {
     homepage: 'https://subdao.network/',
@@ -463,8 +535,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       SubDAO: 'wss://parachain-rpc.subdao.org'
     },
     text: 'SubDAO',
-    uiColor: 'linear-gradient(50deg, #F20092 0%, #FF4D5D 100%)',
-    uiLogo: nodesSubdaoPNG
+    ui: {
+      color: 'linear-gradient(50deg, #F20092 0%, #FF4D5D 100%)',
+      logo: nodesSubdaoPNG
+    }
   },
   {
     homepage: 'http://subgame.org/',
@@ -474,8 +548,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       // SubGame: 'wss://gamma.subgame.org/' // https://github.com/polkadot-js/apps/pull/6761
     },
     text: 'SubGame Gamma',
-    uiColor: '#EB027D',
-    uiLogo: nodesSubgameSVG
+    ui: {
+      color: '#EB027D',
+      logo: nodesSubgameSVG
+    }
   },
   {
     homepage: 'https://unique.network/',
@@ -488,8 +564,10 @@ export const prodParasPolkadot: EndpointOption[] = [
       'Unique Europe': 'wss://eu-ws.unique.network/'
     },
     text: 'Unique Network',
-    uiColor: '#40BCFF',
-    uiLogo: nodesUniqueSVG
+    ui: {
+      color: '#40BCFF',
+      logo: nodesUniqueSVG
+    }
   }
 ];
 
@@ -507,8 +585,10 @@ export const prodParasPolkadotCommon: EndpointOption[] = [
     },
     teleport: [-1],
     text: 'Statemint',
-    uiColor: '#86e62a',
-    uiLogo: nodesStatemineSVG
+    ui: {
+      color: '#86e62a',
+      logo: nodesStatemineSVG
+    }
   },
   {
     info: 'polkadotCollectives',
@@ -519,8 +599,10 @@ export const prodParasPolkadotCommon: EndpointOption[] = [
     },
     teleport: [-1],
     text: 'Collectives',
-    uiColor: '#e6777a',
-    uiLogo: 'fa;people-group'
+    ui: {
+      color: '#e6777a',
+      logo: 'fa;people-group'
+    }
   }
 ];
 
@@ -546,6 +628,8 @@ export const prodRelayPolkadot: EndpointOption = {
   },
   teleport: getTeleports(prodParasPolkadotCommon),
   text: 'Polkadot',
-  uiColor: '#e6007a',
-  uiLogo: chainsPolkadotCircleSVG
+  ui: {
+    color: '#e6007a',
+    logo: chainsPolkadotCircleSVG
+  }
 };
diff --git a/packages/apps-config/src/endpoints/testing.ts b/packages/apps-config/src/endpoints/testing.ts
index a42247f607..7c036938cf 100644
--- a/packages/apps-config/src/endpoints/testing.ts
+++ b/packages/apps-config/src/endpoints/testing.ts
@@ -23,8 +23,10 @@ export const testChains: EndpointOption[] = [
       '3dpass': 'wss://test-rpc.3dpass.org'
     },
     text: '3DPass Testnet',
-    uiColor: '#323232',
-    uiLogo: chains3dpassPNG
+    ui: {
+      color: '#323232',
+      logo: chains3dpassPNG
+    }
   },
   {
     info: 'ajuna',
@@ -32,8 +34,10 @@ export const testChains: EndpointOption[] = [
       'Ajuna Network': 'wss://rpc-test.ajuna.network'
     },
     text: 'Ajuna Testnet',
-    uiColor: '#161212',
-    uiLogo: nodesAjunaPNG
+    ui: {
+      color: '#161212',
+      logo: nodesAjunaPNG
+    }
   },
   {
     info: 'aleph',
@@ -42,8 +46,10 @@ export const testChains: EndpointOption[] = [
       Dwellir: 'wss://aleph-zero-testnet-rpc.dwellir.com'
     },
     text: 'Aleph Zero Testnet',
-    uiColor: '#00CCAB',
-    uiLogo: chainsAlephSVG
+    ui: {
+      color: '#00CCAB',
+      logo: chainsAlephSVG
+    }
   },
   {
     info: 'nodle',
@@ -51,8 +57,10 @@ export const testChains: EndpointOption[] = [
       // Nodle: 'wss://arcadia1.nodleprotocol.io' // https://github.com/polkadot-js/apps/issues/7652
     },
     text: 'Arcadia',
-    uiColor: '#1ab394',
-    uiLogo: nodesNodleSVG
+    ui: {
+      color: '#1ab394',
+      logo: nodesNodleSVG
+    }
   },
   {
     info: 'arctic',
@@ -60,7 +68,9 @@ export const testChains: EndpointOption[] = [
       Arctic: 'wss://arctic-rpc.icenetwork.io:9944'
     },
     text: 'Arctic',
-    uiLogo: nodesArcticPNG
+    ui: {
+      logo: nodesArcticPNG
+    }
   },
   {
     info: 'Ares Gladios',
@@ -68,8 +78,10 @@ export const testChains: EndpointOption[] = [
       'Ares Protocol': 'wss://gladios.aresprotocol.io'
     },
     text: 'Ares Gladios',
-    uiColor: '#1295F0',
-    uiLogo: nodesAresGladiosSVG
+    ui: {
+      color: '#1295F0',
+      logo: nodesAresGladiosSVG
+    }
   },
   {
     info: 'jaz',
@@ -77,8 +89,10 @@ export const testChains: EndpointOption[] = [
       Jaz: 'wss://ws0.jaz.network'
     },
     text: 'Artio Testnet',
-    uiColor: '#121212',
-    uiLogo: nodesJazPNG
+    ui: {
+      color: '#121212',
+      logo: nodesJazPNG
+    }
   },
   {
     info: 'automata-contextfree',
@@ -87,8 +101,10 @@ export const testChains: EndpointOption[] = [
       OnFinality: 'wss://contextfree.api.onfinality.io/public-ws'
     },
     text: 'Automata ContextFree',
-    uiColor: '#EC7032',
-    uiLogo: nodesAutomataPNG
+    ui: {
+      color: '#EC7032',
+      logo: nodesAutomataPNG
+    }
   },
   {
     info: 'edgeware',
@@ -96,7 +112,9 @@ export const testChains: EndpointOption[] = [
       JelliedOwl: 'wss://beresheet.jelliedowl.net'
     },
     text: 'Beresheet',
-    uiLogo: nodesEdgewareWhitePNG
+    ui: {
+      logo: nodesEdgewareWhitePNG
+    }
   },
   {
     info: 'bifrost',
@@ -104,7 +122,9 @@ export const testChains: EndpointOption[] = [
       // Liebi: 'wss://bifrost-rpc.testnet.liebi.com/ws' // https://github.com/polkadot-js/apps/issues/8139
     },
     text: 'Bifrost Stage Network',
-    uiLogo: nodesBifrostSVG
+    ui: {
+      logo: nodesBifrostSVG
+    }
   },
   {
     info: 'bitcountry',
@@ -112,7 +132,9 @@ export const testChains: EndpointOption[] = [
       'Metaverse Foundation': 'wss://tewai-rpc.bit.country'
     },
     text: 'Bit.Country - Metaverse Network',
-    uiLogo: nodesBitcountryPNG
+    ui: {
+      logo: nodesBitcountryPNG
+    }
   },
   {
     info: 'cess-testnet',
@@ -120,8 +142,10 @@ export const testChains: EndpointOption[] = [
       CESS: 'wss://testnet-rpc0.cess.cloud/ws/'
     },
     text: 'CESS Testnet',
-    uiColor: '#2269a9',
-    uiLogo: nodesCessPNG
+    ui: {
+      color: '#2269a9',
+      logo: nodesCessPNG
+    }
   },
   {
     info: 'clover',
@@ -129,8 +153,10 @@ export const testChains: EndpointOption[] = [
       // Clover: 'wss://api.clover.finance/' // Cannot construct unknown type BridgeNetworks
     },
     text: 'Clover',
-    uiColor: 'linear-gradient(to right, #52ad75, #7cc773)',
-    uiLogo: nodesCloverSVG
+    ui: {
+      color: 'linear-gradient(to right, #52ad75, #7cc773)',
+      logo: nodesCloverSVG
+    }
   },
   {
     info: 'creditcoin-testnet',
@@ -138,8 +164,10 @@ export const testChains: EndpointOption[] = [
       'Creditcoin Foundation': 'wss://rpc.testnet.creditcoin.network/ws'
     },
     text: 'Creditcoin Testnet',
-    uiColor: '#00DF83',
-    uiLogo: chainsCreditcoinTestPNG
+    ui: {
+      color: '#00DF83',
+      logo: chainsCreditcoinTestPNG
+    }
   },
   {
     info: 'Crust Maxwell',
@@ -149,8 +177,10 @@ export const testChains: EndpointOption[] = [
       // Pinknode: 'wss://rpc.pinknode.io/maxwell/explorer' // https://github.com/polkadot-js/apps/issues/7058
     },
     text: 'Crust Maxwell',
-    uiColor: '#2E333B',
-    uiLogo: nodesCrustMaxwellSVG
+    ui: {
+      color: '#2E333B',
+      logo: nodesCrustMaxwellSVG
+    }
   },
   {
     info: 'datahighway',
@@ -159,7 +189,9 @@ export const testChains: EndpointOption[] = [
       MXC: 'wss://spreehafen.datahighway.com'
     },
     text: 'Spreehafen',
-    uiLogo: nodesDatahighwayPNG
+    ui: {
+      logo: nodesDatahighwayPNG
+    }
   },
   {
     info: 'debio-testnet',
@@ -167,8 +199,10 @@ export const testChains: EndpointOption[] = [
       DeBio: 'wss://ws-rpc.testnet.debio.network'
     },
     text: 'DeBio Testnet',
-    uiColor: '#FF56E0',
-    uiLogo: chainsDebioSVG
+    ui: {
+      color: '#FF56E0',
+      logo: chainsDebioSVG
+    }
   },
   {
     info: 'dock-testnet',
@@ -176,7 +210,9 @@ export const testChains: EndpointOption[] = [
       // 'Dock Association': 'wss://knox-1.dock.io' // https://github.com/polkadot-js/apps/issues/6831
     },
     text: 'Dock',
-    uiLogo: nodesDockTestnetPNG
+    ui: {
+      logo: nodesDockTestnetPNG
+    }
   },
   {
     info: 'dolphin',
@@ -184,8 +220,10 @@ export const testChains: EndpointOption[] = [
       // 'Dolphin Testnet': 'wss://trillian.dolphin.red' // https://github.com/polkadot-js/apps/issues/7439
     },
     text: 'Dolphin Testnet',
-    uiColor: '#000000',
-    uiLogo: nodesDolphinSVG
+    ui: {
+      color: '#000000',
+      logo: nodesDolphinSVG
+    }
   },
   {
     info: 'dotmog',
@@ -193,8 +231,10 @@ export const testChains: EndpointOption[] = [
       // DOTMog: 'wss://mogiway-01.dotmog.com' // https://github.com/polkadot-js/apps/issues/8895
     },
     text: 'DOTMog',
-    uiColor: '#020609',
-    uiLogo: nodesDotmogSVG
+    ui: {
+      color: '#020609',
+      logo: nodesDotmogSVG
+    }
   },
   {
     info: 'encointer',
@@ -202,8 +242,10 @@ export const testChains: EndpointOption[] = [
       'Encointer Association': 'wss://gesell.encointer.org'
     },
     text: 'Encointer Gesell',
-    uiColor: '#0000cc',
-    uiLogo: nodesEncointerBlueSVG
+    ui: {
+      color: '#0000cc',
+      logo: nodesEncointerBlueSVG
+    }
   },
   {
     info: 'equilibrium',
@@ -211,8 +253,10 @@ export const testChains: EndpointOption[] = [
       // Equilibrium: 'wss://testnet.equilibrium.io' // https://github.com/polkadot-js/apps/issues/6250
     },
     text: 'Equilibrium',
-    uiColor: '#1792ff',
-    uiLogo: chainsEquilibriumSVG
+    ui: {
+      color: '#1792ff',
+      logo: chainsEquilibriumSVG
+    }
   },
   {
     info: 'fantour',
@@ -220,8 +264,10 @@ export const testChains: EndpointOption[] = [
       // FantourDev: 'wss://test-ws.fantour.io' // https://github.com/polkadot-js/apps/issues/6519
     },
     text: 'Fantour',
-    uiColor: '#5a189a',
-    uiLogo: nodesFantourPNG
+    ui: {
+      color: '#5a189a',
+      logo: nodesFantourPNG
+    }
   },
   {
     info: 'ferrum',
@@ -229,15 +275,18 @@ export const testChains: EndpointOption[] = [
       Ferrum: 'wss://testnet.dev.svcs.ferrumnetwork.io'
     },
     text: 'Ferrum Testnet',
-    uiColor: '#b37700',
-    uiLogo: chainsFerrumPNG
+    ui: {
+      color: '#b37700',
+      logo: chainsFerrumPNG
+    }
   },
   {
     info: 'substrate',
     providers: {
       // Parity: 'wss://substrate-rpc.parity.io' // https://github.com/polkadot-js/apps/issues/5571
     },
-    text: 'Flaming Fir'
+    text: 'Flaming Fir',
+    ui: {}
   },
   {
     info: 'Galital',
@@ -245,8 +294,10 @@ export const testChains: EndpointOption[] = [
       // StarkleyTech: 'wss://galital-rpc-testnet.starkleytech.com' // https://github.com/polkadot-js/apps/issues/6721
     },
     text: 'Galital PC2',
-    uiColor: '#00063F',
-    uiLogo: nodesGalitalLogoPNG
+    ui: {
+      color: '#00063F',
+      logo: nodesGalitalLogoPNG
+    }
   },
   {
     info: 'galois',
@@ -255,8 +306,10 @@ export const testChains: EndpointOption[] = [
       'MathWallet Backup': 'wss://galois.maiziqianbao.net/ws'
     },
     text: 'Galois',
-    uiColor: '#000000',
-    uiLogo: nodesMathSVG
+    ui: {
+      color: '#000000',
+      logo: nodesMathSVG
+    }
   },
   {
     info: 'gamepower',
@@ -264,8 +317,10 @@ export const testChains: EndpointOption[] = [
       // GamePower: 'wss://gamepower.io' // https://github.com/polkadot-js/apps/issues/7223
     },
     text: 'GamePower',
-    uiColor: '#5d21a5',
-    uiLogo: nodesGamepowerSVG
+    ui: {
+      color: '#5d21a5',
+      logo: nodesGamepowerSVG
+    }
   },
   {
     info: 'geek',
@@ -273,8 +328,10 @@ export const testChains: EndpointOption[] = [
       // 'Geek Team': 'wss://testnet.geekcash.org' // https://github.com/polkadot-js/apps/issues/8361
     },
     text: 'GeekCash',
-    uiColor: '#4f46e5',
-    uiLogo: nodesGeekSVG
+    ui: {
+      color: '#4f46e5',
+      logo: nodesGeekSVG
+    }
   },
   {
     info: 'halongbay',
@@ -282,8 +339,10 @@ export const testChains: EndpointOption[] = [
       // Halongbay: 'wss://halongbay.polkafoundry.com' // https://github.com/polkadot-js/apps/issues/6871
     },
     text: 'Halongbay Testnet',
-    uiColor: '#ff527c',
-    uiLogo: nodesPolkafoundrySVG
+    ui: {
+      color: '#ff527c',
+      logo: nodesPolkafoundrySVG
+    }
   },
   {
     info: 'interlay-testnet',
@@ -291,7 +350,9 @@ export const testChains: EndpointOption[] = [
       Interlay: 'wss://api-testnet.interlay.io/parachain/'
     },
     text: 'Interlay Testnet',
-    uiLogo: chainsInterlaySVG
+    ui: {
+      logo: chainsInterlaySVG
+    }
   },
   {
     info: 'brainstorm',
@@ -299,8 +360,10 @@ export const testChains: EndpointOption[] = [
       // 'InvArch Team': 'wss://brainstorm.invarch.network/' // https://github.com/polkadot-js/apps/issues/8020
     },
     text: 'InvArch Brainstorm Testnet',
-    uiColor: '#161616',
-    uiLogo: chainsBrainstormPNG
+    ui: {
+      color: '#161616',
+      logo: chainsBrainstormPNG
+    }
   },
   {
     info: 'ipse',
@@ -311,8 +374,10 @@ export const testChains: EndpointOption[] = [
       'IPSE USA': 'wss://testnet-usa.ipse.io'
     },
     text: 'IPSE',
-    uiColor: '#08a1e8',
-    uiLogo: nodesIpsePNG
+    ui: {
+      color: '#08a1e8',
+      logo: nodesIpsePNG
+    }
   },
   {
     info: 'jupiter',
@@ -320,8 +385,10 @@ export const testChains: EndpointOption[] = [
       // Patract: 'wss://ws.jupiter-poa.patract.cn' // https://github.com/polkadot-js/apps/issues/7765
     },
     text: 'Jupiter',
-    uiColor: '#7143ff',
-    uiLogo: nodesJupiterSVG
+    ui: {
+      color: '#7143ff',
+      logo: nodesJupiterSVG
+    }
   },
   {
     info: 'khala',
@@ -329,8 +396,10 @@ export const testChains: EndpointOption[] = [
       // 'Phala Network': 'wss://pc-test-3.phala.network/khala/ws' // https://github.com/polkadot-js/apps/issues/6930
     },
     text: 'Khala (Para 3)',
-    uiColor: '#03f3f3',
-    uiLogo: nodesKhalaSVG
+    ui: {
+      color: '#03f3f3',
+      logo: nodesKhalaSVG
+    }
   },
   {
     info: 'kilt',
@@ -338,7 +407,9 @@ export const testChains: EndpointOption[] = [
       'KILT Protocol': 'wss://full-nodes.kilt.io:9944/'
     },
     text: 'KILT Mashnet',
-    uiLogo: nodesKiltPNG
+    ui: {
+      logo: nodesKiltPNG
+    }
   },
   {
     info: 'kilt',
@@ -346,8 +417,10 @@ export const testChains: EndpointOption[] = [
       'KILT Protocol': 'wss://peregrine.kilt.io/parachain-public-ws/'
     },
     text: 'KILT Peregrine',
-    uiColor: 'linear-gradient(45deg, #f05a27 0%, #8c145a 100%)',
-    uiLogo: nodesKiltPNG
+    ui: {
+      color: 'linear-gradient(45deg, #f05a27 0%, #8c145a 100%)',
+      logo: nodesKiltPNG
+    }
   },
   {
     info: 'kintsugi-testnet',
@@ -355,8 +428,10 @@ export const testChains: EndpointOption[] = [
       Interlay: 'wss://api-dev-kintsugi.interlay.io/parachain'
     },
     text: 'Kintsugi Testnet',
-    uiColor: '#1a0a2d',
-    uiLogo: chainsKintsugiPNG
+    ui: {
+      color: '#1a0a2d',
+      logo: chainsKintsugiPNG
+    }
   },
   {
     info: 'klugdossier',
@@ -364,8 +439,10 @@ export const testChains: EndpointOption[] = [
       // 'Klug Dossier': 'wss://klugdossier.net/' // https://github.com/polkadot-js/apps/issues/8081
     },
     text: 'Klug Dossier',
-    uiColor: '#663399',
-    uiLogo: nodesKlugPNG
+    ui: {
+      color: '#663399',
+      logo: nodesKlugPNG
+    }
   },
   {
     info: 'kylin',
@@ -373,7 +450,9 @@ export const testChains: EndpointOption[] = [
       // 'Kylin Network': 'wss://testnet.kylin-node.co.uk' // https://github.com/polkadot-js/apps/issues/6635
     },
     text: 'Kylin Testnet',
-    uiLogo: nodesKylinPNG
+    ui: {
+      logo: nodesKylinPNG
+    }
   },
   {
     info: 'litentry',
@@ -381,8 +460,10 @@ export const testChains: EndpointOption[] = [
       Litentry: 'wss://testnet.litentry.io'
     },
     text: 'Litentry Testnet',
-    uiColor: 'linear-gradient(45deg, #5cc27c 0%, #6de98f 100%)',
-    uiLogo: nodesLitentryPNG
+    ui: {
+      color: 'linear-gradient(45deg, #5cc27c 0%, #6de98f 100%)',
+      logo: nodesLitentryPNG
+    }
   },
   {
     info: 'logion',
@@ -390,8 +471,10 @@ export const testChains: EndpointOption[] = [
       Logion: 'wss://chimay.logion.network'
     },
     text: 'logion Para Testnet',
-    uiColor: 'rgb(21, 38, 101)',
-    uiLogo: chainsLogionPNG
+    ui: {
+      color: 'rgb(21, 38, 101)',
+      logo: chainsLogionPNG
+    }
   },
   {
     info: 'logion',
@@ -399,8 +482,10 @@ export const testChains: EndpointOption[] = [
       Logion: 'wss://test-rpc01.logion.network'
     },
     text: 'logion Standalone Testnet',
-    uiColor: 'rgb(21, 38, 101)',
-    uiLogo: chainsLogionPNG
+    ui: {
+      color: 'rgb(21, 38, 101)',
+      logo: chainsLogionPNG
+    }
   },
   {
     info: 'acala',
@@ -409,7 +494,9 @@ export const testChains: EndpointOption[] = [
       // OnFinality: 'wss://acala-mandala.api.onfinality.io/public-ws' // https://github.com/polkadot-js/apps/issues/8105
     },
     text: 'Mandala',
-    uiLogo: chainsAcalaSVG
+    ui: {
+      logo: chainsAcalaSVG
+    }
   },
   {
     info: 'manta',
@@ -417,8 +504,10 @@ export const testChains: EndpointOption[] = [
       // 'Manta Testnet': 'wss://ws.f1.testnet.manta.network' // https://github.com/polkadot-js/apps/issues/6384
     },
     text: 'Manta Testnet',
-    uiColor: '#2070a6',
-    uiLogo: nodesMantaPNG
+    ui: {
+      color: '#2070a6',
+      logo: nodesMantaPNG
+    }
   },
   {
     info: 'minix',
@@ -426,8 +515,10 @@ export const testChains: EndpointOption[] = [
       // Chainx: 'wss://minichain.coming.chat/ws' // https://github.com/polkadot-js/apps/issues/8132
     },
     text: 'MiniX Testnet',
-    uiColor: '#5152f7',
-    uiLogo: nodesMinixPNG
+    ui: {
+      color: '#5152f7',
+      logo: nodesMinixPNG
+    }
   },
   {
     info: 'moonbaseAlpha',
@@ -438,8 +529,10 @@ export const testChains: EndpointOption[] = [
       UnitedBloc: 'wss://moonbase.unitedbloc.com:1001'
     },
     text: 'Moonbase Alpha',
-    uiColor: '#F45B5B',
-    uiLogo: nodesMoonbaseAlphaPNG
+    ui: {
+      color: '#F45B5B',
+      logo: nodesMoonbaseAlphaPNG
+    }
   },
   {
     info: 'mybank',
@@ -447,8 +540,10 @@ export const testChains: EndpointOption[] = [
       // MYBANK: 'wss://mybank.network/substrate' // https://github.com/polkadot-js/apps/issues/5845
     },
     text: 'mybank.network',
-    uiColor: '#282736',
-    uiLogo: nodesMybankPNG
+    ui: {
+      color: '#282736',
+      logo: nodesMybankPNG
+    }
   },
   {
     info: 'myriad-tesnet',
@@ -456,8 +551,10 @@ export const testChains: EndpointOption[] = [
       Myriad: 'wss://ws-rpc.testnet.myriad.social'
     },
     text: 'Myriad Testnet',
-    uiColor: '#7342CC',
-    uiLogo: chainsMyriadSVG
+    ui: {
+      color: '#7342CC',
+      logo: chainsMyriadSVG
+    }
   },
   {
     info: 'nftmart',
@@ -466,8 +563,10 @@ export const testChains: EndpointOption[] = [
       NFTMartStaging: 'wss://staging-ws.nftmart.io'
     },
     text: 'NFTMart',
-    uiColor: '#307182',
-    uiLogo: nodesNftmartPNG
+    ui: {
+      color: '#307182',
+      logo: nodesNftmartPNG
+    }
   },
   {
     info: 'opal',
@@ -478,8 +577,10 @@ export const testChains: EndpointOption[] = [
       'North America': 'wss://us-ws-opal.unique.network'
     },
     text: 'OPAL by UNIQUE',
-    uiColor: '#3B9C9D',
-    uiLogo: chainsOpalLogoPNG
+    ui: {
+      color: '#3B9C9D',
+      logo: chainsOpalLogoPNG
+    }
   },
   {
     info: 'opportunity',
@@ -487,8 +588,10 @@ export const testChains: EndpointOption[] = [
       // 'Standard Protocol': 'wss://rpc.opportunity.standard.tech' // https://github.com/polkadot-js/apps/issues/7982
     },
     text: 'Opportunity',
-    uiColor: '#6143bc',
-    uiLogo: nodesOpportunityPNG
+    ui: {
+      color: '#6143bc',
+      logo: nodesOpportunityPNG
+    }
   },
   {
     info: 'pangolin',
@@ -496,8 +599,10 @@ export const testChains: EndpointOption[] = [
       'Darwinia Network': 'wss://pangolin-rpc.darwinia.network'
     },
     text: 'Pangolin',
-    uiColor: '#4B30DD',
-    uiLogo: nodesPangolinSVG
+    ui: {
+      color: '#4B30DD',
+      logo: nodesPangolinSVG
+    }
   },
   {
     info: 'pangoro',
@@ -505,8 +610,10 @@ export const testChains: EndpointOption[] = [
       'Darwinia Network': 'wss://pangoro-rpc.darwinia.network'
     },
     text: 'Pangoro',
-    uiColor: '#4B30DD',
-    uiLogo: nodesPangoroSVG
+    ui: {
+      color: '#4B30DD',
+      logo: nodesPangoroSVG
+    }
   },
   {
     info: 'phala',
@@ -514,7 +621,9 @@ export const testChains: EndpointOption[] = [
       'Phala Network': 'wss://poc5.phala.network/ws'
     },
     text: 'Phala (PoC 5)',
-    uiLogo: nodesPhalaSVG
+    ui: {
+      logo: nodesPhalaSVG
+    }
   },
   {
     info: 'phoenix',
@@ -522,8 +631,10 @@ export const testChains: EndpointOption[] = [
       // 'phoenix Protocol': 'wss://phoenix-ws.coinid.pro/' // https://github.com/polkadot-js/apps/issues/6181
     },
     text: 'Phoenix Mashnet',
-    uiColor: '#d42181',
-    uiLogo: nodesPhoenixPNG
+    ui: {
+      color: '#d42181',
+      logo: nodesPhoenixPNG
+    }
   },
   {
     info: 'pichiu',
@@ -531,7 +642,9 @@ export const testChains: EndpointOption[] = [
       // 'Kylin Network': 'wss://westend.kylin-node.co.uk' // https://github.com/polkadot-js/apps/pull/6761
     },
     text: 'Pichiu Testnet',
-    uiLogo: nodesPichiuPNG
+    ui: {
+      logo: nodesPichiuPNG
+    }
   },
   {
     info: 'polkadex',
@@ -539,8 +652,10 @@ export const testChains: EndpointOption[] = [
       'Polkadex Team': 'wss://blockchain.polkadex.trade'
     },
     text: 'Polkadex',
-    uiColor: '#7C30DD',
-    uiLogo: nodesPolkadexSVG
+    ui: {
+      color: '#7C30DD',
+      logo: nodesPolkadexSVG
+    }
   },
   {
     info: 'polymesh',
@@ -548,8 +663,10 @@ export const testChains: EndpointOption[] = [
       Polymath: 'wss://testnet-rpc.polymesh.live'
     },
     text: 'Polymesh Testnet',
-    uiColor: '#1348e4',
-    uiLogo: nodesPolymeshSVG
+    ui: {
+      color: '#1348e4',
+      logo: nodesPolymeshSVG
+    }
   },
   {
     info: 'pontem',
@@ -557,8 +674,10 @@ export const testChains: EndpointOption[] = [
       // Pontem: 'wss://testnet.pontem.network/ws', // https://github.com/polkadot-js/apps/issues/7652
     },
     text: 'Pontem',
-    uiColor: '#A92FAC',
-    uiLogo: nodesPontemSVG
+    ui: {
+      color: '#A92FAC',
+      logo: nodesPontemSVG
+    }
   },
   {
     info: 'prism',
@@ -566,8 +685,10 @@ export const testChains: EndpointOption[] = [
       // Prism: 'wss://testnet.psm.link' // https://github.com/polkadot-js/apps/issues/7340
     },
     text: 'Prism',
-    uiColor: 'linear-gradient(45deg, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%)',
-    uiLogo: nodesPrismPNG
+    ui: {
+      color: 'linear-gradient(45deg, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%)',
+      logo: nodesPrismPNG
+    }
   },
   {
     info: 'realis',
@@ -575,8 +696,10 @@ export const testChains: EndpointOption[] = [
       // 'Realis.Network': 'wss://rpc.realis.network/' // https://github.com/polkadot-js/apps/issues/7982
     },
     text: 'Realis.Network',
-    uiColor: '#000000',
-    uiLogo: nodesRealisPNG
+    ui: {
+      color: '#000000',
+      logo: nodesRealisPNG
+    }
   },
   {
     info: 'riochain',
@@ -584,8 +707,10 @@ export const testChains: EndpointOption[] = [
       // 'RioChain Staging': 'wss://node.v1.staging.riochain.io' // https://github.com/polkadot-js/apps/issues/6181
     },
     text: 'RioChain',
-    uiColor: '#4d87f6',
-    uiLogo: nodesRiochainSVG
+    ui: {
+      color: '#4d87f6',
+      logo: nodesRiochainSVG
+    }
   },
   {
     info: 'sherpax',
@@ -593,8 +718,10 @@ export const testChains: EndpointOption[] = [
       Chainx: 'wss://sherpax-testnet.chainx.org'
     },
     text: 'Sherpax Testnet',
-    uiColor: '#6bbee8',
-    uiLogo: nodesSherpaxPNG
+    ui: {
+      color: '#6bbee8',
+      logo: nodesSherpaxPNG
+    }
   },
   {
     info: 'shibuya',
@@ -603,8 +730,10 @@ export const testChains: EndpointOption[] = [
       StakeTechnologies: 'wss://rpc.shibuya.astar.network'
     },
     text: 'Shibuya',
-    uiColor: '#1b6dc1d9',
-    uiLogo: chainsShidenPNG
+    ui: {
+      color: '#1b6dc1d9',
+      logo: chainsShidenPNG
+    }
   },
   {
     info: 'skyekiwi',
@@ -612,8 +741,10 @@ export const testChains: EndpointOption[] = [
       SkyeKiwi: 'wss://staging.rpc.skye.kiwi'
     },
     text: 'SkyeKiwi Testnet',
-    uiColor: '#6667ab',
-    uiLogo: chainsSkyekiwiPNG
+    ui: {
+      color: '#6667ab',
+      logo: chainsSkyekiwiPNG
+    }
   },
   {
     info: 'soonsocial',
@@ -621,7 +752,9 @@ export const testChains: EndpointOption[] = [
       // DappForce: 'wss://testnet.subsocial.network' // https://github.com/polkadot-js/apps/issues/8315
     },
     text: 'Soonsocial',
-    uiLogo: nodesSoonsocialPNG
+    ui: {
+      logo: nodesSoonsocialPNG
+    }
   },
   {
     info: 'sora-substrate',
@@ -632,8 +765,10 @@ export const testChains: EndpointOption[] = [
       'Soramitsu #4': 'wss://ws.framenode-4.s2.stg1.sora2.soramitsu.co.jp'
     },
     text: 'SORA-staging',
-    uiColor: '#2D2926',
-    uiLogo: nodesSoraSubstrateSVG
+    ui: {
+      color: '#2D2926',
+      logo: nodesSoraSubstrateSVG
+    }
   },
   {
     info: 'subdao',
@@ -641,8 +776,10 @@ export const testChains: EndpointOption[] = [
       // SubDAO: 'wss://alpha.subdao.org' // https://github.com/polkadot-js/apps/issues/7473
     },
     text: 'SubDAO Staging',
-    uiColor: 'linear-gradient(50deg, #F20092 0%, #FF4D5D 100%)',
-    uiLogo: nodesSubdaoPNG
+    ui: {
+      color: 'linear-gradient(50deg, #F20092 0%, #FF4D5D 100%)',
+      logo: nodesSubdaoPNG
+    }
   },
   {
     info: 'subgame',
@@ -650,8 +787,10 @@ export const testChains: EndpointOption[] = [
       // SubGame: 'wss://staging.subgame.org' // https://github.com/polkadot-js/apps/issues/7982
     },
     text: 'SubGame Staging',
-    uiColor: '#EB027D',
-    uiLogo: nodesSubgameSVG
+    ui: {
+      color: '#EB027D',
+      logo: nodesSubgameSVG
+    }
   },
   {
     info: 'subspace-farmnet',
@@ -659,8 +798,10 @@ export const testChains: EndpointOption[] = [
       // 'Subspace Network': 'wss://farm-rpc.subspace.network/ws' // https://github.com/polkadot-js/apps/issues/8135
     },
     text: 'Subspace Farmnet',
-    uiColor: '#562b8e',
-    uiLogo: nodesSubspacePNG
+    ui: {
+      color: '#562b8e',
+      logo: nodesSubspacePNG
+    }
   },
   {
     info: 'subspace-gemini-1',
@@ -668,8 +809,10 @@ export const testChains: EndpointOption[] = [
       Europe: 'wss://eu.gemini-1b.subspace.network/ws'
     },
     text: 'Subspace Gemini 1',
-    uiColor: '#562b8e',
-    uiLogo: nodesSubspacePNG
+    ui: {
+      color: '#562b8e',
+      logo: nodesSubspacePNG
+    }
   },
   {
     info: 'subspace-gemini-2a',
@@ -677,8 +820,10 @@ export const testChains: EndpointOption[] = [
       Europe: 'wss://eu-0.gemini-2a.subspace.network/ws'
     },
     text: 'Subspace Gemini 2a',
-    uiColor: '#562b8e',
-    uiLogo: nodesSubspacePNG
+    ui: {
+      color: '#562b8e',
+      logo: nodesSubspacePNG
+    }
   },
   {
     info: 'subspace',
@@ -686,8 +831,10 @@ export const testChains: EndpointOption[] = [
       // 'Subspace Network': 'wss://test-rpc.subspace.network' // https://github.com/polkadot-js/apps/issues/8598
     },
     text: 'Subspace Testnet',
-    uiColor: '#562b8e',
-    uiLogo: nodesSubspacePNG
+    ui: {
+      color: '#562b8e',
+      logo: nodesSubspacePNG
+    }
   },
   {
     info: 'tangle',
@@ -695,8 +842,10 @@ export const testChains: EndpointOption[] = [
       Webb: 'wss://tangle-archive.webb.tools'
     },
     text: 'Tangle Alpha',
-    uiColor: '#0099ff',
-    uiLogo: chainsTanglePNG
+    ui: {
+      color: '#0099ff',
+      logo: chainsTanglePNG
+    }
   },
   {
     info: 'ternoa-alphanet',
@@ -704,7 +853,9 @@ export const testChains: EndpointOption[] = [
       CapsuleCorp: 'wss://alphanet.ternoa.com'
     },
     text: 'Ternoa Alphanet',
-    uiLogo: nodesTernoaSVG
+    ui: {
+      logo: nodesTernoaSVG
+    }
   },
   {
     info: 'ternoa-testnet',
@@ -712,8 +863,10 @@ export const testChains: EndpointOption[] = [
       CapsuleCorp: 'wss://testnet.ternoa.com/'
     },
     text: 'Ternoa Testnet',
-    uiColor: '#d622ff',
-    uiLogo: nodesTernoaSVG
+    ui: {
+      color: '#d622ff',
+      logo: nodesTernoaSVG
+    }
   },
   {
     info: 'thebifrost-testnet',
@@ -722,7 +875,9 @@ export const testChains: EndpointOption[] = [
       'Pilab #2': 'wss://public-02.testnet.thebifrost.io/ws'
     },
     text: 'The Bifrost Testnet',
-    uiLogo: nodesBifrostSVG
+    ui: {
+      logo: nodesBifrostSVG
+    }
   },
   {
     info: 'laminar',
@@ -730,8 +885,10 @@ export const testChains: EndpointOption[] = [
       // Laminar: 'wss://testnet-node-1.laminar-chain.laminar.one/ws' // https://github.com/polkadot-js/apps/issues/8060
     },
     text: 'Turbulence',
-    uiColor: '#004FFF',
-    uiLogo: nodesLaminarCircleSVG
+    ui: {
+      color: '#004FFF',
+      logo: nodesLaminarCircleSVG
+    }
   },
   {
     info: 'uniarts',
@@ -739,7 +896,9 @@ export const testChains: EndpointOption[] = [
       // UniArts: 'wss://testnet.uniarts.network' // https://github.com/polkadot-js/apps/issues/8541
     },
     text: 'UniArts',
-    uiLogo: nodesUniartsPNG
+    ui: {
+      logo: nodesUniartsPNG
+    }
   },
   {
     info: 'unique',
@@ -747,8 +906,10 @@ export const testChains: EndpointOption[] = [
       // Unique: 'wss://testnet2.unique.network' // https://github.com/polkadot-js/apps/issues/7621
     },
     text: 'Unique',
-    uiColor: '#40BCFF',
-    uiLogo: chainsUniqueSVG
+    ui: {
+      color: '#40BCFF',
+      logo: chainsUniqueSVG
+    }
   },
   {
     info: 'unitv',
@@ -756,8 +917,10 @@ export const testChains: EndpointOption[] = [
       // 'Unit Network': 'wss://unitventures.io/' // https://github.com/polkadot-js/apps/issues/5684
     },
     text: 'Unit Network',
-    uiColor: '#1452F0',
-    uiLogo: nodesUnitnetworkPNG
+    ui: {
+      color: '#1452F0',
+      logo: nodesUnitnetworkPNG
+    }
   },
   {
     info: 'vara',
@@ -765,15 +928,18 @@ export const testChains: EndpointOption[] = [
       'Gear Tech': 'wss://rpc.vara-network.io'
     },
     text: 'Vara',
-    uiColor: '#32e37d',
-    uiLogo: chainsVaraSVG
+    ui: {
+      color: '#32e37d',
+      logo: chainsVaraSVG
+    }
   },
   {
     info: 'vodka',
     providers: {
       // Vodka: 'wss://vodka.rpc.neatcoin.org/ws' // https://github.com/polkadot-js/apps/issues/8175
     },
-    text: 'Vodka'
+    text: 'Vodka',
+    ui: {}
   },
   {
     info: 'web3games',
@@ -781,8 +947,10 @@ export const testChains: EndpointOption[] = [
       'Web3Games Foundation': 'wss://devnet.web3games.org'
     },
     text: 'Web3Games',
-    uiColor: '#000000',
-    uiLogo: nodesWeb3gamesSVG
+    ui: {
+      color: '#000000',
+      logo: nodesWeb3gamesSVG
+    }
   },
   {
     info: 'zCloak',
@@ -790,8 +958,10 @@ export const testChains: EndpointOption[] = [
       // 'zCloak Network': 'wss://test1.zcloak.network' // https://github.com/polkadot-js/apps/issues/7408
     },
     text: 'zCloak-network',
-    uiColor: 'linear-gradient(to right, #E89A76 0%, #C5B8CC 50%, #B0B4D7 100%)',
-    uiLogo: nodesZCloakSVG
+    ui: {
+      color: 'linear-gradient(to right, #E89A76 0%, #C5B8CC 50%, #B0B4D7 100%)',
+      logo: nodesZCloakSVG
+    }
   },
   {
     info: 'zeitgeist',
@@ -799,8 +969,10 @@ export const testChains: EndpointOption[] = [
       Zeitgeist: 'wss://bsr.zeitgeist.pm'
     },
     text: 'Zeitgeist Battery Station',
-    uiColor: 'linear-gradient(180deg, rgba(32,90,172,1) 0%, rgba(26,72,138,1) 50%, rgba(13,36,69,1) 100%)',
-    uiLogo: nodesZeitgeistPNG
+    ui: {
+      color: 'linear-gradient(180deg, rgba(32,90,172,1) 0%, rgba(26,72,138,1) 50%, rgba(13,36,69,1) 100%)',
+      logo: nodesZeitgeistPNG
+    }
   },
   {
     info: 'zero',
@@ -808,6 +980,8 @@ export const testChains: EndpointOption[] = [
       // ZERO: 'wss://alphaville.zero.io' // https://github.com/polkadot-js/apps/issues/8263
     },
     text: 'Zero Alphaville',
-    uiColor: '#000000'
+    ui: {
+      color: '#000000'
+    }
   }
 ];
diff --git a/packages/apps-config/src/endpoints/testingRelayRococo.ts b/packages/apps-config/src/endpoints/testingRelayRococo.ts
index 96ea809fc1..83f06c40a2 100644
--- a/packages/apps-config/src/endpoints/testingRelayRococo.ts
+++ b/packages/apps-config/src/endpoints/testingRelayRococo.ts
@@ -23,8 +23,10 @@ export const testParasRococo: EndpointOption[] = [
       Acurast: 'wss://ws.acurast-rococo.diamond.papers.tech'
     },
     text: 'Acurast Testnet',
-    uiColor: '#000000',
-    uiLogo: chainsAcurastPNG
+    ui: {
+      color: '#000000',
+      logo: chainsAcurastPNG
+    }
   },
   {
     info: 'rococoAmplitude',
@@ -33,8 +35,10 @@ export const testParasRococo: EndpointOption[] = [
       PendulumChain: 'wss://rpc-foucoco.pendulumchain.tech'
     },
     text: 'Amplitude testnet (Foucoco)',
-    uiColor: '#5DEFA7',
-    uiLogo: chainsAmplitudeSVG
+    ui: {
+      color: '#5DEFA7',
+      logo: chainsAmplitudeSVG
+    }
   },
   {
     info: 'arctic',
@@ -43,7 +47,9 @@ export const testParasRococo: EndpointOption[] = [
       Arctic: 'wss://arctic-rococo-rpc.icenetwork.io'
     },
     text: 'Arctic',
-    uiLogo: nodesArcticPNG
+    ui: {
+      logo: nodesArcticPNG
+    }
   },
   {
     homepage: 'https://www.aventus.io/',
@@ -51,7 +57,9 @@ export const testParasRococo: EndpointOption[] = [
     paraId: 2056,
     providers: {},
     text: 'Aventus',
-    uiLogo: chainsAventusSVG
+    ui: {
+      logo: chainsAventusSVG
+    }
   },
   {
     info: 'rococoBajun',
@@ -60,8 +68,10 @@ export const testParasRococo: EndpointOption[] = [
       AjunaNetwork: 'wss://rpc-rococo.bajun.network'
     },
     text: 'Bajun Network',
-    uiColor: '#161212',
-    uiLogo: nodesBajunPNG
+    ui: {
+      color: '#161212',
+      logo: nodesBajunPNG
+    }
   },
   {
     info: 'rococoBasilisk',
@@ -70,8 +80,10 @@ export const testParasRococo: EndpointOption[] = [
       'Galactic Council': 'wss://rococo-basilisk-rpc.hydration.dev'
     },
     text: 'Basilisk',
-    uiColor: `url(${nodesBasiliskRococoBgPNG}) #000`,
-    uiLogo: nodesBasiliskPNG
+    ui: {
+      color: `url(${nodesBasiliskRococoBgPNG}) #000`,
+      logo: nodesBasiliskPNG
+    }
   },
   {
     info: 'rococoBifrost',
@@ -80,8 +92,10 @@ export const testParasRococo: EndpointOption[] = [
       Liebi: 'wss://bifrost-rpc.rococo.liebi.com/ws'
     },
     text: 'Bifrost',
-    uiColor: '#5a25f0',
-    uiLogo: nodesBifrostSVG
+    ui: {
+      color: '#5a25f0',
+      logo: nodesBifrostSVG
+    }
   },
   {
     info: 'rococoBitgreen',
@@ -90,8 +104,10 @@ export const testParasRococo: EndpointOption[] = [
       Bitgreen: 'wss://staging.bitgreen.org'
     },
     text: 'Bitgreen',
-    uiColor: '#224851',
-    uiLogo: chainsBitgreenPNG
+    ui: {
+      color: '#224851',
+      logo: chainsBitgreenPNG
+    }
   },
   {
     info: 'rococoCatalyst',
@@ -100,7 +116,9 @@ export const testParasRococo: EndpointOption[] = [
       Centrifuge: 'wss://fullnode.catalyst.cntrfg.com'
     },
     text: 'Catalyst',
-    uiLogo: nodesCentrifugePNG
+    ui: {
+      logo: nodesCentrifugePNG
+    }
   },
   {
     info: 'rococoConfti',
@@ -109,7 +127,9 @@ export const testParasRococo: EndpointOption[] = [
       // Confti: 'wss://ws.confti.club' // https://github.com/polkadot-js/apps/issues/8036
     },
     text: 'Confti',
-    uiLogo: nodesConftiSVG
+    ui: {
+      logo: nodesConftiSVG
+    }
   },
   {
     info: 'rococoCrust',
@@ -118,7 +138,9 @@ export const testParasRococo: EndpointOption[] = [
       Crust: 'wss://rococo-csm.crustcode.com/'
     },
     text: 'Crust Testnet',
-    uiLogo: nodesCrustParachainSVG
+    ui: {
+      logo: nodesCrustParachainSVG
+    }
   },
   {
     info: 'rococoDali',
@@ -127,8 +149,10 @@ export const testParasRococo: EndpointOption[] = [
       // Composable: 'wss://rpc.composablefinance.ninja' // https://github.com/polkadot-js/apps/issues/8867
     },
     text: 'Dali',
-    uiColor: '#000000',
-    uiLogo: chainsDaliPNG
+    ui: {
+      color: '#000000',
+      logo: chainsDaliPNG
+    }
   },
   {
     info: 'rococoDolphin',
@@ -137,7 +161,9 @@ export const testParasRococo: EndpointOption[] = [
       'Manta Network': 'wss://ws.rococo.dolphin.engineering'
     },
     text: 'Dolphin',
-    uiLogo: nodesDolphinSVG
+    ui: {
+      logo: nodesDolphinSVG
+    }
   },
   {
     info: 'rococoEthos',
@@ -146,8 +172,10 @@ export const testParasRococo: EndpointOption[] = [
       Jur: 'wss://ethos.jur.io'
     },
     text: 'Ethos',
-    uiColor: '#203050',
-    uiLogo: chainsJurPNG
+    ui: {
+      color: '#203050',
+      logo: chainsJurPNG
+    }
   },
   {
     info: 'rococoFrequency',
@@ -156,8 +184,10 @@ export const testParasRococo: EndpointOption[] = [
       Frequency: 'wss://rpc.rococo.frequency.xyz'
     },
     text: 'Frequency',
-    uiColor: '#29fd47',
-    uiLogo: chainsFrequencySVG
+    ui: {
+      color: '#29fd47',
+      logo: chainsFrequencySVG
+    }
   },
   {
     info: 'rococoGenshiro',
@@ -166,8 +196,10 @@ export const testParasRococo: EndpointOption[] = [
       Equilibrium: 'wss://parachain-testnet.equilab.io/rococo/collator/node1/wss'
     },
     text: 'Genshiro Testnet',
-    uiColor: '#e8662d',
-    uiLogo: chainsGenshiroSVG
+    ui: {
+      color: '#e8662d',
+      logo: chainsGenshiroSVG
+    }
   },
   {
     info: 'helixstreet',
@@ -176,7 +208,9 @@ export const testParasRococo: EndpointOption[] = [
       Helixstreet: 'wss://rpc-rococo.helixstreet.io'
     },
     text: 'Helixstreet',
-    uiLogo: nodesHelixstreetPNG
+    ui: {
+      logo: nodesHelixstreetPNG
+    }
   },
   {
     info: 'rococoHydraDX',
@@ -185,8 +219,10 @@ export const testParasRococo: EndpointOption[] = [
       'Galactic Council': 'wss://rococo-hydradx-rpc.hydration.dev'
     },
     text: 'HydraDX',
-    uiColor: '#f653a2',
-    uiLogo: chainsHydratePNG
+    ui: {
+      color: '#f653a2',
+      logo: chainsHydratePNG
+    }
   },
   {
     info: 'rococoImbue',
@@ -195,8 +231,10 @@ export const testParasRococo: EndpointOption[] = [
       'Imbue Network': 'wss://rococo.imbue.network'
     },
     text: 'Imbue Network',
-    uiColor: '#baff36',
-    uiLogo: nodesImbuePNG
+    ui: {
+      color: '#baff36',
+      logo: nodesImbuePNG
+    }
   },
   {
     info: 'rococoIntegritee',
@@ -205,8 +243,10 @@ export const testParasRococo: EndpointOption[] = [
       Integritee: 'wss://rococo.api.integritee.network'
     },
     text: 'Integritee Network',
-    uiColor: '#658ea9',
-    uiLogo: nodesIntegriteeSVG
+    ui: {
+      color: '#658ea9',
+      logo: nodesIntegriteeSVG
+    }
   },
   {
     info: 'rococoKabocha',
@@ -215,8 +255,10 @@ export const testParasRococo: EndpointOption[] = [
       JelliedOwl: 'wss://kabsoup1.jelliedowl.com'
     },
     text: 'Kabocha (kabsoup)',
-    uiColor: 'repeating-radial-gradient(black, black 4px, yellow 5px)',
-    uiLogo: chainsKabochaSVG
+    ui: {
+      color: 'repeating-radial-gradient(black, black 4px, yellow 5px)',
+      logo: chainsKabochaSVG
+    }
   },
   {
     info: 'rococoLitentry',
@@ -225,8 +267,10 @@ export const testParasRococo: EndpointOption[] = [
       Litentry: 'wss://rpc.rococo-parachain-sg.litentry.io'
     },
     text: 'Litentry',
-    uiColor: '#0a6a08',
-    uiLogo: nodesLitentryPNG
+    ui: {
+      color: '#0a6a08',
+      logo: nodesLitentryPNG
+    }
   },
   {
     info: 'rococoMangata',
@@ -235,8 +279,10 @@ export const testParasRococo: EndpointOption[] = [
       Mangata: 'wss://roccoco-testnet-collator-01.mangatafinance.cloud'
     },
     text: 'Mangata',
-    uiColor: '#030408',
-    uiLogo: chainsMangataPNG
+    ui: {
+      color: '#030408',
+      logo: chainsMangataPNG
+    }
   },
   {
     info: 'rococoMd5',
@@ -245,8 +291,10 @@ export const testParasRococo: EndpointOption[] = [
       'Hashed Systems': 'wss://c1.md5.network'
     },
     text: 'MD5 Network',
-    uiColor: '#175bae',
-    uiLogo: nodesMd5PNG
+    ui: {
+      color: '#175bae',
+      logo: nodesMd5PNG
+    }
   },
   {
     info: 'rococoMoonsama',
@@ -255,8 +303,10 @@ export const testParasRococo: EndpointOption[] = [
       // Moonsama: 'wss://moonsama-testnet-rpc.moonsama.com' // https://github.com/polkadot-js/apps/issues/7526
     },
     text: 'Moonsama',
-    uiColor: '#000000',
-    uiLogo: chainsMoonsamaPNG
+    ui: {
+      color: '#000000',
+      logo: chainsMoonsamaPNG
+    }
   },
   {
     info: 'rococoNodle',
@@ -265,8 +315,10 @@ export const testParasRococo: EndpointOption[] = [
       OnFinality: 'wss://nodle-paradis.api.onfinality.io/public-ws'
     },
     text: 'Nodle',
-    uiColor: '#1ab394',
-    uiLogo: nodesNodleSVG
+    ui: {
+      color: '#1ab394',
+      logo: nodesNodleSVG
+    }
   },
   {
     homepage: 'https://www.my-oli.com/en/',
@@ -274,8 +326,10 @@ export const testParasRococo: EndpointOption[] = [
     paraId: 4023,
     providers: {},
     text: 'OLI',
-    uiColor: '#8CC63F',
-    uiLogo: chainsOliSVG
+    ui: {
+      color: '#8CC63F',
+      logo: chainsOliSVG
+    }
   },
   {
     homepage: 'https://parachain.origintrail.io',
@@ -285,8 +339,10 @@ export const testParasRococo: EndpointOption[] = [
       TraceLabs: 'wss://parachain-testnet-rpc.origin-trail.network/'
     },
     text: 'OriginTrail Testnet',
-    uiColor: '#0C0C0C',
-    uiLogo: chainsOrigintrailTestnetPNG
+    ui: {
+      color: '#0C0C0C',
+      logo: chainsOrigintrailTestnetPNG
+    }
   },
   {
     info: 'rococoPangolin',
@@ -295,8 +351,10 @@ export const testParasRococo: EndpointOption[] = [
       'Darwinia Network': 'wss://pangolin-parachain-rpc.darwinia.network'
     },
     text: 'Pangolin',
-    uiColor: '#4B30DD',
-    uiLogo: nodesPangolinSVG
+    ui: {
+      color: '#4B30DD',
+      logo: nodesPangolinSVG
+    }
   },
   {
     info: 'rococoKilt',
@@ -305,8 +363,10 @@ export const testParasRococo: EndpointOption[] = [
       'KILT Protocol': 'wss://rococo.kilt.io'
     },
     text: 'RILT',
-    uiColor: 'linear-gradient(45deg, #8c145a 0%, #f05a27 100%)',
-    uiLogo: nodesKiltPNG
+    ui: {
+      color: 'linear-gradient(45deg, #8c145a 0%, #f05a27 100%)',
+      logo: nodesKiltPNG
+    }
   },
   {
     homepage: 'http://robonomics.network/',
@@ -316,8 +376,10 @@ export const testParasRococo: EndpointOption[] = [
       Airalab: 'wss://rococo.rpc.robonomics.network'
     },
     text: 'Robonomics',
-    uiColor: '#2949d3',
-    uiLogo: nodesRobonomicsSVG
+    ui: {
+      color: '#2949d3',
+      logo: nodesRobonomicsSVG
+    }
   },
   {
     info: 'rocfinity',
@@ -326,8 +388,10 @@ export const testParasRococo: EndpointOption[] = [
       Efinity: 'wss://rpc.rococo.efinity.io'
     },
     text: 'Rocfinity',
-    uiColor: '#496ddb',
-    uiLogo: chainsRocfinitySVG
+    ui: {
+      color: '#496ddb',
+      logo: chainsRocfinitySVG
+    }
   },
   {
     info: 'snowbridge',
@@ -336,7 +400,9 @@ export const testParasRococo: EndpointOption[] = [
       // Snowfork: 'wss://rococo-rpc.snowbridge.network' // https://github.com/polkadot-js/apps/issues/8723
     },
     text: 'Snowbridge',
-    uiLogo: chainsSnowbridgePNG
+    ui: {
+      logo: chainsSnowbridgePNG
+    }
   },
   {
     info: 'rococoSubsocial',
@@ -345,8 +411,10 @@ export const testParasRococo: EndpointOption[] = [
       DappForce: 'wss://rco-para.subsocial.network'
     },
     text: 'SoonsocialX',
-    uiColor: '#b9018c',
-    uiLogo: nodesSoonsocialXPNG
+    ui: {
+      color: '#b9018c',
+      logo: nodesSoonsocialXPNG
+    }
   },
   {
     info: 'rococoSora',
@@ -355,8 +423,10 @@ export const testParasRococo: EndpointOption[] = [
       Soramitsu: 'wss://ws.parachain-collator-1.c1.stg1.sora2.soramitsu.co.jp'
     },
     text: 'SORA',
-    uiColor: '#2D2926',
-    uiLogo: nodesSoraSubstrateSVG
+    ui: {
+      color: '#2D2926',
+      logo: nodesSoraSubstrateSVG
+    }
   },
   {
     info: 'rococoSpreehafen',
@@ -365,8 +435,10 @@ export const testParasRococo: EndpointOption[] = [
       DataHighway: 'wss://spreehafen.datahighway.com'
     },
     text: 'Spreehafen',
-    uiColor: 'linear-gradient(-90deg, #9400D3 0%, #5A5CA9 50%, #00BFFF 100%)',
-    uiLogo: nodesDatahighwayPNG
+    ui: {
+      color: 'linear-gradient(-90deg, #9400D3 0%, #5A5CA9 50%, #00BFFF 100%)',
+      logo: nodesDatahighwayPNG
+    }
   },
   {
     homepage: 'https://totemaccounting.com/',
@@ -376,8 +448,10 @@ export const testParasRococo: EndpointOption[] = [
       Totem: 'wss://s-ui.kapex.network'
     },
     text: 'Stagex',
-    uiColor: 'linear-gradient(158deg, rgba(226,157,0,1) 0%, rgba(234,55,203,1) 100%)',
-    uiLogo: chainsTotemSVG
+    ui: {
+      color: 'linear-gradient(158deg, rgba(226,157,0,1) 0%, rgba(234,55,203,1) 100%)',
+      logo: chainsTotemSVG
+    }
   },
   {
     info: 'rococoSubzero',
@@ -386,7 +460,9 @@ export const testParasRococo: EndpointOption[] = [
       ZERO: 'wss://staging.para.sub.zero.io'
     },
     text: 'Subzero',
-    uiLogo: nodesZeroSVG
+    ui: {
+      logo: nodesZeroSVG
+    }
   },
   {
     info: 't0rn',
@@ -395,8 +471,10 @@ export const testParasRococo: EndpointOption[] = [
       t3rn: 'wss://ws.t0rn.io'
     },
     text: 't0rn',
-    uiColor: '#212322',
-    uiLogo: chainsT0rnPNG
+    ui: {
+      color: '#212322',
+      logo: chainsT0rnPNG
+    }
   },
   {
     info: 'tangle',
@@ -405,8 +483,10 @@ export const testParasRococo: EndpointOption[] = [
       Webb: 'wss://arana-alpha-1.webb.tools'
     },
     text: 'Tangle',
-    uiColor: '#483d8b',
-    uiLogo: chainsTanglePNG
+    ui: {
+      color: '#483d8b',
+      logo: chainsTanglePNG
+    }
   },
   {
     info: 'rococoTinkernet',
@@ -415,8 +495,10 @@ export const testParasRococo: EndpointOption[] = [
       // 'InvArch Team': 'wss://rococo.invarch.network' // https://github.com/polkadot-js/apps/issues/8266
     },
     text: 'Tinkernet',
-    uiColor: 'linear-gradient(90deg, rgba(253,52,166,1) 0%, rgba(22,213,239,1) 100%)',
-    uiLogo: chainsTinkerPNG
+    ui: {
+      color: 'linear-gradient(90deg, rgba(253,52,166,1) 0%, rgba(22,213,239,1) 100%)',
+      logo: chainsTinkerPNG
+    }
   },
   {
     info: 'rococoTuring',
@@ -425,8 +507,10 @@ export const testParasRococo: EndpointOption[] = [
       OAK: 'wss://rpc.turing-staging.oak.tech'
     },
     text: 'Turing Network (Staging)',
-    uiColor: '#A8278C',
-    uiLogo: chainsTuringPNG
+    ui: {
+      color: '#A8278C',
+      logo: chainsTuringPNG
+    }
   },
   {
     info: 'rococoUnitNetwork',
@@ -435,8 +519,10 @@ export const testParasRococo: EndpointOption[] = [
       UnitNetwork: 'wss://www.unitnode3.info:443'
     },
     text: 'Unit Network',
-    uiColor: '#a351ef',
-    uiLogo: nodesUnitnetworkPNG
+    ui: {
+      color: '#a351ef',
+      logo: nodesUnitnetworkPNG
+    }
   },
   {
     info: 'rococoVirto',
@@ -445,8 +531,10 @@ export const testParasRococo: EndpointOption[] = [
       // VirtoNetwork: 'wss://rococo.virtonetwork.xyz' // https://github.com/polkadot-js/apps/issues/8024
     },
     text: 'Virto',
-    uiColor: '#063970',
-    uiLogo: chainsVirtoPNG
+    ui: {
+      color: '#063970',
+      logo: chainsVirtoPNG
+    }
   },
   {
     info: 'rococoWatr',
@@ -455,8 +543,10 @@ export const testParasRococo: EndpointOption[] = [
       Watr: 'wss://rpc.dev.watr.org'
     },
     text: 'Watr Network',
-    uiColor: '#373b39',
-    uiLogo: chainsWatrPNG
+    ui: {
+      color: '#373b39',
+      logo: chainsWatrPNG
+    }
   },
   {
     info: 'rococoZeitgeist',
@@ -465,8 +555,10 @@ export const testParasRococo: EndpointOption[] = [
       Zeitgeist: 'wss://roc.zeitgeist.pm'
     },
     text: 'Zeitgeist Battery Station',
-    uiColor: 'linear-gradient(180deg, rgba(32,90,172,1) 0%, rgba(26,72,138,1) 50%, rgba(13,36,69,1) 100%)',
-    uiLogo: nodesZeitgeistPNG
+    ui: {
+      color: 'linear-gradient(180deg, rgba(32,90,172,1) 0%, rgba(26,72,138,1) 50%, rgba(13,36,69,1) 100%)',
+      logo: nodesZeitgeistPNG
+    }
   }
 ];
 
@@ -479,8 +571,10 @@ export const testParasRococoCommon: EndpointOption[] = [
     },
     teleport: [-1],
     text: 'Rockmine',
-    uiColor: '#77bb77',
-    uiLogo: nodesStatemineSVG
+    ui: {
+      color: '#77bb77',
+      logo: nodesStatemineSVG
+    }
   },
   {
     info: 'rococoContracts',
@@ -490,8 +584,10 @@ export const testParasRococoCommon: EndpointOption[] = [
     },
     teleport: [-1],
     text: 'Contracts',
-    uiColor: '#000000',
-    uiLogo: chainsRococoContractsPNG
+    ui: {
+      color: '#000000',
+      logo: chainsRococoContractsPNG
+    }
   },
   {
     homepage: 'https://encointer.org/',
@@ -502,8 +598,10 @@ export const testParasRococoCommon: EndpointOption[] = [
     },
     teleport: [-1],
     text: 'Encointer Lietaer',
-    uiColor: '#0000cc',
-    uiLogo: nodesEncointerBlueSVG
+    ui: {
+      color: '#0000cc',
+      logo: nodesEncointerBlueSVG
+    }
   },
   {
     info: 'rococoBridgehub',
@@ -513,7 +611,9 @@ export const testParasRococoCommon: EndpointOption[] = [
     },
     teleport: [-1],
     text: 'Bridgehub',
-    uiLogo: nodesBridgeHubBlackSVG
+    ui: {
+      logo: nodesBridgeHubBlackSVG
+    }
   }
 ];
 
@@ -534,6 +634,8 @@ export const testRelayRococo: EndpointOption = {
   },
   teleport: getTeleports(testParasRococoCommon),
   text: 'Rococo',
-  uiColor: '#6f36dc',
-  uiLogo: chainsRococoSVG
+  ui: {
+    color: '#6f36dc',
+    logo: chainsRococoSVG
+  }
 };
diff --git a/packages/apps-config/src/endpoints/testingRelayWestend.ts b/packages/apps-config/src/endpoints/testingRelayWestend.ts
index 0dc32181fb..eeeb56c334 100644
--- a/packages/apps-config/src/endpoints/testingRelayWestend.ts
+++ b/packages/apps-config/src/endpoints/testingRelayWestend.ts
@@ -23,7 +23,9 @@ export const testParasWestend: EndpointOption[] = [
       // Centrifuge: 'wss://fullnode-collator.charcoal.centrifuge.io' // https://github.com/polkadot-js/apps/issues/8219
     },
     text: 'Charcoal',
-    uiLogo: nodesCentrifugePNG
+    ui: {
+      logo: nodesCentrifugePNG
+    }
   },
   {
     info: 'integritee',
@@ -32,8 +34,10 @@ export const testParasWestend: EndpointOption[] = [
       // Integritee: 'wss://teerw1.integritee.network' // https://github.com/polkadot-js/apps/issues/8937
     },
     text: 'Integritee Network',
-    uiColor: '#658ea9',
-    uiLogo: nodesIntegriteeSVG
+    ui: {
+      color: '#658ea9',
+      logo: nodesIntegriteeSVG
+    }
   },
   {
     info: 'interlay',
@@ -42,7 +46,9 @@ export const testParasWestend: EndpointOption[] = [
       // Interlay: 'wss://api-westend.interlay.io/parachain' // https://github.com/polkadot-js/apps/issues/6261
     },
     text: 'Interlay',
-    uiLogo: chainsInterlaySVG
+    ui: {
+      logo: chainsInterlaySVG
+    }
   },
   {
     info: 'moonshadow',
@@ -51,8 +57,10 @@ export const testParasWestend: EndpointOption[] = [
       // PureStake: 'wss://wss.moonshadow.testnet.moonbeam.network' // https://github.com/polkadot-js/apps/issues/6181
     },
     text: 'Moonshadow',
-    uiColor: '#53cbc9',
-    uiLogo: nodesMoonshadowPNG
+    ui: {
+      color: '#53cbc9',
+      logo: nodesMoonshadowPNG
+    }
   },
   {
     homepage: 'https://darwinia.network/',
@@ -62,8 +70,10 @@ export const testParasWestend: EndpointOption[] = [
       // Darwinia: 'wss://pangoro-parachain-rpc.darwinia.network' // https://github.com/polkadot-js/apps/issues/6530
     },
     text: 'Pangoro',
-    uiColor: '#4B30DD',
-    uiLogo: nodesPangoroSVG
+    ui: {
+      color: '#4B30DD',
+      logo: nodesPangoroSVG
+    }
   },
   {
     homepage: 'https://kylin.network/',
@@ -73,7 +83,9 @@ export const testParasWestend: EndpointOption[] = [
       // 'Kylin Network': 'wss://westend.kylin-node.co.uk' // https://github.com/polkadot-js/apps/issues/8710
     },
     text: 'Pichiu',
-    uiLogo: nodesKylinPNG
+    ui: {
+      logo: nodesKylinPNG
+    }
   },
   {
     info: 'westendStandard',
@@ -82,7 +94,9 @@ export const testParasWestend: EndpointOption[] = [
       // 'Standard Protocol': 'wss://rpc.westend.standard.tech' // https://github.com/polkadot-js/apps/issues/8525
     },
     text: 'Standard',
-    uiLogo: chainsStandardPNG
+    ui: {
+      logo: chainsStandardPNG
+    }
   },
   {
     info: 'karura',
@@ -91,7 +105,9 @@ export const testParasWestend: EndpointOption[] = [
       // 'Acala Foundation': 'wss://karura-westend-rpc.aca-staging.network' // https://github.com/polkadot-js/apps/issues/5830
     },
     text: 'Wendala',
-    uiLogo: chainsKaruraSVG
+    ui: {
+      logo: chainsKaruraSVG
+    }
   },
   {
     info: 'whala',
@@ -100,8 +116,10 @@ export const testParasWestend: EndpointOption[] = [
       // Phala: 'wss://whala.phala.network/ws' // https://github.com/polkadot-js/apps/issues/6181
     },
     text: 'Whala',
-    uiColor: '#03f3f3',
-    uiLogo: nodesWhalaSVG
+    ui: {
+      color: '#03f3f3',
+      logo: nodesWhalaSVG
+    }
   },
   {
     homepage: 'https://www.kilt.io/',
@@ -111,8 +129,10 @@ export const testParasWestend: EndpointOption[] = [
       'KILT Protocol': 'wss://westend.kilt.io:9977'
     },
     text: 'WILT',
-    uiColor: '#8c145a',
-    uiLogo: nodesKiltPNG
+    ui: {
+      color: '#8c145a',
+      logo: nodesKiltPNG
+    }
   }
 ];
 
@@ -127,8 +147,10 @@ export const testParasWestendCommon: EndpointOption[] = [
     },
     teleport: [-1],
     text: 'Westmint',
-    uiColor: '#77bb77',
-    uiLogo: nodesStatemineSVG
+    ui: {
+      color: '#77bb77',
+      logo: nodesStatemineSVG
+    }
   },
   {
     info: 'westendCollectives',
@@ -138,8 +160,10 @@ export const testParasWestendCommon: EndpointOption[] = [
     },
     teleport: [-1],
     text: 'Collectives',
-    uiColor: '#e6777a',
-    uiLogo: 'fa;people-group'
+    ui: {
+      color: '#e6777a',
+      logo: 'fa;people-group'
+    }
   },
   {
     info: 'westendBridgeHub',
@@ -148,7 +172,9 @@ export const testParasWestendCommon: EndpointOption[] = [
       Parity: 'wss://westend-bridge-hub-rpc.polkadot.io'
     },
     text: 'BridgeHub',
-    uiLogo: nodesBridgeHubBlackSVG
+    ui: {
+      logo: nodesBridgeHubBlackSVG
+    }
   }
 ];
 
@@ -172,6 +198,8 @@ export const testRelayWestend: EndpointOption = {
   },
   teleport: getTeleports(testParasWestendCommon),
   text: 'Westend',
-  uiColor: '#da68a7',
-  uiLogo: nodesWestendColourSVG
+  ui: {
+    color: '#da68a7',
+    logo: nodesWestendColourSVG
+  }
 };
diff --git a/packages/apps-config/src/endpoints/types.ts b/packages/apps-config/src/endpoints/types.ts
index df52776adb..7035980242 100644
--- a/packages/apps-config/src/endpoints/types.ts
+++ b/packages/apps-config/src/endpoints/types.ts
@@ -10,8 +10,10 @@ interface BaseOption {
   paraId?: number;
   summary?: string;
   teleport?: number[];
-  uiColor?: string;
-  uiLogo?: string;
+  ui: {
+    color?: string;
+    logo?: string;
+  }
 }
 
 export interface EndpointOption extends BaseOption {
diff --git a/packages/apps-config/src/endpoints/util.ts b/packages/apps-config/src/endpoints/util.ts
index c5fe937a27..db5cea8c50 100644
--- a/packages/apps-config/src/endpoints/util.ts
+++ b/packages/apps-config/src/endpoints/util.ts
@@ -45,7 +45,7 @@ function expandLinked (input: LinkOption[]): LinkOption[] {
   }, []);
 }
 
-function expandEndpoint (t: TFunction, { dnslink, genesisHash, homepage, info, isChild, isDisabled, isUnreachable, linked, paraId, providers, teleport, text, uiColor, uiLogo }: EndpointOption, firstOnly: boolean, withSort: boolean): LinkOption[] {
+function expandEndpoint (t: TFunction, { dnslink, genesisHash, homepage, info, isChild, isDisabled, isUnreachable, linked, paraId, providers, teleport, text, ui }: EndpointOption, firstOnly: boolean, withSort: boolean): LinkOption[] {
   const hasProviders = Object.keys(providers).length !== 0;
   const base = {
     genesisHash,
@@ -57,8 +57,7 @@ function expandEndpoint (t: TFunction, { dnslink, genesisHash, homepage, info, i
     paraId,
     teleport,
     text,
-    uiColor,
-    uiLogo
+    ui
   };
 
   const result = Object
diff --git a/packages/apps-config/src/extensions/index.ts b/packages/apps-config/src/extensions/index.ts
index 9d16824f01..967f4c8a41 100644
--- a/packages/apps-config/src/extensions/index.ts
+++ b/packages/apps-config/src/extensions/index.ts
@@ -15,7 +15,7 @@ interface Known {
   all: Record<Browser, string>;
   desc: string;
   name: string;
-  uiLogo: string;
+  ui: { logo: string; }
 }
 
 // The list of known extensions including the links to tem on the store. This is used when
@@ -23,14 +23,16 @@ interface Known {
 // (Any known extension can and should be added here)
 
 export const knownExtensions: Record<string, Known> = {
-  'polksdot-js': {
+  'polkadot-js': {
     all: {
       chrome: 'https://chrome.google.com/webstore/detail/polkadot%7Bjs%7D-extension/mopnmbcafieddcagagdcbnhejhlodfdd',
       firefox: 'https://addons.mozilla.org/en-US/firefox/addon/polkadot-js-extension/'
     },
     desc: 'Basic account injection and signer',
     name: 'polkadot-js extension',
-    uiLogo: extensionsPolkadotJsSVG
+    ui: {
+      logo: extensionsPolkadotJsSVG
+    }
   }
 };
 
diff --git a/packages/apps-config/src/links/commonwealth.ts b/packages/apps-config/src/links/commonwealth.ts
index 16d8bf5b6c..5a58723eca 100644
--- a/packages/apps-config/src/links/commonwealth.ts
+++ b/packages/apps-config/src/links/commonwealth.ts
@@ -25,5 +25,5 @@ export const Commonwealth: ExternalDef = {
     democracyReferendum: 'proposal/referendum',
     treasury: 'proposal/treasuryproposal'
   },
-  uiLogo: externalCommonwealthPNG
+  ui: { logo: externalCommonwealthPNG }
 };
diff --git a/packages/apps-config/src/links/dotreasury.ts b/packages/apps-config/src/links/dotreasury.ts
index ac6f8cb8de..b509698d29 100644
--- a/packages/apps-config/src/links/dotreasury.ts
+++ b/packages/apps-config/src/links/dotreasury.ts
@@ -20,5 +20,5 @@ export const Dotreasury: ExternalDef = {
     tip: 'tips',
     treasury: 'proposals'
   },
-  uiLogo: externalDotreasurySVG
+  ui: { logo: externalDotreasurySVG }
 };
diff --git a/packages/apps-config/src/links/dotscanner.ts b/packages/apps-config/src/links/dotscanner.ts
index b1f448aa2b..1b7a2a0646 100644
--- a/packages/apps-config/src/links/dotscanner.ts
+++ b/packages/apps-config/src/links/dotscanner.ts
@@ -19,5 +19,5 @@ export const DotScanner: ExternalDef = {
     address: 'account',
     block: 'block'
   },
-  uiLogo: externalDotscannerPNG
+  ui: { logo: externalDotscannerPNG }
 };
diff --git a/packages/apps-config/src/links/kodadot.ts b/packages/apps-config/src/links/kodadot.ts
index 29112b795c..37d9db2e9a 100644
--- a/packages/apps-config/src/links/kodadot.ts
+++ b/packages/apps-config/src/links/kodadot.ts
@@ -26,5 +26,5 @@ export const KodaDot: ExternalDef = {
   paths: {
     address: 'account'
   },
-  uiLogo: externalKodadotPNG
+  ui: { logo: externalKodadotPNG }
 };
diff --git a/packages/apps-config/src/links/polkaholic.ts b/packages/apps-config/src/links/polkaholic.ts
index 35ddb453fb..cf231be69b 100644
--- a/packages/apps-config/src/links/polkaholic.ts
+++ b/packages/apps-config/src/links/polkaholic.ts
@@ -67,5 +67,5 @@ export const Polkaholic: ExternalDef = {
     block: 'blockhash',
     extrinsic: 'tx'
   },
-  uiLogo: externalPolkaholicPNG
+  ui: { logo: externalPolkaholicPNG }
 };
diff --git a/packages/apps-config/src/links/polkascan.ts b/packages/apps-config/src/links/polkascan.ts
index 6322ce670e..bb906954c0 100644
--- a/packages/apps-config/src/links/polkascan.ts
+++ b/packages/apps-config/src/links/polkascan.ts
@@ -27,5 +27,5 @@ export const Polkascan: ExternalDef = {
     techcomm: 'techcomm/proposal',
     treasury: 'treasury/proposal'
   },
-  uiLogo: externalPolkascanPNG
+  ui: { logo: externalPolkascanPNG }
 };
diff --git a/packages/apps-config/src/links/polkassembly.ts b/packages/apps-config/src/links/polkassembly.ts
index c1905843e7..ca5ae074a3 100644
--- a/packages/apps-config/src/links/polkassembly.ts
+++ b/packages/apps-config/src/links/polkassembly.ts
@@ -38,7 +38,7 @@ export const PolkassemblyIo: ExternalDef = {
     tip: 'tip',
     treasury: 'treasury'
   },
-  uiLogo: externalPolkassemblyPNG
+  ui: { logo: externalPolkassemblyPNG }
 };
 
 export const PolkassemblyNetwork: ExternalDef = {
diff --git a/packages/apps-config/src/links/polkastats.ts b/packages/apps-config/src/links/polkastats.ts
index 3e49f4193e..bbae0cad22 100644
--- a/packages/apps-config/src/links/polkastats.ts
+++ b/packages/apps-config/src/links/polkastats.ts
@@ -25,5 +25,5 @@ export const Polkastats: ExternalDef = {
     extrinsic: 'extrinsic',
     validator: 'validator'
   },
-  uiLogo: externalPolkastatsPNG
+  ui: { logo: externalPolkastatsPNG }
 };
diff --git a/packages/apps-config/src/links/singular.ts b/packages/apps-config/src/links/singular.ts
index a1101a52da..016af96f35 100644
--- a/packages/apps-config/src/links/singular.ts
+++ b/packages/apps-config/src/links/singular.ts
@@ -27,5 +27,5 @@ export const Singular: ExternalDef = {
   paths: {
     address: 'account'
   },
-  uiLogo: externalSingularSVG
+  ui: { logo: externalSingularSVG }
 };
diff --git a/packages/apps-config/src/links/statescan.ts b/packages/apps-config/src/links/statescan.ts
index aa0980ca05..4b0d756f20 100644
--- a/packages/apps-config/src/links/statescan.ts
+++ b/packages/apps-config/src/links/statescan.ts
@@ -20,5 +20,5 @@ export const Statescan: ExternalDef = {
     address: 'account',
     block: 'block'
   },
-  uiLogo: externalStatescanSVG
+  ui: { logo: externalStatescanSVG }
 };
diff --git a/packages/apps-config/src/links/subid.ts b/packages/apps-config/src/links/subid.ts
index 97948fc336..bfd2cfbea7 100644
--- a/packages/apps-config/src/links/subid.ts
+++ b/packages/apps-config/src/links/subid.ts
@@ -31,5 +31,5 @@ export const SubId: ExternalDef = {
   paths: {
     address: 'account'
   },
-  uiLogo: externalSubidSVG
+  ui: { logo: externalSubidSVG }
 };
diff --git a/packages/apps-config/src/links/subscan.ts b/packages/apps-config/src/links/subscan.ts
index fdfc7bd4cd..f64d5c4684 100644
--- a/packages/apps-config/src/links/subscan.ts
+++ b/packages/apps-config/src/links/subscan.ts
@@ -100,5 +100,5 @@ export const Subscan: ExternalDef = {
     treasury: 'treasury',
     validator: 'validator'
   },
-  uiLogo: externalSubscanPNG
+  ui: { logo: externalSubscanPNG }
 };
diff --git a/packages/apps-config/src/links/subsquare.ts b/packages/apps-config/src/links/subsquare.ts
index e19298bc22..42fea987c2 100644
--- a/packages/apps-config/src/links/subsquare.ts
+++ b/packages/apps-config/src/links/subsquare.ts
@@ -43,5 +43,5 @@ export const Subsquare: ExternalDef = {
     tip: 'treasury/tip',
     treasury: 'treasury/proposal'
   },
-  uiLogo: externalSubsquareSVG
+  ui: { logo: externalSubsquareSVG }
 };
diff --git a/packages/apps-config/src/links/types.ts b/packages/apps-config/src/links/types.ts
index 132ec98838..96791d168a 100644
--- a/packages/apps-config/src/links/types.ts
+++ b/packages/apps-config/src/links/types.ts
@@ -33,7 +33,7 @@ export interface ExternalDef {
   homepage: string;
   isActive: boolean;
   paths: LinkPath;
-  uiLogo: string;
+  ui: { logo: string; }
 
   create: (chain: string, path: string, data: BN | number | string, hash?: string) => string;
 }
diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx
index 4bf33fba41..8b3a716a6e 100644
--- a/packages/apps/src/Apps.tsx
+++ b/packages/apps/src/Apps.tsx
@@ -25,7 +25,7 @@ function Apps ({ className = '' }: Props): React.ReactElement<Props> {
   const uiHighlight = useMemo(
     () => isDevelopment
       ? undefined
-      : apiEndpoint?.uiColor,
+      : apiEndpoint?.ui.color,
     [apiEndpoint, isDevelopment]
   );
 
diff --git a/packages/apps/src/Endpoints/Network.tsx b/packages/apps/src/Endpoints/Network.tsx
index f66b29513b..7c5250108f 100644
--- a/packages/apps/src/Endpoints/Network.tsx
+++ b/packages/apps/src/Endpoints/Network.tsx
@@ -19,7 +19,7 @@ interface Props {
   value: Network;
 }
 
-function NetworkDisplay ({ apiUrl, className = '', setApiUrl, value: { isChild, isRelay, isUnreachable, name, nameRelay: relay, paraId, providers, uiLogo } }: Props): React.ReactElement<Props> {
+function NetworkDisplay ({ apiUrl, className = '', setApiUrl, value: { isChild, isRelay, isUnreachable, name, nameRelay: relay, paraId, providers, ui } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const isSelected = useMemo(
     () => providers.some(({ url }) => url === apiUrl),
@@ -49,7 +49,7 @@ function NetworkDisplay ({ apiUrl, className = '', setApiUrl, value: { isChild,
         <ChainImg
           className='endpointIcon'
           isInline
-          logo={uiLogo || 'empty'}
+          logo={ui.logo || 'empty'}
           withoutHl
         />
         <div className='endpointValue'>
diff --git a/packages/apps/src/Endpoints/index.tsx b/packages/apps/src/Endpoints/index.tsx
index 41618d09d2..f7efdf51a7 100644
--- a/packages/apps/src/Endpoints/index.tsx
+++ b/packages/apps/src/Endpoints/index.tsx
@@ -60,8 +60,7 @@ function combineEndpoints (endpoints: LinkOption[]): Group[] {
           nameRelay: e.textRelay as string,
           paraId: e.paraId,
           providers: [prov],
-          uiColor: e.uiColor,
-          uiLogo: e.uiLogo
+          ui: e.ui
         });
       }
     }
diff --git a/packages/apps/src/Endpoints/types.ts b/packages/apps/src/Endpoints/types.ts
index a1d46827f3..3f5fbd98f9 100644
--- a/packages/apps/src/Endpoints/types.ts
+++ b/packages/apps/src/Endpoints/types.ts
@@ -15,8 +15,10 @@ export interface Network {
     name: string;
     url: string;
   }[];
-  uiColor?: string;
-  uiLogo?: string;
+  ui: {
+    color?: string;
+    logo?: string;
+  }
 }
 
 export interface Group {
diff --git a/packages/page-parachains/src/Teleport.tsx b/packages/page-parachains/src/Teleport.tsx
index ff26b5639b..f48f89daaf 100644
--- a/packages/page-parachains/src/Teleport.tsx
+++ b/packages/page-parachains/src/Teleport.tsx
@@ -22,7 +22,7 @@ interface Props {
 const INVALID_PARAID = Number.MAX_SAFE_INTEGER;
 const XCM_LOC = ['xcm', 'xcmPallet', 'polkadotXcm'];
 
-function createOption ({ paraId, text, uiLogo }: LinkOption): Option {
+function createOption ({ paraId, text, ui }: LinkOption): Option {
   return {
     text: (
       <div
@@ -31,7 +31,7 @@ function createOption ({ paraId, text, uiLogo }: LinkOption): Option {
       >
         <ChainImg
           className='ui--Dropdown-icon'
-          logo={uiLogo}
+          logo={ui.logo}
         />
         <div className='ui--Dropdown-name'>{text}</div>
       </div>
diff --git a/packages/page-settings/src/Metadata/Extensions.tsx b/packages/page-settings/src/Metadata/Extensions.tsx
index 4d12d30313..5960e4faa7 100644
--- a/packages/page-settings/src/Metadata/Extensions.tsx
+++ b/packages/page-settings/src/Metadata/Extensions.tsx
@@ -25,11 +25,14 @@ function Extensions ({ chainInfo, className }: Props): React.ReactElement<Props>
   const { extensions } = useExtensions();
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [isBusy, toggleBusy] = useToggle();
+
   const options = useMemo(
     () => (extensions || []).map(({ extension: { name, version } }, value) =>
-      iconOption(`${name} ${version}`, value, (knownExtensions[name]?.uiLogo) || externalEmptySVG)),
+      iconOption(`${name} ${version}`, value, knownExtensions[name]?.ui.logo || externalEmptySVG)
+    ),
     [extensions]
   );
+
   const _updateMeta = useCallback(
     (): void => {
       if (chainInfo && extensions?.[selectedIndex]) {
diff --git a/packages/page-settings/src/Metadata/iconOption.tsx b/packages/page-settings/src/Metadata/iconOption.tsx
index 443706f35a..73dea930dd 100644
--- a/packages/page-settings/src/Metadata/iconOption.tsx
+++ b/packages/page-settings/src/Metadata/iconOption.tsx
@@ -8,7 +8,7 @@ interface Option {
   value: number | string;
 }
 
-export default function itemOption (label: string, value: string | number, img: unknown): Option {
+export default function itemOption (label: string, value: string | number, img: string): Option {
   return {
     text: (
       <div
@@ -18,7 +18,7 @@ export default function itemOption (label: string, value: string | number, img:
         <img
           alt={label}
           className='ui--Dropdown-icon'
-          src={img as string}
+          src={img}
         />
         <div className='ui--Dropdown-name'>{label}</div>
       </div>
diff --git a/packages/page-settings/src/useChainInfo.ts b/packages/page-settings/src/useChainInfo.ts
index 84e0c43dfd..8ba4c099a8 100644
--- a/packages/page-settings/src/useChainInfo.ts
+++ b/packages/page-settings/src/useChainInfo.ts
@@ -22,7 +22,7 @@ function useChainInfoImpl (): ChainInfo | null {
         chainType: isEthereum
           ? 'ethereum'
           : 'substrate',
-        color: apiEndpoint?.uiColor,
+        color: apiEndpoint?.ui.color,
         genesisHash: api.genesisHash.toHex(),
         icon: getSystemIcon(systemName, specName),
         metaCalls: base64Encode(api.runtimeMetadata.asCallsOnly.toU8a()),
diff --git a/packages/react-components/src/ChainImg.tsx b/packages/react-components/src/ChainImg.tsx
index e53c2cdff6..98f8db350c 100644
--- a/packages/react-components/src/ChainImg.tsx
+++ b/packages/react-components/src/ChainImg.tsx
@@ -22,7 +22,7 @@ interface Props {
 function ChainImg ({ className = '', isInline, logo, onClick, withoutHl }: Props): React.ReactElement<Props> {
   const { apiEndpoint } = useApi();
   const [isEmpty, img, isFa] = useMemo((): [boolean, unknown, boolean] => {
-    const found = logo || apiEndpoint?.uiLogo;
+    const found = logo || apiEndpoint?.ui.logo;
     const imgBase = found || externalEmptySVG;
     const [isFa, img] = !imgBase || imgBase === 'empty' || !(imgBase.startsWith('data:') || imgBase.startsWith('fa;'))
       ? [false, externalEmptySVG]
diff --git a/packages/react-components/src/LinkExternal.tsx b/packages/react-components/src/LinkExternal.tsx
index dd447e54d8..9a9c90493e 100644
--- a/packages/react-components/src/LinkExternal.tsx
+++ b/packages/react-components/src/LinkExternal.tsx
@@ -26,7 +26,7 @@ interface Props {
 function genLinks (systemChain: string, { data, hash, isText, type }: Props): React.ReactNode[] {
   return Object
     .entries(externalLinks)
-    .map(([name, { chains, create, homepage, isActive, paths, uiLogo }]): React.ReactNode | null => {
+    .map(([name, { chains, create, homepage, isActive, paths, ui }]): React.ReactNode | null => {
       const extChain = chains[systemChain];
       const extPath = paths[type];
 
@@ -44,7 +44,7 @@ function genLinks (systemChain: string, { data, hash, isText, type }: Props): Re
         >
           {isText
             ? name
-            : <img src={uiLogo} />
+            : <img src={ui.logo} />
           }
         </a>
       );
diff --git a/packages/react-components/src/ParaLink.tsx b/packages/react-components/src/ParaLink.tsx
index 1a472d5c17..47058bfc41 100644
--- a/packages/react-components/src/ParaLink.tsx
+++ b/packages/react-components/src/ParaLink.tsx
@@ -26,7 +26,7 @@ function ParaLink ({ className, id }: Props): React.ReactElement<Props> | null {
     return null;
   }
 
-  const { text, uiLogo, value } = links.length
+  const { text, ui, value } = links.length
     ? links[links.length - 1]
     : endpoints[0];
 
@@ -34,7 +34,7 @@ function ParaLink ({ className, id }: Props): React.ReactElement<Props> | null {
     <StyledDiv className={className}>
       <ChainImg
         isInline
-        logo={uiLogo || 'empty'}
+        logo={ui.logo || 'empty'}
         withoutHl
       />
       {links.length