diff --git a/web/app.react.js b/web/app.react.js
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -38,7 +38,7 @@
 import InputStateContainer from './input/input-state-container.react.js';
 import LoadingIndicator from './loading-indicator.react.js';
 import { MenuProvider } from './menu-provider.react.js';
-import AppsDirectory from './modals/apps/apps-directory.react.js';
+import AppsDirectory from './modals/apps/apps-directory-modal.react.js';
 import UpdateModalHandler from './modals/update-modal.react.js';
 import SettingsSwitcher from './navigation-panels/settings-switcher.react.js';
 import Topbar from './navigation-panels/topbar.react.js';
diff --git a/web/modals/apps/apps-directory.react.js b/web/modals/apps/apps-directory-modal.react.js
rename from web/modals/apps/apps-directory.react.js
rename to web/modals/apps/apps-directory-modal.react.js
--- a/web/modals/apps/apps-directory.react.js
+++ b/web/modals/apps/apps-directory-modal.react.js
@@ -3,8 +3,11 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
 
-import AppListing from './app-listing.react.js';
-import css from './apps.css';
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+
+import AppListing from '../apps/app-listing.react.js';
+import css from '../apps/apps.css';
+import Modal from '../modal.react.js';
 
 const APP_DIRECTORY_DATA = [
   {
@@ -25,7 +28,9 @@
   },
 ];
 
-function AppsDirectory(): React.Node {
+function AppsModal(): React.Node {
+  const { popModal } = useModalContext();
+
   const enabledApps = useSelector(state => state.enabledApps);
 
   const appData = React.useMemo(
@@ -46,11 +51,12 @@
   );
 
   return (
-    <div className={css.appsDirectoryContainer}>
-      <h4 className={css.appsHeader}>Choose Apps</h4>
-      <div className={css.appsDirectoryList}>{appItems}</div>
-    </div>
+    <Modal name="Choose apps" onClose={popModal} size="large">
+      <div className={css.appsDirectoryContainer}>
+        <div className={css.appsDirectoryList}>{appItems}</div>
+      </div>
+    </Modal>
   );
 }
 
-export default AppsDirectory;
+export default AppsModal;
diff --git a/web/modals/apps/apps.css b/web/modals/apps/apps.css
--- a/web/modals/apps/apps.css
+++ b/web/modals/apps/apps.css
@@ -1,7 +1,8 @@
 div.appsDirectoryContainer {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  padding-top: 34px;
+  padding-bottom: 16px;
 }
 
 h4.appsHeader {
@@ -11,17 +12,19 @@
 }
 
 div.appsDirectoryList {
-  margin-left: 20px;
   display: flex;
   flex-direction: column;
-  row-gap: 10px;
+  row-gap: 16px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 12px 32px;
 }
 
 div.appListingContainer {
   color: var(--fg);
   display: flex;
   flex-direction: row;
-  align-items: center;
+  align-items: space-between;
 }
 
 div.appListingTextContainer {
@@ -39,15 +42,15 @@
   font-size: var(--xs-font-12);
 }
 
-div.appListingIcon {
-  padding: 0 20px;
+.appListingIcon {
+  padding: 0 20px 0 0;
   align-self: stretch;
   display: flex;
   align-items: center;
 }
 
 .appListingIconState {
-  padding: 0 20px;
+  padding: 0 0 0 20px;
   font-size: var(--xl-font-20);
 }
 
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,29 +1,24 @@
 // @flow
 
 import * as React from 'react';
-import { useDispatch } from 'react-redux';
 
+import { useModalContext } from 'lib/components/modal-provider.react.js';
 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';
+import AppsDirectory from '../modals/apps/apps-directory-modal.react.js';
 
 function Topbar(): React.Node {
-  const dispatch = useDispatch();
+  const { pushModal } = useModalContext();
 
   const onClickApps = React.useCallback(
     (event: SyntheticEvent<HTMLAnchorElement>) => {
       event.preventDefault();
-      dispatch({
-        type: updateNavInfoActionType,
-        payload: {
-          tab: 'apps',
-        },
-      });
+      pushModal(<AppsDirectory />);
     },
-    [dispatch],
+    [pushModal],
   );
 
   const appNavigationItem = React.useMemo(