diff --git a/src/BootstrapBlazor/Components/TreeView/TreeView.razor b/src/BootstrapBlazor/Components/TreeView/TreeView.razor
index 2f79d57a57e..166ac93b5d8 100644
--- a/src/BootstrapBlazor/Components/TreeView/TreeView.razor
+++ b/src/BootstrapBlazor/Components/TreeView/TreeView.razor
@@ -63,28 +63,31 @@ else
 @code {
     private RenderFragment<TreeViewItem<TItem>> RenderTreeRow => item =>
     @<div @key="item" class="@GetContentClassString(item)" data-bb-tree-view-index="@Rows.IndexOf(item)" @oncontextmenu="e => OnContextMenu(e, item)" @oncontextmenu:preventDefault="IsPreventDefault" @ontouchstart="e => OnTouchStart(e, item)" @ontouchend="OnTouchEnd" style="@GetTreeRowStyle(item)">
-        <DynamicElement TagName="i" class="@GetCaretClassString(item)" TriggerClick="CanTriggerClickNode(item)" OnClick="() => OnToggleNodeAsync(item, true)"></DynamicElement>
-        <i class="@NodeLoadingClassString"></i>
-        @if (ShowCheckbox)
-        {
-            <Checkbox Value="@item" IsDisabled="GetItemDisabledState(item)"
-                      SkipValidate="true" ShowLabel="false" ShowAfterLabel="false"
-                      State="@item.CheckedState" OnStateChanged="(state, v) => OnCheckStateChanged(item, state)"
-                      OnBeforeStateChanged="@(MaxSelectedCount > 0 ? state => OnBeforeStateChangedCallback(item, state) : null)" ></Checkbox>
-        }
-        <DynamicElement class="@GetNodeClassString(item)" TriggerClick="TriggerNodeLabel(item)" OnClick="() => OnClick(item)">
-            @if (ShowIcon)
-            {
-                <i class="@GetIconClassString(item)"></i>
-            }
-            @if (item.Template == null)
-            {
-                <span class="@GetItemTextClassString(item)">@item.Text</span>
-            }
-            else
+        <div class="tree-content-header"></div>
+        <div class="tree-content-body">
+            <DynamicElement TagName="i" class="@GetCaretClassString(item)" TriggerClick="CanTriggerClickNode(item)" OnClick="() => OnToggleNodeAsync(item, true)"></DynamicElement>
+            <i class="@NodeLoadingClassString"></i>
+            @if (ShowCheckbox)
             {
-                @item.Template(item.Value)
+                <Checkbox Value="@item" IsDisabled="GetItemDisabledState(item)"
+                          SkipValidate="true" ShowLabel="false" ShowAfterLabel="false"
+                          State="@item.CheckedState" OnStateChanged="(state, v) => OnCheckStateChanged(item, state)"
+                          OnBeforeStateChanged="@(MaxSelectedCount > 0 ? state => OnBeforeStateChangedCallback(item, state) : null)" ></Checkbox>
             }
-        </DynamicElement>
+            <DynamicElement class="@GetNodeClassString(item)" TriggerClick="TriggerNodeLabel(item)" OnClick="() => OnClick(item)">
+                @if (ShowIcon)
+                {
+                    <i class="@GetIconClassString(item)"></i>
+                }
+                @if (item.Template == null)
+                {
+                    <span class="@GetItemTextClassString(item)">@item.Text</span>
+                }
+                else
+                {
+                    @item.Template(item.Value)
+                }
+            </DynamicElement>
+        </div>
     </div>;
 }
diff --git a/src/BootstrapBlazor/Components/TreeView/TreeView.razor.scss b/src/BootstrapBlazor/Components/TreeView/TreeView.razor.scss
index 8b6f5190b1c..c9196a6f316 100644
--- a/src/BootstrapBlazor/Components/TreeView/TreeView.razor.scss
+++ b/src/BootstrapBlazor/Components/TreeView/TreeView.razor.scss
@@ -8,10 +8,12 @@
     --bb-tree-node-padding: #{$bb-tree-node-padding};
     --bb-tree-item-active-color: #{$bb-tree-item-active-color};
     --bb-tree-item-active-bg: #{$bb-tree-item-active-bg};
+    --bb-tree-item-hover-color: #{$bb-tree-item-hover-color};
     --bb-tree-item-hover-bg: #{$bb-tree-item-hover-bg};
     --bb-tree-icon-margin-right: #{$bb-tree-icon-margin-right};
     --bb-tree-disabled-opacity: #{$bb-tree-disabled-opacity};
     --bb-tree-search-height: #{$bb-tree-search-height};
+    --bb-tree-item-bg-radius: var(--bs-border-radius);
     position: relative;
     height: 100%;
 
@@ -31,10 +33,24 @@
     .tree-content {
         position: relative;
         display: flex;
+        flex-wrap: nowrap;
         align-items: center;
-        margin-inline-start: calc(var(--bb-tree-padding-left) * var(--bb-tree-view-level, 0));
         cursor: pointer;
 
+        .tree-content-header {
+            flex-basis: calc(var(--bb-tree-padding-left) * var(--bb-tree-view-level, 0));
+            flex-shrink: 0;
+        }
+
+        .tree-content-body {
+            display: flex;
+            flex-wrap: nowrap;
+            flex-grow: 1;
+            flex-shrink: 0;
+            align-items: center;
+            border-radius: var(--bs-border-radius);
+        }
+
         .node-icon {
             width: 18px;
             height: 18px;
@@ -70,24 +86,28 @@
             }
         }
 
-        &:after {
-            content: "";
-            position: absolute;
-            left: 0;
-            right: 0;
-            top: 0;
-            bottom: 0;
-            pointer-events: none;
-            margin-inline-start: calc(var(--bb-tree-padding-left) * var(--bb-tree-view-level, 0) * -1);
+        .form-check {
+            margin: var(--bb-tree-check-margin);
         }
 
-        &:not(.disabled).active:after {
-            color: var(--bb-tree-item-active-color);
-            background-color: var(--bb-tree-item-active-bg);
+        &:not(.disabled) {
+            &.active {
+                .tree-content-body {
+                    color: var(--bb-tree-item-active-color);
+                    background-color: var(--bb-tree-item-active-bg);
+                }
+            }
+
+            &:hover {
+                .tree-content-body {
+                    color: var(--bb-tree-item-hover-color);
+                    background-color: var(--bb-tree-item-hover-bg);
+                }
+            }
         }
 
-        &:not(.disabled):hover:after {
-            background-color: var(--bb-tree-item-hover-bg);
+        &:not(:last-child) {
+            margin-bottom: 1px;
         }
     }
 
@@ -97,10 +117,6 @@
         padding: var(--bb-tree-node-padding);
         flex: 1;
 
-        .form-check {
-            margin: var(--bb-tree-check-margin);
-        }
-
         .tree-icon {
             width: var(--bb-tree-icon-width);
             text-align: center;
diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
index deecb3a221d..e176729bbb2 100644
--- a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
+++ b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
@@ -663,16 +663,17 @@ $bb-transfer-filter-focus-border-color: #409eff;
 $bb-transfer-filter-margin: .5rem;
 
 // TreeView
-$bb-tree-padding: 0;
+$bb-tree-padding: 0 .5rem;
 $bb-tree-margin: 0;
 $bb-tree-padding-left: 20px;
 $bb-tree-item-margin: 1px 0;
 $bb-tree-icon-width: 22px;
-$bb-tree-check-margin: 0 4px;
+$bb-tree-check-margin: 0 0 0 .5rem;
 $bb-tree-node-padding: .25rem .5rem;
 $bb-tree-item-active-color: var(--bs-body-color);
-$bb-tree-item-active-bg: rgba(var(--bs-body-color-rgb),.08);
-$bb-tree-item-hover-bg: rgba(var(--bs-body-color-rgb),.12);
+$bb-tree-item-active-bg: rgba(var(--bs-body-color-rgb),.12);
+$bb-tree-item-hover-color: var(--bs-body-color);
+$bb-tree-item-hover-bg: rgba(var(--bs-body-color-rgb),.08);
 $bb-tree-icon-margin-right: .5rem;
 $bb-tree-search-height: 43px;
 $bb-tree-disabled-opacity: .5;
diff --git a/test/UnitTest/Components/TreeViewTest.cs b/test/UnitTest/Components/TreeViewTest.cs
index 189cfecd47e..a51e3bebc61 100644
--- a/test/UnitTest/Components/TreeViewTest.cs
+++ b/test/UnitTest/Components/TreeViewTest.cs
@@ -761,7 +761,7 @@ public async Task IsReset_Ok()
     }
 
     [Fact]
-    public async Task CanExpandWhenDisabled_Ok()
+    public void CanExpandWhenDisabled_Ok()
     {
         var items = TreeFoo.GetTreeItems();
         var cut = Context.RenderComponent<TreeView<TreeFoo>>(pb =>