diff --git a/blazor/sidebar/how-to/sidebar-in-the-dotnet8-application.md b/blazor/sidebar/how-to/sidebar-in-the-dotnet8-application.md
index b577b96553..382a582435 100644
--- a/blazor/sidebar/how-to/sidebar-in-the-dotnet8-application.md
+++ b/blazor/sidebar/how-to/sidebar-in-the-dotnet8-application.md
@@ -13,7 +13,10 @@ documentation: ug
 
 Integrate the Blazor Sidebar component into the `MainLayout.razor` page of the .NET 8 application. Next, include the `@rendermode InteractiveServer` directive in the `Routes.razor` page of the application. When you specify InteractiveServer as the render mode for the Routes component, you are enabling interactive server-side rendering (SSR) for your entire Blazor application.
 
-```cshtml
+N> Add the following code in the `MainLayout.razor` file. The `@Body` property is available only in layout components. If the code is copied into a page such as `Index.razor` or `Home.razor`, the application will throw the compiler error: `CS0103: The name 'Body' does not exist in the current context`.
+
+{% tabs %}
+{% highlight razor tabtitle="MainLayout.razor" %}
 
 @using Syncfusion.Blazor.Navigations
 @using Syncfusion.Blazor.Inputs
@@ -167,14 +170,15 @@ Integrate the Blazor Sidebar component into the `MainLayout.razor` page of the .
 
 </style>
 
-```
-
-```cshtml
+{% endhighlight %}
+{% endtabs %}
 
-<--Add it in Router.razor--->
+{% tabs %}
+{% highlight razor tabtitle="Routes.razor" %}
 
 @rendermode InteractiveServer
 
 <!-- Other codes -->
 
-```
\ No newline at end of file
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file