diff --git a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css
index f11585de67303..12a2ffdbffb28 100644
--- a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css
+++ b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css
@@ -14,29 +14,6 @@
     text-neutral-800
     dark:text-neutral-200;
 
-  &:not(.active):hover {
-    /* Apply hover background to the full item width */
-    @apply bg-neutral-100
-      dark:bg-neutral-900;
-
-    /* Ensure text colors contrast with hover background */
-    .label {
-      @apply text-neutral-900
-        dark:text-neutral-100;
-    }
-
-    .icon {
-      @apply scale-110
-        text-green-600
-        dark:text-green-400;
-    }
-
-    .progressionIcon {
-      @apply fill-green-200
-        dark:fill-green-300;
-    }
-  }
-
   .label {
     @apply font-regular
       flex
@@ -46,15 +23,6 @@
       text-sm;
   }
 
-  .progressionIcon {
-    @apply shrink-0
-      fill-neutral-200
-      stroke-white
-      stroke-[4]
-      dark:fill-neutral-800
-      dark:stroke-neutral-950;
-  }
-
   .icon {
     @apply size-3
       text-neutral-500
@@ -62,32 +30,52 @@
   }
 
   &.progression {
+    &.active {
+      @apply text-neutral-900
+        dark:text-white;
+
+      .hexagonIcon {
+        @apply fill-green-500;
+      }
+    }
+
     .label {
       @apply p-1;
     }
 
-    /* On hover, use full-width background on the item (set above) */
-    &:not(.active):hover {
-      @apply bg-neutral-100
-        dark:bg-neutral-900;
+    .hexagonIcon {
+      @apply shrink-0
+        fill-neutral-200
+        stroke-white
+        stroke-[4]
+        dark:fill-neutral-800
+        dark:stroke-neutral-950;
     }
+  }
 
-    /* Avoid extra pill background on the label when hovering */
-    &:not(.active):hover .label {
-      @apply rounded-none
-        bg-transparent;
+  &:not(.active):not(.progression):hover {
+    /* Apply hover background to the full item width */
+    @apply bg-neutral-100
+      dark:bg-neutral-900;
+
+    /* Ensure text colors contrast with hover background */
+    .label {
+      @apply text-neutral-900
+        dark:text-neutral-100;
+    }
+
+    .icon {
+      @apply scale-110
+        text-green-600
+        dark:text-green-400;
     }
   }
 
-  &.active {
+  &.active:not(.progression) {
     /* Full-width active background and readable text */
     @apply bg-green-600
       text-white;
 
-    .progressionIcon {
-      @apply fill-green-500;
-    }
-
     /* Remove pill background on the label; keep full-width bg on the item */
     .label {
       @apply rounded-none
diff --git a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx
index 7bd4132875cc7..5063a66b8d8f6 100644
--- a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx
+++ b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx
@@ -31,9 +31,7 @@ const SidebarItem: FC<SidebarItemProps> = ({
     activeClassName={styles.active}
     {...props}
   >
-    {showProgressionIcons && (
-      <ProgressionIcon className={styles.progressionIcon} />
-    )}
+    {showProgressionIcons && <ProgressionIcon className={styles.hexagonIcon} />}
 
     <div className={styles.label}>
       <span>{label}</span>