diff --git a/web/navigation-sidebar/community-list-item.css b/web/navigation-sidebar/community-list-item.css
--- a/web/navigation-sidebar/community-list-item.css
+++ b/web/navigation-sidebar/community-list-item.css
@@ -1,3 +1,13 @@
+.container {
+  position: relative;
+}
+
 .container:hover {
   cursor: pointer;
 }
+
+.unreadBadgeContainer {
+  position: absolute;
+  right: -8px;
+  bottom: 14px;
+}
diff --git a/web/navigation-sidebar/community-list-item.react.js b/web/navigation-sidebar/community-list-item.react.js
--- a/web/navigation-sidebar/community-list-item.react.js
+++ b/web/navigation-sidebar/community-list-item.react.js
@@ -2,10 +2,13 @@
 
 import * as React from 'react';
 
+import { unreadCountSelectorForCommunity } from 'lib/selectors/thread-selectors.js';
 import type { ResolvedThreadInfo } from 'lib/types/thread-types.js';
 
 import css from './community-list-item.css';
 import ThreadAvatar from '../avatars/thread-avatar.react.js';
+import UnreadBadge from '../components/unread-badge.react.js';
+import { useSelector } from '../redux/redux-utils.js';
 import { useNavigationSidebarTooltip } from '../utils/tooltip-action-utils.js';
 
 type Props = {
@@ -14,6 +17,22 @@
 
 function CommunityListItem(props: Props): React.Node {
   const { threadInfo } = props;
+  const { id: threadID } = threadInfo;
+
+  const communityUnreadCountSelector =
+    unreadCountSelectorForCommunity(threadID);
+  const unreadCountValue = useSelector(communityUnreadCountSelector);
+
+  const unreadBadge = React.useMemo(() => {
+    if (unreadCountValue === 0) {
+      return null;
+    }
+    return (
+      <div className={css.unreadBadgeContainer}>
+        <UnreadBadge unreadCount={unreadCountValue} />
+      </div>
+    );
+  }, [unreadCountValue]);
 
   const { onMouseEnter, onMouseLeave } = useNavigationSidebarTooltip({
     tooltipLabel: threadInfo.uiName,
@@ -26,6 +45,7 @@
       onMouseLeave={onMouseLeave}
     >
       <ThreadAvatar size="S" threadInfo={threadInfo} />
+      {unreadBadge}
     </div>
   );
 }