diff --git a/web/components/tabs.css b/web/components/tabs.css
new file mode 100644
--- /dev/null
+++ b/web/components/tabs.css
@@ -0,0 +1,9 @@
+.container {
+  display: flex;
+}
+
+.containerPill {
+  background-color: var(--tab-background-primary-default);
+  margin: 8px;
+  border-radius: 8px;
+}
diff --git a/web/components/tabs.react.js b/web/components/tabs.react.js
new file mode 100644
--- /dev/null
+++ b/web/components/tabs.react.js
@@ -0,0 +1,52 @@
+// @flow
+
+import classNames from 'classnames';
+import * as React from 'react';
+
+import TabsHeader, { type TabsHeaderStyle } from './tabs-header.js';
+import css from './tabs.css';
+
+export type TabData<T: string> = {
+  +id: T,
+  +header: React.Node,
+};
+
+type Props<T: string> = {
+  +tabItems: $ReadOnlyArray<TabData<T>>,
+  +activeTab: T,
+  +setTab: T => mixed,
+  +headerStyle?: TabsHeaderStyle,
+};
+
+function Tabs<T: string>(props: Props<T>): React.Node {
+  const { tabItems, activeTab, setTab, headerStyle = 'underline' } = props;
+
+  const items = React.useMemo(
+    () =>
+      tabItems.map((item, index) => (
+        <TabsHeader
+          key={index}
+          id={item.id}
+          isActive={item.id === activeTab}
+          setTab={setTab}
+          headerStyle={headerStyle}
+        >
+          {item.header}
+        </TabsHeader>
+      )),
+    [activeTab, headerStyle, setTab, tabItems],
+  );
+
+  const className = classNames(css.container, {
+    [css.containerPill]: headerStyle === 'pill',
+  });
+
+  const tabs = React.useMemo(
+    () => <div className={className}>{items}</div>,
+    [className, items],
+  );
+
+  return tabs;
+}
+
+export default Tabs;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -336,6 +336,9 @@
   --unreadIndicator-background-primary-default: var(--error-primary);
   --unreadIndicator-label-primary-default: var(--shades-white-100);
   --unreadIndicator-border-primary-default: var(--shades-black-85);
+
+  /* Tab */
+  --tab-background-primary-default: var(--shades-black-85);
 }
 
 /* Light theme */
@@ -425,4 +428,8 @@
   --unreadIndicator-background-primary-default: var(--error-primary);
   --unreadIndicator-label-primary-default: var(--shades-white-100);
   --unreadIndicator-border-primary-default: var(--shades-white-80);
+
+  /* Tab */
+  /* @GINSU: TODO double check these values after redesign is finished */
+  --tab-background-primary-default: var(--shades-white-60);
 }