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
@@ -43,10 +43,7 @@
 
   const focusTabsItem = React.useMemo(
     () => (
-      <Tabs.Item
-        id="Focus"
-        header={<ChatThreadTab title="Focus" icon="home-1" />}
-      >
+      <Tabs.Item id="Focus" header={<ChatThreadTab title="Focused" />}>
         {chatThreadList}
       </Tabs.Item>
     ),
@@ -57,7 +54,7 @@
     () => (
       <Tabs.Item
         id="Background"
-        header={<ChatThreadTab title={backgroundTitle} icon="bell-disabled" />}
+        header={<ChatThreadTab title={backgroundTitle} />}
       >
         {chatThreadList}
       </Tabs.Item>
diff --git a/web/chat/chat-thread-tab.react.js b/web/chat/chat-thread-tab.react.js
--- a/web/chat/chat-thread-tab.react.js
+++ b/web/chat/chat-thread-tab.react.js
@@ -2,25 +2,15 @@
 
 import * as React from 'react';
 
-import SWMansionIcon, {
-  type Icon,
-} from 'lib/components/SWMansionIcon.react.js';
-
 import css from './chat-tabs.css';
 
 type Props = {
   +title: string,
-  +icon: Icon,
 };
 function ChatThreadTab(props: Props): React.Node {
-  const { title, icon } = props;
+  const { title } = props;
 
-  return (
-    <div className={css.tabItem}>
-      <SWMansionIcon icon={icon} size={24} />
-      {title}
-    </div>
-  );
+  return <div className={css.tabItem}>{title}</div>;
 }
 
 export default ChatThreadTab;
diff --git a/web/components/tabs.css b/web/components/tabs.css
--- a/web/components/tabs.css
+++ b/web/components/tabs.css
@@ -8,23 +8,39 @@
 }
 
 div.tabsHeaderContainer {
+  border-bottom: 1px solid var(--border);
+  height: 56px;
+}
+
+.tabsHeaderContainerPill {
   display: flex;
+  background-color: var(--menu-bg);
+  border-radius: 8px;
+  margin: 8px;
+  align-items: center;
 }
 
 .tabHeader {
   flex: 1;
-  padding: 16px;
-  font-size: var(--m-font-16);
+  font-size: var(--s-font-14);
+  font-weight: var(--semi-bold);
   color: var(--tabs-header-active-color);
-  border-bottom: 2px solid var(--tabs-header-active-border);
+  height: 32px;
+  border-radius: 4px;
+  background-color: var(--tabs-header-active-background);
+  margin: 4px;
 }
 
 .backgroundTabHeader {
   color: var(--tabs-header-background-color);
-  border-bottom-color: var(--tabs-header-background-border);
+  background-color: transparent;
 }
 
 .backgroundTabHeader:hover {
   color: var(--tabs-header-background-color-hover);
-  border-bottom-color: var(--tabs-header-background-border-hover);
+  transition: color 100ms;
+}
+
+.backgroundTabHeader:not(:hover) {
+  transition: color 100ms;
 }
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
@@ -33,7 +33,9 @@
 
   return (
     <div className={css.tabsContainer}>
-      <div className={css.tabsHeaderContainer}>{headers}</div>
+      <div className={css.tabsHeaderContainer}>
+        <div className={css.tabsHeaderContainerPill}>{headers}</div>
+      </div>
       {currentContent}
     </div>
   );
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -139,7 +139,8 @@
   --search-icon-color: var(--shades-black-60);
   --tabs-header-active-color: var(--shades-white-100);
   --tabs-header-active-border: var(--violet-light-100);
-  --tabs-header-background-color: var(--shades-black-60);
+  --tabs-header-active-background: var(--violet-dark-100);
+  --tabs-header-background-color: var(--shades-white-60);
   --tabs-header-background-border: var(--shades-black-80);
   --tabs-header-background-color-hover: var(--shades-white-80);
   --tabs-header-background-border-hover: var(--shades-black-70);