diff --git a/web/src/components/Panel/common/Header.tsx b/web/src/components/Panel/common/Header.tsx
new file mode 100644
index 00000000..533091dc
--- /dev/null
+++ b/web/src/components/Panel/common/Header.tsx
@@ -0,0 +1,31 @@
+import { SectionHeader } from '@/components/SectionHeader';
+import { Space } from 'antd';
+import React from 'react';
+
+interface PanelCommonHeaderProps {
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  actions?: React.ReactNode[];
+}
+
+/**
+ * 右侧面板的头部
+ */
+export const PanelCommonHeader: React.FC<PanelCommonHeaderProps> = React.memo(
+  (props) => {
+    return (
+      <SectionHeader>
+        <div className="flex flex-wrap text-xl justify-between">
+          <div className="flex items-center">
+            <div className="text-gray-500 mr-1">{props.prefix}</div>
+            <div className="text-base">{props.children}</div>
+            <div className="ml-2">{props.suffix}</div>
+          </div>
+
+          <Space>{props.actions}</Space>
+        </div>
+      </SectionHeader>
+    );
+  }
+);
+PanelCommonHeader.displayName = 'PanelCommonHeader';
diff --git a/web/src/components/Panel/group/TextPanel.tsx b/web/src/components/Panel/group/TextPanel.tsx
index d97c216c..5509dbd3 100644
--- a/web/src/components/Panel/group/TextPanel.tsx
+++ b/web/src/components/Panel/group/TextPanel.tsx
@@ -1,5 +1,7 @@
 import { ChatBox } from '@/components/ChatBox';
 import React from 'react';
+import { useGroupPanel } from 'tailchat-shared';
+import { GroupPanelWrapper } from './Wrapper';
 
 interface TextPanelProps {
   groupId: string;
@@ -7,7 +9,16 @@ interface TextPanelProps {
 }
 export const TextPanel: React.FC<TextPanelProps> = React.memo(
   ({ groupId, panelId }) => {
-    return <ChatBox converseId={panelId} isGroup={true} groupId={groupId} />;
+    const panelInfo = useGroupPanel(groupId, panelId);
+    if (panelInfo === undefined) {
+      return null;
+    }
+
+    return (
+      <GroupPanelWrapper groupId={groupId} panelId={panelId}>
+        <ChatBox converseId={panelId} isGroup={true} groupId={groupId} />
+      </GroupPanelWrapper>
+    );
   }
 );
 TextPanel.displayName = 'TextPanel';
diff --git a/web/src/components/Panel/group/Wrapper.tsx b/web/src/components/Panel/group/Wrapper.tsx
new file mode 100644
index 00000000..718b0b4c
--- /dev/null
+++ b/web/src/components/Panel/group/Wrapper.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { useGroupPanel } from 'tailchat-shared';
+import { PanelCommonHeader } from '../common/Header';
+
+/**
+ * 群组面板通用包装器
+ */
+interface GroupPanelWrapperProps {
+  groupId: string;
+  panelId: string;
+}
+export const GroupPanelWrapper: React.FC<GroupPanelWrapperProps> = React.memo(
+  (props) => {
+    const panelInfo = useGroupPanel(props.groupId, props.panelId);
+    if (panelInfo === undefined) {
+      return null;
+    }
+
+    return (
+      <div className="w-full h-full flex flex-col overflow-hidden">
+        <PanelCommonHeader>{panelInfo.name}</PanelCommonHeader>
+        <div className="flex-1 overflow-hidden">{props.children}</div>
+      </div>
+    );
+  }
+);
+GroupPanelWrapper.displayName = 'GroupPanelWrapper';