diff --git a/CS/DxBlazorApplication1/Components/Layout/MainLayout.razor b/CS/DxBlazorApplication1/Components/Layout/MainLayout.razor
index 6c62e39..032dd89 100644
--- a/CS/DxBlazorApplication1/Components/Layout/MainLayout.razor
+++ b/CS/DxBlazorApplication1/Components/Layout/MainLayout.razor
@@ -29,7 +29,6 @@
     private RenderFragment drawerHeader => @<div class="navigation-drawer-header">
         <img class="logo" src="images/logo.svg" alt="DevExpress logo" />
         <NavLink href="@UrlGenerator.GetUrl(new Uri(NavigationManager.Uri).LocalPath, !ToggledSidebar)">
-            <DxButton RenderStyle="@ButtonRenderStyle.Light" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="menu-button-nav" IconCssClass="@(ToggledSidebar ? "icon icon-close" : "icon icon-menu")"></DxButton>
         </NavLink>
     </div>;
 
diff --git a/CS/DxBlazorApplication1/Components/Layout/NavMenu.razor b/CS/DxBlazorApplication1/Components/Layout/NavMenu.razor
index c5a3f21..526c61a 100644
--- a/CS/DxBlazorApplication1/Components/Layout/NavMenu.razor
+++ b/CS/DxBlazorApplication1/Components/Layout/NavMenu.razor
@@ -3,7 +3,7 @@
         <Items>
             <DxMenuItem Name="Counter" Text="Counter" CssClass="menu-item" IconCssClass="icon counter-icon"></DxMenuItem>
             <DxMenuItem Name="Weather" Text="Weather" CssClass="menu-item" IconCssClass="icon weather-icon"></DxMenuItem>                                    
-            <DxMenuItem Name="Forms" Text="Forms" CssClass="menu-item" IconCssClass="icon weather-icon"></DxMenuItem>                                    
+            <DxMenuItem Name="Form" Text="Form" CssClass="menu-item" IconCssClass="icon form-icon"></DxMenuItem>                                    
         </Items>
     </DxMenu>
 </div>
diff --git a/CS/DxBlazorApplication1/Components/Layout/NavMenu.razor.css b/CS/DxBlazorApplication1/Components/Layout/NavMenu.razor.css
index d4cd848..fa90228 100644
--- a/CS/DxBlazorApplication1/Components/Layout/NavMenu.razor.css
+++ b/CS/DxBlazorApplication1/Components/Layout/NavMenu.razor.css
@@ -48,6 +48,10 @@
     background-image: url("images/weather.svg");
 }
 
+::deep .form-icon {
+    background-image: url("images/form.svg");
+}
+
 ::deep .counter-icon {
     background-image: url("images/counter.svg");
 }
diff --git a/CS/DxBlazorApplication1/Components/Pages/Counter.razor b/CS/DxBlazorApplication1/Components/Pages/Counter.razor
index 99a48d8..d5c756a 100644
--- a/CS/DxBlazorApplication1/Components/Pages/Counter.razor
+++ b/CS/DxBlazorApplication1/Components/Pages/Counter.razor
@@ -1,6 +1,5 @@
 @page "/counter"
 @rendermode InteractiveServer
-<PageTitle>Counter</PageTitle>
 
 <h1>Counter</h1>
 
diff --git a/CS/DxBlazorApplication1/Components/Pages/Forms.razor b/CS/DxBlazorApplication1/Components/Pages/Form.razor
similarity index 65%
rename from CS/DxBlazorApplication1/Components/Pages/Forms.razor
rename to CS/DxBlazorApplication1/Components/Pages/Form.razor
index 0a600c7..b87fd23 100644
--- a/CS/DxBlazorApplication1/Components/Pages/Forms.razor
+++ b/CS/DxBlazorApplication1/Components/Pages/Form.razor
@@ -1,4 +1,4 @@
-@page "/forms"
+@page "/form"
 
 <style>
     .my-form{
@@ -11,16 +11,17 @@
         <DxTextBox></DxTextBox>
     </DxFormLayoutItem>
     <DxFormLayoutItem Caption="Age">
-        <DxSpinEdit T="int"></DxSpinEdit>
-    </DxFormLayoutItem>
-    <DxFormLayoutItem Caption="DOB">
-        <DxDateEdit T="DateTime"></DxDateEdit>
+        <DxSpinEdit T="int" MinValue="0"></DxSpinEdit>
     </DxFormLayoutItem>
     <DxFormLayoutItem Caption="Hobbies">
         <DxTagBox TData="string" TValue="string" 
             Data="@(new List<string>(){"Swimming", "Hiking", "Chess"})"></DxTagBox>
     </DxFormLayoutItem>
-    <DxFormLayoutItem ColSpanMd="12" Caption="Photo">
-        <DxFileInput></DxFileInput>
+    <DxFormLayoutItem BeginRow="true">
+        <DxFileInput SelectButtonText="Add a Photo"></DxFileInput>
     </DxFormLayoutItem>
 </DxFormLayout>
+
+@code {
+    DateTime Today = DateTime.Today;
+}
\ No newline at end of file
diff --git a/CS/DxBlazorApplication1/Components/Pages/Index.razor b/CS/DxBlazorApplication1/Components/Pages/Index.razor
index 18180fd..a7afff0 100644
--- a/CS/DxBlazorApplication1/Components/Pages/Index.razor
+++ b/CS/DxBlazorApplication1/Components/Pages/Index.razor
@@ -4,6 +4,8 @@
 @inject IJSRuntime JS
 @inject MDIStateHelper StateHelper
 
+<PageTitle>Multi-Tab Interface</PageTitle>
+
 <div @ref=divContainer>
     <DxTabs @ref=tabs
     @bind-ActiveTabIndex=activeTabIndex
@@ -12,13 +14,19 @@
     TabClosing="OnTabClosing"
     RenderMode="TabsRenderMode.AllTabs">
         <DxTabPage CssClass="counter-tab" AllowClose="true" VisibleIndex="@collection.GetVisibleIndexByTabText("Counter")" Visible="@collection.GetVisibleByTabText("Counter")" Text="Counter">
-            <Counter></Counter>
+            <div class="tab-body">
+                <Counter />
+            </div>
         </DxTabPage>
         <DxTabPage CssClass="weather-tab" AllowClose="true" VisibleIndex="@collection.GetVisibleIndexByTabText("Weather")" Visible="@collection.GetVisibleByTabText("Weather")" Text="Weather">
-            <Weather></Weather>
+            <div class="tab-body">
+                <Weather />
+            </div>
         </DxTabPage>
-        <DxTabPage CssClass="forms-tab" AllowClose="true" VisibleIndex="@collection.GetVisibleIndexByTabText("Forms")" Visible="@collection.GetVisibleByTabText("Forms")" Text="Forms">
-            <Forms></Forms>
+        <DxTabPage CssClass="form-tab" AllowClose="true" VisibleIndex="@collection.GetVisibleIndexByTabText("Form")" Visible="@collection.GetVisibleByTabText("Form")" Text="Form">
+            <div class="tab-body">
+                <Form />
+            </div>
         </DxTabPage>
     </DxTabs>
 </div>
diff --git a/CS/DxBlazorApplication1/Components/Pages/Index.razor.css b/CS/DxBlazorApplication1/Components/Pages/Index.razor.css
index 7f0e4ee..84aee24 100644
--- a/CS/DxBlazorApplication1/Components/Pages/Index.razor.css
+++ b/CS/DxBlazorApplication1/Components/Pages/Index.razor.css
@@ -1,4 +1,8 @@
-::deep .welcome-gridlayout {
+.tab-body {
+    padding: 20px 16px;
+}
+
+::deep .welcome-gridlayout {
     margin: auto;
     width: auto;
     height: auto;
diff --git a/CS/DxBlazorApplication1/Components/Pages/Weather.razor b/CS/DxBlazorApplication1/Components/Pages/Weather.razor
index e6ab107..5518c06 100644
--- a/CS/DxBlazorApplication1/Components/Pages/Weather.razor
+++ b/CS/DxBlazorApplication1/Components/Pages/Weather.razor
@@ -5,7 +5,6 @@
 @rendermode InteractiveServer
 @inject WeatherForecastService ForecastService
 
-<PageTitle>Weather</PageTitle>
 <h1>Weather</h1>
 
 @if (forecasts == null)
diff --git a/CS/DxBlazorApplication1/wwwroot/images/form.svg b/CS/DxBlazorApplication1/wwwroot/images/form.svg
new file mode 100644
index 0000000..c2e491e
--- /dev/null
+++ b/CS/DxBlazorApplication1/wwwroot/images/form.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill="white" d="M15.8813 9.2611L14.5923 10.5511L12.4436 8.40109L13.7326 7.11109C14.0193 6.82445 14.3774 7.11109 14.6639 7.39776L15.595 8.32942C15.8813 8.61609 16.1678 8.97443 15.8813 9.2611ZM9.99263 3.00014H1.99865V13.0001H5.99631V15.0001H1.99865C0.899324 15.0001 0 14.1001 0 13.0001V3.00014C0 1.90012 0.899324 1.00012 1.99865 1.00012H9.99263C11.092 1.00012 11.9913 1.90012 11.9913 3.00014V6.00012L9.99263 8.00015V3.00014ZM13.8761 11.2678L10.1462 15.0011H7.99753V12.8511L11.7272 9.11777L13.8761 11.2678Z" />
+</svg>
diff --git a/README.md b/README.md
index 33daed2..1d7d35b 100644
--- a/README.md
+++ b/README.md
@@ -1,34 +1,95 @@
 <!-- default badges list -->
-![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/955986368/24.2.1%2B)
 [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1288385)
 [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
 [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)
 <!-- default badges end -->
-# Product/Platform - Task
+# Blazor Tabs - Create a Dynamic Tabbed Interface
 
-This is the repository template for creating new examples. Describe the solved task here.
+The example demonstrates how to create an interactive multi-tab web interface with DevExpress Blazor [Tabs](https://docs.devexpress.com/Blazor/405074/components/layout/tabs) and [Context Menu](https://docs.devexpress.com/Blazor/405060/components/navigation-controls/context-menu) components.
 
-Put a screenshot that illustrates the result here.
+![Multi-Tab UI](images/blazor-tabbed-ui.png)
 
-Then, add implementation details (steps, code snippets, and other technical information in a free form), or add a link to an existing document with implementation details. 
+It showcases core features that help end users build their personalized workspaces and multitask effectively.
+
+### Organize Content Into Tabs
+
+Place [DxTabs](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTabs) container on the page (_Components/Pages/Index.razor_) and add a [DxTabPage](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTabPage) for each tab.
+
+Insert your custom Blazor components or content directly into each DxTabPage.
+
+```razor
+<DxTabs @ref=tabs
+        @bind-ActiveTabIndex=activeTabIndex
+        AllowTabReorder="true"
+        TabReordering="OnTabReordering"
+        TabClosing="OnTabClosing"
+        RenderMode="TabsRenderMode.AllTabs">
+    <DxTabPage CssClass="counter-tab"
+               AllowClose="true"
+               VisibleIndex="@collection.GetVisibleIndexByTabText("Counter")"
+               Visible="@collection.GetVisibleByTabText("Counter")"
+               Text="Counter">
+        <div class="tab-body">
+            <Counter />
+        </div>
+    </DxTabPage>
+```
+
+The CssClass property of a tab page serves as a unique identifier, allowing client-side scripts to interact with specific tabs.
+
+### Persist Tab State
+
+Implement a custom **MDITab** class to encapsulate specific properties of each individual tab. **MDITabCollection** will control visibility, display order, and titles of all tabs. The title links an underlying object to the visual tab representation in the UI.
+
+Bind these properties to the visual tab elements in the UI. To ensure the MDITabCollection accurately reflects the live interface, implement event handlers for TabReorder and TabClosing. These handlers will listen for user actions and dynamically update the collection to match the current tab state.
+
+To maintain the tab layout across sessions, serialize the collection to JSON and save it to the browser's local storage with **MDIStateHelper** class every time the UI layout changes. It maintains the tab visibility and order even after the user closes and reopens the browser. Tab state is restored in the OnAfterRenderAsync event handler.
+
+### Add Context Menu to Tabs
+
+Create a context menu that allows users to manage tabs:
+
+- Close the current tab.
+- Close all tabs.
+- Close all tabs except for the current one.
+- Restore closed tabs.
+
+Place [DxContextMenu](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxContextMenu) on the page (_Components/Pages/Index.razor_) and add a [DxContextMenuItem](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxContextMenuItem) for each menu action.
+
+```razor
+<DxContextMenu @ref=menu>
+    <Items>
+        <DxContextMenuItem Click="CloseTab" Text="Close"></DxContextMenuItem>
+        <DxContextMenuItem Click="CloseAllTabs" Text="Close All Tabs"></DxContextMenuItem>
+        <DxContextMenuItem Click="CloseOtherTabs" Text="Close Other Tabs"></DxContextMenuItem>
+        <DxContextMenuItem Click="RestoreAllTabs" Text="Restore Closed Tabs"></DxContextMenuItem>
+    </Items>
+</DxContextMenu>
+```
+
+Implement a client-side script (_wwwroot/js/mdi.js_) to handle right-clicks on specific tabs, identified by their CssClass property. This script should prevent the default browser context menu. Capture the mouse position, and invoke a .NET [JSInvokable] method.
 
 ## Files to Review
 
-- link.cs (VB: link.vb)
-- link.js
-- ...
+- Index.razor
+- NavMenu.razor
+- MainLayout.razor
+- MDITab.cs
+- MDITabCollection.cs
+- MDIStateHelper.cs
+- mdi.js
 
 ## Documentation
 
-- link
-- link
-- ...
+- [DxTabs Class](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTabs)
+- [DxTabPage Class](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTabPage)
+- [DxContextMenu Class](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxContextMenu)
+- [DxContextMenuItem Class](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxContextMenuItem)
 
 ## More Examples
 
-- link
-- link
-- ...
+- [Form Layout for Blazor - Tabbed Wizard](https://github.com/DevExpress-Examples/Form-Layout-for-Blazor-Tabbed-Wizard)
+
 <!-- feedback -->
 ## Does this example address your development requirements/objectives?
 
diff --git a/images/blazor-tabbed-ui.png b/images/blazor-tabbed-ui.png
new file mode 100644
index 0000000..101be3f
Binary files /dev/null and b/images/blazor-tabbed-ui.png differ