diff --git a/web/selectors/nav-selectors.js b/web/selectors/nav-selectors.js
--- a/web/selectors/nav-selectors.js
+++ b/web/selectors/nav-selectors.js
@@ -19,7 +19,11 @@
 import { getDefaultTextMessageRules } from '../markdown/rules.react';
 import type { AppState } from '../redux/redux-setup';
 import { useSelector } from '../redux/redux-utils';
-import { updateNavInfoActionType } from '../types/nav-types';
+import {
+  type NavigationTab,
+  type NavigationSettingsSection,
+  updateNavInfoActionType,
+} from '../types/nav-types';
 
 const dateExtractionRegex = /^([0-9]{4})-([0-9]{2})-[0-9]{2}$/;
 
@@ -191,6 +195,16 @@
   );
 }
 
+function navTabSelector(state: AppState): NavigationTab {
+  return state.navInfo.tab;
+}
+
+function navSettingsSectionSelector(
+  state: AppState,
+): ?NavigationSettingsSection {
+  return state.navInfo.settingsSection;
+}
+
 export {
   yearExtractor,
   yearAssertingSelector,
@@ -202,4 +216,6 @@
   useOnClickThread,
   useThreadIsActive,
   useOnClickPendingSidebar,
+  navTabSelector,
+  navSettingsSectionSelector,
 };
diff --git a/web/sidebar/app-switcher.react.js b/web/sidebar/app-switcher.react.js
--- a/web/sidebar/app-switcher.react.js
+++ b/web/sidebar/app-switcher.react.js
@@ -9,6 +9,7 @@
 } from 'lib/selectors/thread-selectors';
 
 import { useSelector } from '../redux/redux-utils';
+import { navTabSelector } from '../selectors/nav-selectors.js';
 import SWMansionIcon from '../SWMansionIcon.react';
 import { updateNavInfoActionType } from '../types/nav-types';
 import css from './left-layout-aside.css';
@@ -122,7 +123,7 @@
   );
 
   return (
-    <NavigationPanel.Container>
+    <NavigationPanel.Container tabSelector={navTabSelector}>
       {chatNavigationItem}
       {calendarNavigationItem}
       {appNavigationItem}
diff --git a/web/sidebar/navigation-panel.react.js b/web/sidebar/navigation-panel.react.js
--- a/web/sidebar/navigation-panel.react.js
+++ b/web/sidebar/navigation-panel.react.js
@@ -3,12 +3,12 @@
 import classNames from 'classnames';
 import * as React from 'react';
 
+import type { AppState } from '../redux/redux-setup.js';
 import { useSelector } from '../redux/redux-utils';
-import type { NavigationTab } from '../types/nav-types';
 import css from './left-layout-aside.css';
 
 type NavigationPanelItemProps = {
-  +tab: NavigationTab,
+  +tab: string,
   +children: React.Node,
 };
 
@@ -17,15 +17,16 @@
   return children;
 }
 
-type NavigationPanelContainerProps = {
+type NavigationPanelContainerProps<T> = {
+  +tabSelector: AppState => T,
   +children: React.ChildrenArray<?React.Element<typeof NavigationPanelItem>>,
 };
 
-function NavigationPanelContainer(
-  props: NavigationPanelContainerProps,
+function NavigationPanelContainer<T>(
+  props: NavigationPanelContainerProps<T>,
 ): React.Node {
-  const { children } = props;
-  const navInfo = useSelector(state => state.navInfo);
+  const { children, tabSelector } = props;
+  const currentTab = useSelector(tabSelector);
 
   const items = React.useMemo(
     () =>
@@ -37,14 +38,14 @@
           <div
             key={child.props.tab}
             className={classNames({
-              [css.current_tab]: navInfo.tab === child.props.tab,
+              [css.current_tab]: currentTab === child.props.tab,
             })}
           >
             {child}
           </div>
         );
       }),
-    [children, navInfo.tab],
+    [children, currentTab],
   );
 
   return <div className={css.navigationPanelContainer}>{items}</div>;
diff --git a/web/sidebar/settings-switcher.react.js b/web/sidebar/settings-switcher.react.js
--- a/web/sidebar/settings-switcher.react.js
+++ b/web/sidebar/settings-switcher.react.js
@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 
+import { navSettingsSectionSelector } from '../selectors/nav-selectors.js';
 import { updateNavInfoActionType } from '../types/nav-types';
 import css from './left-layout-aside.css';
 import NavigationPanel from './navigation-panel.react';
@@ -30,8 +31,8 @@
   );
 
   return (
-    <NavigationPanel.Container>
-      <NavigationPanel.Item tab="settings">
+    <NavigationPanel.Container tabSelector={navSettingsSectionSelector}>
+      <NavigationPanel.Item tab="account">
         {accountSettingsNavigationItem}
       </NavigationPanel.Item>
     </NavigationPanel.Container>
diff --git a/web/types/nav-types.js b/web/types/nav-types.js
--- a/web/types/nav-types.js
+++ b/web/types/nav-types.js
@@ -5,12 +5,14 @@
 
 export type NavigationTab = 'calendar' | 'chat' | 'apps' | 'settings';
 
+export type NavigationSettingsSection = 'account';
+
 export type NavInfo = {
   ...$Exact<BaseNavInfo>,
   +tab: NavigationTab,
   +activeChatThreadID: ?string,
   +pendingThread?: ThreadInfo,
-  +settingsSection?: 'account',
+  +settingsSection?: NavigationSettingsSection,
 };
 
 export const updateNavInfoActionType = 'UPDATE_NAV_INFO';