diff --git a/packages/apps/public/index.html b/packages/apps/public/index.html
index 5ffd498441..297d9fe8fb 100644
--- a/packages/apps/public/index.html
+++ b/packages/apps/public/index.html
@@ -16,6 +16,7 @@
         --font-weight-normal: 400;
         --width-full: 1750px;
         --width-half: 875px;
+        --bg-menu-hover: rgba(255, 255, 255, 0.2);
       }
 
       [data-theme="dark"] {
@@ -23,10 +24,9 @@
         --bg-input-error: #48393f;
         --bg-inverse: rgba(78, 78, 78, 0.66);
         --bg-menu: #26272c;
-        --bg-menu-hover: rgba(255, 255, 255, 0.05);
         --bg-page: #26272c;
         --bg-table: #3b3d3f;
-        --bg-tabs: #3b3d3f;
+        --bg-tabs: #38393f;
         --bg-toggle: #58595f;
         --border-table: #343536;
         --border-tabs: #343536;
@@ -44,7 +44,6 @@
         --bg-input-error: #fff6f6;
         --bg-inverse: rgba(244, 242, 240, 0.91);
         --bg-menu: #ffffff;
-        --bg-menu-hover: rgba(255, 255, 255, 0.5);
         --bg-page: #f5f3f1;
         --bg-table: #ffffff;
         --bg-tabs: #ffffff;
diff --git a/packages/apps/src/Content/index.tsx b/packages/apps/src/Content/index.tsx
index 9ebfb62295..350e678df3 100644
--- a/packages/apps/src/Content/index.tsx
+++ b/packages/apps/src/Content/index.tsx
@@ -8,7 +8,7 @@ import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 
 import createRoutes from '@polkadot/apps-routing';
-import { ErrorBoundary, Spinner, StatusContext } from '@polkadot/react-components';
+import { ErrorBoundary, SectionContext, Spinner, StatusContext } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 
 import { findMissingApis } from '../endpoint';
@@ -38,7 +38,7 @@ function Content ({ className }: Props): React.ReactElement<Props> {
   const { api, isApiConnected, isApiReady } = useApi();
   const { queueAction } = useContext(StatusContext);
 
-  const { Component, display: { needsApi }, name } = useMemo(
+  const { Component, display: { needsApi }, icon, name, text } = useMemo(
     (): Route => {
       const app = location.pathname.slice(1) || '';
 
@@ -61,23 +61,25 @@ function Content ({ className }: Props): React.ReactElement<Props> {
           <>
             <Suspense fallback='...'>
               <ErrorBoundary trigger={name}>
-                {missingApis.length
-                  ? (
-                    <NotFound
-                      basePath={`/${name}`}
-                      location={location}
-                      missingApis={missingApis}
-                      onStatusChange={queueAction}
-                    />
-                  )
-                  : (
-                    <Component
-                      basePath={`/${name}`}
-                      location={location}
-                      onStatusChange={queueAction}
-                    />
-                  )
-                }
+                <SectionContext.Provider value={{ icon, text }}>
+                  {missingApis.length
+                    ? (
+                      <NotFound
+                        basePath={`/${name}`}
+                        location={location}
+                        missingApis={missingApis}
+                        onStatusChange={queueAction}
+                      />
+                    )
+                    : (
+                      <Component
+                        basePath={`/${name}`}
+                        location={location}
+                        onStatusChange={queueAction}
+                      />
+                    )
+                  }
+                </SectionContext.Provider>
               </ErrorBoundary>
             </Suspense>
             <Status />
diff --git a/packages/apps/src/Menu/ChainInfo.tsx b/packages/apps/src/Menu/ChainInfo.tsx
index d856fedb46..0289e94d67 100644
--- a/packages/apps/src/Menu/ChainInfo.tsx
+++ b/packages/apps/src/Menu/ChainInfo.tsx
@@ -58,7 +58,7 @@ function ChainInfo ({ className }: Props): React.ReactElement<Props> {
 
 export default React.memo(styled(ChainInfo)`
   box-sizing: border-box;
-  padding: 0.75rem 1rem 0.75rem 1.5rem;
+  padding: 0.642rem 1rem 0.642rem 1.5rem;
   margin: 0;
 
   .apps--SideBar-logo-inner {
@@ -91,16 +91,24 @@ export default React.memo(styled(ChainInfo)`
     .info {
       flex: 1;
       padding-right: 0.5rem;
+      text-align: right;
 
-      .bestNumber,
       .chain {
+        max-width: 16rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .chain, .bestNumber {
         font-size: 0.9rem;
         line-height: 1.2;
       }
 
       .runtimeVersion {
-        font-size: 0.75rem;
-        line-height: 1.2;
+          font-size: 0.75rem;
+          line-height: 1.2;
+          letter-spacing: -0.01em;
       }
     }
   }
diff --git a/packages/apps/src/Menu/Grouping.tsx b/packages/apps/src/Menu/Grouping.tsx
index 0cc312d1e3..b4b6dd8d4f 100644
--- a/packages/apps/src/Menu/Grouping.tsx
+++ b/packages/apps/src/Menu/Grouping.tsx
@@ -12,15 +12,17 @@ import Item from './Item';
 
 interface Props extends Group {
   className?: string;
+  isActive: boolean;
 }
 
 const SHA_COL = 'rgba(34, 36, 38, 0.12)';
 const SHA_OFF = '5px';
 
-function Grouping ({ className = '', name, routes }: Props): React.ReactElement<Props> {
+function Grouping ({ className = '', isActive, name, routes }: Props): React.ReactElement<Props> {
   if (routes.length === 1) {
     return (
       <Item
+        className={isActive ? 'isActive' : ''}
         isToplevel
         route={routes[0]}
       />
@@ -28,12 +30,12 @@ function Grouping ({ className = '', name, routes }: Props): React.ReactElement<
   }
 
   return (
-    <li className={className}>
-      <div className='groupHdr highlight--color-contrast'>
+    <li className={`${className} ${isActive ? 'isActive' : ''}`}>
+      <div className={`groupHdr ${!isActive ? 'highlight--color-contrast' : ''}`}>
         <span>{name}</span>
         <Icon icon='caret-down' />
       </div>
-      <ul className='groupMenu highlight--bg-light'>
+      <ul className='groupMenu'>
         {routes.map((route): React.ReactNode => (
           <Item
             key={route.name}
@@ -48,24 +50,43 @@ function Grouping ({ className = '', name, routes }: Props): React.ReactElement<
 export default React.memo(styled(Grouping)`
   cursor: pointer;
   position: relative;
+  margin-bottom: -5px;
 
   .groupHdr {
-    border-radius: 0.25rem 0.25rem 0 0;
-    padding: 1rem 1.25rem 1rem 1.5rem;
+    border-radius: 0.285rem;
+    padding: 0.857rem 0.857em 0.786rem 1rem;
+    margin-bottom: 1.071rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.214rem;
 
     > .ui--Icon {
       margin-left: 0.75rem;
     }
   }
 
+  &.isActive .groupHdr {
+    background-color: var(--bg-tabs);
+    font-size: 1rem;
+    font-weight: 400;
+    padding: 0.857rem 1.429rem 1.857rem;
+    margin-bottom: 0;
+
+    &:hover {
+      padding: 0.857rem 1.429rem 0.786rem 1.429rem;
+      margin-bottom: 1.071rem;
+    }
+  }
+
   .groupMenu {
-    border-radius: 0 0 0.25rem 0.25rem;
+    border-radius: 0.286rem;
     box-shadow: 0 ${SHA_OFF} ${SHA_OFF} -${SHA_OFF} ${SHA_COL}, ${SHA_OFF} 0 ${SHA_OFF} -${SHA_OFF} ${SHA_COL}, -${SHA_OFF} 0 ${SHA_OFF} -${SHA_OFF} ${SHA_COL};
     display: none;
     margin: 0;
     overflow: hidden;
     padding: 0;
     position: absolute;
+    top: 2.9rem;
     z-index: 250;
 
     > li {
@@ -75,17 +96,21 @@ export default React.memo(styled(Grouping)`
         padding-right: 4rem;
       }
     }
+
+    &::before {
+      bottom: 0;
+      content: ' ';
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: -1;
+    }
   }
 
   &:hover {
-    .groupHdr,
-    .groupMenu li {
-      background: var(--bg-menu);
-      color: var(--color-text);
-    }
-
     .groupHdr {
-      box-shadow: 0 -${SHA_OFF} ${SHA_OFF} -${SHA_OFF} ${SHA_COL}, ${SHA_OFF} 0 ${SHA_OFF} -${SHA_OFF} ${SHA_COL}, -${SHA_OFF} 0 ${SHA_OFF} -${SHA_OFF} ${SHA_COL};
+      box-shadow: 0px 4px 37px rgba(0, 0, 0, 0.08);
     }
 
     .groupMenu {
diff --git a/packages/apps/src/Menu/Item.tsx b/packages/apps/src/Menu/Item.tsx
index 665b2cfea7..0f31a841e1 100644
--- a/packages/apps/src/Menu/Item.tsx
+++ b/packages/apps/src/Menu/Item.tsx
@@ -11,18 +11,19 @@ import { useToggle } from '@polkadot/react-hooks';
 
 interface Props {
   className?: string;
+  isLink?: boolean;
   isToplevel?: boolean;
   route: ItemRoute;
 }
 
 const DUMMY_COUNTER = () => 0;
 
-function Item ({ className = '', isToplevel, route: { Modal, href, icon, name, text, useCounter = DUMMY_COUNTER } }: Props): React.ReactElement<Props> {
+function Item ({ className = '', isLink, isToplevel, route: { Modal, href, icon, name, text, useCounter = DUMMY_COUNTER } }: Props): React.ReactElement<Props> {
   const [isModalVisible, toggleModal] = useToggle();
   const count = useCounter();
 
   return (
-    <li className={`${className}${count ? ' withCounter' : ''} ${isToplevel ? 'topLevel  highlight--color-contrast' : ''}`}>
+    <li className={`ui--MenuItem ${className}${count ? ' withCounter' : ''} ${isLink ? 'isLink' : ''} ${isToplevel ? 'topLevel  highlight--color-contrast' : ''}`}>
       <a
         href={Modal ? undefined : (href || `#/${name}`)}
         onClick={Modal ? toggleModal : undefined}
@@ -33,7 +34,7 @@ function Item ({ className = '', isToplevel, route: { Modal, href, icon, name, t
         {text}
         {!!count && (
           <Badge
-            color={isToplevel ? 'counterInvert' : 'counter'}
+            color={'white'}
             info={count}
           />
         )}
@@ -51,32 +52,66 @@ export default React.memo(styled(Item)`
   white-space: nowrap;
 
   &.topLevel {
-    padding: 0;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.214rem;
+    border-radius: 0.15rem;
+    margin-bottom: -5px;
 
     a {
-      padding: 1rem 1.5rem;
+      padding: 0.857rem 0.857em 0.786rem 1rem;
+      margin-bottom: 1.071rem;
+      line-height: 1.214rem;
+      border-radius: 0.285rem;
+    }
+
+    &.isActive.highlight--color-contrast {
+      font-size: 1.15rem;
+      font-weight: 400;
+      color: var(--color-text);
+
+      a {
+        background-color: var(--bg-tabs);
+      }
+    }
+
+    &.isActive {
+      border-radius: 0.15rem 0.15rem 0 0;
+      margin-bottom: -5px;
+
+      a {
+        padding: 0.857rem 1.429rem 1.857rem;
+        margin-bottom: 0;
+        cursor: default;
+      }
+
+      &&.withCounter a {
+        padding-right: 3.2rem;
+      }
     }
 
     .ui--Badge {
-      top: 0.95rem;
+      top: 0.7rem;
     }
   }
 
-  &.withCounter a {
-    padding-right: 3rem;
+  &&.withCounter a {
+    padding-right: 3.2rem;
   }
 
   a {
     color: inherit !important;
     display: block;
-    padding: 0.75rem 1.5rem;
+    padding: 0.5rem 1.15rem 0.57rem;
     text-decoration: none;
+    font-weight: 400;
+    font-size: 1rem;
+    line-height: 1.5rem;
   }
 
   .ui--Badge {
     position: absolute;
-    right: 0.25rem;
-    top: 0.7rem;
+    right: 0.5rem;
   }
 
   .ui--Icon {
diff --git a/packages/apps/src/Menu/NodeInfo.tsx b/packages/apps/src/Menu/NodeInfo.tsx
index c18624a794..82e7fbafe1 100644
--- a/packages/apps/src/Menu/NodeInfo.tsx
+++ b/packages/apps/src/Menu/NodeInfo.tsx
@@ -18,7 +18,7 @@ function NodeInfo ({ className = '' }: Props): React.ReactElement<Props> {
   const { api, isApiReady } = useApi();
 
   return (
-    <div className={`${className} media--1400 highlight--color-contrast`}>
+    <div className={`${className} media--1400 highlight--color-contrast ui--NodeInfo`}>
       {isApiReady && (
         <div>
           <NodeName />&nbsp;
diff --git a/packages/apps/src/Menu/index.tsx b/packages/apps/src/Menu/index.tsx
index f21829115e..7f7b106824 100644
--- a/packages/apps/src/Menu/index.tsx
+++ b/packages/apps/src/Menu/index.tsx
@@ -12,7 +12,6 @@ import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 
 import createRoutes from '@polkadot/apps-routing';
-import { Icon } from '@polkadot/react-components';
 import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
 
 import { findMissingApis } from '../endpoint';
@@ -125,46 +124,54 @@ function Menu ({ className = '' }: Props): React.ReactElement<Props> {
 
   return (
     <div className={`${className}${isLoading ? ' isLoading' : ''} highlight--bg`}>
-      <div className='menuSection'>
-        <ChainInfo />
-        {activeRoute && (
-          <div className='menuActive'>
-            <Icon icon={activeRoute.icon} />
-            <span>{activeRoute.text}</span>
-          </div>
-        )}
-        <ul className='menuItems'>
-          {visibleGroups.map(({ name, routes }): React.ReactNode => (
-            <Grouping
-              key={name}
-              name={name}
-              routes={routes}
-            />
-          ))}
-        </ul>
+      <div className='menuContainer'>
+        <div className='menuSection'>
+          <ChainInfo />
+          <ul className='menuItems'>
+            {visibleGroups.map(({ name, routes }): React.ReactNode => (
+              <Grouping
+                isActive={ activeRoute && activeRoute.group === name.toLowerCase()}
+                key={name}
+                name={name}
+                routes={routes}
+              />
+            ))}
+          </ul>
+        </div>
+        <div className='menuSection media--1200'>
+          <ul className='menuItems'>
+            {externalRef.current.map((route): React.ReactNode => (
+              <Item
+                isLink
+                isToplevel
+                key={route.name}
+                route={route}
+              />
+            ))}
+          </ul>
+        </div>
+        <NodeInfo className='media--1400' />
       </div>
-      <div className='menuSection media--1200'>
-        <ul className='menuItems'>
-          {externalRef.current.map((route): React.ReactNode => (
-            <Item
-              isToplevel
-              key={route.name}
-              route={route}
-            />
-          ))}
-        </ul>
-      </div>
-      <NodeInfo />
     </div>
   );
 }
 
 export default React.memo(styled(Menu)`
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
+  width: 100%;
   padding: 0;
   z-index: 220;
+  position: relative;
+
+  & .menuContainer {
+    flex-direction: row;
+    align-items: flex-end;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 1.5rem;
+    width: 100%;
+    max-width: 1750px;
+    margin: 0 auto;
+  }
 
   &.isLoading {
     background: #999 !important;
@@ -184,7 +191,6 @@ export default React.memo(styled(Menu)`
 
   .menuSection {
     align-items: flex-end;
-    align-self: flex-end;
     display: flex;
   }
 
@@ -206,10 +212,19 @@ export default React.memo(styled(Menu)`
     flex: 1 1;
     list-style: none;
     margin: 0 1rem 0 0;
-    padding: 0;
+    padding: 0.786rem 0 0;
 
     > li {
       display: inline-block;
     }
+
+    > li + li {
+      margin-left: 0.25rem
+    }
   }
+
+  .ui--NodeInfo {
+    align-self: center;
+  }
+
 `);
diff --git a/packages/react-components/src/Badge.tsx b/packages/react-components/src/Badge.tsx
index 73c2834757..0ffe975f5f 100644
--- a/packages/react-components/src/Badge.tsx
+++ b/packages/react-components/src/Badge.tsx
@@ -11,7 +11,7 @@ import Tooltip from './Tooltip';
 
 interface Props {
   className?: string;
-  color: 'blue' | 'counter' | 'counterInvert' | 'gray' | 'green' | 'highlight' | 'normal' | 'orange' | 'purple' | 'red' | 'transparent';
+  color: 'blue' | 'gray' | 'green' | 'highlight' | 'normal' | 'orange' | 'purple' | 'red' | 'transparent' | 'white';
   hover?: React.ReactNode;
   icon?: IconName;
   info?: React.ReactNode;
@@ -19,8 +19,6 @@ interface Props {
   onClick?: () => void;
 }
 
-const HIGHLIGHTS = ['counter', 'highlight'];
-
 let badgeId = 0;
 
 function Badge ({ className = '', color = 'normal', hover, icon, info, isSmall, onClick }: Props): React.ReactElement<Props> | null {
@@ -28,12 +26,12 @@ function Badge ({ className = '', color = 'normal', hover, icon, info, isSmall,
   const extraProps = hover
     ? { 'data-for': trigger, 'data-tip': true }
     : {};
-  const isHighlight = HIGHLIGHTS.includes(color);
+  const isHighlight = color === 'highlight';
 
   return (
     <div
       {...extraProps}
-      className={`ui--Badge${hover ? ' isTooltip' : ''}${isSmall ? ' isSmall' : ''}${onClick ? ' isClickable' : ''}${isHighlight ? ' highlight--bg' : ''}${color === 'counterInvert' ? ' highlight--bg-contrast highlight--color' : ''} ${color}Color ${className}`}
+      className={`ui--Badge${hover ? ' isTooltip' : ''}${isSmall ? ' isSmall' : ''}${onClick ? ' isClickable' : ''}${isHighlight ? ' highlight--bg' : ''} ${color}Color ${className}`}
       onClick={onClick}
     >
       <div className={isHighlight ? 'highlight--color-contrast' : ''}>{info || (icon && <Icon icon={icon} />)}</div>
@@ -95,8 +93,7 @@ export default React.memo(styled(Badge)`
     background: steelblue;
   }
 
-  &.counterColor,
-  &.counterInvertColor {
+  &.counterColor {
     margin: 0 0.5rem;
     vertical-align: middle;
   }
@@ -126,4 +123,8 @@ export default React.memo(styled(Badge)`
     background: transparent;
     box-shadow: none;
   }
+
+  &.whiteColor {
+    background: rgba(255, 255, 255, 0.3);
+  }
 `);
diff --git a/packages/react-components/src/FilterOverlay.tsx b/packages/react-components/src/FilterOverlay.tsx
index 78ef26ad02..0398422b46 100644
--- a/packages/react-components/src/FilterOverlay.tsx
+++ b/packages/react-components/src/FilterOverlay.tsx
@@ -27,11 +27,15 @@ export default React.memo(styled(FilterOverlay)`
   }
   right: calc(50% - var(--width-half) + 1.5rem);
 
+  && .ui--Input {
+    margin: 0.29rem 0;
+  }
+
   ${media.DESKTOP`
     display: flex;
     justify-content: flex-end;
     position: absolute;
-    top: 0.25rem;
+    top: 0rem;
 
     > div {
       max-width: 35rem !important;
@@ -44,8 +48,7 @@ export default React.memo(styled(FilterOverlay)`
     .ui.selection.dropdown {
       white-space: nowrap;
     }
-
-  `}
+  `};
 
   @media (max-width: var(--width-full)) {
     right: 1.5rem;
diff --git a/packages/react-components/src/HelpOverlay.tsx b/packages/react-components/src/HelpOverlay.tsx
index 9587ad2967..f231855099 100644
--- a/packages/react-components/src/HelpOverlay.tsx
+++ b/packages/react-components/src/HelpOverlay.tsx
@@ -47,13 +47,14 @@ export default React.memo(styled(HelpOverlay)`
     color: var(--color-text);
     cursor: pointer;
     font-size: 2rem;
-    padding: 0.65rem 1.5rem 0 0;
+    padding: 0.35rem 1.5rem 0 0;
   }
 
   > .help-button {
     position: absolute;
     right: 0rem;
     top: 0rem;
+    z-index: 10;
   }
 
   .help-slideout {
diff --git a/packages/react-components/src/Tabs/CurrentSection.tsx b/packages/react-components/src/Tabs/CurrentSection.tsx
new file mode 100644
index 0000000000..9bbd5dc997
--- /dev/null
+++ b/packages/react-components/src/Tabs/CurrentSection.tsx
@@ -0,0 +1,45 @@
+// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { IconName } from '@fortawesome/fontawesome-svg-core';
+import React from 'react';
+import styled from 'styled-components';
+
+import Icon from '../Icon';
+
+interface Props {
+  className?: string;
+  icon: IconName;
+  text: string;
+}
+
+function CurrentSection ({ className = '', icon, text }: Props): React.ReactElement<Props> {
+  return (
+    <div className={`${className} active-tab`}>
+      <Icon icon={icon} />
+      <span>{text}</span>
+    </div>
+  );
+}
+
+export default React.memo(styled(CurrentSection)`
+  margin: 0 2.5rem 0 1.5rem;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.57rem;
+  min-width: max-content;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  color: var(--color-text);
+
+  .ui--Icon {
+    margin-right: 0.85rem;
+    max-width: 1rem;
+    max-height: 1rem;
+  }
+
+  @media only screen and (max-width: 900px) {
+    margin: 0 1.5rem;
+  }
+`);
diff --git a/packages/react-components/src/Tabs/Tab.tsx b/packages/react-components/src/Tabs/Tab.tsx
index aa14fdea65..953a2490e7 100644
--- a/packages/react-components/src/Tabs/Tab.tsx
+++ b/packages/react-components/src/Tabs/Tab.tsx
@@ -33,7 +33,10 @@ function Tab ({ basePath, className = '', count, hasParams, index, isExact, isRo
       strict={tabIsExact}
       to={to}
     >
-      {text}{!!count && (
+      <div className='tabLinkText'>
+        {text}
+      </div>
+      {!!count && (
         <Badge
           className='tabCounter'
           color='counter'
@@ -45,21 +48,48 @@ function Tab ({ basePath, className = '', count, hasParams, index, isExact, isRo
 }
 
 export default React.memo(styled(Tab)`
-  border-bottom: 2px solid transparent;
-  color: var(--color-text) !important;
-  margin-bottom: -3px;
-  padding: 0.5rem 1.5rem 0.75rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+  color: #8B8B8B;
+  padding: 0 1.5rem;
+  height: 100%;
+  font-size: 1rem;
+  font-weight: 400;
+
+
+    &:hover {
+      color: #8B8B8B;
+
+      .tabLinkText::after{
+        background-color: #8B8B8B;
+      }
+    }
+
+    &:hover .tabLinkText::after,
+    &.tabLinkActive .tabLinkText::after {
+      content: '';
+      position: absolute;
+      width: 3.14rem;
+      height: 2px;
+      bottom: -2px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
 
   &.tabLinkActive {
-    border-bottom-color: #e6e6e6;
+    color: var(--color-text) !important;
+    font-weight: 400;
+    &:hover {
+      cursor: default;
+    }
   }
 
-  &:hover {
-    filter: highlight(120%);
-
-    &:not(.tabLinkActive) {
-      border-bottom-color: #e6e6e6;
-    }
+  .tabLinkText {
+    position: relative;
+    height: 100%;
+    display: flex;
+    align-items: center;
   }
 
   .tabCounter {
diff --git a/packages/react-components/src/Tabs/TabsSectionDelimiter.tsx b/packages/react-components/src/Tabs/TabsSectionDelimiter.tsx
new file mode 100644
index 0000000000..c58ad5cb28
--- /dev/null
+++ b/packages/react-components/src/Tabs/TabsSectionDelimiter.tsx
@@ -0,0 +1,31 @@
+// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import styled from 'styled-components';
+
+interface TabsSectionDelimiterProps {
+  className?: string;
+}
+
+function TabsSectionDelimiter ({ className = '' }: TabsSectionDelimiterProps): React.ReactElement {
+  return (
+    <div className={className}>
+      <svg fill='none'
+        height='47'
+        viewBox='0 0 17 65'
+        width='17'
+        xmlns='http://www.w3.org/2000/svg'>
+        <path
+          className='highlight--stroke'
+          d='M1 1L16 32.5L1 64'
+          stroke='#D1D1D1'/>
+      </svg>
+    </div>
+  );
+}
+
+export default React.memo(styled(TabsSectionDelimiter)`
+  height: 100%;
+  width: auto;
+`);
diff --git a/packages/react-components/src/Tabs/index.tsx b/packages/react-components/src/Tabs/index.tsx
index df7aea57be..5864d3c606 100644
--- a/packages/react-components/src/Tabs/index.tsx
+++ b/packages/react-components/src/Tabs/index.tsx
@@ -1,13 +1,17 @@
 // Copyright 2017-2021 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TabItem } from './types';
+import type { SectionType, TabItem } from './types';
 
 import React, { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 
+import CurrentSection from './CurrentSection';
 import Tab from './Tab';
+import TabsSectionDelimiter from './TabsSectionDelimiter';
+
+export const SectionContext = React.createContext<SectionType>({});
 
 interface Props {
   className?: string;
@@ -40,40 +44,63 @@ function Tabs ({ basePath, className = '', hidden, items }: Props): React.ReactE
     ? items.filter(({ name }) => !hidden.includes(name))
     : items;
 
+  const { icon, text } = React.useContext(SectionContext);
+
   return (
     <header className={`ui--Tabs ${className}`}>
       <div className='tabs-container'>
-        {filtered.map((tab, index) => (
-          <Tab
-            {...tab}
-            basePath={basePath}
-            index={index}
-            key={tab.name}
-          />
-        ))}
+        {
+          text && icon && <CurrentSection icon={icon}
+            text={text}/>
+        }
+        <TabsSectionDelimiter />
+        <ul className='ui--TabsList'>
+          {filtered.map((tab, index) => (
+            <li key={index}>
+              <Tab
+                {...tab}
+                basePath={basePath}
+                index={index}
+                key={tab.name}
+              />
+            </li>
+          ))}
+        </ul>
       </div>
     </header>
   );
 }
 
 export default React.memo(styled(Tabs)`
-  align-items: flex-end;
   background: var(--bg-tabs);
   border-bottom: 1px solid var(--border-tabs);
-
   text-align: left;
   z-index: 1;
 
   & .tabs-container {
-    max-width: var(--width-full);
-    margin: 0 auto;
-    width: 100%;
     display: flex;
-    padding: 1.25rem 1.5rem 0;
+    align-items: center;
+    width: 100%;
+    margin: 0 auto;    max-width: var(--width-full);
+    padding: 0 1.5rem;
+    height: 3.286rem;
   }
 
   &::-webkit-scrollbar {
     display: none;
     width: 0px;
   }
+
+  .ui--TabsList {
+    display: flex;
+    list-style: none;
+    height: 100%;
+    margin: 0 1.4rem;
+    white-space: nowrap;
+    padding: 0;
+
+    @media only screen and (max-width: 900px) {
+      margin: 0 2.72rem 0 2.35rem;
+    }
+  }
 `);
diff --git a/packages/react-components/src/Tabs/types.ts b/packages/react-components/src/Tabs/types.ts
index 3767fcbbb7..5b8a9cf904 100644
--- a/packages/react-components/src/Tabs/types.ts
+++ b/packages/react-components/src/Tabs/types.ts
@@ -1,6 +1,8 @@
 // Copyright 2017-2021 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { IconName } from '@fortawesome/fontawesome-svg-core';
+
 import React from 'react';
 
 export interface TabItem {
@@ -12,3 +14,8 @@ export interface TabItem {
   name: string;
   text: React.ReactNode;
 }
+
+export interface SectionType {
+  icon?: IconName;
+  text?: string;
+}
diff --git a/packages/react-components/src/index.tsx b/packages/react-components/src/index.tsx
index b5eb3173a6..ff8e5480e8 100644
--- a/packages/react-components/src/index.tsx
+++ b/packages/react-components/src/index.tsx
@@ -86,7 +86,7 @@ export { default as Static } from './Static';
 export { default as Status, StatusContext } from './Status';
 export { default as SummaryBox } from './SummaryBox';
 export { default as Table } from './Table';
-export { default as Tabs } from './Tabs';
+export { default as Tabs, SectionContext } from './Tabs';
 export { default as Tag } from './Tag';
 export { default as Tags } from './Tags';
 export { default as Toggle } from './Toggle';
diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts
index 00aa21c43b..6cce02a72f 100644
--- a/packages/react-components/src/styles/index.ts
+++ b/packages/react-components/src/styles/index.ts
@@ -19,6 +19,7 @@ interface Props {
 const BRIGHTNESS = 128 + 32;
 const FACTORS = [0.2126, 0.7152, 0.0722];
 const PARTS = [0, 2, 4];
+const VERY_DARK = 16;
 
 const defaultHighlight = '#f19135'; // '#f19135'; // #999
 
@@ -26,15 +27,32 @@ function getHighlight (uiHighlight: string | undefined): string {
   return (uiHighlight || defaultHighlight);
 }
 
-function getContrast (uiHighlight: string | undefined): string {
+function countBrightness (uiHighlight: string | undefined): number {
   const hc = getHighlight(uiHighlight).replace('#', '').toLowerCase();
-  const brightness = PARTS.reduce((b, p, index) => b + (parseInt(hc.substr(p, 2), 16) * FACTORS[index]), 0);
+
+  return PARTS.reduce((b, p, index) => b + (parseInt(hc.substr(p, 2), 16) * FACTORS[index]), 0);
+}
+
+function getContrast (uiHighlight: string | undefined): string {
+  const brightness = countBrightness(uiHighlight);
 
   return brightness > BRIGHTNESS
     ? 'rgba(45, 43, 41, 0.875)'
     : 'rgba(255, 253, 251, 0.875)';
 }
 
+function getMenuHoverContrast (uiHighlight: string | undefined): string {
+  const brightness = countBrightness(uiHighlight);
+
+  if (brightness < VERY_DARK) {
+    return 'rgba(255, 255, 255, 0.15)';
+  }
+
+  return brightness < BRIGHTNESS
+    ? 'rgba(0, 0, 0, 0.15)'
+    : 'rgba(255, 255, 255, 0.15)';
+}
+
 export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Props & ThemeProps) => `
   .highlight--all {
     background: ${getHighlight(uiHighlight)} !important;
@@ -58,6 +76,27 @@ export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Pr
     background: ${getContrast(uiHighlight)};
   }
 
+  .ui--MenuItem.isActive .ui--Badge {
+    background: ${getHighlight(uiHighlight)};
+    color: ${getContrast(uiHighlight)} !important;
+  }
+
+  .ui--MenuItem {
+    & .ui--Badge {
+      color: ${countBrightness(uiHighlight) < BRIGHTNESS ? '#fff' : '#424242'};
+    }
+
+    &:hover:not(.isActive) .ui--Badge {
+      background: ${countBrightness(uiHighlight) < BRIGHTNESS ? 'rgba(255, 255, 255, 0.8)' : '#4D4D4D'};
+      color: ${countBrightness(uiHighlight) > BRIGHTNESS ? '#fff' : '#424242'};
+    }
+  }
+
+  .ui--Tab .ui--Badge {
+    background: ${getHighlight(uiHighlight)};
+    color: ${countBrightness(uiHighlight) < BRIGHTNESS ? '#fff' : '#424242'};
+  }
+
   .highlight--bg-faint,
   .highlight--bg-light {
     background: var(--bg-table);
@@ -103,6 +142,32 @@ export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Pr
     background: ${`linear-gradient(90deg, ${uiHighlight || defaultHighlight}, transparent)`};
   }
 
+  .ui--MenuItem.topLevel:hover,
+  .ui--MenuItem.isActive.topLevel:hover {
+    color: ${getContrast(uiHighlight)};
+
+    a {
+      background-color: ${getMenuHoverContrast(uiHighlight)};
+    }
+  }
+
+  .menuItems li:hover .groupHdr {
+    background: ${getMenuHoverContrast(uiHighlight)};
+    color: ${getContrast(uiHighlight)};
+  }
+
+  .groupMenu {
+    background: ${getHighlight(uiHighlight)} !important;
+
+    &::before {
+      background: ${getMenuHoverContrast(uiHighlight)};
+      color:  ${getContrast(uiHighlight)};
+    }
+    li {
+      color:  ${getContrast(uiHighlight)};
+    }
+  }
+
   .highlight--hover-bg:hover {
     background: ${getHighlight(uiHighlight)} !important;
   }
@@ -182,10 +247,8 @@ export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Pr
 
   .theme--dark,
   .theme--light {
-    .ui--Tabs {
-      .ui--Tab.tabLinkActive {
-        border-bottom-color: ${getHighlight(uiHighlight)};
-      }
+    .ui--Tabs .tabLinkActive .tabLinkText::after{
+        background: ${getHighlight(uiHighlight)};
     }
 
     .ui.primary.button,