diff --git a/web/navigation-panels/app-switcher.react.js b/web/navigation-panels/app-switcher.react.js
--- a/web/navigation-panels/app-switcher.react.js
+++ b/web/navigation-panels/app-switcher.react.js
@@ -97,36 +97,10 @@
     );
   }, [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>
   );
 }
diff --git a/web/navigation-panels/topbar.css b/web/navigation-panels/topbar.css
--- a/web/navigation-panels/topbar.css
+++ b/web/navigation-panels/topbar.css
@@ -1,6 +1,9 @@
 .container {
   border-bottom: 1px solid var(--border);
   height: 60px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .navigationPanelContainer {
@@ -9,6 +12,23 @@
   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;
@@ -62,3 +82,9 @@
   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
--- a/web/navigation-panels/topbar.react.js
+++ b/web/navigation-panels/topbar.react.js
@@ -1,14 +1,45 @@
 // @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 { updateNavInfoActionType } from '../redux/action-types.js';
 
 function Topbar(): React.Node {
+  const dispatch = useDispatch();
+
+  const onClickApps = React.useCallback(
+    (event: SyntheticEvent<HTMLAnchorElement>) => {
+      event.preventDefault();
+      dispatch({
+        type: updateNavInfoActionType,
+        payload: {
+          tab: 'apps',
+        },
+      });
+    },
+    [dispatch],
+  );
+
+  const appNavigationItem = React.useMemo(
+    () => (
+      <a className={css.plusButton} onClick={onClickApps}>
+        <SWMansionIcon icon="plus-small" size={24} />
+      </a>
+    ),
+    [onClickApps],
+  );
+
   return (
     <div className={css.container}>
-      <AppSwitcher />
+      <div className={css.tabs}>
+        <AppSwitcher />
+      </div>
+      {appNavigationItem}
     </div>
   );
 }
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -202,4 +202,7 @@
   --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);
 }