diff --git a/web/src/routes/Main/Navbar/GroupNav.tsx b/web/src/routes/Main/Navbar/GroupNav.tsx
index c0e50b4d..71ece9fa 100644
--- a/web/src/routes/Main/Navbar/GroupNav.tsx
+++ b/web/src/routes/Main/Navbar/GroupNav.tsx
@@ -3,9 +3,25 @@ import { openModal } from '@/components/Modal';
 import { ModalCreateGroup } from '@/components/modals/CreateGroup';
 import { Icon } from '@iconify/react';
 import React, { useCallback, useMemo } from 'react';
-import { GroupInfo, t, useAppSelector } from 'tailchat-shared';
+import { GroupInfo, t, useAppSelector, useGroupUnread } from 'tailchat-shared';
 import { NavbarNavItem } from './NavItem';
 
+const GroupNavItem: React.FC<{ group: GroupInfo }> = React.memo(({ group }) => {
+  const hasUnread = useGroupUnread(group._id);
+
+  return (
+    <NavbarNavItem
+      name={group.name}
+      to={`/main/group/${group._id}`}
+      showPill={true}
+      badge={hasUnread}
+    >
+      <Avatar shape="square" size={48} name={group.name} src={group.avatar} />
+    </NavbarNavItem>
+  );
+});
+GroupNavItem.displayName = 'GroupNavItem';
+
 function useGroups(): GroupInfo[] {
   const groups = useAppSelector((state) => state.group.groups);
   return useMemo(
@@ -26,18 +42,7 @@ export const GroupNav: React.FC = React.memo(() => {
       {Array.isArray(groups) &&
         groups.map((group) => (
           <div key={group._id}>
-            <NavbarNavItem
-              name={group.name}
-              to={`/main/group/${group._id}`}
-              showPill={true}
-            >
-              <Avatar
-                shape="square"
-                size={48}
-                name={group.name}
-                src={group.avatar}
-              />
-            </NavbarNavItem>
+            <GroupNavItem group={group} />
           </div>
         ))}
 
diff --git a/web/src/routes/Main/Navbar/NavItem.tsx b/web/src/routes/Main/Navbar/NavItem.tsx
index 890dc68f..3e32379e 100644
--- a/web/src/routes/Main/Navbar/NavItem.tsx
+++ b/web/src/routes/Main/Navbar/NavItem.tsx
@@ -1,4 +1,4 @@
-import { Tooltip } from 'antd';
+import { Tooltip, Badge } from 'antd';
 import type { ClassValue } from 'clsx';
 import clsx from 'clsx';
 import React from 'react';
@@ -10,9 +10,10 @@ export const NavbarNavItem: React.FC<{
   className?: ClassValue;
   to?: string;
   showPill?: boolean;
+  badge?: boolean;
   onClick?: () => void;
 }> = React.memo((props) => {
-  const { name, className, to, showPill = false } = props;
+  const { name, className, to, showPill = false, badge = false } = props;
   const location = useLocation();
   const isActive = typeof to === 'string' && location.pathname.startsWith(to);
 
@@ -60,6 +61,14 @@ export const NavbarNavItem: React.FC<{
         </div>
       )}
       {inner}
+
+      <div className="absolute right-0 bottom-0">
+        {badge === true ? (
+          <Badge status="error" />
+        ) : (
+          <Badge count={Number(badge) || 0} />
+        )}
+      </div>
     </div>
   );
 });