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 c2ea7c7ff8e41..32ebb38ea0957 100644
--- a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css
+++ b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css
@@ -4,16 +4,37 @@
   @apply font-regular
     relative
     z-20
+    mb-px
     flex
     w-full
     items-center
     overflow-hidden
+    rounded-md
     text-sm
     text-neutral-800
     dark:text-neutral-200;
 
+  &:hover {
+    &:not(.progression) .label {
+      @apply rounded-sm
+        bg-neutral-100
+        text-neutral-900
+        dark:bg-neutral-800
+        dark:text-neutral-100;
+    }
+
+    .icon {
+      @apply scale-110
+        text-green-600
+        dark:text-green-400;
+    }
+  }
+
   .label {
     @apply font-regular
+      flex
+      items-center
+      gap-1.5
       p-2
       text-sm;
   }
@@ -37,6 +58,11 @@
     .label {
       @apply p-1;
     }
+
+    &:not(.active):hover {
+      @apply bg-neutral-100
+        dark:bg-neutral-900;
+    }
   }
 
   &.active {
diff --git a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx
index 0556c11c0d156..7bd4132875cc7 100644
--- a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx
+++ b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx
@@ -34,9 +34,12 @@ const SidebarItem: FC<SidebarItemProps> = ({
     {showProgressionIcons && (
       <ProgressionIcon className={styles.progressionIcon} />
     )}
-    <span className={styles.label}>{label}</span>
 
-    {/^https?:/.test(link) && <ArrowUpRightIcon className={styles.icon} />}
+    <div className={styles.label}>
+      <span>{label}</span>
+
+      {/^https?:/.test(link) && <ArrowUpRightIcon className={styles.icon} />}
+    </div>
   </BaseActiveLink>
 );