diff --git a/src/pages/InterestGroup/InterestGroup.jsx b/src/pages/InterestGroup/InterestGroup.jsx
index c1109a0..8a8d67b 100644
--- a/src/pages/InterestGroup/InterestGroup.jsx
+++ b/src/pages/InterestGroup/InterestGroup.jsx
@@ -15,6 +15,7 @@
   const [size, setSize] = useState(10);
   const [totalPages, setTotalPages] = useState(1);
   const [sortBy, setSortBy] = useState('member_count'); // 默认按照成员数排序
+  const [joinStatus, setJoinStatus] = useState({}); // 存储每个小组的加入状态
 
   useEffect(() => {
     // 请求兴趣小组列表
@@ -68,6 +69,34 @@
     }
   };
 
+  // 加入兴趣小组
+  const handleJoinGroup = async (groupId) => {
+    const userId = 1; // 假设用户ID为1，可以根据实际情况获取
+
+    try {
+      const response = await axios.post(`${API_BASE}/echo/groups/${groupId}/join`, {
+        user_id: userId
+      });
+
+      if (response.data.status === 'success') {
+        setJoinStatus(prevState => ({
+          ...prevState,
+          [groupId]: '加入成功'
+        }));
+      } else {
+        setJoinStatus(prevState => ({
+          ...prevState,
+          [groupId]: '加入失败'
+        }));
+      }
+    } catch (error) {
+      setJoinStatus(prevState => ({
+        ...prevState,
+        [groupId]: '请求失败，请稍后再试'
+      }));
+    }
+  };
+
   return (
     <div className="interest-group-container">
       {/* Header 组件放在页面最上方 */}
@@ -129,6 +158,15 @@
                 <p>{group.description}</p>
                 <p>成员数：{group.member_count}</p>
                 <p>分类：{group.category}</p>
+                {/* 加入小组按钮 */}
+                <button
+                  onClick={() => handleJoinGroup(group.group_id)}
+                  disabled={joinStatus[group.group_id] === '加入成功'}
+                >
+                  {joinStatus[group.group_id] === '加入成功' ? '已加入' : '加入小组'}
+                </button>
+                {/* 显示加入状态 */}
+                {joinStatus[group.group_id] && <p>{joinStatus[group.group_id]}</p>}
               </div>
             </div>
           ))}