diff --git a/admin-frontend/src/features/subsribeConfigManager/GroupManager.tsx b/admin-frontend/src/features/subsribeConfigManager/GroupManager.tsx
index 73f3f3a..ea6569e 100644
--- a/admin-frontend/src/features/subsribeConfigManager/GroupManager.tsx
+++ b/admin-frontend/src/features/subsribeConfigManager/GroupManager.tsx
@@ -1,12 +1,21 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Card, Typography, Grid, Button,
 } from '@arco-design/web-react';
 import { Link } from 'react-router-dom';
 import { useGetSubsQuery } from './subscribeConfigSlice';
+import SubscribeModal from './SubscribeModal';
 
 export default function GroupManager() {
+  const [modalGroupNumber, setModalGroupNumber] = useState('');
+  const [showModal, setShowModal] = useState(false);
   const { data: subs } = useGetSubsQuery();
+
+  const handleAddSub = (groupNumber: string) => () => {
+    setModalGroupNumber(groupNumber);
+    setShowModal(true);
+  };
+
   return (
     <>
       <Typography.Title heading={4} style={{ margin: '15px' }}>群管理</Typography.Title>
@@ -20,7 +29,7 @@ export default function GroupManager() {
                     title={subs[groupNumber].name}
                     actions={[
                       <Link to={`/home/groups/${groupNumber}`}><Button>详情</Button></Link>,
-                      <Button type="primary">添加</Button>,
+                      <Button type="primary" onClick={handleAddSub(groupNumber)}>添加</Button>,
                     ]}
                   >
                     <div>{groupNumber}</div>
@@ -31,6 +40,11 @@ export default function GroupManager() {
           </Grid.Row>
         )}
       </div>
+      <SubscribeModal
+        groupNumber={modalGroupNumber}
+        visible={showModal}
+        setVisible={setShowModal}
+      />
     </>
   );
 }