diff --git a/web/src/components/modals/GroupDetail/Summary.tsx b/web/src/components/modals/GroupDetail/Summary.tsx
new file mode 100644
index 00000000..6591bc8b
--- /dev/null
+++ b/web/src/components/modals/GroupDetail/Summary.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const GroupSummary: React.FC<{
+  groupId: string;
+}> = React.memo((props) => {
+  return <div>GroupSummary: {props.groupId}</div>;
+});
+GroupSummary.displayName = 'GroupSummary';
diff --git a/web/src/components/modals/GroupDetail/index.tsx b/web/src/components/modals/GroupDetail/index.tsx
new file mode 100644
index 00000000..10fd32d1
--- /dev/null
+++ b/web/src/components/modals/GroupDetail/index.tsx
@@ -0,0 +1,44 @@
+import { FullModal } from '@/components/FullModal';
+import { SidebarView, SidebarViewMenuType } from '@/components/SidebarView';
+import React, { useCallback, useMemo } from 'react';
+import { t } from 'tailchat-shared';
+import { GroupSummary } from './Summary';
+
+interface SettingsViewProps {
+  groupId: string;
+  onClose: () => void;
+}
+export const GroupDetail: React.FC<SettingsViewProps> = React.memo((props) => {
+  const handleChangeVisible = useCallback(
+    (visible) => {
+      if (visible === false && typeof props.onClose === 'function') {
+        props.onClose();
+      }
+    },
+    [props.onClose]
+  );
+
+  const menu: SidebarViewMenuType[] = useMemo(
+    () => [
+      {
+        type: 'group',
+        title: t('通用'),
+        children: [
+          {
+            type: 'item',
+            title: t('概述'),
+            content: <GroupSummary groupId={props.groupId} />,
+          },
+        ],
+      },
+    ],
+    []
+  );
+
+  return (
+    <FullModal onChangeVisible={handleChangeVisible}>
+      <SidebarView menu={menu} defaultContentPath="0.children.0.content" />
+    </FullModal>
+  );
+});
+GroupDetail.displayName = 'GroupDetail';
diff --git a/web/src/routes/Main/Content/Group/GroupHeader.tsx b/web/src/routes/Main/Content/Group/GroupHeader.tsx
index 7ffe1c8b..bc3816fc 100644
--- a/web/src/routes/Main/Content/Group/GroupHeader.tsx
+++ b/web/src/routes/Main/Content/Group/GroupHeader.tsx
@@ -14,7 +14,8 @@ export const GroupHeader: React.FC<GroupHeaderProps> = React.memo((props) => {
   const groupInfo = useGroupInfo(groupId);
   const { t } = useTranslation();
 
-  const { handleInviteUser } = useGroupHeaderAction(groupId);
+  const { handleShowGroupDetail, handleInviteUser } =
+    useGroupHeaderAction(groupId);
 
   if (_isNil(groupInfo)) {
     return null;
@@ -22,7 +23,7 @@ export const GroupHeader: React.FC<GroupHeaderProps> = React.memo((props) => {
 
   const menu = (
     <Menu>
-      <Menu.Item key="0" onClick={() => console.log('查看详情')}>
+      <Menu.Item key="0" onClick={handleShowGroupDetail}>
         {t('查看详情')}
       </Menu.Item>
       <Menu.Item key="1" onClick={handleInviteUser}>
diff --git a/web/src/routes/Main/Content/Group/useGroupHeaderAction.tsx b/web/src/routes/Main/Content/Group/useGroupHeaderAction.tsx
index f4e13b06..3d82b42d 100644
--- a/web/src/routes/Main/Content/Group/useGroupHeaderAction.tsx
+++ b/web/src/routes/Main/Content/Group/useGroupHeaderAction.tsx
@@ -1,12 +1,27 @@
-import { openModal } from '@/components/Modal';
+import { closeModal, openModal } from '@/components/Modal';
+import { GroupDetail } from '@/components/modals/GroupDetail';
 import { GroupInvite } from '@/components/modals/GroupInvite';
 import React from 'react';
 import { useCallback } from 'react';
 
+/**
+ * 群组 Header 的操作 hooks
+ */
 export function useGroupHeaderAction(groupId: string) {
+  const handleShowGroupDetail = useCallback(() => {
+    const key = openModal(
+      <GroupDetail
+        groupId={groupId}
+        onClose={() => {
+          closeModal(key);
+        }}
+      />
+    );
+  }, [groupId]);
+
   const handleInviteUser = useCallback(() => {
     openModal(<GroupInvite groupId={groupId} />);
   }, [groupId]);
 
-  return { handleInviteUser };
+  return { handleShowGroupDetail, handleInviteUser };
 }