diff --git a/src/core/client/ui/components/Tabs/Tab.css b/src/core/client/ui/components/Tabs/Tab.css
index 9650b8a95..ca7ac0f66 100644
--- a/src/core/client/ui/components/Tabs/Tab.css
+++ b/src/core/client/ui/components/Tabs/Tab.css
@@ -13,7 +13,7 @@
 }
 
 .root.primary {
-  background: #f2f2f2;
+  background: var(--palette-grey-lightest);
   color: var(--palette-grey-main);
   border: 1px solid var(--palette-grey-main);
   border-left-width: 0;
@@ -32,7 +32,7 @@
     background-color: var(--palette-common-white);
     color: var(--palette-common-black);
     border-bottom-color: var(--palette-common-white);
-    border-top-width: 5px;
+    border-top-width: calc(0.5 * var(--spacing-unit));
     border-top-color: var(--palette-primary-main);
   }
 }
diff --git a/src/core/client/ui/components/Tabs/Tab.mdx b/src/core/client/ui/components/Tabs/Tab.mdx
deleted file mode 100644
index f81399cfc..000000000
--- a/src/core/client/ui/components/Tabs/Tab.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
----
-name: Tab
-menu: UI Kit
----
-
-import { Playground, PropsTable } from 'docz'
-import HorizontalGutter from '../HorizontalGutter'
-
-
-import TabBar from './TabBar'
-import Tab from './Tab'
-
-# Tab
-`Tab` component is to be used within the `TabBar` component. This renders a Tab inside the Tab Bar.s
-
-## Basic Usage
-<Playground>
-  <HorizontalGutter>
-    <TabBar defaultActiveTab="one">
-      <Tab tabId="one">Tab one</Tab>
-      <Tab tabId="second">Active Tab</Tab>
-      <Tab tabId="three">Tab Three</Tab>
-    </TabBar>
-  </HorizontalGutter>
-</Playground>
diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx
index 9afe73023..e0fd95eb8 100644
--- a/src/core/client/ui/components/Tabs/Tab.tsx
+++ b/src/core/client/ui/components/Tabs/Tab.tsx
@@ -21,9 +21,9 @@ export interface TabProps {
    */
   active?: boolean;
   /**
-   * Color style variant
+   * Style variant
    */
-  color?: "primary" | "secondary";
+  variant?: "primary" | "secondary";
   /**
    * Action taken on tab click
    */
@@ -38,13 +38,13 @@ class Tab extends React.Component<TabProps> {
   };
 
   public render() {
-    const { className, classes, children, tabId, active, color } = this.props;
+    const { className, classes, children, tabId, active, variant } = this.props;
 
     const rootClassName = cn(
       classes.root,
       {
-        [classes.primary]: color === "primary",
-        [classes.secondary]: color === "secondary",
+        [classes.primary]: variant === "primary",
+        [classes.secondary]: variant === "secondary",
         [classes.active]: active,
       },
       className
diff --git a/src/core/client/ui/components/Tabs/TabBar.css b/src/core/client/ui/components/Tabs/TabBar.css
index cb75fbb27..7ea4a5ac3 100644
--- a/src/core/client/ui/components/Tabs/TabBar.css
+++ b/src/core/client/ui/components/Tabs/TabBar.css
@@ -9,5 +9,5 @@
 }
 
 .secondary {
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--palette-divider);
 }
diff --git a/src/core/client/ui/components/Tabs/TabBar.mdx b/src/core/client/ui/components/Tabs/TabBar.mdx
deleted file mode 100644
index 14fc68a3b..000000000
--- a/src/core/client/ui/components/Tabs/TabBar.mdx
+++ /dev/null
@@ -1,51 +0,0 @@
----
-name: TabBar
-menu: UI Kit
----
-
-import { Playground, PropsTable } from 'docz'
-import HorizontalGutter from '../HorizontalGutter'
-
-
-import TabBar from './TabBar'
-import Tab from './Tab'
-
-# TabBar
-
-## Basic Use
-<Playground>
-  <HorizontalGutter>
-
-    <TabBar defaultActiveTab="one">
-      <Tab tabId="one">Tab one</Tab>
-      <Tab tabId="second">Active Tab</Tab>
-      <Tab tabId="three">Tab Three</Tab>
-    </TabBar>
-
-    <TabBar defaultActiveTab="one" activeTab="second">
-      <Tab tabId="one">Tab one</Tab>
-      <Tab tabId="second">Active Tab</Tab>
-      <Tab tabId="three">Tab Three</Tab>
-    </TabBar>
-
-    <TabBar defaultActiveTab="one" activeTab="three">
-      <Tab tabId="one">Tab one</Tab>
-      <Tab tabId="second">Active Tab</Tab>
-      <Tab tabId="three">Tab Three</Tab>
-    </TabBar>
-
-  </HorizontalGutter>
-</Playground>
-
-## Secondary Color
-<Playground>
-  <HorizontalGutter>
-
-    <TabBar defaultActiveTab="one" color="secondary">
-      <Tab tabId="one">Tab one</Tab>
-      <Tab tabId="second">Active Tab</Tab>
-      <Tab tabId="three">Tab Three</Tab>
-    </TabBar>
-
-  </HorizontalGutter>
-</Playground>
diff --git a/src/core/client/ui/components/Tabs/TabContent.mdx b/src/core/client/ui/components/Tabs/TabContent.mdx
deleted file mode 100644
index 1646887a5..000000000
--- a/src/core/client/ui/components/Tabs/TabContent.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
----
-name: TabContent
-menu: UI Kit
----
-
-import { Playground, PropsTable } from 'docz'
-import HorizontalGutter from '../HorizontalGutter'
-
-import TabPane from './TabPane'
-import TabContent from './TabContent'
-
-# TabContent
-
-## Basic Use
-<Playground>
-  <HorizontalGutter>
-    <TabContent activeTab="one">
-      <TabPane tabId="one">Hola One</TabPane>
-      <TabPane tabId="two">Hola Two</TabPane>
-      <TabPane tabId="three">Hola Three</TabPane>
-    </TabContent>
-  </HorizontalGutter>
-</Playground>
diff --git a/src/core/client/ui/components/Tabs/TabPane.mdx b/src/core/client/ui/components/Tabs/TabPane.mdx
deleted file mode 100644
index 36cb915f0..000000000
--- a/src/core/client/ui/components/Tabs/TabPane.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
----
-name: TabPane
-menu: UI Kit
----
-
-import { Playground, PropsTable } from 'docz'
-import HorizontalGutter from '../HorizontalGutter'
-
-import TabPane from './TabPane'
-import TabContent from './TabContent'
-
-# TabPane
-
-## Basic Use
-<Playground>
-  <HorizontalGutter>
-    <TabContent activeTab="one">
-      <TabPane tabId="one">Hola One</TabPane>
-      <TabPane tabId="two">Hola Two</TabPane>
-      <TabPane tabId="three">Hola Three</TabPane>
-    </TabContent>
-  </HorizontalGutter>
-</Playground>
diff --git a/src/docs/tabs.mdx b/src/core/client/ui/components/Tabs/tabs.mdx
similarity index 100%
rename from src/docs/tabs.mdx
rename to src/core/client/ui/components/Tabs/tabs.mdx