diff --git a/web/sidebar/community-picker.css b/web/sidebar/community-picker.css
index 244b170c7..e8aef55bc 100644
--- a/web/sidebar/community-picker.css
+++ b/web/sidebar/community-picker.css
@@ -1,85 +1,104 @@
 .container {
   display: flex;
   flex-direction: column;
   background: var(--community-bg);
   border-right: 1px solid var(--border-color);
   flex-grow: 1;
   overflow: auto;
 }
 
 .spacer {
   flex-grow: 1;
 }
 
 .header {
   border-bottom: 1px solid var(--community-drawer-lines);
   padding: 8px 0 8px 0;
   align-items: center;
   display: flex;
   margin-right: 16px;
 }
 
 .footer {
   display: flex;
   flex-direction: column;
   border-top: 1px solid var(--community-drawer-lines);
   padding: 12px 0 12px 0;
   align-items: center;
   margin-right: 16px;
 }
 
 .sideLine {
   width: 3px;
   height: 24px;
   border-radius: 0 4px 4px 0;
   margin-right: 14px;
 }
 
 .sideLineActive {
   background-color: var(--community-settings-selected);
 }
 
 .itemContainer {
   display: flex;
   height: 40px;
   align-items: center;
   width: 100%;
 }
 
 .itemContainer svg {
   color: var(--fg);
   padding: 0;
 }
 
 .plusIcon {
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--community-creation-btn-bg);
   width: 30px;
   height: 30px;
   border-radius: 50%;
 }
 
 .settingsIcon {
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--settings-btn-bg);
   width: 30px;
   height: 30px;
   border-radius: 50%;
 }
 
 .drawerWrapper {
   width: 100%;
   overflow: auto;
 }
 
 .buttonTitle {
   font-weight: 500;
   font-size: var(--s-font-14);
   line-height: 22px;
   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
index 6ac921e31..fe0b886dc 100644
--- a/web/sidebar/community-picker.react.js
+++ b/web/sidebar/community-picker.react.js
@@ -1,117 +1,131 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 
 import {
   clearCalendarCommunityFilter,
   clearChatCommunityFilter,
 } 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';
 import css from './community-picker.css';
 import { updateNavInfoActionType } from '../redux/action-types.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 function CommunityPicker(): React.Node {
   const dispatch = useDispatch();
   const modalContext = useModalContext();
 
   const openAccountSettings = React.useCallback(
     (event: SyntheticEvent<HTMLButtonElement>) => {
       event.preventDefault();
       dispatch({
         type: updateNavInfoActionType,
         payload: { tab: 'settings', settingsSection: 'account' },
       });
     },
     [dispatch],
   );
 
   const isCalendarOpen = useSelector(state => state.navInfo.tab === 'calendar');
   const onPressInbox = React.useCallback(
     (event: SyntheticEvent<HTMLAnchorElement>) => {
       event.preventDefault();
       if (isCalendarOpen) {
         dispatch({
           type: clearCalendarCommunityFilter,
         });
       } else {
         dispatch({
           type: updateNavInfoActionType,
           payload: { tab: 'chat' },
         });
         dispatch({
           type: clearChatCommunityFilter,
         });
       }
     },
     [dispatch, isCalendarOpen],
   );
 
   const inboxButtonTitle = isCalendarOpen ? 'All communities' : 'Inbox';
 
   const isInboxOpen = useSelector(
     state => state.navInfo.tab === 'chat' || state.navInfo.tab === 'calendar',
   );
   const isSettingsOpen = useSelector(state => state.navInfo.tab === 'settings');
 
   const sideLineInbox = classNames({
     [css.sideLine]: true,
     [css.sideLineActive]: isInboxOpen,
   });
   const sideLineSettings = classNames({
     [css.sideLine]: true,
     [css.sideLineActive]: isSettingsOpen,
   });
 
   const onPressCommunityCreationButton = React.useCallback(() => {
     modalContext.pushModal(<CommunityCreationModal />);
   }, [modalContext]);
 
   const isCommunityCreationButtonEnabled = false;
   let communityCreationButton;
   if (isCommunityCreationButtonEnabled) {
     communityCreationButton = (
       <a className={css.itemContainer} onClick={onPressCommunityCreationButton}>
         <div className={css.sideLine} />
         <div className={css.plusIcon}>
           <SWMansionIcon icon="plus-small" size={26} />
         </div>
         <div className={css.buttonTitle}>Create community</div>
       </a>
     );
   }
 
+  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}>
         <a className={css.itemContainer} onClick={onPressInbox}>
           <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}>
         <CommunityDrawer />
       </div>
       <div className={css.spacer} />
       <div className={css.footer}>
         {communityCreationButton}
         <a className={css.itemContainer} onClick={openAccountSettings}>
           <div className={sideLineSettings} />
           <div className={css.settingsIcon} onClick={openAccountSettings}>
             <SWMansionIcon icon="settings" size={22} />
           </div>
           <div className={css.buttonTitle}>Settings</div>
         </a>
       </div>
     </div>
   );
 }
 
 export default CommunityPicker;