diff --git a/packages/page-staking/src/Legend.tsx b/packages/page-staking/src/Legend.tsx
index ab22e5513d..51bb4db85d 100644
--- a/packages/page-staking/src/Legend.tsx
+++ b/packages/page-staking/src/Legend.tsx
@@ -6,7 +6,7 @@ import type { BN } from '@polkadot/util';
 import React from 'react';
 import styled from 'styled-components';
 
-import { Badge, Icon } from '@polkadot/react-components';
+import { Badge, Tag } from '@polkadot/react-components';
 
 import { useTranslation } from './translate';
 
@@ -26,7 +26,7 @@ function Legend ({ className, isRelay, minCommission }: Props): React.ReactEleme
           color='blue'
           icon='chevron-right'
         />
-        {t('Next session')}
+        <span>{t('Next session')}</span>
       </span>
       {minCommission && (
         <span>
@@ -34,7 +34,7 @@ function Legend ({ className, isRelay, minCommission }: Props): React.ReactEleme
             color='red'
             icon='cancel'
           />
-          {t('Chilled')}
+          <span>{t('Chilled')}</span>
         </span>
       )}
       {isRelay && (
@@ -43,7 +43,7 @@ function Legend ({ className, isRelay, minCommission }: Props): React.ReactEleme
             color='purple'
             icon='vector-square'
           />
-          {t('Para validator')}
+          <span>{t('Para validator')}</span>
         </span>
       )}
       <span>
@@ -51,42 +51,49 @@ function Legend ({ className, isRelay, minCommission }: Props): React.ReactEleme
           color='green'
           info='5'
         />
-        {t('Produced blocks')}
+        <span>{t('Produced blocks')}</span>
       </span>
       <span>
         <Badge
           color='green'
-          info={<Icon icon='envelope' />}
+          icon='envelope'
         />
-        {t('Online message')}
+        <span>{t('Online message')}</span>
       </span>
       <span>
         <Badge
           color='green'
           icon='hand-paper'
         />
-        {t('Nominating')}
+        <span>{t('Nominating')}</span>
       </span>
       <span>
         <Badge
           color='red'
           icon='balance-scale-right'
         />
-        {t('Oversubscribed')}
+        <span>{t('Oversubscribed')}</span>
       </span>
       <span>
         <Badge
           color='red'
           icon='skull-crossbones'
         />
-        {t('Slashed')}
+        <span>{t('Slashed')}</span>
       </span>
       <span>
         <Badge
           color='red'
           icon='user-slash'
         />
-        {t('Blocks nominations')}
+        <span>{t('Blocks nominations')}</span>
+      </span>
+      <span>
+        <Tag
+          color='lightgrey'
+          label='1,220'
+        />
+        <span>{t('Era points')}</span>
       </span>
     </div>
   );
@@ -97,11 +104,19 @@ export default React.memo(styled(Legend)`
   padding: 1rem 0.5rem;
   text-align: center;
 
-  .ui--Badge {
+  .ui--Badge, .ui--Tag {
     margin-right: 0.5rem;
   }
 
-  span+span {
-    margin-left: 1rem;
+  span {
+    vertical-align: middle;
+
+    * {
+      vertical-align: middle;
+    }
+
+    + span {
+      margin-left: 1rem;
+    }
   }
 `);
diff --git a/packages/page-staking/src/Validators/Address/Status.tsx b/packages/page-staking/src/Validators/Address/Status.tsx
index b0747aeb4a..d24f9e1a0a 100644
--- a/packages/page-staking/src/Validators/Address/Status.tsx
+++ b/packages/page-staking/src/Validators/Address/Status.tsx
@@ -5,7 +5,7 @@ import type { BN } from '@polkadot/util';
 
 import React, { useMemo } from 'react';
 
-import { Badge, Icon } from '@polkadot/react-components';
+import { Badge } from '@polkadot/react-components';
 import { useAccounts } from '@polkadot/react-hooks';
 
 import MaxBadge from '../../MaxBadge';
@@ -89,20 +89,28 @@ function Status ({ isChilled, isElected, isMain, isPara, isRelay, nominators = N
           )
       }
       {isMain && (
-        blockCount || onlineMessage
+        blockCount
           ? (
             <Badge
               className='media--900'
               color='green'
-              info={blockCount || <Icon icon='envelope' />}
-            />
-          )
-          : (
-            <Badge
-              className='media--900'
-              color='transparent'
+              info={blockCount}
             />
           )
+          : onlineMessage
+            ? (
+              <Badge
+                className='media--900'
+                color='green'
+                icon='envelope'
+              />
+            )
+            : (
+              <Badge
+                className='media--900'
+                color='transparent'
+              />
+            )
       )}
       <MaxBadge numNominators={nominators.length} />
     </>
diff --git a/packages/page-staking/src/Validators/Address/index.tsx b/packages/page-staking/src/Validators/Address/index.tsx
index 9d40313c11..98b17c6f5e 100644
--- a/packages/page-staking/src/Validators/Address/index.tsx
+++ b/packages/page-staking/src/Validators/Address/index.tsx
@@ -11,7 +11,7 @@ import type { NominatorValue } from './types';
 import React, { useMemo } from 'react';
 
 import { ApiPromise } from '@polkadot/api';
-import { AddressSmall, Columar, Icon, LinkExternal, Table } from '@polkadot/react-components';
+import { AddressSmall, Columar, Icon, LinkExternal, Table, Tag } from '@polkadot/react-components';
 import { checkVisibility } from '@polkadot/react-components/util';
 import { useApi, useCall, useDeriveAccountInfo, useToggle } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
@@ -113,6 +113,11 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
     [address]
   );
 
+  const pointsAnimClass = useMemo(
+    () => points && `greyAnim-${Date.now() % 25}`,
+    [points]
+  );
+
   if (!isVisible) {
     return null;
   }
@@ -137,8 +142,15 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
             onlineMessage={recentlyOnline?.hasMessage}
           />
         </td>
-        <td className='address all'>
+        <td className='address all relative'>
           <AddressSmall value={address} />
+          {isMain && pointsAnimClass && (
+            <Tag
+              className={`${pointsAnimClass} absolute`}
+              color='lightgrey'
+              label={points}
+            />
+          )}
         </td>
         {isMain
           ? (
@@ -158,14 +170,9 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
           {commission}
         </td>
         {isMain && (
-          <>
-            <td className='number'>
-              {points}
-            </td>
-            <td className='number'>
-              {lastBlock}
-            </td>
-          </>
+          <td className='number'>
+            {lastBlock}
+          </td>
         )}
         <Table.Column.Expand
           isExpanded={isExpanded}
@@ -179,7 +186,7 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
             className='columar'
             colSpan={
               isMain
-                ? 5
+                ? 4
                 : 3
             }
           >
diff --git a/packages/page-staking/src/Validators/CurrentList.tsx b/packages/page-staking/src/Validators/CurrentList.tsx
index c6c68701a4..028ab9eb97 100644
--- a/packages/page-staking/src/Validators/CurrentList.tsx
+++ b/packages/page-staking/src/Validators/CurrentList.tsx
@@ -150,7 +150,6 @@ function CurrentList ({ className, favorites, hasQueries, isIntentions, isOwn, m
         [t('validators'), 'start', 3],
         [t('other stake'), 'expand'],
         [t('commission')],
-        [t('points')],
         [t('last #')],
         []
       ]
diff --git a/packages/page-staking/src/index.tsx b/packages/page-staking/src/index.tsx
index a996365448..ebd105adcb 100644
--- a/packages/page-staking/src/index.tsx
+++ b/packages/page-staking/src/index.tsx
@@ -260,4 +260,20 @@ export default React.memo(styled(StakingApp)(({ theme }: ThemeProps) => `
     : ''};
     }
   }
+
+  ${[
+    0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
+    10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
+    20, 21, 22, 23, 24
+  ].map((n) => `
+    .greyAnim-${n} {
+      animation: greyAnim${n} 2s;
+    }
+    @keyframes greyAnim${n} {
+      0% { background: #a6a6a6; }
+      50% { background: darkorange; }
+      100% { background: #a6a6a6; }
+    }
+  `).join('')
+}
 `));
diff --git a/packages/react-components/src/Badge.tsx b/packages/react-components/src/Badge.tsx
index c65493d292..ad587a085f 100644
--- a/packages/react-components/src/Badge.tsx
+++ b/packages/react-components/src/Badge.tsx
@@ -75,21 +75,22 @@ function Badge ({ className = '', color = 'normal', hover, hoverAction, icon, in
   );
 }
 
+// FIXME We really need to get rid of the px sizing here
 export default React.memo(styled(Badge)`
   border-radius: 16px;
   box-sizing: border-box;
   color: #eeedec;
   display: inline-block;
   font-size: 12px;
-  height: 22px;
-  line-height: 22px;
+  height: 20px;
+  line-height: 20px;
   margin-right: 0.43rem;
-  min-width: 22px;
+  min-width: 20px;
   padding: 0 4px;
   overflow: hidden;
   text-align: center;
   vertical-align: middle;
-  width: 22px;
+  width: 20px;
 
   &.isTooltip {
     cursor: help;
@@ -101,7 +102,7 @@ export default React.memo(styled(Badge)`
 
   .ui--Icon {
     cursor: inherit;
-    margin-top: 5px;
+    margin-top: 4px;
     vertical-align: top;
     width: 1em;
   }
diff --git a/packages/react-components/src/Tag.tsx b/packages/react-components/src/Tag.tsx
index 8383bdc316..bcb28cf243 100644
--- a/packages/react-components/src/Tag.tsx
+++ b/packages/react-components/src/Tag.tsx
@@ -46,7 +46,7 @@ export default React.memo(styled(Tag)`
   display: inline-block;
   font-size: 0.857rem;
   font-weight: var(--font-weight-normal);
-  line-height: 1.143rem;
+  line-height: 1rem;
   margin: 0 0.125rem;
   opacity: 0.85;
   padding: 0.25em 0.75em;
@@ -74,6 +74,10 @@ export default React.memo(styled(Tag)`
     background: #767676;
   }
 
+  &.lightgreyColor {
+    background: #a6a6a6;
+  }
+
   &.orangeColor {
     background: #f2711c;
   }
diff --git a/packages/react-components/src/types.ts b/packages/react-components/src/types.ts
index 507b40a0d6..06b481054f 100644
--- a/packages/react-components/src/types.ts
+++ b/packages/react-components/src/types.ts
@@ -80,7 +80,7 @@ export interface ThemeProps {
   theme: ThemeDef;
 }
 
-export type FlagColor = 'blue' | 'black' | 'green' | 'grey' | 'orange' | 'pink' | 'purple' | 'red' | 'yellow' | 'theme';
+export type FlagColor = 'blue' | 'black' | 'green' | 'grey' | 'lightgrey' | 'orange' | 'pink' | 'purple' | 'red' | 'yellow' | 'theme';
 
 export type AccountIdIsh = AccountId | AccountIndex | Address | string | Uint8Array | null;