diff --git a/packages/page-assets/src/Overview/Asset.tsx b/packages/page-assets/src/Overview/Asset.tsx
index c7e979df48..8c2f023c6c 100644
--- a/packages/page-assets/src/Overview/Asset.tsx
+++ b/packages/page-assets/src/Overview/Asset.tsx
@@ -3,9 +3,10 @@
 
 import type { AssetInfo } from './types';
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { AddressSmall } from '@polkadot/react-components';
+import { FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
 interface Props {
@@ -14,17 +15,27 @@ interface Props {
 }
 
 function Asset ({ className, value: { details, id, metadata } }: Props): React.ReactElement<Props> {
+  const format = useMemo(
+    () => metadata && [metadata.decimals.toNumber(), metadata.symbol.toUtf8()],
+    [metadata]
+  );
+
   return (
     <tr className={className}>
       <td className='number'><h1>{formatNumber(id)}</h1></td>
       <td className='together'>{metadata?.name.toUtf8()}</td>
-      <td className='address'>{details && <AddressSmall value={details.owner} />}</td>
-      <td className='address'>{details && <AddressSmall value={details.admin} />}</td>
-      <td className='address'>{details && <AddressSmall value={details.issuer} />}</td>
-      <td className='address'>{details && <AddressSmall value={details.freezer} />}</td>
-      <td className='number all'>{formatNumber(metadata?.decimals)}</td>
-      <td className='upper'>{metadata?.symbol.toUtf8()}</td>
-      <td className='button' />
+      <td className='address media--1000'>{details && <AddressSmall value={details.owner} />}</td>
+      <td className='address media--1200'>{details && <AddressSmall value={details.admin} />}</td>
+      <td className='address media--1300'>{details && <AddressSmall value={details.issuer} />}</td>
+      <td className='address media--1400'>{details && <AddressSmall value={details.freezer} />}</td>
+      <td className='number all'>{details && format && (
+        <FormatBalance
+          format={format}
+          value={details.supply}
+        />
+      )}</td>
+      {/* <td className='number'>{formatNumber(metadata?.decimals)}</td> */}
+      {/* <td className='upper'>{metadata?.symbol.toUtf8()}</td> */}
     </tr>
   );
 }
diff --git a/packages/page-assets/src/Overview/Assets.tsx b/packages/page-assets/src/Overview/Assets.tsx
index 0bc66f036c..5197329a24 100644
--- a/packages/page-assets/src/Overview/Assets.tsx
+++ b/packages/page-assets/src/Overview/Assets.tsx
@@ -22,13 +22,11 @@ function Assets ({ assetIds, className }: Props): React.ReactElement<Props> {
 
   const headerRef = useRef([
     [t('assets'), 'start', 2],
-    [t('owner'), 'address'],
-    [t('admin'), 'address'],
-    [t('issuer'), 'address'],
-    [t('freezer'), 'address'],
-    [t('decimals')],
-    [t('symbol'), 'start'],
-    []
+    [t('owner'), 'address media--1000'],
+    [t('admin'), 'address media--1200'],
+    [t('issuer'), 'address media--1300'],
+    [t('freezer'), 'address media--1400'],
+    [t('supply')]
   ]);
 
   return (
diff --git a/packages/react-components/src/InputBalance.tsx b/packages/react-components/src/InputBalance.tsx
index 1609570dac..52e322aefd 100644
--- a/packages/react-components/src/InputBalance.tsx
+++ b/packages/react-components/src/InputBalance.tsx
@@ -30,6 +30,8 @@ interface Props {
   onEnter?: () => void;
   onEscape?: () => void;
   placeholder?: string;
+  siDecimals?: number;
+  siSymbol?: string;
   value?: BN;
   withEllipsis?: boolean;
   withLabel?: boolean;
@@ -68,7 +70,7 @@ function reformat (value: string | BN, isDisabled?: boolean): string {
   return formatBalance(value, { forceUnit: '-', withSi: false }).replace(',', isDisabled ? ',' : '');
 }
 
-function InputBalance ({ autoFocus, children, className = '', defaultValue: inDefault, help, isDisabled, isError, isFull, isWarning, isZeroable, label, labelExtra, maxValue, onChange, onEnter, onEscape, placeholder, value, withEllipsis, withLabel, withMax }: Props): React.ReactElement<Props> {
+function InputBalance ({ autoFocus, children, className = '', defaultValue: inDefault, help, isDisabled, isError, isFull, isWarning, isZeroable, label, labelExtra, maxValue, onChange, onEnter, onEscape, placeholder, siDecimals, siSymbol, value, withEllipsis, withLabel, withMax }: Props): React.ReactElement<Props> {
   const defaultValue = useMemo(
     () => inDefault ? reformat(inDefault, isDisabled) : undefined,
     [inDefault, isDisabled]
@@ -94,6 +96,8 @@ function InputBalance ({ autoFocus, children, className = '', defaultValue: inDe
       onEnter={onEnter}
       onEscape={onEscape}
       placeholder={placeholder}
+      siDecimals={siDecimals}
+      siSymbol={siSymbol}
       value={value}
       withEllipsis={withEllipsis}
       withLabel={withLabel}
diff --git a/packages/react-components/src/InputNumber.tsx b/packages/react-components/src/InputNumber.tsx
index f7f5fe4bc6..8d03512e04 100644
--- a/packages/react-components/src/InputNumber.tsx
+++ b/packages/react-components/src/InputNumber.tsx
@@ -6,7 +6,7 @@ import type { SiDef } from '@polkadot/util/types';
 import type { BitLength } from './types';
 
 import BN from 'bn.js';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import { useApi } from '@polkadot/react-hooks';
@@ -39,6 +39,8 @@ interface Props {
   onEnter?: () => void;
   onEscape?: () => void;
   placeholder?: string;
+  siDecimals?: number;
+  siSymbol?: string;
   value?: BN | null;
   withEllipsis?: boolean;
   withLabel?: boolean;
@@ -69,10 +71,10 @@ function getRegex (isDecimal: boolean): RegExp {
   );
 }
 
-function getSiOptions (): { text: string; value: string }[] {
-  return formatBalance.getOptions().map(({ power, text, value }): { text: string; value: string } => ({
+function getSiOptions (symbol: string, decimals?: number): { text: string; value: string }[] {
+  return formatBalance.getOptions(decimals).map(({ power, text, value }): { text: string; value: string } => ({
     text: power === 0
-      ? TokenUnit.abbr
+      ? symbol
       : text,
     value
   }));
@@ -166,7 +168,7 @@ function getValues (api: ApiPromise, value: BN | string = BN_ZERO, si: SiDef | n
     : getValuesFromString(api, value, si, bitLength, isZeroable, maxValue);
 }
 
-function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, className = '', defaultValue, help, isDecimal, isFull, isSi, isDisabled, isError = false, isWarning, isZeroable = true, label, labelExtra, maxLength, maxValue, onChange, onEnter, onEscape, placeholder, value: propsValue }: Props): React.ReactElement<Props> {
+function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, className = '', defaultValue, help, isDecimal, isFull, isSi, isDisabled, isError = false, isWarning, isZeroable = true, label, labelExtra, maxLength, maxValue, onChange, onEnter, onEscape, placeholder, siDecimals, siSymbol, value: propsValue }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const [si, setSi] = useState<SiDef | null>(isSi ? formatBalance.findSi('-') : null);
@@ -175,6 +177,11 @@ function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, clas
     getValues(api, propsValue || defaultValue, si, bitLength, isZeroable, maxValue)
   );
 
+  const siOptions = useMemo(
+    () => getSiOptions(siSymbol || TokenUnit.abbr, siDecimals),
+    [siDecimals, siSymbol]
+  );
+
   useEffect((): void => {
     onChange && onChange(isValid ? valueBn : undefined);
   }, [isValid, onChange, valueBn]);
@@ -279,7 +286,7 @@ function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, clas
           dropdownClassName='ui--SiDropdown'
           isButton
           onChange={_onSelectSiUnit}
-          options={getSiOptions()}
+          options={siOptions}
         />
       )}
       {children}
diff --git a/packages/react-query/src/FormatBalance.tsx b/packages/react-query/src/FormatBalance.tsx
index 3b5d41b936..10dc41456a 100644
--- a/packages/react-query/src/FormatBalance.tsx
+++ b/packages/react-query/src/FormatBalance.tsx
@@ -16,6 +16,7 @@ import { useTranslation } from './translate';
 interface Props {
   children?: React.ReactNode;
   className?: string;
+  format?: [number, string];
   formatIndex?: number;
   isShort?: boolean;
   label?: React.ReactNode;
@@ -44,7 +45,7 @@ function getFormat (registry: Registry, formatIndex = 0): [number, string] {
   ];
 }
 
-function formatDisplay (prefix: string, postfix: string, unit: string, label = '', isShort = false): React.ReactNode {
+function createElement (prefix: string, postfix: string, unit: string, label = '', isShort = false): React.ReactNode {
   return <>{`${prefix}${isShort ? '' : '.'}`}{!isShort && <span className='ui--FormatBalance-postfix'>{`0000${postfix || ''}`.slice(-4)}</span>}<span className='ui--FormatBalance-unit'> {unit}</span>{label}</>;
 }
 
@@ -52,10 +53,10 @@ function splitFormat (value: string, label?: string, isShort?: boolean): React.R
   const [prefix, postfixFull] = value.split('.');
   const [postfix, unit] = postfixFull.split(' ');
 
-  return formatDisplay(prefix, postfix, unit, label, isShort);
+  return createElement(prefix, postfix, unit, label, isShort);
 }
 
-function format (value: Compact<any> | BN | string, [decimals, token]: [number, string], withCurrency = true, withSi?: boolean, _isShort?: boolean, labelPost?: string): React.ReactNode {
+function applyFormat (value: Compact<any> | BN | string, [decimals, token]: [number, string], withCurrency = true, withSi?: boolean, _isShort?: boolean, labelPost?: string): React.ReactNode {
   const [prefix, postfix] = formatBalance(value, { decimals, forceUnit: '-', withSi: false }).split('.');
   const isShort = _isShort || (withSi && prefix.length >= K_LENGTH);
   const unitPost = withCurrency ? token : '';
@@ -68,16 +69,16 @@ function format (value: Compact<any> | BN | string, [decimals, token]: [number,
     return <>{major}.<span className='ui--FormatBalance-postfix'>{minor}</span><span className='ui--FormatBalance-unit'>{unit}{unit ? unitPost : ` ${unitPost}`}</span>{labelPost || ''}</>;
   }
 
-  return formatDisplay(prefix, postfix, unitPost, labelPost, isShort);
+  return createElement(prefix, postfix, unitPost, labelPost, isShort);
 }
 
-function FormatBalance ({ children, className = '', formatIndex, isShort, label, labelPost, value, valueFormatted, withCurrency, withSi }: Props): React.ReactElement<Props> {
+function FormatBalance ({ children, className = '', format, formatIndex, isShort, label, labelPost, value, valueFormatted, withCurrency, withSi }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
 
   const formatInfo = useMemo(
-    () => getFormat(api.registry, formatIndex),
-    [api, formatIndex]
+    () => format || getFormat(api.registry, formatIndex),
+    [api, format, formatIndex]
   );
 
   // labelPost here looks messy, however we ensure we have one less text node
@@ -89,7 +90,7 @@ function FormatBalance ({ children, className = '', formatIndex, isShort, label,
           : value
             ? value === 'all'
               ? t<string>('everything{{labelPost}}', { replace: { labelPost } })
-              : format(value, formatInfo, withCurrency, withSi, isShort, labelPost)
+              : applyFormat(value, formatInfo, withCurrency, withSi, isShort, labelPost)
             : `-${labelPost || ''}`
       }</span>{children}
     </div>
@@ -114,6 +115,7 @@ export default React.memo(styled(FormatBalance)`
 
   .ui--FormatBalance-unit {
     font-size: 0.825em;
+    text-transform: uppercase;
   }
 
   .ui--FormatBalance-value {