diff --git a/web/sidebar/community-picker.css b/web/sidebar/community-picker.css
--- a/web/sidebar/community-picker.css
+++ b/web/sidebar/community-picker.css
@@ -22,7 +22,7 @@
   padding: 0;
 }
 
-.settingsSelectedContainer {
+.activeContainer {
   display: flex;
   justify-content: center;
   width: 100%;
diff --git a/web/sidebar/community-picker.react.js b/web/sidebar/community-picker.react.js
--- a/web/sidebar/community-picker.react.js
+++ b/web/sidebar/community-picker.react.js
@@ -25,7 +25,7 @@
   );
   const isSettingsOpen = useSelector(state => state.navInfo.tab === 'settings');
   const settingsButtonContainerClass = classNames({
-    [css.settingsSelectedContainer]: isSettingsOpen,
+    [css.activeContainer]: isSettingsOpen,
   });
 
   const openChat = React.useCallback(
@@ -38,10 +38,19 @@
     },
     [dispatch],
   );
+  const isInboxOpen = useSelector(
+    state =>
+      state.navInfo.tab === 'chat' ||
+      state.navInfo.tab === 'apps' ||
+      state.navInfo.tab === 'calendar',
+  );
+  const inboxButtonContainerClass = classNames({
+    [css.activeContainer]: isInboxOpen,
+  });
 
   return (
     <div className={css.container}>
-      <a onClick={openChat}>
+      <a className={inboxButtonContainerClass} onClick={openChat}>
         <SWMansionIcon icon="inbox" size={36} />
       </a>
       <div className={css.spacer} />