diff --git a/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css b/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css
index 17d4cf1bc4b75..8e5a4c4027e5d 100644
--- a/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css
+++ b/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css
@@ -50,11 +50,25 @@
     &::-webkit-details-marker {
       display: none;
     }
+
+    .chevron {
+      @apply size-3
+        shrink-0
+        text-neutral-500
+        motion-safe:transition-transform
+        dark:text-neutral-200;
+    }
   }
 
   .subGroup[open] > .summary {
     @apply text-brand-600
       dark:text-brand-400;
+
+    .chevron {
+      @apply text-brand-600
+        dark:text-brand-400
+        rotate-180;
+    }
   }
 
   .subItemList {
diff --git a/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.tsx b/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.tsx
index edff8979c9d3e..e00d689ef9240 100644
--- a/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.tsx
+++ b/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.tsx
@@ -1,3 +1,4 @@
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import classNames from 'classnames';
 
 import SidebarItem from '#ui/Containers/Sidebar/SidebarItem';
@@ -44,7 +45,10 @@ const renderItems = (
       return (
         <li key={link}>
           <details className={styles.subGroup} open={isOpen}>
-            <summary className={styles.summary}>{label}</summary>
+            <summary className={styles.summary}>
+              {label}
+              <ChevronDownIcon className={styles.chevron} />
+            </summary>
             <ul className={styles.subItemList}>
               {renderItems(subItems, props, pathname)}
             </ul>