diff --git a/packages/page-settings/src/Metadata/Extensions.tsx b/packages/page-settings/src/Metadata/Extensions.tsx
index c46644d5f0..19131948e7 100644
--- a/packages/page-settings/src/Metadata/Extensions.tsx
+++ b/packages/page-settings/src/Metadata/Extensions.tsx
@@ -3,10 +3,10 @@
 
 import type { ChainInfo } from '../types';
 
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import { extensionLogos } from '@polkadot/apps-config';
-import { Button, Dropdown, Spinner } from '@polkadot/react-components';
+import { Button, Dropdown, Spinner, Table } from '@polkadot/react-components';
 import { useToggle } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
@@ -43,32 +43,49 @@ function Extensions ({ chainInfo, className }: Props): React.ReactElement<Props>
     [chainInfo, extensions, selectedIndex, toggleBusy]
   );
 
+  const headerRef = useRef([
+    [t('Extensions'), 'start']
+  ]);
+
   return (
-    <div className={className}>
+    <Table
+      className={className}
+      empty={t<string>('No Upgradable extensions')}
+      header={headerRef.current}
+    >
+
       {extensions
-        ? options.length
-          ? (
-            <>
-              <Dropdown
-                label={t<string>('upgradable extensions')}
-                onChange={setSelectedIndex}
-                options={options}
-                value={selectedIndex}
-              />
-              <Button.Group>
-                <Button
-                  icon='upload'
-                  isDisabled={isBusy}
-                  label={t<string>('Update metadata')}
-                  onClick={_updateMeta}
+        ? options.length !== 0 && (
+          <>
+            <tr>
+              <td>
+                <Dropdown
+                  label={t<string>('upgradable extensions')}
+                  onChange={setSelectedIndex}
+                  options={options}
+                  value={selectedIndex}
                 />
-              </Button.Group>
-            </>
-          )
-          : <div>{t<string>('No upgradable extensions found')}</div>
+              </td>
+            </tr>
+
+            <tr className='isOdd'>
+              <td>
+                <Button.Group>
+                  <Button
+                    icon='upload'
+                    isDisabled={isBusy}
+                    label={t<string>('Update metadata')}
+                    onClick={_updateMeta}
+                  />
+                </Button.Group>
+              </td>
+            </tr>
+          </>
+        )
         : <Spinner />
       }
-    </div>
+
+    </Table>
   );
 }
 
diff --git a/packages/page-settings/src/Metadata/NetworkSpecs.tsx b/packages/page-settings/src/Metadata/NetworkSpecs.tsx
index fb7dbbec46..5de9d823ac 100644
--- a/packages/page-settings/src/Metadata/NetworkSpecs.tsx
+++ b/packages/page-settings/src/Metadata/NetworkSpecs.tsx
@@ -4,10 +4,10 @@
 import type { NetworkSpecsStruct } from '@polkadot/ui-settings/types';
 import type { ChainInfo } from '../types';
 
-import React, { useCallback, useEffect, useReducer, useState } from 'react';
+import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react';
 import styled from 'styled-components';
 
-import { Button, ChainImg, Columar, Input, QrNetworkSpecs, Spinner } from '@polkadot/react-components';
+import { ChainImg, Input, QrNetworkSpecs, Spinner, Table } from '@polkadot/react-components';
 import { useApi, useDebounce } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
@@ -81,108 +81,183 @@ function NetworkSpecs ({ chainInfo, className }: Props): React.ReactElement<Prop
     [networkSpecs]
   );
 
+  const headerRef = useRef([
+    [t('chain specificiations'), 'start', '2']
+  ]);
+
   if (!isApiReady) {
     return <Spinner />;
   }
 
   return (
-    <Columar className={className}>
-      <Columar.Column>
-        <div className='settings--networkSpecs-name'>
+    <Table
+      className={className}
+      empty={t<string>('No open tips')}
+      header={headerRef.current}
+    >
+
+      <tr>
+        <td>
+          <div className='settings--networkSpecs-name'>
+            <Input
+              className='full'
+              help={t<string>('Name of the network. It is only for display purposes.')}
+              isDisabled
+              label={t<string>('Network Name')}
+              value={networkSpecs.title}
+            />
+            <ChainImg className='settings--networkSpecs-logo' />
+          </div>
+        </td>
+        <td rowSpan={6}>
+          {qrData.genesisHash && (
+            <QrNetworkSpecs
+              className='settings--networkSpecs-qr'
+              networkSpecs={debouncedQrData}
+            />
+          )}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div className='settings--networkSpecs-color'>
+            <div>
+              <Input
+                className='full settings--networkSpecs-colorInput'
+                help={t<string>('The color used to distinguish this network with others, use color code with 3 or 6 digits, like "#FFF" or "#111111"')}
+                isError={!_checkColorValid()}
+                label={t<string>('Color')}
+                onChange={_onChangeColor}
+                value={networkSpecs.color}
+              />
+              <a className='settings--networkSpecs-colorChangeButton'
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  _onSetRandomColor();
+                }}>
+                              generate random color
+              </a>
+            </div>
+            <ChainColorIndicator
+              className='settings--networkSpecs-colorBar'
+              color={networkSpecs.color} />
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td>
           <Input
             className='full'
-            help={t<string>('Name of the network. It is only for display purposes.')}
+            help={t<string>('Genesis Hash refers to initial state of the chain, it cannot be changed once the chain is launched')}
             isDisabled
-            label={t<string>('Network Name')}
-            value={networkSpecs.title}
+            label={t<string>('Genesis Hash')}
+            value={networkSpecs.genesisHash}
           />
-          <ChainImg className='settings--networkSpecs-logo' />
-        </div>
-        <Input
-          className='full'
-          help={t<string>('The color used to distinguish this network with others, use color code with 3 or 6 digits, like "#FFF" or "#111111"')}
-          isError={!_checkColorValid()}
-          label={t<string>('Color')}
-          onChange={_onChangeColor}
-          value={networkSpecs.color}
-        >
-          <div className='settings--networkSpecs-colorButton'>
-            <Button
-              icon='sync'
-              key='spread'
-              label={t<string>('Random')}
-              onClick={_onSetRandomColor}
-            />
-            <ChainColorIndicator color={networkSpecs.color}/>
-          </div>
-        </Input>
-        <Input
-          className='full'
-          help={t<string>('Genesis Hash refers to initial state of the chain, it cannot be changed once the chain is launched')}
-          isDisabled
-          label={t<string>('Genesis Hash')}
-          value={networkSpecs.genesisHash}
-        />
-        <Input
-          className='full'
-          help={t<string>('Unit decides the name of 1 unit token, e.g. "DOT" for Polkadot')}
-          isDisabled
-          label={t<string>('Unit')}
-          value={networkSpecs.unit}
-        />
-        <Input
-          className='full'
-          help={t<string>('Prefix indicates the ss58 address format in this network, it is a number between 0 ~ 255 that describes the precise format of the bytes of the address')}
-          isDisabled
-          label={t<string>('Address Prefix')}
-          value={networkSpecs.prefix.toString()}
-        />
-        <Input
-          className='full'
-          help={t<string>('Decimals decides the smallest unit of the token, which is 1/10^decimals')}
-          isDisabled
-          label={t<string>('Decimals')}
-          value={networkSpecs.decimals.toString()}
-        />
-      </Columar.Column>
-      <Columar.Column>
-        {qrData.genesisHash && (
-          <QrNetworkSpecs
-            className='settings--networkSpecs-qr'
-            networkSpecs={debouncedQrData}
+        </td>
+      </tr>
+      <tr>
+        <td>
+
+          <Input
+            className='full'
+            help={t<string>('Unit decides the name of 1 unit token, e.g. "DOT" for Polkadot')}
+            isDisabled
+            label={t<string>('Unit')}
+            value={networkSpecs.unit}
           />
-        )}
-      </Columar.Column>
-    </Columar>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <Input
+            className='full'
+            help={t<string>('Prefix indicates the ss58 address format in this network, it is a number between 0 ~ 255 that describes the precise format of the bytes of the address')}
+            isDisabled
+            label={t<string>('Address Prefix')}
+            value={networkSpecs.prefix.toString()}
+          />
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <Input
+            className='full'
+            help={t<string>('Decimals decides the smallest unit of the token, which is 1/10^decimals')}
+            isDisabled
+            label={t<string>('Decimals')}
+            value={networkSpecs.decimals.toString()}
+          />
+        </td>
+      </tr>
+    </Table>
   );
 }
 
 export default React.memo(styled(NetworkSpecs)`
-  top: .3rem;
 
-  .settings--networkSpecs-colorButton {
-    display: flex;
-    flex-direction: row;
-  }
+  td {
+      padding: 0;
 
-  .settings--networkSpecs-qr {
-    margin: 0.25rem auto;
-    max-width: 15rem;
-
-    img {
-      border: 1px solid white;
-    }
+      .input.ui--Input input {
+          border: none !important;
+          background: transparent;
+      }
   }
 
   .settings--networkSpecs-name {
-    position: relative;
+      position: relative;
 
-    .settings--networkSpecs-logo {
-      height: 32px;
-      left: 12px;
-      position: absolute;
-      top: 1rem;
-      width: 32px;
-    }
+      .settings--networkSpecs-logo {
+          height: 32px;
+          left: 12px;
+          position: absolute;
+          top: 1rem;
+          width: 32px;
+      }
   }
+
+  .settings--networkSpecs-color {
+      position: relative;
+
+      > div:first-child {
+
+          display: flex;
+
+          .settings--networkSpecs-colorInput {
+              min-width: 124px;
+          }
+
+          .settings--networkSpecs-colorChangeButton {
+              user-select: none;
+              cursor: pointer;
+              background: transparent;
+              border: none;
+              outline: none;
+              align-self: flex-end;
+              padding-bottom: 0.9rem;
+          }
+      }
+
+      .settings--networkSpecs-colorBar {
+          border-radius: 50%;
+          border: 1px solid grey;
+          height: 32px;
+          left: 12px;
+          position: absolute;
+          top: 1rem;
+          width: 32px;
+      }
+  }
+
+  .settings--networkSpecs-qr {
+      margin: 0.25rem auto;
+      max-width: 15rem;
+
+      img {
+          border: 1px solid white;
+      }
+  }
+
 `);
diff --git a/packages/page-settings/src/Metadata/index.tsx b/packages/page-settings/src/Metadata/index.tsx
index ceca30dd86..c1c23dfee6 100644
--- a/packages/page-settings/src/Metadata/index.tsx
+++ b/packages/page-settings/src/Metadata/index.tsx
@@ -5,13 +5,11 @@ import React from 'react';
 
 import { useApi } from '@polkadot/react-hooks';
 
-import { useTranslation } from '../translate';
 import useChainInfo from '../useChainInfo';
 import Extensions from './Extensions';
 import NetworkSpecs from './NetworkSpecs';
 
 export default function Metadata (): React.ReactElement {
-  const { t } = useTranslation();
   const { isDevelopment } = useApi();
   const chainInfo = useChainInfo();
 
@@ -19,11 +17,9 @@ export default function Metadata (): React.ReactElement {
     <>
       {!isDevelopment && (
         <>
-          <h1>{t<string>('Extensions')}</h1>
           <Extensions chainInfo={chainInfo} />
         </>
       )}
-      <h1>{t<string>('Chain specifications')}</h1>
       <NetworkSpecs chainInfo={chainInfo} />
     </>
   );