diff --git a/web/src/components/GroupPanelItem.tsx b/web/src/components/GroupPanelItem.tsx
index 786d89bb..afeaab9d 100644
--- a/web/src/components/GroupPanelItem.tsx
+++ b/web/src/components/GroupPanelItem.tsx
@@ -15,7 +15,7 @@ export const GroupPanelItem: React.FC<{
   const isActive = location.pathname.startsWith(to);
 
   return (
-    <Link to={to}>
+    <Link className="block" 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',
diff --git a/web/src/components/GroupSection.tsx b/web/src/components/GroupSection.tsx
index f7e5b912..b5ef82b7 100644
--- a/web/src/components/GroupSection.tsx
+++ b/web/src/components/GroupSection.tsx
@@ -21,7 +21,7 @@ export const GroupSection: React.FC<{
         <div>{props.header}</div>
       </div>
       <div
-        className="transition-all overflow-hidden space-y-0.5"
+        className="transition-all overflow-hidden space-y-0.5 pl-2 ml-1 border-l-4 border-opacity-40"
         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 50313efd..f298a2c2 100644
--- a/web/src/routes/Main/Content/Group/Sidebar.tsx
+++ b/web/src/routes/Main/Content/Group/Sidebar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { GroupPanelType, useGroupInfo } from 'tailchat-shared';
+import { GroupPanelType, isValidStr, useGroupInfo } from 'tailchat-shared';
 import { useParams } from 'react-router';
 import { GroupHeader } from './GroupHeader';
 import { GroupSection } from '@/components/GroupSection';
@@ -10,7 +10,7 @@ interface GroupParams {
 }
 
 /**
- * 个人面板侧边栏组件
+ * 群组面板侧边栏组件
  */
 export const Sidebar: React.FC = React.memo(() => {
   const { groupId } = useParams<GroupParams>();
@@ -21,24 +21,33 @@ export const Sidebar: React.FC = React.memo(() => {
     <div>
       <GroupHeader groupId={groupId} />
 
-      <div className="p-2">
+      <div className="p-2 space-y-1">
         {groupPanels
-          .filter((panel) => panel.type === GroupPanelType.GROUP)
-          .map((group) => (
-            <GroupSection key={group.id} header={group.name}>
-              {groupPanels
-                .filter((panel) => panel.parentId === group.id)
-                .map((panel) => (
-                  <div key={panel.id}>
-                    <GroupPanelItem
-                      name={panel.name}
-                      icon={<div>#</div>}
-                      to={`/main/group/${groupId}/${panel.id}`}
-                    />
-                  </div>
-                ))}
-            </GroupSection>
-          ))}
+          .filter((panel) => !isValidStr(panel.parentId))
+          .map((panel) =>
+            panel.type === GroupPanelType.GROUP ? (
+              <GroupSection key={panel.id} header={panel.name}>
+                {groupPanels
+                  .filter((sub) => sub.parentId === panel.id)
+                  .map((sub) => (
+                    <div key={sub.id}>
+                      <GroupPanelItem
+                        name={sub.name}
+                        icon={<div>#</div>}
+                        to={`/main/group/${groupId}/${sub.id}`}
+                      />
+                    </div>
+                  ))}
+              </GroupSection>
+            ) : (
+              <GroupPanelItem
+                key={panel.id}
+                name={panel.name}
+                icon={<div>#</div>}
+                to={`/main/group/${groupId}/${panel.id}`}
+              />
+            )
+          )}
       </div>
     </div>
   );