diff --git a/web/src/components/ui/sidebar/SidebarCollapsible.tsx b/web/src/components/ui/sidebar/SidebarCollapsible.tsx
index 3d0c4c909..8da12deb3 100644
--- a/web/src/components/ui/sidebar/SidebarCollapsible.tsx
+++ b/web/src/components/ui/sidebar/SidebarCollapsible.tsx
@@ -5,6 +5,7 @@ import {
   CollapsibleTrigger
 } from '../collapsible/CollapsibleBase';
 import { type ISidebarGroup } from './interfaces';
+import { SidebarItem } from './SidebarItem';
 
 export const SidebarGroup: React.FC<ISidebarGroup> = React.memo(({ label, items }) => {
   return <></>;
diff --git a/web/src/components/ui/sidebar/SidebarItem.tsx b/web/src/components/ui/sidebar/SidebarItem.tsx
index b47f10836..502fa4a2a 100644
--- a/web/src/components/ui/sidebar/SidebarItem.tsx
+++ b/web/src/components/ui/sidebar/SidebarItem.tsx
@@ -28,11 +28,17 @@ const itemVariants = cva(
         variant: 'default',
         className: 'bg-nav-item-select hover:bg-nav-item-select'
       },
+      {
+        active: false,
+        disabled: true,
+        variant: 'default',
+        className: 'text-text-disabled! bg-transparent'
+      },
       {
         active: true,
         disabled: false,
         variant: 'emphasized',
-        className: 'bg-nav-item-select hover:bg-nav-item-select'
+        className: 'bg-nav-item-select hover:bg-nav-item-select '
       },
       {
         active: false,
@@ -56,8 +62,10 @@ export const SidebarItem: React.FC<ISidebarItem & VariantProps<typeof itemVarian
 
     return (
       <ItemNode href={route} className={cn(itemVariants({ active, disabled, variant }))}>
-        <span className="text-icon-size text-icon-color">{icon}</span>
-        <span className="text-foreground truncate">{label}</span>
+        <span className={cn('text-icon-size text-icon-color', { 'text-text-disabled': disabled })}>
+          {icon}
+        </span>
+        <span className="truncate">{label}</span>
       </ItemNode>
     );
   }