diff --git a/web/src/components/GroupSection.tsx b/web/src/components/GroupSection.tsx
index 50fc8104..8bd031e8 100644
--- a/web/src/components/GroupSection.tsx
+++ b/web/src/components/GroupSection.tsx
@@ -10,7 +10,7 @@ export const GroupSection: React.FC<{
   return (
     <div>
       <div
-        className="flex items-center cursor-pointer py-1"
+        className="flex items-center cursor-pointer py-1 text-xs"
         onClick={switchShow}
       >
         <Icon
@@ -21,7 +21,7 @@ export const GroupSection: React.FC<{
         <div>{props.header}</div>
       </div>
       <div
-        className="transition-all overflow-hidden"
+        className="transition-all overflow-hidden space-y-0.5"
         style={{
           maxHeight: isShow ? 'var(--max-height)' : 0,
         }}
diff --git a/web/src/routes/Main/Content/Group/Sidebar.tsx b/web/src/routes/Main/Content/Group/Sidebar.tsx
index b60bc3ed..50313efd 100644
--- a/web/src/routes/Main/Content/Group/Sidebar.tsx
+++ b/web/src/routes/Main/Content/Group/Sidebar.tsx
@@ -29,12 +29,13 @@ export const Sidebar: React.FC = React.memo(() => {
               {groupPanels
                 .filter((panel) => panel.parentId === group.id)
                 .map((panel) => (
-                  <GroupPanelItem
-                    key={panel.id}
-                    name={panel.name}
-                    icon={<div>#</div>}
-                    to={`/main/group/${groupId}/${panel.id}`}
-                  />
+                  <div key={panel.id}>
+                    <GroupPanelItem
+                      name={panel.name}
+                      icon={<div>#</div>}
+                      to={`/main/group/${groupId}/${panel.id}`}
+                    />
+                  </div>
                 ))}
             </GroupSection>
           ))}
diff --git a/web/src/routes/Main/Navbar/GroupNav.tsx b/web/src/routes/Main/Navbar/GroupNav.tsx
index 9848aeeb..ca3cad08 100644
--- a/web/src/routes/Main/Navbar/GroupNav.tsx
+++ b/web/src/routes/Main/Navbar/GroupNav.tsx
@@ -25,18 +25,16 @@ export const GroupNav: React.FC = React.memo(() => {
     <div className="space-y-2">
       {Array.isArray(groups) &&
         groups.map((group) => (
-          <NavbarNavItem
-            key={group._id}
-            name={group.name}
-            to={`/main/group/${group._id}`}
-          >
-            <Avatar
-              shape="square"
-              size={48}
-              name={group.name}
-              src={group.avatar}
-            />
-          </NavbarNavItem>
+          <div key={group._id}>
+            <NavbarNavItem name={group.name} to={`/main/group/${group._id}`}>
+              <Avatar
+                shape="square"
+                size={48}
+                name={group.name}
+                src={group.avatar}
+              />
+            </NavbarNavItem>
+          </div>
         ))}
 
       {/* 创建群组 */}