diff --git a/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.tsx
index a345064932..04de594d50 100644
--- a/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -2,7 +2,7 @@ import type { FC, FunctionComponentElement } from 'react';
 import React from 'react';
 import type { AriaBreadcrumbsProps } from 'react-aria';
 import { useBreadcrumbs } from 'react-aria';
-import { Box } from '..';
+import { Box, Text } from '..';
 import { containerClass, navClass } from './Breadcrumbs.css';
 import type { IBreadcrumbItemProps } from './BreadcrumbsItem';
 
@@ -22,7 +22,11 @@ export const Breadcrumbs: FC<IBreadcrumbsProps> = ({
 
   return (
     <nav className={navClass} {...navProps}>
-      {icon && <Box marginInline="sm">{icon}</Box>}
+      {icon && (
+        <Box marginInline="sm">
+          <Text>{icon}</Text>
+        </Box>
+      )}
       <ol className={containerClass}>
         {React.Children.map(breadcrumbProps.children, (child, i) =>
           React.cloneElement(child as any, { isCurrent: i === childCount - 1 }),
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts
index 74823bfc6c..0ebdf189e3 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts
@@ -150,6 +150,7 @@ export const listClass = recipe({
     direction: {
       horizontal: {
         flexDirection: 'row',
+        alignItems: 'center',
       },
       vertical: {
         flexDirection: 'column',
@@ -186,13 +187,14 @@ export const sidebartreeItemClass = recipe({
     borderRadius: token('spacing.sm'),
     textDecoration: 'none',
     fontSize: token('typography.fontSize.sm'),
+    fontWeight: token('typography.weight.primaryFont.semiBold'),
     paddingBlock: token('spacing.sm'),
     cursor: 'pointer',
 
     selectors: {
       '&:hover': {
         backgroundColor: token('color.background.base.@active'),
-        opacity: '.8',
+        color: token('color.text.base.@hover'),
       },
     },
   },
@@ -213,6 +215,11 @@ export const sidebartreeItemClass = recipe({
       },
       false: {
         color: token('color.text.gray.bolder'),
+        selector: {
+          '&:hover': {
+            color: token('color.text.base.@hover'),
+          },
+        },
       },
     },
   },
@@ -226,6 +233,9 @@ globalStyle(`${sidebartreeItemClass()}[data-isactive="false"] svg`, {
   color: token('color.text.gray.bolder'),
   width: '12px',
 });
+globalStyle(`${sidebartreeItemClass()}[data-isactive="false"]:hover svg`, {
+  color: token('color.text.base.@hover'),
+});
 
 export const listItemInlineClass = style([
   atoms({