diff --git a/web/sidebar/left-layout-aside.css b/web/sidebar/left-layout-aside.css
index 2e0304726..c38a7e82e 100644
--- a/web/sidebar/left-layout-aside.css
+++ b/web/sidebar/left-layout-aside.css
@@ -1,64 +1,34 @@
 .container {
   grid-area: sBar;
   background: var(--bg);
   display: flex;
   width: 400px;
 }
 
 .navigationPanelContainer {
   width: 160px;
   margin-top: 12px;
 }
 
 .navigationPanelTab {
   display: flex;
   flex-direction: row;
   padding: 12px 0 12px 28px;
   cursor: pointer;
 }
 
-.navigationPanelTab svg {
-  padding-right: 12px;
-  color: var(--color-disabled);
-  stroke: var(--color-disabled);
-  fill: var(--color-disabled);
-}
-
 .navigationPanelTab p {
   color: var(--color-disabled);
 }
 
 .navigationPanelTab:hover p,
-.navigationPanelTab:hover svg,
-div.current_tab p,
-div.current_tab svg {
+div.current_tab p {
   color: var(--fg);
   stroke: var(--fg);
   fill: var(--fg);
 }
 
 .container p {
   display: flex;
   align-content: center;
 }
-
-.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;
-}
diff --git a/web/topbar/app-switcher.react.js b/web/topbar/app-switcher.react.js
index 3884025dd..6870475bc 100644
--- a/web/topbar/app-switcher.react.js
+++ b/web/topbar/app-switcher.react.js
@@ -1,134 +1,134 @@
 // @flow
 
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import {
   mostRecentlyReadThreadSelector,
   unreadCount,
 } from 'lib/selectors/thread-selectors.js';
 
+import css from './topbar.css';
 import { updateNavInfoActionType } from '../redux/action-types.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { navTabSelector } from '../selectors/nav-selectors.js';
-import css from '../sidebar/left-layout-aside.css';
 import NavigationPanel from '../sidebar/navigation-panel.react.js';
 
 function AppSwitcher(): React.Node {
   const activeChatThreadID = useSelector(
     state => state.navInfo.activeChatThreadID,
   );
   const mostRecentlyReadThread = useSelector(mostRecentlyReadThreadSelector);
   const isActiveThreadCurrentlyUnread = useSelector(
     state =>
       !activeChatThreadID ||
       !!state.threadStore.threadInfos[activeChatThreadID]?.currentUser.unread,
   );
 
   const dispatch = useDispatch();
 
   const onClickChat = React.useCallback(
     (event: SyntheticEvent<HTMLAnchorElement>) => {
       event.preventDefault();
       dispatch({
         type: updateNavInfoActionType,
         payload: {
           tab: 'chat',
           activeChatThreadID: isActiveThreadCurrentlyUnread
             ? mostRecentlyReadThread
             : activeChatThreadID,
         },
       });
     },
     [
       dispatch,
       isActiveThreadCurrentlyUnread,
       mostRecentlyReadThread,
       activeChatThreadID,
     ],
   );
 
   const boundUnreadCount = useSelector(unreadCount);
 
   let chatBadge = null;
   if (boundUnreadCount > 0) {
     chatBadge = <span className={css.chatBadge}>{boundUnreadCount}</span>;
   }
 
   const chatNavigationItem = React.useMemo(
     () => (
       <NavigationPanel.Item tab="chat">
         <a className={css.navigationPanelTab} onClick={onClickChat}>
           <span className={css.chatIconWrapper}>
             <SWMansionIcon icon="message-square" size={24} />
             {chatBadge}
           </span>
           <p>Chat</p>
         </a>
       </NavigationPanel.Item>
     ),
     [chatBadge, onClickChat],
   );
 
   const onClickCalendar = React.useCallback(
     (event: SyntheticEvent<HTMLAnchorElement>) => {
       event.preventDefault();
       dispatch({
         type: updateNavInfoActionType,
         payload: { tab: 'calendar' },
       });
     },
     [dispatch],
   );
 
   const isCalendarEnabled = useSelector(state => state.enabledApps.calendar);
   const calendarNavigationItem = React.useMemo(() => {
     if (!isCalendarEnabled) {
       return null;
     }
     return (
       <NavigationPanel.Item tab="calendar">
         <a className={css.navigationPanelTab} onClick={onClickCalendar}>
           <SWMansionIcon icon="calendar" size={24} />
           <p>Calendar</p>
         </a>
       </NavigationPanel.Item>
     );
   }, [isCalendarEnabled, onClickCalendar]);
 
   const onClickApps = React.useCallback(
     (event: SyntheticEvent<HTMLAnchorElement>) => {
       event.preventDefault();
       dispatch({
         type: updateNavInfoActionType,
         payload: {
           tab: 'apps',
         },
       });
     },
     [dispatch],
   );
 
   const appNavigationItem = React.useMemo(
     () => (
       <NavigationPanel.Item tab="apps">
         <a className={css.navigationPanelTab} onClick={onClickApps}>
           <SWMansionIcon icon="globe-1" size={24} />
           <p>Apps</p>
         </a>
       </NavigationPanel.Item>
     ),
     [onClickApps],
   );
 
   return (
-    <NavigationPanel.Container tabSelector={navTabSelector}>
+    <NavigationPanel.Container tabSelector={navTabSelector} horizontal={true}>
       {chatNavigationItem}
       {calendarNavigationItem}
       {appNavigationItem}
     </NavigationPanel.Container>
   );
 }
 
 export default AppSwitcher;
diff --git a/web/topbar/topbar.react.js b/web/topbar/topbar.react.js
index 5a7771396..c03099e25 100644
--- a/web/topbar/topbar.react.js
+++ b/web/topbar/topbar.react.js
@@ -1,13 +1,18 @@
 // @flow
 
 import * as React from 'react';
 
+import AppSwitcher from './app-switcher.react.js';
 import css from './topbar.css';
 
 function Topbar(): React.Node {
-  return <div className={css.container}>dummy</div>;
+  return (
+    <div className={css.container}>
+      <AppSwitcher />
+    </div>
+  );
 }
 
 const MemoizedTopbar: React.ComponentType<{}> = React.memo<{}>(Topbar);
 
 export default MemoizedTopbar;