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
@@ -64,7 +64,11 @@
 
   return (
     <div className={css.container}>
-      <Tabs.Container activeTab={activeTab} setTab={setActiveChatTab}>
+      <Tabs.Container
+        activeTab={activeTab}
+        setTab={setActiveChatTab}
+        headerStyle="pill"
+      >
         {focusTabsItem}
         {backgroundTabsItem}
       </Tabs.Container>
diff --git a/web/components/tabs-header.js b/web/components/tabs-header.js
--- a/web/components/tabs-header.js
+++ b/web/components/tabs-header.js
@@ -4,17 +4,22 @@
 import * as React from 'react';
 
 import Button from './button.react.js';
-import css from './tabs.css';
+import cssPill from './tabs-pill.css';
+import cssUnderline from './tabs-underline.css';
+
+export type TabsHeaderStyle = 'pill' | 'underline';
 
 type Props<T: string> = {
   +children: React.Node,
   +isActive: boolean,
   +setTab: T => mixed,
   +id: T,
+  +headerStyle?: TabsHeaderStyle,
 };
 
 function TabsHeader<T: string>(props: Props<T>): React.Node {
-  const { children, isActive, setTab, id } = props;
+  const { children, isActive, setTab, id, headerStyle = 'underline' } = props;
+  const css = headerStyle === 'pill' ? cssPill : cssUnderline;
   const headerClasses = classnames(css.tabHeader, {
     [css.backgroundTabHeader]: !isActive,
   });
diff --git a/web/components/tabs.css b/web/components/tabs-pill.css
rename from web/components/tabs.css
rename to web/components/tabs-pill.css
--- a/web/components/tabs.css
+++ b/web/components/tabs-pill.css
@@ -32,7 +32,7 @@
 }
 
 .backgroundTabHeader {
-  color: var(--tabs-header-background-color);
+  color: var(--tabs-header-background-color-pill);
   background-color: transparent;
 }
 
diff --git a/web/components/tabs-underline.css b/web/components/tabs-underline.css
new file mode 100644
--- /dev/null
+++ b/web/components/tabs-underline.css
@@ -0,0 +1,35 @@
+div.tabsContainer {
+  color: var(--fg);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  max-height: 100%;
+  flex: 1;
+}
+
+div.tabsHeaderContainer {
+  display: flex;
+}
+
+.tabsHeaderContainerPill {
+  display: flex;
+  width: 100%;
+}
+
+.tabHeader {
+  flex: 1;
+  padding: 16px;
+  font-size: var(--m-font-16);
+  color: var(--tabs-header-active-color);
+  border-bottom: 2px solid var(--tabs-header-active-border);
+}
+
+.backgroundTabHeader {
+  color: var(--tabs-header-background-color);
+  border-bottom-color: var(--tabs-header-background-border);
+}
+
+.backgroundTabHeader:hover {
+  color: var(--tabs-header-background-color-hover);
+  border-bottom-color: var(--tabs-header-background-border-hover);
+}
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
@@ -3,23 +3,33 @@
 import * as React from 'react';
 
 import TabsHeader from './tabs-header.js';
-import css from './tabs.css';
+import type { TabsHeaderStyle } from './tabs-header.js';
+import cssPill from './tabs-pill.css';
+import cssUnderline from './tabs-underline.css';
 
 type TabsContainerProps<T: string> = {
   +children?: React.ChildrenArray<?React.Element<typeof TabsItem>>,
   +activeTab: T,
   +setTab: T => mixed,
+  +headerStyle?: TabsHeaderStyle,
 };
 
 function TabsContainer<T: string>(props: TabsContainerProps<T>): React.Node {
-  const { children, activeTab, setTab } = props;
+  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}>
+      <TabsHeader
+        id={id}
+        isActive={isActive}
+        setTab={setTab}
+        headerStyle={headerStyle}
+      >
         {header}
       </TabsHeader>
     );
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -140,7 +140,8 @@
   --tabs-header-active-color: var(--shades-white-100);
   --tabs-header-active-border: var(--violet-light-100);
   --tabs-header-active-background: var(--violet-dark-100);
-  --tabs-header-background-color: var(--shades-white-60);
+  --tabs-header-background-color: var(--shades-black-60);
+  --tabs-header-background-color-pill: 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);