diff --git a/apps/web/core/components/settings/sidebar/root.tsx b/apps/web/core/components/settings/sidebar/root.tsx
index 7a8c915ed..7dd07744f 100644
--- a/apps/web/core/components/settings/sidebar/root.tsx
+++ b/apps/web/core/components/settings/sidebar/root.tsx
@@ -1,6 +1,5 @@
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
-import { ScrollArea } from "@plane/ui";
 import { cn } from "@plane/utils";
 import { SettingsSidebarHeader } from "./header";
 import SettingsSidebarNavItem, { TSettingItem } from "./nav-item";
@@ -46,10 +45,7 @@ export const SettingsSidebar = observer((props: SettingsSidebarProps) => {
       {/* Header */}
       <SettingsSidebarHeader customHeader={customHeader} />
       {/* Navigation */}
-      <ScrollArea
-        className="divide-y divide-custom-border-100 overflow-x-hidden w-full h-full overflow-y-scroll"
-        type="hover"
-      >
+      <div className="divide-y divide-custom-border-100 overflow-x-hidden w-full h-full overflow-y-scroll vertical-scrollbar scrollbar-sm">
         {categories.map((category) => {
           if (groupedSettings[category].length === 0) return null;
           return (
@@ -74,7 +70,7 @@ export const SettingsSidebar = observer((props: SettingsSidebarProps) => {
             </div>
           );
         })}
-      </ScrollArea>
+      </div>
     </div>
   );
 });