diff --git a/libs/ui/src/lib/layout/AppSidebar.tsx b/libs/ui/src/lib/layout/AppSidebar.tsx
index 4ef9cd12a..81825eee7 100644
--- a/libs/ui/src/lib/layout/AppSidebar.tsx
+++ b/libs/ui/src/lib/layout/AppSidebar.tsx
@@ -110,13 +110,18 @@ function SidebarItem({ item, collapsed, activePath, onNavigate, opened, onToggle
   );
 
   // Parent headers always carry a chevron so the expand/collapse state is
-  // never ambiguous, even when a badge is also present.
+  // never ambiguous, even when a badge is also present. One icon rotated
+  // (rather than swapping icons) so the toggle animates instead of jumping.
   const chevron = hasChildren ? (
-    opened ? (
-      <IconChevronDown size={14} stroke={1.8} color="var(--mantine-color-gray-5)" />
-    ) : (
-      <IconChevronRight size={14} stroke={1.8} color="var(--mantine-color-gray-5)" />
-    )
+    <IconChevronRight
+      size={14}
+      stroke={1.8}
+      color="var(--mantine-color-gray-5)"
+      style={{
+        transform: opened ? 'rotate(90deg)' : 'rotate(0deg)',
+        transition: 'transform 200ms ease',
+      }}
+    />
   ) : null;
 
   const soonBadge = (