diff --git a/CS/TreeViewCustomFilter/Shared/MainLayout.razor.css b/CS/TreeViewCustomFilter/Shared/MainLayout.razor.css
index e37787c..f98eaf8 100644
--- a/CS/TreeViewCustomFilter/Shared/MainLayout.razor.css
+++ b/CS/TreeViewCustomFilter/Shared/MainLayout.razor.css
@@ -4,9 +4,9 @@
     background-color: inherit;
 }
 ::deep .page-layout,
-::deep .page-layout > .dx-gridlayout-root,
+::deep .page-layout > .dxbl-gridlayout-root,
 ::deep .layout-item {
-    background-color: inherit;
+    background-color: var(--bs-body-bg, var(--dxbl-body-bg, #fff));
 }
 
 ::deep .content {
@@ -15,7 +15,7 @@
 }
 
 @media (max-width: 1199.98px) {
-    ::deep .page-layout > .dx-gridlayout-root {
+    ::deep .page-layout > .dxbl-gridlayout-root {
         grid-template-columns: minmax(0, 1fr) !important;
     }
 }
diff --git a/CS/TreeViewCustomFilter/Shared/NavMenu.razor.css b/CS/TreeViewCustomFilter/Shared/NavMenu.razor.css
index 5d5b042..175e2b7 100644
--- a/CS/TreeViewCustomFilter/Shared/NavMenu.razor.css
+++ b/CS/TreeViewCustomFilter/Shared/NavMenu.razor.css
@@ -6,7 +6,7 @@
     height: 100%;
     max-height: 100%;
     overflow: auto;
-    background-color: inherit;
+    background-color: var(--bs-body-bg, var(--dxbl-body-bg, #fff));
 }
 
 .sidebar.collapse {
@@ -32,34 +32,21 @@
     }
 }
 
-::deep .app-sidebar > .nav-pills > .nav-item:first-of-type {
-    padding-top: 1rem;
+::deep .app-sidebar {
+    --dxbl-treeview-spacing-x: 0.5rem;
+    --dxbl-treeview-spacing-y: 1rem;
 }
 
-::deep .app-sidebar > .nav-pills > .nav-item:last-of-type {
-    padding-bottom: 1rem;
-}
-
-::deep .app-sidebar .nav-pills > .nav-item a {
-    border-radius: 0px;
-    display: flex;
-    align-items: center;
-}
+::deep .app-sidebar > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-treeview-items-container > .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container {
+    --dxbl-treeview-font-weight: 600;
+}          
 
-::deep .app-sidebar > .nav-pills > .nav-item > a {
-    font-size: 1rem !important;
-    font-weight: 600 !important;
-    padding: .25rem 1rem .25rem .125rem;
-}
-::deep .app-sidebar,
-::deep .app-sidebar > .nav-pills,
-::deep .app-sidebar > .nav-pills > .nav-item,
-::deep .app-sidebar > .nav-pills > .nav-item > a:not(.active) {
-    background-color: inherit;
+::deep .app-sidebar > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-treeview-items-container > .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-btn.dxbl-invisible {
+    display: none;
 }
 
 @media (max-width: 1199.98px) {
-    ::deep .app-sidebar > .nav-pills > .nav-item:last-of-type {
+    ::deep .app-sidebar {
         padding-bottom: 0;
     }
-}
\ No newline at end of file
+}
diff --git a/CS/TreeViewCustomFilter/TreeViewCustomFilter.csproj b/CS/TreeViewCustomFilter/TreeViewCustomFilter.csproj
index b3c5572..ed5f37b 100644
--- a/CS/TreeViewCustomFilter/TreeViewCustomFilter.csproj
+++ b/CS/TreeViewCustomFilter/TreeViewCustomFilter.csproj
@@ -14,6 +14,6 @@
     <Folder Include="wwwroot\images\" />
   </ItemGroup>
   <ItemGroup>
-    <PackageReference Include="DevExpress.Blazor" Version="22.1.2-beta" />
+    <PackageReference Include="DevExpress.Blazor" Version="23.1.3" />
   </ItemGroup>
 </Project>
\ No newline at end of file
diff --git a/CS/TreeViewCustomFilter/image.png b/CS/TreeViewCustomFilter/image.png
index 484de76..91c3808 100644
Binary files a/CS/TreeViewCustomFilter/image.png and b/CS/TreeViewCustomFilter/image.png differ