diff --git a/web/chat/chat-tabs.css b/web/chat/chat-tabs.css
--- a/web/chat/chat-tabs.css
+++ b/web/chat/chat-tabs.css
@@ -3,15 +3,7 @@
   background-color: var(--bg);
   border-right: 1px solid var(--border-color);
   display: flex;
-}
-
-div.tabItem {
-  display: flex;
-  align-items: center;
-}
-
-div.tabItem svg {
-  padding-right: 8px;
+  flex-direction: column;
 }
 
 div.threadList {
@@ -20,4 +12,5 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  border-top: 1px solid var(--border-color);
 }
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
@@ -7,17 +7,33 @@
 
 import css from './chat-tabs.css';
 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-legacy.react.js';
+import Tabs, { type TabData } from '../components/tabs.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
+type TabType = 'Background' | 'Focus';
+
 function ChatTabs(): React.Node {
   let backgroundTitle = 'Background';
   const unreadBackgroundCountVal = useSelector(unreadBackgroundCount);
   if (unreadBackgroundCountVal) {
     backgroundTitle += ` (${unreadBackgroundCountVal})`;
   }
+
+  const tabsData: $ReadOnlyArray<TabData<TabType>> = React.useMemo(
+    () => [
+      {
+        id: 'Focus',
+        header: 'Focused',
+      },
+      {
+        id: 'Background',
+        header: backgroundTitle,
+      },
+    ],
+    [backgroundTitle],
+  );
+
   const threadListContext = React.useContext(ThreadListContext);
   invariant(
     threadListContext,
@@ -25,53 +41,24 @@
   );
   const { activeTab, setActiveTab } = threadListContext;
 
-  const setActiveChatTab = React.useCallback(
-    (newTab: 'Background' | 'Focus') => {
-      setActiveTab(newTab);
-    },
-    [setActiveTab],
-  );
-
-  const chatThreadList = React.useMemo(
-    () => (
-      <div className={css.threadList}>
-        <ChatThreadList />
-      </div>
-    ),
-    [],
-  );
-
-  const focusTabsItem = React.useMemo(
-    () => (
-      <Tabs.Item id="Focus" header={<ChatThreadTab title="Focused" />}>
-        {chatThreadList}
-      </Tabs.Item>
-    ),
-    [chatThreadList],
-  );
-
-  const backgroundTabsItem = React.useMemo(
+  const tabs = React.useMemo(
     () => (
-      <Tabs.Item
-        id="Background"
-        header={<ChatThreadTab title={backgroundTitle} />}
-      >
-        {chatThreadList}
-      </Tabs.Item>
+      <Tabs
+        tabItems={tabsData}
+        activeTab={activeTab}
+        setTab={setActiveTab}
+        headerStyle="pill"
+      />
     ),
-    [backgroundTitle, chatThreadList],
+    [activeTab, setActiveTab, tabsData],
   );
 
   return (
     <div className={css.container}>
-      <Tabs.Container
-        activeTab={activeTab}
-        setTab={setActiveChatTab}
-        headerStyle="pill"
-      >
-        {focusTabsItem}
-        {backgroundTabsItem}
-      </Tabs.Container>
+      {tabs}
+      <div className={css.threadList}>
+        <ChatThreadList />
+      </div>
     </div>
   );
 }
diff --git a/web/chat/chat-thread-tab.react.js b/web/chat/chat-thread-tab.react.js
deleted file mode 100644
--- a/web/chat/chat-thread-tab.react.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// @flow
-
-import * as React from 'react';
-
-import css from './chat-tabs.css';
-
-type Props = {
-  +title: string,
-};
-function ChatThreadTab(props: Props): React.Node {
-  const { title } = props;
-
-  return <div className={css.tabItem}>{title}</div>;
-}
-
-export default ChatThreadTab;