diff --git a/web/avatars/emoji-avatar-selection-modal.react.js b/web/avatars/emoji-avatar-selection-modal.react.js
--- a/web/avatars/emoji-avatar-selection-modal.react.js
+++ b/web/avatars/emoji-avatar-selection-modal.react.js
@@ -14,7 +14,7 @@
 import Avatar from './avatar.react.js';
 import css from './emoji-avatar-selection-modal.css';
 import Button, { buttonThemes } from '../components/button.react.js';
-import Tabs from '../components/tabs.react.js';
+import Tabs from '../components/tabs-legacy.react.js';
 import LoadingIndicator from '../loading-indicator.react.js';
 import Modal from '../modals/modal.react.js';
 import ColorSelector from '../modals/threads/color-selector.react.js';
diff --git a/web/chat/chat-tabs.react.js b/web/chat/chat-tabs.react.js
--- a/web/chat/chat-tabs.react.js
+++ b/web/chat/chat-tabs.react.js
@@ -9,7 +9,7 @@
 import ChatThreadList from './chat-thread-list.react.js';
 import ChatThreadTab from './chat-thread-tab.react.js';
 import { ThreadListContext } from './thread-list-provider.js';
-import Tabs from '../components/tabs.react.js';
+import Tabs from '../components/tabs-legacy.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 function ChatTabs(): React.Node {
diff --git a/web/components/tabs.react.js b/web/components/tabs-legacy.react.js
copy from web/components/tabs.react.js
copy to web/components/tabs-legacy.react.js
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
--- a/web/components/tabs.react.js
+++ b/web/components/tabs.react.js
@@ -1,70 +1,47 @@
 // @flow
 
+import classNames from 'classnames';
 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';
+import TabsHeader, { type TabsHeaderStyle } from './tabs-header.js';
+import css from './tabs.css';
 
-type TabsContainerProps<T: string> = {
-  +children?: React.ChildrenArray<?React.Element<typeof TabsItem>>,
+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 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,
+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 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,
-};
+  const className = classNames(css.container, {
+    [css.containerPill]: headerStyle === 'pill',
+  });
 
-function TabsItem<T: string>(props: TabsItemProps<T>): React.Node {
-  const { children } = props;
-  return children;
+  return <div className={className}>{items}</div>;
 }
 
-const Tabs = {
-  Container: TabsContainer,
-  Item: TabsItem,
-};
-
 export default Tabs;
diff --git a/web/modals/threads/gallery/thread-settings-media-gallery.react.js b/web/modals/threads/gallery/thread-settings-media-gallery.react.js
--- a/web/modals/threads/gallery/thread-settings-media-gallery.react.js
+++ b/web/modals/threads/gallery/thread-settings-media-gallery.react.js
@@ -14,7 +14,7 @@
 
 import GalleryItem from './thread-settings-media-gallery-item.react.js';
 import css from './thread-settings-media-gallery.css';
-import Tabs from '../../../components/tabs.react.js';
+import Tabs from '../../../components/tabs-legacy.react.js';
 import MultimediaModal from '../../../media/multimedia-modal.react.js';
 import Modal from '../../modal.react.js';
 
diff --git a/web/modals/threads/members/members-modal.react.js b/web/modals/threads/members/members-modal.react.js
--- a/web/modals/threads/members/members-modal.react.js
+++ b/web/modals/threads/members/members-modal.react.js
@@ -17,7 +17,7 @@
 import ThreadMembersList from './members-list.react.js';
 import css from './members-modal.css';
 import Button from '../../../components/button.react.js';
-import Tabs from '../../../components/tabs.react.js';
+import Tabs from '../../../components/tabs-legacy.react.js';
 import { useSelector } from '../../../redux/redux-utils.js';
 import SearchModal from '../../search-modal.react.js';
 
diff --git a/web/modals/threads/settings/thread-settings-modal.react.js b/web/modals/threads/settings/thread-settings-modal.react.js
--- a/web/modals/threads/settings/thread-settings-modal.react.js
+++ b/web/modals/threads/settings/thread-settings-modal.react.js
@@ -27,7 +27,7 @@
 import css from './thread-settings-modal.css';
 import ThreadSettingsPrivacyTab from './thread-settings-privacy-tab.react.js';
 import ThreadSettingsRelationshipTab from './thread-settings-relationship-tab.react.js';
-import Tabs from '../../../components/tabs.react.js';
+import Tabs from '../../../components/tabs-legacy.react.js';
 import { useSelector } from '../../../redux/redux-utils.js';
 import Modal from '../../modal.react.js';
 
diff --git a/web/modals/threads/sidebars/sidebars-modal.react.js b/web/modals/threads/sidebars/sidebars-modal.react.js
--- a/web/modals/threads/sidebars/sidebars-modal.react.js
+++ b/web/modals/threads/sidebars/sidebars-modal.react.js
@@ -7,7 +7,7 @@
 
 import SidebarList from './sidebar-list.react.js';
 import css from './sidebars-modal.css';
-import Tabs from '../../../components/tabs.react.js';
+import Tabs from '../../../components/tabs-legacy.react.js';
 import SearchModal from '../../search-modal.react.js';
 
 type SidebarTab = 'All Threads' | 'My Threads';
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);
 }