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,17 @@
+.container {
+  position: relative;
+}
+
 .container:hover {
   cursor: pointer;
 }
+
+.unreadBadgeContainer {
+  position: absolute;
+  right: -10px;
+  bottom: 14px;
+  border-radius: 50%;
+  /* We want the border color of the unread badge to always 
+  match the panel background color */
+  border: 1px solid var(--panel-background-secondary-default);
+}
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,14 @@
 
 import * as React from 'react';
 
+import { threadInHomeChatList } from 'lib/shared/thread-utils.js';
 import type { ResolvedThreadInfo } from 'lib/types/thread-types.js';
+import { values } from 'lib/utils/objects.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 +18,20 @@
 
 function CommunityListItem(props: Props): React.Node {
   const { threadInfo } = props;
+  const { id: threadID } = threadInfo;
+
+  const threadInfos = useSelector(state => state.threadStore.threadInfos);
+
+  const unreadCountValue = React.useMemo(
+    () =>
+      values(threadInfos).filter(
+        communityInfo =>
+          threadInHomeChatList(communityInfo) &&
+          communityInfo.currentUser.unread &&
+          threadID === communityInfo.community,
+      ).length,
+    [threadID, threadInfos],
+  );
 
   const { onMouseEnter, onMouseLeave } = useNavigationSidebarTooltip({
     tooltipLabel: threadInfo.uiName,
@@ -26,6 +44,9 @@
       onMouseLeave={onMouseLeave}
     >
       <ThreadAvatar size="S" threadInfo={threadInfo} />
+      <div className={css.unreadBadgeContainer}>
+        <UnreadBadge unreadCount={unreadCountValue} />
+      </div>
     </div>
   );
 }