diff --git a/web/sidebar/navigation-panel.react.js b/web/sidebar/navigation-panel.react.js
--- a/web/sidebar/navigation-panel.react.js
+++ b/web/sidebar/navigation-panel.react.js
@@ -3,9 +3,10 @@
 import classNames from 'classnames';
 import * as React from 'react';
 
-import css from './left-layout-aside.css';
+import verticalCSS from './left-layout-aside.css';
 import type { AppState } from '../redux/redux-setup.js';
 import { useSelector } from '../redux/redux-utils.js';
+import horizontalCSS from '../topbar/topbar.css';
 
 type NavigationPanelItemProps = {
   +tab: string,
@@ -20,13 +21,15 @@
 type NavigationPanelContainerProps<T> = {
   +tabSelector: AppState => T,
   +children: React.ChildrenArray<?React.Element<typeof NavigationPanelItem>>,
+  +horizontal?: boolean,
 };
 
 function NavigationPanelContainer<T>(
   props: NavigationPanelContainerProps<T>,
 ): React.Node {
-  const { children, tabSelector } = props;
+  const { children, tabSelector, horizontal = false } = props;
   const currentTab = useSelector(tabSelector);
+  const css = horizontal ? horizontalCSS : verticalCSS;
 
   const items = React.useMemo(
     () =>
@@ -45,7 +48,7 @@
           </div>
         );
       }),
-    [children, currentTab],
+    [children, css.current_tab, currentTab],
   );
 
   return <div className={css.navigationPanelContainer}>{items}</div>;
diff --git a/web/topbar/topbar.css b/web/topbar/topbar.css
--- a/web/topbar/topbar.css
+++ b/web/topbar/topbar.css
@@ -2,3 +2,63 @@
   border-bottom: 1px solid var(--border);
   height: 60px;
 }
+
+.navigationPanelContainer {
+  flex-direction: row;
+  display: flex;
+  height: 60px;
+}
+
+.navigationPanelTab {
+  display: flex;
+  flex-direction: row;
+  padding: 16px;
+  cursor: pointer;
+}
+
+.navigationPanelTab svg {
+  color: var(--color-disabled);
+  stroke: var(--color-disabled);
+  fill: var(--color-disabled);
+}
+
+.navigationPanelTab p {
+  color: var(--color-disabled);
+  margin-right: 8px;
+  margin-left: 8px;
+}
+
+.navigationPanelTab:hover p,
+.navigationPanelTab:hover svg,
+div.current_tab p,
+div.current_tab svg {
+  color: var(--fg);
+  stroke: var(--fg);
+  fill: var(--fg);
+}
+
+div.current_tab {
+  border-bottom: 2px solid var(--tabs-header-active-border);
+  height: 58px;
+}
+
+.chatIconWrapper {
+  position: relative;
+}
+
+span.chatBadge {
+  position: absolute;
+  top: -4px;
+  left: 13px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--fg);
+  background: var(--unread-bg);
+  border-radius: 13px;
+  font-size: 8px;
+  line-height: 1.25;
+}