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
@@ -83,3 +83,22 @@
   padding-left: 12px;
   color: var(--fg);
 }
+
+span.chatBadge {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: var(--fg);
+  background: var(--unread-bg);
+  border-radius: 13px;
+  font-size: var(--xs-font-12);
+  line-height: 1.25;
+  margin-right: 4px;
+}
+
+span.chatBadgePlus {
+  width: 32px;
+}
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
@@ -10,6 +10,7 @@
 } from 'lib/actions/community-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
+import { unreadCount } from 'lib/selectors/thread-selectors.js';
 
 import CommunityCreationModal from './community-creation/community-creation-modal.react.js';
 import CommunityDrawer from './community-drawer.react.js';
@@ -87,6 +88,17 @@
     );
   }
 
+  const boundUnreadCount = useSelector(unreadCount);
+  let chatBadge = null;
+  if (boundUnreadCount > 0 && !isCalendarOpen) {
+    if (boundUnreadCount < 100) {
+      chatBadge = <span className={css.chatBadge}>{boundUnreadCount}</span>;
+    } else {
+      const classes = classNames(css.chatBadge, css.chatBadgePlus);
+      chatBadge = <span className={classes}>99+</span>;
+    }
+  }
+
   return (
     <div className={css.container}>
       <div className={css.header}>
@@ -94,6 +106,8 @@
           <div className={sideLineInbox} />
           <SWMansionIcon icon="inbox" size={24} />
           <div className={css.buttonTitle}> {inboxButtonTitle} </div>
+          <div className={css.spacer} />
+          {chatBadge}
         </a>
       </div>
       <div className={css.drawerWrapper}>