diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/McpSidebarGroup.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/McpSidebarGroup.tsx
index e4033d21d6..4a9d20bdb9 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/McpSidebarGroup.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/McpSidebarGroup.tsx
@@ -108,7 +108,7 @@ const McpSidebarGroup = ({
   }
 
   return (
-    <SidebarGroup className={`p-3 ${!hasMcpServers ? " h-full" : ""}`}>
+    <SidebarGroup className={`p-3 pr-2${!hasMcpServers ? " h-full" : ""}`}>
       {hasMcpServers && (
         <SidebarGroupLabel className="cursor-default w-full flex items-center justify-between">
           <span>MCP Servers</span>
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/McpSidebarGroup.test.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/McpSidebarGroup.test.tsx
index 391b47cf8c..c5c547f221 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/McpSidebarGroup.test.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/McpSidebarGroup.test.tsx
@@ -606,7 +606,11 @@ describe("McpSidebarGroup", () => {
       const TestWrapper = createTestWrapper();
       render(<McpSidebarGroup {...props} />, { wrapper: TestWrapper });
 
-      expect(screen.getByTestId("sidebar-group")).toHaveClass("p-3", "h-full");
+      expect(screen.getByTestId("sidebar-group")).toHaveClass(
+        "p-3",
+        "pr-2",
+        "h-full",
+      );
     });
 
     it("should not apply h-full class when hasMcpServers is true", () => {
@@ -619,7 +623,7 @@ describe("McpSidebarGroup", () => {
       render(<McpSidebarGroup {...props} />, { wrapper: TestWrapper });
 
       const sidebarGroup = screen.getByTestId("sidebar-group");
-      expect(sidebarGroup).toHaveClass("p-3");
+      expect(sidebarGroup).toHaveClass("p-3", "pr-2");
       expect(sidebarGroup).not.toHaveClass("h-full");
     });
   });
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/sidebarBundles.test.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/sidebarBundles.test.tsx
index c31fff09d7..3e456e1287 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/sidebarBundles.test.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/sidebarBundles.test.tsx
@@ -127,7 +127,7 @@ describe("MemoizedSidebarGroup (SidebarBundles)", () => {
     it("should apply correct CSS classes", () => {
       render(<MemoizedSidebarGroup {...defaultProps} />);
 
-      expect(screen.getByTestId("sidebar-group")).toHaveClass("p-3");
+      expect(screen.getByTestId("sidebar-group")).toHaveClass("p-3", "pr-2");
       expect(screen.getByTestId("sidebar-group-label")).toHaveClass(
         "cursor-default",
       );
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryGroup.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryGroup.tsx
index a631a19e0c..d546776a00 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryGroup.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryGroup.tsx
@@ -25,7 +25,7 @@ export const CategoryGroup = memo(function CategoryGroup({
   setShowConfig,
 }: CategoryGroupProps) {
   return (
-    <SidebarGroup className="p-3">
+    <SidebarGroup className="p-3 pr-2">
       {ENABLE_NEW_SIDEBAR && (
         <SidebarGroupLabel className="cursor-default flex items-center justify-between w-full">
           <span>Components</span>
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarBundles.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarBundles.tsx
index 9fb2446143..7a515f4e87 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarBundles.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarBundles.tsx
@@ -41,7 +41,7 @@ export const MemoizedSidebarGroup = memo(
     }, [BUNDLES, search, sortedCategories, dataFilter]);
 
     return (
-      <SidebarGroup className="p-3">
+      <SidebarGroup className="p-3 pr-2">
         <SidebarGroupLabel className="cursor-default w-full flex items-center justify-between">
           <span>Bundles</span>
           {showSearchConfigTrigger && ENABLE_NEW_SIDEBAR && (
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
index bbe414393a..3915c1644c 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
@@ -597,7 +597,7 @@ export function FlowSidebarComponent({ isLoading }: FlowSidebarComponentProps) {
 
           <SidebarContent
             segmentedSidebar={ENABLE_NEW_SIDEBAR}
-            className="flex-1 group-data-[collapsible=icon]:hidden"
+            className="flex-1 group-data-[collapsible=icon]:hidden gutter-stable"
           >
             {isLoading ? (
               <div className="flex flex-col gap-2">
diff --git a/src/frontend/tailwind.config.mjs b/src/frontend/tailwind.config.mjs
index f20eed6059..83413d90af 100644
--- a/src/frontend/tailwind.config.mjs
+++ b/src/frontend/tailwind.config.mjs
@@ -373,6 +373,9 @@ const config = {
             display: "none",
           },
         },
+        ".gutter-stable": {
+          "scrollbar-gutter": "stable",
+        },
         ".truncate-multiline": {
           display: "-webkit-box",
           "-webkit-line-clamp":