diff --git a/web/src/components/GroupPanelItem.tsx b/web/src/components/GroupPanelItem.tsx
new file mode 100644
index 00000000..786d89bb
--- /dev/null
+++ b/web/src/components/GroupPanelItem.tsx
@@ -0,0 +1,42 @@
+import { Badge, Typography } from 'antd';
+import clsx from 'clsx';
+import React from 'react';
+import { useLocation } from 'react-router';
+import { Link } from 'react-router-dom';
+
+export const GroupPanelItem: React.FC<{
+  name: string;
+  icon: React.ReactNode;
+  to: string;
+  badge?: boolean;
+}> = React.memo((props) => {
+  const { icon, name, to, badge } = props;
+  const location = useLocation();
+  const isActive = location.pathname.startsWith(to);
+
+  return (
+    <Link to={to}>
+      <div
+        className={clsx(
+          'w-full hover:bg-white hover:bg-opacity-20 cursor-pointer text-white rounded px-1 h-8 flex items-center text-base group',
+          {
+            'bg-white bg-opacity-20': isActive,
+          }
+        )}
+      >
+        <div className="flex items-center justify-center px-1 mr-1">{icon}</div>
+
+        <Typography.Text className="flex-1 text-white" ellipsis={true}>
+          {name}
+        </Typography.Text>
+
+        {badge === true ? (
+          <Badge status="error" />
+        ) : (
+          <Badge count={Number(badge) || 0} />
+        )}
+      </div>
+    </Link>
+  );
+});
+GroupPanelItem.displayName = 'GroupPanelItem';
diff --git a/web/src/components/GroupSection.tsx b/web/src/components/GroupSection.tsx
new file mode 100644
index 00000000..50fc8104
--- /dev/null
+++ b/web/src/components/GroupSection.tsx
@@ -0,0 +1,37 @@
+import { Icon } from '@iconify/react';
+import React from 'react';
+import { useReducer } from 'react';
+
+export const GroupSection: React.FC<{
+  header: string;
+}> = React.memo((props) => {
+  const [isShow, switchShow] = useReducer((v) => !v, true);
+
+  return (
+    <div>
+      <div
+        className="flex items-center cursor-pointer py-1"
+        onClick={switchShow}
+      >
+        <Icon
+          className="mr-1"
+          icon="mdi-chevron-right"
+          rotate={isShow ? 45 : 0}
+        />
+        <div>{props.header}</div>
+      </div>
+      <div
+        className="transition-all overflow-hidden"
+        style={{
+          maxHeight: isShow ? 'var(--max-height)' : 0,
+        }}
+        ref={(ref) =>
+          ref?.style.setProperty('--max-height', `${ref.scrollHeight}px`)
+        }
+      >
+        {props.children}
+      </div>
+    </div>
+  );
+});
+GroupSection.displayName = 'GroupSection';
diff --git a/web/src/routes/Main/Content/Group/Sidebar.tsx b/web/src/routes/Main/Content/Group/Sidebar.tsx
index 07690321..b60bc3ed 100644
--- a/web/src/routes/Main/Content/Group/Sidebar.tsx
+++ b/web/src/routes/Main/Content/Group/Sidebar.tsx
@@ -1,87 +1,14 @@
-import React, { useReducer } from 'react';
-import { Icon } from '@iconify/react';
+import React from 'react';
 import { GroupPanelType, useGroupInfo } from 'tailchat-shared';
-import { useLocation, useParams } from 'react-router';
-import { Badge, Typography } from 'antd';
-import { Link } from 'react-router-dom';
-import clsx from 'clsx';
+import { useParams } from 'react-router';
 import { GroupHeader } from './GroupHeader';
+import { GroupSection } from '@/components/GroupSection';
+import { GroupPanelItem } from '@/components/GroupPanelItem';
 
 interface GroupParams {
   groupId: string;
 }
 
-const GroupSection: React.FC<{
-  header: string;
-}> = React.memo((props) => {
-  const [isShow, switchShow] = useReducer((v) => !v, true);
-
-  return (
-    <div>
-      <div
-        className="flex items-center cursor-pointer py-1"
-        onClick={switchShow}
-      >
-        <Icon
-          className="mr-1"
-          icon="mdi-chevron-right"
-          rotate={isShow ? 45 : 0}
-        />
-        <div>{props.header}</div>
-      </div>
-      <div
-        className="transition-all overflow-hidden"
-        style={{
-          maxHeight: isShow ? 'var(--max-height)' : 0,
-        }}
-        ref={(ref) =>
-          ref?.style.setProperty('--max-height', `${ref.scrollHeight}px`)
-        }
-      >
-        {props.children}
-      </div>
-    </div>
-  );
-});
-GroupSection.displayName = 'GroupSection';
-
-const GroupPanelItem: React.FC<{
-  name: string;
-  icon: React.ReactNode;
-  to: string;
-  badge?: boolean;
-}> = React.memo((props) => {
-  const { icon, name, to, badge } = props;
-  const location = useLocation();
-  const isActive = location.pathname.startsWith(to);
-
-  return (
-    <Link to={to}>
-      <div
-        className={clsx(
-          'w-full hover:bg-white hover:bg-opacity-20 cursor-pointer text-white rounded px-1 h-8 flex items-center text-base group',
-          {
-            'bg-white bg-opacity-20': isActive,
-          }
-        )}
-      >
-        <div className="flex items-center justify-center px-1 mr-1">{icon}</div>
-
-        <Typography.Text className="flex-1 text-white" ellipsis={true}>
-          {name}
-        </Typography.Text>
-
-        {badge === true ? (
-          <Badge status="error" />
-        ) : (
-          <Badge count={Number(badge) || 0} />
-        )}
-      </div>
-    </Link>
-  );
-});
-GroupPanelItem.displayName = 'GroupPanelItem';
-
 /**
  * 个人面板侧边栏组件
  */