diff --git a/package.json b/package.json
index d255f5af9d..4ee39bd608 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.31.0-beta.40",
+  "version": "0.31.0-beta.42",
   "private": true,
   "engines": {
     "node": ">=10.13.0",
diff --git a/packages/app-staking/src/Overview/Address.tsx b/packages/app-staking/src/Overview/Address.tsx
index 8aa507eab5..c44e508eef 100644
--- a/packages/app-staking/src/Overview/Address.tsx
+++ b/packages/app-staking/src/Overview/Address.tsx
@@ -4,10 +4,10 @@
 
 import { DerivedBalancesMap } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/ui-app/types';
-import { Nominators, RecentlyOfflineMap } from '../types';
+import { RecentlyOfflineMap } from '../types';
 
 import React from 'react';
-import { AccountId, Option, StakingLedger } from '@polkadot/types';
+import { AccountId, Balance, Option, StakingLedger, Exposure } from '@polkadot/types';
 import { withCalls, withMulti } from '@polkadot/ui-api/with';
 import { AddressMini, AddressRow, RecentlyOffline } from '@polkadot/ui-app';
 import { getAddrName } from '@polkadot/ui-app/util';
@@ -21,18 +21,18 @@ type Props = I18nProps & {
   defaultName: string,
   lastAuthor: string,
   lastBlock: string,
-  nominators: Nominators,
   recentlyOffline: RecentlyOfflineMap,
   session_nextKeyFor?: Option<AccountId>,
   staking_bonded?: Option<AccountId>,
-  staking_ledger?: Option<StakingLedger>
+  staking_ledger?: Option<StakingLedger>,
+  staking_stakers?: Exposure,
+  stashId?: string | null
 };
 
 type State = {
   controllerId: string,
   stashActive: string | null,
   stashTotal: string | null,
-  stashId: string | null,
   sessionId: string | null,
   badgeExpanded: boolean;
 };
@@ -48,7 +48,6 @@ class Address extends React.PureComponent<Props, State> {
       sessionId: null,
       stashActive: null,
       stashTotal: null,
-      stashId: null,
       badgeExpanded: false
     };
   }
@@ -57,6 +56,7 @@ class Address extends React.PureComponent<Props, State> {
     const ledger = staking_ledger
       ? staking_ledger.unwrapOr(null)
       : null;
+
     return {
       controllerId: !staking_bonded || staking_bonded.isNone
         ? prevState.controllerId
@@ -69,24 +69,24 @@ class Address extends React.PureComponent<Props, State> {
         : formatBalance(ledger.active),
       stashTotal: !ledger
         ? prevState.stashTotal
-        : formatBalance(ledger.total),
-      stashId: !ledger
-        ? prevState.stashId
-        : ledger.stash.toString()
+        : formatBalance(ledger.total)
     } as State;
   }
 
   render () {
-    const { address, lastAuthor, lastBlock } = this.props;
-    const { controllerId, stashActive, stashId } = this.state;
+    const { address, lastAuthor, lastBlock, stashId, staking_stakers } = this.props;
+    const { controllerId } = this.state;
     const isAuthor = [address, controllerId, stashId].includes(lastAuthor);
+    const bonded = staking_stakers && !staking_stakers.own.isZero()
+      ? [staking_stakers.own, staking_stakers.total.sub(staking_stakers.own)]
+      : undefined;
 
     return (
       <article key={stashId || controllerId}>
         <AddressRow
-          extraInfo={stashActive ? `bonded ${stashActive}` : undefined}
+          bonded={bonded}
           name={this.getDisplayName()}
-          value={stashId}
+          value={stashId || null}
           withBalance={false}
           withBonded
           withCopy={false}
@@ -97,7 +97,7 @@ class Address extends React.PureComponent<Props, State> {
           {this.renderOffline()}
         </AddressRow>
         {
-          isAuthor
+          isAuthor && stashId
             ? <div className='blockNumber'>#{lastBlock}</div>
             : null
         }
@@ -106,8 +106,7 @@ class Address extends React.PureComponent<Props, State> {
   }
 
   private getDisplayName = (): string | undefined => {
-    const { defaultName } = this.props;
-    const { stashId } = this.state;
+    const { defaultName, stashId } = this.props;
 
     if (!stashId) {
       return defaultName;
@@ -150,15 +149,12 @@ class Address extends React.PureComponent<Props, State> {
   }
 
   private renderNominators () {
-    const { nominators, t } = this.props;
-    const { stashId } = this.state;
-    const myNominators = stashId
-      ? Object.keys(nominators).filter((nominator) =>
-        nominators[nominator].indexOf(stashId) !== -1
-      )
+    const { staking_stakers, t } = this.props;
+    const nominators = staking_stakers
+      ? staking_stakers.others.map(({ who, value }): [AccountId, Balance] => [who, value])
       : [];
 
-    if (!myNominators.length) {
+    if (!nominators.length) {
       return null;
     }
 
@@ -167,14 +163,15 @@ class Address extends React.PureComponent<Props, State> {
         <summary>
           {t('Nominators ({{count}})', {
             replace: {
-              count: myNominators.length
+              count: nominators.length
             }
           })}
         </summary>
-        {myNominators.map((accountId) =>
+        {nominators.map(([who, bonded]) =>
           <AddressMini
-            key={accountId.toString()}
-            value={accountId}
+            bonded={bonded}
+            key={who.toString()}
+            value={who}
             withBonded
           />
         )}
@@ -183,8 +180,7 @@ class Address extends React.PureComponent<Props, State> {
   }
 
   private renderOffline () {
-    const { recentlyOffline } = this.props;
-    const { stashId } = this.state;
+    const { recentlyOffline, stashId } = this.props;
 
     if (!stashId || !recentlyOffline[stashId]) {
       return null;
@@ -206,8 +202,15 @@ export default withMulti(
   Address,
   translate,
   withCalls<Props>(
+    ['query.staking.bonded', { paramName: 'address' }],
     ['query.session.nextKeyFor', { paramName: 'address' }],
     ['query.staking.ledger', { paramName: 'address' }],
-    ['query.staking.bonded', { paramName: 'address' }]
+    ['query.staking.ledger', {
+      paramName: 'address',
+      propName: 'stashId',
+      transform: (ledger: Option<StakingLedger>) =>
+        ledger.unwrapOr({ stash: { toString: () => { return null; } } }).stash.toString()
+    }],
+    ['query.staking.stakers', { paramName: 'stashId' }]
   )
 );
diff --git a/packages/app-staking/src/Overview/CurrentList.tsx b/packages/app-staking/src/Overview/CurrentList.tsx
index dda062053b..bcd65d12d7 100644
--- a/packages/app-staking/src/Overview/CurrentList.tsx
+++ b/packages/app-staking/src/Overview/CurrentList.tsx
@@ -4,7 +4,7 @@
 
 import { DerivedBalancesMap } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/ui-app/types';
-import { Nominators, RecentlyOfflineMap } from '../types';
+import { RecentlyOfflineMap } from '../types';
 
 import React from 'react';
 
@@ -17,7 +17,6 @@ type Props = I18nProps & {
   lastAuthor?: string,
   lastBlock: string,
   next: Array<string>,
-  nominators: Nominators,
   recentlyOffline: RecentlyOfflineMap
 };
 
@@ -64,7 +63,7 @@ class CurrentList extends React.PureComponent<Props> {
   }
 
   private renderColumn (addresses: Array<string>, defaultName: string) {
-    const { balances, lastAuthor, lastBlock, nominators, recentlyOffline, t } = this.props;
+    const { balances, lastAuthor, lastBlock, recentlyOffline, t } = this.props;
 
     if (addresses.length === 0) {
       return (
@@ -82,7 +81,6 @@ class CurrentList extends React.PureComponent<Props> {
             key={address}
             lastAuthor={lastAuthor}
             lastBlock={lastBlock}
-            nominators={nominators}
             recentlyOffline={recentlyOffline}
           />
         ))}
diff --git a/packages/app-staking/src/Overview/index.tsx b/packages/app-staking/src/Overview/index.tsx
index 6c84cd1c94..cc6179f56a 100644
--- a/packages/app-staking/src/Overview/index.tsx
+++ b/packages/app-staking/src/Overview/index.tsx
@@ -23,7 +23,7 @@ const ZERO = new Balance(0);
 
 class Overview extends React.PureComponent<Props> {
   render () {
-    const { balances, chain_subscribeNewHead, controllers, nominators, recentlyOffline, validators } = this.props;
+    const { balances, chain_subscribeNewHead, controllers, recentlyOffline, validators } = this.props;
     const nextSorted = this.sortByBalance(
       controllers.filter((address) =>
         !validators.includes(address)
@@ -54,7 +54,6 @@ class Overview extends React.PureComponent<Props> {
           lastBlock={lastBlock}
           lastAuthor={lastAuthor}
           next={nextSorted}
-          nominators={nominators}
           recentlyOffline={recentlyOffline}
         />
       </div>
diff --git a/packages/app-staking/src/index.tsx b/packages/app-staking/src/index.tsx
index 746eb324a3..20e8fcab29 100644
--- a/packages/app-staking/src/index.tsx
+++ b/packages/app-staking/src/index.tsx
@@ -6,7 +6,7 @@ import { DerivedBalancesMap } from '@polkadot/api-derive/types';
 import { AppProps, I18nProps } from '@polkadot/ui-app/types';
 import { ApiProps } from '@polkadot/ui-api/types';
 import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-import { ComponentProps, Nominators, RecentlyOffline, RecentlyOfflineMap } from './types';
+import { ComponentProps, RecentlyOffline, RecentlyOfflineMap } from './types';
 
 import React from 'react';
 import { Route, Switch } from 'react-router';
@@ -28,13 +28,11 @@ type Props = AppProps & ApiProps & I18nProps & {
   balances?: DerivedBalancesMap,
   session_validators?: Array<AccountId>,
   staking_controllers?: [Array<AccountId>, Array<Option<AccountId>>],
-  staking_nominators?: [Array<AccountId>, Array<Array<AccountId>>],
   staking_recentlyOffline?: RecentlyOffline
 };
 
 type State = {
   controllers: Array<string>,
-  nominators: Nominators,
   recentlyOffline: RecentlyOfflineMap,
   stashes: Array<string>,
   tabs: Array<TabItem>,
@@ -51,7 +49,6 @@ class App extends React.PureComponent<Props, State> {
 
     this.state = {
       controllers: [],
-      nominators: {},
       recentlyOffline: {},
       stashes: [],
       tabs: [
@@ -68,18 +65,11 @@ class App extends React.PureComponent<Props, State> {
     };
   }
 
-  static getDerivedStateFromProps ({ staking_controllers = [[], []], session_validators = [], staking_nominators = [[], []], staking_recentlyOffline = [] }: Props): State {
+  static getDerivedStateFromProps ({ staking_controllers = [[], []], session_validators = [], staking_recentlyOffline = [] }: Props): State {
     return {
       controllers: staking_controllers[1].filter((optId) => optId.isSome).map((accountId) =>
         accountId.unwrap().toString()
       ),
-      nominators: staking_nominators[0].reduce((result, accountId, index) => {
-        result[accountId.toString()] = staking_nominators[1][index].map((accountId) =>
-          accountId.toString()
-        );
-
-        return result;
-      }, {} as Nominators),
       stashes: staking_controllers[0].map((accountId) => accountId.toString()),
       validators: session_validators.map((authorityId) =>
         authorityId.toString()
@@ -129,14 +119,13 @@ class App extends React.PureComponent<Props, State> {
 
   private renderComponent (Component: React.ComponentType<ComponentProps>) {
     return (): React.ReactNode => {
-      const { controllers, nominators, recentlyOffline, stashes, validators } = this.state;
+      const { controllers, recentlyOffline, stashes, validators } = this.state;
       const { balances = {} } = this.props;
 
       return (
         <Component
           balances={balances}
           controllers={controllers}
-          nominators={nominators}
           recentlyOffline={recentlyOffline}
           stashes={stashes}
           validators={validators}
@@ -152,7 +141,6 @@ export default withMulti(
   withCalls<Props>(
     'derive.staking.controllers',
     'query.session.validators',
-    'query.staking.nominators',
     'query.staking.recentlyOffline'
   ),
   withObservable(accountObservable.subject, { propName: 'allAccounts' })
diff --git a/packages/app-staking/src/types.ts b/packages/app-staking/src/types.ts
index 33ecb92225..e8ac59faa9 100644
--- a/packages/app-staking/src/types.ts
+++ b/packages/app-staking/src/types.ts
@@ -14,7 +14,6 @@ export type Nominators = {
 export type ComponentProps = {
   balances: DerivedBalancesMap,
   controllers: Array<string>,
-  nominators: Nominators,
   recentlyOffline: RecentlyOfflineMap,
   stashes: Array<string>,
   validators: Array<string>
diff --git a/packages/ui-app/src/AddressMini.tsx b/packages/ui-app/src/AddressMini.tsx
index 23f2f10884..65a094d178 100644
--- a/packages/ui-app/src/AddressMini.tsx
+++ b/packages/ui-app/src/AddressMini.tsx
@@ -6,7 +6,7 @@ import { BareProps } from './types';
 
 import BN from 'bn.js';
 import React from 'react';
-import { AccountId, AccountIndex, Address, Balance } from '@polkadot/types';
+import { AccountId, AccountIndex, Address } from '@polkadot/types';
 import { OfflineStatus } from '@polkadot/app-staking/types';
 import { RecentlyOffline } from '@polkadot/ui-app';
 
@@ -16,7 +16,8 @@ import BondedDisplay from './Bonded';
 import IdentityIcon from './IdentityIcon';
 
 type Props = BareProps & {
-  balance?: Balance | Array<Balance> | BN,
+  balance?: BN | Array<BN>,
+  bonded?: BN | Array<BN>,
   children?: React.ReactNode,
   isPadded?: boolean,
   isShort?: boolean,
@@ -94,7 +95,7 @@ export default class AddressMini extends React.PureComponent<Props> {
   }
 
   private renderBonded () {
-    const { value, withBonded = false } = this.props;
+    const { bonded, value, withBonded = false } = this.props;
 
     if (!withBonded || !value) {
       return null;
@@ -102,6 +103,7 @@ export default class AddressMini extends React.PureComponent<Props> {
 
     return (
       <BondedDisplay
+        bonded={bonded}
         className='ui--AddressSummary-balance'
         label=''
         params={value}
diff --git a/packages/ui-app/src/AddressSummary.tsx b/packages/ui-app/src/AddressSummary.tsx
index b61ad04bc0..ef552fae9e 100644
--- a/packages/ui-app/src/AddressSummary.tsx
+++ b/packages/ui-app/src/AddressSummary.tsx
@@ -4,8 +4,9 @@
 
 import { I18nProps } from './types';
 
+import BN from 'bn.js';
 import React from 'react';
-import { AccountId, AccountIndex, Address, Balance } from '@polkadot/types';
+import { AccountId, AccountIndex, Address } from '@polkadot/types';
 import { Nonce } from '@polkadot/ui-reactive';
 import { withCalls } from '@polkadot/ui-api';
 import BaseIdentityIcon from '@polkadot/ui-identicon';
@@ -18,8 +19,8 @@ import translate from './translate';
 
 export type Props = I18nProps & {
   accounts_idAndIndex?: [AccountId?, AccountIndex?],
-  balance?: Balance | Array<Balance>,
-  bonded?: Balance | Array<Balance>,
+  balance?: BN | Array<BN>,
+  bonded?: BN | Array<BN>,
   children?: React.ReactNode,
   extraInfo?: React.ReactNode,
   name?: string,
@@ -155,7 +156,7 @@ class AddressSummary extends React.PureComponent<Props> {
   }
 
   protected renderBonded () {
-    const { accounts_idAndIndex = [], t, value, withBonded } = this.props;
+    const { accounts_idAndIndex = [], bonded, t, value, withBonded } = this.props;
     const [_accountId] = accounts_idAndIndex;
     const accountId = _accountId || value;
 
@@ -165,6 +166,7 @@ class AddressSummary extends React.PureComponent<Props> {
 
     return (
       <BondedDisplay
+        bonded={bonded}
         className='ui--AddressSummary-bonded'
         label={t('bonded ')}
         params={accountId}
diff --git a/packages/ui-app/src/Balance.tsx b/packages/ui-app/src/Balance.tsx
index f9028fbcc9..a583f09231 100644
--- a/packages/ui-app/src/Balance.tsx
+++ b/packages/ui-app/src/Balance.tsx
@@ -6,14 +6,14 @@ import { BareProps } from './types';
 
 import BN from 'bn.js';
 import React from 'react';
-import { AccountId, AccountIndex, Address, Balance } from '@polkadot/types';
+import { AccountId, AccountIndex, Address } from '@polkadot/types';
 import { formatBalance } from '@polkadot/util';
-import RxBalance from '@polkadot/ui-reactive/Balance';
+import { Balance } from '@polkadot/ui-reactive';
 
 import { classes } from './util';
 
 export type Props = BareProps & {
-  balance?: Balance | Array<Balance> | BN,
+  balance?: BN | Array<BN>,
   label?: string,
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null,
   withLabel?: boolean
@@ -30,7 +30,7 @@ export default class BalanceDisplay extends React.PureComponent<Props> {
     return balance
       ? this.renderProvided()
       : (
-        <RxBalance
+        <Balance
           className={classes('ui--Balance', className)}
           label={label}
           params={params}
@@ -41,11 +41,6 @@ export default class BalanceDisplay extends React.PureComponent<Props> {
 
   private renderProvided () {
     const { balance, className, label, style } = this.props;
-
-    if (!balance) {
-      return null;
-    }
-
     let value = `${formatBalance(Array.isArray(balance) ? balance[0] : balance)}`;
 
     if (Array.isArray(balance)) {
diff --git a/packages/ui-app/src/Bonded.tsx b/packages/ui-app/src/Bonded.tsx
index e0ee752496..7fabd7f734 100644
--- a/packages/ui-app/src/Bonded.tsx
+++ b/packages/ui-app/src/Bonded.tsx
@@ -4,13 +4,16 @@
 
 import { BareProps } from './types';
 
+import BN from 'bn.js';
 import React from 'react';
 import { AccountId, AccountIndex, Address } from '@polkadot/types';
-import RxBonded from '@polkadot/ui-reactive/Bonded';
+import { formatBalance } from '@polkadot/util';
+import { Bonded } from '@polkadot/ui-reactive';
 
 import { classes } from './util';
 
 export type Props = BareProps & {
+  bonded?: BN | Array<BN>,
   label?: string,
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null,
   withLabel?: boolean
@@ -18,19 +21,44 @@ export type Props = BareProps & {
 
 export default class BondedDisplay extends React.PureComponent<Props> {
   render () {
-    const { params, className, label, style } = this.props;
+    const { bonded, params, className, label, style } = this.props;
 
     if (!params) {
       return null;
     }
 
+    return bonded
+      ? this.renderProvided()
+      : (
+        <Bonded
+          className={classes('ui--Bonded', className)}
+          label={label}
+          params={params}
+          style={style}
+        />
+      );
+  }
+
+  private renderProvided () {
+    const { bonded, className, label, style } = this.props;
+    let value = `${formatBalance(Array.isArray(bonded) ? bonded[0] : bonded)}`;
+
+    if (Array.isArray(bonded)) {
+      const totals = bonded.filter((value, index) => index !== 0);
+      const total = totals.reduce((total, value) => total.add(value), new BN(0)).gtn(0)
+        ? `(+${totals.map((bonded) => formatBalance(bonded)).join(', ')})`
+        : '';
+
+      value = `${value}  ${total}`;
+    }
+
     return (
-      <RxBonded
+      <div
         className={classes('ui--Bonded', className)}
-        label={label}
-        params={params}
         style={style}
-      />
+      >
+        {label}{value}
+      </div>
     );
   }
 }
diff --git a/packages/ui-reactive/src/index.ts b/packages/ui-reactive/src/index.ts
index 3e058dfdb8..e345eef166 100644
--- a/packages/ui-reactive/src/index.ts
+++ b/packages/ui-reactive/src/index.ts
@@ -4,6 +4,7 @@
 
 export { default as AccountIndex } from './AccountIndex';
 export { default as Balance } from './Balance';
+export { default as Bonded } from './Bonded';
 export { default as BestFinalized } from './BestFinalized';
 export { default as BestNumber } from './BestNumber';
 export { default as Chain } from './Chain';