diff --git a/web/chat/chat-tabs.css b/web/chat/chat-tabs.css
index 76defbda2..0390b867d 100644
--- a/web/chat/chat-tabs.css
+++ b/web/chat/chat-tabs.css
@@ -1,53 +1,24 @@
 div.container {
   position: absolute;
   width: 400px;
   top: 0;
   bottom: 0;
   background-color: var(--bg);
   border-right: 1px solid var(--border-color);
   display: flex;
   flex-direction: column;
 }
 
-div.tabs {
-  display: flex;
-  flex-direction: row;
-  color: var(--fg);
-  background: var(--bg);
-}
-
 div.tabItem {
   display: flex;
-  justify-content: center;
   align-items: center;
-  width: 50%;
-  padding: 16px 0;
-  text-align: center;
-  cursor: pointer;
-  background-color: var(--bg);
-  color: var(--color-disabled);
-  border: 2px solid var(--border-color);
-  border-width: 0 0 3px 0;
-  transition: 150ms;
-}
-div.tabItem:hover {
-  color: var(--fg);
-  transition: 150ms;
 }
+
 div.tabItem svg {
   padding-right: 8px;
 }
-div.tabItemActive {
-  border: outset var(--thread-selection);
-  color: var(--fg);
-  border-width: 0 0 3px 0;
-}
-div.tabItemInactive {
-  background-color: var(--bg);
-  color: var(--color-disabled);
-}
 
 div.threadList {
   flex: 1;
   overflow-y: auto;
 }
diff --git a/web/chat/chat-tabs.react.js b/web/chat/chat-tabs.react.js
index 12cfc586e..6e7ee86a5 100644
--- a/web/chat/chat-tabs.react.js
+++ b/web/chat/chat-tabs.react.js
@@ -1,58 +1,78 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { unreadBackgroundCount } from 'lib/selectors/thread-selectors';
 
+import Tabs from '../components/tabs.react';
 import { useSelector } from '../redux/redux-utils';
 import css from './chat-tabs.css';
 import ChatThreadList from './chat-thread-list.react';
 import ChatThreadTab from './chat-thread-tab.react';
 import { ThreadListContext } from './thread-list-provider';
 
 function ChatTabs(): React.Node {
   let backgroundTitle = 'Background';
   const unreadBackgroundCountVal = useSelector(unreadBackgroundCount);
   if (unreadBackgroundCountVal) {
     backgroundTitle += ` (${unreadBackgroundCountVal})`;
   }
   const threadListContext = React.useContext(ThreadListContext);
   invariant(
     threadListContext,
     'threadListContext should be set in ChatThreadList',
   );
   const { activeTab, setActiveTab } = threadListContext;
 
-  const onClickHome = React.useCallback(() => setActiveTab('Focus'), [
-    setActiveTab,
-  ]);
-  const onClickBackground = React.useCallback(
-    () => setActiveTab('Background'),
+  const setActiveChatTab = React.useCallback(
+    (newTab: 'Background' | 'Focus') => {
+      setActiveTab(newTab);
+    },
     [setActiveTab],
   );
 
-  return (
-    <div className={css.container}>
-      <div className={css.tabs}>
-        <ChatThreadTab
-          title="Focus"
-          tabIsActive={activeTab === 'Focus'}
-          onClick={onClickHome}
-          icon="message-filled-round"
-        />
-        <ChatThreadTab
-          title={backgroundTitle}
-          tabIsActive={activeTab === 'Background'}
-          onClick={onClickBackground}
-          icon="bell-disabled"
-        />
-      </div>
+  const chatThreadList = React.useMemo(
+    () => (
       <div className={css.threadList}>
         <ChatThreadList />
       </div>
+    ),
+    [],
+  );
+
+  const focusTabsItem = React.useMemo(
+    () => (
+      <Tabs.Item
+        id="Focus"
+        header={<ChatThreadTab title="Focus" icon="message-filled-round" />}
+      >
+        {chatThreadList}
+      </Tabs.Item>
+    ),
+    [chatThreadList],
+  );
+
+  const backgroundTabsItem = React.useMemo(
+    () => (
+      <Tabs.Item
+        id="Background"
+        header={<ChatThreadTab title={backgroundTitle} icon="bell-disabled" />}
+      >
+        {chatThreadList}
+      </Tabs.Item>
+    ),
+    [backgroundTitle, chatThreadList],
+  );
+
+  return (
+    <div className={css.container}>
+      <Tabs.Container activeTab={activeTab} setTab={setActiveChatTab}>
+        {focusTabsItem}
+        {backgroundTabsItem}
+      </Tabs.Container>
     </div>
   );
 }
 
 export default ChatTabs;
diff --git a/web/chat/chat-thread-tab.react.js b/web/chat/chat-thread-tab.react.js
index feccabe60..3bbc11555 100644
--- a/web/chat/chat-thread-tab.react.js
+++ b/web/chat/chat-thread-tab.react.js
@@ -1,29 +1,23 @@
 // @flow
 
-import classNames from 'classnames';
 import * as React from 'react';
 
 import SWMansionIcon, { type Icon } from '../SWMansionIcon.react';
 import css from './chat-tabs.css';
 
 type Props = {
   +title: string,
-  +onClick: (title: string) => void,
-  +tabIsActive: boolean,
   +icon: Icon,
 };
 function ChatThreadTab(props: Props): React.Node {
-  const { title, onClick, tabIsActive, icon } = props;
-  const className = classNames(css.tabItem, {
-    [css.tabItemActive]: tabIsActive,
-  });
+  const { title, icon } = props;
 
   return (
-    <div className={className} onClick={onClick}>
+    <div className={css.tabItem}>
       <SWMansionIcon icon={icon} size={24} />
-      <span>{title}</span>
+      {title}
     </div>
   );
 }
 
 export default ChatThreadTab;