diff --git a/web/components/tabs-header.js b/web/components/tabs-header.js
--- a/web/components/tabs-header.js
+++ b/web/components/tabs-header.js
@@ -19,11 +19,15 @@
 
 function TabsHeader<T: string>(props: Props<T>): React.Node {
   const { children, isActive, setTab, id, headerStyle = 'underline' } = props;
+
   const css = headerStyle === 'pill' ? cssPill : cssUnderline;
+
   const headerClasses = classnames(css.tabHeader, {
-    [css.backgroundTabHeader]: !isActive,
+    [css.inactiveTabHeader]: !isActive,
   });
+
   const onClickSetTab = React.useCallback(() => setTab(id), [setTab, id]);
+
   return (
     <Button className={headerClasses} onClick={onClickSetTab}>
       {children}
diff --git a/web/components/tabs-legacy.react.js b/web/components/tabs-legacy.react.js
deleted file mode 100644
--- a/web/components/tabs-legacy.react.js
+++ /dev/null
@@ -1,70 +0,0 @@
-// @flow
-
-import * as React from 'react';
-
-import TabsHeader from './tabs-header.js';
-import type { TabsHeaderStyle } from './tabs-header.js';
-import cssPill from './tabs-pill.css';
-import cssUnderline from './tabs-underline.css';
-
-type TabsContainerProps<T: string> = {
-  +children?: React.ChildrenArray<?React.Element<typeof TabsItem>>,
-  +activeTab: T,
-  +setTab: T => mixed,
-  +headerStyle?: TabsHeaderStyle,
-};
-
-function TabsContainer<T: string>(props: TabsContainerProps<T>): React.Node {
-  const { children, activeTab, setTab, headerStyle = 'underline' } = props;
-
-  const css = headerStyle === 'pill' ? cssPill : cssUnderline;
-
-  const headers = React.Children.map(children, tab => {
-    const { id, header } = tab.props;
-
-    const isActive = id === activeTab;
-    return (
-      <TabsHeader
-        id={id}
-        isActive={isActive}
-        setTab={setTab}
-        headerStyle={headerStyle}
-      >
-        {header}
-      </TabsHeader>
-    );
-  });
-
-  const currentTab = React.Children.toArray(children).find(
-    tab => tab.props.id === activeTab,
-  );
-
-  const currentContent = currentTab ? currentTab.props.children : null;
-
-  return (
-    <div className={css.tabsContainer}>
-      <div className={css.tabsHeaderContainer}>
-        <div className={css.tabsHeaderContainerPill}>{headers}</div>
-      </div>
-      {currentContent}
-    </div>
-  );
-}
-
-type TabsItemProps<T: string> = {
-  +children: React.Node,
-  +id: T,
-  +header: React.Node,
-};
-
-function TabsItem<T: string>(props: TabsItemProps<T>): React.Node {
-  const { children } = props;
-  return children;
-}
-
-const Tabs = {
-  Container: TabsContainer,
-  Item: TabsItem,
-};
-
-export default Tabs;
diff --git a/web/components/tabs-pill.css b/web/components/tabs-pill.css
--- a/web/components/tabs-pill.css
+++ b/web/components/tabs-pill.css
@@ -1,46 +1,24 @@
-div.tabsContainer {
-  color: var(--fg);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  max-height: 100%;
-  flex: 1;
-}
-
-div.tabsHeaderContainer {
-  border-bottom: 1px solid var(--border);
-  height: 56px;
-}
-
-.tabsHeaderContainerPill {
-  display: flex;
-  background-color: var(--menu-bg);
-  border-radius: 8px;
-  margin: 8px;
-  align-items: center;
-}
-
 .tabHeader {
   flex: 1;
   font-size: var(--s-font-14);
   font-weight: var(--semi-bold);
-  color: var(--tabs-header-active-color);
+  color: var(--tab-label-primary-active);
   height: 32px;
   border-radius: 4px;
-  background-color: var(--tabs-header-active-background);
+  background-color: var(--tab-indicator-primary-active);
   margin: 4px;
 }
 
-.backgroundTabHeader {
-  color: var(--tabs-header-background-color-pill);
+.inactiveTabHeader {
+  color: var(--tab-label-primary-default);
   background-color: transparent;
 }
 
-.backgroundTabHeader:hover {
-  color: var(--tabs-header-background-color-hover);
+.inactiveTabHeader:hover {
+  color: var(--tab-label-primary-hover);
   transition: color 100ms;
 }
 
-.backgroundTabHeader:not(:hover) {
+.inactiveTabHeader:not(:hover) {
   transition: color 100ms;
 }
diff --git a/web/components/tabs-underline.css b/web/components/tabs-underline.css
--- a/web/components/tabs-underline.css
+++ b/web/components/tabs-underline.css
@@ -1,35 +1,17 @@
-div.tabsContainer {
-  color: var(--fg);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  max-height: 100%;
-  flex: 1;
-}
-
-div.tabsHeaderContainer {
-  display: flex;
-}
-
-.tabsHeaderContainerPill {
-  display: flex;
-  width: 100%;
-}
-
 .tabHeader {
   flex: 1;
   padding: 16px;
   font-size: var(--m-font-16);
-  color: var(--tabs-header-active-color);
-  border-bottom: 2px solid var(--tabs-header-active-border);
+  color: var(--tab-label-secondary-active);
+  border-bottom: 2px solid var(--tab-indicator-secondary-active);
 }
 
-.backgroundTabHeader {
-  color: var(--tabs-header-background-color);
-  border-bottom-color: var(--tabs-header-background-border);
+.inactiveTabHeader {
+  color: var(--tab-label-secondary-default);
+  border-bottom-color: var(--tab-indicator-secondary-default);
 }
 
-.backgroundTabHeader:hover {
-  color: var(--tabs-header-background-color-hover);
-  border-bottom-color: var(--tabs-header-background-border-hover);
+.inactiveTabHeader:hover {
+  color: var(--tab-label-secondary-hover);
+  border-bottom-color: var(--tab-indicator-secondary-hover);
 }
diff --git a/web/components/tabs.css b/web/components/tabs.css
--- a/web/components/tabs.css
+++ b/web/components/tabs.css
@@ -3,7 +3,7 @@
 }
 
 .containerPill {
-  background-color: var(--tab-background-primary-default);
+  background-color: var(--tab-indicator-primary-default);
   margin: 8px;
   border-radius: 8px;
 }
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -338,7 +338,17 @@
   --unreadIndicator-border-primary-default: var(--shades-black-85);
 
   /* Tab */
-  --tab-background-primary-default: var(--shades-black-85);
+  --tab-indicator-primary-default: var(--shades-black-85);
+  --tab-indicator-primary-active: var(--violet-dark-100);
+  --tab-label-primary-default: var(--shades-white-60);
+  --tab-label-primary-active: var(--shades-white-100);
+  --tab-label-primary-hover: var(--shades-white-80);
+  --tab-indicator-secondary-default: var(--shades-black-75);
+  --tab-indicator-secondary-active: var(--violet-light-100);
+  --tab-indicator-secondary-hover: var(--shades-black-60);
+  --tab-label-secondary-default: var(--shades-black-50);
+  --tab-label-secondary-active: var(--shades-white-100);
+  --tab-label-secondary-hover: var(--shades-white-80);
 }
 
 /* Light theme */
@@ -431,5 +441,15 @@
 
   /* Tab */
   /* @GINSU: TODO double check these values after redesign is finished */
-  --tab-background-primary-default: var(--shades-white-60);
+  --tab-indicator-primary-default: var(--shades-white-60);
+  --tab-indicator-primary-active: var(--violet-dark-100);
+  --tab-label-primary-default: var(--shades-black-75);
+  --tab-label-primary-active: var(--shades-white-100);
+  --tab-label-primary-hover: var(--shades-black-95);
+  --tab-indicator-secondary-default: var(--shades-black-50);
+  --tab-indicator-secondary-active: var(--violet-dark-100);
+  --tab-indicator-secondary-hover: var(--shades-black-60);
+  --tab-label-secondary-default: var(--shades-black-60);
+  --tab-label-secondary-active: var(--shades-black-95);
+  --tab-label-secondary-hover: var(--shades-black-85);
 }