diff --git a/web/navigation-panels/app-switcher.react.js b/web/navigation-panels/app-switcher.react.js
index b41c1753e..5172f5b2c 100644
--- a/web/navigation-panels/app-switcher.react.js
+++ b/web/navigation-panels/app-switcher.react.js
@@ -1,134 +1,108 @@
 // @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 NavigationPanel from './navigation-panel.react.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';
 
 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} horizontal={true}>
       {chatNavigationItem}
       {calendarNavigationItem}
-      {appNavigationItem}
     </NavigationPanel.Container>
   );
 }
 
 export default AppSwitcher;
diff --git a/web/navigation-panels/topbar.css b/web/navigation-panels/topbar.css
index 2ebeca606..c7c7f1962 100644
--- a/web/navigation-panels/topbar.css
+++ b/web/navigation-panels/topbar.css
@@ -1,64 +1,90 @@
 .container {
   border-bottom: 1px solid var(--border);
   height: 60px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .navigationPanelContainer {
   flex-direction: row;
   display: flex;
   height: 60px;
 }
 
+.plusButton {
+  margin: 12px;
+  display: flex;
+  cursor: pointer;
+  color: var(--topbar-button-fg);
+  align-items: center;
+  justify-content: center;
+  background-color: var(--topbar-button-bg);
+  border-radius: 4px;
+  width: 32px;
+  height: 32px;
+}
+
+.plusButton:hover {
+  background-color: var(--topbar-button-bg-hover);
+}
+
 .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;
 }
+
+.tabs {
+  display: flex;
+  overflow: auto;
+  max-width: calc(100% - 56px);
+}
diff --git a/web/navigation-panels/topbar.react.js b/web/navigation-panels/topbar.react.js
index c03099e25..c491db3f3 100644
--- a/web/navigation-panels/topbar.react.js
+++ b/web/navigation-panels/topbar.react.js
@@ -1,18 +1,46 @@
 // @flow
 
 import * as React from 'react';
+import { useDispatch } from 'react-redux';
+
+import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 
 import AppSwitcher from './app-switcher.react.js';
 import css from './topbar.css';
+import Button from '../components/button.react.js';
+import { updateNavInfoActionType } from '../redux/action-types.js';
 
 function Topbar(): React.Node {
+  const dispatch = useDispatch();
+
+  const onClickApps = React.useCallback(() => {
+    dispatch({
+      type: updateNavInfoActionType,
+      payload: {
+        tab: 'apps',
+      },
+    });
+  }, [dispatch]);
+
+  const appNavigationItem = React.useMemo(
+    () => (
+      <Button className={css.plusButton} onClick={onClickApps}>
+        <SWMansionIcon icon="plus-small" size={24} />
+      </Button>
+    ),
+    [onClickApps],
+  );
+
   return (
     <div className={css.container}>
-      <AppSwitcher />
+      <div className={css.tabs}>
+        <AppSwitcher />
+      </div>
+      {appNavigationItem}
     </div>
   );
 }
 
 const MemoizedTopbar: React.ComponentType<{}> = React.memo<{}>(Topbar);
 
 export default MemoizedTopbar;
diff --git a/web/theme.css b/web/theme.css
index 0b7a35a08..459ec7719 100644
--- a/web/theme.css
+++ b/web/theme.css
@@ -1,206 +1,209 @@
 :root {
   /* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below
 
      The reason we never use color values defined here directly in CSS is
 
       1. It makes changing themes from light / dark / user generated impossible.
       2. Gives the programmer context into the color being used.
       3. If our color system changes it's much easier to change color values in one place.
 
      Add a color value to the theme below, and then use it in your CSS.
      naming convention:
      - bg: background.
      - fg: foreground.
      - color: text-color
    */
   --shades-white-100: #ffffff;
   --shades-white-90: #f5f5f5;
   --shades-white-80: #ebebeb;
   --shades-white-70: #e0e0e0;
   --shades-white-60: #cccccc;
 
   --shades-black-100: #0a0a0a;
   --shades-black-90: #1f1f1f;
   --shades-black-80: #404040;
   --shades-black-70: #666666;
   --shades-black-60: #808080;
 
   --violet-dark-100: #7e57c2;
   --violet-dark-80: #6d49ab;
   --violet-dark-60: #563894;
   --violet-dark-40: #44297a;
   --violet-dark-20: #331f5c;
 
   --violet-light-100: #ae94db;
   --violet-light-80: #b9a4df;
   --violet-light-60: #d3c6ec;
   --violet-light-40: #e8e0f5;
   --violet-light-20: #f3f0fa;
 
   --success-light-10: #d5f6e3;
   --success-light-50: #6cdf9c;
   --success-primary: #00c853;
   --success-dark-50: #029841;
   --success-dark-90: #034920;
 
   --error-light-10: #feebe6;
   --error-light-50: #f9947b;
   --error-primary: #f53100;
   --error-dark-50: #b62602;
   --error-dark-90: #4f1203;
 
   --logo-bg: #111827;
   --spoiler-color: #33332c;
   --loading-foreground: #1b0e38;
 
   --bg: var(--shades-black-100);
   --fg: var(--shades-white-100);
   --color-disabled: var(--shades-black-60);
   --text-input-bg: var(--shades-black-80);
   --text-input-color: var(--shades-white-60);
   --text-input-placeholder: var(--shades-white-60);
   --border: var(--shades-black-80);
   --error: var(--error-primary);
   --success: var(--success-dark-50);
 
   /* Color Theme */
 
   --btn-bg-filled: var(--violet-dark-100);
   --btn-bg-outline: var(--shades-black-90);
   --btn-bg-success: var(--success-dark-50);
   --btn-bg-danger: var(--error-primary);
   --btn-bg-disabled: var(--shades-black-80);
   --btn-disabled-color: var(--shades-black-60);
   --chat-bg: var(--violet-dark-80);
   --chat-confirmation-icon: var(--violet-dark-100);
   --keyserver-selection: var(--violet-dark-60);
   --thread-selection: var(--violet-light-80);
   --thread-hover-bg: var(--shades-black-80);
   --thread-active-bg: var(--shades-black-80);
   --chat-timestamp-color: var(--shades-black-60);
   --tool-tip-bg: var(--shades-black-80);
   --tool-tip-color: var(--shades-white-60);
   --border-color: var(--shades-black-80);
   --calendar-chevron: var(--shades-black-60);
   --calendar-day-bg: var(--shades-black-60);
   --calendar-day-selected-color: var(--violet-dark-80);
   --community-bg: var(--shades-black-90);
   --community-settings-selected: var(--violet-dark-60);
   --unread-bg: var(--error-primary);
   --settings-btn-bg: var(--violet-dark-100);
   --modal-bg: var(--shades-black-90);
   --modal-fg: var(--shades-white-60);
   --join-bg: var(--shades-black-90);
   --help-color: var(--shades-black-60);
   --breadcrumb-color: var(--shades-white-60);
   --breadcrumb-color-unread: var(--shades-white-60);
   --btn-outline-border: var(--shades-black-60);
   --thread-color-read: var(--shades-black-60);
   --thread-preview-secondary: var(--shades-black-70);
   --relationship-button-green: var(--success-dark-50);
   --relationship-button-red: var(--error-primary);
   --relationship-button-text: var(--fg);
   --disconnected-bar-alert-bg: var(--error-dark-50);
   --disconnected-bar-alert-color: var(--shades-white-100);
   --disconnected-bar-connecting-bg: var(--shades-white-70);
   --disconnected-bar-connecting-color: var(--shades-black-100);
   --permission-color: var(--shades-white-60);
   --thread-top-bar-color: var(--shades-white-100);
   --thread-top-bar-menu-color: var(--shades-white-70);
   --thread-ancestor-keyserver-border: var(--shades-black-70);
   --thread-ancestor-color-light: var(--shades-white-70);
   --thread-ancestor-color-dark: var(--shades-black-100);
   --thread-ancestor-separator-color: var(--shades-white-60);
   --text-message-default-background: var(--shades-black-80);
   --message-action-tooltip-bg: var(--shades-black-90);
   --message-action-tooltip-bg-light: var(--shades-black-80);
   --menu-bg: var(--shades-black-90);
   --menu-bg-light: var(--shades-black-80);
   --menu-separator-color: var(--shades-black-80);
   --menu-color: var(--shades-black-60);
   --menu-color-light: var(--shades-white-60);
   --menu-color-hover: var(--shades-white-100);
   --menu-color-dangerous: var(--error-primary);
   --menu-color-dangerous-hover: var(--error-light-50);
   --app-list-icon-read-only-color: var(--shades-black-60);
   --app-list-icon-enabled-color: var(--success-primary);
   --app-list-icon-disabled-color: var(--shades-white-80);
   --account-settings-label: var(--shades-black-60);
   --account-button-color: var(--violet-dark-100);
   --chat-thread-list-color-active: var(--shades-white-60);
   --chat-thread-list-menu-color: var(--shades-white-60);
   --chat-thread-list-menu-bg: var(--shades-black-80);
   --chat-thread-list-menu-active-color: var(--shades-white-60);
   --chat-thread-list-menu-active-bg: var(--shades-black-90);
   --search-clear-color: var(--shades-white-100);
   --search-clear-bg: var(--shades-black-70);
   --search-input-color: var(--shades-white-100);
   --search-input-placeholder: var(--shades-black-60);
   --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-active-background: var(--violet-dark-100);
   --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);
   --members-modal-member-text: var(--shades-black-60);
   --members-modal-member-text-hover: var(--shades-white-100);
   --label-default-bg: var(--violet-dark-80);
   --label-default-color: var(--shades-white-80);
   --subchannels-modal-color: var(--shades-black-60);
   --subchannels-modal-color-hover: var(--shades-white-100);
   --color-selector-active-bg: var(--shades-black-80);
   --relationship-modal-color: var(--shades-black-60);
   --arrow-extension-color: var(--shades-black-60);
   --modal-close-color: var(--shades-black-60);
   --modal-close-color-hover: var(--shades-white-100);
   --add-members-group-header-color: var(--shades-black-60);
   --add-members-item-color: var(--shades-black-60);
   --add-members-item-color-hover: var(--shades-white-100);
   --add-members-item-disabled-color: var(--shades-black-80);
   --add-members-item-disabled-color-hover: var(--shades-black-60);
   --add-members-remove-pending-color: var(--error-primary);
   --add-members-remove-pending-color-hover: var(--error-light-50);
   --radio-border: var(--shades-black-70);
   --radio-color: var(--shades-white-60);
   --notification-settings-option-selected-bg: var(--shades-black-80);
   --notification-settings-option-title-color: var(--shades-white-90);
   --notification-settings-option-color: var(--shades-white-60);
   --notification-settings-option-invalid-color: var(--shades-black-80);
   --notification-settings-option-invalid-selected-color: var(--shades-black-60);
   --danger-zone-subheading-color: var(--shades-white-60);
   --danger-zone-explanation-color: var(--shades-black-60);
   --thread-creation-search-container-bg: var(--shades-black-90);
   --thread-creation-close-search-color: var(--shades-black-60);
   --thread-creation-search-item-bg-hover: var(--shades-black-80);
   --thread-creation-search-item-info-color: var(--shades-black-60);
   --chat-message-list-active-border: #5989d6;
   --sidebars-modal-color: var(--shades-black-60);
   --sidebars-modal-color-hover: var(--shades-white-100);
   --inline-engagement-bg: var(--shades-black-70);
   --inline-engagement-bg-hover: var(--shades-black-80);
   --inline-engagement-color: var(--fg);
   --compose-subchannel-header-fg: var(--shades-black-60);
   --compose-subchannel-header-bg: var(--shades-black-80);
   --compose-subchannel-label-color: var(--shades-black-60);
   --compose-subchannel-mark-color: var(--violet-light-100);
   --enum-option-icon-color: var(--violet-dark-100);
   --show-password-bg-hover: var(--shades-black-70);
   --typeahead-overlay-light: var(--shades-black-80);
   --typeahead-overlay-dark: var(--shades-black-90);
   --typeahead-overlay-text: var(--shades-white-100);
   --typeahead-overlay-shadow-primary: rgba(0, 0, 0, 0.25);
   --typeahead-overlay-shadow-secondary: rgba(0, 0, 0, 0.4);
   --spoiler-text-color: var(--spoiler-color);
   --spoiler-background-color: var(--spoiler-color);
   --purple-link: var(--violet-light-100);
   --drawer-expand-button: var(--shades-black-60);
   --drawer-expand-button-disabled: var(--shades-black-80);
   --drawer-item-color: var(--shades-white-60);
   --drawer-active-item-color: var(--shades-white-100);
   --drawer-open-community-bg: #191919;
   --active-drawer-item-bg: rgba(0, 0, 0, 0.5);
   --community-drawer-lines: rgba(255, 255, 255, 0.08);
+  --topbar-button-bg: var(--shades-black-90);
+  --topbar-button-bg-hover: var(--shades-black-80);
+  --topbar-button-fg: var(--shades-white-60);
 }