diff --git a/shared/api/socket.ts b/shared/api/socket.ts
index efcc0aaf..872eb1db 100644
--- a/shared/api/socket.ts
+++ b/shared/api/socket.ts
@@ -158,7 +158,7 @@ export function createSocket(token: string): Promise<AppSocket> {
 
     if (isDevelopment) {
       _socket.onAny((...args) => {
-        console.log('Receive Notify:', args);
+        console.debug('Receive Notify:', args);
       });
     }
   });
diff --git a/web/src/routes/Main/Navbar/PersonalNav.tsx b/web/src/routes/Main/Navbar/PersonalNav.tsx
new file mode 100644
index 00000000..dfa5e14f
--- /dev/null
+++ b/web/src/routes/Main/Navbar/PersonalNav.tsx
@@ -0,0 +1,34 @@
+import { Avatar } from '@/components/Avatar';
+import React from 'react';
+import { t, useDMConverseList, useUserInfo } from 'tailchat-shared';
+import { useUnread } from 'tailchat-shared/redux/hooks/useUnread';
+import { NavbarNavItem } from './NavItem';
+
+function usePersonalUnread(): boolean {
+  const converse = useDMConverseList();
+  const unreads = useUnread(converse.map((converse) => String(converse._id)));
+
+  return unreads.some((u) => u === true);
+}
+
+export const PersonalNav: React.FC = React.memo(() => {
+  const userInfo = useUserInfo();
+  const unread = usePersonalUnread();
+
+  return (
+    <NavbarNavItem
+      name={t('我')}
+      to={'/main/personal'}
+      showPill={true}
+      badge={unread}
+    >
+      <Avatar
+        shape="square"
+        size={48}
+        name={userInfo?.nickname}
+        src={userInfo?.avatar}
+      />
+    </NavbarNavItem>
+  );
+});
+PersonalNav.displayName = 'PersonalNav';
diff --git a/web/src/routes/Main/Navbar/index.tsx b/web/src/routes/Main/Navbar/index.tsx
index 1766e6cb..298110c3 100644
--- a/web/src/routes/Main/Navbar/index.tsx
+++ b/web/src/routes/Main/Navbar/index.tsx
@@ -1,32 +1,21 @@
 import React from 'react';
-import { t, useAppSelector } from 'tailchat-shared';
-import { Avatar } from '@/components/Avatar';
-import { NavbarNavItem } from './NavItem';
 import { GroupNav } from './GroupNav';
 import { MobileMenuBtn } from './MobileMenuBtn';
 import { SettingBtn } from './SettingBtn';
 import { Divider } from 'antd';
+import { PersonalNav } from './PersonalNav';
 
 /**
  * 导航栏组件
  */
 export const Navbar: React.FC = React.memo(() => {
-  const userInfo = useAppSelector((state) => state.user.info);
-
   return (
     <div className="w-18 bg-navbar-light dark:bg-navbar-dark flex flex-col justify-start items-center pt-4 pb-4">
       <MobileMenuBtn />
 
       {/* Navbar */}
       <div className="flex-1 w-full">
-        <NavbarNavItem name={t('我')} to={'/main/personal'} showPill={true}>
-          <Avatar
-            shape="square"
-            size={48}
-            name={userInfo?.nickname}
-            src={userInfo?.avatar}
-          />
-        </NavbarNavItem>
+        <PersonalNav />
 
         <div className="px-3">
           <Divider />