diff --git a/web/sidebar/navigation-panel.react.js b/web/sidebar/navigation-panel.react.js
index 275e5e42c..4b51d4232 100644
--- a/web/sidebar/navigation-panel.react.js
+++ b/web/sidebar/navigation-panel.react.js
@@ -1,59 +1,62 @@
 // @flow
 
 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,
   +children: React.Node,
 };
 
 function NavigationPanelItem(props: NavigationPanelItemProps): React.Node {
   const { children } = props;
   return children;
 }
 
 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(
     () =>
       React.Children.map(children, child => {
         if (!child) {
           return null;
         }
         return (
           <div
             key={child.props.tab}
             className={classNames({
               [css.current_tab]: currentTab === child.props.tab,
             })}
           >
             {child}
           </div>
         );
       }),
-    [children, currentTab],
+    [children, css.current_tab, currentTab],
   );
 
   return <div className={css.navigationPanelContainer}>{items}</div>;
 }
 
 const NavigationPanel = {
   Item: NavigationPanelItem,
   Container: NavigationPanelContainer,
 };
 
 export default NavigationPanel;
diff --git a/web/topbar/topbar.css b/web/topbar/topbar.css
index ea69b6c4e..2ebeca606 100644
--- a/web/topbar/topbar.css
+++ b/web/topbar/topbar.css
@@ -1,4 +1,64 @@
 .container {
   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;
+}