diff --git a/web/app.react.js b/web/app.react.js
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -49,10 +49,12 @@
 import AccountSettings from './settings/account-settings.react';
 import DangerZone from './settings/danger-zone.react';
 import LeftLayoutAside from './sidebar/left-layout-aside.react';
+import SettingsSwitcher from './sidebar/settings-switcher.react';
 import Splash from './splash/splash.react';
 import './typography.css';
 import css from './style.css';
 import getTitle from './title/getTitle';
+import Topbar from './topbar/topbar.react';
 import { type NavInfo } from './types/nav-types';
 import { canonicalURLFromReduxState, navInfoFromURL } from './url-utils';
 
@@ -169,21 +171,7 @@
   stopDoubleClickPropagation = electron ? e => e.stopPropagation() : null;
 
   renderMainContent() {
-    let mainContent;
-    const { tab, settingsSection } = this.props.navInfo;
-    if (tab === 'calendar') {
-      mainContent = <Calendar url={this.props.location.pathname} />;
-    } else if (tab === 'chat') {
-      mainContent = <Chat />;
-    } else if (tab === 'apps') {
-      mainContent = <AppsDirectory />;
-    } else if (tab === 'settings') {
-      if (settingsSection === 'account') {
-        mainContent = <AccountSettings />;
-      } else if (settingsSection === 'danger-zone') {
-        mainContent = <DangerZone />;
-      }
-    }
+    const mainContent = this.getMainContentWithSwitcher();
 
     let navigationArrows = null;
     if (electron) {
@@ -230,15 +218,48 @@
             </div>
           </div>
         </header>
-        <InputStateContainer>
-          <div className={css['main-content-container']}>
-            <div className={css['main-content']}>{mainContent}</div>
-          </div>
-        </InputStateContainer>
+        <InputStateContainer>{mainContent}</InputStateContainer>
         <LeftLayoutAside />
       </div>
     );
   }
+
+  getMainContentWithSwitcher() {
+    let mainContent;
+    const { tab, settingsSection } = this.props.navInfo;
+    if (tab === 'calendar') {
+      mainContent = <Calendar url={this.props.location.pathname} />;
+    } else if (tab === 'chat') {
+      mainContent = <Chat />;
+    } else if (tab === 'apps') {
+      mainContent = <AppsDirectory />;
+    } else if (tab === 'settings') {
+      if (settingsSection === 'account') {
+        mainContent = <AccountSettings />;
+      } else if (settingsSection === 'danger-zone') {
+        mainContent = <DangerZone />;
+      }
+      return (
+        <div className={css['main-content-container']}>
+          <div className={css.switcher}>
+            <SettingsSwitcher />
+          </div>
+          <div className={css['main-content']}>{mainContent}</div>
+        </div>
+      );
+    }
+
+    const mainContentClass = classnames(
+      [css['main-content-container']],
+      [css['main-content-container-column']],
+    );
+    return (
+      <div className={mainContentClass}>
+        <Topbar navInfo={this.props.navInfo} />
+        <div className={css['main-content']}>{mainContent}</div>
+      </div>
+    );
+  }
 }
 
 const fetchEntriesLoadingStatusSelector = createLoadingStatusSelector(
diff --git a/web/calendar/filter-panel.css b/web/calendar/filter-panel.css
--- a/web/calendar/filter-panel.css
+++ b/web/calendar/filter-panel.css
@@ -1,7 +1,7 @@
 div.container {
   position: fixed;
   width: 300px;
-  top: 62px;
+  top: 126px;
   bottom: 0;
   background-attachment: fixed;
   display: flex;
diff --git a/web/style.css b/web/style.css
--- a/web/style.css
+++ b/web/style.css
@@ -98,12 +98,19 @@
   display: flex;
   overflow: hidden;
 }
+div.main-content-container-column {
+  flex-direction: column;
+}
 div.main-content {
   display: flex;
   flex: 1;
   overflow: hidden;
 }
 
+.switcher {
+  border-right: 1px solid var(--border-color);
+}
+
 div.upper-right {
   position: absolute;
   top: 0;