diff --git a/web/navigation-sidebar/navigation-sidebar-home-button.css b/web/navigation-sidebar/navigation-sidebar-home-button.css
--- a/web/navigation-sidebar/navigation-sidebar-home-button.css
+++ b/web/navigation-sidebar/navigation-sidebar-home-button.css
@@ -1,6 +1,7 @@
 .container {
   padding-top: 24px;
   border-bottom: 1px solid var(--separator-background-primary-default);
+  position: relative;
 }
 
 .buttonContainer {
@@ -11,3 +12,13 @@
 .buttonContainer:hover {
   cursor: pointer;
 }
+
+.unreadBadgeContainer {
+  position: absolute;
+  right: -10px;
+  top: 16px;
+  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/navigation-sidebar-home-button.react.js b/web/navigation-sidebar/navigation-sidebar-home-button.react.js
--- a/web/navigation-sidebar/navigation-sidebar-home-button.react.js
+++ b/web/navigation-sidebar/navigation-sidebar-home-button.react.js
@@ -3,11 +3,16 @@
 import * as React from 'react';
 
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
+import { unreadCount } from 'lib/selectors/thread-selectors.js';
 
 import css from './navigation-sidebar-home-button.css';
+import UnreadBadge from '../components/unread-badge.react.js';
+import { useSelector } from '../redux/redux-utils.js';
 import { useNavigationSidebarTooltip } from '../utils/tooltip-action-utils.js';
 
 function NavigationSidebarHomeButton(): React.Node {
+  const unreadCountValue = useSelector(unreadCount);
+
   const { onMouseEnter, onMouseLeave } = useNavigationSidebarTooltip({
     tooltipLabel: 'Home',
   });
@@ -19,6 +24,9 @@
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
       >
+        <div className={css.unreadBadgeContainer}>
+          <UnreadBadge unreadCount={unreadCountValue} />
+        </div>
         <SWMansionIcon icon="home-1" size={24} />
       </div>
     </div>