diff --git a/packages/page-council/src/Overview/Voters.tsx b/packages/page-council/src/Overview/Voters.tsx
index 14ae6f5a34..60e8fe7c66 100644
--- a/packages/page-council/src/Overview/Voters.tsx
+++ b/packages/page-council/src/Overview/Voters.tsx
@@ -19,7 +19,14 @@ function Voters ({ balance, voters }: Props): React.ReactElement<Props> | null {
   }
 
   return (
-    <Expander summary={<><FormatBalance value={balance} />&nbsp;({voters.length})</>}>
+    <Expander
+      summary={
+        <FormatBalance
+          labelPost={` (${voters.length})`}
+          value={balance}
+        />
+      }
+    >
       {voters.map((who): React.ReactNode =>
         <AddressMini
           key={who.toString()}
diff --git a/packages/page-staking/src/Overview/Address/StakeOther.tsx b/packages/page-staking/src/Overview/Address/StakeOther.tsx
index 20ecea9a9c..0ea3a499bb 100644
--- a/packages/page-staking/src/Overview/Address/StakeOther.tsx
+++ b/packages/page-staking/src/Overview/Address/StakeOther.tsx
@@ -8,7 +8,6 @@ import BN from 'bn.js';
 import React from 'react';
 import { AddressMini, Expander } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
-import { formatNumber } from '@polkadot/util';
 
 interface Props {
   stakeOther?: BN;
@@ -21,9 +20,10 @@ function StakeOther ({ nominators, stakeOther }: Props): React.ReactElement<Prop
       {stakeOther?.gtn(0) && (
         <>
           <Expander summary={
-            <FormatBalance value={stakeOther}>
-              &nbsp;({formatNumber(nominators.length)})
-            </FormatBalance>
+            <FormatBalance
+              labelPost={` (${nominators.length})`}
+              value={stakeOther}
+            />
           }>
             {nominators.map(([who, bonded]): React.ReactNode =>
               <AddressMini
diff --git a/packages/page-staking/src/Overview/Address/index.tsx b/packages/page-staking/src/Overview/Address/index.tsx
index dcb0514884..ed05c9fd92 100644
--- a/packages/page-staking/src/Overview/Address/index.tsx
+++ b/packages/page-staking/src/Overview/Address/index.tsx
@@ -155,7 +155,7 @@ function Address ({ address, className, filterName, hasQueries, isAuthor, isElec
         onlineCount={onlineCount}
         onlineMessage={onlineMessage}
       />
-      <td className={`address ${isMain ? 'all' : ''}`}>
+      <td className='address'>
         <AddressSmall value={address} />
       </td>
       {isMain
diff --git a/packages/page-staking/src/Targets/Validator.tsx b/packages/page-staking/src/Targets/Validator.tsx
index ff9cc11dd4..ccb4051a8d 100644
--- a/packages/page-staking/src/Targets/Validator.tsx
+++ b/packages/page-staking/src/Targets/Validator.tsx
@@ -44,7 +44,12 @@ function Validator ({ info: { accountId, bondOther, bondOwn, bondTotal, commissi
       </td>
       <td className='number together'><FormatBalance value={bondTotal} /></td>
       <td className='number together'><FormatBalance value={bondOwn} /></td>
-      <td className='number together'><FormatBalance value={bondOther} >&nbsp;({formatNumber(numNominators)})</FormatBalance></td>
+      <td className='number together'>
+        <FormatBalance
+          labelPost={` (${numNominators})`}
+          value={bondOther}
+        />
+      </td>
       <td className='number together'><FormatBalance value={rewardPayout} /></td>
       <td>
         <Icon
diff --git a/packages/react-api/src/Api.tsx b/packages/react-api/src/Api.tsx
index 2abe5412d4..c3cacbf8f5 100644
--- a/packages/react-api/src/Api.tsx
+++ b/packages/react-api/src/Api.tsx
@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { InjectedExtension } from '@polkadot/extension-inject/types';
-import { ChainProperties } from '@polkadot/types/interfaces';
+import { ChainProperties, ChainType } from '@polkadot/types/interfaces';
 import { ApiProps, ApiState } from './types';
 
 import React, { useContext, useEffect, useMemo, useState } from 'react';
@@ -40,6 +40,7 @@ interface ChainData {
   injectedAccounts: InjectedAccountExt[];
   properties: ChainProperties;
   systemChain: string;
+  systemChainType: ChainType;
   systemName: string;
   systemVersion: string;
 }
@@ -57,22 +58,23 @@ let api: ApiPromise;
 export { api };
 
 async function retrieve (api: ApiPromise): Promise<ChainData> {
-  const [properties, systemChain, systemName, systemVersion, injectedAccounts] = await Promise.all([
+  const [properties, systemChain, systemChainType, systemName, systemVersion, injectedAccounts] = await Promise.all([
     api.rpc.system.properties(),
     api.rpc.system.chain(),
+    api.rpc.system.chainType
+      ? api.rpc.system.chainType()
+      : Promise.resolve(registry.createType('ChainType', 'Live')),
     api.rpc.system.name(),
     api.rpc.system.version(),
     injectedPromise
       .then(() => web3Accounts())
-      .then((accounts): InjectedAccountExt[] =>
-        accounts.map(({ address, meta }): InjectedAccountExt => ({
-          address,
-          meta: {
-            ...meta,
-            name: `${meta.name} (${meta.source === 'polkadot-js' ? 'extension' : meta.source})`
-          }
-        }))
-      )
+      .then((accounts) => accounts.map(({ address, meta }): InjectedAccountExt => ({
+        address,
+        meta: {
+          ...meta,
+          name: `${meta.name} (${meta.source === 'polkadot-js' ? 'extension' : meta.source})`
+        }
+      })))
       .catch((error): InjectedAccountExt[] => {
         console.error('web3Enable', error);
 
@@ -84,21 +86,22 @@ async function retrieve (api: ApiPromise): Promise<ChainData> {
     injectedAccounts,
     properties,
     systemChain: (systemChain || '<unknown>').toString(),
+    systemChainType,
     systemName: systemName.toString(),
     systemVersion: systemVersion.toString()
   };
 }
 
 async function loadOnReady (api: ApiPromise): Promise<ApiState> {
-  const { injectedAccounts, properties, systemChain, systemName, systemVersion } = await retrieve(api);
+  const { injectedAccounts, properties, systemChain, systemChainType, systemName, systemVersion } = await retrieve(api);
   const ss58Format = uiSettings.prefix === -1
     ? properties.ss58Format.unwrapOr(DEFAULT_SS58).toNumber()
     : uiSettings.prefix;
   const tokenSymbol = properties.tokenSymbol.unwrapOr(undefined)?.toString();
   const tokenDecimals = properties.tokenDecimals.unwrapOr(DEFAULT_DECIMALS).toNumber();
-  const isDevelopment = isTestChain(systemChain);
+  const isDevelopment = systemChainType.isDevelopment || systemChainType.isLocal || isTestChain(systemChain);
 
-  console.log('api: found chain', systemChain, JSON.stringify(properties));
+  console.log(`chain: ${systemChain} (${systemChainType}), ${JSON.stringify(properties)}`);
 
   // explicitly override the ss58Format as specified
   registry.setChainProperties(registry.createType('ChainProperties', { ...properties, ss58Format }));
diff --git a/packages/react-components/src/AddressInfo.tsx b/packages/react-components/src/AddressInfo.tsx
index cabd7b4fa9..2b81324776 100644
--- a/packages/react-components/src/AddressInfo.tsx
+++ b/packages/react-components/src/AddressInfo.tsx
@@ -9,7 +9,7 @@ import { BareProps } from './types';
 import BN from 'bn.js';
 import React from 'react';
 import styled from 'styled-components';
-import { formatBalance, formatNumber, isObject } from '@polkadot/util';
+import { formatBalance, formatNumber, hexToString, isObject } from '@polkadot/util';
 import { Expander, Icon, Tooltip } from '@polkadot/react-components';
 import { withCalls, withMulti } from '@polkadot/react-api/hoc';
 import { useAccounts } from '@polkadot/react-hooks';
@@ -256,12 +256,12 @@ function renderBalances (props: Props, allAccounts: string[], t: (key: string) =
               name='info circle'
             />
             <Tooltip
-              text={balancesAll.lockedBreakdown.map(({ amount, reasons }, index): React.ReactNode => (
+              text={balancesAll.lockedBreakdown.map(({ amount, id, reasons }, index): React.ReactNode => (
                 <div key={index}>
                   {amount.isMax()
                     ? t('everything')
                     : formatBalance(amount, { forceUnit: '-' })
-                  }<div className='faded'>{reasons.toString()}</div>
+                  }{id && <div className='faded'>{hexToString(id.toHex())}</div>}<div className='faded'>{reasons.toString()}</div>
                 </div>
               ))}
               trigger={`${address}-locks-trigger`}
diff --git a/packages/react-components/src/Expander.tsx b/packages/react-components/src/Expander.tsx
index 66c7e0849f..143d839e60 100644
--- a/packages/react-components/src/Expander.tsx
+++ b/packages/react-components/src/Expander.tsx
@@ -102,6 +102,10 @@ export default React.memo(styled(Expander)`
     min-width: 12rem;
     overflow: hidden;
 
+    .ui--Expander-summary-header > .ui--FormatBalance {
+      min-width: 12rem;
+    }
+
     > div {
       overflow: hidden;
       text-overflow: ellipsis;
diff --git a/packages/react-components/src/Tooltip.tsx b/packages/react-components/src/Tooltip.tsx
index fc76aa1d6c..b0193e0e6b 100644
--- a/packages/react-components/src/Tooltip.tsx
+++ b/packages/react-components/src/Tooltip.tsx
@@ -85,10 +85,15 @@ export default React.memo(styled(Tooltip)`
   }
 
   .faded {
+    margin-top: -0.25rem;
     opacity: 0.75 !important;
     font-size: 0.75em !important;
   }
 
+  .faded+.faded {
+    margin-top: -0.5rem;
+  }
+
   .row+.row {
     margin-top: 0.5rem;
   }
diff --git a/packages/react-query/src/FormatBalance.tsx b/packages/react-query/src/FormatBalance.tsx
index b084e01eaa..652f96c541 100644
--- a/packages/react-query/src/FormatBalance.tsx
+++ b/packages/react-query/src/FormatBalance.tsx
@@ -16,6 +16,7 @@ interface Props extends BareProps {
   children?: React.ReactNode;
   isShort?: boolean;
   label?: React.ReactNode;
+  labelPost?: React.ReactNode;
   value?: Compact<any> | BN | string | null | 'all';
   withSi?: boolean;
 }
@@ -48,7 +49,7 @@ function format (value: Compact<any> | BN | string, currency: string, withSi?: b
 //   return <>{prefix}.<span className='balance-postfix'>{`000${postfix || ''}`.slice(-3)}</span>{unit === '-' ? '' : unit}</>;
 // }
 
-function FormatBalance ({ children, className, isShort, label, value, withSi }: Props): React.ReactElement<Props> {
+function FormatBalance ({ children, className, isShort, label, labelPost, value, withSi }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [currency] = useState(formatBalance.getDefaults().unit);
 
@@ -60,7 +61,7 @@ function FormatBalance ({ children, className, isShort, label, value, withSi }:
             ? t('everything')
             : format(value, currency, withSi, isShort)
           : '-'
-      }</span>{children}
+      }</span>{labelPost}{children}
     </div>
   );
 }