diff --git a/web/src/components/PillTabs.tsx b/web/src/components/PillTabs.tsx
index 514edf8c..2dbf05e6 100644
--- a/web/src/components/PillTabs.tsx
+++ b/web/src/components/PillTabs.tsx
@@ -13,7 +13,7 @@ import './PillTabs.less';
  */
 export const PillTabs: React.FC<TabsProps> = React.memo((props) => {
   return (
-    <Tabs className="pill-tabs" type="card" animated={true}>
+    <Tabs {...props} className="pill-tabs" type="card" animated={true}>
       {props.children}
     </Tabs>
   );
diff --git a/web/src/routes/Main/Content/Personal/Friends/FriendList.tsx b/web/src/routes/Main/Content/Personal/Friends/FriendList.tsx
index 9aeee819..78034f26 100644
--- a/web/src/routes/Main/Content/Personal/Friends/FriendList.tsx
+++ b/web/src/routes/Main/Content/Personal/Friends/FriendList.tsx
@@ -13,13 +13,16 @@ import {
 } from 'tailchat-shared';
 import { UserListItem } from '@/components/UserListItem';
 import { IconBtn } from '@/components/IconBtn';
-import { Dropdown, Menu, Tooltip } from 'antd';
+import { Button, Dropdown, Menu, Tooltip } from 'antd';
 import { useHistory } from 'react-router';
+import { Problem } from '@/components/Problem';
 
 /**
  * 好友列表
  */
-export const FriendList: React.FC = React.memo(() => {
+export const FriendList: React.FC<{
+  onSwitchToAddFriend: () => void;
+}> = React.memo((props) => {
   const friends = useAppSelector((state) => state.user.friends);
   const history = useHistory();
   const dispatch = useAppDispatch();
@@ -49,6 +52,21 @@ export const FriendList: React.FC = React.memo(() => {
     });
   }, []);
 
+  if (friends.length === 0) {
+    return (
+      <Problem
+        text={
+          <div>
+            <p className="mb-2">{t('暂无好友')}</p>
+            <Button type="primary" onClick={props.onSwitchToAddFriend}>
+              {t('立即添加')}
+            </Button>
+          </div>
+        }
+      />
+    );
+  }
+
   return (
     <div className="py-2.5 px-5">
       <div>{t('好友列表')}</div>
diff --git a/web/src/routes/Main/Content/Personal/Friends/index.tsx b/web/src/routes/Main/Content/Personal/Friends/index.tsx
index 980895db..da2d4e9e 100644
--- a/web/src/routes/Main/Content/Personal/Friends/index.tsx
+++ b/web/src/routes/Main/Content/Personal/Friends/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { PillTabPane, PillTabs } from '@/components/PillTabs';
 import { AddFriend } from './AddFriend';
 import { t, useAppSelector } from 'tailchat-shared';
@@ -13,15 +13,20 @@ import { Badge } from 'antd';
 export const FriendPanel: React.FC = React.memo(() => {
   const friendRequests = useAppSelector((state) => state.user.friendRequests);
   const userId = useAppSelector((state) => state.user.info?._id);
+  const [activeKey, setActiveKey] = useState('1');
 
   const send = friendRequests.filter((item) => item.from === userId);
   const received = friendRequests.filter((item) => item.to === userId);
 
+  const handleSwitchToAddFriend = useCallback(() => {
+    setActiveKey('add');
+  }, []);
+
   return (
     <div className="w-full">
-      <PillTabs>
+      <PillTabs activeKey={activeKey} onChange={setActiveKey}>
         <PillTabPane tab={t('全部')} key="1">
-          <FriendList />
+          <FriendList onSwitchToAddFriend={handleSwitchToAddFriend} />
         </PillTabPane>
         <PillTabPane
           tab={
@@ -53,7 +58,7 @@ export const FriendPanel: React.FC = React.memo(() => {
         </PillTabPane>
         <PillTabPane
           tab={<span className="text-green-400">{t('添加好友')}</span>}
-          key="4"
+          key="add"
         >
           <AddFriend />
         </PillTabPane>