diff --git a/web/src/routes/Main/Content/Personal/Sidebar.tsx b/web/src/routes/Main/Content/Personal/Sidebar.tsx
index 49e64a52..ab6fe368 100644
--- a/web/src/routes/Main/Content/Personal/Sidebar.tsx
+++ b/web/src/routes/Main/Content/Personal/Sidebar.tsx
@@ -27,7 +27,7 @@ export const Sidebar: React.FC = React.memo(() => {
   const converseList = useDMConverseList();
 
   return (
-    <>
+    <div className="p-2">
       <SidebarItem
         name="好友"
         icon={<Icon icon="mdi-account-multiple" />}
@@ -44,7 +44,7 @@ export const Sidebar: React.FC = React.memo(() => {
       {converseList.map((converse) => {
         return <SidebarDMItem key={converse._id} converse={converse} />;
       })}
-    </>
+    </div>
   );
 });
 Sidebar.displayName = 'Sidebar';