diff --git a/web/app.react.js b/web/app.react.js
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -48,7 +48,9 @@
 import history from './router-history';
 import AccountSettings from './settings/account-settings.react';
 import DangerZone from './settings/danger-zone.react';
+import AppSwitcher from './sidebar/app-switcher.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';
@@ -200,6 +202,13 @@
       [css['electron-non-draggable']]: electron,
     });
 
+    let navigationPanel;
+    if (tab === 'settings') {
+      navigationPanel = <SettingsSwitcher />;
+    } else {
+      navigationPanel = <AppSwitcher />;
+    }
+
     return (
       <div className={css.layout}>
         <DisconnectedBarVisibilityHandler />
@@ -232,6 +241,7 @@
         </header>
         <InputStateContainer>
           <div className={css['main-content-container']}>
+            <div className={css['topBar']}>{navigationPanel}</div>
             <div className={css['main-content']}>{mainContent}</div>
           </div>
         </InputStateContainer>
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/sidebar/left-layout-aside.css b/web/sidebar/left-layout-aside.css
--- a/web/sidebar/left-layout-aside.css
+++ b/web/sidebar/left-layout-aside.css
@@ -3,23 +3,21 @@
   background: var(--bg);
   border-right: 1px solid var(--border-color);
   display: flex;
-  width: 560px;
 }
 
 .navigationPanelContainer {
-  width: 160px;
-  margin-top: 12px;
+  flex-direction: row;
+  display: flex;
 }
 
 .navigationPanelTab {
   display: flex;
   flex-direction: row;
-  padding: 12px 0 12px 28px;
+  padding: 16px;
   cursor: pointer;
 }
 
 .navigationPanelTab svg {
-  padding-right: 12px;
   color: var(--color-disabled);
   stroke: var(--color-disabled);
   fill: var(--color-disabled);
@@ -27,6 +25,8 @@
 
 .navigationPanelTab p {
   color: var(--color-disabled);
+  margin-right: 8px;
+  margin-left: 8px;
 }
 
 .navigationPanelTab:hover p,
@@ -38,6 +38,11 @@
   fill: var(--fg);
 }
 
+div.current_tab {
+  border-bottom: 2px solid var(--tabs-header-active-border);
+  height: 58px;
+}
+
 .container p {
   display: flex;
   align-content: center;
diff --git a/web/sidebar/left-layout-aside.react.js b/web/sidebar/left-layout-aside.react.js
--- a/web/sidebar/left-layout-aside.react.js
+++ b/web/sidebar/left-layout-aside.react.js
@@ -2,24 +2,13 @@
 
 import * as React from 'react';
 
-import { useSelector } from '../redux/redux-utils';
-import AppSwitcher from './app-switcher.react';
 import CommunityPicker from './community-picker.react';
 import css from './left-layout-aside.css';
-import SettingsSwitcher from './settings-switcher.react';
 
 function LeftLayoutAside(): React.Node {
-  const navInfo = useSelector(state => state.navInfo);
-  const navigationPanel = React.useMemo(() => {
-    if (navInfo.tab === 'settings') {
-      return <SettingsSwitcher />;
-    }
-    return <AppSwitcher />;
-  }, [navInfo.tab]);
   return (
     <aside className={css.container}>
       <CommunityPicker />
-      {navigationPanel}
     </aside>
   );
 }
diff --git a/web/style.css b/web/style.css
--- a/web/style.css
+++ b/web/style.css
@@ -54,7 +54,7 @@
 div.layout {
   height: 100vh;
   display: grid;
-  grid-template-columns: 560px repeat(12, 1fr);
+  grid-template-columns: 400px repeat(12, 1fr);
   grid-template-rows: 65px calc(100vh - 65px);
   grid-template-areas:
     'nav nav nav nav nav nav nav nav nav nav nav nav nav'
@@ -97,6 +97,7 @@
   grid-area: app;
   display: flex;
   overflow: hidden;
+  flex-direction: column;
 }
 div.main-content {
   display: flex;
@@ -110,6 +111,10 @@
   right: 0;
   padding: 15px 16px;
 }
+.topBar {
+  border-bottom: 1px solid var(--border);
+  height: 60px;
+}
 span.loading-indicator-loading {
   display: inline-block;
 }