diff --git a/packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/index.tsx b/packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/index.tsx
index e255503fca..fc2672ac63 100644
--- a/packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/index.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/index.tsx
@@ -1,3 +1,4 @@
+import { Scrollable } from '@affine/component';
 import { Avatar } from '@affine/component/ui/avatar';
 import { UserPlanButton } from '@affine/core/components/affine/auth/user-plan-button';
 import { useCatchEventCallback } from '@affine/core/components/hooks/use-catch-event-hook';
@@ -225,13 +226,18 @@ export const SettingSidebar = ({
         </Suspense>
       ) : null}
 
-      {groups.map(group => (
-        <SettingSidebarGroup
-          key={group.key}
-          title={group.title}
-          items={group.items}
-        />
-      ))}
+      <Scrollable.Root>
+        <Scrollable.Viewport>
+          {groups.map(group => (
+            <SettingSidebarGroup
+              key={group.key}
+              title={group.title}
+              items={group.items}
+            />
+          ))}
+          <Scrollable.Scrollbar />
+        </Scrollable.Viewport>
+      </Scrollable.Root>
     </div>
   );
 };
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/style.css.ts b/packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/style.css.ts
index fdac834180..05d4c60b18 100644
--- a/packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/style.css.ts
+++ b/packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/style.css.ts
@@ -5,7 +5,7 @@ export const settingSlideBar = style({
   width: '25%',
   maxWidth: '242px',
   background: cssVar('backgroundSecondaryColor'),
-  padding: '20px 12px',
+  padding: '20px 0px 0px 12px',
   height: '100%',
   flexShrink: 0,
   display: 'flex',
@@ -123,6 +123,7 @@ export const sidebarGroup = style({
   display: 'flex',
   flexDirection: 'column',
   gap: '4px',
+  paddingRight: '12px',
 });
 
 export const accountButton = style({