diff --git a/packages/page-council/src/Overview/Summary.tsx b/packages/page-council/src/Overview/Summary.tsx
index 8e012bab2e..478e877709 100644
--- a/packages/page-council/src/Overview/Summary.tsx
+++ b/packages/page-council/src/Overview/Summary.tsx
@@ -35,7 +35,7 @@ function Summary ({ bestNumber, className = '', electionsInfo, hasElections }: P
             <CardSummary label={t<string>('runners up')}>
               {electionsInfo
                 ? <>{formatNumber(electionsInfo.runnersUp.length)}{electionsInfo.desiredRunnersUp && <>&nbsp;/&nbsp;{formatNumber(electionsInfo.desiredRunnersUp)}</>}</>
-                : <span className='--placeholder'>99</span>}
+                : <span className='--placeholder'>99 / 99</span>}
             </CardSummary>
             <CardSummary label={t<string>('candidates')}>
               {electionsInfo
diff --git a/packages/page-explorer/src/BlockInfo/ByHash.tsx b/packages/page-explorer/src/BlockInfo/ByHash.tsx
index d205b89e57..af63a05051 100644
--- a/packages/page-explorer/src/BlockInfo/ByHash.tsx
+++ b/packages/page-explorer/src/BlockInfo/ByHash.tsx
@@ -8,7 +8,7 @@ import type { EventRecord, RuntimeVersionPartial, SignedBlock } from '@polkadot/
 import React, { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 
-import { AddressSmall, Columar, LinkExternal, Table } from '@polkadot/react-components';
+import { AddressSmall, Columar, LinkExternal, MarkError, Table } from '@polkadot/react-components';
 import { useApi, useIsMountedRef } from '@polkadot/react-hooks';
 import { convertWeight } from '@polkadot/react-hooks/useWeight';
 import { formatNumber } from '@polkadot/util';
@@ -64,6 +64,10 @@ function BlockByHash ({ className = '', error, value }: Props): React.ReactEleme
     [api, runtimeVersion]
   );
 
+  useEffect((): void => {
+    error && setBlkError(error);
+  }, [error]);
+
   const systemEvents = useMemo(
     () => events && events.filter(({ record: { phase } }) => !phase.isApplyExtrinsic),
     [events]
@@ -124,7 +128,13 @@ function BlockByHash ({ className = '', error, value }: Props): React.ReactEleme
       />
       <Table header={header}>
         {blkError
-          ? <tr><td colSpan={6}>{t('Unable to retrieve the specified block details. {{error}}', { replace: { error: blkError.message } })}</td></tr>
+          ? (
+            <tr>
+              <td colSpan={6}>
+                <MarkError content={t<string>('Unable to retrieve the specified block details. {{error}}', { replace: { error: blkError.message } }) } />
+              </td>
+            </tr>
+          )
           : getBlock && getHeader && !getBlock.isEmpty && !getHeader.isEmpty && (
             <tr>
               <td className='address'>
diff --git a/packages/page-explorer/src/BlockInfo/ByNumber.tsx b/packages/page-explorer/src/BlockInfo/ByNumber.tsx
index 62e107f2b4..c1bdbb6989 100644
--- a/packages/page-explorer/src/BlockInfo/ByNumber.tsx
+++ b/packages/page-explorer/src/BlockInfo/ByNumber.tsx
@@ -5,7 +5,6 @@ import type { Hash } from '@polkadot/types/interfaces';
 
 import React, { useEffect, useState } from 'react';
 
-import { Spinner } from '@polkadot/react-components';
 import { useApi, useIsMountedRef } from '@polkadot/react-hooks';
 
 import BlockByHash from './ByHash';
@@ -27,18 +26,20 @@ function BlockByNumber ({ value }: Props): React.ReactElement<Props> | null {
         mountedRef.current && setState(result);
       })
       .catch((error: Error): void => {
+        console.error(1);
+
         mountedRef.current && setError(error);
       });
   }, [api, mountedRef, value]);
 
-  if (!getBlockHash && !error) {
-    return <Spinner />;
-  }
-
   return (
     <BlockByHash
       error={error}
-      value={getBlockHash ? getBlockHash.toHex() : null}
+      value={
+        getBlockHash
+          ? getBlockHash.toHex()
+          : null
+      }
     />
   );
 }
diff --git a/packages/page-explorer/src/BlockInfo/Summary.tsx b/packages/page-explorer/src/BlockInfo/Summary.tsx
index 75d8b91662..f642fd9c75 100644
--- a/packages/page-explorer/src/BlockInfo/Summary.tsx
+++ b/packages/page-explorer/src/BlockInfo/Summary.tsx
@@ -10,7 +10,7 @@ import { CardSummary, SummaryBox } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import { convertWeight } from '@polkadot/react-hooks/useWeight';
 import { FormatBalance } from '@polkadot/react-query';
-import { BN, formatNumber } from '@polkadot/util';
+import { BN, BN_ONE, BN_THREE, BN_TWO, formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 
@@ -49,47 +49,54 @@ function Summary ({ events, maxBlockWeight, signedBlock }: Props): React.ReactEl
     [events]
   );
 
-  if (!events || !signedBlock) {
-    return null;
-  }
-
   return (
     <SummaryBox>
       <section>
         {api.query.balances && (
           <>
             <CardSummary label={t<string>('deposits')}>
-              <FormatBalance value={deposits} />
+              <FormatBalance
+                className={deposits ? '' : '--placeholder'}
+                value={deposits || BN_ONE}
+              />
             </CardSummary>
             <CardSummary
               className='media--1000'
               label={t<string>('transfers')}
             >
-              <FormatBalance value={transfers} />
+              <FormatBalance
+                className={transfers ? '' : '--placeholder'}
+                value={transfers || BN_ONE}
+              />
             </CardSummary>
           </>
         )}
       </section>
-      {maxBlockWeight && (
-        <section>
-          <CardSummary
-            label={t<string>('block weight')}
-            progress={{
-              hideValue: true,
-              total: maxBlockWeight,
-              value: weight
-            }}
-          >
-            {formatNumber(weight)}
-          </CardSummary>
-        </section>
-      )}
+      <section>
+        <CardSummary
+          label={t<string>('block weight')}
+          progress={{
+            hideValue: true,
+            isBlurred: !(maxBlockWeight && weight),
+            total: (maxBlockWeight && weight) ? maxBlockWeight : BN_THREE,
+            value: (maxBlockWeight && weight) ? weight : BN_TWO
+          }}
+        >
+          {weight
+            ? formatNumber(weight)
+            : <span className='--placeholder'>999,999,999</span>}
+        </CardSummary>
+      </section>
       <section className='media--900'>
         <CardSummary label={t<string>('event count')}>
-          {formatNumber(events.length)}
+          {events
+            ? formatNumber(events.length)
+            : <span className='--placeholder'>99</span>}
         </CardSummary>
         <CardSummary label={t<string>('extrinsic count')}>
-          {formatNumber(signedBlock.block.extrinsics.length)}
+          {signedBlock
+            ? formatNumber(signedBlock.block.extrinsics.length)
+            : <span className='--placeholder'>99</span>}
         </CardSummary>
       </section>
     </SummaryBox>
diff --git a/packages/page-explorer/src/Events.tsx b/packages/page-explorer/src/Events.tsx
index bb2ff1098a..127e719b25 100644
--- a/packages/page-explorer/src/Events.tsx
+++ b/packages/page-explorer/src/Events.tsx
@@ -7,7 +7,7 @@ import React, { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { Table } from '@polkadot/react-components';
+import { MarkError, Table } from '@polkadot/react-components';
 import { formatNumber } from '@polkadot/util';
 
 import Event from './Event';
@@ -44,7 +44,7 @@ function Events ({ className = '', emptyLabel, error, eventClassName, events, la
             className={eventClassName}
             key='error'
           >
-            <td>{error.message}</td>
+            <td><MarkError content={t<string>('Unable to decode the block events. {{error}}', { replace: { error: error.message } })} /></td>
           </tr>
         )
         : events && events.map(({ blockHash, blockNumber, indexes, key, record }): React.ReactNode => (
diff --git a/packages/page-preimages/src/Preimages/Preimage.tsx b/packages/page-preimages/src/Preimages/Preimage.tsx
index 9fddac97cf..ea535e84db 100644
--- a/packages/page-preimages/src/Preimages/Preimage.tsx
+++ b/packages/page-preimages/src/Preimages/Preimage.tsx
@@ -25,8 +25,10 @@ function Preimage ({ className, value }: Props): React.ReactElement<Props> {
       <Hash value={value} />
       <Call value={info} />
       <td className='number media--1000'>
-        {info?.bytes
-          ? formatNumber(info.bytes.length)
+        {info
+          ? info.bytes
+            ? formatNumber(info.bytes.length)
+            : null
           : <span className='--placeholder'>999,999</span>
         }
       </td>
@@ -34,7 +36,7 @@ function Preimage ({ className, value }: Props): React.ReactElement<Props> {
         {info
           ? (
             <>
-              <div>{info.status?.type}{info.count !== 0 && <>&nbsp;/&nbsp;{formatNumber(info.count)}</>}</div>
+              {info.status && (<div>{info.status?.type}{info.count !== 0 && <>&nbsp;/&nbsp;{formatNumber(info.count)}</>}</div>)}
               <Free value={info} />
             </>
           )
diff --git a/packages/page-staking/src/Pools/Pool.tsx b/packages/page-staking/src/Pools/Pool.tsx
index 3392337623..14cd296069 100644
--- a/packages/page-staking/src/Pools/Pool.tsx
+++ b/packages/page-staking/src/Pools/Pool.tsx
@@ -54,7 +54,7 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props):
 
   return (
     <>
-      <tr className={className}>
+      <tr className={`${className} isFirst isExpanded ${isExpanded ? '' : 'isLast'}`}>
         <Table.Column.Id value={poolId} />
         <td className='start'>
           <div className={`${isExpanded ? '' : 'clamp'}`}>
@@ -116,7 +116,7 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props):
         </td>
       </tr>
       {info && isExpanded && (
-        <tr className={`${className} isExpanded`}>
+        <tr className={`${className} isExpanded isLast`}>
           <td colSpan={4}>
             <div className='label-column-right'>
               <div className='label'>{t('creator')}</div>
diff --git a/packages/page-staking/src/Validators/Address/StakeOther.tsx b/packages/page-staking/src/Validators/Address/StakeOther.tsx
index ae4919c35f..f2a49c30d1 100644
--- a/packages/page-staking/src/Validators/Address/StakeOther.tsx
+++ b/packages/page-staking/src/Validators/Address/StakeOther.tsx
@@ -12,23 +12,21 @@ import { BN, BN_ZERO } from '@polkadot/util';
 
 interface Props {
   stakeOther?: BN;
-  nominators: NominatorValue[];
+  nominators?: NominatorValue[];
 }
 
 function extractFunction (all: NominatorValue[]): null | [number, () => React.ReactNode[]] {
-  return all.length
-    ? [
-      all.length,
-      () => all.map(({ nominatorId, value }): React.ReactNode =>
-        <AddressMini
-          bonded={value}
-          key={nominatorId}
-          value={nominatorId}
-          withBonded
-        />
-      )
-    ]
-    : null;
+  return [
+    all.length,
+    () => all.map(({ nominatorId, value }): React.ReactNode =>
+      <AddressMini
+        bonded={value}
+        key={nominatorId}
+        value={nominatorId}
+        withBonded
+      />
+    )
+  ];
 }
 
 function sumValue (all: { value: BN }[]): BN {
@@ -41,7 +39,11 @@ function sumValue (all: { value: BN }[]): BN {
   return total;
 }
 
-function extractTotals (maxPaid: BN | undefined, nominators: NominatorValue[], stakeOther?: BN): [null | [number, () => React.ReactNode[]], BN, null | [number, () => React.ReactNode[]], BN] {
+function extractTotals (maxPaid: BN | undefined, nominators?: NominatorValue[], stakeOther?: BN): [null | [number, () => React.ReactNode[]], BN, null | [number, () => React.ReactNode[]], BN] {
+  if (!nominators) {
+    return [null, BN_ZERO, null, BN_ZERO];
+  }
+
   const sorted = nominators.sort((a, b) => b.value.cmp(a.value));
 
   if (!maxPaid || maxPaid.gtn(sorted.length)) {
@@ -65,18 +67,22 @@ function StakeOther ({ nominators, stakeOther }: Props): React.ReactElement<Prop
     [api, nominators, stakeOther]
   );
 
+  console.log(nominators?.length, rewarded);
+
   return (
     <td className='expand all'>
-      <ExpanderScroll
-        className={rewarded ? '' : '--placeholder'}
-        renderChildren={rewarded && rewarded[1]}
-        summary={
-          <FormatBalance
-            labelPost={` (${rewarded ? rewarded[0] : '0'})`}
-            value={rewardedTotal}
-          />
-        }
-      />
+      {(!rewarded || rewarded[0] !== 0) && (
+        <ExpanderScroll
+          className={rewarded ? '' : '--placeholder'}
+          renderChildren={rewarded && rewarded[1]}
+          summary={
+            <FormatBalance
+              labelPost={` (${rewarded ? rewarded[0] : '0'})`}
+              value={rewardedTotal}
+            />
+          }
+        />
+      )}
       {unrewarded && (
         <ExpanderScroll
           className='stakeOver'
diff --git a/packages/page-staking/src/Validators/Address/index.tsx b/packages/page-staking/src/Validators/Address/index.tsx
index df5ec0041f..442cae74d4 100644
--- a/packages/page-staking/src/Validators/Address/index.tsx
+++ b/packages/page-staking/src/Validators/Address/index.tsx
@@ -44,14 +44,14 @@ interface Props {
 interface StakingState {
   isChilled?: boolean;
   commission?: string;
-  nominators: NominatorValue[];
+  nominators?: NominatorValue[];
   stakeTotal?: BN;
   stakeOther?: BN;
   stakeOwn?: BN;
 }
 
 function expandInfo ({ exposure, validatorPrefs }: ValidatorInfo, minCommission?: BN): StakingState {
-  let nominators: NominatorValue[] = [];
+  let nominators: NominatorValue[] | undefined;
   let stakeTotal: BN | undefined;
   let stakeOther: BN | undefined;
   let stakeOwn: BN | undefined;
@@ -99,7 +99,7 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
   const { commission, isChilled, nominators, stakeOther, stakeOwn } = useMemo(
     () => validatorInfo
       ? expandInfo(validatorInfo, minCommission)
-      : { nominators: [] },
+      : {},
     [minCommission, validatorInfo]
   );
 
@@ -124,7 +124,7 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
 
   return (
     <>
-      <tr className={`${className} isFirst ${isExpanded ? 'packedBottom' : 'isLast'}`}>
+      <tr className={`${className} isExpanded isFirst ${isExpanded ? 'packedBottom' : 'isLast'}`}>
         <Table.Column.Favorite
           address={address}
           isFavorite={isFavorite}
diff --git a/packages/page-tech-comm/src/Overview/Summary.tsx b/packages/page-tech-comm/src/Overview/Summary.tsx
index 0c5323c92a..b9aab36ec4 100644
--- a/packages/page-tech-comm/src/Overview/Summary.tsx
+++ b/packages/page-tech-comm/src/Overview/Summary.tsx
@@ -22,16 +22,18 @@ function Summary ({ className = '', members, proposalHashes, type }: Props): Rea
       <CardSummary label={t<string>('members')}>
         {formatNumber(members.length)}
       </CardSummary>
-      {proposalCount && (
-        <section>
-          <CardSummary label={t<string>('proposals')}>
-            {formatNumber(proposalHashes?.length)}
-          </CardSummary>
-          <CardSummary label={t<string>('total')}>
-            {formatNumber(proposalCount)}
-          </CardSummary>
-        </section>
-      )}
+      <section>
+        <CardSummary label={t<string>('proposals')}>
+          {proposalHashes
+            ? formatNumber(proposalHashes?.length)
+            : <span className='--placeholder'>99</span>}
+        </CardSummary>
+        <CardSummary label={t<string>('total')}>
+          {proposalCount
+            ? formatNumber(proposalCount)
+            : <span className='--placeholder'>99</span>}
+        </CardSummary>
+      </section>
     </SummaryBox>
   );
 }
diff --git a/packages/react-components/src/CardSummary.tsx b/packages/react-components/src/CardSummary.tsx
index d46d9c8958..e95fd2db24 100644
--- a/packages/react-components/src/CardSummary.tsx
+++ b/packages/react-components/src/CardSummary.tsx
@@ -87,7 +87,7 @@ function CardSummary ({ children, className = '', help, label, progress }: Props
                     }`
                     : (
                       <BlockToTime
-                        className='timer'
+                        className={`${progress.isBlurred ? '--placeholder' : ''} timer`}
                         value={progress.total.sub(progress.value)}
                       />
                     )
diff --git a/packages/react-components/src/LinkExternal.tsx b/packages/react-components/src/LinkExternal.tsx
index aa06e44b14..2ab00e9ce3 100644
--- a/packages/react-components/src/LinkExternal.tsx
+++ b/packages/react-components/src/LinkExternal.tsx
@@ -73,7 +73,7 @@ function LinkExternal ({ className = '', data, hash, isSidebar, isSmall, isText,
       <div className='links'>
         {links.length
           ? links.map((link, index) => <span key={index}>{link}</span>)
-          : <label>{t('none')}</label>
+          : <div>{t<string>('none')}</div>
         }
       </div>
     </div>